@dotss/ui 0.0.7 → 0.0.8

package/components/ChainPicker/index.ts

@@ -1,5 +0,0 @@
-import ChainPicker from './ChainPicker';
-
-export { type ChainPickerItem } from './ChainPicker';
-
-export default ChainPicker;

package/components/Checkbox/Checkbox.stories.tsx

@@ -1,52 +0,0 @@
-import type { ChangeEvent } from 'react';
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Checkbox from './Checkbox';
-
-const meta = {
-  title: 'Component/Checkbox',
-  component: Checkbox,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    const [isChecked, setIsChecked] = useState(false);
-    const [isDisabled, setIsDisabled] = useState(false);
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
-      setIsChecked(e.currentTarget.checked);
-
-    useEffect(() => {
-      setIsChecked(props?.checked || false);
-    }, [props?.checked]);
-
-    useEffect(() => {
-      setIsDisabled(props?.disabled || false);
-    }, [props?.disabled]);
-
-    return (
-      <Checkbox
-        size={props?.size}
-        color={props?.color}
-        onChange={handleChange}
-        checked={isChecked}
-        disabled={isDisabled}
-      />
-    );
-  },
-  args: {
-    size: 'medium',
-    color: 'primary',
-    checked: true,
-    disabled: false
-  }
-};

package/components/Checkbox/Checkbox.styles.tsx

