cpk-ui 0.0.1

package/components/uis/SwitchToggle/SwitchToggle.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Animated, TouchableOpacity } from 'react-native';
+import styled from '@emotion/native';
+import { useTheme } from '../../../providers/ThemeProvider';
+// Typing limitation: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/12202
+const AnimatedContainer = styled(Animated.View) `
+  flex-direction: row;
+  align-items: center;
+`;
+const smallContainer = {
+    width: 40,
+    height: 24,
+    borderRadius: 25,
+    padding: 5,
+};
+const smallCircle = {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+};
+const mediumContainer = {
+    width: 56,
+    height: 30,
+    borderRadius: 25,
+    padding: 5,
+};
+const mediumCircle = {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+};
+const largeContainer = {
+    width: 80,
+    height: 40,
+    borderRadius: 25,
+    padding: 5,
+};
+const largeCircle = {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+};
+export function SwitchToggle({ testID, isOn, style, styles, duration = 300, onElement, size = 'medium', offElement, onPress, }) {
+    const { theme } = useTheme();
+    const { backgroundColorOn = theme.role.primary, backgroundColorOff = theme.bg.disabled, circleColorOn = theme.text.contrast, circleColorOff = theme.text.basic, container = size === 'large'
+        ? largeContainer
+        : size === 'small'
+            ? smallContainer
+            : mediumContainer, circle = size === 'large'
+        ? largeCircle
+        : size === 'small'
+            ? smallCircle
+            : mediumCircle, button, onElementContainer, offElementContainer, } = styles ?? {};
+    const paddingLeft = container.padding || container.paddingLeft || 0;
+    const paddingRight = container.padding || container.paddingRight || 0;
+    const circlePosXStart = 0;
+    const circlePosXEnd = (container.width ?? mediumContainer.width) -
+        (circle.width ?? mediumCircle.width) -
+        (paddingRight + paddingLeft);
+    const [animXValue] = useState(new Animated.Value(isOn ? 1 : 0));
+    useEffect(() => {
+        const runAnimation = () => {
+            const option = {
+                fromValue: isOn ? 0 : 1,
+                toValue: isOn ? 1 : 0,
+                duration,
+                useNativeDriver: false,
+            };
+            Animated.timing(animXValue, option).start();
+        };
+        runAnimation();
+    }, [animXValue, isOn, duration]);
+    const CircleButton = (_jsx(Animated.View, { style: [
+            circle,
+            {
+                backgroundColor: animXValue.interpolate({
+                    inputRange: [0.5, 1],
+                    outputRange: [
+                        circleColorOff,
+                        circleColorOn,
+                    ],
+                }),
+            },
+            {
+                transform: [
+                    {
+                        translateX: animXValue.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [
+                                circlePosXStart,
+                                circlePosXEnd,
+                            ],
+                        }),
+                    },
+                ],
+            },
+            button,
+        ] }));
+    const OnElement = (_jsx(Animated.View, { style: [{ opacity: animXValue }, onElementContainer], children: onElement }));
+    const OffElement = (_jsx(Animated.View, { style: [
+            {
+                opacity: animXValue.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [1, 0],
+                }),
+            },
+            offElementContainer,
+        ], children: offElement }));
+    return (_jsx(TouchableOpacity, { accessibilityRole: "switch", activeOpacity: 0.8, onPress: onPress, style: style, testID: testID, children: _jsxs(AnimatedContainer, { style: [
+                container,
+                {
+                    paddingLeft,
+                    paddingRight,
+                },
+                {
+                    backgroundColor: animXValue.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [
+                            backgroundColorOff,
+                            backgroundColorOn,
+                        ],
+                    }),
+                },
+            ], children: [isOn ? OnElement : OffElement, CircleButton] }) }));
+}

