@galaxy-ds/core 2.0.2 → 2.0.4

package/src/Table/{TableProps.types.tsx → Table.types.ts}

@@ -1,11 +1,8 @@
-import { TableProps as MuiTableProps } from '@mui/material'
+import { TableProps as MuiTableProps } from '@mui/material';
 
 export interface TableProps extends MuiTableProps {
-  children: React.ReactNode;
-  padding?: 'normal' | 'checkbox' | 'none';
-  size?: 'small' | 'medium';
   /**
    * The component used for the root node. Either a string to use a HTML element or a component. Default to 'table'.
    */
   component?: React.ElementType;
-}
+}

package/src/Table/index.ts

@@ -1,2 +1,2 @@
-export * from './TableProps.types';
-export * from './Table';
+export * from './Table.types';
+export * from './Table';

package/src/TableBody/TableBody.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { TableBody } from './TableBody';
 
-test('renders', () => {
+test('TableBody', () => {
   render(<TableBody />);
-});
+});

package/src/TableBody/TableBody.tsx

@@ -1,11 +1,7 @@
-
-import React from "react";
+import React from 'react';
 import { TableBody as MuiTableBody } from '@mui/material';
-import { TableBodyProps } from "./TableBodyProps.types";
-
+import { TableBodyProps } from './TableBody.types';
 
 export const TableBody: React.FC<TableBodyProps> = (props: TableBodyProps) => {
-  return (
-    <MuiTableBody {...props}/>
-  )
-}
+  return <MuiTableBody {...props} />;
+};

package/src/TableBody/index.ts

@@ -1,2 +1,2 @@
-export * from './TableBodyProps.types';
-export * from './TableBody';
+export * from './TableBody.types';
+export * from './TableBody';

package/src/TableCell/TableCell.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { TableCell } from './TableCell';
 
-test('renders', () => {
+test('TableCell', () => {
   render(<TableCell />);
-});
+});

package/src/TableCell/TableCell.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TableCell as MuiTableCell } from '@mui/material';
-import { TableCellProps } from './TableCellProps.types';
+import { TableCellProps } from './TableCell.types';
 
 export const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
   const { variant, width, sx, ...rest } = props;

package/src/TableCell/TableCell.types.ts

@@ -0,0 +1,11 @@
+import {
+  TableCellProps as MuiTableCellProps,
+  TableCellBaseProps,
+} from '@mui/material';
+export interface TableCellProps extends MuiTableCellProps {
+  width?: number;
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType<TableCellBaseProps>;
+}

package/src/TableCell/index.ts

@@ -1,2 +1,2 @@
-export * from './TableCellProps.types';
-export * from './TableCell';
+export * from './TableCell.types';
+export * from './TableCell';

package/src/TableCellIcon/TableCellIcon.stories.mdx

@@ -14,7 +14,11 @@ import { TableCellIcon } from "./TableCellIcon";
 TableCellIcon ....
 
 <Canvas withToolbar>
