Setup Prettier and Husky

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+dist
+coverage
+

.prettierrc

@@ -1,8 +1,9 @@
 {
-    "semi": true,
-    "tabWidth": 2,
-    "printWidth": 100,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "jsxBracketSameLine": true
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxBracketSameLine": true,
+  "plugins": ["prettier-plugin-organize-imports"]
 }

package.json

@@ -12,13 +12,25 @@
     "@changesets/cli": "^2.26.2"
   },
   "devDependencies": {
-    "prettier": "^3.0.2"
+    "eslint": "^8.48.0",
+    "husky": "^8.0.3",
+    "prettier": "^3.0.2",
+    "prettier-plugin-organize-imports": "^3.2.3"
   },
   "scripts": {
     "build-all": "yarn workspaces run build",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
+    "format:check": "prettier --check \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
+    "format:write": "prettier --write \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "yarn run build-all && changeset publish"
+    "release": "yarn run build-all && changeset publish",
+    "postinstall": "husky install",
+    "prepack": "pinst --disable",
+    "postpack": "pinst --enable"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
+    ]
   }
 }

packages/components/.prettierrc

@@ -1,8 +1,8 @@
 {
-    "semi": true,
-    "tabWidth": 2,
-    "printWidth": 100,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "jsxBracketSameLine": true
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxBracketSameLine": true
 }

packages/components/src/appbar.tsx

@@ -1,5 +1,5 @@
+import { AppBarProps, AppBar as MuiAppBar } from '@mui/material';
 import React from 'react';
