@dotss/ui 0.0.7 → 0.0.8

package/components/Select/Select.tsx

@@ -1,310 +0,0 @@
-import type { HTMLAttributes, KeyboardEvent, ReactElement, ReactNode, Ref } from 'react';
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from 'react';
-
-import Backdrop from '@components/Backdrop';
-import Box from '@components/Box';
-import Flexbox from '@components/Flexbox';
-import Icon from '@components/Icon';
-import type Option from '@components/Select/Option';
-import type { OptionProps } from '@components/Select/Option/Option';
-import {
-  SelectedContent,
-  StyledIconWrapper,
-  StyledOptionWrapper,
-  StyledSelect,
-  StyledValueWrapper
-} from '@components/Select/Select.styles';
-import type { GeneralComponentProps, Size, Variant } from '@typings/component';
-import getSibling from '@utils/getSibling/getSibling';
-
-export interface SelectProps
-  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
-  value: string;
-  onChange: (val: string) => void;
-  open?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-  variant?: Extract<Variant, 'outlined' | 'filled'>;
-  size?: Extract<Size, 'large' | 'xLarge'>;
-  startAdornment?: ReactNode;
-  placeholder?: string;
-  disabled?: boolean;
-  fullWidth?: boolean;
-  children?: ReactElement<typeof Option> | ReactElement<typeof Option>[];
-}
-
-const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
-  {
-    value,
-    onChange,
-    open,
-    onOpen,
-    onClose,
-    variant = 'outlined',
-    size = 'large',
-    startAdornment,
-    placeholder = 'TEXT',
-    disabled = false,
-    fullWidth,
-    children,
-    inlineCSS,
-    ...props
-  }: SelectProps,
-  ref: Ref<HTMLDivElement>
-) {
-  const componentId = useId();
-
-  const selectRef = useRef<HTMLDivElement>(null);
-  const optionRef = useRef<HTMLUListElement>(null);
-  const selectedOptionId = useRef('');
-
-  const [isFocused, setIsFocused] = useState(open || false);
-  const [focusedOptionId, setFocusedOptionId] = useState('');
-  const [optionWrapperPosition, setOptionWrapperPosition] = useState<{
-    top?: number;
-    bottom?: number;
-    left: number;
-    width: number;
-  }>({ top: 0, bottom: 0, left: 0, width: 0 });
-
-  const listBoxId = props?.id || componentId;
-
-  const handleClick = () => {
-    if (open === undefined) {
-      setIsFocused((prev) => !prev);
-    } else if (open === false && onOpen && typeof onOpen === 'function') {
-      onOpen();
-    }
-  };
-
-  const handleChange = (newValue: string | number) => () => {
-    onChange(newValue.toString());
-    handleClose();
-  };
-
-  const handleClose = () => {
-    if (open === undefined) {
-      setIsFocused(false);
-      setFocusedOptionId('');
-    } else if (open === true && onClose && typeof onClose === 'function') {
-      onClose();
-    }
-  };
-
-  const handleSelectKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    e.preventDefault();
-
-    if (e.code === 'Escape') {
-      setIsFocused(false);
-    }
-
-    if (e.code === 'Space' || e.code === 'Enter') {
-      if (!selectedOptionId.current) {
-        if (!focusedOptionId) {
-          setFocusedOptionId(`${listBoxId}-0`);
-        }
-      } else {
-        setFocusedOptionId(selectedOptionId.current);
-      }
-
-      if (isFocused) {
-        if (focusedOptionId) {
-          const focusedElement = document.querySelector(
-            `#${CSS.escape(focusedOptionId)}`
-          ) as HTMLOptionElement;
-          if (focusedElement && focusedElement.hasAttribute('value')) {
-            selectedOptionId.current = focusedElement?.id;
-            handleChange(focusedElement.value)();
-          }
-        }
-
-        setIsFocused(false);
-      } else {
-        setIsFocused(true);
-      }
-    }
-
-    if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
-      if (!isFocused) {
-        setIsFocused(true);
-      }
-
-      if (!selectedOptionId.current) {
-        setFocusedOptionId(`${listBoxId}-0`);
-      } else {
-        setFocusedOptionId(selectedOptionId.current);
-      }
-
-      if (!focusedOptionId) return;
-      const focusedElement = document.querySelector(
-        `#${CSS.escape(focusedOptionId)}`
-      ) as HTMLElement;
-      if (!focusedElement) return;
-      if (e.code === 'ArrowDown') {
-        const nextSibling = getSibling(focusedElement, 'next', { skipDisabled: true });
-        if (nextSibling && nextSibling.id) {
-          setFocusedOptionId(nextSibling.id);
-          nextSibling.scrollIntoView({ block: 'end' });
-        } else {
-          setFocusedOptionId(focusedOptionId);
-        }
-      }
-      if (e.code === 'ArrowUp') {
-        const prevSibling = getSibling(focusedElement, 'prev', { skipDisabled: true });
-        if (prevSibling && prevSibling.id) {
-          setFocusedOptionId(prevSibling.id);
-          prevSibling.scrollIntoView({ block: 'end' });
-        }
-      }
-    }
-
-    if (e.code === 'Home') {
-      setFocusedOptionId(`${listBoxId}-0`);
-    }
-
-    if (e.code === 'End') {
-      const length = Children.count(children);
-      setFocusedOptionId(`${listBoxId}-${length - 1}`);
-    }
-  };
-
-  const getLabel = (options: SelectProps['children']) => {
-    const labels = Children.map(options, (child) => {
-      if (!isValidElement<OptionProps>(child)) {
-        return null;
-      }
-      if (child && child.props.value === value) {
-        return child.props.children;
-      }
-      return null;
-    });
-    if (labels && labels.length) return labels[0];
-    return '';
-  };
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (selectRef.current) {
-        const boundingClientRect = selectRef.current.getBoundingClientRect();
-        const numOptions = Children.count(children);
-        const minOptionHeight = 40;
-        const optionWrapperMargin = 24;
-        const optionWrapperHeight =
-          minOptionHeight * numOptions > 476 ? 476 : minOptionHeight * numOptions;
-        const isOverflowing =
-          selectRef.current.getBoundingClientRect().bottom +
-            optionWrapperHeight +
-            optionWrapperMargin >
-          window.innerHeight;
-
-        if (isOverflowing) {
-          setOptionWrapperPosition({
-            bottom: 24,
-            left: boundingClientRect.left,
-            width: selectRef.current.offsetWidth
-          });
-        } else {
-          setOptionWrapperPosition({
-            top: boundingClientRect.top + boundingClientRect.height,
-            left: boundingClientRect.left,
-            width: selectRef.current.offsetWidth
-          });
-        }
-      }
-    };
-
-    handleResize();
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [children]);
-
-  useEffect(() => {
-    if (open !== undefined) setIsFocused(open);
-  }, [open]);
-
-  return (
-    <Box ref={ref} inlineCSS={{ position: 'relative' }}>
-      <StyledSelect
-        role="combobox"
-        ref={selectRef}
-        tabIndex={0}
-        variant={variant}
-        size={size}
-        disabled={disabled}
-        fullWidth={fullWidth}
-        isFocused={isFocused}
-        onClick={handleClick}
-        onKeyDown={handleSelectKeyDown}
-        aria-controls={listBoxId}
-        aria-expanded={isFocused}
-        aria-haspopup="listbox"
-        aria-activedescendant={focusedOptionId}
-        {...props}
-        css={inlineCSS}
-      >
-        <StyledValueWrapper value={value === '0' || !!value} disabled={disabled}>
-          {startAdornment && (
-            <Flexbox justifyContent="center" alignItems="center">
-              {startAdornment}
-            </Flexbox>
-          )}
-          <SelectedContent>{getLabel(children) || placeholder}</SelectedContent>
-        </StyledValueWrapper>
-        <StyledIconWrapper isFocused={isFocused}>
-          <Icon name="ChevronDownLine" size="small" color={disabled ? 'grey.30' : 'grey.100'} />
-        </StyledIconWrapper>
-      </StyledSelect>
-      <Backdrop
-        open={isFocused}
-        onClose={handleClose}
-        inlineCSS={{ backgroundColor: 'transparent' }}
-      >
-        <StyledOptionWrapper
-          id={listBoxId}
-          role="listbox"
-          ref={optionRef}
-          tabIndex={-1}
-          isFocused={isFocused}
-          style={{
-            top: optionWrapperPosition.top,
-            bottom: optionWrapperPosition.bottom,
-            left: optionWrapperPosition.left,
-            width: optionWrapperPosition.width
-          }}
-        >
-          {Children.map(children, (child, index) => {
-            if (!isValidElement<OptionProps>(child) || !child.props.value) {
-              return null;
-            }
-            const id = `${listBoxId}-${index}`;
-            const selected = value === child.props.value;
-            if (selected) {
-              selectedOptionId.current = id;
-            }
-            return cloneElement(child, {
-              id,
-              selected,
-              focused: id === focusedOptionId,
-              onClick: handleChange(child.props.value)
-            });
-          })}
-        </StyledOptionWrapper>
-      </Backdrop>
-    </Box>
-  );
-});
-
-export default Select;

