fix(components): refactor components

Signed-off-by: Antonette Caldwell <[email protected]>

apps/design-system/package.json

@@ -10,7 +10,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix",
     "preview": "vite preview",
-    "storybook": "BROWSER=none storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "@layer5/sistent-components": "workspace:^",

packages/components/.eslintrc.cjs

@@ -9,10 +9,10 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
+    project: ['./tsconfig.json'],
     tsconfigRootDir: __dirname,
    },
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'tsup.config.ts'],
   parser: '@typescript-eslint/parser',
   plugins: ['react'],
   rules: {

packages/components/package.json

@@ -5,18 +5,19 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     }
   },
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.es.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsc && NODE_ENV=production vite build",
+    "build": "NODE_ENV=production tsup",
+    "dev": "NODE_ENV=development tsup",
     "lint": "eslint .",
     "lint:fix": "eslint --fix"
   },
@@ -36,22 +37,19 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.33.2",
     "mui-datatables": "^4.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
-    "typescript": "^5.0.2",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.5.3",
-    "vite-tsconfig-paths": "^4.2.1"
+    "tsconfig": "workspace:^",
+    "tsup": "^7.2.0",
+    "typescript": "^5.0.2"
   },
   "peerDependencies": {
     "@emotion/react": "*",
     "@emotion/styled": "*",
     "@mui/material": "*",
     "@types/mui-datatables": "*",
     "mui-datatables": "*",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "react": ">=17",
+    "react-dom": ">=17",
     "react-error-boundary": "*"
   },
   "peerDependenciesMeta": {
@@ -69,8 +67,15 @@
     },
     "react": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
+  "optionalDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/components/src/base/Accordion/accordion.tsx

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

packages/components/src/base/Accordion/accordionactions.tsx

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

packages/components/src/base/Accordion/accordiondetails.tsx

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

packages/components/src/base/Accordion/accordionsummary.tsx

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

packages/components/src/base/AppBar/appbar.tsx

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

packages/components/src/base/Avatar/avatar.tsx

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

packages/components/src/base/Avatar/avatargroup.tsx

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

packages/components/src/base/Avatar/badge.tsx

@@ -1,5 +1,5 @@
 import { Badge as MuiBadge, type BadgeProps } from '@mui/material';
 
