@ssa-ui-kit/core 0.0.17-alpha → 0.0.19-alpha

package/src/components/TabBar/types.ts

@@ -1,39 +1,39 @@
-import { CommonProps } from '@global-types/emotion';
-
-export interface ITab extends CommonProps {
-  tabId: number | string;
-  renderContent: (
-    tab?: {
-      tabId: number | string;
-      // text: string;
-      // renderContent: () => ReactNode;
-      [prop: string | number | symbol]: unknown;
-    },
-    arg?: unknown,
-  ) => React.ReactNode;
-  [prop: string | number | symbol]: unknown;
-}
-
-export interface ITabProps extends ITab {
-  isActive?: boolean;
-  onClick?: () => void;
-  ariaControls?: string;
-}
-
-export interface ISmallTabProps extends ITabProps {
-  text: string;
-}
-
-export interface ILargeTabProps extends ITabProps {
-  topText: string;
-  bottomText: string;
-}
-
-export interface ITabBarProps {
-  children: React.ReactElement<React.PropsWithChildren<ITabProps>>[];
-}
-
-export interface ITabBarContext {
-  activeTab?: ITab;
-  setActiveTab: (tab?: ITab) => void;
-}
+import { CommonProps } from '@global-types/emotion';
+
+export interface ITab extends CommonProps {
+  tabId: number | string;
+  renderContent: (
+    tab?: {
+      tabId: number | string;
+      // text: string;
+      // renderContent: () => ReactNode;
+      [prop: string | number | symbol]: unknown;
+    },
+    arg?: unknown,
+  ) => React.ReactNode;
+  [prop: string | number | symbol]: unknown;
+}
+
+export interface ITabProps extends ITab {
+  isActive?: boolean;
+  onClick?: () => void;
+  ariaControls?: string;
+}
+
+export interface ISmallTabProps extends ITabProps {
+  text: string;
+}
+
+export interface ILargeTabProps extends ITabProps {
+  topText: string;
+  bottomText: string;
+}
+
+export interface ITabBarProps {
+  children: React.ReactElement<React.PropsWithChildren<ITabProps>>[];
+}
+
+export interface ITabBarContext {
+  activeTab?: ITab;
+  setActiveTab: (tab?: ITab) => void;
+}

package/src/components/Table/Table.spec.tsx