package/components/Select/index.ts

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

package/components/Skeleton/Skeleton.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Flexbox from '@components/Flexbox';
-
-import Skeleton from './Skeleton';
-
-const meta = {
-  title: 'Component/Skeleton',
-  component: Skeleton,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Skeleton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    width: 100,
-    height: 100,
-    borderRadius: 4
-  }
-};
-
-export const TextHeight: Story = {
-  args: {
-    width: 100,
-    textHeight: 'h1B',
-    borderRadius: 4
-  }
-};
-
-export const Ratio: Story = {
-  decorators: [
-    (Story) => (
-      <Flexbox
-        alignItems="center"
-        justifyContent="center"
-        inlineCSS={{
-          width: 300,
-          height: 300
-        }}
-      >
-        <Story />
-      </Flexbox>
-    )
-  ],
-  args: {
-    ratio: '2:1',
-    borderRadius: 4
-  }
-};

package/components/Skeleton/Skeleton.styles.ts

@@ -1,100 +0,0 @@
-import { keyframes } from '@emotion/react';
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import convertNumberToCSSValue from '@utils/convertNumberToCSSValue';
-
-import type { SkeletonProps } from './Skeleton';
-
-const Wave = keyframes`
-  0% {
-    background-position: 100% 100%;
-  }
-  100% {
-    background-position: 0 0;
-  }
-`;
-
-export const StyledSkeleton = styled.div<
-  Pick<
-    SkeletonProps,
-    | 'ratio'
-    | 'width'
-    | 'height'
-    | 'textHeight'
-    | 'minWidth'
-    | 'minHeight'
-    | 'maxWidth'
-    | 'maxHeight'
-    | 'borderRadius'
-  >
->`
-  position: relative;
-  background-color: ${({
-    theme: {
-      palette: { background }
-    }
-  }) => background.primary};
-  border-radius: ${({ borderRadius = 0 }) => convertNumberToCSSValue(borderRadius)};
-  cursor: wait;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: no-repeat
-      linear-gradient(
-        90deg,
-        ${({
-            theme: {
-              palette: { grey }
-            }
-          }) => grey['10']}
-          30%,
-        transparent 50%,
-        ${({
-            theme: {
-              palette: { grey }
-            }
-          }) => grey['10']}
-          70%
-      );
-    background-size: 350% 350%;
-    border-radius: ${({ borderRadius = 0 }) => convertNumberToCSSValue(borderRadius)};
-    animation: ${Wave} 1.2s infinite;
-  }
-
-  ${({ ratio }): CSSObject | null => {
-    const [x, y] = String(ratio || '').split(':');
-
-    if (Number.isNaN(x) || Number.isNaN(y)) {
-      return null;
-    }
-
-    return {
-      width: 'inherit',
-      paddingTop: `calc(100% / ${x} * ${y})`
-    };
-  }};
-
-  ${({
-    theme: { typography },
-    width,
-    height,
-    textHeight,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight
-  }): CSSObject => ({
-    width,
-    height: typography[textHeight as keyof typeof typography]?.lineHeight || height,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight
-  })};
-`;