-  <Story name="Default" args={{}}>
+  <Story name="Default" args={{}} parameters={{ docs: { source: { code: `
+<TableCellIcon>
+  <Icon name={SvgCalendar} />
+</TableCellIcon>
+  `}}}}>
     {args => 
       <TableCellIcon {...args}>
         <Icon name={SvgCalendar} />
@@ -25,7 +29,11 @@ TableCellIcon ....
 ### Alignment
 
 <Canvas withToolbar>
-  <Story name="Alignment" args={{}}>
+  <Story name="Alignment" args={{}} parameters={{ docs: { source: { code: `
+<TableCellIcon><Icon name={SvgCalendar} /></TableCellIcon>
+<TableCellIcon align="center"><Icon name={SvgCalendar} /></TableCellIcon>
+<TableCellIcon align="right"><Icon name={SvgCalendar} /></TableCellIcon>
+  `}}}}>
     {args => 
       <Stack spacing={2} style={{ width: 400 }}>
         <TableCellIcon {...args}><Icon name={SvgCalendar} /></TableCellIcon>

package/src/TableCellIcon/TableCellIcon.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { TableCellIcon } from './TableCellIcon';
 
-test('renders', () => {
+test('TableCellIcon', () => {
   render(<TableCellIcon />);
-});
+});

package/src/TableCellIcon/TableCellIcon.tsx

@@ -1,23 +1,29 @@
 import React from 'react';
-import { styled } from "@mui/material"
-import { TableCellIconProps } from "./TableCellIconProps.types";
+import { styled } from '@mui/material';
+import { TableCellIconProps } from './TableCellIcon.types';
 
 const TableCellIconContainer = styled('div')``;
 
-export const TableCellIcon: React.FC<TableCellIconProps> = (props: TableCellIconProps) => {
-  const {align, ...rest} = props;
+export const TableCellIcon: React.FC<TableCellIconProps> = (
+  props: TableCellIconProps
+) => {
+  const { align, ...rest } = props;
 
   return (
-    <TableCellIconContainer 
-      {...rest} 
-      sx={{ 
+    <TableCellIconContainer
+      sx={{
         display: 'flex',
         alignItems: 'center',
-        justifyContent: align === 'center' ? 'center'
-        : align === 'right' ? 'flex-end'
-        : 'flex-start', 
-      }}>
-        {props.children}
+        justifyContent:
+          align === 'center'
+            ? 'center'
+            : align === 'right'
+            ? 'flex-end'
+            : 'flex-start',
+      }}
+      {...rest}
+    >
+      {props.children}
     </TableCellIconContainer>
-  )
-}
+  );
+};

package/src/TableCellIcon/index.ts

@@ -1,2 +1,2 @@
-export * from './TableCellIconProps.types';
-export * from './TableCellIcon';
+export * from './TableCellIcon.types';
+export * from './TableCellIcon';

package/src/TableContainer/TableContainer.stories.mdx

@@ -1,5 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { TableContainer } from "./TableContainer";
+import { Table } from "../Table";
+import { TableHead } from "../TableHead";
+import { TableRow } from "../TableRow";
+import { TableCell } from "../TableCell";
 
 <Meta
   title="components/Table/TableContainer"
@@ -10,8 +14,45 @@ import { TableContainer } from "./TableContainer";
 TableContainer ....
 
 <Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {args => <TableContainer {...args}/>}
+  <Story name="Default" args={{}} parameters={{ docs: { source: { code: `
+<TableContainer>
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell>
+          Shared with
+        </TableCell>
+        <TableCell>
+          Shared as
+        </TableCell>
+        <TableCell>
+          Access
+        </TableCell>
+      </TableRow>
+    </TableHead>
+  </Table>
+</TableContainer>
+  `}}}}>
+    {(args) => (
+      <TableContainer {...args}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>
+                  Shared with
+                </TableCell>
+                <TableCell>
+                  Shared as
+                </TableCell>
+                <TableCell>
+                  Access
+                </TableCell>
+              </TableRow>
+            </TableHead>
+          </Table>
+        </TableContainer>
+    )
+   }
   </Story>
 </Canvas>
 

package/src/TableContainer/TableContainer.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { TableContainer } from './TableContainer';
 
-test('renders', () => {
+test('TableContainer', () => {
   render(<TableContainer />);
-});
+});

package/src/TableContainer/TableContainer.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React from 'react';
 import { TableContainer as MuiTableContainer } from '@mui/material';
-import { TableContainerProps } from "./TableContainerProps.types";
+import { TableContainerProps, TableContainerRef } from './TableContainer.types';
 
-export const TableContainer: React.FC<TableContainerProps> = React.forwardRef((props: TableContainerProps, ref: any) => {
-  return (
-    <MuiTableContainer ref={ref} {...props}/>
-  )
-})
+export const TableContainer = React.forwardRef<
+  TableContainerRef,
+  TableContainerProps
+>(function TableContainer(props, ref) {
+  return <MuiTableContainer ref={ref} {...props} />;
+});

package/src/TableContainer/{TableContainerProps.types.ts → TableContainer.types.ts}

@@ -1,3 +1,5 @@
 import { TableContainerProps as MuiTableContainerProps } from '@mui/material';
 
 export interface TableContainerProps extends MuiTableContainerProps {}
+
+export type TableContainerRef = HTMLDivElement;

package/src/TableContainer/index.ts

@@ -1,2 +1,2 @@
-export * from './TableContainerProps.types';
+export * from './TableContainer.types';
 export * from './TableContainer';

package/src/TableFooter/TableFooter.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { TableFooter } from './TableFooter';
 
-test('renders', () => {
+test('TableFooter', () => {
   render(<TableFooter />);
-});
+});

package/src/TableFooter/TableFooter.tsx

@@ -1,14 +1,10 @@
+import React from 'react';
+import { TableFooter as MuiTableFooter } from '@mui/material';
+import { TableFooterProps } from './TableFooter.types';
 
-import React from "react";
-import { TableFooter as MuiTableFooter } from '@mui/material'
-import { TableFooterProps } from "./TableFooterProps.types";
-
-export const TableFooter: React.FC<TableFooterProps> = (props: TableFooterProps) => {
-  const {children, ...rest} = props
-  return (
-    <MuiTableFooter {...rest}>
-      {children}
-    </MuiTableFooter>
-  )
-}
-
+export const TableFooter: React.FC<TableFooterProps> = (
+  props: TableFooterProps
+) => {
+  const { children, ...rest } = props;
+  return <MuiTableFooter {...rest}>{children}</MuiTableFooter>;
+};

package/src/TableFooter/TableFooter.types.ts

@@ -0,0 +1,2 @@
+import { TableFooterProps as MuiTableFooterProps } from '@mui/material';
+export interface TableFooterProps extends MuiTableFooterProps {}

package/src/TableFooter/index.ts

@@ -1,2 +1,2 @@
-export * from './TableFooterProps.types';
-export * from './TableFooter';
+export * from './TableFooter.types';
+export * from './TableFooter';

package/src/TableHead/TableHead.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { TableHead } from './TableHead';
 
-test('renders', () => {
+test('TableHead', () => {
   render(<TableHead />);
-});
+});

package/src/TableHead/TableHead.tsx

@@ -1,10 +1,7 @@
-import React from "react";
-import { TableHead as MuiTableHead } from '@mui/material'
-import { TableHeadProps } from "./TableHeadProps.types";
+import React from 'react';
+import { TableHead as MuiTableHead } from '@mui/material';
+import { TableHeadProps } from './TableHead.types';
 
 export const TableHead: React.FC<TableHeadProps> = (props: TableHeadProps) => {
-  return (
-    <MuiTableHead {...props}/>
-  )
-}
-
+  return <MuiTableHead {...props} />;
+};