package/components/uis/SwitchToggle/SwitchToggle.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {Text} from 'react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {fireEvent, render, waitFor} from '@testing-library/react-native';
+import {createComponent} from '../../../../test/testUtils';
+import {SwitchToggle} from './SwitchToggle';
+
+let testingLib: RenderAPI;
+
+describe('[SwitchToggle]', () => {
+  const handlePress = jest.fn();
+
+  beforeEach(() => {
+    handlePress.mockClear();
+  });
+
+  it('handles press event', async () => {
+    testingLib = render(
+      createComponent(<SwitchToggle isOn={false} onPress={handlePress} />),
+    );
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+
+    const {getByRole} = testingLib;
+    fireEvent.press(getByRole('switch'));
+    expect(handlePress).toBeCalled();
+  });
+
+  const getSwitchToggle = ({isOn}: {isOn: boolean}): JSX.Element =>
+    createComponent(
+      <SwitchToggle
+        isOn={isOn}
+        offElement={<Text>off</Text>}
+        onElement={<Text>on</Text>}
+        onPress={handlePress}
+        style={{padding: 6}}
+        styles={{
+          container: {paddingLeft: 6, paddingRight: 5},
+          onElementContainer: {padding: 4},
+          offElementContainer: {padding: 3},
+          circle: {padding: 2},
+          button: {padding: 1},
+          circleColorOff: 'red',
+          circleColorOn: 'blue',
+          backgroundColorOn: 'green',
+          backgroundColorOff: 'grey',
+        }}
+      />,
+    );
+
+  context('when switch toggle is on', () => {
+    it('renders as on state', async () => {
+      testingLib = render(createComponent(getSwitchToggle({isOn: true})));
+
+      const baseElement = await waitFor(() => testingLib.toJSON());
+      expect(baseElement).toBeTruthy();
+    });
+  });
+
+  context('when switch toggle is off', () => {
+    it('renders as off state', () => {
+      const component = createComponent(getSwitchToggle({isOn: false}));
+      testingLib = render(component);
+
+      const baseElement = testingLib.toJSON();
+      expect(baseElement).toBeTruthy();
+    });
+  });
+});

package/components/uis/SwitchToggle/SwitchToggle.tsx

