@ssa-ui-kit/core 0.0.1-alpha

package/src/components/TabBar/types.ts

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

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

@@ -0,0 +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',
+      });
+    });
+  });
+});

package/src/components/Table/Table.tsx

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

package/src/components/Table/index.ts

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

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

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

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

@@ -0,0 +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 = {};

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

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

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

@@ -0,0 +1,16 @@
+import { RowKeysArray } from './types';
+
+export const dataForTableSorting = Array.from({ length: 10 }).map(
+  (_, index) => ({
+    title: `title ${index + 1}`,
+    value: `value ${index + 1}`,
+    description: `description ${index + 1}`,
+  }),
+);
+
+export const headers = Object.keys(
+  dataForTableSorting[0],
+) as unknown as RowKeysArray;
+
+type DataRow = (typeof dataForTableSorting)[0];
+export type RowKeys = keyof DataRow;

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

@@ -0,0 +1,9 @@
+import { RowKeys } from './mock';
+
+export type RowKeysArray = ['title', 'value', 'description'];
+export type SortInfo =
+  | {
+      column: RowKeys;
+      order: 'asc' | 'desc';
+    }
+  | Record<string, never>;

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

@@ -0,0 +1,2 @@
+export const capitalizeFirstLetter = (str: string) =>
+  str.charAt(0).toUpperCase() + str.slice(1);

package/src/components/TableBody/TableBody.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const TableBody = styled.tbody<CommonProps>`
+  display: table-row-group;
+`;
+
+export default TableBody;

package/src/components/TableBody/index.ts

@@ -0,0 +1 @@
+export { default } from './TableBody';

package/src/components/TableCell/TableCell.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const TableCell = styled.td<{ align?: string } & CommonProps>`
+  display: table-cell;
+
+  vertical-align: inherit;
+  text-align: ${({ align }) => (align ? align : 'left')};
+
+  border-bottom: 1px solid #eef1f7;
+  border-right: 1px solid #eef1f7;
+
+  padding: 14px;
+`;
+
+export default TableCell;

package/src/components/TableCell/index.ts

@@ -0,0 +1 @@
+export { default } from './TableCell';

package/src/components/TableHead/TableHead.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+import TableCell from '@components/TableCell';
+import { CommonProps } from '@global-types/emotion';
+
+const TableHead = styled.thead<CommonProps>({
+  display: 'table-header-group',
+  background: '#eef1f7',
+  [`& ${TableCell}`]: {
+    borderBottom: '1px solid white',
+    borderRight: '1px solid white',
+  },
+});
+
+export default TableHead;

package/src/components/TableHead/index.ts

@@ -0,0 +1 @@
+export { default } from './TableHead';

package/src/components/TableRow/TableRow.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const TableRow = styled.tr<CommonProps>`
+  display: table-row;
+
+  outline: 0;
+
+  vertical-align: middle;
+`;
+
+export default TableRow;

package/src/components/TableRow/index.ts

@@ -0,0 +1 @@
+export { default } from './TableRow';

package/src/components/Tag/Tag.spec.tsx

