@dotss/ui 0.0.4

package/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,127 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+
+import Flexbox from '@components/Flexbox';
+import Icon from '@components/Icon';
+import Typography from '@components/Typography';
+import type { BrandColorKey } from '@typings/color';
+import type { GeneralComponentProps } from '@typings/component';
+
+import { StyledTooltip, StyledTooltipContainer } from './Tooltip.styles';
+
+export interface TooltipProps
+  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'title'>> {
+  placement?:
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'left-top'
+    | 'left-middle'
+    | 'left-bottom'
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'right-top'
+    | 'right-middle'
+    | 'right-bottom';
+  color?: BrandColorKey;
+  title?: ReactNode;
+  body?: ReactNode;
+  endAdornment?: ReactNode;
+  open?: boolean;
+  closer?: boolean;
+  onOpen?: MouseEventHandler;
+  onClose?: MouseEventHandler;
+  wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+}
+
+const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(
+  {
+    children,
+    placement = 'bottom-center',
+    color = 'primary',
+    title,
+    body,
+    closer,
+    endAdornment,
+    inlineCSS,
+    open = false,
+    onClose,
+    wrapperProps,
+    ...props
+  },
+  ref
+) {
+  const tooltipBodyRef = useRef<HTMLDivElement>(null);
+
+  const [isOverflowed, setIsOverflowed] = useState(false);
+
+  useEffect(() => {
+    if (tooltipBodyRef.current) {
+      if (tooltipBodyRef.current.getBoundingClientRect().width >= 276) {
+        setIsOverflowed(true);
+      }
+    }
+  }, [open]);
+
+  return (
+    <StyledTooltipContainer open={open} {...wrapperProps} css={wrapperProps?.inlineCSS}>
+      {children}
+      <StyledTooltip
+        className="tooltip"
+        ref={ref}
+        placement={placement}
+        color={color}
+        {...props}
+        css={inlineCSS}
+      >
+        {title && (
+          <Flexbox alignItems="center" justifyContent="space-between" gap={2}>
+            <Typography variant="h5B" color={color === 'primary' ? 'grey.100' : 'grey.white'}>
+              {title}
+            </Typography>
+            {closer && (
+              <Flexbox flexShrink={0}>
+                <Icon
+                  className="tooltip__closer"
+                  name="CloseLine"
+                  size="xSmall"
+                  color={color === 'primary' ? 'grey.100' : 'grey.white'}
+                  onClick={onClose}
+                  inlineCSS={{ marginLeft: '2px', cursor: 'pointer' }}
+                />
+              </Flexbox>
+            )}
+          </Flexbox>
+        )}
+        <Flexbox
+          alignItems="center"
+          gap={2}
+          ref={tooltipBodyRef}
+          style={isOverflowed ? { width: '276px', whiteSpace: 'wrap' } : {}}
+        >
+          {body}
+          {endAdornment && (
+            <Flexbox flexShrink={0} inlineCSS={{ fontSize: '24px' }}>
+              {endAdornment}
+            </Flexbox>
+          )}
+          {!title && closer && (
+            <Flexbox flexShrink={0}>
+              <Icon
+                className="tooltip__closer"
+                name="CloseLine"
+                size="xSmall"
+                color={color === 'primary' ? 'grey.100' : 'grey.white'}
+                inlineCSS={{ marginLeft: '2px', cursor: 'pointer' }}
+                onClick={onClose}
+              />
+            </Flexbox>
+          )}
+        </Flexbox>
+      </StyledTooltip>
+    </StyledTooltipContainer>
+  );
+});
+
+export default Tooltip;

package/components/Tooltip/index.ts

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