package/components/Skeleton/Skeleton.tsx

@@ -1,41 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import type { GeneralComponentProps } from '@typings/component';
-import type {
-  TypographyBodyKey,
-  TypographyCaptionKey,
-  TypographyHeadlineKey
-} from '@typings/typography';
-import type { CSSValue } from '@typings/utility';
-
-import { StyledSkeleton } from './Skeleton.styles';
-
-export interface SkeletonProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  ratio?: `${number}:${number}`;
-  width?: CSSValue;
-  height?: CSSValue;
-  textHeight?: TypographyHeadlineKey | TypographyBodyKey | TypographyCaptionKey;
-  minWidth?: CSSValue;
-  minHeight?: CSSValue;
-  maxWidth?: CSSValue;
-  maxHeight?: CSSValue;
-  borderRadius?: CSSValue;
-}
-
-const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
-  { borderRadius = 4, inlineCSS, ...props },
-  ref
-) {
-  return (
-    <StyledSkeleton
-      ref={ref}
-      borderRadius={borderRadius}
-      {...props}
-      css={inlineCSS}
-      aria-hidden="true"
-    />
-  );
-});
-
-export default Skeleton;

package/components/Skeleton/index.ts

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

package/components/Slider/Slider.stories.tsx

@@ -1,116 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Slider from './Slider';
-import Flexbox from '../Flexbox';
-import Typography from '../Typography';
-
-const meta = {
-  title: 'Component/Slider',
-  component: Slider,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    const [value, setValue] = useState(props.value);
-
-    const handleChange = (newValue: number) => {
-      setValue(newValue);
-    };
-
-    useEffect(() => {
-      setValue(props.value);
-    }, [props.value]);
-
-    return (
-      <Flexbox inlineCSS={{ width: '400px' }}>
-        <Slider {...props} value={value} onChange={handleChange} />
-      </Flexbox>
-    );
-  },
-  args: {
-    value: 3,
-    onChange: () => {},
-    step: 1,
-    min: 0,
-    max: 5,
-    disabledValues: [],
-    hasMarks: true
-  }
-};
-
-export const Custom: Story = {
-  render: (props) => {
-    const [value, setValue] = useState(props.value);
-
-    const handleChange = (newValue: number) => setValue(newValue);
-
-    useEffect(() => {
-      setValue(props.value);
-    }, [props.value]);
-
-    return (
-      <Flexbox flexDirection="column" inlineCSS={{ width: '400px' }} gap={2}>
-        <Slider {...props} value={value} onChange={handleChange} />
-      </Flexbox>
-    );
-  },
-  args: {
-    value: 1,
-    onChange: () => {},
-    step: 1,
-    min: 1,
-    max: 5,
-    hasMarks: true,
-    disabledValues: [],
-    trackProps: { inlineCSS: { background: 'transparent' } },
-    thumbProps: { inlineCSS: { background: '#FFC800' } },
-    inlineCSS: { '& .slider-mark:not([disabled])': { background: '#D7D7DA' } }
-  }
-};
-
-export const DisableCertainValues: Story = {
-  render: (props) => {
-    const [time, setTime] = useState(props.value!);
-
-    const handleChange = (value: number) => setTime(value);
-
-    useEffect(() => {
-      setTime(props.value);
-    }, [props.value]);
-
-    return (
-      <Flexbox flexDirection="column" inlineCSS={{ width: '400px' }} gap={2}>
-        <Slider {...props} value={time} onChange={handleChange} />
-        <Flexbox justifyContent="space-between">
-          <Typography variant="b4R" color="grey.70">
-            {time}
-          </Typography>
-          <Typography variant="b4R" color="grey.70">
-            {props.max! - time}
-          </Typography>
-        </Flexbox>
-      </Flexbox>
-    );
-  },
-  args: {
-    value: 1.5,
-    onChange: () => {},
-    step: 0.5,
-    min: 0,
-    max: 3.5,
-    hasMarks: true,
-    disabledValues: [0, 0.5, 3, 3.5],
-    railProps: { inlineCSS: { background: '#ECD9F4' } },
-    trackProps: { inlineCSS: { background: '#C2E5C9' } },
-    inlineCSS: { '& .slider-mark:not([disabled])': { background: '#FFF' } }
-  }
-};

