@dotss/ui 0.0.6 → 0.0.8

package/CHANGELOG.md

@@ -1,9 +0,0 @@
-# @dotss/ui
-
-## 0.0.6
-
-## 0.0.5
-
-## 0.0.4
-
-## 0.0.2

package/components/Accordion/Accordion.stories.tsx

@@ -1,131 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Accordion from './Accordion';
-import Box from '../Box';
-import Typography from '../Typography';
-
-const meta = {
-  title: 'Component/Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Uncontrolled: Story = {
-  args: {
-    children: (
-      <>
-        <Typography>Content 1</Typography>
-        <Typography>Content 2</Typography>
-        <Typography>Content 3</Typography>
-        <Typography>Content 4</Typography>
-        <Typography>Content 5</Typography>
-      </>
-    ),
-    title: 'Uncontrolled Accordion',
-    expand: true
-  }
-};
-
-export const Controlled: Story = {
-  render: (props) => {
-    const [expand, setExpand] = useState(false);
-
-    const handleExpand = () => setExpand((prev) => !prev);
-
-    useEffect(() => {
-      setExpand(props.expand || false);
-    }, [props.expand]);
-
-    return (
-      <Accordion {...props} expand={expand} onChange={handleExpand}>
-        {props.children}
-      </Accordion>
-    );
-  },
-  args: {
-    children: (
-      <>
-        <Typography>Content 1</Typography>
-        <Typography>Content 2</Typography>
-        <Typography>Content 3</Typography>
-        <Typography>Content 4</Typography>
-        <Typography>Content 5</Typography>
-      </>
-    ),
-    title: 'Controlled Accordion',
-    expand: false,
-    onChange: () => {}
-  }
-};
-
-export const Nested: Story = {
-  render: () => {
-    return (
-      <Accordion title="Parent">
-        <Accordion title="Child 1">
-          <Typography>Content 1</Typography>
-          <Typography>Content 2</Typography>
-          <Typography>Content 3</Typography>
-          <Typography>Content 4</Typography>
-          <Typography>Content 5</Typography>
-        </Accordion>
-        <Accordion title="Child 2">
-          <Typography>Content 6</Typography>
-          <Typography>Content 7</Typography>
-          <Typography>Content 8</Typography>
-          <Typography>Content 9</Typography>
-          <Typography>Content 10</Typography>
-        </Accordion>
-      </Accordion>
-    );
-  },
-  args: {
-    title: 'Nested Accordion'
-  }
-};
-
-export const FullWidth: Story = {
-  render: (props) => {
-    const [expand, setExpand] = useState(false);
-
-    const handleExpand = () => setExpand((prev) => !prev);
-
-    useEffect(() => {
-      setExpand(props.expand || false);
-    }, [props.expand]);
-
-    return (
-      <Box
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <Accordion {...props} expand={expand} onChange={handleExpand}>
-          {props.children}
-        </Accordion>
-      </Box>
-    );
-  },
-  args: {
-    children: (
-      <>
-        <Typography>Content 1</Typography>
-        <Typography>Content 2</Typography>
-        <Typography>Content 3</Typography>
-        <Typography>Content 4</Typography>
-        <Typography>Content 5</Typography>
-      </>
-    ),
-    title: 'Accordion',
-    expand: false,
-    onChange: () => {}
-  }
-};

package/components/Accordion/Accordion.styles.ts