package/components/Typography/Typography.stories.tsx

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Box from '@components/Box';
+
+import Typography from './Typography';
+
+const meta = {
+  title: 'Component/Typography',
+  component: Typography,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    }
+  }
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Display: Story = {
+  args: {
+    children: (
+      <>
+        놀이부터 돌봄까지
+        <br />
+        째깍악어와 함께해요
+      </>
+    ),
+    variant: 'd1B'
+  }
+};
+
+export const Headline: Story = {
+  args: {
+    children: (
+      <>
+        놀이부터 돌봄까지
+        <br />
+        째깍악어와 함께해요
+      </>
+    ),
+    variant: 'h0B'
+  }
+};
+
+export const Body: Story = {
+  args: {
+    children: (
+      <>
+        놀이부터 돌봄까지
+        <br />
+        째깍악어와 함께해요
+      </>
+    ),
+    variant: 'b1M'
+  }
+};
+
+export const Caption: Story = {
+  args: {
+    children: (
+      <>
+        놀이부터 돌봄까지
+        <br />
+        째깍악어와 함께해요
+      </>
+    ),
+    variant: 'c1B'
+  }
+};
+
+export const TextAlign: Story = {
+  args: {
+    children: (
+      <>
+        놀이부터 돌봄까지
+        <br />
+        째깍악어와 함께해요
+      </>
+    ),
+    textAlign: 'center'
+  }
+};
+
+export const NoWrap: Story = {
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          maxWidth: 100
+        }}
+      >
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    children: (
+      <>
+        놀이부터 돌봄까지
+        <br />
+        째깍악어와 함께해요
+      </>
+    ),
+    noWrap: true
+  }
+};
+
+export const LineClamp: Story = {
+  decorators: [
+    (Story) => (
+      <Box
+        inlineCSS={{
+          maxWidth: 100
+        }}
+      >
+        <Story />
+      </Box>
+    )
+  ],
+  args: {
+    children: (
+      <>
+        놀이부터 돌봄까지
+        <br />
+        째깍악어와 함께해요
+      </>
+    ),
+    lineClamp: 1
+  }
+};
+
+export const VisuallyHidden: Story = {
+  decorators: [
+    (Story) => (
+      <Box
+        inlineCSS={{
+          maxWidth: 100
+        }}
+      >
+        <Story />
+      </Box>
+    )
+  ],
+  args: {
+    children: (
+      <>
+        놀이부터 돌봄까지
+        <br />
+        째깍악어와 함께해요
+      </>
+    ),
+    visuallyHidden: true
+  }
+};

package/components/Typography/Typography.styles.ts

@@ -0,0 +1,63 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import getPaletteColor from '@utils/getPaletteColor/getPaletteColor';
+
+import type { TypographyProps } from './Typography';
+
+export const StyledTypography = styled.div<
+  Pick<
+    TypographyProps,
+    'variant' | 'color' | 'textAlign' | 'noWrap' | 'lineClamp' | 'visuallyHidden'
+  >
+>`
+  ${({ theme: { typography }, variant = 'b4R' }): CSSObject => {
+    const { size, weight, lineHeight, letterSpacing } = typography[variant];
+
+    return {
+      fontSize: size,
+      fontWeight: weight,
+      lineHeight,
+      letterSpacing
+    };
+  }};
+
+  color: ${({ theme, color = 'grey.100' }) =>
+    getPaletteColor(color, {
+      theme
+    })};
+
+  ${({ textAlign }): CSSObject | null => (textAlign ? { textAlign } : null)};
+
+  ${({ noWrap }): CSSObject | null =>
+    noWrap
+      ? {
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }
+      : null}
+
+  ${({ lineClamp }): CSSObject | null =>
+    lineClamp
+      ? {
+          display: '-webkit-box',
+          overflow: 'hidden',
+          WebkitLineClamp: lineClamp,
+          WebkitBoxOrient: 'vertical'
+        }
+      : null}
+
+  ${({ visuallyHidden }): CSSObject | null =>
+    visuallyHidden
+      ? {
+          clip: 'rect(0 0 0 0)',
+          clipPath: 'inset(50%)',
+          height: '1px',
+          overflow: 'hidden',
+          position: 'absolute',
+          whiteSpace: 'nowrap',
+          width: '1px'
+        }
+      : null}
+`;

