@soul-refiner/design-system 0.0.26 → 0.1.2

package/src/components/actions/button/button.tsx

@@ -0,0 +1,307 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Styles } from 'common';
+import { Box, P } from 'components';
+import { ChevronDown, ChevronUp } from 'icons';
+
+const LG_ICON_SIZE = 20;
+const LG_ICON_SIZE_WO_CHILDREN = 24;
+const LG_FONT_SIZE = 16;
+const LG_PADDING = '11px 19px';
+const LG_PADDING_WO_CHILDREN = '11px';
+
+const SM_ICON_SIZE = 16;
+const SM_FONT_SIZE = 14;
+const SM_PADDING = '5px 15px';
+const SM_PADDING_WO_CHILDREN = '7px';
+
+type ButtonTypes =
+  | 'primary'
+  | 'secondary'
+  | 'outlined'
+  | 'danger'
+  | 'text'
+  | 'raised'
+  | 'special';
+type ButtonSize = 'small' | 'large';
+type ButtonShape = 'none' | 'small' | 'medium-small' | 'large';
+
+export interface ButtonProps extends React.PropsWithChildren {
+  as?: React.ElementType;
+  disabled?: boolean;
+  icon?: React.ReactElement | undefined;
+  isDropdownOpen?: boolean;
+  roundness?: ButtonShape;
+  size?: ButtonSize;
+  type?: ButtonTypes;
+}
+
+export const Button = ({
+  as = 'button',
+  children,
+  disabled,
+  icon,
+  isDropdownOpen,
+  size = 'large',
+  roundness = 'large',
+  type = 'primary',
+  ...props
+}: ButtonProps) => {
+  const Component = Components()[type];
+
+  const buttonIcon = React.Children.map(icon, (item) => {
+    if (React.isValidElement(item))
+      return {
+        ...item,
+        props: {
+          size:
+            size === 'large' && !children
+              ? LG_ICON_SIZE_WO_CHILDREN
+              : size === 'large'
+              ? LG_ICON_SIZE
+              : SM_ICON_SIZE,
+        },
+      };
+  })?.[0];
+
+  const dropdownIcon =
+    isDropdownOpen === true ? (
+      <ChevronUp size={size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE} />
+    ) : isDropdownOpen === false ? (
+      <ChevronDown size={size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE} />
+    ) : undefined;
+
+  const padding = !!children
+    ? size === 'large'
+      ? LG_PADDING
+      : SM_PADDING
+    : size === 'large'
+    ? LG_PADDING_WO_CHILDREN
+    : SM_PADDING_WO_CHILDREN;
+
+  return (
+    <Component
+      as={as}
+      disabled={disabled}
+      $align="center"
+      $display="flex"
+      $gap={size === 'large' ? 12 : 8}
+      $hasChildren={!!children}
+      $justify="center"
+      $padding={padding}
+      $roundness={roundness}
+      $size={size}
+      {...props}
+    >
+      {buttonIcon}
+      {children && (
+        <P
+          as="span"
+          $mediumBold
+          $fontSize={size === 'large' ? LG_FONT_SIZE : SM_FONT_SIZE}
+          $color="inherit"
+        >
+          {children}
+        </P>
+      )}
+      {!!children && dropdownIcon}
+    </Component>
+  );
+};
+
+const Components = (): Record<ButtonTypes, any> => ({
+  primary: Primary,
+  secondary: Secondary,
+  outlined: Outlined,
+  danger: Danger,
+  raised: Raised,
+  special: Special,
+  text: Text,
+});
+
+const base = css<{
+  $roundness: ButtonShape;
+}>`
+  display: flex;
+  border-radius: ${({ $roundness }) =>
+    $roundness === 'large'
+      ? '32px'
+      : $roundness === 'medium-small'
+      ? '8px'
+      : $roundness === 'small'
+      ? '4px'
+      : '0px'};
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  outline: none;
+
+  svg {
+    fill: currentColor;
+  }
+
+  &:disabled {
+    background-color: var(--color-grey-9) !important;
+    border: 1px solid var(--color-grey-8) !important;
+    color: var(--color-grey-7) !important;
+    cursor: unset !important;
+  }
+`;
+
+const Primary = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-primary-blue-2);
+  color: var(--color-white);
+  border: 1px solid var(--color-primary-blue-2);
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-1);
+    background-color: var(--color-primary-blue-1);
+  }
+
+  &:active {
+    border: 1px solid var(--color-primary-blue-0);
+    background-color: var(--color-primary-blue-0);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Secondary = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-primary-blue-4);
+  color: var(--color-primary-blue-2);
+  border: 1px solid var(--color-primary-blue-4);
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-2);
+    color: var(--color-primary-blue-1);
+  }
+
+  &:active {
+    color: var(--color-primary-blue-0);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Outlined = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-white);
+  color: var(--color-grey-3);
+  border: 1px solid var(--color-grey-8);
+
+  &:active {
+    background-color: var(--color-grey-8);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Danger = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-red-4);
+  color: var(--color-white);
+  border: 1px solid var(--color-red-4);
+
+  &:hover {
+    border: 1px solid var(--color-red-3);
+    background-color: var(--color-red-3);
+  }
+
+  &:active {
+    border: 1px solid var(--color-red-2);
+    background-color: var(--color-red-2);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Text = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--color-primary-blue-2);
+
+  &:hover {
+    color: var(--color-primary-blue-1);
+  }
+
+  &:active {
+    color: var(--color-primary-blue-0);
+  }
+
+  &:disabled {
+    background-color: transparent !important;
+    border: 1px solid transparent !important;
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Raised = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: var(--color-white);
+  color: var(--color-grey-3);
+  border: 1px solid var(--color-white);
+  box-shadow: var(--elevation-1);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-9);
+  }
+
+  &:active {
+    background-color: var(--color-grey-8);
+    border: 1px solid var(--color-grey-8);
+  }
+
+  &:disabled {
+    border: 1px solid var(--color-grey-9) !important;
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;
+
+const Special = styled(Box)<{
+  $roundness: ButtonShape;
+}>`
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--color-primary-grey-3);
+
+  &:hover {
+    color: var(--color-grey-3);
+  }
+
+  &:active {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    background-color: transparent !important;
+    border: 1px solid transparent !important;
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+`;

package/src/components/actions/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export type { ButtonProps } from './button';

package/src/components/actions/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export type { ButtonProps } from './button';

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import {
+  BackgroundColor,
+  BorderRadius,
+  Elevation,
+  Flex,
+  Margin,
+  Padding,
+  Polymorphic,
+  Styleable,
+} from 'types';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLDivElement>,
+  | 'children'
+  | 'dangerouslySetInnerHTML'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+  | 'title'
+> & { value?: string };
+
+export interface BoxProps
+  extends BackgroundColor,
+    BorderRadius,
+    Elevation,
+    Flex,
+    Margin,
+    Padding,
+    Polymorphic,
+    Styleable,
+    NativeProps {
+  $display?: 'block' | 'flex';
+}
+
+export const Box = ({ $display = 'flex', ...args }: BoxProps) => (
+  <Component $display={$display} {...args} />
+);
+
+export const Component = styled.div<BoxProps>`
+  ${({ $display }) => ($display === 'flex' ? 'display: flex;' : '')}
+  ${Styles.flex}
+  ${Styles.backgroundColor}
+  ${Styles.borderRadius}
+  ${Styles.elevation}
+  ${Styles.margin}
+  ${Styles.padding}
+  ${Styles.styleable}
+`;

package/src/components/atoms/box/index.ts

@@ -0,0 +1,2 @@
+export { Box } from './box';
+export type { BoxProps } from './box';

package/src/components/atoms/colors/colors.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import { H, P } from '../typography';
+
+export interface ColorProps {
+  colors: string[];
+  title: string;
+}
+
+export const Colors = ({ colors, title }: ColorProps) => {
+  return (
+    <>
+      <H.Two $textAlign="center" sx="padding-right: 16px;">
+        {title}
+      </H.Two>
+      <Row>
+        {colors.map((color) => (
+          <ColorWrapper key={color} background={color}>
+            <div />
+            <P $fontSize={12} $textAlign="center">
+              {color
+                .replaceAll(/color|-{2,}|var|\(|\)/g, '')
+                .replaceAll(/-/g, ' ')
+                .trim()
+                .split(' ')
+                .map((item) => item[0].toUpperCase() + item.slice(1))
+                .join(' ')}
+            </P>
+          </ColorWrapper>
+        ))}
+      </Row>
+    </>
+  );
+};
+
+const Row = styled.div`
+  display: flex;
+  gap: var(--spacing-2);
+  padding: 0px var(--spacing-4);
+  margin: var(--spacing-3) auto;
+  max-width: 80%;
+`;
+
+const ColorWrapper = styled.div<{
+  background: string;
+}>`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  div {
+    background: ${({ background }) => background || '--color-primary-blue-2'};
+    width: var(--extra-large);
+    height: var(--extra-large);
+  }
+`;

package/src/components/atoms/colors/index.ts

@@ -0,0 +1 @@
+export { Colors } from './colors';

package/src/components/atoms/index.ts

@@ -0,0 +1,9 @@
+export { Box } from './box';
+export type { BoxProps } from './box';
+export { Display, H, P, Typography } from './typography';
+export type {
+  DisplayProps,
+  HeadingProps,
+  ParagraphProps,
+  TypographyProps,
+} from './typography';

package/src/components/atoms/typography/display.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography, TypographyProps } from './typography';
+
+export interface CommonProps extends TypographyProps {
+  as?: React.ElementType;
+  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+}
+
+export interface DisplayProps extends CommonProps {
+  $fontSize?: 56 | 64;
+  $lineHeight?: 84 | 96;
+}
+
+export const Display = ({
+  as = 'h1',
+  $fontSize = 64,
+  $lineHeight = 96,
+  $textAlign = 'left',
+  ...rest
+}: DisplayProps) => (
+  <StyledDisplay
+    as={as || 'h1'}
+    $fontSize={$fontSize}
+    $lineHeight={$lineHeight}
+    $textAlign={$textAlign}
+    {...rest}
+  />
+);
+
+const StyledDisplay = styled(Typography)<DisplayProps>`
+  font-size: ${({ $fontSize }) => $fontSize + 'px'};
+  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
+  text-align: ${({ $textAlign }) => $textAlign || 'left'};
+`;

