@dotss/ui 0.0.4

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@chromatic-com/storybook',
+    '@storybook/addon-a11y'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
+};
+
+export default config;

package/.storybook/manager-head.html

@@ -0,0 +1,6 @@
+<link
+  rel="icon"
+  type="image/png"
+  href="https://cdn.imweb.me/thumbnail/20231101/b3e9be62238bc.png"
+  sizes="any"
+/>

package/.storybook/manager.ts

@@ -0,0 +1,11 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming';
+
+const theme = create({
+  base: 'light',
+  brandImage: 'https://cdn.tictoccroc.com/parents/images/logo.png'
+});
+
+addons.setConfig({
+  theme
+});

package/.storybook/preview-head.html

@@ -0,0 +1,16 @@
+<link
+  rel="preload"
+  href="https://static.tictoccroc.co.kr/parent/fonts/PretendardVariable.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+<style>
+  @font-face {
+    font-family: Pretendard;
+    font-weight: 400 700;
+    font-display: swap;
+    src: url('https://static.tictoccroc.co.kr/parent/fonts/PretendardVariable.woff2')
+      format('woff2-variations');
+  }
+</style>

package/.storybook/preview.tsx

@@ -0,0 +1,56 @@
+import type { Preview } from '@storybook/react';
+
+import ThemeProvider from '@core/ThemeProvider';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      },
+      exclude: ['tag']
+    },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            enabled: false
+          }
+        ]
+      }
+    }
+  },
+  argTypes: {
+    inlineCSS: {
+      control: {
+        disable: true
+      }
+    }
+  },
+  globalTypes: {
+    theme: {
+      toolbar: {
+        title: 'Theme',
+        icon: 'cog',
+        items: ['tictoccroc-parent', 'tictoccroc-teacher'],
+        dynamicTitle: true
+      }
+    }
+  },
+  decorators: [
+    (Story, { globals }) => (
+      <ThemeProvider
+        themeConfig={{
+          mode: 'light',
+          type: globals?.theme || 'tictoccroc-parent'
+        }}
+      >
+        <Story />
+      </ThemeProvider>
+    )
+  ]
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# @dotss/ui
+
+## 0.0.4
+
+## 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Crown Copyright (Office for National Statistics)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# Connecting the Dots Corp. Design System
+
+![NPM License](https://img.shields.io/npm/l/%40thedotscorp%2Fui)
+
+## Installing as a dependency
+
+```bash
+npm install @dotss/ui
+yarn add @dotss/ui
+pnmp add @dotss/ui
+```
+
+## Run Locally
+
+You'll need [Git](https://help.github.com/articles/set-up-git/), [Node.js(^16.0)](https://nodejs.org/en/), and [Pnpm](https://pnpm.io/installation) to run this project locally.
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+### Start a local server with storybook
+
+```bash
+pnpm storybook
+```
+
+Once the server has started, navigate to http://localhost:6006
+
+## Build
+
+```bash
+pnpm build
+```
+
+Once the build is done, the compiled files will be in the `./dist` directory.
+
+## Contributors
+
+<br/>
+<table>
+      <tbody>
+        <tr>
+            <td align='center'><a href="https://github.com/namjuK"><img src="https://github.com/namjuK.png" width="60px;" alt='namjuK'/><br><sub>Namju Kim</sub></a></td>
+            <td align='center'><a href="https://github.com/kimjh96"><img src="https://github.com/kimjh96.png" width="60px;" alt='kimjh96'/><br><sub>Jonghyeok Kim</sub></a></td>
+            <td align='center'><a href="https://github.com/ksr20612"><img src="https://github.com/ksr20612.png" width="60px;" alt='ksr20612'/><br><sub>Dongyeon Yu</sub></a></td>
+        </tr>
+    </tbody>
+</table>

package/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Accordion from './Accordion';
+import Box from '../Box';
+import Typography from '../Typography';
+
+const meta = {
+  title: 'Component/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Uncontrolled: Story = {
+  args: {
+    children: (
+      <>
+        <Typography>Content 1</Typography>
+        <Typography>Content 2</Typography>
+        <Typography>Content 3</Typography>
+        <Typography>Content 4</Typography>
+        <Typography>Content 5</Typography>
+      </>
+    ),
+    title: 'Uncontrolled Accordion',
+    expand: true
+  }
+};
+
+export const Controlled: Story = {
+  render: (props) => {
+    const [expand, setExpand] = useState(false);
+
+    const handleExpand = () => setExpand((prev) => !prev);
+
+    useEffect(() => {
+      setExpand(props.expand || false);
+    }, [props.expand]);
+
+    return (
+      <Accordion {...props} expand={expand} onChange={handleExpand}>
+        {props.children}
+      </Accordion>
+    );
+  },
+  args: {
+    children: (
+      <>
+        <Typography>Content 1</Typography>
+        <Typography>Content 2</Typography>
+        <Typography>Content 3</Typography>
+        <Typography>Content 4</Typography>
+        <Typography>Content 5</Typography>
+      </>
+    ),
+    title: 'Controlled Accordion',
+    expand: false,
+    onChange: () => {}
+  }
+};
+
+export const Nested: Story = {
+  render: () => {
+    return (
+      <Accordion title="Parent">
+        <Accordion title="Child 1">
+          <Typography>Content 1</Typography>
+          <Typography>Content 2</Typography>
+          <Typography>Content 3</Typography>
+          <Typography>Content 4</Typography>
+          <Typography>Content 5</Typography>
+        </Accordion>
+        <Accordion title="Child 2">
+          <Typography>Content 6</Typography>
+          <Typography>Content 7</Typography>
+          <Typography>Content 8</Typography>
+          <Typography>Content 9</Typography>
+          <Typography>Content 10</Typography>
+        </Accordion>
+      </Accordion>
+    );
+  },
+  args: {
+    title: 'Nested Accordion'
+  }
+};
+
+export const FullWidth: Story = {
+  render: (props) => {
+    const [expand, setExpand] = useState(false);
+
+    const handleExpand = () => setExpand((prev) => !prev);
+
+    useEffect(() => {
+      setExpand(props.expand || false);
+    }, [props.expand]);
+
+    return (
+      <Box
+        inlineCSS={{
+          width: '100vh'
+        }}
+      >
+        <Accordion {...props} expand={expand} onChange={handleExpand}>
+          {props.children}
+        </Accordion>
+      </Box>
+    );
+  },
+  args: {
+    children: (
+      <>
+        <Typography>Content 1</Typography>
+        <Typography>Content 2</Typography>
+        <Typography>Content 3</Typography>
+        <Typography>Content 4</Typography>
+        <Typography>Content 5</Typography>
+      </>
+    ),
+    title: 'Accordion',
+    expand: false,
+    onChange: () => {}
+  }
+};

package/components/Accordion/Accordion.styles.ts

@@ -0,0 +1,70 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { AccordionProps } from './Accordion';
+
+export const StyledAccordion = styled.div<Pick<AccordionProps, 'fullWidth' | 'disabled'>>`
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background-color: ${({
+    theme: {
+      palette: { grey, background }
+    },
+    disabled
+  }) => (disabled ? background.secondary : grey.white)};
+
+  ${({ fullWidth }): CSSObject | null => (fullWidth ? { width: '100%' } : null)};
+`;
+
+export const Header = styled.div<Pick<AccordionProps, 'disabled'>>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: calc(24px + (${({ theme: { spacing } }) => spacing.content(4)}px * 2));
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+
+  ${({
+    theme: {
+      palette: { grey },
+      typography: { h5M }
+    },
+    disabled
+  }) => ({
+    fontSize: h5M.size,
+    fontWeight: h5M.weight,
+    lineHeight: h5M.lineHeight,
+    letterSpacing: h5M.letterSpacing,
+    color: disabled ? grey['50'] : grey['70'],
+    '& svg': {
+      color: disabled ? grey['50'] : grey['70']
+    }
+  })};
+`;
+
+export const HeaderButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+  padding: ${({ theme: { spacing } }) => spacing.content(4)}px;
+`;
+
+export const Rotate = styled.div<Pick<AccordionProps, 'expand'>>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  transform: rotate(${({ expand }) => (expand ? '180deg' : '0deg')});
+`;
+
+export const Panel = styled.div`
+  transition: height 0.2s;
+  overflow: hidden;
+`;
+
+export const PannelInner = styled.div`
+  padding: ${({ theme: { spacing } }) =>
+    `0 ${spacing.content(4)}px ${spacing.content(4)}px ${spacing.content(4)}px`};
+`;

package/components/Accordion/Accordion.tsx

@@ -0,0 +1,132 @@
+import type { ElementType, HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+
+import Icon from '@components/Icon';
+import type { GeneralComponentProps, PolymorphicComponentProps } from '@typings/component';
+
+import type { CSSValue } from '@typings/utility';
+
+import convertNumberToCSSValue from '@utils/convertNumberToCSSValue';
+
+import {
+  Header,
+  HeaderButton,
+  Panel,
+  PannelInner,
+  Rotate,
+  StyledAccordion
+} from './Accordion.styles';
+
+export interface AccordionProps
+  extends Omit<GeneralComponentProps<HTMLAttributes<HTMLDivElement>>, 'title'> {
+  expand?: boolean;
+  onChange?: (e: MouseEvent<HTMLDivElement>) => void;
+  title: ReactNode;
+  endAdornment?: ReactNode;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  headerProps?: PolymorphicComponentProps<ElementType>;
+}
+
+const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
+  {
+    children,
+    expand = false,
+    title,
+    endAdornment,
+    onChange,
+    disabled = false,
+    inlineCSS,
+    headerProps,
+    ...props
+  },
+  ref
+) {
+  const headerId = useId();
+  const panelId = useId();
+
+  const [isExpand, setIsExpand] = useState(expand);
+  const [height, setHeight] = useState<CSSValue>(expand ? 'auto' : '0px');
+
+  const contentInnerRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    if (disabled) {
+      return;
+    }
+
+    if (typeof onChange === 'function') {
+      onChange(e);
+    } else {
+      setIsExpand((prev) => !prev);
+    }
+  };
+
+  useEffect(() => {
+    setIsExpand(expand);
+  }, [expand]);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    const contentHeight = convertNumberToCSSValue(
+      contentInnerRef.current?.scrollHeight || 0
+    ) as string;
+    const isStartClose = !isExpand && height === 'auto';
+    const isReadyToClose = !isExpand && height !== 'auto';
+
+    if (contentInnerRef.current?.parentElement) {
+      if (isExpand) {
+        contentInnerRef.current.parentElement.style.height = contentHeight;
+
+        timeoutId = setTimeout(() => {
+          setHeight('auto');
+          if (contentInnerRef.current?.parentElement) {
+            contentInnerRef.current.parentElement.style.height = 'auto';
+          }
+        }, 200);
+      } else if (isStartClose) {
+        contentInnerRef.current.parentElement.style.height = contentHeight;
+        setHeight(contentHeight);
+      } else if (isReadyToClose) {
+        contentInnerRef.current.parentElement.style.height = '0px';
+        setHeight('0px');
+      }
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isExpand, height]);
+
+  return (
+    <StyledAccordion ref={ref} disabled={disabled} {...props} css={inlineCSS}>
+      <Header
+        as={headerProps?.tag || 'h3'}
+        onClick={handleClick}
+        disabled={disabled}
+        {...headerProps}
+      >
+        <HeaderButton
+          id={headerId}
+          aria-disabled={disabled}
+          aria-expanded={isExpand}
+          aria-controls={panelId}
+        >
+          {title}
+          <Rotate expand={isExpand}>
+            {endAdornment || <Icon name="ChevronDownLine" size="xSmall" />}
+          </Rotate>
+        </HeaderButton>
+      </Header>
+      <Panel>
+        <PannelInner role="region" id={panelId} aria-labelledby={headerId} ref={contentInnerRef}>
+          {children}
+        </PannelInner>
+      </Panel>
+    </StyledAccordion>
+  );
+});
+
+export default Accordion;

package/components/Accordion/index.ts

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