@dotss/ui 0.0.7 → 0.0.8

package/components/SegmentedButton/SegmentedButton.stories.tsx

@@ -1,216 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Box from '@components/Box';
-import Label from '@components/Label';
-
-import SegmentedButton from './SegmentedButton';
-import SegmentedButtonBlock from './SegmentedButtonBlock';
-
-const meta = {
-  title: 'Component/SegmentedButton',
-  component: SegmentedButton,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof SegmentedButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Outlined: Story = {
-  render: (props) => {
-    const [value, setValue] = useState<string | number | undefined>('1');
-
-    const handleChange = (newValue?: string | number) => setValue(newValue);
-
-    useEffect(() => {
-      setValue(props?.value || '1');
-    }, [props?.value]);
-
-    return (
-      <SegmentedButton
-        variant={props?.variant}
-        color={props?.color}
-        onChange={handleChange}
-        value={value}
-        fullWidth={props?.fullWidth}
-        rounded={props?.rounded}
-        disabled={props?.disabled}
-      >
-        <SegmentedButtonBlock text="text" value="1" />
-        <SegmentedButtonBlock text="text" value="2" />
-        <SegmentedButtonBlock text="text" value="3" />
-      </SegmentedButton>
-    );
-  },
-  args: {
-    variant: 'outlined',
-    color: 'primary',
-    fullWidth: false,
-    rounded: true,
-    disabled: false
-  }
-};
-
-export const Solid: Story = {
-  render: (props) => {
-    const [value, setValue] = useState<string | number | undefined>('1');
-
-    const handleChange = (newValue?: string | number) => setValue(newValue);
-
-    useEffect(() => {
-      setValue(props?.value || '1');
-    }, [props?.value]);
-
-    return (
-      <SegmentedButton
-        variant={props?.variant}
-        color={props?.color}
-        onChange={handleChange}
-        value={value}
-        fullWidth={props?.fullWidth}
-        rounded={props?.rounded}
-        disabled={props?.disabled}
-      >
-        <SegmentedButtonBlock text="text" value="1" />
-        <SegmentedButtonBlock text="text" value="2" />
-        <SegmentedButtonBlock text="text" value="3" />
-      </SegmentedButton>
-    );
-  },
-  args: {
-    variant: 'solid',
-    color: 'primary',
-    fullWidth: false,
-    rounded: true,
-    disabled: false
-  }
-};
-
-export const FullWidth: Story = {
-  render: (props) => {
-    const [value, setValue] = useState<string | number | undefined>('1');
-
-    const handleChange = (newValue?: string | number) => setValue(newValue);
-
-    useEffect(() => {
-      setValue(props?.value || '1');
-    }, [props?.value]);
-
-    return (
-      <Box
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <SegmentedButton
-          variant={props?.variant}
-          color={props?.color}
-          onChange={handleChange}
-          value={value}
-          fullWidth={props?.fullWidth}
-          rounded={props?.rounded}
-          disabled={props?.disabled}
-        >
-          <SegmentedButtonBlock text="text" value="1" />
-          <SegmentedButtonBlock text="text" value="2" />
-          <SegmentedButtonBlock text="text" value="3" />
-        </SegmentedButton>
-      </Box>
-    );
-  },
-  args: {
-    variant: 'solid',
-    color: 'primary',
-    fullWidth: true,
-    rounded: true,
-    disabled: false
-  }
-};
-
-export const Rounded: Story = {
-  render: (props) => {
-    const [value, setValue] = useState<string | number | undefined>('1');
-
-    const handleChange = (newValue?: string | number) => setValue(newValue);
-
-    useEffect(() => {
-      setValue(props?.value || '1');
-    }, [props?.value]);
-
-    return (
-      <Box
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <SegmentedButton
-          variant={props?.variant}
-          color={props?.color}
-          rounded={props?.rounded}
-          onChange={handleChange}
-          fullWidth={props?.fullWidth}
-          value={value}
-          disabled={props?.disabled}
-        >
-          <SegmentedButtonBlock text="text" value="1" />
-          <SegmentedButtonBlock text="text" value="2" />
-          <SegmentedButtonBlock text="text" value="3" />
-        </SegmentedButton>
-      </Box>
-    );
-  },
-  args: {
-    variant: 'solid',
-    color: 'primary',
-    fullWidth: true,
-    rounded: false,
-    disabled: false
-  }
-};
-
-export const WithLabel: Story = {
-  render: (props) => {
-    const [value, setValue] = useState<string | number | undefined>('1');
-
-    const handleChange = (newValue?: string | number) => setValue(newValue);
-
-    useEffect(() => {
-      setValue(props?.value || '1');
-    }, [props?.value]);
-
-    return (
-      <SegmentedButton
-        variant={props?.variant}
-        color={props?.color}
-        onChange={handleChange}
-        value={value}
-        fullWidth={props?.fullWidth}
-        rounded={props?.rounded}
-        disabled={props?.disabled}
-      >
-        <SegmentedButtonBlock
-          text="text"
-          value="1"
-          label={
-            <Label variant="solid" color="orange" size="xSmall">
-              추천!
-            </Label>
-          }
-        />
-        <SegmentedButtonBlock text="text" value="2" />
-        <SegmentedButtonBlock text="text" value="3" />
-      </SegmentedButton>
-    );
-  },
-  args: {
-    variant: 'outlined',
-    color: 'primary',
-    fullWidth: false,
-    rounded: true,
-    disabled: false
-  }
-};

package/components/SegmentedButton/SegmentedButton.styles.ts

@@ -1,21 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { SegmentedButtonProps } from './SegmentedButton';
-
-export const StyledSegmentedButton = styled.div<Pick<SegmentedButtonProps, 'fullWidth'>>`
-  display: flex;
-  align-items: center;
-  height: 44px;
-
-  ${({ fullWidth }): CSSObject | null =>
-    fullWidth
-      ? {
-          width: '100%',
-          '& > button': {
-            width: '100%',
-            flexShrink: 1
-          }
-        }
-      : null}
-`;

package/components/SegmentedButton/SegmentedButton.tsx

@@ -1,76 +0,0 @@
-import type { HTMLAttributes, MouseEvent, MouseEventHandler, ReactElement } from 'react';
-import { Children, cloneElement, forwardRef, isValidElement } from 'react';
-
-import type { BrandColorKey } from '@typings/color';
-import type { GeneralComponentProps, Variant } from '@typings/component';
-
-import { StyledSegmentedButton } from './SegmentedButton.styles';
-
-import type SegmentedButtonBlock from './SegmentedButtonBlock';
-import type { SegmentedButtonBlockProps } from './SegmentedButtonBlock/SegmentedButtonBlock';
-
-export interface SegmentedButtonProps
-  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
-  variant?: Extract<Variant, 'solid' | 'outlined'>;
-  color?: Extract<BrandColorKey, 'primary' | 'secondary'>;
-  onChange?: (value?: string | number) => void;
-  value?: string | number;
-  fullWidth?: boolean;
-  rounded?: boolean;
-  disabled?: boolean;
-  children?:
-    | ReactElement<typeof SegmentedButtonBlock>
-    | ReactElement<typeof SegmentedButtonBlock>[];
-}
-
-const SegmentedButton = forwardRef<HTMLDivElement, SegmentedButtonProps>(function segmentedButton(
-  {
-    children,
-    variant = 'outlined',
-    color = 'primary',
-    rounded = true,
-    onChange,
-    value,
-    fullWidth,
-    inlineCSS,
-    disabled,
-    ...props
-  },
-  ref
-) {
-  const handleClick =
-    (newValue: typeof value, childOnClick?: MouseEventHandler<HTMLButtonElement>) =>
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (typeof onChange === 'function') {
-        onChange(newValue);
-      }
-
-      if (typeof childOnClick === 'function') {
-        childOnClick(e);
-      }
-    };
-
-  return (
-    <StyledSegmentedButton ref={ref} fullWidth={fullWidth} {...props} css={inlineCSS}>
-      {Children.map(children, (element, index) => {
-        if (!isValidElement<SegmentedButtonBlockProps>(element)) {
-          return null;
-        }
-
-        return cloneElement(element, {
-          ...element.props,
-          variant,
-          color,
-          rounded,
-          disabled,
-          isActive: value === element.props?.value,
-          isFirst: index === 0,
-          isLast: Children.count(children) - 1 === index,
-          onClick: handleClick(element.props?.value, element.props?.onClick)
-        });
-      })}
-    </StyledSegmentedButton>
-  );
-});
-
-export default SegmentedButton;

