cpk-ui 0.0.1

package/components/modals/Snackbar/Snackbar.tsx

@@ -0,0 +1,174 @@
+import React, {forwardRef, useImperativeHandle, useState} from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {Modal, Platform, StyleSheet} from 'react-native';
+import styled, {css} from '@emotion/native';
+
+import {SnackbarTimer} from './const';
+import {Button, ButtonColorType} from '../../uis/Button/Button';
+import {useTheme} from '../../../providers/ThemeProvider';
+import {Icon} from '../../uis/Icon/Icon';
+
+const Container = styled.View`
+  flex: 1;
+  align-self: stretch;
+
+  flex-direction: row;
+  justify-content: center;
+`;
+
+const SnackbarContainer = styled.SafeAreaView<{color: ButtonColorType}>`
+  background-color: ${({theme, color}) => theme.button[color].bg};
+  border-radius: 8px;
+  margin-bottom: 52px;
+  margin-left: 12px;
+  margin-right: 12px;
+  align-self: flex-end;
+
+  flex-direction: row;
+  align-items: center;
+`;
+
+const ActionContainer = styled.View`
+  margin-right: 4px;
+`;
+
+const SnackbarText = styled.Text<{color: ButtonColorType}>`
+  font-family: Pretendard;
+  color: ${({theme, color}) => theme.button[color].text};
+  flex: 1;
+  padding: 12px;
+`;
+
+export type SnackbarProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export type SnackbarStyles = {
+  container?: StyleProp<ViewStyle>;
+  text?: StyleProp<TextStyle>;
+  actionContainer?: StyleProp<ViewStyle>;
+  actionText?: StyleProp<TextStyle>;
+};
+
+export type SnackbarOptions = {
+  color?: ButtonColorType;
+  styles?: SnackbarStyles;
+  text?: string;
+  actionText?: string;
+  timer?: SnackbarTimer | number;
+};
+
+export type SnackbarContext = {
+  open(snackbarOptions?: SnackbarOptions): void;
+  close(): void;
+};
+
+let timer: NodeJS.Timeout | null = null;
+
+function clearTimer(): void {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+}
+
+function Snackbar(
+  {style}: SnackbarProps,
+  ref: React.Ref<SnackbarContext>,
+): JSX.Element {
+  const [options, setOptions] = useState<SnackbarOptions | null>(null);
+  const [visible, setVisible] = useState(false);
+  const {theme} = useTheme();
+
+  useImperativeHandle(ref, () => ({
+    open: (snackbarOptions) => {
+      clearTimer();
+      setVisible(true);
+      if (snackbarOptions) {
+        setOptions(snackbarOptions);
+      }
+
+      timer = setTimeout(() => {
+        setVisible(false);
+        clearTimer();
+      }, snackbarOptions?.timer ?? SnackbarTimer.SHORT);
+    },
+    close: () => {
+      setVisible(false);
+      setOptions(null);
+    },
+  }));
+
+  const {text, styles, actionText, color = 'primary'} = options ?? {};
+
+  const SnackbarContent = (
+    <Container>
+      <SnackbarContainer
+        color={color}
+        style={StyleSheet.flatten([
+          Platform.OS !== 'web' && {
+            shadowOffset: {width: 0, height: 4},
+            shadowColor: theme.text.basic,
+          },
+          styles?.container,
+        ])}
+      >
+        <SnackbarText
+          color={color}
+          style={StyleSheet.flatten([
+            css`
+              font-family: 'Pretendard';
+              color: ${theme.button[color].text};
+            `,
+            styles?.text,
+          ])}
+        >
+          {text}
+        </SnackbarText>
+        <ActionContainer style={styles?.actionContainer}>
+          {actionText ? (
+            <Button
+              onPress={() => setVisible(false)}
+              styles={{
+                text: StyleSheet.flatten([
+                  css`
+                    font-family: 'Pretendard';
+                    color: ${theme.button[color].text};
+                  `,
+                  styles?.actionText,
+                ]),
+              }}
+              text={actionText}
+              type="text"
+            />
+          ) : (
+            <Button
+              onPress={() => setVisible(false)}
+              text={<Icon color={theme.button[color].text} name="X" />}
+              type="text"
+            />
+          )}
+        </ActionContainer>
+      </SnackbarContainer>
+    </Container>
+  );
+
+  return (
+    <Modal
+      animationType="fade"
+      style={[
+        css`
+          flex: 1;
+          align-self: stretch;
+        `,
+        style,
+      ]}
+      transparent={true}
+      visible={visible}
+    >
+      {SnackbarContent}
+    </Modal>
+  );
+}
+
+export default forwardRef<SnackbarContext, SnackbarProps>(Snackbar);

