Setup Prettier and Husky

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn format:check && yarn lint-staged

.prettierignore

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

.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",
+  "plugins": ["prettier-plugin-organize-imports"]
 }

README.md

@@ -5,7 +5,7 @@ The Sistent Design System from Layer5 provides the open source building blocks t
 ### Packages
 
 - Design System components in React.js
-- npm package: 
+- npm package:
 
 `@layer5/sistent-components`
 `@layer5/sistent-svg`

package.json

@@ -8,12 +8,25 @@
     "packages/*"
   ],
   "packageManager": "[email protected]",
-  "dependencies": {},
   "devDependencies": {
-    "prettier": "^3.0.2"
+    "eslint": "^8.48.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "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",
+    "postinstall": "husky install",
+    "prepack": "pinst --disable",
+    "postpack": "pinst --enable"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,md}": [
+      "eslint --fix",
+      "yarn format:write"
+    ]
   }
 }

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/accordion.tsx

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

packages/components/src/accordionactions.tsx

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

packages/components/src/accordiondetails.tsx

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

packages/components/src/accordionsummary.tsx

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

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/avatargroup.tsx

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

packages/components/src/backdrop.tsx

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

packages/components/src/badge.tsx

@@ -1,5 +1,5 @@
+import { BadgeProps, Badge as MuiBadge } from '@mui/material';
 import React from 'react';
-import { Badge as MuiBadge, BadgeProps } from '@mui/material';
 
 export function Badge(props: BadgeProps) {
   return <MuiBadge {...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 { ButtonProps, Button as MuiButton } from '@mui/material';
 import * as React from 'react';
-import { Button as MuiButton, ButtonProps } from '@mui/material';
 
 export const BaseButton = (props: ButtonProps) => {
   return <MuiButton {...props} />;

packages/components/src/buttongroup.tsx

@@ -1,5 +1,5 @@
+import { ButtonGroupProps, ButtonGroup as MuiButtonGroup } from '@mui/material';
 import React from 'react';
-import { ButtonGroup as MuiButtonGroup, ButtonGroupProps } from '@mui/material';
 
 export const ButtonGroup = (props: ButtonGroupProps) => {
   return <MuiButtonGroup {...props} />;

packages/components/src/card.tsx

@@ -1,5 +1,5 @@
+import { CardProps, Card as MuiCard } from '@mui/material';
 import React from 'react';
-import { Card as MuiCard, CardProps } from '@mui/material';
 
 export const Card = (props: CardProps) => {
   return <MuiCard {...props} />;

packages/components/src/checkbox.tsx

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

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,9 @@
 export { AppBar } from './appbar';
 export { Avatar } from './avatar';
-export { BaseButton } from './button';
 export { Box } from './box';
+export { BaseButton } from './button';
+export { ButtonGroup } from './buttongroup';
+export { Card } from './card';
 export { Chip } from './chip';
 export { Dialog } from './dialog';
 export { DialogActions } from './dialogactions';
@@ -10,18 +12,16 @@ export { DialogContentText } from './dialogcontenttext';
 export { DialogTitle } from './dialogtitle';
 export { Divider } from './divider';
 export { IconButton } from './iconbutton';
+export { List } from './list';
+export { Menu } from './menu';
 export { Paper } from './paper';
+export { Select } from './select';
 export { Stack } from './stack';
+export { Switch } from './switch';
 export { Tab } from './tab';
+export { Table } from './table';
 export { Tabs } from './tabs';
+export { TextField } from './textfield';
 export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';
 export { Typography } from './typography';
-export { Card } from './card';
-export { Menu } from './menu';
-export { Table } from './table';
-export { List } from './list';
-export { TextField } from './textfield';
-export { Switch } from './switch';
-export { Select } from './select';
-export { ButtonGroup } from './buttongroup';

packages/components/src/list.tsx

@@ -1,5 +1,5 @@
+import { ListProps, List as MuiList } from '@mui/material';
 import React from 'react';
-import { List as MuiList, ListProps } from '@mui/material';
 
 export const List = (props: ListProps) => {
   return <MuiList {...props} />;

packages/components/src/menu.tsx

@@ -1,5 +1,5 @@
+import { MenuProps, Menu as MuiMenu } from '@mui/material';
 import React from 'react';
-import { Menu as MuiMenu, MenuProps } from '@mui/material';
 
 export const Menu = (props: MenuProps) => {
   return <MuiMenu {...props} />;

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/radiogroup.tsx

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

packages/components/src/select.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Select as MuiSelect, SelectProps } from '@mui/material';
+import React from 'react';
 
 export const Select = (props: SelectProps) => {
   return <MuiSelect {...props} />;

packages/components/src/slide.tsx

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

packages/components/src/switch.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Switch as MuiSwitch, SwitchProps } from '@mui/material';
+import React from 'react';
 
 export const Switch = (props: SwitchProps) => {
   return <MuiSwitch {...props} />;

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/table.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Table as MuiTable, TableProps } from '@mui/material';
+import React from 'react';
 
 export const Table = (props: TableProps) => {
   return <MuiTable {...props} />;

packages/components/src/textfield.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { TextField as MuiTextField, TextFieldProps } from '@mui/material';
+import React from 'react';
 
 export const TextField = (props: TextFieldProps) => {
   return <MuiTextField {...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} />;