@galaxy-ds/core 2.0.13 → 2.0.14

package/src/TableContainer/TableContainer.tsx

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

package/src/TableContainer/TableContainer.types.ts

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

package/src/TableContainer/index.ts

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

package/src/TableFooter/TableFooter.stories.mdx

@@ -1,52 +0,0 @@
-
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { TableFooter } from "./TableFooter";
-import { TableRow } from "../TableRow";
-import { TableBody } from '../TableBody';
-import { Table } from '../Table';
-import { TableContainer } from '../TableContainer';
-import { TableHead } from '../TableHead';
-import { TableCell } from '../TableCell';
-
-<Meta
-  title="components/Table/TableFooter"
-  component={TableFooter}
-/>
-
-# TableFooter
-
-All Table components (Table, TableBody, TableHead, TableFooter, TableRow, TableCell) have the option to be rendered as another HTML element type for more flexible structure.
-For example, `component='div'`.
-
-<Canvas withToolbar>
-  <Story name="Default">
-    {(args) => (
-      <div style={{maxWidth: 650}}>
-      <TableContainer>
-        <Table>
-          <TableBody>
-            {['Laura', 'Barry Su', 'Fast Contracts'].map(name =>
-              <TableRow  key={name}>
-                <TableCell>{name}</TableCell>
-                <TableCell>Telephone Client</TableCell>
-                <TableCell align="right">$1.00</TableCell>
-              </TableRow>
-            )}
-          </TableBody> 
-          <TableFooter>
-            <TableRow>
-              <TableCell></TableCell>
-              <TableCell variant="footer">Total</TableCell>
-              <TableCell variant="footer" align="right">$3.00</TableCell>
-            </TableRow>
-          </TableFooter> 
-        </Table>
-      </TableContainer>
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/TableFooter/TableFooter.test.tsx

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

package/src/TableFooter/TableFooter.tsx

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

package/src/TableFooter/TableFooter.types.ts

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

package/src/TableFooter/index.ts

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

package/src/TableHead/TableHead.stories.mdx

@@ -1,40 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { TableHead } from "./TableHead";
-import { TableContainer } from '../TableContainer';
-import { Table } from '../Table';
-import { TableCell } from '../TableCell';
-import { TableRow } from '../TableRow';
-
-<Meta
-  title="components/Table/TableHead"
-  component={TableHead}
-/>
-
-# TableHead
-
-All Table components (Table, TableBody, TableHead, TableFooter, TableRow, TableCell) have the option to be rendered as another HTML element type for more flexible structure.
-For example, `component='div'`.
-
-<Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {args => (
-      <div style={{maxWidth: 650}}>
-      <TableContainer>
-        <Table {...args}>
-          <TableHead>
-            <TableRow key={name}>
-              <TableCell>Shared with</TableCell>
-              <TableCell>Shared as</TableCell>
-              <TableCell>Access</TableCell>
-            </TableRow>
-          </TableHead>
-        </Table>
-      </TableContainer>
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/TableHead/TableHead.test.tsx

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

package/src/TableHead/TableHead.tsx

@@ -1,7 +0,0 @@
-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} />;
-};

package/src/TableHead/TableHead.types.ts

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

package/src/TableHead/index.ts

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

package/src/TableRow/TableRow.stories.mdx

@@ -1,94 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { TableRow } from "./TableRow";
-import { TableBody } from '../TableBody';
-import { Table } from '../Table';
-import { TableContainer } from '../TableContainer';
-import { TableHead } from '../TableHead';
-import { TableCell } from '../TableCell';
-
-<Meta
-  title="components/Table/TableRow"
-  component={TableRow}
-/>
-
-# TableRow
-
-All Table components (Table, TableBody, TableHead, TableFooter, TableRow, TableCell) have the option to be rendered as another HTML element type for more flexible structure.
-For example, `component='div'`.
-
-<Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {(args) => (
-      <div style={{maxWidth: 650}}>
-      <TableContainer>
-        <Table>
-          <TableBody>
-            {['Laura', 'Barry Su', 'Fast Contracts'].map(name =>
-              <TableRow {...args} key={name}>
-                <TableCell>{name}</TableCell>
-                <TableCell>PDF</TableCell>
-                <TableCell>Sign in to view</TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-
-## Stories
-
-### Row hover state
-
-<Canvas>
-  <Story name="Hover" args={{hover: true}}>
-    {(args) => (
-      <div style={{maxWidth: 650}}>
-      <TableContainer>
-        <Table>
-          <TableBody>
-            {['Laura', 'Barry Su', 'Fast Contracts'].map(name =>
-              <TableRow {...args} key={name}>
-                <TableCell>{name}</TableCell>
-                <TableCell>PDF</TableCell>
-                <TableCell>Sign in to view</TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-### Selected hover state
-
-<Canvas>
-  <Story name="Selected" args={{}}>
-    {(args) => (
-      <div style={{maxWidth: 650}}>
-      <TableContainer>
-        <Table>
-          <TableBody>
-            {['Laura', 'Barry Su', 'Fast Contracts'].map(name =>
-              <TableRow selected={name === 'Laura'} {...args} key={name}>
-                <TableCell>{name}</TableCell>
-                <TableCell>PDF</TableCell>
-                <TableCell>Sign in to view</TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/TableRow/TableRow.test.tsx

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

package/src/TableRow/TableRow.tsx

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

package/src/TableRow/TableRow.types.ts

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

package/src/TableRow/index.ts

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

package/src/Tabs/Tabs.stories.mdx

@@ -1,130 +0,0 @@
-import { Stack } from "@mui/material"
-import { Canvas, Meta, Story } from "@storybook/addon-docs"
-
-import { Tab } from "../Tab"
-import { Tabs } from "./Tabs"
-import TabsExample from "./support/TabsExample.tsx"
-
-<Meta title="components/Tabs" component={Tabs} />
-
-# Tabs
-
-<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>
-)
-  `}}}}>
-    <TabsExample />
-  </Story>
-</Canvas>
-
-### Vertical Tabs
-
-Set the prop `orientation='vertical` to change it to vertical tabs.
-
-<Canvas sourceState="none">
-  <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" {...args} />
-      }
-    }
-  </Story>
-</Canvas>
-
-### Full Width
-
-Set the prop `variant='fullWidth'` to change the tabs width.
-
-<Canvas sourceState="none">
-  <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" {...args} />
-      }
-    }
-  </Story>
-</Canvas>
-
-### Color
-
-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 }} 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">
-          <Tab label="Item" />
-          <Tab label="Item" />
-          <Tab label="Item" />
-        </Tabs>
-        <Tabs {...args} indicatorColor="secondary">
-          <Tab label="Item" />
-          <Tab label="Item" />
-          <Tab label="Item" />
-        </Tabs>
-      </Stack>
-    )}
-  </Story>
-</Canvas>

package/src/Tabs/Tabs.test.tsx

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

package/src/Tabs/Tabs.tsx

@@ -1,15 +0,0 @@
-import { Tabs as MuiTabs } from '@mui/material';
-
-import { TabsProps } from './Tabs.types';
-
-export const Tabs = (props: TabsProps) => {
-  const isVertical =
-    props.orientation === 'vertical' ? { maxWidth: '16.5rem' } : {};
-  return (
-    <MuiTabs sx={isVertical} {...props}>
-      {props.children}
-    </MuiTabs>
-  );
-};
-
-export default Tabs;

package/src/Tabs/Tabs.types.ts

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

package/src/Tabs/index.ts

@@ -1,2 +0,0 @@
-export * from "./Tabs"
-export * from "./Tabs.types"

package/src/Tabs/support/TabsExample.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Tab } from '../../Tab/Tab';
-import { Tabs } from '../Tabs';
-import { TabsProps } from '..';
-
-export interface Props {
-  orientation?: any;
-  variant?: any;
-}
-
-export default function TabsExample(props: Props) {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange: TabsProps['onChange'] = (_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>
-  );
-}