@dotss/ui 0.0.6 → 0.0.8

package/components/Select/Option/Option.tsx

@@ -1,66 +0,0 @@
-import type { HTMLAttributes, PropsWithChildren, ReactNode, Ref } from 'react';
-import { forwardRef } from 'react';
-
-import Icon from '@components/Icon';
-import { OptionContent, StyledOption } from '@components/Select/Option/Option.styles';
-import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
-import type { GeneralComponentProps } from '@typings/component';
-
-export interface OptionProps extends GeneralComponentProps<HTMLAttributes<HTMLLIElement>> {
-  value?: string;
-  selected?: boolean;
-  focused?: boolean;
-  onClick?: () => void;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  disabled?: boolean;
-  ellipsis?: boolean;
-}
-
-const Option = forwardRef(function Option(
-  {
-    children,
-    onClick,
-    selected,
-    focused,
-    startAdornment,
-    endAdornment,
-    disabled = false,
-    ellipsis = true,
-    ...props
-  }: PropsWithChildren<OptionProps>,
-  ref: Ref<HTMLLIElement>
-) {
-  const { isHoverPossible } = useCheckHoverPossible();
-
-  return (
-    <StyledOption
-      role="option"
-      ref={ref}
-      onClick={onClick}
-      selected={selected}
-      aria-selected={selected}
-      focused={focused}
-      data-focused={focused}
-      disabled={disabled}
-      aria-disabled={disabled}
-      isHoverPossible={isHoverPossible}
-      {...props}
-    >
-      {startAdornment}
-      <OptionContent
-        ellipsis={ellipsis}
-        style={{
-          width: `calc(100% - ${startAdornment ? '28px' : '0px'} - ${endAdornment ? '28px' : '0px'}`
-        }}
-      >
-        {children}
-      </OptionContent>
-      {!selected && endAdornment}
-      {selected && !disabled && <Icon name="CheckLine" size="small" color="yellow.90" />}
-      {selected && disabled && <Icon name="CheckLine" size="small" color="grey.30" />}
-    </StyledOption>
-  );
-});
-
-export default Option;

package/components/Select/Option/index.ts

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

package/components/Select/Select.stories.tsx