package/src/components/atoms/typography/heading.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography, TypographyProps } from './typography';
+
+export interface CommonProps extends TypographyProps {
+  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+}
+
+export interface HeadingProps extends CommonProps {
+  as?: React.ElementType;
+  $fontSize?: 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48;
+  $lineHeight?: 64 | 60 | 54 | 48 | 36 | 28 | 26;
+}
+
+const StyledH = styled(Typography)<HeadingProps>`
+  font-size: ${({ $fontSize }) => $fontSize + 'px'};
+  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
+  text-align: ${({ $textAlign }) => $textAlign || 'left'};
+`;
+
+export const H = (args: HeadingProps) => <StyledH {...args} />;
+
+const One = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h1'} $fontSize={48} $lineHeight={64} {...rest} />
+);
+One.displayName = 'H.One';
+H.One = One;
+
+const Two = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h2'} $fontSize={40} $lineHeight={60} {...rest} />
+);
+Two.displayName = 'H.Two';
+H.Two = Two;
+
+const Three = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h3'} $fontSize={36} $lineHeight={54} {...rest} />
+);
+Three.displayName = 'H.Three';
+H.Three = Three;
+
+const Four = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h4'} $fontSize={32} $lineHeight={48} {...rest} />
+);
+Four.displayName = 'H.Four';
+H.Four = Four;
+
+const Five = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h5'} $fontSize={28} $lineHeight={36} {...rest} />
+);
+Five.displayName = 'H.Five';
+H.Five = Five;
+
+const Six = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h6'} $fontSize={24} $lineHeight={36} {...rest} />
+);
+Six.displayName = 'H.Six';
+H.Six = Six;
+
+const Seven = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h6'} $fontSize={20} $lineHeight={28} {...rest} />
+);
+Seven.displayName = 'H.Seven';
+H.Seven = Seven;
+
+const Eight = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h6'} $fontSize={18} $lineHeight={26} {...rest} />
+);
+Eight.displayName = 'H.Eight';
+H.Eight = Eight;

