@dotss/ui 0.0.4

package/components/NumberKeypad/NumberKeypad.tsx

@@ -0,0 +1,57 @@
+import type { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+
+import type { GeneralComponentProps, Size } from '@typings/component';
+
+import type { CSSValue } from '@typings/utility';
+
+import { StyledNumberKeypad } from './NumberKeypad.styles';
+import type NumberKeypadBlock from './NumberKeypadBlock';
+import type { NumberKeypadBlockProps } from './NumberKeypadBlock/NumberKeypadBlock';
+
+export interface NumberKeypadProps
+  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+  maxWidth?: CSSValue;
+  size?: Extract<Size, 'large' | 'small'>;
+  disabled?: boolean;
+  children?: ReactElement<typeof NumberKeypadBlock> | ReactElement<typeof NumberKeypadBlock>[];
+  onChange?: (value?: string | number, children?: ReactNode) => void;
+}
+
+const NumberKeypad = forwardRef<HTMLDivElement, NumberKeypadProps>(function NumberKeypad(
+  { children, maxWidth, size = 'small', onChange, disabled, inlineCSS, ...props },
+  ref
+) {
+  const handleClick =
+    (value?: string | number, childChildren?: ReactNode) => (e: MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+
+      if (typeof onChange === 'function') {
+        onChange(value, childChildren);
+      }
+    };
+
+  return (
+    <StyledNumberKeypad
+      ref={ref}
+      maxWidth={maxWidth || (size === 'large' ? 264 : 228)}
+      {...props}
+      css={inlineCSS}
+    >
+      {Children.map(children, (element) => {
+        if (!isValidElement<NumberKeypadBlockProps>(element)) {
+          return null;
+        }
+
+        return cloneElement(element, {
+          disabled,
+          size,
+          onClick: handleClick(element.props?.value, element.props?.children),
+          ...element.props
+        });
+      })}
+    </StyledNumberKeypad>
+  );
+});
+
+export default NumberKeypad;

package/components/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.styles.ts

@@ -0,0 +1,114 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import getContrastingTextColor from '@utils/getContrastingTextColor/getContrastingTextColor';
+
+import type { NumberKeypadBlockProps } from './NumberKeypadBlock';
+
+export const StyledNumberKeypadBlock = styled.div`
+  flex-basis: calc((100% / 3) - ${({ theme: { spacing } }) => spacing.content(3)}px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const KeypadBlockButton = styled.button<
+  Pick<NumberKeypadBlockProps, 'size' | 'disabled'> & { isHoverPossible: boolean }
+>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: ${({
+    theme: {
+      palette: { brand }
+    }
+  }) => brand.primary.main};
+  color: ${({
+    theme: {
+      palette: { brand, grey }
+    }
+  }) => getContrastingTextColor(brand.primary.main, [grey.white, grey['100']])};
+  & svg {
+    color: inherit;
+  }
+
+  ${({
+    theme: {
+      typography: { h0B, h2B }
+    },
+    size
+  }) => {
+    let cssObject: CSSObject = {
+      width: 60,
+      height: 60,
+      fontSize: h2B.size,
+      fontWeight: h2B.weight,
+      lineHeight: h2B.lineHeight,
+      letterSpacing: h2B.letterSpacing,
+      '& > svg': {
+        width: 32,
+        height: 32
+      }
+    };
+
+    if (size === 'large') {
+      cssObject = {
+        width: 80,
+        height: 80,
+        fontSize: h0B.size,
+        fontWeight: h0B.weight,
+        lineHeight: h0B.lineHeight,
+        letterSpacing: h0B.letterSpacing,
+        '& > svg': {
+          width: 36,
+          height: 36
+        }
+      };
+    }
+
+    return cssObject;
+  }};
+
+  ${({
+    theme: {
+      palette: { brand }
+    },
+    isHoverPossible
+  }): CSSObject => {
+    if (isHoverPossible) {
+      return {
+        '&:hover:not([disabled])': {
+          backgroundColor: brand.primary.press
+        }
+      };
+    }
+    return {};
+  }}
+
+  &:active:not([disabled]) {
+    background-color: ${({
+      theme: {
+        palette: { brand }
+      }
+    }) => brand.primary.press};
+  }
+
+  &:disabled {
+    background-color: ${({
+      theme: {
+        palette: { brand }
+      }
+    }) => brand.primary.disable};
+    color: ${({
+      theme: {
+        palette: { grey }
+      }
+    }) => grey['30']};
+    cursor: not-allowed;
+  }
+`;

package/components/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.tsx

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
+import type { GeneralComponentProps } from '@typings/component';
+
+import { KeypadBlockButton, StyledNumberKeypadBlock } from './NumberKeypadBlock.styles';
+import type { NumberKeypadProps } from '../NumberKeypad';
+
+export interface NumberKeypadBlockProps
+  extends GeneralComponentProps<
+    HTMLAttributes<HTMLDivElement> & Pick<NumberKeypadProps, 'size' | 'disabled'>
+  > {
+  value?: string | number;
+}
+
+const NumberKeypadBlock = forwardRef<HTMLDivElement, NumberKeypadBlockProps>(
+  function NumberKeypadBlock({ children, size, disabled, inlineCSS, ...props }, ref) {
+    const { isHoverPossible } = useCheckHoverPossible();
+    return (
+      <StyledNumberKeypadBlock ref={ref} {...props} css={inlineCSS}>
+        <KeypadBlockButton size={size} disabled={disabled} isHoverPossible={isHoverPossible}>
+          {children}
+        </KeypadBlockButton>
+      </StyledNumberKeypadBlock>
+    );
+  }
+);
+
+export default NumberKeypadBlock;