@@ -1,273 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Chip from '@components/Chip';
-import Icon from '@components/Icon';
-import Option from '@components/Select/Option';
-import Typography from '@components/Typography';
-
-import Select from './Select';
-
-const meta = {
-  title: 'Component/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    startAdornment: {
-      control: {
-        disable: true
-      }
-    },
-    value: {
-      control: {
-        type: 'select'
-      },
-      options: ['1', '2', '3', '4', '5']
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    const [value, setValue] = useState(props.value);
-    const handleChange = (newValue: string | number) => {
-      setValue(newValue as string);
-    };
-
-    useEffect(() => {
-      setValue(props.value);
-    }, [props.value]);
-
-    return (
-      <div
-        style={{
-          width: '60vw',
-          display: 'flex',
-          justifyContent: 'center'
-        }}
-      >
-        <Select
-          value={value}
-          variant={props.variant}
-          size={props.size}
-          disabled={props.disabled}
-          placeholder={props.placeholder}
-          fullWidth={props.fullWidth}
-          onChange={handleChange}
-        >
-          <Option value="1">Option 1</Option>
-          <Option value="2">Option 2</Option>
-          <Option value="3">Option 3</Option>
-          <Option value="4">Option 4</Option>
-          <Option value="5" disabled>
-            Option 5
-          </Option>
-          <Option value="6">Option 6</Option>
-          <Option value="7">Option 7</Option>
-          <Option value="8">Option 8</Option>
-          <Option value="9">Option 9</Option>
-          <Option value="10">Option 10</Option>
-          <Option value="11">Option 11</Option>
-          <Option value="12">Option 12</Option>
-          <Option value="13">Option 13</Option>
-        </Select>
-      </div>
-    );
-  },
-  args: {
-    onChange: () => {},
-    value: '',
-    variant: 'outlined',
-    size: 'large',
-    disabled: false,
-    placeholder: 'placeholder',
-    fullWidth: false
-  }
-};
-
-export const WithVariousOptions: Story = {
-  render: (props) => {
-    const [value, setValue] = useState(props.value);
-    const handleChange = (newValue: string | number) => {
-      setValue(newValue as string);
-    };
-
-    useEffect(() => {
-      setValue(props.value);
-    }, [props.value]);
-
-    return (
-      <div style={{ width: '60vw', display: 'flex', justifyContent: 'center' }}>
-        <Select
-          value={value}
-          variant={props.variant}
-          size={props.size}
-          disabled={props.disabled}
-          placeholder={props.placeholder}
-          fullWidth={props.fullWidth}
-          onChange={handleChange}
-          startAdornment={props.startAdornment}
-        >
-          <Option value="1" startAdornment={<Icon name="ToyLine" size="small" />}>
-            with startAdornment
-          </Option>
-          <Option value="2" endAdornment={<Icon name="ChevronRightLine" size="small" />}>
-            with endAdornment
-          </Option>
-          <Option
-            value="3"
-            startAdornment={<Icon name="ToyLine" size="small" />}
-            endAdornment={<Icon name="ChevronRightLine" size="small" />}
-          >
-            with both adornments
-          </Option>
-          <Option value="4" disabled endAdornment={<Icon name="ChevronRightLine" size="small" />}>
-            disabled
-          </Option>
-          <Option value="5">
-            with ellipsis: it will be truncated if it exceeds the container width.
-          </Option>
-          <Option value="6" ellipsis={false}>
-            without ellipsis: it may extend beyond the container without being truncated.
-          </Option>
-        </Select>
-      </div>
-    );
-  },
-  args: {
-    onChange: () => {},
-    value: '',
-    variant: 'outlined',
-    size: 'large',
-    disabled: false,
-    placeholder: 'placeholder',
-    fullWidth: false,
-    startAdornment: <Icon name="ToyLine" size="small" />
-  }
-};
-
-export const FullWidth: Story = {
-  render: (props) => {
-    const [value, setValue] = useState(props.value);
-    const handleChange = (newValue: string | number) => {
-      setValue(newValue as string);
-    };
-
-    useEffect(() => {
-      setValue(props.value);
-    }, [props.value]);
-
-    return (
-      <div style={{ width: '60vw' }}>
-        <Select
-          value={value}
-          variant={props.variant}
-          size={props.size}
-          disabled={props.disabled}
-          placeholder={props.placeholder}
-          onChange={handleChange}
-          fullWidth
-        >
-          <Option value="1">Option 1</Option>
-          <Option value="2">Option 2</Option>
-          <Option value="3">Option 3</Option>
-          <Option value="4">Option 4</Option>
-          <Option value="5">Option 5</Option>
-          <Option value="6" disabled>
-            Option 6
-          </Option>
-          <Option value="7" disabled>
-            Option 7
-          </Option>
-          <Option value="8">Option 8</Option>
-          <Option value="9">Option 9</Option>
-          <Option value="10">Option 10</Option>
-          <Option value="11">Option 11</Option>
-          <Option value="12">Option 12</Option>
-          <Option value="13">Option 13</Option>
-        </Select>
-      </div>
-    );
-  },
-  args: {
-    onChange: () => {},
-    value: '1',
-    variant: 'filled',
-    size: 'large',
-    disabled: false,
-    placeholder: 'placeholder'
-  }
-};
-
-export const Controlled: Story = {
-  render: (props) => {
-    const [value, setValue] = useState(props.value);
-    const [open, setOpen] = useState(props.open);
-
-    const handleChange = (newValue: string | number) => {
-      setValue(newValue as string);
-    };
-
-    const handleOpen = () => {
-      setOpen(true);
-    };
-
-    const handleClose = () => {
-      setOpen(false);
-    };
-
-    useEffect(() => {
-      setValue(props.value);
-    }, [props.value]);
-
-    useEffect(() => {
-      setOpen(props.open);
-    }, [props.open]);
-
-    return (
-      <div>
-        <Typography variant="h5B" inlineCSS={{ marginBottom: 16 }}>
-          Pass
-          <Chip inlineCSS={{ fontStyle: 'italic', marginLeft: 8 }}>open</Chip>
-          <Chip inlineCSS={{ fontStyle: 'italic', marginLeft: 8 }}>onOpen</Chip>
-          <Chip inlineCSS={{ fontStyle: 'italic', marginLeft: 8 }}>onClose</Chip>
-        </Typography>
-        <Select
-          value={value}
-          variant={props.variant}
-          open={open}
-          onOpen={handleOpen}
-          onClose={handleClose}
-          size={props.size}
-          disabled={props.disabled}
-          placeholder={props.placeholder}
-          onChange={handleChange}
-        >
-          <Option value="1">Option 1</Option>
-          <Option value="2">Option 2</Option>
-          <Option value="3">Option 3</Option>
-          <Option value="4">Option 4</Option>
-          <Option value="5">Option 5</Option>
-        </Select>
-      </div>
-    );
-  },
-  args: {
-    onChange: () => {},
-    onOpen: () => {},
-    onClose: () => {},
-    value: '1',
-    variant: 'filled',
-    size: 'large',
-    open: true,
-    disabled: false,
-    placeholder: 'placeholder'
-  }
-};