@@ -1,86 +1,86 @@
-import { act } from 'react-dom/test-utils';
-import Table from '@components/Table';
-import TableHead from '@components/TableHead';
-import TableRow from '@components/TableRow';
-import TableCell from '@components/TableCell';
-import TableBody from '@components/TableBody';
-import { fireEvent } from '@storybook/testing-library';
-import { SortableTable } from './stories/SortableTable';
-import { screen } from '../../../customTest';
-
-describe('Table', () => {
-  it('Render table', () => {
-    render(
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Col</TableCell>
-            <TableCell>Col</TableCell>
-            <TableCell align="center">Col 3</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>Row</TableCell>
-            <TableCell>Row</TableCell>
-            <TableCell align="center">Row</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Row 2</TableCell>
-            <TableCell>Row</TableCell>
-            <TableCell align="center">Row 2</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>,
-    );
-
-    const table = screen.getByRole('table');
-    const cells = screen.queryAllByRole('cell');
-
-    expect(table).toBeInTheDocument();
-    expect(cells.length).toEqual(9);
-  });
-
-  describe('Sorting Table', () => {
-    it('Render table', () => {
-      render(<SortableTable />);
-
-      const cells = screen.queryAllByRole('cell');
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-      expect(screen.getByTitle('Arrow Down')).toBeInTheDocument();
-      expect(cells.length).toEqual(33);
-    });
-
-    it('Should change sorting correctly', () => {
-      const callback = jest.fn();
-      render(<SortableTable onSortingChange={callback} />);
-
-      const cells = screen.queryAllByRole('cell');
-
-      act(() => {
-        fireEvent.click(cells[0]);
-      });
-      expect(callback).toHaveBeenLastCalledWith({
-        column: 'title',
-        order: 'asc',
-      });
-
-      act(() => {
-        fireEvent.click(cells[0]);
-      });
-      expect(callback).toHaveBeenLastCalledWith({
-        column: 'title',
-        order: 'desc',
-      });
-
-      act(() => {
-        fireEvent.click(cells[0]);
-      });
-      expect(callback).toHaveBeenLastCalledWith({
-        column: 'title',
-        order: 'asc',
-      });
-    });
-  });
-});
+import { act } from 'react-dom/test-utils';
+import Table from '@components/Table';
+import TableHead from '@components/TableHead';
+import TableRow from '@components/TableRow';
+import TableCell from '@components/TableCell';
+import TableBody from '@components/TableBody';
+import { fireEvent } from '@storybook/testing-library';
+import { SortableTable } from './stories/SortableTable';
+import { screen } from '../../../customTest';
+
+describe('Table', () => {
+  it('Render table', () => {
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Col</TableCell>
+            <TableCell>Col</TableCell>
+            <TableCell align="center">Col 3</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>Row</TableCell>
+            <TableCell>Row</TableCell>
+            <TableCell align="center">Row</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Row 2</TableCell>
+            <TableCell>Row</TableCell>
+            <TableCell align="center">Row 2</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    const table = screen.getByRole('table');
+    const cells = screen.queryAllByRole('cell');
+
+    expect(table).toBeInTheDocument();
+    expect(cells.length).toEqual(9);
+  });
+
+  describe('Sorting Table', () => {
+    it('Render table', () => {
+      render(<SortableTable />);
+
+      const cells = screen.queryAllByRole('cell');
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+      expect(screen.getByTitle('Arrow Down')).toBeInTheDocument();
+      expect(cells.length).toEqual(33);
+    });
+
+    it('Should change sorting correctly', () => {
+      const callback = jest.fn();
+      render(<SortableTable onSortingChange={callback} />);
+
+      const cells = screen.queryAllByRole('cell');
+
+      act(() => {
+        fireEvent.click(cells[0]);
+      });
+      expect(callback).toHaveBeenLastCalledWith({
+        column: 'title',
+        order: 'asc',
+      });
+
+      act(() => {
+        fireEvent.click(cells[0]);
+      });
+      expect(callback).toHaveBeenLastCalledWith({
+        column: 'title',
+        order: 'desc',
+      });
+
+      act(() => {
+        fireEvent.click(cells[0]);
+      });
+      expect(callback).toHaveBeenLastCalledWith({
+        column: 'title',
+        order: 'asc',
+      });
+    });
+  });
+});

package/src/components/Table/Table.tsx

@@ -1,13 +1,13 @@
-import styled from '@emotion/styled';
-import { CommonProps } from '@global-types/emotion';
-
-const Table = styled.table<CommonProps>`
-  display: table;
-
-  width: 100%;
-
-  border-collapse: collapse;
-  border-spacing: 0;
-`;
-
-export default Table;
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const Table = styled.table<CommonProps>`
+  display: table;
+
+  width: 100%;
+
+  border-collapse: collapse;
+  border-spacing: 0;
+`;
+
+export default Table;

package/src/components/Table/index.ts

@@ -1 +1 @@
-export { default } from './Table';
+export { default } from './Table';

package/src/components/Table/stories/SortableTable.tsx