package/components/NumberKeypad/NumberKeypadBlock/index.ts

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

package/components/NumberKeypad/index.ts

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

package/components/PageControl/PageControl.stories.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PageControl from './PageControl';
+
+const meta = {
+  title: 'Component/PageControl',
+  component: PageControl,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof PageControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (props) => {
+    const [totalCount, setTotalCount] = useState(5);
+    const [page, setPage] = useState(1);
+
+    useEffect(() => {
+      setTotalCount(props?.totalCount || 5);
+    }, [props?.totalCount]);
+
+    useEffect(() => {
+      setPage(props?.page || 1);
+    }, [props?.page]);
+
+    return <PageControl totalCount={totalCount} page={page} onChange={setPage} {...props} />;
+  },
+  args: {
+    totalCount: 5,
+    page: 2,
+    color: 'primary'
+  }
+};

package/components/PageControl/PageControl.styles.ts

@@ -0,0 +1,41 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { PageControlProps } from '@components/PageControl/PageControl';
+
+export const StyledPageControl = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+`;
+
+export const Spacer = styled.span<Pick<PageControlProps, 'color'> & { isActive?: boolean }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: ${({
+    theme: {
+      palette: { grey }
+    },
+    color
+  }) => (color === 'primary' ? grey['10'] : grey['30'])};
+  cursor: pointer;
+  transition: all 150ms ease;
+  transition-property: width, border-radius, background-color, cursor;
+
+  ${({
+    theme: {
+      palette: { brand }
+    },
+    color,
+    isActive
+  }): CSSObject | null =>
+    isActive
+      ? {
+          width: 24,
+          borderRadius: 8,
+          backgroundColor: color === 'primary' ? brand.primary.pageControl : brand.primary.tooltip,
+          cursor: 'default'
+        }
+      : null}
+`;

package/components/PageControl/PageControl.tsx

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, MouseEvent } from 'react';
+import { forwardRef } from 'react';
+
+import type { BrandColorKey } from '@typings/color';
+import type { GeneralComponentProps } from '@typings/component';
+
+import { Spacer, StyledPageControl } from './PageControl.styles';
+
+export interface PageControlProps
+  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClick'>> {
+  totalCount?: number;
+  page?: number;
+  color?: Extract<BrandColorKey, 'primary' | 'secondary'>;
+  onChange?: (page: number) => void;
+}
+
+const PageControl = forwardRef<HTMLDivElement, PageControlProps>(function PageControl(
+  { totalCount = 1, page = 1, onChange, color = 'primary', inlineCSS, ...props },
+  ref
+) {
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    if (typeof onChange === 'function') {
+      onChange(Number(e.currentTarget.dataset.page));
+    }
+  };
+
+  return (
+    <StyledPageControl ref={ref} {...props} css={inlineCSS}>
+      {Array.from({ length: totalCount }, (_, index) => (
+        <Spacer
+          key={index}
+          isActive={index + 1 === page}
+          color={color}
+          data-page={index + 1}
+          onClick={handleClick}
+        />
+      ))}
+    </StyledPageControl>
+  );
+});
+
+export default PageControl;

package/components/PageControl/index.ts

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

package/components/Radio/Radio.stories.tsx

@@ -0,0 +1,52 @@
+import type { ChangeEvent } from 'react';
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Radio from './Radio';
+
+const meta = {
+  title: 'Component/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Radio>;
+
+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 (
+      <Radio
+        size={props?.size}
+        color={props?.color}
+        onChange={handleChange}
+        checked={isChecked}
+        disabled={isDisabled}
+      />
+    );
+  },
+  args: {
+    size: 'medium',
+    color: 'primary',
+    checked: true,
+    disabled: false
+  }
+};

package/components/Radio/Radio.styles.tsx

@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+
+import type { RadioProps } from '@components/Radio/Radio';
+import useTheme from '@core/useTheme';
+
+export const StyledRadio = 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: default;
+  }
+`;
+
+export function DefaultRadio({
+  size,
+  color = 'primary',
+  checked,
+  disabled
+}: Pick<RadioProps, 'size' | 'color' | 'checked' | 'disabled'>) {
+  const {
+    palette: { brand, grey, background }
+  } = useTheme();
+
+  let backgroundColor = grey.white;
+  let borderColor = grey['50'];
+  let circleColor = grey['10'];
+
+  if (checked) {
+    backgroundColor = color === 'primary' ? brand.primary.main : brand[color];
+    borderColor = color === 'primary' ? brand.primary.main : brand[color];
+    circleColor = color === 'primary' ? grey.white : grey['10'];
+  }
+
+  if (!checked && disabled) {
+    backgroundColor = background.primary;
+    borderColor = grey['30'];
+    circleColor = grey['20'];
+  }
+
+  if (checked && disabled) {
+    backgroundColor = color === 'primary' ? brand.primary.disable : grey['30'];
+    borderColor = color === 'primary' ? brand.primary.disable : grey['30'];
+    circleColor = color === 'primary' ? grey.white : grey['10'];
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size === '2xLarge' ? 48 : 24}
+      height={size === '2xLarge' ? 48 : 24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        fill={backgroundColor}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        fill={borderColor}
+      />
+      <circle cx="12" cy="12" r="4" fill={circleColor} />
+    </svg>
+  );
+}

package/components/Radio/Radio.tsx

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

package/components/Radio/index.ts

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