@@ -0,0 +1,224 @@
+import React, {useEffect, useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {Animated, TouchableOpacity} from 'react-native';
+import styled from '@emotion/native';
+import {useTheme} from '../../../providers/ThemeProvider';
+
+type Styles = {
+  container?: ViewStyle;
+  onElementContainer?: StyleProp<ViewStyle>;
+  offElementContainer?: StyleProp<ViewStyle>;
+  circle?: ViewStyle;
+  button?: StyleProp<ViewStyle>;
+  circleColorOff?: string;
+  circleColorOn?: string;
+  backgroundColorOn?: string;
+  backgroundColorOff?: string;
+};
+
+type Props = {
+  testID?: string;
+  size?: 'small' | 'medium' | 'large';
+  isOn: boolean;
+  style?: StyleProp<ViewStyle>;
+  styles?: Styles;
+  duration?: number;
+  onElement?: any;
+  offElement?: any;
+  onPress?: () => void;
+};
+
+// Typing limitation: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/12202
+
+const AnimatedContainer = styled(Animated.View)`
+  flex-direction: row;
+  align-items: center;
+`;
+
+const smallContainer: ViewStyle = {
+  width: 40,
+  height: 24,
+  borderRadius: 25,
+  padding: 5,
+};
+
+const smallCircle: ViewStyle = {
+  width: 16,
+  height: 16,
+  borderRadius: 8,
+};
+
+const mediumContainer: ViewStyle = {
+  width: 56,
+  height: 30,
+  borderRadius: 25,
+  padding: 5,
+};
+
+const mediumCircle: ViewStyle = {
+  width: 20,
+  height: 20,
+  borderRadius: 10,
+};
+
+const largeContainer: ViewStyle = {
+  width: 80,
+  height: 40,
+  borderRadius: 25,
+  padding: 5,
+};
+
+const largeCircle: ViewStyle = {
+  width: 32,
+  height: 32,
+  borderRadius: 16,
+};
+
+export function SwitchToggle({
+  testID,
+  isOn,
+  style,
+  styles,
+  duration = 300,
+  onElement,
+  size = 'medium',
+  offElement,
+  onPress,
+}: Props): JSX.Element {
+  const {theme} = useTheme();
+
+  const {
+    backgroundColorOn = theme.role.primary,
+    backgroundColorOff = theme.bg.disabled,
+    circleColorOn = theme.text.contrast,
+    circleColorOff = theme.text.basic,
+    container = size === 'large'
+      ? largeContainer
+      : size === 'small'
+        ? smallContainer
+        : mediumContainer,
+    circle = size === 'large'
+      ? largeCircle
+      : size === 'small'
+        ? smallCircle
+        : mediumCircle,
+    button,
+    onElementContainer,
+    offElementContainer,
+  } = styles ?? {};
+
+  const paddingLeft: number =
+    (container.padding as number) || (container.paddingLeft as number) || 0;
+
+  const paddingRight: number =
+    (container.padding as number) || (container.paddingRight as number) || 0;
+
+  const circlePosXStart = 0;
+
+  const circlePosXEnd =
+    ((container.width ?? mediumContainer.width) as number) -
+    ((circle.width ?? mediumCircle.width) as number) -
+    (paddingRight + paddingLeft);
+
+  const [animXValue] = useState(new Animated.Value(isOn ? 1 : 0));
+
+  useEffect(() => {
+    const runAnimation = (): void => {
+      const option = {
+        fromValue: isOn ? 0 : 1,
+        toValue: isOn ? 1 : 0,
+        duration,
+        useNativeDriver: false,
+      };
+
+      Animated.timing(animXValue, option).start();
+    };
+
+    runAnimation();
+  }, [animXValue, isOn, duration]);
+
+  const CircleButton = (
+    <Animated.View
+      style={[
+        circle,
+        {
+          backgroundColor: animXValue.interpolate({
+            inputRange: [0.5, 1],
+            outputRange: [
+              circleColorOff as string | number,
+              circleColorOn as string | number,
+            ] as string[] | number[],
+          }),
+        },
+        {
+          transform: [
+            {
+              translateX: animXValue.interpolate({
+                inputRange: [0, 1],
+                outputRange: [
+                  circlePosXStart as string | number,
+                  circlePosXEnd as string | number,
+                ] as string[] | number[],
+              }),
+            },
+          ],
+        },
+        button,
+      ]}
+    />
+  );
+
+  const OnElement = (
+    <Animated.View style={[{opacity: animXValue}, onElementContainer]}>
+      {onElement}
+    </Animated.View>
+  );
+
+  const OffElement = (
+    <Animated.View
+      style={[
+        {
+          opacity: animXValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [1, 0],
+          }),
+        },
+        offElementContainer,
+      ]}
+    >
+      {offElement}
+    </Animated.View>
+  );
+
+  return (
+    <TouchableOpacity
+      accessibilityRole="switch"
+      activeOpacity={0.8}
+      onPress={onPress}
+      style={style}
+      testID={testID}
+    >
+      <AnimatedContainer
+        style={[
+          container,
+          {
+            paddingLeft,
+            paddingRight,
+          },
+          {
+            backgroundColor: animXValue.interpolate({
+              inputRange: [0, 1],
+              outputRange: [
+                backgroundColorOff as string | number,
+                backgroundColorOn as string | number,
+              ] as string[] | number[],
+            }),
+          },
+        ]}
+      >
+        {isOn ? OnElement : OffElement}
+        {CircleButton}
+      </AnimatedContainer>
+    </TouchableOpacity>
+  );
+}

