cpk-ui 0.0.1

package/components/uis/Accordion/AccordionItem.tsx

@@ -0,0 +1,213 @@
+// Caveat: Expo web needs React to be imported
+import React, {useEffect, useRef, useState} from 'react';
+import type {LayoutChangeEvent} from 'react-native';
+import {Animated, Easing, View} from 'react-native';
+import styled, {css} from '@emotion/native';
+
+import {Icon} from '../Icon/Icon';
+import {Typography} from '../Typography/Typography';
+
+import type {AccordionBaseProps} from './Accordion';
+
+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 type AccordionItemDataType<T, K> = {
+  title: T;
+  items: K[];
+};
+
+type Props<T, K> = Omit<AccordionBaseProps<T, K>, 'data' | 'style'> & {
+  testID: string;
+  data: AccordionItemDataType<string, string> | AccordionItemDataType<T, K>;
+};
+
+export function AccordionItem<T, K>({
+  testID,
+  data: data,
+  shouldAnimate = true,
+  collapseOnStart = true,
+  animDuration = 200,
+  activeOpacity = 1,
+  toggleElement = <StyledIcon name="CaretDown" size={14} />,
+  toggleElementPosition,
+  onPressItem,
+  renderTitle,
+  renderItem,
+  styles,
+}: Props<T, K>): JSX.Element {
+  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 = (
+    <Animated.View
+      style={[
+        css`
+          margin-right: ${toggleElementPosition === 'left' ? '12px' : 0};
+        `,
+        {
+          transform: [
+            {
+              rotate: rotateAnimValueRef.current.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['0deg', '180deg'],
+              }),
+            },
+          ],
+        },
+        styles?.toggleElement,
+      ]}
+    >
+      {toggleElement}
+    </Animated.View>
+  );
+
+  return (
+    <Animated.View
+      style={[
+        css`
+          background-color: transparent;
+          overflow: hidden;
+          flex-direction: column-reverse;
+        `,
+        styles?.container,
+      ]}
+    >
+      {/* Invisible: Place it at the top for z-index */}
+      <View
+        onLayout={(e: LayoutChangeEvent) => {
+          setItemHeight(e.nativeEvent.layout.height);
+        }}
+        style={css`
+          position: absolute;
+          opacity: 0;
+        `}
+      >
+        {data.items.map((body, index) => (
+          <ItemTouch
+            activeOpacity={activeOpacity}
+            key={`body-${index}`}
+            onPress={() => onPressItem?.(data.title, body)}
+          >
+            {typeof body === 'string' && !renderItem ? (
+              <Typography.Body3 style={styles?.itemText}>
+                {body}
+              </Typography.Body3>
+            ) : (
+              renderItem?.(body as K)
+            )}
+          </ItemTouch>
+        ))}
+      </View>
+      {/* Item */}
+      <Animated.View
+        accessibilityState={{expanded: !collapsed}}
+        style={[
+          {
+            opacity: fadeItemAnim,
+            height: dropDownAnimValueRef.current.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, itemHeight],
+            }),
+          },
+        ]}
+        testID={`body-${testID}`}
+      >
+        {data.items.map((body, index) => (
+          <ItemTouch
+            activeOpacity={activeOpacity}
+            key={`body-${index}`}
+            onPress={() => onPressItem?.(data.title, body)}
+            style={styles?.itemContainer}
+          >
+            {typeof body === 'string' && !renderItem ? (
+              <Typography.Body3 style={styles?.itemText}>
+                {body}
+              </Typography.Body3>
+            ) : (
+              renderItem?.(body as K)
+            )}
+          </ItemTouch>
+        ))}
+      </Animated.View>
+
+      {/* Title */}
+      <TitleTouch
+        activeOpacity={activeOpacity}
+        onPress={() => setCollapsed(!collapsed)}
+        style={[
+          css`
+            justify-content: ${toggleElementPosition === 'right'
+              ? 'space-between'
+              : 'flex-start'};
+          `,
+          styles?.titleContainer,
+        ]}
+        testID={`title-${testID}`}
+      >
+        {toggleElementPosition === 'left' ? toggleElContainer : null}
+        {typeof data.title === 'string' && !renderTitle ? (
+          <Typography.Heading4 style={styles?.titleText}>
+            {data.title}
+          </Typography.Heading4>
+        ) : (
+          renderTitle?.(data.title as T)
+        )}
+        {toggleElementPosition === 'right' ? toggleElContainer : null}
+      </TitleTouch>
+    </Animated.View>
+  );
+}