@@ -1,70 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { AccordionProps } from './Accordion';
-
-export const StyledAccordion = styled.div<Pick<AccordionProps, 'fullWidth' | 'disabled'>>`
-  display: flex;
-  flex-direction: column;
-  border-radius: 12px;
-  background-color: ${({
-    theme: {
-      palette: { grey, background }
-    },
-    disabled
-  }) => (disabled ? background.secondary : grey.white)};
-
-  ${({ fullWidth }): CSSObject | null => (fullWidth ? { width: '100%' } : null)};
-`;
-
-export const Header = styled.div<Pick<AccordionProps, 'disabled'>>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: calc(24px + (${({ theme: { spacing } }) => spacing.content(4)}px * 2));
-  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-
-  ${({
-    theme: {
-      palette: { grey },
-      typography: { h5M }
-    },
-    disabled
-  }) => ({
-    fontSize: h5M.size,
-    fontWeight: h5M.weight,
-    lineHeight: h5M.lineHeight,
-    letterSpacing: h5M.letterSpacing,
-    color: disabled ? grey['50'] : grey['70'],
-    '& svg': {
-      color: disabled ? grey['50'] : grey['70']
-    }
-  })};
-`;
-
-export const HeaderButton = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
-  padding: ${({ theme: { spacing } }) => spacing.content(4)}px;
-`;
-
-export const Rotate = styled.div<Pick<AccordionProps, 'expand'>>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s;
-  transform: rotate(${({ expand }) => (expand ? '180deg' : '0deg')});
-`;
-
-export const Panel = styled.div`
-  transition: height 0.2s;
-  overflow: hidden;
-`;
-
-export const PannelInner = styled.div`
-  padding: ${({ theme: { spacing } }) =>
-    `0 ${spacing.content(4)}px ${spacing.content(4)}px ${spacing.content(4)}px`};
-`;

package/components/Accordion/Accordion.tsx

@@ -1,132 +0,0 @@
-import type { ElementType, HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import { forwardRef, useEffect, useId, useRef, useState } from 'react';
-
-import Icon from '@components/Icon';
-import type { GeneralComponentProps, PolymorphicComponentProps } from '@typings/component';
-
-import type { CSSValue } from '@typings/utility';
-
-import convertNumberToCSSValue from '@utils/convertNumberToCSSValue';
-
-import {
-  Header,
-  HeaderButton,
-  Panel,
-  PannelInner,
-  Rotate,
-  StyledAccordion
-} from './Accordion.styles';
-
-export interface AccordionProps
-  extends Omit<GeneralComponentProps<HTMLAttributes<HTMLDivElement>>, 'title'> {
-  expand?: boolean;
-  onChange?: (e: MouseEvent<HTMLDivElement>) => void;
-  title: ReactNode;
-  endAdornment?: ReactNode;
-  fullWidth?: boolean;
-  disabled?: boolean;
-  headerProps?: PolymorphicComponentProps<ElementType>;
-}
-
-const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
-  {
-    children,
-    expand = false,
-    title,
-    endAdornment,
-    onChange,
-    disabled = false,
-    inlineCSS,
-    headerProps,
-    ...props
-  },
-  ref
-) {
-  const headerId = useId();
-  const panelId = useId();
-
-  const [isExpand, setIsExpand] = useState(expand);
-  const [height, setHeight] = useState<CSSValue>(expand ? 'auto' : '0px');
-
-  const contentInnerRef = useRef<HTMLDivElement>(null);
-
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    if (disabled) {
-      return;
-    }
-
-    if (typeof onChange === 'function') {
-      onChange(e);
-    } else {
-      setIsExpand((prev) => !prev);
-    }
-  };
-
-  useEffect(() => {
-    setIsExpand(expand);
-  }, [expand]);
-
-  useEffect(() => {
-    let timeoutId: ReturnType<typeof setTimeout>;
-    const contentHeight = convertNumberToCSSValue(
-      contentInnerRef.current?.scrollHeight || 0
-    ) as string;
-    const isStartClose = !isExpand && height === 'auto';
-    const isReadyToClose = !isExpand && height !== 'auto';
-
-    if (contentInnerRef.current?.parentElement) {
-      if (isExpand) {
-        contentInnerRef.current.parentElement.style.height = contentHeight;
-
-        timeoutId = setTimeout(() => {
-          setHeight('auto');
-          if (contentInnerRef.current?.parentElement) {
-            contentInnerRef.current.parentElement.style.height = 'auto';
-          }
-        }, 200);
-      } else if (isStartClose) {
-        contentInnerRef.current.parentElement.style.height = contentHeight;
-        setHeight(contentHeight);
-      } else if (isReadyToClose) {
-        contentInnerRef.current.parentElement.style.height = '0px';
-        setHeight('0px');
-      }
-    }
-
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [isExpand, height]);
-
-  return (
-    <StyledAccordion ref={ref} disabled={disabled} {...props} css={inlineCSS}>
-      <Header
-        as={headerProps?.tag || 'h3'}
-        onClick={handleClick}
-        disabled={disabled}
-        {...headerProps}
-      >
-        <HeaderButton
-          id={headerId}
-          aria-disabled={disabled}
-          aria-expanded={isExpand}
-          aria-controls={panelId}
-        >
-          {title}
-          <Rotate expand={isExpand}>
-            {endAdornment || <Icon name="ChevronDownLine" size="xSmall" />}
-          </Rotate>
-        </HeaderButton>
-      </Header>
-      <Panel>
-        <PannelInner role="region" id={panelId} aria-labelledby={headerId} ref={contentInnerRef}>
-          {children}
-        </PannelInner>
-      </Panel>
-    </StyledAccordion>
-  );
-});
-
-export default Accordion;

package/components/Accordion/index.ts

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

package/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,317 +0,0 @@
-import type { SyntheticEvent } from 'react';
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Box from '@components/Box';
-import Icon from '@components/Icon';
-import { MenuBlock } from '@components/Menu';
-import type { MenuBlockProps } from '@components/Menu/MenuBlock/MenuBlock';
-import Typography from '@components/Typography';
-
-import Autocomplete from './Autocomplete';
-import type { Option } from './Autocomplete';
-
-const meta = {
-  title: 'Component/Autocomplete',
-  component: Autocomplete,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Autocomplete>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    const [inputValue, setInputValue] = useState('');
-    const [menuValue, setMenuValue] = useState('');
-
-    const handleInputChange = (value: string) => {
-      setInputValue(value);
-    };
-
-    const handleMenuChange = (value: string) => {
-      setMenuValue(value);
-    };
-
-    useEffect(() => {
-      setInputValue(props.inputValue);
-      setMenuValue(props.menuValue);
-    }, [props.inputValue, props.menuValue]);
-
-    return (
-      <Box inlineCSS={{ width: '60vw' }}>
-        <Autocomplete
-          {...props}
-          inputValue={inputValue}
-          onInputChange={handleInputChange}
-          menuValue={menuValue}
-          onMenuChange={handleMenuChange}
-          minInputLengthForMenu={props.minInputLengthForMenu}
-          options={props.options}
-          isLoading={props.isLoading}
-        />
-      </Box>
-    );
-  },
-  args: {
-    inputValue: '',
-    menuValue: '',
-    onInputChange: () => {},
-    onMenuChange: () => {},
-    options: [
-      { value: '1', label: '빨간색' },
-      { value: '2', label: '주황색' },
-      { value: '3', label: '노란색' },
-      { value: '4', label: '초록색' },
-      { value: '5', label: '파란색' },
-      { value: '6', label: '남색' },
-      { value: '7', label: '보라색' }
-    ],
-    minInputLengthForMenu: 2,
-    inputProps: {
-      placeholder: '검색어를 입력해주세요',
-      size: 'large',
-      variant: 'outlined',
-      startAdornment: <Icon name="SearchLine" color="grey.50" size="medium" />
-    },
-    isLoading: false
-  }
-};
-
-export const AsynchronousOptions: Story = {
-  render: (props) => {
-    const [inputValue, setInputValue] = useState('');
-    const [menuValue, setMenuValue] = useState('');
-    const [isLoading, setIsLoading] = useState(true);
-    const [options, setOptions] = useState<typeof props.options>([]);
-
-    const handleInputChange = (value: string) => {
-      setInputValue(value);
-    };
-
-    const handleMenuChange = (value: string) => {
-      setMenuValue(value);
-    };
-
-    useEffect(() => {
-      setTimeout(() => {
-        setOptions(props.options);
-        setIsLoading(false);
-      }, 2000);
-    }, [inputValue, props.options]);
-
-    useEffect(() => {
-      setIsLoading(true);
-    }, [inputValue]);
-
-    useEffect(() => {
-      setInputValue(props.inputValue);
-      setMenuValue(props.menuValue);
-    }, [props.inputValue, props.menuValue]);
-
-    return (
-      <Box inlineCSS={{ width: '60vw' }}>
-        <Autocomplete
-          {...props}
-          inputValue={inputValue}
-          onInputChange={handleInputChange}
-          menuValue={menuValue}
-          onMenuChange={handleMenuChange}
-          options={options}
-          isLoading={isLoading}
-        />
-      </Box>
-    );
-  },
-  args: {
-    inputValue: '',
-    menuValue: '',
-    onInputChange: () => {},
-    onMenuChange: () => {},
-    options: [
-      { value: '1', label: '빨간색' },
-      { value: '2', label: '주황색' },
-      { value: '3', label: '노란색' },
-      { value: '4', label: '초록색' },
-      { value: '5', label: '파란색' },
-      { value: '6', label: '남색' },
-      { value: '7', label: '보라색' }
-    ],
-    inputProps: {
-      placeholder: '검색어를 입력해주세요',
-      size: 'xLarge',
-      variant: 'filled',
-      startAdornment: null
-    },
-    isLoading: true
-  }
-};
-
-export const CreatableOptions: Story = {
-  render: (props) => {
-    const [inputValue, setInputValue] = useState('');
-    const [menuValue, setMenuValue] = useState('');
-    const [options, setOptions] = useState<Option[]>(props.options);
-
-    const handleInputChange = (value: string) => {
-      setInputValue(value);
-    };
-
-    const handleMenuChange = async (value: string, _: SyntheticEvent, option: Option | null) => {
-      if (option && option.value === inputValue) {
-        const response: { value: string } = await new Promise((resolve) => {
-          setTimeout(() => {
-            resolve({ value: `${Math.floor(Math.random() * 100)}` });
-          }, 1000);
-        });
-        setMenuValue(response.value);
-        setInputValue(inputValue);
-
-        setOptions([...options, { value: response.value, label: inputValue }]);
-
-        return;
-      }
-
-      setMenuValue(value);
-    };
-
-    const filterOptions = (filteredOptions: Option[]) => {
-      const isExist = filteredOptions.some((option) => inputValue === option.label);
-
-      if (!isExist && inputValue) {
-        return [...filteredOptions, { value: inputValue, label: `'${inputValue}' 직접 생성` }];
-      }
-
-      return filteredOptions;
-    };
-
-    const getOptionLabel = (option: Option) => {
-      if (inputValue === option.value) {
-        return option.value;
-      }
-      return option.label;
-    };
-
-    useEffect(() => {
-      setInputValue(props.inputValue);
-      setMenuValue(props.menuValue);
-    }, [props.inputValue, props.menuValue]);
-
-    return (
-      <Box inlineCSS={{ width: '60vw' }}>
-        <Autocomplete
-          {...props}
-          inputValue={inputValue}
-          onInputChange={handleInputChange}
-          menuValue={menuValue}
-          onMenuChange={handleMenuChange}
-          options={options}
-          isLoading={props.isLoading}
-          filterOptions={filterOptions}
-          getOptionLabel={getOptionLabel}
-        />
-      </Box>
-    );
-  },
-  args: {
-    inputValue: '',
-    menuValue: '',
-    onInputChange: () => {},
-    onMenuChange: () => {},
-    options: [
-      { value: '1', label: '빨간색' },
-      { value: '2', label: '주황색' },
-      { value: '3', label: '노란색' },
-      { value: '4', label: '초록색' },
-      { value: '5', label: '파란색' },
-      { value: '6', label: '남색' },
-      { value: '7', label: '보라색' }
-    ],
-    inputProps: {
-      placeholder: '검색어를 입력해주세요',
-      variant: 'filled',
-      startAdornment: <Icon name="SearchLine" color="grey.50" size="medium" />
-    },
-    filterOptions: (options) => options,
-    isLoading: false
-  }
-};
-
-export const CustomRenderOptions: Story = {
-  render: (props) => {
-    const [inputValue, setInputValue] = useState('');
-    const [menuValue, setMenuValue] = useState('');
-
-    const handleInputChange = (value: string) => {
-      setInputValue(value);
-    };
-
-    const handleMenuChange = (value: string) => {
-      setMenuValue(value);
-    };
-
-    const renderOptions = (option: Option) => {
-      return (
-        <MenuBlock key={option.value} value={option.value} {...option.menuBlockProps}>
-          <Typography
-            tag="span"
-            variant="h5M"
-            inlineCSS={{ color: (option.menuBlockProps as Record<string, string>)['data-color'] }}
-          >
-            {`${option.label}`}
-          </Typography>
-        </MenuBlock>
-      );
-    };
-
-    const renderEmpty = (value: string) => {
-      return <MenuBlock value="EMPTY">{`'${value}' 검색 결과 없음`}</MenuBlock>;
-    };
-
-    return (
-      <Box inlineCSS={{ width: '60vw' }}>
-        <Autocomplete
-          {...props}
-          inputValue={inputValue}
-          onInputChange={handleInputChange}
-          menuValue={menuValue}
-          onMenuChange={handleMenuChange}
-          options={props.options}
-          isLoading={props.isLoading}
-          renderOptions={renderOptions}
-          renderEmpty={renderEmpty}
-        />
-      </Box>
-    );
-  },
-  args: {
-    inputValue: '',
-    menuValue: '',
-    onInputChange: () => {},
-    onMenuChange: () => {},
-    options: [
-      { value: '1', label: '빨간색', menuBlockProps: { 'data-color': 'red' } as MenuBlockProps },
-      { value: '2', label: '주황색', menuBlockProps: { 'data-color': 'orange' } as MenuBlockProps },
-      { value: '3', label: '노란색', menuBlockProps: { 'data-color': 'yellow' } as MenuBlockProps },
-      { value: '4', label: '초록색', menuBlockProps: { 'data-color': 'green' } as MenuBlockProps },
-      { value: '5', label: '파란색', menuBlockProps: { 'data-color': 'blue' } as MenuBlockProps },
-      { value: '6', label: '남색', menuBlockProps: { 'data-color': 'navy' } as MenuBlockProps },
-      { value: '7', label: '보라색', menuBlockProps: { 'data-color': 'purple' } as MenuBlockProps },
-      {
-        value: '8',
-        label: '검정색검정색검정색검정색검정색검정색검정색검정색검정색',
-        menuBlockProps: { 'data-color': 'black', ellipsis: false } as MenuBlockProps
-      }
-    ],
-    inputProps: {
-      placeholder: '검색어를 입력해주세요',
-      variant: 'filled',
-      startAdornment: <Icon name="SearchLine" color="grey.50" size="medium" />
-    },
-    isLoading: false
-  }
-};

package/components/Autocomplete/Autocomplete.styles.ts

@@ -1,5 +0,0 @@
-import styled from '@emotion/styled';
-
-import type { AutocompleteProps } from './Autocomplete';
-
-export const StyledAutocomplete = styled.div<AutocompleteProps>``;