package/components/Slider/Slider.styles.ts

@@ -1,66 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-export const StyledSlider = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 12px;
-  margin: ${({ theme: { spacing } }) => `${spacing.content(2)}px 0px`};
-  cursor: pointer;
-  border-radius: 20px;
-`;
-
-export const StyledRail = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: ${({ theme: { palette } }) => palette.grey['10']};
-  border-radius: inherit;
-`;
-
-export const StyledTrack = styled.div`
-  position: absolute;
-  height: 100%;
-  background: ${({ theme: { palette } }) => palette.brand.primary.main};
-  border-radius: inherit;
-`;
-
-export const StyledThumb = styled.div`
-  position: absolute;
-  display: flex;
-  width: 24px;
-  height: 24px;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${({ theme: { spacing } }) => `${spacing.content(2)}px ${spacing.content(3)}px`};
-  background: ${({ theme: { palette } }) => palette.grey['90']};
-  transform: translateX(-50%);
-  border-radius: 50%;
-`;
-
-export const StyledMark = styled.div<{ marked: boolean; hasMarks: boolean; disabled?: boolean }>`
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  transform: translateX(-50%);
-  border-radius: 50%;
-
-  ${({ theme: { palette }, marked, disabled, hasMarks }): CSSObject => {
-    if (disabled || !hasMarks) {
-      return {
-        background: 'transparent',
-        opacity: 0
-      };
-    }
-    if (marked) {
-      return {
-        background: palette.grey.white
-      };
-    }
-    return {
-      background: palette.grey['30']
-    };
-  }}
-`;