fix: pr comments

Signed-off-by: Kunaldeep singh <[email protected]>
layer5io · Sep 2, 2023 · f69128b · f69128b
1 parent f832966
commit f69128b
Show file tree

Hide file tree

Showing 21 changed files with 69 additions and 41 deletions.
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
@@ -36,11 +36,6 @@ export { ToggleButtonGroup } from './togglebuttongroup';
 export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';
 export { Typography } from './typography';
-export { Accordion } from './accordion';
-export { AccordionActions } from './accordionactions';
-export { AccordionDetails } from './accordiondetails';
-export { AccordionSummary } from './accordionsummary';
-export { AvatarGroup } from './avatargroup';
 export { Badge } from './badge';
 export { Backdrop } from './backdrop';
 export { CardContent } from './cardcontent';

diff --git a/packages/design-system/index.html b/packages/design-system/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -5,10 +5,11 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@layer5/sistent-components": "0.1.0",
     "@mui/material": "^5.14.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@layer5/sistent-components": "*",
+    "@layer5/sistent-svg": "*"
   },
   "scripts": {
     "dev": "vite",

diff --git a/packages/design-system/src/App.jsx → packages/design-system/src/App.tsx b/packages/design-system/src/App.jsx → packages/design-system/src/App.tsx
@@ -1,4 +1,5 @@
 import { BaseButton } from '@layer5/sistent-components';
+import React from 'react';
 
 function App() {
   return (

diff --git a/packages/design-system/src/main.jsx b/packages/design-system/src/main.jsx
diff --git a/packages/design-system/src/main.tsx b/packages/design-system/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import App from './App';
+import { createRoot } from 'react-dom/client';
+
+const rootContainer = document.getElementById('root');
+const root = createRoot(rootContainer!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/packages/design-system/src/stories/Accordion.stories.tsx b/packages/design-system/src/stories/Accordion.stories.tsx
@@ -3,9 +3,9 @@ import {
   AccordionDetails,
   AccordionSummary,
   Typography
-} from '@layer5/sistent-components/src';
+} from '@layer5/sistent-components';
 import React from 'react';
-import { AddIcon } from '@layer5/sistent-svg/src'; //can anyone suggest a diff icon here?
+import { AddIcon } from '@layer5/sistent-svg'; //can anyone suggest a diff icon here?
 
 export default {
   title: 'Example/Accordion',

diff --git a/packages/design-system/src/stories/AppBar.stories.tsx b/packages/design-system/src/stories/AppBar.stories.tsx
@@ -1,4 +1,4 @@
-import { AppBar, Box, IconButton, Toolbar, Typography } from '@layer5/sistent-components/src';
+import { AppBar, Box, IconButton, Toolbar, Typography } from '@layer5/sistent-components';
 import React from 'react';
 
 export default {

diff --git a/packages/design-system/src/stories/Avatar.stories.tsx b/packages/design-system/src/stories/Avatar.stories.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Stack, AvatarGroup, Badge } from '@layer5/sistent-components/src';
+import { Avatar, Stack, AvatarGroup, Badge } from '@layer5/sistent-components';
 import React from 'react';
 import { AddIcon } from '@layer5/sistent-svg/src'; //can anyone suggest a diff icon here?
 

diff --git a/packages/design-system/src/stories/Backdrop.stories.tsx b/packages/design-system/src/stories/Backdrop.stories.tsx
@@ -1,4 +1,4 @@
-import { Backdrop, BaseButton } from '@layer5/sistent-components/src';
+import { Backdrop, BaseButton } from '@layer5/sistent-components';
 import React from 'react';
 
 export default {

diff --git a/packages/design-system/src/stories/Badge.stories.tsx b/packages/design-system/src/stories/Badge.stories.tsx
@@ -1,6 +1,6 @@
-import { Badge, Stack, Switch } from '@layer5/sistent-components/src';
+import { Badge, Stack, Switch } from '@layer5/sistent-components';
 import React from 'react';
-import { AddIcon } from '@layer5/sistent-svg/src'; //can anyone suggest a diff icon here?
+import { AddIcon } from '@layer5/sistent-svg'; //can anyone suggest a diff icon here?
 
 export default {
   title: 'Example/Badge',

diff --git a/packages/design-system/src/stories/Box.stories.tsx b/packages/design-system/src/stories/Box.stories.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@layer5/sistent-components/src';
+import { Box } from '@layer5/sistent-components';
 import React from 'react';
 
 export default {

diff --git a/packages/design-system/src/stories/Button.stories.tsx b/packages/design-system/src/stories/Button.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BaseButton } from '@layer5/sistent-components/src';
+import { BaseButton } from '@layer5/sistent-components';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {
   title: 'Example/Button',

diff --git a/packages/design-system/src/stories/ButtonGrup.stories.tsx b/packages/design-system/src/stories/ButtonGrup.stories.tsx
@@ -1,4 +1,4 @@
-import { BaseButton, ButtonGroup, Stack, Paper } from '@layer5/sistent-components/src';
+import { BaseButton, ButtonGroup, Stack, Paper } from '@layer5/sistent-components';
 import React from 'react';
 
 export default {

diff --git a/packages/design-system/src/stories/Card.stories.tsx b/packages/design-system/src/stories/Card.stories.tsx
@@ -5,7 +5,7 @@ import {
   Box,
   CardActions,
   CardContent
-} from '@layer5/sistent-components/src';
+} from '@layer5/sistent-components';
 import React from 'react';
 
 export default {

diff --git a/packages/design-system/src/stories/Chip.stories.tsx b/packages/design-system/src/stories/Chip.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Chip, Stack } from '@layer5/sistent-components/src';
+import { Chip, Stack } from '@layer5/sistent-components';
 
 export default {
   title: 'Example/Chip',

diff --git a/packages/design-system/src/stories/Dialog.stories.tsx b/packages/design-system/src/stories/Dialog.stories.tsx
@@ -10,9 +10,9 @@ import {
   AppBar,
   Toolbar,
   IconButton
-} from '@layer5/sistent-components/src';
+} from '@layer5/sistent-components';
 import React from 'react';
-import { AddIconCircleBordered } from '@layer5/sistent-svg/src';
+import { AddIconCircleBordered } from '@layer5/sistent-svg';
 
 export default {
   title: 'Example/Dialog',

diff --git a/packages/design-system/src/stories/Paper.stories.tsx b/packages/design-system/src/stories/Paper.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Paper as MuiPaper } from '@layer5/sistent-components/src';
+import { Box, Paper as MuiPaper } from '@layer5/sistent-components';
 
 export default {
   title: 'Example/Paper',

diff --git a/packages/design-system/src/stories/Select.stories.tsx b/packages/design-system/src/stories/Select.stories.tsx
@@ -1,4 +1,4 @@
-import { Select, Box, MenuItem } from '@layer5/sistent-components/src';
+import { Select, Box, MenuItem } from '@layer5/sistent-components';
 import React from 'react';
 
 export default {

diff --git a/...design-system/src/stories/Tab.stories.jsx → ...design-system/src/stories/Tab.stories.tsx b/...design-system/src/stories/Tab.stories.jsx → ...design-system/src/stories/Tab.stories.tsx
@@ -1,16 +1,21 @@
 import React, { useState } from 'react';
-import { Box, Stack, Tab as MuiTab, Tabs, Typography } from '@layer5/sistent-components/src';
+import { Box, Stack, Tab as MuiTab, Tabs, Typography } from '@layer5/sistent-components';
 
-function TabPanel(props) {
-  const { children, value, index, ...other } = props;
+interface TabPanelProps {
+  children?: React.ReactNode;
+  value: number;
+  index: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index } = props;
 
   return (
     <div
       role="tabpanel"
       hidden={value !== index}
       id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}>
+      aria-labelledby={`simple-tab-${index}`}>
       {value === index && (
         <Box sx={{ p: 3 }}>
           <Typography>{children}</Typography>
@@ -20,17 +25,24 @@ function TabPanel(props) {
   );
 }
 
-function a11yProps(index) {
+function a11yProps(index: number) {
   return {
     id: `simple-tab-${index}`,
     'aria-controls': `simple-tabpanel-${index}`
   };
 }
 
-export const Tab = ({ textColor, disabled, ...rest }) => {
+interface TabProps {
+  textColor?: 'inherit' | 'secondary' | 'primary';
+  disabled?: boolean;
+  indicatorColor?: 'secondary' | 'primary';
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Tab: React.FC<TabProps> = ({ textColor, disabled, ...rest }) => {
   const [value, setValue] = useState(0);
 
-  const handleChange = (event, newValue) => {
+  const handleChange = (_event: React.SyntheticEvent<Element, Event>, newValue: number) => {
     setValue(newValue);
   };
   return (

diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "module": "ESNext",
+    "declaration": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "emitDeclarationOnly": true
+  }
+}