@@ -1,83 +0,0 @@
-import styled from '@emotion/styled';
-
-import type { CheckboxProps } from '@components/Checkbox/Checkbox';
-import useTheme from '@core/useTheme';
-
-export const StyledCheckbox = styled.span`
-  position: relative;
-  display: inline-flex;
-`;
-
-export const BaseInput = styled.input`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-
-export function DefaultCheckbox({
-  size,
-  checked,
-  disabled,
-  color = 'primary'
-}: Pick<CheckboxProps, 'size' | 'checked' | 'disabled' | 'color'>) {
-  const {
-    palette: { brand, grey, background }
-  } = useTheme();
-
-  let backgroundColor = grey.white;
-  let borderColor = grey['50'];
-  let checkColor = grey['20'];
-
-  if (checked) {
-    backgroundColor = color === 'primary' ? brand.primary.main : brand[color];
-    borderColor = color === 'primary' ? brand.primary.main : brand[color];
-    checkColor = grey.white;
-  }
-
-  if (checked && disabled) {
-    backgroundColor = grey['30'];
-    borderColor = grey['30'];
-    checkColor = grey['10'];
-  }
-
-  if (!checked && disabled) {
-    backgroundColor = background.primary;
-    borderColor = grey['30'];
-    checkColor = grey['20'];
-  }
-
-  return (
-    <svg
-      width={size === '2xLarge' ? 48 : 24}
-      height={size === '2xLarge' ? 48 : 24}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"
-        fill={backgroundColor}
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3ZM6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6Z"
-        fill={borderColor}
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18.604 6.20309C19.0442 6.53668 19.1306 7.16392 18.797 7.60408L11.218 17.6041C11.0406 17.8382 10.7692 17.9824 10.4759 17.9985C10.1826 18.0147 9.89706 17.901 9.69505 17.6878L5.27405 13.0211C4.89422 12.6202 4.91133 11.9873 5.31227 11.6074C5.7132 11.2276 6.34613 11.2447 6.72596 11.6456L10.3362 15.4564L17.203 6.39603C17.5366 5.95588 18.1639 5.8695 18.604 6.20309Z"
-        fill={checkColor}
-      />
-    </svg>
-  );
-}

package/components/Checkbox/Checkbox.tsx

@@ -1,27 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import type { BrandColorKey } from '@typings/color';
-import type { GeneralComponentProps, Size } from '@typings/component';
-
-import { BaseInput, DefaultCheckbox, StyledCheckbox } from './Checkbox.styles';
-
-export interface CheckboxProps
-  extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
-  size?: Extract<Size, 'medium' | '2xLarge'>;
-  color?: BrandColorKey;
-}
-
-const Checkbox = forwardRef<HTMLSpanElement, CheckboxProps>(function Checkbox(
-  { size = 'medium', color = 'primary', checked, disabled, inlineCSS, ...props },
-  ref
-) {
-  return (
-    <StyledCheckbox ref={ref} css={inlineCSS}>
-      <BaseInput type="checkbox" checked={checked} disabled={disabled} {...props} />
-      <DefaultCheckbox size={size} color={color} checked={checked} disabled={disabled} />
-    </StyledCheckbox>
-  );
-});
-
-export default Checkbox;

package/components/Checkbox/index.ts

@@ -1,3 +0,0 @@
-import Checkbox from './Checkbox';
-
-export default Checkbox;

package/components/Chip/Chip.stories.tsx

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Chip from '@components/Chip/Chip';
-import Icon from '@components/Icon';
-
-const meta = {
-  title: 'Component/Chip',
-  component: Chip,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    startAdornment: {
-      control: {
-        disable: true
-      }
-    },
-    endAdornment: {
-      control: {
-        disable: true
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Chip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Filled: Story = {
-  args: {
-    children: 'CHIP',
-    variant: 'filled',
-    selected: false,
-    disabled: false
-  }
-};
-
-export const Outlined: Story = {
-  args: {
-    children: 'CHIP',
-    variant: 'outlined',
-    selected: false,
-    disabled: false
-  }
-};
-
-export const StartAdornment: Story = {
-  args: {
-    children: 'CHIP',
-    variant: 'filled',
-    selected: false,
-    disabled: false,
-    startAdornment: <Icon name="PlusLine" />
-  }
-};
-
-export const EndAdornment: Story = {
-  args: {
-    children: 'CHIP',
-    variant: 'filled',
-    selected: false,
-    disabled: false,
-    endAdornment: <Icon name="ChevronRightLine" />
-  }
-};
-
-export const BothAdornment: Story = {
-  args: {
-    children: 'CHIP',
-    variant: 'filled',
-    selected: false,
-    disabled: false,
-    startAdornment: <Icon name="PlusLine" />,
-    endAdornment: <Icon name="ChevronRightLine" />
-  }
-};
-
-export const IconOnly: Story = {
-  args: {
-    children: 'CHIP',
-    variant: 'filled',
-    selected: false,
-    disabled: false,
-    startAdornment: <Icon name="SearchLine" />,
-    iconOnly: true
-  }
-};

package/components/Chip/Chip.styles.ts

@@ -1,101 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { ChipProps } from '@components/Chip/Chip';
-import getContrastingTextColor from '@utils/getContrastingTextColor/getContrastingTextColor';
-
-export const StyledChip = styled.div<ChipProps & { isHoverPossible: boolean }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${({ theme: { spacing } }) => spacing.content(1)}px;
-  border-radius: 18px;
-  box-sizing: border-box;
-  color: ${({ theme }) => theme.palette.grey['100']};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-
-  ${({
-    theme: {
-      palette: { brand, grey, background }
-    },
-    variant,
-    selected,
-    isHoverPossible
-  }): CSSObject => {
-    let cssObject = {};
-    if (variant === 'filled') {
-      cssObject = {
-        backgroundColor: selected ? brand.primary.main : background.primary,
-        color: getContrastingTextColor(selected ? brand.primary.main : background.primary, [
-          grey.white,
-          grey['100']
-        ]),
-        border: '1px solid transparent',
-        '&:active:not([disabled])': {
-          backgroundColor: selected ? brand.primary.press : grey['10']
-        },
-        '&[disabled]': {
-          backgroundColor: selected ? brand.primary.disable : grey['10'],
-          color: grey['30']
-        },
-        '& svg': {
-          color: 'inherit'
-        }
-      };
-      if (isHoverPossible) {
-        cssObject = {
-          ...cssObject,
-          '&:hover:not([disabled])': {
-            backgroundColor: selected ? brand.primary.press : grey['10']
-          }
-        };
-      }
-      return cssObject;
-    }
-    if (variant === 'outlined') {
-      cssObject = {
-        backgroundColor: grey.white,
-        color: grey['70'],
-        border: `1px solid ${selected ? brand.primary.main : grey['30']}`,
-        '&:active:not([disabled])': {
-          backgroundColor: selected ? brand.primary.disable : grey['10']
-        },
-        '&[disabled]': {
-          backgroundColor: selected ? brand.primary.disable : grey['10'],
-          borderColor: selected ? brand.primary.disableLine : grey['30'],
-          color: grey['30']
-        },
-        '& svg': {
-          color: 'inherit'
-        }
-      };
-      if (isHoverPossible) {
-        cssObject = {
-          ...cssObject,
-          '&:hover:not([disabled])': {
-            backgroundColor: selected ? brand.primary.disable : grey['10']
-          }
-        };
-      }
-      return cssObject;
-    }
-    return cssObject;
-  }}
-
-  ${({ theme: { typography } }): CSSObject => {
-    return {
-      padding: '8px 11px',
-      maxHeight: 36,
-      fontSize: typography.b4M.size,
-      fontWeight: typography.b4M.weight,
-      lineHeight: typography.b4M.lineHeight,
-      letterSpacing: typography.b4M.letterSpacing,
-      textAlign: 'center',
-      '& svg': {
-        width: 16,
-        height: 16
-      }
-    };
-  }}
-`;