package/components/uis/Typography/Typography.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Text } from 'react-native';
+import { isEmptyObject } from '../../../utils/theme';
+import { withTheme } from '../../../providers/ThemeProvider';
+import { light } from '../../../utils/colors';
+import styled, { css } from '@emotion/native';
+// Base Styled Component Factory
+const createBaseText = (colorResolver, fallbackColor) => styled.Text `
+  font-family: ${({ theme }) => (theme ? 'Pretendard-Bold' : 'Pretendard')};
+  color: ${({ theme }) => {
+    if (!theme || isEmptyObject(theme)) {
+        return fallbackColor;
+    }
+    return colorResolver(theme);
+}};
+`;
+// Common Text Component Factory
+const createTextComponent = (BaseText, fontSize, lineHeight) => withTheme(({ style, children, theme, ...props }) => (_jsx(BaseText, { ...props, theme: theme, style: [
+        css `
+            font-size: ${fontSize + 'px'};
+            line-height: ${lineHeight + 'px'};
+          `,
+        { includeFontPadding: false },
+        style,
+    ], children: children })));
+// Standard and Inverted Base Components
+const StandardBaseText = createBaseText((theme) => theme.text.basic, 'gray');
+const InvertedBaseText = createBaseText((theme) => theme.text.contrast, light.text.contrast);
+// Standard Typography Components
+const Title = createTextComponent(StandardBaseText, 36, 50.4);
+const Heading1 = createTextComponent(StandardBaseText, 28, 39.2);
+const Heading2 = createTextComponent(StandardBaseText, 26, 36.4);
+const Heading3 = createTextComponent(StandardBaseText, 24, 33.6);
+const Heading4 = createTextComponent(StandardBaseText, 22, 30.8);
+const Heading5 = createTextComponent(StandardBaseText, 20, 28);
+const Body1 = createTextComponent(StandardBaseText, 18, 25.2);
+const Body2 = createTextComponent(StandardBaseText, 16, 22.4);
+const Body3 = createTextComponent(StandardBaseText, 14, 19.6);
+const Body4 = createTextComponent(StandardBaseText, 12, 16.4);
+// Inverted Typography Components
+const InvertedTitle = createTextComponent(InvertedBaseText, 36, 50.4);
+const InvertedHeading1 = createTextComponent(InvertedBaseText, 28, 39.2);
+const InvertedHeading2 = createTextComponent(InvertedBaseText, 26, 36.4);
+const InvertedHeading3 = createTextComponent(InvertedBaseText, 24, 33.6);
+const InvertedHeading4 = createTextComponent(InvertedBaseText, 22, 30.8);
+const InvertedHeading5 = createTextComponent(InvertedBaseText, 20, 28);
+const InvertedBody1 = createTextComponent(InvertedBaseText, 18, 25.2);
+const InvertedBody2 = createTextComponent(InvertedBaseText, 16, 22.4);
+const InvertedBody3 = createTextComponent(InvertedBaseText, 14, 19.6);
+const InvertedBody4 = createTextComponent(InvertedBaseText, 12, 16.4);
+export const Typography = {
+    Title,
+    Heading1,
+    Heading2,
+    Heading3,
+    Heading4,
+    Heading5,
+    Body1,
+    Body2,
+    Body3,
+    Body4,
+};
+export const TypographyInverted = {
+    Title: InvertedTitle,
+    Heading1: InvertedHeading1,
+    Heading2: InvertedHeading2,
+    Heading3: InvertedHeading3,
+    Heading4: InvertedHeading4,
+    Heading5: InvertedHeading5,
+    Body1: InvertedBody1,
+    Body2: InvertedBody2,
+    Body3: InvertedBody3,
+    Body4: InvertedBody4,
+};
+export const setFontFamily = (fontFamily) => {
+    const style = {
+        includeFontPadding: false,
+        fontFamily,
+    };
+    // @ts-ignore
+    let oldRender = Text.render;
+    // @ts-ignore
+    Text.render = (...args) => {
+        let origin = oldRender.call(this, ...args);
+        return React.cloneElement(origin, {
+            style: [style, origin.props.style],
+        });
+    };
+};

package/components/uis/Typography/Typography.test.tsx