@@ -1,78 +1,78 @@
-import { useState } from 'react';
-import Icon from '@components/Icon';
-import Wrapper from '@components/Wrapper';
-import Table from '@components/Table';
-import TableHead from '@components/TableHead';
-import TableRow from '@components/TableRow';
-import TableCell from '@components/TableCell';
-import TableBody from '@components/TableBody';
-import { RowKeys, headers, dataForTableSorting } from './mock';
-import { capitalizeFirstLetter } from './utils';
-import { SortInfo } from './types';
-import { DEFAULT_SORT } from './consts';
-
-export const SortableTable = ({
-  onSortingChange,
-}: {
-  onSortingChange?: (sortInfo: SortInfo) => void;
-}) => {
-  const [sortInfo, setSortInfo] = useState<SortInfo>(DEFAULT_SORT);
-
-  const handleSorting = (name: RowKeys) => () => {
-    const newOrder =
-      sortInfo.column === name
-        ? sortInfo.order === 'asc'
-          ? 'desc'
-          : 'asc'
-        : 'asc';
-
-    const newSortInfo: SortInfo = {
-      column: name,
-      order: newOrder,
-    };
-
-    setSortInfo(newSortInfo);
-    onSortingChange?.(newSortInfo);
-  };
-
-  return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          {headers.map((name) => (
-            <TableCell
-              key={name}
-              css={{
-                gap: 6,
-                cursor: 'pointer',
-              }}
-              onClick={handleSorting(name)}>
-              <Wrapper
-                css={{
-                  gap: 6,
-                }}>
-                {capitalizeFirstLetter(name)}
-                {sortInfo.column === name && (
-                  <Icon
-                    name={sortInfo.order === 'asc' ? 'arrow-up' : 'arrow-down'}
-                    size={10}
-                    data-testId="sort-icon"
-                  />
-                )}
-              </Wrapper>
-            </TableCell>
-          ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {dataForTableSorting.map((info) => (
-          <TableRow key={`row-${info.value}`}>
-            <TableCell>{info.title}</TableCell>
-            <TableCell>{info.value}</TableCell>
-            <TableCell>{info.description}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
+import { useState } from 'react';
+import Icon from '@components/Icon';
+import Wrapper from '@components/Wrapper';
+import Table from '@components/Table';
+import TableHead from '@components/TableHead';
+import TableRow from '@components/TableRow';
+import TableCell from '@components/TableCell';
+import TableBody from '@components/TableBody';
+import { RowKeys, headers, dataForTableSorting } from './mock';
+import { capitalizeFirstLetter } from './utils';
+import { SortInfo } from './types';
+import { DEFAULT_SORT } from './consts';
+
+export const SortableTable = ({
+  onSortingChange,
+}: {
+  onSortingChange?: (sortInfo: SortInfo) => void;
+}) => {
+  const [sortInfo, setSortInfo] = useState<SortInfo>(DEFAULT_SORT);
+
+  const handleSorting = (name: RowKeys) => () => {
+    const newOrder =
+      sortInfo.column === name
+        ? sortInfo.order === 'asc'
+          ? 'desc'
+          : 'asc'
+        : 'asc';
+
+    const newSortInfo: SortInfo = {
+      column: name,
+      order: newOrder,
+    };
+
+    setSortInfo(newSortInfo);
+    onSortingChange?.(newSortInfo);
+  };
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          {headers.map((name) => (
+            <TableCell
+              key={name}
+              css={{
+                gap: 6,
+                cursor: 'pointer',
+              }}
+              onClick={handleSorting(name)}>
+              <Wrapper
+                css={{
+                  gap: 6,
+                }}>
+                {capitalizeFirstLetter(name)}
+                {sortInfo.column === name && (
+                  <Icon
+                    name={sortInfo.order === 'asc' ? 'arrow-up' : 'arrow-down'}
+                    size={10}
+                    data-testId="sort-icon"
+                  />
+                )}
+              </Wrapper>
+            </TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {dataForTableSorting.map((info) => (
+          <TableRow key={`row-${info.value}`}>
+            <TableCell>{info.title}</TableCell>
+            <TableCell>{info.value}</TableCell>
+            <TableCell>{info.description}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};

package/src/components/Table/stories/Table.stories.tsx

@@ -1,94 +1,94 @@
-import { Fragment } from 'react';
-import { css } from '@emotion/react';
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-} from '@storybook/addon-docs';
-
-import Badge from '@components/Badge';
-import Icon from '@components/Icon';
-import Wrapper from '@components/Wrapper';
-import Table from '@components/Table';
-import TableHead from '@components/TableHead';
-import TableRow from '@components/TableRow';
-import TableCell from '@components/TableCell';
-import TableBody from '@components/TableBody';
-import { SortableTable } from './SortableTable';
-import { SortInfo } from './types';
-
-export default {
-  title: 'Components/Table',
-  component: Table,
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      source: {
-        type: 'code',
-      },
-      page: () => (
-        <Fragment>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Primary />
-          <Stories />
-        </Fragment>
-      ),
-    },
-  },
-} as Meta<typeof Table>;
-
-export const Default: StoryObj<typeof Table> = () => {
-  return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell>Col</TableCell>
-          <TableCell>
-            <Wrapper
-              css={css`
-                svg {
-                  margin-right: 10px;
-                }
-              `}>
-              <Icon name="calendar" size={16} />
-              Col
-            </Wrapper>
-          </TableCell>
-          <TableCell align="center">Col 3</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <TableRow>
-          <TableCell>Row</TableCell>
-          <TableCell>
-            <Badge>Row</Badge>
-          </TableCell>
-          <TableCell align="center">Row</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Row 2</TableCell>
-          <TableCell>
-            <Badge color="green">Row 2</Badge>
-          </TableCell>
-          <TableCell align="center">Row 2</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-};
-
-Default.storyName = 'Table';
-
-export const TableSorting: StoryObj<typeof Table> = () => {
-  const handleSortingChange = (sortInfo: SortInfo) => {
-    alert('Sorting changed to ' + JSON.stringify(sortInfo));
-  };
-  return <SortableTable onSortingChange={handleSortingChange} />;
-};
-
-TableSorting.args = {};
+import { Fragment } from 'react';
+import { css } from '@emotion/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+} from '@storybook/addon-docs';
+
+import Badge from '@components/Badge';
+import Icon from '@components/Icon';
+import Wrapper from '@components/Wrapper';
+import Table from '@components/Table';
+import TableHead from '@components/TableHead';
+import TableRow from '@components/TableRow';
+import TableCell from '@components/TableCell';
+import TableBody from '@components/TableBody';
+import { SortableTable } from './SortableTable';
+import { SortInfo } from './types';
+
+export default {
+  title: 'Components/Table',
+  component: Table,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        type: 'code',
+      },
+      page: () => (
+        <Fragment>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Stories />
+        </Fragment>
+      ),
+    },
+  },
+} as Meta<typeof Table>;
+
+export const Default: StoryObj<typeof Table> = () => {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Col</TableCell>
+          <TableCell>
+            <Wrapper
+              css={css`
+                svg {
+                  margin-right: 10px;
+                }
+              `}>
+              <Icon name="calendar" size={16} />
+              Col
+            </Wrapper>
+          </TableCell>
+          <TableCell align="center">Col 3</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Row</TableCell>
+          <TableCell>
+            <Badge>Row</Badge>
+          </TableCell>
+          <TableCell align="center">Row</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Row 2</TableCell>
+          <TableCell>
+            <Badge color="green">Row 2</Badge>
+          </TableCell>
+          <TableCell align="center">Row 2</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+Default.storyName = 'Table';
+
+export const TableSorting: StoryObj<typeof Table> = () => {
+  const handleSortingChange = (sortInfo: SortInfo) => {
+    alert('Sorting changed to ' + JSON.stringify(sortInfo));
+  };
+  return <SortableTable onSortingChange={handleSortingChange} />;
+};
+
+TableSorting.args = {};

package/src/components/Table/stories/consts.ts

@@ -1,6 +1,6 @@
-import { SortInfo } from './types';
-
-export const DEFAULT_SORT: SortInfo = {
-  column: 'value',
-  order: 'desc',
-};
+import { SortInfo } from './types';
+
+export const DEFAULT_SORT: SortInfo = {
+  column: 'value',
+  order: 'desc',
+};