package/components/Chip/Chip.tsx

@@ -1,58 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import { StyledChip } from '@components/Chip/Chip.styles';
-import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
-import type { PolymorphicComponentProps, Variant } from '@typings/component';
-
-// TODO selected prop 구현 필요
-export type ChipProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T> & {
-  variant?: Extract<Variant, 'filled' | 'outlined'>;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  iconOnly?: boolean;
-  selected?: boolean;
-  disabled?: boolean;
-};
-
-type ChipComponent<DT extends ElementType> = <T extends ElementType = DT>(
-  props: ChipProps<T>
-) => ReactNode;
-
-const Chip: ChipComponent<'div'> = forwardRef(
-  (
-    {
-      children,
-      tag,
-      variant = 'filled',
-      startAdornment,
-      endAdornment,
-      iconOnly,
-      selected = false,
-      disabled = false,
-      inlineCSS,
-      ...props
-    },
-    ref
-  ) => {
-    const { isHoverPossible } = useCheckHoverPossible();
-    return (
-      <StyledChip
-        as={tag}
-        ref={ref}
-        variant={variant}
-        selected={selected}
-        disabled={disabled}
-        isHoverPossible={isHoverPossible}
-        {...props}
-        css={inlineCSS}
-      >
-        {startAdornment}
-        {!iconOnly && children}
-        {endAdornment}
-      </StyledChip>
-    );
-  }
-);
-
-export default Chip;

package/components/Chip/index.ts

@@ -1,3 +0,0 @@
-import Chip from './Chip';
-
-export default Chip;

package/components/CircularProgressIndicator/CircularProgressIndicator.stories.tsx

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Flexbox from '@components/Flexbox';
-
-import CircularProgressIndicator from './CircularProgressIndicator';
-
-const meta = {
-  title: 'Component/CircularProgressIndicator',
-  component: CircularProgressIndicator,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof CircularProgressIndicator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    return (
-      <Flexbox
-        alignItems="center"
-        justifyContent="center"
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <CircularProgressIndicator size={props?.size} value={props?.value} loop={props?.loop} />
-      </Flexbox>
-    );
-  },
-  args: {
-    size: 'small',
-    value: 20,
-    transitionDuration: 500,
-    loop: false
-  }
-};
-
-export const Loop: Story = {
-  render: (props) => {
-    return (
-      <Flexbox
-        alignItems="center"
-        justifyContent="center"
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <CircularProgressIndicator size={props?.size} value={props?.value} loop={props?.loop} />
-      </Flexbox>
-    );
-  },
-  args: {
-    size: 'small',
-    value: 20,
-    transitionDuration: 500,
-    loop: true
-  }
-};

package/components/CircularProgressIndicator/CircularProgressIndicator.styles.ts