package/components/uis/Button/Button.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { Platform, Text, TouchableHighlight, View } from 'react-native';
+import { useHover } from 'react-native-web-hooks';
+import styled, { css } from '@emotion/native';
+import { useTheme } from '../../../providers/ThemeProvider';
+import { cloneElemWithDefaultColors } from '../../../utils/guards';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator';
+const ButtonContainer = styled.View `
+  align-self: stretch;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`;
+const calculateStyles = ({ theme, type, color, size, loading, disabled, borderRadius, hovered, styles, }) => {
+    const isDisabled = disabled || loading;
+    const padding = type === 'text'
+        ? '8px'
+        : size === 'large'
+            ? '16px 32px'
+            : size === 'small'
+                ? '8px 16px'
+                : '12px 24px';
+    return {
+        container: [
+            css `
+        border-radius: ${borderRadius + 'px'};
+        padding: ${padding};
+        background-color: ${isDisabled
+                ? theme.button.disabled.bg
+                : ['text', 'outlined'].includes(type)
+                    ? theme.bg.basic
+                    : theme.button[color].bg};
+        border-color: ${isDisabled
+                ? theme.bg.disabled
+                : type === 'text'
+                    ? 'transparent'
+                    : theme.button[color].bg};
+        border-width: ${type !== 'text' ? '1px' : 0};
+      `,
+            styles?.container,
+        ],
+        text: [
+            css `
+        font-family: 'Pretendard';
+        color: ${isDisabled
+                ? theme.button.disabled.text
+                : type === 'solid' || color === 'light'
+                    ? theme.button[color].text
+                    : theme.button[color].bg};
+      `,
+            styles?.text,
+        ],
+        content: [
+            css `
+        flex-direction: row;
+        align-items: center;
+        opacity: ${loading ? '0' : '1'};
+        gap: 8px;
+      `,
+            styles?.content,
+        ],
+        loading: [
+            css `
+        position: absolute;
+        opacity: ${loading ? '1' : '0'};
+      `,
+            styles?.loading,
+        ],
+        hovered: hovered
+            ? [
+                {
+                    shadowColor: 'black',
+                    shadowOpacity: 0.24,
+                    shadowRadius: 16,
+                    elevation: 10,
+                },
+                css `
+            border-radius: ${borderRadius + 'px'};
+          `,
+                styles?.hovered,
+            ]
+            : undefined,
+        disabled: isDisabled
+            ? [
+                css `
+            background-color: ${theme.button.disabled.bg};
+            border-color: ${theme.bg.disabled};
+          `,
+                styles?.disabled,
+            ]
+            : undefined,
+    };
+};
+const useButtonState = ({ disabled, onPress, loading, }) => {
+    return {
+        innerDisabled: disabled || !onPress,
+        isLoading: loading,
+    };
+};
+export function Button({ testID, type = 'solid', color = 'primary', size = 'medium', disabled, loading = false, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity = 0.8, touchableHighlightProps, borderRadius = 4, loadingColor, hitSlop = { top: 8, bottom: 8, left: 8, right: 8 }, }) {
+    const ref = useRef(null);
+    const hovered = useHover(ref);
+    const { theme } = useTheme();
+    const { innerDisabled } = useButtonState({ disabled, onPress, loading });
+    const compositeStyles = calculateStyles({
+        theme,
+        type,
+        color,
+        size,
+        loading,
+        disabled: innerDisabled,
+        borderRadius,
+        hovered,
+        styles,
+    });
+    const LoadingView = loadingElement ?? (_jsx(LoadingIndicator, { color: loadingColor || type === 'solid'
+            ? theme.text.contrast
+            : theme.text.basic, size: "small" }));
+    const renderContainer = useCallback(({ children, loadingView, }) => (_jsxs(ButtonContainer, { disabled: innerDisabled, size: size, style: [
+            hovered && !innerDisabled && compositeStyles.hovered,
+            compositeStyles.container,
+            type === 'text' &&
+                css `
+              background-color: transparent;
+            `,
+            innerDisabled && compositeStyles.disabled,
+        ], testID: loading ? 'loading-view' : 'button-container', type: type, children: [_jsx(View, { style: compositeStyles.content, children: children }), _jsx(View, { style: compositeStyles.loading, children: loadingView })] })), [
+        innerDisabled,
+        size,
+        compositeStyles.container,
+        compositeStyles.hovered,
+        compositeStyles.disabled,
+        compositeStyles.content,
+        compositeStyles.loading,
+        hovered,
+        type,
+        loading,
+    ]);
+    const ChildView = (_jsxs(_Fragment, { children: [cloneElemWithDefaultColors({
+                element: startElement,
+                backgroundColor: compositeStyles.container?.[0]?.backgroundColor,
+                color: compositeStyles.text?.[0]?.color,
+            }), !text || typeof text === 'string' ? (_jsx(Text, { style: compositeStyles.text, children: text })) : (text), cloneElemWithDefaultColors({
+                element: endElement,
+                backgroundColor: compositeStyles.container?.[0]?.backgroundColor,
+                color: compositeStyles.text?.[0]?.color,
+            })] }));
+    return (_jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: onPress, ref: Platform.select({
+            web: ref,
+            default: undefined,
+        }), style: [
+            style,
+            css `
+          border-radius: ${borderRadius + 'px'};
+        `,
+        ], testID: testID, underlayColor: type === 'text' ? 'transparent' : theme.role.underlay, ...touchableHighlightProps, children: renderContainer({
+            children: ChildView,
+            loadingView: LoadingView,
+        }) }));
+}