package/components/Typography/Typography.tsx

@@ -0,0 +1,66 @@
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import useTheme from '@core/useTheme';
+import type { Color, PolymorphicComponentProps } from '@typings/component';
+
+import type {
+  TypographyBodyKey,
+  TypographyCaptionKey,
+  TypographyDisplayKey,
+  TypographyHeadlineKey
+} from '@typings/typography';
+
+import { StyledTypography } from './Typography.styles';
+
+export type TypographyProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T> & {
+  variant?: TypographyDisplayKey | TypographyHeadlineKey | TypographyBodyKey | TypographyCaptionKey;
+  color?: Color;
+  textAlign?: 'left' | 'center' | 'right';
+  noWrap?: boolean;
+  lineClamp?: number;
+  visuallyHidden?: boolean;
+};
+
+type TypographyComponent<DT extends ElementType> = <T extends ElementType = DT>(
+  props: TypographyProps<T>
+) => ReactNode;
+
+const Typography: TypographyComponent<'div'> = forwardRef(
+  (
+    {
+      children,
+      tag,
+      variant = 'b4R',
+      color = 'grey.100',
+      textAlign,
+      noWrap,
+      inlineCSS,
+      lineClamp,
+      visuallyHidden = false,
+      ...props
+    },
+    ref
+  ) => {
+    const { typography } = useTheme();
+
+    return (
+      <StyledTypography
+        ref={ref}
+        as={tag || typography[variant]?.tag}
+        variant={variant}
+        color={color}
+        textAlign={textAlign}
+        noWrap={noWrap}
+        lineClamp={lineClamp}
+        visuallyHidden={visuallyHidden}
+        {...props}
+        css={inlineCSS}
+      >
+        {children}
+      </StyledTypography>
+    );
+  }
+);
+
+export default Typography;

package/components/Typography/index.ts

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

package/components/index.ts

@@ -0,0 +1,43 @@
+export { default as Button } from './Button';
+export { default as Icon } from './Icon';
+export { default as Label } from './Label';
+export { default as Typography } from './Typography';
+export { default as Box } from './Box';
+export { default as Flexbox } from './Flexbox';
+export { default as TextField } from './TextField';
+export { default as TextArea } from './TextArea';
+export { default as IconButton } from './IconButton';
+export { default as PageControl } from './PageControl';
+export { default as Checkbox } from './Checkbox';
+export { default as Radio } from './Radio';
+export { default as Chip } from './Chip';
+export { default as SegmentedButton, SegmentedButtonBlock } from './SegmentedButton';
+export { default as Backdrop } from './Backdrop';
+export { default as Dialog, DialogTitle, DialogContent, DialogAction, DialogText } from './Dialog';
+export { default as Tooltip } from './Tooltip';
+export { default as Select, Option } from './Select';
+export { default as Menu, MenuBlock } from './Menu';
+export { default as Skeleton } from './Skeleton';
+export {
+  default as BottomSheet,
+  BottomSheetTitle,
+  BottomSheetContent,
+  BottomSheetAction,
+  BottomSheetText
+} from './BottomSheet';
+export { default as Snackbar } from './Snackbar';
+export { default as ChainPicker } from './ChainPicker';
+export type { ChainPickerItem } from './ChainPicker';
+export { default as DatePicker } from './DatePicker';
+export type { DateFormatter, DatePickerValue, DateValue } from './DatePicker';
+export { default as FormControlText } from './FormControlText';
+export { default as ClickAwayListener } from './ClickAwayListener';
+export { default as Card } from './Card';
+export { default as LineProgressIndicator } from './LineProgressIndicator';
+export { default as CircularProgressIndicator } from './CircularProgressIndicator';
+export { default as NumberKeypad, NumberKeypadBlock } from './NumberKeypad';
+export { default as FocusBoundary } from './FocusBoundary';
+export { default as Badge } from './Badge';
+export { default as Tab, TabBlock } from './Tab';
+export { default as Slider } from './Slider';
+export { default as Accordion } from './Accordion';