-export function Badge(props: BadgeProps) {
+export function Badge(props: BadgeProps): JSX.Element {
   return <MuiBadge {...props} />;
 }

packages/components/src/base/Box/box.tsx

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

packages/components/src/base/Button/button.tsx

@@ -1,12 +1,11 @@
 import { Button as MuiButton, type ButtonProps as MuiButtonProps } from '@mui/material';
-import { ReactNode } from 'react';
 
 export interface ButtonProps extends MuiButtonProps {
   label?: string;
-  children?: ReactNode;
+  children?: React.ReactNode;
 }
 
-export function Button({ label, children, ...props }: ButtonProps) {
+export function Button({ label, children, ...props }: ButtonProps): JSX.Element {
   return (
     <MuiButton {...props}>
       {label}

packages/components/src/base/Button/buttongroup.tsx

@@ -1,5 +1,5 @@
 import { ButtonGroup as MuiButtonGroup, type ButtonGroupProps } from '@mui/material';
 
-export function ButtonGroup(props: ButtonGroupProps) {
+export function ButtonGroup(props: ButtonGroupProps): JSX.Element {
   return <MuiButtonGroup {...props} />;
 }

packages/components/src/base/Button/iconbutton.tsx

@@ -1,5 +1,5 @@
 import { IconButton as MuiIconButton, type IconButtonProps } from '@mui/material';
 
-export function IconButton(props: IconButtonProps) {
+export function IconButton(props: IconButtonProps): JSX.Element {
   return <MuiIconButton {...props} />;
 }

packages/components/src/base/Card/card.tsx

@@ -1,5 +1,5 @@
 import { Card as MuiCard, type CardProps } from '@mui/material';
 
-export function Card(props: CardProps) {
+export function Card(props: CardProps): JSX.Element {
   return <MuiCard {...props} />;
 }

packages/components/src/base/Card/cardactions.tsx

@@ -1,5 +1,5 @@
 import { CardActions as MuiCardActions, type CardActionsProps } from '@mui/material';
 
-export function CardActions(props: CardActionsProps) {
+export function CardActions(props: CardActionsProps): JSX.Element {
   return <MuiCardActions {...props} />;
 }

packages/components/src/base/Card/cardcontent.tsx

@@ -1,5 +1,5 @@
 import { CardContent as MuiCardContent, type CardContentProps } from '@mui/material';
 
-export function CardContent(props: CardContentProps) {
+export function CardContent(props: CardContentProps): JSX.Element {
   return <MuiCardContent {...props} />;
 }

packages/components/src/base/Checkbox/checkbox.tsx

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

packages/components/src/base/Chip/chip.tsx

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

packages/components/src/base/ClickAwayListener/ClickAwayListener.tsx

@@ -2,6 +2,6 @@ import {
   ClickAwayListener as MuiClickAwayListener,
   type ClickAwayListenerProps
 } from '@mui/material';
-export function ClickAwayListener(props: ClickAwayListenerProps) {
+export function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {
   return <MuiClickAwayListener {...props} />;
 }

packages/components/src/base/DataTable/index.tsx

@@ -1 +1,3 @@
-export * from 'mui-datatables';
+import * as DataTable from 'mui-datatables';
+
+export { DataTable };

packages/components/src/base/Dialog/backdrop.tsx

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

packages/components/src/base/Dialog/dialog.tsx

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

packages/components/src/base/Dialog/dialogactions.tsx

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

packages/components/src/base/Dialog/dialogcontent.tsx

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

packages/components/src/base/Dialog/dialogcontenttext.tsx

@@ -3,6 +3,6 @@ import {
   type DialogContentTextProps
 } from '@mui/material';
 
-export function DialogContentText(props: DialogContentTextProps) {
+export function DialogContentText(props: DialogContentTextProps): JSX.Element {
   return <MuiDialogContentText {...props} />;
 }

packages/components/src/base/Dialog/dialogtitle.tsx

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

packages/components/src/base/Divider/divider.tsx

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

packages/components/src/base/Drawer/drawer.tsx

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

packages/components/src/base/Form/formcontrollabel.tsx

@@ -1,5 +1,5 @@
 import { FormControlLabel as MuiFormControlLabel, type FormControlLabelProps } from '@mui/material';
 
-export function FormControlLabel(props: FormControlLabelProps) {
+export function FormControlLabel(props: FormControlLabelProps): JSX.Element {
   return <MuiFormControlLabel {...props} />;
 }

packages/components/src/base/Grid/grid.tsx

@@ -0,0 +1,5 @@
+import { Grid as MuiGrid, GridProps as MuiGridProps } from '@mui/material';
+
+export function Grid(props: MuiGridProps): JSX.Element {
+  return <MuiGrid {...props} />;
+}

packages/components/src/base/List/list.tsx

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

packages/components/src/base/Menu/menu.tsx

@@ -1,5 +1,5 @@
 import { Menu as MuiMenu, type MenuProps } from '@mui/material';
 
-export function Menu(props: MenuProps) {
+export function Menu(props: MenuProps): JSX.Element {
   return <MuiMenu {...props} />;
 }

packages/components/src/base/Menu/menuitem.tsx

@@ -1,5 +1,5 @@
 import { MenuItem as MuiMenuItem, type MenuItemProps } from '@mui/material';
 
-export function MenuItem(props: MenuItemProps) {
+export function MenuItem(props: MenuItemProps): JSX.Element {
   return <MuiMenuItem {...props} />;
 }

packages/components/src/base/Paper/paper.tsx

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

packages/components/src/base/Popper/popper.tsx

@@ -1,5 +1,5 @@
 import { Popper as MuiPopper, type PopperProps } from '@mui/material';
 
-export function Popper(props: PopperProps) {
+export function Popper(props: PopperProps): JSX.Element {
   return <MuiPopper {...props} />;
 }

packages/components/src/base/Radio/radiogroup.tsx

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

packages/components/src/base/Select/select.tsx

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

packages/components/src/base/Slide/slide.tsx

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

packages/components/src/base/Stack/stack.tsx

@@ -1,5 +1,5 @@
 import { Stack as MuiStack, type StackProps } from '@mui/material';
 
-export function Stack(props: StackProps) {
+export function Stack(props: StackProps): JSX.Element {
   return <MuiStack {...props} />;
 }

packages/components/src/base/Switch/switch.tsx

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

packages/components/src/base/Table/table.tsx

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

packages/components/src/base/Tabs/tab.tsx

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

packages/components/src/base/Tabs/tabs.tsx

@@ -1,5 +1,5 @@
 import { Tabs as MuiTabs, type TabsProps } from '@mui/material';
 
-export function Tabs(props: TabsProps) {
+export function Tabs(props: TabsProps): JSX.Element {
   return <MuiTabs {...props} />;
 }