@@ -0,0 +1,121 @@
+import { screen } from '../../../customTest';
+import Tag from '@components/Tag';
+import theme from '@themes/main';
+
+describe('tag', () => {
+  it('Render small size', () => {
+    render(
+      <Tag color="purple" size="small">
+        small
+      </Tag>,
+    );
+
+    const tag = screen.getByText(/small/i);
+
+    expect(tag).toHaveStyle('height: 18px');
+  });
+
+  it('Render with default color', () => {
+    render(<Tag size="small">small</Tag>);
+
+    const tag = screen.getByText(/small/i);
+
+    expect(tag).toHaveStyle('height: 18px');
+  });
+
+  it('Render medium size', () => {
+    render(<Tag color="purple">medium</Tag>);
+
+    const tag = screen.getByText(/medium/i);
+
+    expect(tag).toHaveStyle('height: 24px');
+  });
+
+  it('Render large size', () => {
+    render(
+      <Tag color="purple" size="large">
+        large
+      </Tag>,
+    );
+
+    const tag = screen.getByText(/large/i);
+
+    expect(tag).toHaveStyle('height: 32px');
+  });
+
+  it('Render with color pink', () => {
+    render(<Tag color="pink">tag</Tag>);
+
+    const tag = screen.getByText(/tag/i);
+
+    expect(tag).toHaveStyle(`background-color: ${theme.colors.pink20}`);
+    expect(tag).toHaveStyle(`border: 1px solid ${theme.colors.pink}`);
+  });
+
+  it('Render with color yellow', () => {
+    render(<Tag color="yellow">tag</Tag>);
+
+    const tag = screen.getByText(/tag/i);
+
+    expect(tag).toHaveStyle(`background-color: ${theme.colors.yellow20}`);
+    expect(tag).toHaveStyle(`border: 1px solid ${theme.colors.yellow}`);
+  });
+
+  it('Render with color yellowWarm', () => {
+    render(<Tag color="yellowWarm">tag</Tag>);
+
+    const tag = screen.getByText(/tag/i);
+
+    expect(tag).toHaveStyle(
+      `background-color: ${theme.colors.yellowLighter20}`,
+    );
+    expect(tag).toHaveStyle(`border: 1px solid ${theme.colors.yellowWarm}`);
+  });
+
+  it('Render with color green', () => {
+    render(<Tag color="green">tag</Tag>);
+
+    const tag = screen.getByText(/tag/i);
+
+    expect(tag).toHaveStyle(`background-color: ${theme.colors.green20}`);
+    expect(tag).toHaveStyle(`border: 1px solid ${theme.colors.green}`);
+  });
+
+  it('Render with color turquoise', () => {
+    render(<Tag color="turquoise">tag</Tag>);
+
+    const tag = screen.getByText(/tag/i);
+
+    expect(tag).toHaveStyle(`background-color: ${theme.colors.turquoise20}`);
+    expect(tag).toHaveStyle(`border: 1px solid ${theme.colors.turquoise}`);
+  });
+
+  it('Render with color purple', () => {
+    render(<Tag color="purple">tag</Tag>);
+
+    const tag = screen.getByText(/tag/i);
+
+    expect(tag).toHaveStyle(
+      `background-color: ${theme.colors.purpleLighter20}`,
+    );
+    expect(tag).toHaveStyle(`border: 1px solid ${theme.colors.purple}`);
+  });
+
+  it('Render with color blueLight', () => {
+    render(<Tag color="blueLight">tag</Tag>);
+
+    const tag = screen.getByText(/tag/i);
+
+    expect(tag).toHaveStyle(`background-color: ${theme.colors.blueLight20}`);
+    expect(tag).toHaveStyle(`border: 1px solid ${theme.colors.blueLight}`);
+  });
+
+  it('Render with color blue', () => {
+    render(<Tag color="blue">tag</Tag>);
+
+    const tag = screen.getByText(/tag/i);
+
+    expect(tag).toHaveStyle(`background-color: ${theme.colors.blue20}`);
+    expect(tag).toHaveStyle(`border: 1px solid ${theme.colors.blue}`);
+  });
+});

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import {
+  sizes,
+  colors,
+  HeaderTitle,
+  GridWrapper,
+} from '@components/Badge/helpers';
+import Tag from './index';
+
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+  argTypes: {
+    color: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: [
+        'pink',
+        'yellow',
+        'green',
+        'turquoise',
+        'purple',
+        'blueLight',
+        'blue',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
+    size: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    children: {
+      table: {
+        type: {
+          summary: 'string | element',
+        },
+      },
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    children: 'tag',
+  },
+} as Meta<typeof Tag>;
+
+export const Default = {};
+
+export const AllStates = () => (
+  <GridWrapper>
+    <HeaderTitle>Color</HeaderTitle>
+    <HeaderTitle>Small</HeaderTitle>
+    <HeaderTitle>Medium</HeaderTitle>
+    <HeaderTitle>Large</HeaderTitle>
+    {colors.map((color) => (
+      <React.Fragment key={color}>
+        <HeaderTitle>{color}</HeaderTitle>
+        {sizes.map((size) => (
+          <Tag color={color} size={size} key={color + size}>
+            tag
+          </Tag>
+        ))}
+      </React.Fragment>
+    ))}
+  </GridWrapper>
+);
+
+AllStates.args = {
+  name: 'All States',
+};
+
+AllStates.argTypes = {
+  color: {
+    control: false,
+  },
+  size: {
+    control: false,
+  },
+  children: {
+    control: false,
+  },
+};

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,47 @@
+import Badge from '@components/Badge';
+import {
+  blue,
+  green,
+  blueLight,
+  pink,
+  purple,
+  turquoise,
+  yellow,
+  yellowWarm,
+} from './styles';
+
+import {
+  pinkBorder,
+  yellowBorder,
+  greenBorder,
+  turquoiseBorder,
+  purpleBorder,
+  blueLightBorder,
+  blueBorder,
+  yellowWarmBorder,
+} from './styles';
+import { TagsProps } from './types';
+
+const mapColors: MainColors = {
+  pink: [pink, pinkBorder],
+  yellow: [yellow, yellowBorder],
+  green: [green, greenBorder],
+  turquoise: [turquoise, turquoiseBorder],
+  purple: [purple, purpleBorder],
+  blueLight: [blueLight, blueLightBorder],
+  blue: [blue, blueBorder],
+  yellowWarm: [yellowWarm, yellowWarmBorder],
+};
+
+const Tag = ({
+  color = 'purple',
+  size = 'medium',
+  className,
+  children,
+}: TagsProps) => (
+  <Badge color={color} size={size} css={mapColors[color]} className={className}>
+    {children}
+  </Badge>
+);
+
+export default Tag;

package/src/components/Tag/index.ts

@@ -0,0 +1 @@
+export { default } from './Tag';