package/components/SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.styles.ts

@@ -1,179 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { SegmentedButtonBlockProps } from './SegmentedButtonBlock';
-
-export const StyledSegmentedButtonBlock = styled.button<
-  Pick<
-    SegmentedButtonBlockProps,
-    'variant' | 'color' | 'rounded' | 'isFirst' | 'isLast' | 'isActive'
-  >
->`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 0 ${({ theme: { spacing } }) => spacing.content(4)}px;
-  border: 1px solid transparent;
-  background-color: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey['10']};
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    variant,
-    color,
-    isActive
-  }): CSSObject | null => {
-    let cssObject: CSSObject | null = null;
-
-    switch (variant) {
-      case 'outlined':
-        cssObject = {
-          marginRight: -1,
-          borderColor: grey['30']
-        };
-
-        if (color === 'primary' && isActive) {
-          cssObject = {
-            ...cssObject,
-            backgroundColor: brand.primary.disableLine,
-            borderColor: brand.primary.line,
-            zIndex: 1
-          };
-        }
-
-        if (color === 'secondary' && isActive) {
-          cssObject = {
-            ...cssObject,
-            backgroundColor: grey.white,
-            borderColor: grey['100'],
-            zIndex: 1
-          };
-        }
-        break;
-      default:
-        break;
-    }
-
-    return cssObject;
-  }};
-
-  ${({ isFirst, isLast }): CSSObject | null => {
-    let cssObject: CSSObject | null = null;
-
-    if (isFirst) {
-      cssObject = {
-        borderTopLeftRadius: 8,
-        borderBottomLeftRadius: 8
-      };
-    }
-
-    if (isLast) {
-      cssObject = {
-        borderTopRightRadius: 8,
-        borderBottomRightRadius: 8
-      };
-    }
-
-    return cssObject;
-  }};
-
-  ${({ rounded }): CSSObject | null => (!rounded ? { borderRadius: 0 } : null)};
-
-  &:disabled {
-    ${({
-      theme: {
-        palette: { grey, background }
-      },
-      variant
-    }): CSSObject => {
-      let cssObject: CSSObject = {
-        cursor: 'default'
-      };
-
-      if (variant === 'outlined') {
-        cssObject = {
-          ...cssObject,
-          backgroundColor: background.primary,
-          borderColor: grey['30'],
-          '& > div': {
-            color: grey['30']
-          }
-        };
-      }
-
-      if (variant === 'solid') {
-        cssObject = {
-          ...cssObject,
-          '& > div': {
-            color: grey['30']
-          }
-        };
-      }
-
-      return cssObject;
-    }};
-  }
-`;
-
-export const Inner = styled.div<Pick<SegmentedButtonBlockProps, 'isActive'>>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  ${({
-    theme: {
-      palette: { grey },
-      typography: { b4M }
-    },
-    isActive
-  }): CSSObject => ({
-    fontSize: b4M.size,
-    fontWeight: b4M.weight,
-    lineHeight: b4M.lineHeight,
-    letterSpacing: b4M.letterSpacing,
-    color: !isActive ? grey['70'] : undefined
-  })};
-`;
-
-export const InnerText = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${({ theme: { spacing } }) => spacing.content(1)}px;
-`;
-
-export const Line = styled.span`
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  width: 1px;
-  height: 20px;
-  background-color: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey['30']};
-`;
-
-export const Indicator = styled.span`
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 4px;
-  background-color: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey.black};
-`;