package/components/uis/Button/Button.stories.tsx

@@ -0,0 +1,81 @@
+import {action} from '@storybook/addon-actions';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {withThemeProvider} from '../../../../.storybook/decorators';
+
+import type {ButtonColorType, ButtonSizeType, ButtonType} from './Button';
+import {Button} from './Button';
+
+const buttonTypes: ButtonType[] = ['outlined', 'solid', 'text'];
+const buttonSizes: ButtonSizeType[] = ['large', 'medium', 'small'];
+
+const buttonColors: ButtonColorType[] = [
+  'primary',
+  'success',
+  'info',
+  'warning',
+  'danger',
+  'light',
+  'secondary',
+];
+
+const meta = {
+  title: 'Button',
+  component: Button,
+  args: {
+    text: 'Hello world',
+    type: 'solid',
+    color: 'primary',
+    size: 'medium',
+    onPress: action('onPress'),
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: buttonTypes,
+    },
+    color: {
+      control: 'select',
+      options: buttonColors,
+    },
+    size: {
+      control: 'select',
+      options: buttonSizes,
+    },
+  },
+  decorators: [withThemeProvider],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    text: 'Basic Button',
+    type: 'solid',
+    color: 'primary',
+    size: 'medium',
+    onPress: action('onPress'),
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    text: 'Secondary Button',
+    type: 'outlined',
+    color: 'secondary',
+    size: 'large',
+    onPress: action('onPress'),
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    text: 'Danger Button',
+    type: 'solid',
+    color: 'danger',
+    size: 'small',
+    onPress: action('onPress'),
+  },
+};