@@ -1,78 +0,0 @@
-import { keyframes } from '@emotion/react';
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { CircularProgressIndicatorProps } from './CircularProgressIndicator';
-
-const loopKeyframe = keyframes`
-    100% {
-        transform: rotate(270deg);
-    }
-`;
-
-export const StyledCircularProgressIndicator = styled.svg<
-  Pick<CircularProgressIndicatorProps, 'size' | 'loop'>
->`
-  ${({ size }): CSSObject =>
-    size === 'large'
-      ? {
-          width: 120,
-          height: 120
-        }
-      : {
-          width: 40,
-          height: 40
-        }};
-
-  transform: rotate(-90deg);
-
-  ${({ loop }): CSSObject =>
-    loop
-      ? {
-          animation: `${loopKeyframe} 1s infinite`
-        }
-      : {}};
-`;
-
-export const CircleFrame = styled.circle<Pick<CircularProgressIndicatorProps, 'size'>>`
-  ${({ size }): CSSObject =>
-    size === 'large'
-      ? {
-          cx: 60,
-          cy: 60,
-          strokeWidth: 16
-        }
-      : {
-          cx: 20,
-          cy: 20,
-          strokeWidth: 4
-        }};
-  stroke: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey['10']};
-`;
-
-export const CircleIndicator = styled.circle<
-  Pick<CircularProgressIndicatorProps, 'size' | 'transitionDuration'>
->`
-  transition: stroke-dashoffset ${({ transitionDuration }) => transitionDuration}ms linear 0s;
-  ${({ size }): CSSObject =>
-    size === 'large'
-      ? {
-          cx: 60,
-          cy: 60,
-          strokeWidth: 16
-        }
-      : {
-          cx: 20,
-          cy: 20,
-          strokeWidth: 4
-        }};
-  stroke: ${({
-    theme: {
-      palette: { brand }
-    }
-  }) => brand.primary.main};
-`;

package/components/CircularProgressIndicator/CircularProgressIndicator.tsx

@@ -1,53 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import type { GeneralComponentProps, Size } from '@typings/component';
-
-import {
-  CircleFrame,
-  CircleIndicator,
-  StyledCircularProgressIndicator
-} from './CircularProgressIndicator.styles';
-
-export interface CircularProgressIndicatorProps
-  extends GeneralComponentProps<HTMLAttributes<SVGSVGElement>> {
-  size?: Extract<Size, 'large' | 'small'>;
-  value?: number;
-  transitionDuration?: number;
-  loop?: boolean;
-}
-
-const CircularProgressIndicator = forwardRef<SVGSVGElement, CircularProgressIndicatorProps>(
-  function CircularProgressIndicator(
-    { size = 'small', value = 0, transitionDuration = 500, inlineCSS, loop, ...props },
-    ref
-  ) {
-    const radius = size === 'large' ? 52 : 18;
-    const circumference = 2 * Math.PI * radius;
-    const dashoffset = circumference * (1 - (loop ? 20 : value) / 100);
-
-    return (
-      <StyledCircularProgressIndicator
-        ref={ref}
-        viewBox={size === 'large' ? '0 0 120 120' : '0 0 40 40'}
-        fill="none"
-        size={size}
-        loop={loop}
-        {...props}
-        css={inlineCSS}
-      >
-        <CircleFrame size={size} r={radius} />
-        <CircleIndicator
-          size={size}
-          transitionDuration={transitionDuration}
-          r={radius}
-          strokeLinecap="round"
-          strokeDashoffset={dashoffset}
-          strokeDasharray={circumference}
-        />
-      </StyledCircularProgressIndicator>
-    );
-  }
-);
-
-export default CircularProgressIndicator;

package/components/CircularProgressIndicator/index.tsx

@@ -1,3 +0,0 @@
-import CircularProgressIndicator from './CircularProgressIndicator';
-
-export default CircularProgressIndicator;

package/components/ClickAwayListener/ClickAwayListener.tsx

@@ -1,35 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { useEffect, useRef } from 'react';
-
-import Box from '@components/Box';
-
-export interface ClickAwayListenerProps extends HTMLAttributes<HTMLDivElement> {
-  onClickAway: (target: EventTarget | null) => void;
-}
-
-function ClickAwayListener({ onClickAway, children, ...props }: ClickAwayListenerProps) {
-  const boxRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleAway = (e: Event) => {
-      if (boxRef.current && !boxRef.current.contains(e.target as Node)) {
-        onClickAway(e.target);
-      }
-    };
-
-    window.addEventListener('mousedown', handleAway);
-    window.addEventListener('touchstart', handleAway);
-    return () => {
-      window.removeEventListener('mousedown', handleAway);
-      window.removeEventListener('touchstart', handleAway);
-    };
-  }, [onClickAway]);
-
-  return (
-    <Box ref={boxRef} {...props}>
-      {children}
-    </Box>
-  );
-}
-
-export default ClickAwayListener;

package/components/ClickAwayListener/index.ts

@@ -1,3 +0,0 @@
-import ClickAwayListener from './ClickAwayListener';
-
-export default ClickAwayListener;