package/components/modals/Snackbar/const.js

@@ -0,0 +1,5 @@
+export var SnackbarTimer;
+(function (SnackbarTimer) {
+    SnackbarTimer[SnackbarTimer["SHORT"] = 2000] = "SHORT";
+    SnackbarTimer[SnackbarTimer["LONG"] = 3500] = "LONG";
+})(SnackbarTimer || (SnackbarTimer = {}));

package/components/modals/Snackbar/const.ts

@@ -0,0 +1,4 @@
+export enum SnackbarTimer {
+  SHORT = 2000,
+  LONG = 3500,
+}

package/components/uis/Accordion/Accordion.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import { AccordionItem } from './AccordionItem';
+const Container = styled.View `
+  flex-direction: column;
+`;
+export function Accordion({ style, toggleElementPosition = 'right', data, ...rest }) {
+    return (_jsx(Container, { style: style, children: data.map((datum, titleKey) => {
+            return (_jsx(AccordionItem, { data: datum, testID: `${titleKey}`, toggleElementPosition: toggleElementPosition, ...rest }, titleKey));
+        }) }));
+}

package/components/uis/Accordion/Accordion.stories.tsx

@@ -0,0 +1,38 @@
+import type {ComponentProps} from 'react';
+import {css} from '@emotion/native';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Accordion} from './Accordion';
+import {withThemeProvider} from '../../../../.storybook/decorators';
+
+const meta = {
+  title: 'Accordion',
+  component: Accordion,
+  decorators: [withThemeProvider],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    animDuration: 200,
+    collapseOnStart: true,
+    onPressItem: () => {},
+    data: [
+      {
+        title: 'Item 1',
+        items: ['User', 'Mail', 'Text'],
+      },
+      {
+        title: 'Item 2',
+        items: ['User', 'Mail', 'Text'],
+      },
+      {
+        title: 'Item 3',
+        items: ['User', 'Mail', 'Text'],
+      },
+    ],
+    shouldAnimate: true,
+  },
+};