package/core/GlobalStyle.tsx

@@ -0,0 +1,72 @@
+import { Global } from '@emotion/react';
+
+import useTheme from '@core/useTheme';
+
+function GlobalStyle() {
+  const {
+    palette: { grey }
+  } = useTheme();
+
+  return (
+    <Global
+      styles={{
+        '*': {
+          margin: 0,
+          padding: 0,
+          font: 'inherit',
+          color: 'inherit',
+          WebkitTapHighlightColor: 'transparent',
+          userSelect: 'none'
+        },
+        '*, :after, :before': {
+          boxSizing: 'border-box',
+          MozOsxFontSmoothing: 'grayscale',
+          WebkitFontSmoothing: 'antialiased'
+        },
+        ':root': {
+          WebkitTextSizeAdjust: '100%',
+          textSizeAdjust: '100%',
+          cursor: 'default',
+          overflowWrap: 'break-word',
+          MozTabSize: 4,
+          tabSize: 4
+        },
+        'html, body': {
+          height: '100%',
+          backgroundColor: grey.white,
+          color: grey['100'],
+          fontFamily: `Pretendard, -apple-system, BlinkMacSystemFont, Helvetica Neue,
+            Apple SD Gothic Neo, Malgun Gothic, 맑은 고딕, 나눔고딕, Nanum Gothic,
+            Noto Sans KR, Noto Sans CJK KR, arial, 돋움, Dotum, Tahoma, Geneva, sans-serif`
+        },
+        'input, textarea': {
+          userSelect: 'text'
+        },
+        'picture, video, canvas': {
+          display: 'block',
+          maxWidth: '100%'
+        },
+        'svg, img, video': {
+          verticalAlign: 'middle'
+        },
+        button: {
+          background: 'none',
+          border: 0,
+          cursor: 'pointer'
+        },
+        a: {
+          textDecoration: 'none'
+        },
+        table: {
+          borderCollapse: 'collapse',
+          borderSpacing: 0
+        },
+        ul: {
+          listStyle: 'none'
+        }
+      }}
+    />
+  );
+}
+
+export default GlobalStyle;

package/core/ThemeContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+import type { ThemeConfig } from '@typings/theme/core';
+
+const ThemeContext = createContext<ThemeConfig>({
+  mode: 'light',
+  type: 'tictoccroc-parent'
+});
+
+export default ThemeContext;

package/core/ThemeProvider.tsx

@@ -0,0 +1,34 @@
+import type { PropsWithChildren } from 'react';
+
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+
+import { parentLight, teacherLight } from '@themes/tictoccroc';
+import type { ThemeConfig } from '@typings/theme/core';
+
+import GlobalStyle from './GlobalStyle';
+import ThemeContext from './ThemeContext';
+
+interface ThemeProviderProps {
+  themeConfig?: ThemeConfig;
+  disableGlobalStyle?: boolean;
+}
+
+function ThemeProvider({
+  children,
+  themeConfig = {
+    mode: 'light',
+    type: 'tictoccroc-parent'
+  },
+  disableGlobalStyle
+}: PropsWithChildren<ThemeProviderProps>) {
+  const theme = themeConfig?.type === 'tictoccroc-teacher' ? teacherLight : parentLight;
+
+  return (
+    <ThemeContext.Provider value={themeConfig}>
+      {!disableGlobalStyle && <GlobalStyle />}
+      <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+export default ThemeProvider;

package/core/useTheme.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { parentLight, teacherLight } from '@themes/tictoccroc';
+
+import ThemeContext from './ThemeContext';
+
+export default function useTheme() {
+  const { type } = useContext(ThemeContext);
+
+  return type === 'tictoccroc-teacher' ? teacherLight : parentLight;
+}

package/deploy/deploy.env

@@ -0,0 +1 @@
+GITHUB_TOKEN=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