package/components/Select/Select.styles.ts

@@ -1,159 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { SelectProps } from '@components/Select/Select';
-
-export const StyledSelect = styled.div<
-  Pick<SelectProps, 'variant' | 'size' | 'disabled' | 'fullWidth'> & { isFocused: boolean }
->`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  color: ${({ theme }) => theme.palette.grey['100']};
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : '328px')};
-  padding: ${({ theme }) => `${theme.spacing.content(3)}px ${theme.spacing.content(4)}px`};
-  border-radius: 10px;
-  cursor: pointer;
-  & > svg {
-    color: inherit;
-  }
-
-  ${({
-    theme: {
-      palette: { grey, background }
-    },
-    variant
-  }): CSSObject | null => {
-    let cssObject: CSSObject = {};
-    switch (variant) {
-      case 'outlined':
-        cssObject = {
-          border: `1px solid ${grey['50']}`,
-          '&[disabled]': {
-            backgroundColor: grey['10'],
-            border: `1px solid ${grey['30']}`,
-            color: grey['30'],
-            pointerEvents: 'none'
-          }
-        };
-        break;
-      case 'filled':
-        cssObject = {
-          border: '1px solid transparent',
-          backgroundColor: background.primary,
-          '&[disabled]': {
-            backgroundColor: grey['10'],
-            color: grey['30'],
-            pointerEvents: 'none'
-          }
-        };
-        break;
-      default:
-        break;
-    }
-    return cssObject;
-  }}
-
-  ${({
-    theme: {
-      palette: { brand }
-    },
-    isFocused
-  }) => {
-    if (isFocused) {
-      return {
-        border: `1px solid ${brand.primary.line}`
-      };
-    }
-    return {};
-  }}
-  
-  ${({ size }): CSSObject | null => {
-    let cssObject: CSSObject = {};
-    switch (size) {
-      case 'large':
-        cssObject = {
-          height: '48px'
-        };
-        break;
-      case 'xLarge':
-        cssObject = {
-          height: '56px'
-        };
-        break;
-      default:
-        break;
-    }
-    return cssObject;
-  }}
-`;
-
-export const StyledValueWrapper = styled.div<{ value: boolean; disabled: boolean }>`
-  display: flex;
-  width: calc(100% - 24px - 8px);
-  gap: ${({ theme }) => `${theme.spacing.content(2)}px`};
-  & svg {
-    color: inherit;
-  }
-
-  ${({
-    theme: {
-      typography,
-      palette: { grey }
-    },
-    value
-  }): CSSObject | null => {
-    const cssObject = {
-      fontSize: typography.b2R.size,
-      fontWeight: typography.b2R.size,
-      lineHeight: typography.b2R.lineHeight,
-      letterSpacing: typography.b2R.letterSpacing,
-      '&[disabled]': {
-        color: grey['30']
-      }
-    };
-    if (value) {
-      return {
-        ...cssObject,
-        color: grey['100']
-      };
-    }
-    return {
-      ...cssObject,
-      color: grey['50']
-    };
-  }}
-`;
-
-export const SelectedContent = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-export const StyledIconWrapper = styled.div<{ isFocused: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: ${({ isFocused }) => (isFocused ? 'rotate(180deg)' : 'rotate(0deg)')};
-  transition: transform 200ms linear;
-`;
-
-export const StyledOptionWrapper = styled.ul<{
-  isFocused: boolean;
-}>`
-  position: fixed;
-  max-height: 476px;
-  overflow-y: auto;
-  z-index: 100003;
-  margin-top: ${({ theme }) => `${theme.spacing.content(1)}px`};
-  display: flex;
-  flex-direction: column;
-  border-radius: 10px;
-  padding: ${({ theme }) => `${theme.spacing.content(1)}px 0`};
-  background: ${({ theme }) => theme.palette.grey.white};
-  box-shadow: ${({ theme: { elevation } }) => elevation['4']};
-  transition: opacity 200ms linear;
-  opacity: ${({ isFocused }) => (isFocused ? 1 : 0)};
-`;