package/components/SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.tsx

@@ -1,71 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { GeneralComponentProps } from '@typings/component';
-
-import {
-  Indicator,
-  Inner,
-  InnerText,
-  Line,
-  StyledSegmentedButtonBlock
-} from './SegmentedButtonBlock.styles';
-import type { SegmentedButtonProps } from '../SegmentedButton';
-
-export interface SegmentedButtonBlockProps
-  extends GeneralComponentProps<
-    ButtonHTMLAttributes<HTMLButtonElement> &
-      Pick<SegmentedButtonProps, 'variant' | 'color' | 'rounded'>
-  > {
-  text: string;
-  value: string;
-  label?: ReactNode;
-  isFirst?: boolean;
-  isLast?: boolean;
-  isActive?: boolean;
-}
-
-const SegmentedButtonBlock = forwardRef<HTMLButtonElement, SegmentedButtonBlockProps>(
-  function BuildingBlock(
-    {
-      variant = 'outlined',
-      color = 'primary',
-      text,
-      label,
-      isFirst,
-      isLast,
-      isActive,
-      rounded = true,
-      disabled,
-      inlineCSS,
-      ...props
-    },
-    ref
-  ) {
-    return (
-      <StyledSegmentedButtonBlock
-        ref={ref}
-        variant={variant}
-        color={color}
-        rounded={rounded}
-        isFirst={isFirst}
-        isLast={isLast}
-        isActive={isActive}
-        disabled={disabled}
-        {...props}
-        css={inlineCSS}
-      >
-        <Inner isActive={isActive}>
-          <InnerText>
-            {text}
-            {label}
-          </InnerText>
-          {variant === 'solid' && isActive && !disabled && <Indicator />}
-        </Inner>
-        {variant === 'solid' && !isLast && <Line />}
-      </StyledSegmentedButtonBlock>
-    );
-  }
-);
-
-export default SegmentedButtonBlock;