package/components/uis/Accordion/Accordion.test.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import {Text} from 'react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {fireEvent, render} from '@testing-library/react-native';
+
+import {createComponent, createTestProps} from '../../../../test/testUtils';
+import {Accordion} from './Accordion';
+
+let props: any;
+let component: JSX.Element;
+let testingLib: RenderAPI;
+
+const data: any[] = [
+  {
+    title: 'title1',
+    items: ['body1', 'body2', 'body3'],
+  },
+  {
+    title: 'title2',
+    items: ['body1', 'body2', 'body3'],
+  },
+  {
+    title: 'title3',
+    items: ['body1', 'body2', 'body3'],
+  },
+];
+
+describe('[Accordion] render test', () => {
+  it('should render without crashing', () => {
+    props = createTestProps({
+      data: data,
+      renderTitle: (title) => <Text>{title}</Text>,
+      renderItem: (item) => <Text>{item}</Text>,
+    });
+
+    component = createComponent(<Accordion {...props} />);
+
+    testingLib = render(component);
+
+    const json = testingLib.toJSON();
+    expect(json).toBeTruthy();
+  });
+
+  it('should render collapsed when collapseOnStart props is true', () => {
+    props = createTestProps({
+      collapseOnStart: true,
+      data: data,
+      renderTitle: (title) => <Text>{title}</Text>,
+      renderItem: (item) => <Text>{item}</Text>,
+    });
+
+    component = createComponent(<Accordion {...props} />);
+    testingLib = render(component);
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should operate animation when shouldAnimate props is true', () => {
+    props = createTestProps({
+      shouldAnimate: true,
+      data: data,
+      renderTitle: (title) => <Text>{title}</Text>,
+      renderItem: (item) => <Text>{item}</Text>,
+    });
+
+    component = createComponent(<Accordion {...props} />);
+
+    testingLib = render(component);
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should adjust duration of animation depends on animDuration props value', () => {
+    props = createTestProps({
+      animDuration: 500,
+      data: data,
+      renderTitle: (title) => <Text>{title}</Text>,
+      renderItem: (item) => <Text>{item}</Text>,
+    });
+
+    component = createComponent(<Accordion {...props} />);
+    testingLib = render(component);
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+});
+
+describe('[Accordion] event test', () => {
+  beforeEach(() => {
+    props = createTestProps({
+      data: data,
+      renderTitle: (title) => <Text>{title}</Text>,
+      renderItem: (item) => <Text>{item}</Text>,
+    });
+
+    component = createComponent(<Accordion {...props} />);
+    testingLib = render(component);
+  });
+
+  it('should trigger onLayout event when itemBody rendered', () => {
+    const {getByTestId} = testingLib;
+    const itemTitle = getByTestId('body-0');
+
+    fireEvent(itemTitle, 'layout', {
+      nativeEvent: {
+        layout: {
+          height: 300,
+        },
+      },
+    });
+
+    expect(itemTitle.props.style.height).toBeDefined();
+  });
+
+  it('should trigger press event when clicking title', () => {
+    fireEvent.press(testingLib.getByTestId('title-0'));
+
+    expect(
+      testingLib.getByTestId('body-0').props.accessibilityState.expanded,
+    ).toBeTruthy();
+  });
+});

package/components/uis/Accordion/Accordion.tsx

@@ -0,0 +1,58 @@
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import styled from '@emotion/native';
+
+import type {AccordionItemDataType} from './AccordionItem';
+import {AccordionItem} from './AccordionItem';
+
+const Container = styled.View`
+  flex-direction: column;
+`;
+
+type Styles = {
+  container?: StyleProp<ViewStyle>;
+  titleContainer?: StyleProp<ViewStyle>;
+  titleText?: StyleProp<TextStyle>;
+  itemContainer?: StyleProp<ViewStyle>;
+  itemText?: StyleProp<TextStyle>;
+  toggleElement?: StyleProp<ViewStyle>;
+};
+
+export type AccordionBaseProps<T = string, K = string> = {
+  data: AccordionItemDataType<T, K>[];
+  style?: StyleProp<ViewStyle>;
+  styles?: Styles;
+  shouldAnimate?: boolean;
+  collapseOnStart?: boolean;
+  animDuration?: number;
+  activeOpacity?: number;
+  toggleElementPosition?: 'left' | 'right';
+  toggleElement?: JSX.Element | null;
+  renderTitle?: (title: T) => JSX.Element;
+  renderItem?: (body: K) => JSX.Element;
+  onPressItem?: (title: T | string, body: K | string) => void;
+};
+
+export type AccordionProps<T = string, K = string> = AccordionBaseProps<T, K>;
+
+export function Accordion<T, K>({
+  style,
+  toggleElementPosition = 'right',
+  data,
+  ...rest
+}: AccordionProps<T, K>): JSX.Element {
+  return (
+    <Container style={style}>
+      {data.map((datum, titleKey) => {
+        return (
+          <AccordionItem
+            data={datum}
+            key={titleKey}
+            testID={`${titleKey}`}
+            toggleElementPosition={toggleElementPosition}
+            {...rest}
+          />
+        );
+      })}
+    </Container>
+  );
+}

package/components/uis/Accordion/AccordionItem.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Caveat: Expo web needs React to be imported
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import styled, { css } from '@emotion/native';
+import { Icon } from '../Icon/Icon';
+import { Typography } from '../Typography/Typography';
+const TitleTouch = styled.TouchableOpacity `
+  height: 48px;
+  background-color: ${({ theme }) => theme.bg.basic};
+
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 12px;
+`;
+const StyledIcon = styled(Icon) `
+  color: ${({ theme }) => theme.text.basic};
+  font-weight: bold;
+`;
+const ItemTouch = styled.TouchableOpacity `
+  background-color: ${({ theme }) => theme.bg.paper};
+  padding: 8px 12px;
+
+  flex-direction: row;
+  align-items: center;
+`;
+export function AccordionItem({ testID, data: data, shouldAnimate = true, collapseOnStart = true, animDuration = 200, activeOpacity = 1, toggleElement = _jsx(StyledIcon, { name: "CaretDown", size: 14 }), toggleElementPosition, onPressItem, renderTitle, renderItem, styles, }) {
+    const dropDownAnimValueRef = useRef(new Animated.Value(0));
+    const rotateAnimValueRef = useRef(new Animated.Value(0));
+    const fadeItemAnim = useRef(new Animated.Value(0)).current;
+    const [itemHeight, setItemHeight] = useState(0);
+    const [collapsed, setCollapsed] = useState(collapseOnStart);
+    useEffect(() => {
+        Animated.timing(fadeItemAnim, {
+            toValue: collapsed ? 0 : 1,
+            duration: !collapsed ? 300 : 100,
+            useNativeDriver: false,
+        }).start();
+    }, [fadeItemAnim, collapsed]);
+    useEffect(() => {
+        const targetValue = collapsed ? 0 : 1;
+        if (!shouldAnimate) {
+            rotateAnimValueRef.current.setValue(targetValue);
+            dropDownAnimValueRef.current.setValue(targetValue);
+            return;
+        }
+        const config = {
+            duration: animDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+            toValue: targetValue,
+        };
+        Animated.parallel([
+            Animated.timing(rotateAnimValueRef.current, config),
+            Animated.timing(dropDownAnimValueRef.current, config),
+        ]).start();
+    }, [collapsed, shouldAnimate, animDuration]);
+    const toggleElContainer = (_jsx(Animated.View, { style: [
+            css `
+          margin-right: ${toggleElementPosition === 'left' ? '12px' : 0};
+        `,
+            {
+                transform: [
+                    {
+                        rotate: rotateAnimValueRef.current.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: ['0deg', '180deg'],
+                        }),
+                    },
+                ],
+            },
+            styles?.toggleElement,
+        ], children: toggleElement }));
+    return (_jsxs(Animated.View, { style: [
+            css `
+          background-color: transparent;
+          overflow: hidden;
+          flex-direction: column-reverse;
+        `,
+            styles?.container,
+        ], children: [_jsx(View, { onLayout: (e) => {
+                    setItemHeight(e.nativeEvent.layout.height);
+                }, style: css `
+          position: absolute;
+          opacity: 0;
+        `, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, onPress: () => onPressItem?.(data.title, body), children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: styles?.itemText, children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsx(Animated.View, { accessibilityState: { expanded: !collapsed }, style: [
+                    {
+                        opacity: fadeItemAnim,
+                        height: dropDownAnimValueRef.current.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [0, itemHeight],
+                        }),
+                    },
+                ], testID: `body-${testID}`, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, onPress: () => onPressItem?.(data.title, body), style: styles?.itemContainer, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: styles?.itemText, children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsxs(TitleTouch, { activeOpacity: activeOpacity, onPress: () => setCollapsed(!collapsed), style: [
+                    css `
+            justify-content: ${toggleElementPosition === 'right'
+                        ? 'space-between'
+                        : 'flex-start'};
+          `,
+                    styles?.titleContainer,
+                ], testID: `title-${testID}`, children: [toggleElementPosition === 'left' ? toggleElContainer : null, typeof data.title === 'string' && !renderTitle ? (_jsx(Typography.Heading4, { style: styles?.titleText, children: data.title })) : (renderTitle?.(data.title)), toggleElementPosition === 'right' ? toggleElContainer : null] })] }));
+}