package/src/TableHead/TableHead.types.ts

@@ -0,0 +1,3 @@
+import { TableHeadProps as MuiTableHeadProps } from '@mui/material';
+
+export interface TableHeadProps extends MuiTableHeadProps {}

package/src/TableHead/index.ts

@@ -1,2 +1,2 @@
-export * from './TableHeadProps.types';
-export * from './TableHead';
+export * from './TableHead.types';
+export * from './TableHead';

package/src/TableRow/TableRow.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { TableRow } from './TableRow';
 
-test('renders', () => {
+test('TableRow', () => {
   render(<TableRow />);
-});
+});

package/src/TableRow/TableRow.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { TableRow as MuiTableRow } from "@mui/material";
-import { TableRowProps } from "./TableRowProps.types";
+import React from 'react';
+import { TableRow as MuiTableRow } from '@mui/material';
+import { TableRowProps, TableRowRef } from './TableRow.types';
 
-export const TableRow: React.FC<TableRowProps> = React.forwardRef(
-  (props: TableRowProps, ref: any) => {
-    return <MuiTableRow {...props} ref={ref} />;
+export const TableRow = React.forwardRef<TableRowRef, TableRowProps>(
+  function TableRow(props, ref) {
+    return <MuiTableRow ref={ref} {...props} />;
   }
 );

package/src/TableRow/TableRow.types.ts

@@ -0,0 +1,5 @@
+import { TableRowProps as MuiTableRowProps } from '@mui/material';
+
+export interface TableRowProps extends MuiTableRowProps {}
+
+export type TableRowRef = HTMLTableRowElement;

package/src/TableRow/index.ts

@@ -1,2 +1,2 @@
-export * from './TableRowProps.types';
-export * from './TableRow';
+export * from './TableRow.types';
+export * from './TableRow';

package/src/Tabs/Tabs.stories.mdx

@@ -3,44 +3,32 @@ import { Canvas, Meta, Story } from "@storybook/addon-docs"
 
 import { Tab } from "../Tab"
 import { Tabs } from "./Tabs"
-
-import {useState} from "react"
 import TabsExample from "./support/TabsExample.tsx"
 
 <Meta title="components/Tabs" component={Tabs} />
 
 # Tabs
 
-```javascript
-import React from "react"
-
-import { Tabs } from "./index"
-import { Tab } from "./index"
-
+<Canvas withToolbar>
+  <Story name="Default" args={{ value: 0 }} parameters={{ docs: { source: { code: `
 function TabsExample() {
-  const [value, setValue] = useState(0)
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue)
-  }
-
-  return (
-    <Tabs
-      value={value}
-      variant={props.variant}
-      orientation={props.orientation}
-      onChange={handleChange}
-    >
-      <Tab label="One" value={0} />
-      <Tab label="Two" value={1} />
-      <Tab label="Three" value={2} />
-    </Tabs>
-  )
+const [value, setValue] = useState(0)
+const handleChange = (event, newValue) => {
+  setValue(newValue)
 }
-```
-
-<Canvas withToolbar>
-  <Story name="Default" args={{ value: 0 }}>
+return (
+  <Tabs
+    value={value}
+    variant={props.variant}
+    orientation={props.orientation}
+    onChange={handleChange}
+  >
+    <Tab label="One" value={0} />
+    <Tab label="Two" value={1} />
+    <Tab label="Three" value={2} />
+  </Tabs>
+)
+  `}}}}>
     <TabsExample />
   </Story>
 </Canvas>