@@ -0,0 +1,58 @@
+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 {Typography, TypographyInverted} from './Typography';
+import {ThemeProvider} from '../../../providers/ThemeProvider';
+
+let testingLib: RenderAPI;
+
+const Component = (): JSX.Element =>
+  createComponent(
+    <View>
+      <Typography.Title />,
+      <Typography.Heading1 />,
+      <Typography.Heading2 />,
+      <Typography.Heading3 />,
+      <Typography.Body1 />,
+      <Typography.Body2 />,
+      <TypographyInverted.Title />
+      <TypographyInverted.Heading1 />
+      <TypographyInverted.Heading2 />
+      <TypographyInverted.Heading3 />
+      <TypographyInverted.Body1 />
+      <TypographyInverted.Body2 />
+    </View>,
+  );
+
+describe('[Typography]', () => {
+  it('should render without crashing', () => {
+    testingLib = render(<Component />);
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should render default theme', () => {
+    testingLib = render(Component());
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should render [dark] mode', () => {
+    testingLib = render(
+      <ThemeProvider initialThemeType="dark">
+        <Component />
+      </ThemeProvider>,
+    );
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+});

package/components/uis/Typography/Typography.tsx

@@ -0,0 +1,132 @@
+import React, {ReactNode} from 'react';
+import {StyleProp, Text} from 'react-native';
+
+import {CpkTheme, isEmptyObject} from '../../../utils/theme';
+import {withTheme} from '../../../providers/ThemeProvider';
+import {light} from '../../../utils/colors';
+import {type TextStyle} from 'react-native';
+import styled, {css} from '@emotion/native';
+
+// Base Styled Component Factory
+const createBaseText = (
+  colorResolver: (theme: CpkTheme) => string,
+  fallbackColor: string,
+) => styled.Text<{theme?: CpkTheme}>`
+  font-family: ${({theme}) => (theme ? 'Pretendard-Bold' : 'Pretendard')};
+  color: ${({theme}) => {
+    if (!theme || isEmptyObject(theme)) {
+      return fallbackColor;
+    }
+    return colorResolver(theme);
+  }};
+`;
+
+// Common Text Component Factory
+const createTextComponent = (
+  BaseText: ReturnType<typeof styled.Text>,
+  fontSize: number,
+  lineHeight: number,
+) =>
+  withTheme(
+    ({
+      style,
+      children,
+      theme,
+      ...props
+    }: {
+      style?: StyleProp<TextStyle>;
+      children?: ReactNode;
+      theme?: CpkTheme;
+    }) => (
+      <BaseText
+        {...props}
+        theme={theme}
+        style={[
+          css`
+            font-size: ${fontSize + 'px'};
+            line-height: ${lineHeight + 'px'};
+          `,
+          {includeFontPadding: false},
+          style,
+        ]}
+      >
+        {children}
+      </BaseText>
+    ),
+  );
+
+// Standard and Inverted Base Components
+const StandardBaseText = createBaseText((theme) => theme.text.basic, 'gray');
+const InvertedBaseText = createBaseText(
+  (theme) => theme.text.contrast,
+  light.text.contrast,
+);
+
+// Standard Typography Components
+const Title = createTextComponent(StandardBaseText, 36, 50.4);
+const Heading1 = createTextComponent(StandardBaseText, 28, 39.2);
+const Heading2 = createTextComponent(StandardBaseText, 26, 36.4);
+const Heading3 = createTextComponent(StandardBaseText, 24, 33.6);
+const Heading4 = createTextComponent(StandardBaseText, 22, 30.8);
+const Heading5 = createTextComponent(StandardBaseText, 20, 28);
+const Body1 = createTextComponent(StandardBaseText, 18, 25.2);
+const Body2 = createTextComponent(StandardBaseText, 16, 22.4);
+const Body3 = createTextComponent(StandardBaseText, 14, 19.6);
+const Body4 = createTextComponent(StandardBaseText, 12, 16.4);
+
+// Inverted Typography Components
+const InvertedTitle = createTextComponent(InvertedBaseText, 36, 50.4);
+const InvertedHeading1 = createTextComponent(InvertedBaseText, 28, 39.2);
+const InvertedHeading2 = createTextComponent(InvertedBaseText, 26, 36.4);
+const InvertedHeading3 = createTextComponent(InvertedBaseText, 24, 33.6);
+const InvertedHeading4 = createTextComponent(InvertedBaseText, 22, 30.8);
+const InvertedHeading5 = createTextComponent(InvertedBaseText, 20, 28);
+const InvertedBody1 = createTextComponent(InvertedBaseText, 18, 25.2);
+const InvertedBody2 = createTextComponent(InvertedBaseText, 16, 22.4);
+const InvertedBody3 = createTextComponent(InvertedBaseText, 14, 19.6);
+const InvertedBody4 = createTextComponent(InvertedBaseText, 12, 16.4);
+
+export const Typography = {
+  Title,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Body1,
+  Body2,
+  Body3,
+  Body4,
+};
+
+export const TypographyInverted = {
+  Title: InvertedTitle,
+  Heading1: InvertedHeading1,
+  Heading2: InvertedHeading2,
+  Heading3: InvertedHeading3,
+  Heading4: InvertedHeading4,
+  Heading5: InvertedHeading5,
+  Body1: InvertedBody1,
+  Body2: InvertedBody2,
+  Body3: InvertedBody3,
+  Body4: InvertedBody4,
+};
+
+export const setFontFamily = (fontFamily: string): void => {
+  const style = {
+    includeFontPadding: false,
+    fontFamily,
+  };
+
+  // @ts-ignore
+  let oldRender = Text.render;
+
+  // @ts-ignore
+  Text.render = (...args: any) => {
+    let origin = oldRender.call(this, ...args);
+
+    return React.cloneElement(origin, {
+      style: [style, origin.props.style],
+    });
+  };
+};