-import { AppBar as MuiAppBar, AppBarProps } from '@mui/material';
 
 export function AppBar(props: AppBarProps) {
   return <MuiAppBar {...props} />;

packages/components/src/avatar.tsx

@@ -1,5 +1,5 @@
+import { AvatarProps, Avatar as MuiAvatar } from '@mui/material';
 import React from 'react';
-import { Avatar as MuiAvatar, AvatarProps } from '@mui/material';
 
 export function Avatar(props: AvatarProps) {
   return <MuiAvatar {...props} />;

packages/components/src/box.tsx

@@ -1,5 +1,5 @@
+import { BoxProps, Box as MuiBox } from '@mui/material';
 import React from 'react';
-import { Box as MuiBox, BoxProps } from '@mui/material';
 
 export function Box(props: BoxProps) {
   return <MuiBox {...props} />;

packages/components/src/button.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Button } from '@mui/material';
+import * as React from 'react';
 
 export const BaseButton = (_props: any) => {
   return <Button variant="contained">Hello world</Button>;

packages/components/src/chip.tsx

@@ -1,5 +1,5 @@
+import { ChipProps, Chip as MuiChip } from '@mui/material';
 import React from 'react';
-import { Chip as MuiChip, ChipProps } from '@mui/material';
 
 export function Chip(props: ChipProps) {
   return <MuiChip {...props} />;

packages/components/src/dialog.tsx

@@ -1,5 +1,5 @@
+import { DialogProps, Dialog as MuiDialog } from '@mui/material';
 import React from 'react';
-import { Dialog as MuiDialog, DialogProps } from '@mui/material';
 
 export function Dialog(props: DialogProps) {
   return <MuiDialog {...props} />;

packages/components/src/dialogactions.tsx

@@ -1,5 +1,5 @@
+import { DialogActionsProps, DialogActions as MuiDialogActions } from '@mui/material';
 import React from 'react';
-import { DialogActions as MuiDialogActions, DialogActionsProps } from '@mui/material';
 
 export function DialogActions(props: DialogActionsProps) {
   return <MuiDialogActions {...props} />;

packages/components/src/dialogcontent.tsx

@@ -1,5 +1,5 @@
+import { DialogContentProps, DialogContent as MuiDialogContent } from '@mui/material';
 import React from 'react';
-import { DialogContent as MuiDialogContent, DialogContentProps } from '@mui/material';
 
 export function DialogContent(props: DialogContentProps) {
   return <MuiDialogContent {...props} />;

packages/components/src/dialogcontenttext.tsx

@@ -1,5 +1,5 @@
+import { DialogContentTextProps, DialogContentText as MuiDialogContentText } from '@mui/material';
 import React from 'react';
-import { DialogContentText as MuiDialogContentText, DialogContentTextProps } from '@mui/material';
 
 export function DialogContentText(props: DialogContentTextProps) {
   return <MuiDialogContentText {...props} />;

packages/components/src/dialogtitle.tsx

@@ -1,5 +1,5 @@
+import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
 import React from 'react';
-import { DialogTitle as MuiDialogTitle, DialogTitleProps } from '@mui/material';
 
 export function DialogTitle(props: DialogTitleProps) {
   return <MuiDialogTitle {...props} />;

packages/components/src/divider.tsx

@@ -1,5 +1,5 @@
+import { DividerProps, Divider as MuiDivider } from '@mui/material';
 import React from 'react';
-import { Divider as MuiDivider, DividerProps } from '@mui/material';
 
 export function Divider(props: DividerProps) {
   return <MuiDivider {...props} />;

packages/components/src/drawer.tsx

@@ -1,5 +1,5 @@
+import { DrawerProps, Drawer as MuiDrawer } from '@mui/material';
 import React from 'react';
-import { Drawer as MuiDrawer, DrawerProps } from '@mui/material';
 
 export function Drawer(props: DrawerProps) {
   return <MuiDrawer {...props} />;

packages/components/src/iconbutton.tsx

@@ -1,4 +1,4 @@
-import { IconButton as MuiIconButton, IconButtonProps } from '@mui/material';
+import { IconButtonProps, IconButton as MuiIconButton } from '@mui/material';
 import React from 'react';
 
 export function IconButton(props: IconButtonProps) {

packages/components/src/index.tsx

@@ -1,7 +1,7 @@
 export { AppBar } from './appbar';
 export { Avatar } from './avatar';
-export { BaseButton } from './button';
 export { Box } from './box';
+export { BaseButton } from './button';
 export { Chip } from './chip';
 export { Dialog } from './dialog';
 export { DialogActions } from './dialogactions';

packages/components/src/paper.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Paper as MuiPaper, PaperProps } from '@mui/material';
+import React from 'react';
 
 export function Paper(props: PaperProps) {
   return <MuiPaper {...props}>{props.children}</MuiPaper>;

packages/components/src/tab.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Tab as MuiTab, TabProps } from '@mui/material';
+import React from 'react';
 
 export function Tab(props: TabProps) {
   return <MuiTab {...props} />;

packages/components/src/toolbar.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Toolbar as MuiToolbar, ToolbarProps } from '@mui/material';
+import React from 'react';
 
 export function Toolbar(props: ToolbarProps) {
   return <MuiToolbar {...props} />;

packages/components/src/tooltip.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Tooltip as MuiTooltip, TooltipProps } from '@mui/material';
+import React from 'react';
 
 export function Tooltip(props: TooltipProps) {
   return <MuiTooltip {...props} />;

packages/design-system/.eslintrc.cjs

@@ -1,24 +1,24 @@
 module.exports = {
-    env: {
-        browser: true,
-        es2021: true
-    },
-    extends: ['standard-with-typescript', 'plugin:react/recommended', 'plugin:prettier/recommended'],
-    overrides: [
-        {
-            env: {
-                node: true
-            },
-            files: ['.eslintrc.{js,cjs}'],
-            parserOptions: {
-                sourceType: 'script'
-            }
-        }
-    ],
-    parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-    },
-    plugins: ['react'],
-    rules: {}
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ['standard-with-typescript', 'plugin:react/recommended', 'plugin:prettier/recommended'],
+  overrides: [
+    {
+      env: {
+        node: true
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script'
+      }
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['react'],
+  rules: {}
 };

packages/design-system/.prettierrc

@@ -1,8 +1,8 @@
 {
-    "semi": true,
-    "tabWidth": 2,
-    "printWidth": 100,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "jsxBracketSameLine": true
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxBracketSameLine": true
 }

packages/design-system/.storybook/main.js

@@ -1,18 +1,18 @@
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  staticDirs: ["../public"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../public'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
   ],
   framework: {
-    name: "@storybook/react-vite",
-    options: {},
+    name: '@storybook/react-vite',
+    options: {}
   },
   docs: {
-    autodocs: "tag",
-  },
+    autodocs: 'tag'
+  }
 };
 export default config;

packages/design-system/.storybook/preview.js

@@ -1,18 +1,18 @@
-import { CssBaseline, ThemeProvider } from "@mui/material";
-import { lightTheme, darkTheme } from "../src/stories/themes/app";
-import { withThemeFromJSXProvider } from "@storybook/addon-styling";
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { lightTheme, darkTheme } from '../src/stories/themes/app';
+import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
+        date: /Date$/
+      }
+    }
+  }
 };
 
 export default preview;
@@ -23,8 +23,8 @@ export const decorators = [
       light: lightTheme,
       dark: darkTheme
     },
-    defaultTheme: "light",
+    defaultTheme: 'light',
     Provider: ThemeProvider,
     GlobalStyles: CssBaseline
-  }),
+  })
 ];

packages/design-system/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

packages/design-system/src/App.jsx

@@ -1,12 +1,12 @@
 import { BaseButton } from '@layer5/sistent-components';
 
 function App() {
-    return (
-        <div className="App">
-            <BaseButton>Hello</BaseButton>
-            Welcome To Sistent Design System for Layer5
-        </div>
-    );
+  return (
+    <div className="App">
+      <BaseButton>Hello</BaseButton>
+      Welcome To Sistent Design System for Layer5
+    </div>
+  );
 }
 
 export default App;

packages/design-system/src/main.jsx

@@ -1,9 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );