cpk-ui 0.0.1

package/components/uis/Button/Button.tsx

@@ -0,0 +1,335 @@
+import React, {useCallback, useRef} from 'react';
+import type {
+  Insets,
+  StyleProp,
+  TextStyle,
+  TouchableHighlightProps,
+  ViewStyle,
+} from 'react-native';
+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 type {CpkTheme} from '../../../utils/theme';
+import {LoadingIndicator} from '../LoadingIndicator/LoadingIndicator';
+
+export type ButtonType = 'text' | 'solid' | 'outlined';
+export type ButtonColorType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light';
+export type ButtonSizeType = 'small' | 'medium' | 'large';
+
+export type Props = {
+  testID?: string;
+  type?: ButtonType;
+  color?: ButtonColorType;
+  size?: ButtonSizeType;
+  disabled?: boolean;
+  loading?: boolean;
+  loadingColor?: string;
+  loadingElement?: JSX.Element;
+  text?: string | JSX.Element;
+  borderRadius?: number;
+  startElement?: JSX.Element;
+  endElement?: JSX.Element;
+  style?: StyleProp<Omit<ViewStyle, 'borderRadius' | 'padding'>>;
+  styles?: Styles;
+  onPress?: TouchableHighlightProps['onPress'];
+  activeOpacity?: TouchableHighlightProps['activeOpacity'];
+  touchableHighlightProps?: Omit<
+    TouchableHighlightProps,
+    'onPress' | 'activeOpacity' | 'style'
+  >;
+  hitSlop?: null | Insets | number | undefined;
+};
+
+type Styles = {
+  container?: StyleProp<ViewStyle>;
+  content?: StyleProp<ViewStyle>;
+  loading?: StyleProp<ViewStyle>;
+  text?: StyleProp<TextStyle>;
+  disabled?: StyleProp<ViewStyle>;
+  disabledText?: StyleProp<TextStyle>;
+  hovered?: StyleProp<ViewStyle>;
+};
+
+type ButtonContainerStyleProps = {
+  type: ButtonType;
+  size?: ButtonSizeType;
+  outlined?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+};
+
+const ButtonContainer = styled.View<ButtonContainerStyleProps>`
+  align-self: stretch;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`;
+
+const calculateStyles = ({
+  theme,
+  type,
+  color,
+  size,
+  loading,
+  disabled,
+  borderRadius,
+  hovered,
+  styles,
+}: {
+  theme: CpkTheme;
+  type: ButtonType;
+  color: ButtonColorType;
+  size: ButtonSizeType;
+  loading: boolean;
+  disabled: boolean;
+  borderRadius: number;
+  hovered: boolean;
+  styles?: Styles;
+}): 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,
+}: {
+  disabled?: boolean;
+  onPress?: TouchableHighlightProps['onPress'];
+  loading: boolean;
+}): {
+  innerDisabled: boolean;
+  isLoading: boolean;
+} => {
+  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},
+}: Props): JSX.Element {
+  const ref = useRef<React.ElementRef<typeof TouchableHighlight>>(null);
+  const hovered = useHover(ref);
+  const {theme} = useTheme();
+
+  const {innerDisabled} = useButtonState({disabled, onPress, loading});
+  const compositeStyles: Styles = calculateStyles({
+    theme,
+    type,
+    color,
+    size,
+    loading,
+    disabled: innerDisabled,
+    borderRadius,
+    hovered,
+    styles,
+  });
+
+  const LoadingView = loadingElement ?? (
+    <LoadingIndicator
+      color={
+        loadingColor || type === 'solid'
+          ? theme.text.contrast
+          : theme.text.basic
+      }
+      size="small"
+    />
+  );
+
+  const renderContainer = useCallback(
+    ({
+      children,
+      loadingView,
+    }: {
+      children: JSX.Element;
+      loadingView: JSX.Element;
+    }): JSX.Element => (
+      <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}
+      >
+        <View style={compositeStyles.content}>{children}</View>
+        <View style={compositeStyles.loading}>{loadingView}</View>
+      </ButtonContainer>
+    ),
+    [
+      innerDisabled,
+      size,
+      compositeStyles.container,
+      compositeStyles.hovered,
+      compositeStyles.disabled,
+      compositeStyles.content,
+      compositeStyles.loading,
+      hovered,
+      type,
+      loading,
+    ],
+  );
+
+  const ChildView = (
+    <>
+      {cloneElemWithDefaultColors({
+        element: startElement,
+        backgroundColor: compositeStyles.container?.[0]?.backgroundColor,
+        color: compositeStyles.text?.[0]?.color,
+      })}
+      {!text || typeof text === 'string' ? (
+        <Text style={compositeStyles.text}>{text}</Text>
+      ) : (
+        text
+      )}
+      {cloneElemWithDefaultColors({
+        element: endElement,
+        backgroundColor: compositeStyles.container?.[0]?.backgroundColor,
+        color: compositeStyles.text?.[0]?.color,
+      })}
+    </>
+  );
+
+  return (
+    <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}
+    >
+      {renderContainer({
+        children: ChildView,
+        loadingView: LoadingView,
+      })}
+    </TouchableHighlight>
+  );
+}

package/components/uis/Checkbox/Checkbox.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, Platform, View } from 'react-native';
+import styled, { css } from '@emotion/native';
+import { Icon } from '../Icon/Icon';
+import { CheckboxWrapper, CheckboxWrapperOutlined, } from '../Styled/StyledComponents';
+import { useTheme } from '../../../providers/ThemeProvider';
+const Container = styled.TouchableOpacity `
+  flex-direction: row;
+  align-items: center;
+`;
+const StyledCheckboxOutlined = styled(CheckboxWrapperOutlined) `
+  width: 20px;
+  height: 20px;
+  border-width: 1px;
+  margin: 0 6px;
+
+  justify-content: center;
+  align-items: center;
+`;
+const StyledCheckbox = styled(CheckboxWrapper) `
+  width: 20px;
+  height: 20px;
+  margin: 0 6px;
+
+  justify-content: center;
+  align-items: center;
+`;
+const StyledCheck = styled(Icon) `
+  font-weight: bold;
+  color: ${({ theme, checked }) => (checked ? theme.bg.basic : 'transparent')};
+`;
+export function Checkbox({ style, styles, endElement, startElement, color = 'primary', disabled = false, checked = false, onPress, }) {
+    const animatedValue = new Animated.Value(0);
+    const fadeAnim = useRef(animatedValue).current;
+    const scaleAnim = useRef(animatedValue).current;
+    const { theme } = useTheme();
+    useEffect(() => {
+        Animated.sequence([
+            Animated.spring(fadeAnim, {
+                toValue: !checked ? 0 : 1,
+                useNativeDriver: Platform.select({
+                    web: false,
+                    default: true,
+                }),
+            }),
+            Animated.spring(scaleAnim, {
+                toValue: !checked ? 0 : 1,
+                useNativeDriver: Platform.select({
+                    web: false,
+                    default: true,
+                }),
+            }),
+        ]).start();
+    }, [fadeAnim, scaleAnim, checked]);
+    return (_jsx(Container, { activeOpacity: 0.9, disabled: disabled, onPress: onPress, style: style, children: _jsxs(View, { style: [
+                css `
+            flex: 1;
+            padding: 6px 0;
+
+            flex-direction: row;
+            column-gap: 2px;
+            align-items: center;
+          `,
+                styles?.container,
+            ], children: [startElement, _jsx(StyledCheckboxOutlined, { checked: checked, disabled: disabled, style: styles?.checkbox, testID: "cpk-ui-checkbox", type: color, children: _jsx(StyledCheckbox, { checked: checked, disabled: disabled, style: [
+                            styles?.checkbox,
+                            { opacity: fadeAnim, transform: [{ scale: scaleAnim }] },
+                        ], type: color, children: _jsx(StyledCheck, { checked: checked, name: "Check", style: styles?.check, theme: theme }) }) }), endElement] }) }));
+}

package/components/uis/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,46 @@
+import {type ComponentProps} from 'react';
+import {Text} from 'react-native';
+import {css} from '@emotion/native';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {withThemeProvider} from '../../../../.storybook/decorators';
+import {Checkbox, CheckboxColor} from './Checkbox';
+import {Typography} from '../Typography/Typography';
+
+const colors: CheckboxColor[] = [
+  'primary',
+  'success',
+  'info',
+  'warning',
+  'danger',
+  'secondary',
+];
+
+const meta = {
+  title: 'Checkbox',
+  component: (props) => <Checkbox {...props} />,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: colors,
+    },
+    checked: {
+      defaultValue: false,
+      type: 'boolean',
+    },
+  },
+  decorators: [withThemeProvider],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    color: 'primary',
+    endElement: <Typography.Body2>Click Checkbox!</Typography.Body2>,
+    checked: false,
+    onPress: () => {},
+  },
+};

package/components/uis/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {render} from '@testing-library/react-native';
+
+import {createComponent} from '../../../../test/testUtils';
+import {Checkbox, type CheckboxProps} from './Checkbox';
+import {light} from '../../../utils/colors';
+
+let testingLib: RenderAPI;
+
+const Component = (props?: CheckboxProps): JSX.Element =>
+  createComponent(<Checkbox {...props} />);
+
+describe('[Checkbox]', () => {
+  it('should render without crashing', () => {
+    testingLib = render(Component());
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should render `disabled` button', () => {
+    testingLib = render(
+      Component({
+        disabled: true,
+      }),
+    );
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should render `startElement`', () => {
+    testingLib = render(
+      Component({
+        startElement: <View />,
+      }),
+    );
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should render `endElement`', () => {
+    testingLib = render(
+      Component({
+        endElement: <View />,
+      }),
+    );
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  describe('type', () => {
+    it('should render type==="info"', () => {
+      testingLib = render(
+        Component({
+          color: 'info',
+          checked: true,
+        }),
+      );
+
+      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
+
+      expect(checkbox.props.style.borderTopColor).toEqual(light.role.info);
+    });
+
+    it('should render type==="primary"', () => {
+      testingLib = render(
+        Component({
+          color: 'primary',
+          checked: true,
+        }),
+      );
+
+      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
+
+      expect(checkbox.props.style.borderTopColor).toEqual(light.role.primary);
+    });
+
+    it('should render type==="secondary"', () => {
+      testingLib = render(
+        Component({
+          color: 'secondary',
+          checked: true,
+        }),
+      );
+
+      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
+
+      expect(checkbox.props.style.borderTopColor).toEqual(light.role.secondary);
+    });
+
+    it('should render type==="success"', () => {
+      testingLib = render(
+        Component({
+          color: 'success',
+          checked: true,
+        }),
+      );
+
+      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
+
+      expect(checkbox.props.style.borderTopColor).toEqual(light.role.success);
+    });
+
+    it('should render type==="danger"', () => {
+      testingLib = render(
+        Component({
+          color: 'danger',
+          checked: true,
+        }),
+      );
+
+      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
+
+      expect(checkbox.props.style.borderTopColor).toEqual(light.role.danger);
+    });
+
+    it('should render type==="warning"', () => {
+      testingLib = render(
+        Component({
+          color: 'warning',
+          checked: true,
+        }),
+      );
+
+      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
+
+      expect(checkbox.props.style.borderTopColor).toEqual(light.role.warning);
+    });
+  });
+});