package/src/components/atoms/typography/index.ts

@@ -0,0 +1,8 @@
+export { Display } from './display';
+export type { DisplayProps } from './display';
+export { H } from './heading';
+export type { HeadingProps } from './heading';
+export { P } from './paragraph';
+export type { ParagraphProps } from './paragraph';
+export { Typography } from './typography';
+export type { TypographyProps } from './typography';

package/src/components/atoms/typography/paragraph.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography, TypographyProps } from './typography';
+
+export interface CommonProps extends TypographyProps {
+  as?: React.ElementType;
+  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+}
+
+export interface ParagraphProps extends CommonProps {
+  $fontSize?: 10 | 11 | 12 | 14 | 16;
+  $lineHeight?: 14 | 16 | 20 | 24;
+}
+
+export const P = ({
+  as = 'p',
+  children,
+  $fontSize = 16,
+  $lineHeight = 24,
+  $textAlign = 'left',
+  ...rest
+}: ParagraphProps) => (
+  <StyledP
+    as={as}
+    $fontSize={$fontSize}
+    $lineHeight={$lineHeight}
+    $textAlign={$textAlign}
+    {...rest}
+  >
+    {children}
+  </StyledP>
+);
+
+const StyledP = styled(Typography)<ParagraphProps>`
+  font-size: ${({ $fontSize }) => $fontSize + 'px'};
+  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
+  text-align: ${({ $textAlign }) => $textAlign || 'left'};
+`;

package/src/components/atoms/typography/typography.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { Styles } from 'common';
+import {
+  Color,
+  Styleable,
+  TextClamp,
+  TypographyStyle,
+  TypographyWeight,
+} from 'types';
+
+export type TypographyProps = Pick<
+  React.HTMLAttributes<HTMLParagraphElement>,
+  | 'children'
+  | 'className'
+  | 'dangerouslySetInnerHTML'
+  | 'id'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string } & Color &
+  Styleable &
+  TextClamp &
+  TypographyStyle &
+  TypographyWeight;
+
+export const Typography = styled.p<TypographyProps>`
+  margin: 0px;
+  font-family: Inter;
+  ${Styles.color}
+  ${Styles.weight}
+  ${Styles.typography}
+  ${Styles.textClamp}
+  ${Styles.styleable}
+`;