package/components/SegmentedButton/SegmentedButtonBlock/index.ts

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

package/components/SegmentedButton/index.ts

@@ -1,5 +0,0 @@
-import SegmentedButton from './SegmentedButton';
-
-export { default as SegmentedButtonBlock } from './SegmentedButtonBlock';
-
-export default SegmentedButton;

package/components/Select/Option/Option.styles.ts

@@ -1,115 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { OptionProps } from '@components/Select/Option/Option';
-
-export const StyledOption = styled.li<
-  Pick<OptionProps, 'selected' | 'focused' | 'disabled'> & { isHoverPossible: boolean }
->`
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
-  padding: ${({ theme: { spacing } }) => `calc(10px - 2px) ${spacing.content(3)}px`};
-  width: 100%;
-  cursor: pointer;
-  overflow: hidden;
-
-  &[disabled],
-  &[disabled] * {
-    color: ${({ theme }) => theme.palette.grey['30']};
-    pointer-events: none;
-    & svg {
-      color: ${({ theme }) => theme.palette.grey['30']};
-    }
-  }
-
-  ${({ theme: { palette }, isHoverPossible }): CSSObject => {
-    if (isHoverPossible) {
-      return {
-        '&:hover': {
-          background: palette.grey['10']
-        }
-      };
-    }
-    return {};
-  }}
-  &:hover {
-    background: ${({ theme }) => theme.palette.grey['10']};
-  }
-
-  ${({
-    theme: {
-      typography,
-      palette: { grey, brand }
-    },
-    selected
-  }): CSSObject => {
-    if (selected) {
-      return {
-        '&, & *': {
-          fontSize: typography.h5B.size,
-          fontWeight: typography.h5B.weight,
-          lineHeight: typography.h5B.lineHeight,
-          letterSpacing: typography.h5B.letterSpacing,
-          color: brand.primary.text,
-          '& svg': {
-            color: brand.primary.text
-          }
-        }
-      };
-    }
-    return {
-      '&, & *': {
-        fontSize: typography.b4R.size,
-        fontWeight: typography.b4R.weight,
-        lineHeight: typography.b4R.lineHeight,
-        letterSpacing: typography.b4R.letterSpacing,
-        color: grey['100']
-      }
-    };
-  }}
-
-  ${({
-    theme: {
-      palette: { grey }
-    },
-    focused
-  }): CSSObject => {
-    if (focused) {
-      return {
-        border: `2px solid ${grey['100']}`
-      };
-    }
-    return {
-      border: '2px solid transparent'
-    };
-  }}
-
-  ${({
-    theme: {
-      palette: { grey }
-    },
-    focused
-  }): CSSObject => {
-    if (focused) {
-      return {
-        border: `2px solid ${grey['100']}`
-      };
-    }
-    return {};
-  }}
-`;
-
-export const OptionContent = styled.div<Pick<OptionProps, 'ellipsis'>>`
-  ${({ ellipsis }): CSSObject => {
-    if (ellipsis) {
-      return {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-      };
-    }
-    return {};
-  }}
-`;