@@ -50,9 +38,27 @@ function TabsExample() {
 Set the prop `orientation='vertical` to change it to vertical tabs.
 
 <Canvas sourceState="none">
-  <Story name="Vertical" args={{ orientation: "vertical", value: 0 }}>
+  <Story name="Vertical" args={{ orientation: "vertical", value: 0 }} parameters={{ docs: { source: { code: `
+function TabsExample() {
+const [value, setValue] = useState(0)
+const handleChange = (event, newValue) => {
+  setValue(newValue)
+}
+return (
+  <Tabs
+    value={value}
+    variant={props.variant}
+    orientation="vertical"
+    onChange={handleChange}
+  >
+    <Tab label="One" value={0} />
+    <Tab label="Two" value={1} />
+    <Tab label="Three" value={2} />
+  </Tabs>
+)
+  `}}}}>
     {(args) => {
-        return <TabsExample orientation="vertical"/>
+        return <TabsExample orientation="vertical" {...args} />
       }
     }
   </Story>
@@ -63,9 +69,27 @@ Set the prop `orientation='vertical` to change it to vertical tabs.
 Set the prop `variant='fullWidth'` to change the tabs width.
 
 <Canvas sourceState="none">
-  <Story name="Full Width" args={{ value: 0 }}>
+  <Story name="Full Width" args={{ value: 0 }} parameters={{ docs: { source: { code: `
+function TabsExample() {
+const [value, setValue] = useState(0)
+const handleChange = (event, newValue) => {
+  setValue(newValue)
+}
+return (
+  <Tabs
+    value={value}
+    variant="fullWidth"
+    orientation={props.orientation}
+    onChange={handleChange}
+  >
+    <Tab label="One" value={0} />
+    <Tab label="Two" value={1} />
+    <Tab label="Three" value={2} />
+  </Tabs>
+)
+  `}}}}>
     {(args) => {
-        return <TabsExample variant="fullWidth"/>
+        return <TabsExample variant="fullWidth" {...args} />
       }
     }
   </Story>
@@ -76,7 +100,18 @@ Set the prop `variant='fullWidth'` to change the tabs width.
 Set the prop `indicator='primary'` to change the tabs. `indicator='secondary'` defaults to black if `--custom-theme-color` is undefined.
 
 <Canvas sourceState="none">
-  <Story name="Color" args={{ value: 0 }}>
+  <Story name="Color" args={{ value: 0 }} parameters={{ docs: { source: { code: `
+<Tabs value={0} indicatorColor="primary">
+  <Tab label="Item" />
+  <Tab label="Item" />
+  <Tab label="Item" />
+</Tabs>
+<Tabs value={0} indicatorColor="secondary">
+  <Tab label="Item" />
+  <Tab label="Item" />
+  <Tab label="Item" />
+</Tabs>
+  `}}}}>
     {(args) => (
       <Stack spacing={2}>
         <Tabs {...args} indicatorColor="primary">

package/src/Tabs/Tabs.test.tsx

@@ -1,9 +1,9 @@
-import { render } from "@testing-library/react"
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Tabs } from './Tabs';
 
-import { Tabs } from "./Tabs"
-
-describe("Tabs test", () => {
-  it("renders without crashing", async () => {
-    render(<Tabs />)
-  })
-})
+describe('Tabs', () => {
+  it('renders without crashing', async () => {
+    render(<Tabs />);
+  });
+});