@soul-refiner/design-system 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {

package/src/components/atoms/box/box.tsx

@@ -46,13 +46,14 @@ export interface BoxProps
     Styleable,
     NativeProps {
   $display?: 'block' | 'flex';
+  sx?: string;
 }
 
-export const Box = ({ $display = 'flex', ...args }: BoxProps) => (
-  <Component $display={$display} {...args} />
+export const Box = ({ $display = 'flex', sx, ...args }: BoxProps) => (
+  <Component $display={$display} $sx={sx} {...args} />
 );
 
-export const Component = styled.div<BoxProps>`
+export const Component = styled.div<BoxProps & { $sx?: string }>`
   ${({ $display }) => ($display === 'flex' ? 'display: flex;' : '')}
   ${Styles.flex}
   ${Styles.backgroundColor}
@@ -61,4 +62,5 @@ export const Component = styled.div<BoxProps>`
   ${Styles.margin}
   ${Styles.padding}
   ${Styles.styleable}
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;

package/src/components/input/index.ts

@@ -1,2 +1,4 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
+export { Radio } from './radio';
+export type { RadioProps } from './radio';

package/src/components/input/radio/index.ts

@@ -0,0 +1,2 @@
+export { Radio } from './radio';
+export type { RadioProps } from './radio';

package/src/components/input/radio/radio.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, BoxProps, P } from 'components';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLInputElement>,
+  | 'onClick'
+  | 'onChange'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+>;
+
+export interface RadioProps extends NativeProps {
+  checked: boolean;
+  disabled?: boolean;
+  label?: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  name?: string;
+  reversed?: boolean;
+  sx?: string;
+  value: string;
+}
+
+const Radio = ({
+  checked = false,
+  disabled,
+  label,
+  onChange,
+  reversed,
+  sx,
+  value,
+  ...rest
+}: RadioProps) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    onChange(event);
+  };
+
+  return (
+    <Label $disabled={disabled} $reversed={reversed} $sx={sx}>
+      <Input
+        checked={checked}
+        disabled={disabled}
+        onChange={handleChange}
+        type="radio"
+        value={value}
+        {...rest}
+      />
+      <P as="span">{label}</P>
+    </Label>
+  );
+};
+
+const Label = styled.label<{
+  $disabled?: boolean;
+  $reversed?: boolean;
+  $sx?: string;
+}>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+
+  ${({ $disabled }) =>
+    $disabled
+      ? `
+    & > * {
+      color: var(--color-grey-7);
+    }`
+      : `
+    cursor: pointer;
+    &:hover {
+      input {
+        border-color: var(--color-primary-blue-2);
+      }
+    }`}
+  flex-direction: ${({ $reversed }) => ($reversed ? 'row-reverse' : 'row')};
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+const Input = styled.input`
+  appearance: none;
+  position: relative;
+  height: 20px;
+  width: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-8);
+  cursor: pointer;
+  border-radius: 50%;
+
+  &:checked {
+    border-color: var(--color-primary-blue-2);
+    &::after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  &:disabled {
+    &:checked {
+      border-color: var(--color-grey-8);
+      &::after {
+        background-color: var(--color-grey-7);
+      }
+    }
+  }
+`;
+
+export interface RadioGroupProps extends React.PropsWithChildren, BoxProps {
+  name: string;
+  sx?: string;
+}
+
+const RadioGroup = ({ children, name, ...rest }: RadioGroupProps) => {
+  return (
+    <Box {...rest}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child))
+          return <Radio key={child.key} name={name} {...child.props} />;
+      })}
+    </Box>
+  );
+};
+
+Radio.Group = RadioGroup;
+RadioGroup.displayName = 'Radio.Group';
+
+export { Radio };

package/src/components/table/index.ts

@@ -0,0 +1,7 @@
+export { Table } from './table';
+export type {
+  TableCellProps,
+  TableHeaderCellProps,
+  TableProps,
+  TableRowProps,
+} from './table';

package/src/components/table/table/index.ts

@@ -0,0 +1,7 @@
+export { Table } from './table';
+export type {
+  TableCellProps,
+  TableHeaderCellProps,
+  TableProps,
+  TableRowProps,
+} from './table';

package/src/components/table/table/table.tsx

@@ -0,0 +1,382 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+
+/********************************************************
+ *  Table
+ */
+export interface TableProps extends React.PropsWithChildren {
+  border?: boolean;
+  compact?: boolean;
+  footer?: React.ReactNode;
+  header?: React.ReactNode;
+  separated?: boolean;
+  striped?: boolean;
+  sx?: string;
+}
+
+const Table = ({
+  border = true,
+  children,
+  compact,
+  footer,
+  header,
+  separated,
+  striped,
+  sx,
+}: TableProps) => {
+  return (
+    <Box
+      $backgroundColor="white"
+      $borderRadius="large"
+      $display="flex"
+      $dir="column"
+      $gap={32}
+      $padding={32}
+    >
+      {!!header && header}
+      <Box
+        $borderRadius="small"
+        sx={border ? 'border: 1px solid var(--color-grey-8);' : ''}
+      >
+        <TableElement
+          $compact={compact}
+          $separated={separated}
+          $striped={striped}
+          $sx={sx}
+        >
+          {children}
+        </TableElement>
+      </Box>
+      {!!footer && footer}
+    </Box>
+  );
+};
+
+const TableElement = styled.table<{
+  $compact?: boolean;
+  $separated?: boolean;
+  $striped?: boolean;
+  $sx?: string;
+}>`
+  width: max-content;
+  border-collapse: collapse;
+  border-spacing: 0;
+  ${({ $compact }) => ($compact ? 'width: fit-content;' : '')}
+  ${({ $separated }) =>
+    $separated
+      ? `
+    & > tbody > * {
+      border-bottom: 1px solid var(--color-grey-9);
+      &:last-child {
+        border-bottom: none;
+      }
+    }`
+      : ''}
+  ${({ $striped }) =>
+    $striped
+      ? `
+    & > tbody > *:nth-of-type(even) {
+      background-color: var(--color-grey-10);
+    }`
+      : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+/********************************************************
+ *  Table Head
+ */
+
+const Head = ({ children, ...rest }: React.PropsWithChildren) => {
+  return <HeadElement {...rest}>{children}</HeadElement>;
+};
+
+const HeadElement = styled.thead`
+  tr {
+    background-color: var(--color-grey-10);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+
+    & > *:first-of-type {
+      border-top-left-radius: 8px;
+    }
+
+    & > *:last-of-type {
+      border-top-right-radius: 8px;
+    }
+  }
+`;
+
+Head.displayName = 'Table.Head';
+Table.Head = Head;
+
+/********************************************************
+ *  Table Body
+ */
+
+const Body = ({ children, ...rest }: React.PropsWithChildren) => {
+  return <BodyElement {...rest}>{children}</BodyElement>;
+};
+
+const BodyElement = styled.tbody`
+  & > tr:last-of-type {
+    & > *:first-child {
+      border-bottom-left-radius: 8px;
+    }
+
+    & > *:last-child {
+      border-bottom-right-radius: 8px;
+    }
+  }
+`;
+
+Body.displayName = 'Table.Body';
+Table.Body = Body;
+
+/********************************************************
+ *  Table Foot
+ */
+
+const Foot = ({ children, ...rest }: React.PropsWithChildren) => {
+  return <tfoot {...rest}>{children}</tfoot>;
+};
+
+Foot.displayName = 'Table.Foot';
+Table.Footer = Foot;
+
+/********************************************************
+ *  Table Row
+ */
+
+export interface TableRowProps extends React.PropsWithChildren {
+  disabled?: boolean;
+  href?: string;
+  hoverable?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+  padding?: string;
+  selected?: boolean;
+  sx?: string;
+}
+
+const Row = ({
+  children,
+  disabled,
+  href,
+  hoverable = false,
+  onClick,
+  selected,
+  sx,
+  ...rest
+}: TableRowProps) => {
+  const handleClick = href
+    ? (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => {
+        if (event.metaKey || event.ctrlKey) {
+          const win = window.open(href, '_blank');
+          win?.focus();
+        } else {
+          window.location.href = href;
+        }
+      }
+    : onClick
+    ? (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => {
+        onClick(event);
+      }
+    : undefined;
+
+  return (
+    <RowElement
+      onClick={handleClick}
+      $disabled={disabled}
+      $hoverable={hoverable}
+      $isAnchor={!!href}
+      $selected={selected}
+      $sx={sx}
+      {...rest}
+    >
+      {children}
+    </RowElement>
+  );
+};
+
+const RowElement = styled.tr<{
+  $disabled?: boolean;
+  $hoverable?: boolean;
+  $isAnchor?: boolean;
+  $selected?: boolean;
+  $sx?: string;
+}>`
+  display: table-row;
+
+  ${({ $disabled }) =>
+    $disabled
+      ? `
+    background-color: var(--color-grey-9) !important;
+    color: var(--color-grey-7);
+    & > * {
+      color: var(--color-grey-7) !important;
+    }`
+      : ''}
+
+  ${({ $disabled, $hoverable }) =>
+    !$disabled && $hoverable ? 'background-color: var(--color-grey-9);' : ''}
+
+  ${({ $disabled, $selected }) =>
+    !$disabled && $selected ? 'background-color: var(--color-grey-8;' : ''}
+
+  ${({ $disabled, $isAnchor }) =>
+    !$disabled && $isAnchor
+      ? `
+    cursor: pointer;
+    padding-right: 24px;
+
+    &:hover {
+      background-color: var(--color-grey-10);
+
+      & > td:last-child {
+        position: relative;
+      }
+      & > td:last-child::after {
+        content: "❯";
+        color: var(--color-blue-3);
+        position: absolute;
+        right: 12px;
+        top: calc(50% - 11px);
+      }
+    }`
+      : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+Row.displayName = 'Table.Row';
+Table.Row = Row;
+
+/********************************************************
+ *  Table Cell
+ */
+
+export interface TableCellProps extends React.PropsWithChildren {
+  lines?: number;
+  padding?: string;
+  sx?: string;
+  textAlign?: 'left' | 'center' | 'right';
+  verticalAlign?: 'top' | 'middle' | 'bottom';
+  width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+}
+
+const Cell = ({
+  children,
+  lines,
+  padding = '16px 24px',
+  sx,
+  textAlign = 'left',
+  verticalAlign = 'middle',
+  width,
+}: TableCellProps) => {
+  const percentageWidth = width ? width * (1 / 16) + '%' : undefined;
+
+  return (
+    <CellElement
+      $clamp={lines}
+      $padding={padding}
+      $sx={sx}
+      $textAlign={textAlign}
+      $verticalAlign={verticalAlign}
+      $width={percentageWidth ? percentageWidth : 'fit-content'}
+    >
+      <div>{children}</div>
+    </CellElement>
+  );
+};
+
+const CellElement = styled.td<{
+  $clamp?: number;
+  $padding: string;
+  $sx?: string;
+  $textAlign: string;
+  $verticalAlign: string;
+  $width?: string;
+}>`
+  width: ${({ $width }) => $width};
+  height: 20px;
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--color-grey-3);
+  vertical-align: ${({ $verticalAlign }) =>
+    $verticalAlign ? $verticalAlign : ''};
+  text-align: ${({ $textAlign }) => ($textAlign ? $textAlign : '')};
+  padding: ${({ $padding }) => $padding};
+  ${({ $clamp }) =>
+    $clamp
+      ? `
+  & > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: ${$clamp};
+    -webkit-line-clamp: ${$clamp};
+    -webkit-box-orient: vertical;
+  }`
+      : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+Cell.displayName = 'Table.Cell';
+Table.Cell = Cell;
+
+export { Table };
+
+/********************************************************
+ *  Table Header Cell
+ */
+
+export interface TableHeaderCellProps extends React.PropsWithChildren {
+  lines?: number;
+  padding?: string;
+  sx?: string;
+  textAlign?: 'left' | 'center' | 'right';
+  verticalAlign?: 'top' | 'middle' | 'bottom';
+  width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+}
+
+const HeaderCell = ({
+  children,
+  lines,
+  padding = '16px 24px',
+  sx,
+  textAlign = 'left',
+  verticalAlign = 'middle',
+  width,
+}: TableHeaderCellProps) => {
+  const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
+
+  return (
+    <HeadCellElement
+      as="th"
+      $clamp={lines}
+      $padding={padding}
+      $sx={sx}
+      $textAlign={textAlign}
+      $verticalAlign={verticalAlign}
+      $width={percentageWidth ? percentageWidth : 'fit-content'}
+    >
+      {children}
+    </HeadCellElement>
+  );
+};
+
+const HeadCellElement = styled(CellElement)<{
+  $clamp?: number;
+  $sx?: string;
+  $textAlign: string;
+  $verticalAlign: string;
+  $width?: string;
+}>`
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+`;
+
+HeaderCell.displayName = 'Table.HeaderCell';
+Table.HeaderCell = HeaderCell;