cpk-ui 0.0.1 → 0.0.4

package/components/uis/EditText/EditText.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useCallback, useMemo, useRef, useState, } from 'react';
+import { Platform, Text, TextInput, TouchableWithoutFeedback, View, } from 'react-native';
+import { useHover } from 'react-native-web-hooks';
+import { css } from '@emotion/native';
+import { useCPK } from '../../../providers';
+import { Icon } from '../Icon/Icon';
+import { cloneElemWithDefaultColors } from '../../../utils/guards';
+import { Global } from '@emotion/react';
+export const EditText = forwardRef(({ testID, textInputProps, style, styles, label, error, startElement, endElement, multiline = false, value = '', placeholder, placeholderColor, onChange, onChangeText, onFocus, onBlur, onSubmitEditing, numberOfLines, maxLength, hideCounter = false, autoComplete, autoCapitalize = 'none', secureTextEntry = false, editable = true, direction = 'column', decoration = 'underline', colors = {}, required = false, }, ref) => {
+    EditText.displayName = 'EditText';
+    const { theme } = useCPK();
+    const webRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const defaultInputRef = useRef(null);
+    const inputRef = ref || defaultInputRef;
+    const hovered = useHover(webRef);
+    const defaultContainerStyle = css `
+      flex-direction: ${direction};
+    `;
+    const defaultColor = !editable
+        ? colors.disabled || theme.text.disabled
+        : error
+            ? colors.error || theme.text.validation
+            : focused
+                ? colors.focused || theme.text.basic
+                : hovered
+                    ? colors.hovered || theme.text.basic
+                    : colors.placeholder || theme.text.placeholder;
+    // Default label placeholder color has different value compared to default input placeholder color
+    const labelPlaceholderColor = useMemo(() => defaultColor === (colors.placeholder || theme.text.placeholder) && {
+        color: colors.placeholder || theme.text.disabled,
+    }, [
+        colors.placeholder,
+        defaultColor,
+        theme.text.disabled,
+        theme.text.placeholder,
+    ]);
+    const status = !editable
+        ? 'disabled'
+        : error
+            ? 'error'
+            : hovered
+                ? 'hovered'
+                : focused
+                    ? 'focused'
+                    : 'basic';
+    const renderLabel = useCallback(() => {
+        // eslint-disable-next-line react/no-unstable-nested-components
+        function Wrapper({ children }) {
+            return (_jsxs(View, { style: [
+                    css `
+                margin-bottom: ${decoration === 'boxed' ? '14px' : 0};
+
+                flex-direction: row;
+                align-items: center;
+              `,
+                    styles?.labelContainer,
+                ], children: [children, required ? (_jsx(Icon, { name: "AsteriskBold", style: css `
+                  color: ${theme.role.danger};
+                  opacity: ${focused ? '1' : '0.5'};
+                ` })) : null] }));
+        }
+        return typeof label === 'string' ? (_jsx(Wrapper, { children: _jsx(Text, { style: [
+                    css `
+                font-family: Pretendard-Bold;
+                color: ${defaultColor};
+                margin-right: 4px;
+                font-size: 16px;
+              `,
+                    labelPlaceholderColor,
+                    styles?.label,
+                ], children: label }) })) : label ? (_jsx(Wrapper, { children: label(status) })) : null;
+    }, [
+        decoration,
+        defaultColor,
+        focused,
+        label,
+        labelPlaceholderColor,
+        required,
+        status,
+        styles?.label,
+        styles?.labelContainer,
+        theme.role.danger,
+    ]);
+    const renderContainer = useCallback((children) => {
+        return (_jsx(TouchableWithoutFeedback, { onPress: () => inputRef.current?.focus(), testID: "container-touch", children: _jsx(View, { style: [
+                    defaultContainerStyle,
+                    css `
+                  flex-direction: ${direction};
+                  align-items: ${direction === 'row' ? 'center' : 'flex-start'};
+                  justify-content: ${direction === 'row'
+                        ? 'flex-start'
+                        : 'space-between'};
+                  border-color: ${labelPlaceholderColor
+                        ? labelPlaceholderColor.color
+                        : defaultColor};
+                `,
+                    decoration === 'boxed'
+                        ? css `
+                      border-radius: 4px;
+                      border-width: 1px;
+                      padding-left: 12px;
+                      padding-right: 12px;
+                    `
+                        : css `
+                      border-bottom-width: 1px;
+                    `,
+                    styles?.container,
+                ], testID: "container", children: children }) }));
+    }, [
+        decoration,
+        defaultColor,
+        defaultContainerStyle,
+        direction,
+        inputRef,
+        labelPlaceholderColor,
+        styles?.container,
+    ]);
+    const renderInput = useCallback(() => {
+        return (_jsx(View, { style: [
+                direction === 'row'
+                    ? css `
+                  flex: 1;
+                `
+                    : css `
+                  align-self: stretch;
+                `,
+                css `
+              padding: ${decoration === 'boxed' ? '4px 0' : '2px 0'};
+
+              flex-direction: row;
+              align-items: center;
+              justify-content: space-between;
+            `,
+                styles?.inputContainer,
+            ], children: _jsxs(_Fragment, { children: [isValidElement(startElement)
+                        ? cloneElemWithDefaultColors({
+                            element: startElement,
+                            color: defaultColor,
+                            style: css `
+                    margin-left: -4px;
+                    margin-right: 4px;
+                  `,
+                        })
+                        : startElement, _jsx(TextInput, { autoCapitalize: autoCapitalize, autoComplete: autoComplete, editable: editable, maxLength: maxLength, multiline: multiline, numberOfLines: numberOfLines, onBlur: (e) => {
+                            setFocused(false);
+                            onBlur?.(e);
+                        }, onChange: onChange, onChangeText: onChangeText, onFocus: (e) => {
+                            setFocused(true);
+                            onFocus?.(e);
+                        }, onSubmitEditing: onSubmitEditing, placeholder: placeholder, placeholderTextColor: placeholderColor || theme.text.placeholder, ref: inputRef, secureTextEntry: secureTextEntry, selectionColor: theme.role.underlay, style: [
+                            // Stretch input in order to make remaining space clickable
+                            css `
+                  font-family: Pretendard;
+                  flex: 1;
+                  font-size: 16px;
+                  text-align-vertical: ${multiline ? 'top' : 'center'};
+                `,
+                            Platform.OS === 'web' &&
+                                css `
+                    outline-width: 0;
+                  `,
+                            direction === 'column'
+                                ? css `
+                      padding-top: 12px;
+                    `
+                                : css `
+                      padding-left: 12px;
+                    `,
+                            css `
+                  color: ${defaultColor};
+                  padding: 10px 0 12px 0;
+                `,
+                            styles?.input,
+                        ], testID: testID, value: value, ...textInputProps }), isValidElement(endElement)
+                        ? cloneElemWithDefaultColors({
+                            element: endElement,
+                            color: defaultColor,
+                            style: css `
+                    margin-left: 4px;
+                    margin-right: ${decoration === 'boxed' ? '-8px' : '-4px'};
+                  `,
+                        })
+                        : endElement] }) }));
+    }, [
+        autoCapitalize,
+        autoComplete,
+        decoration,
+        defaultColor,
+        direction,
+        editable,
+        endElement,
+        inputRef,
+        maxLength,
+        multiline,
+        numberOfLines,
+        onBlur,
+        onChange,
+        onChangeText,
+        onFocus,
+        onSubmitEditing,
+        placeholder,
+        placeholderColor,
+        secureTextEntry,
+        startElement,
+        styles?.input,
+        styles?.inputContainer,
+        testID,
+        textInputProps,
+        theme.role.underlay,
+        theme.text.placeholder,
+        value,
+    ]);
+    const renderError = useCallback(() => {
+        return error ? (typeof error === 'string' ? (_jsx(Text, { style: [
+                css `
+                flex: 1;
+                color: ${theme.text.validation};
+                font-size: 12px;
+              `,
+                styles?.error,
+            ], children: error })) : (error?.(status))) : null;
+    }, [error, status, styles?.error, theme.text.validation]);
+    const renderCounter = useCallback(() => {
+        if (hideCounter) {
+            return null;
+        }
+        return maxLength ? (_jsx(Text, { style: [
+                css `
+              color: ${theme.text.placeholder};
+              font-size: 12px;
+            `,
+                styles?.counter,
+            ], children: `${value.length}/${maxLength}` })) : null;
+    }, [
+        hideCounter,
+        maxLength,
+        styles?.counter,
+        theme.text.placeholder,
+        value.length,
+    ]);
+    return (_jsxs(_Fragment, { children: [Platform.OS === 'web' ? _jsx(WebStyles, {}) : null, _jsxs(View, { ref: Platform.select({ web: webRef, default: undefined }), style: [
+                    css `
+              width: 100%;
+            `,
+                    style,
+                ], testID: "edit-text", children: [renderLabel(), renderContainer(renderInput()), renderError() || renderCounter() ? (_jsxs(View, { style: css `
+                margin-top: 6px;
+
+                flex-direction: ${!renderError() && renderCounter()
+                            ? 'row-reverse'
+                            : 'row'};
+                gap: 4px;
+              `, children: [renderError(), renderCounter()] })) : null] })] }));
+});
+function WebStyles() {
+    return (_jsx(Global
+    // @ts-ignore
+    , { 
+        // @ts-ignore
+        styles: css `
+        input:autofill,
+        input:autofill:hover,
+        input:autofill:focus,
+        input:autofill:active {
+          -webkit-text-fill-color: #787878;
+          box-shadow: 0 0 0px 1000px #ededed inset;
+          transition: background-color 5000s ease-in-out 0s;
+        }
+        ::-webkit-scrollbar {
+          display: none;
+        }
+      ` }));
+}

package/components/uis/EditText/EditText.stories.tsx

@@ -0,0 +1,46 @@
+import type {ComponentProps} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {withThemeProvider} from '../../../../.storybook/decorators';
+import {EditText} from './EditText';
+
+const meta = {
+  title: 'EditText',
+  component: (props) => <EditText {...props} />,
+  argTypes: {
+    required: {type: 'boolean'},
+    label: {type: 'string'},
+    error: {type: 'string'},
+    value: {type: 'string'},
+    multiline: {type: 'boolean'},
+    placeholder: {type: 'string'},
+    placeholderColor: {type: 'string'},
+    editable: {type: 'boolean'},
+    secureTextEntry: {type: 'boolean'},
+    numberOfLines: {type: 'number'},
+    maxLength: {type: 'number'},
+    hideCounter: {type: 'boolean'},
+    direction: {
+      control: 'select',
+      options: ['row', 'column'],
+    },
+    decoration: {
+      control: 'select',
+      options: ['underline', 'boxed'],
+    },
+  },
+  decorators: [withThemeProvider],
+} satisfies Meta<typeof EditText>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    onChangeText: () => {},
+    direction: 'column',
+    decoration: 'boxed',
+    placeholder: 'Write something...',
+    editable: true,
+  },
+};

package/components/uis/EditText/EditText.test.tsx

@@ -0,0 +1,406 @@
+import React from 'react';
+import {Text} from 'react-native';
+import RNWebHooks from 'react-native-web-hooks';
+import type {RenderAPI} from '@testing-library/react-native';
+import {act, fireEvent, render} from '@testing-library/react-native';
+
+import {createComponent} from '../../../../test/testUtils';
+import type {EditTextProps} from './EditText';
+import {EditText} from './EditText';
+import { light } from '../../../utils/colors';
+
+jest.mock('react-native-web-hooks', () => ({
+  useHover: () => false,
+}));
+
+let testingLib: RenderAPI;
+
+const Component = (editProps?: EditTextProps): JSX.Element =>
+  createComponent(<EditText {...editProps} />);
+
+describe('[EditText]', () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  beforeAll(() => {
+    testingLib = render(Component());
+  });
+
+  describe('hovered', () => {
+    beforeAll(() => {
+      jest.spyOn(RNWebHooks, 'useHover').mockImplementation(() => true);
+    });
+
+    describe('label', () => {
+      it('renders label text', async () => {
+        testingLib = render(Component({label: 'label text'}));
+
+        const label = testingLib.getByText('label text');
+
+        expect(label).toBeTruthy();
+      });
+
+      it('renders label style', async () => {
+        testingLib = render(
+          Component({
+            label: 'label text',
+            colors: {
+              basic: 'blue',
+              placeholder: 'green',
+              disabled: 'red',
+              error: 'yellow',
+              focused: 'purple',
+              hovered: 'orange',
+            },
+          }),
+        );
+
+        const label = testingLib.getByText('label text');
+
+        expect(label).toHaveStyle({color: 'orange'});
+      });
+
+      it('renders custom label style', async () => {
+        const renderCustomLabel = (): JSX.Element => {
+          return (
+            <Text
+              style={{
+                color: 'blue',
+                fontSize: 12,
+                fontWeight: 'bold',
+              }}
+            >
+              Custom label
+            </Text>
+          );
+        };
+
+        testingLib = render(
+          Component({
+            label: renderCustomLabel,
+          }),
+        );
+
+        const label = testingLib.getByText('Custom label');
+
+        expect(label).toBeTruthy();
+      });
+
+      describe('unhovered', () => {
+        beforeAll(() => {
+          jest.spyOn(RNWebHooks, 'useHover').mockImplementation(() => false);
+        });
+
+        it('should contain `focusColor` when focused', async () => {
+          testingLib = render(
+            Component({
+              testID: 'INPUT_TEST',
+              label: 'label text',
+              colors: {
+                basic: 'blue',
+                placeholder: 'green',
+                disabled: 'red',
+                error: 'yellow',
+                focused: 'purple',
+                hovered: 'orange',
+              },
+            }),
+          );
+
+          const input = testingLib.getByTestId('INPUT_TEST');
+          expect(input).toHaveStyle({color: 'green'});
+
+          act(() => {
+            input.props.onFocus();
+          });
+
+          const label = testingLib.getByText('label text');
+
+          expect(label).toHaveStyle({color: 'purple'});
+        });
+
+        it('renders error element when provided', async () => {
+          testingLib = render(
+            Component({
+              testID: 'INPUT_TEST',
+              label: 'label text',
+              error: 'error text',
+              styles: {
+                label: {
+                  color: 'green',
+                },
+              },
+            }),
+          );
+
+          const input = testingLib.getByTestId('INPUT_TEST');
+
+          act(() => {
+            input.props.onFocus();
+          });
+
+          const error = testingLib.getByText('error text');
+          expect(error).toBeTruthy();
+        });
+      });
+    });
+  });
+
+  describe('layout', () => {
+    it('renders [direction] row', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          direction: 'row',
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+      // const container = testingLib.getByTestId('container');
+
+      expect(input).toBeTruthy();
+      // expect(container).toHaveStyle({flexDirection: 'row'});
+    });
+
+    it('renders [decoration] boxed', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          decoration: 'boxed',
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+      // const container = testingLib.getByTestId('container');
+
+      expect(input).toBeTruthy();
+      // expect(container).toHaveStyle({borderWidth: 1});
+    });
+  });
+
+  describe('start and end elements', () => {
+    it('renders start element', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          startElement: <Text>Start</Text>,
+        }),
+      );
+
+      const input = testingLib.getByText('Start');
+      expect(input).toBeTruthy();
+    });
+
+    it('renders end element', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          endElement: <Text>End</Text>,
+        }),
+      );
+
+      const input = testingLib.getByText('End');
+      expect(input).toBeTruthy();
+    });
+  });
+
+  describe('web', () => {
+    beforeAll(() => {
+      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+        OS: 'web',
+        select: () => null,
+      }));
+    });
+
+    it('renders web style', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+      expect(input).toBeTruthy();
+      // @ts-ignore
+      expect(input).toHaveStyle({outlineWidth: 0});
+    });
+  });
+
+  describe('input', () => {
+    it('should trigger text changes', () => {
+      const CHANGE_TEXT = 'content';
+      const mockedFn = jest.fn();
+
+      const onChangeTextMock = (str: string): void => {
+        mockedFn(str);
+      };
+
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          editable: false,
+          onChangeText: onChangeTextMock,
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+      expect(input).toBeTruthy();
+
+      fireEvent.changeText(input, CHANGE_TEXT);
+      expect(mockedFn).toBeCalledWith(CHANGE_TEXT);
+    });
+
+    it('should have value', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          value: 'text123',
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+
+      expect(input).toBeTruthy();
+
+      expect(input).toHaveProp('value', 'text123');
+    });
+
+    it('should have render counter', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          value: 'text123',
+          maxLength: 100,
+        }),
+      );
+
+      const counter = testingLib.getByText('7/100');
+
+      expect(counter).toBeTruthy();
+    });
+
+    it('should have render custom error', () => {
+      const renderCustomError = (): JSX.Element => <Text>custom error</Text>;
+
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          value: 'text123',
+          error: renderCustomError,
+        }),
+      );
+
+      const error = testingLib.getByText('custom error');
+
+      expect(error).toBeTruthy();
+    });
+  });
+
+  describe('disabled', () => {
+    it('renders [default] disabled style', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          editable: false,
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+
+      expect(input).toBeTruthy();
+
+      expect(input).toHaveStyle({color: light.text.disabled});
+    });
+
+    it('renders [custom] disabled style', () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          colors: {disabled: 'yellow'},
+          editable: false,
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+
+      expect(input).toBeTruthy();
+
+      expect(input).toHaveStyle({color: 'yellow'});
+    });
+  });
+
+  describe('focus', () => {
+    it('should trigger `onFocus`', async () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          onFocus: jest.fn(),
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+
+      expect(input).toBeTruthy();
+
+      fireEvent(input, 'focus');
+
+      expect(input).toHaveStyle({color: light.text.basic});
+    });
+
+    it('should trigger `onFocus` and render custom color', async () => {
+      testingLib = render(
+        Component({
+          testID: 'INPUT_TEST',
+          onFocus: jest.fn(),
+          colors: {focused: 'yellow'},
+        }),
+      );
+
+      const input = testingLib.getByTestId('INPUT_TEST');
+
+      expect(input).toBeTruthy();
+
+      fireEvent(input, 'focus');
+
+      expect(input).toHaveStyle({color: 'yellow'});
+    });
+
+    it('should trigger `onFocus` when touching container', async () => {
+      const focusFn = jest.fn();
+
+      testingLib = render(
+        Component({
+          onFocus: focusFn,
+          colors: {focused: 'yellow'},
+        }),
+      );
+
+      const touch = testingLib.getByTestId('container-touch');
+
+      expect(touch).toBeTruthy();
+
+      fireEvent(touch, 'press');
+      // Below should work but no luck in testing-library
+      // expect(focusFn).toBeCalled();
+    });
+
+    describe('onBlur (focused === false)', () => {
+      it('should trigger blur without errorText', async () => {
+        testingLib = render(
+          Component({
+            onBlur: () => {},
+            testID: 'INPUT_TEST',
+            colors: {placeholder: 'green'},
+          }),
+        );
+
+        const input = testingLib.getByTestId('INPUT_TEST');
+
+        expect(input).toBeTruthy();
+
+        fireEvent(input, 'blur');
+
+        expect(input).toHaveStyle({color: 'green'});
+      });
+    });
+  });
+});

package/components/uis/EditText/EditText.tsx

@@ -0,0 +1,535 @@
+import type {MutableRefObject, ReactNode, RefObject} from 'react';
+import React, {
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type {
+  StyleProp,
+  TextInputProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import {
+  Platform,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {useHover} from 'react-native-web-hooks';
+import {css} from '@emotion/native';
+
+import {useCPK} from '../../../providers';
+import {Icon} from '../Icon/Icon';
+import {cloneElemWithDefaultColors} from '../../../utils/guards';
+import {Global} from '@emotion/react';
+
+export type EditTextStyles = {
+  container?: StyleProp<ViewStyle>;
+  labelContainer?: StyleProp<ViewStyle>;
+  label?: StyleProp<TextStyle>;
+  inputContainer?: StyleProp<TextStyle>;
+  input?: StyleProp<TextStyle>;
+  error?: StyleProp<TextStyle>;
+  counter?: StyleProp<TextStyle>;
+};
+
+export type EditTextStatus =
+  | 'disabled'
+  | 'error'
+  | 'focused'
+  | 'hovered'
+  | 'basic';
+
+type RenderType = (stats: EditTextStatus) => JSX.Element;
+
+type CustomRenderType =
+  | (({color, status}: {color: string; status: EditTextStatus}) => JSX.Element)
+  | null;
+
+export type EditTextProps = {
+  testID?: TextInputProps['testID'];
+  inputRef?: MutableRefObject<TextInput | undefined> | RefObject<TextInput>;
+  style?: StyleProp<ViewStyle>;
+  styles?: EditTextStyles;
+
+  // Component
+  startElement?: JSX.Element | CustomRenderType;
+  endElement?: JSX.Element | CustomRenderType;
+  required?: boolean;
+  label?: string | RenderType;
+  error?: string | RenderType;
+  direction?: 'row' | 'column';
+  decoration?: 'underline' | 'boxed';
+  value?: TextInputProps['value'];
+  multiline?: TextInputProps['multiline'];
+  onChange?: TextInputProps['onChange'];
+  onChangeText?: TextInputProps['onChangeText'];
+  placeholder?: TextInputProps['placeholder'];
+  placeholderColor?: TextInputProps['placeholderTextColor'];
+  onFocus?: TextInputProps['onFocus'] | undefined;
+  onBlur?: TextInputProps['onBlur'] | undefined;
+  editable?: TextInputProps['editable'];
+  autoComplete?: TextInputProps['autoComplete'];
+  autoCapitalize?: TextInputProps['autoCapitalize'];
+  secureTextEntry?: TextInputProps['secureTextEntry'];
+  onSubmitEditing?: TextInputProps['onSubmitEditing'];
+  numberOfLines?: TextInputProps['numberOfLines'];
+  maxLength?: TextInputProps['maxLength'];
+  hideCounter?: boolean;
+
+  textInputProps?: Omit<
+    TextInputProps,
+    | 'value'
+    | 'onChange'
+    | 'numberOfLines'
+    | 'multiline'
+    | 'onChange'
+    | 'onChangeText'
+    | 'placeholder'
+    | 'placeholderTextColor'
+    | 'onFocus'
+    | 'onBlur'
+    | 'editable'
+    | 'autoComplete'
+    | 'autoCapitalize'
+    | 'secureTextEntry'
+    | 'onSubmitEditing'
+    | 'maxLength'
+  >;
+
+  colors?: {
+    basic?: string;
+    disabled?: string;
+    error?: string;
+    focused?: string;
+    hovered?: string;
+    placeholder?: string;
+  };
+};
+
+export const EditText = forwardRef<TextInput, EditTextProps>(
+  (
+    {
+      testID,
+      textInputProps,
+      style,
+      styles,
+      label,
+      error,
+      startElement,
+      endElement,
+      multiline = false,
+      value = '',
+      placeholder,
+      placeholderColor,
+      onChange,
+      onChangeText,
+      onFocus,
+      onBlur,
+      onSubmitEditing,
+      numberOfLines,
+      maxLength,
+      hideCounter = false,
+      autoComplete,
+      autoCapitalize = 'none',
+      secureTextEntry = false,
+      editable = true,
+      direction = 'column',
+      decoration = 'underline',
+      colors = {},
+      required = false,
+    }: EditTextProps,
+    ref,
+  ): JSX.Element => {
+    EditText.displayName = 'EditText';
+
+    const {theme} = useCPK();
+    const webRef = useRef<View>(null);
+    const [focused, setFocused] = useState(false);
+    const defaultInputRef = useRef(null);
+    const inputRef = (ref as MutableRefObject<TextInput>) || defaultInputRef;
+    const hovered = useHover(webRef);
+
+    const defaultContainerStyle = css`
+      flex-direction: ${direction};
+    `;
+
+    const defaultColor = !editable
+      ? colors.disabled || theme.text.disabled
+      : error
+        ? colors.error || theme.text.validation
+        : focused
+          ? colors.focused || theme.text.basic
+          : hovered
+            ? colors.hovered || theme.text.basic
+            : colors.placeholder || theme.text.placeholder;
+
+    // Default label placeholder color has different value compared to default input placeholder color
+    const labelPlaceholderColor = useMemo(
+      () =>
+        defaultColor === (colors.placeholder || theme.text.placeholder) && {
+          color: colors.placeholder || theme.text.disabled,
+        },
+      [
+        colors.placeholder,
+        defaultColor,
+        theme.text.disabled,
+        theme.text.placeholder,
+      ],
+    );
+
+    const status: EditTextStatus = !editable
+      ? 'disabled'
+      : error
+        ? 'error'
+        : hovered
+          ? 'hovered'
+          : focused
+            ? 'focused'
+            : 'basic';
+
+    const renderLabel = useCallback((): JSX.Element | null => {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      function Wrapper({children}: {children: ReactNode}): JSX.Element {
+        return (
+          <View
+            style={[
+              css`
+                margin-bottom: ${decoration === 'boxed' ? '14px' : 0};
+
+                flex-direction: row;
+                align-items: center;
+              `,
+              styles?.labelContainer,
+            ]}
+          >
+            {children}
+            {required ? (
+              <Icon
+                name="AsteriskBold"
+                style={css`
+                  color: ${theme.role.danger};
+                  opacity: ${focused ? '1' : '0.5'};
+                `}
+              />
+            ) : null}
+          </View>
+        );
+      }
+
+      return typeof label === 'string' ? (
+        <Wrapper>
+          <Text
+            style={[
+              css`
+                font-family: Pretendard-Bold;
+                color: ${defaultColor};
+                margin-right: 4px;
+                font-size: 16px;
+              `,
+              labelPlaceholderColor,
+              styles?.label,
+            ]}
+          >
+            {label}
+          </Text>
+        </Wrapper>
+      ) : label ? (
+        <Wrapper>{label(status)}</Wrapper>
+      ) : null;
+    }, [
+      decoration,
+      defaultColor,
+      focused,
+      label,
+      labelPlaceholderColor,
+      required,
+      status,
+      styles?.label,
+      styles?.labelContainer,
+      theme.role.danger,
+    ]);
+
+    const renderContainer = useCallback(
+      (children: ReactNode): JSX.Element => {
+        return (
+          <TouchableWithoutFeedback
+            onPress={() => inputRef.current?.focus()}
+            testID="container-touch"
+          >
+            <View
+              style={[
+                defaultContainerStyle,
+                css`
+                  flex-direction: ${direction};
+                  align-items: ${direction === 'row' ? 'center' : 'flex-start'};
+                  justify-content: ${direction === 'row'
+                    ? 'flex-start'
+                    : 'space-between'};
+                  border-color: ${labelPlaceholderColor
+                    ? labelPlaceholderColor.color
+                    : defaultColor};
+                `,
+                decoration === 'boxed'
+                  ? css`
+                      border-radius: 4px;
+                      border-width: 1px;
+                      padding-left: 12px;
+                      padding-right: 12px;
+                    `
+                  : css`
+                      border-bottom-width: 1px;
+                    `,
+                styles?.container,
+              ]}
+              testID="container"
+            >
+              {children}
+            </View>
+          </TouchableWithoutFeedback>
+        );
+      },
+      [
+        decoration,
+        defaultColor,
+        defaultContainerStyle,
+        direction,
+        inputRef,
+        labelPlaceholderColor,
+        styles?.container,
+      ],
+    );
+
+    const renderInput = useCallback((): JSX.Element | null => {
+      return (
+        <View
+          style={[
+            direction === 'row'
+              ? css`
+                  flex: 1;
+                `
+              : css`
+                  align-self: stretch;
+                `,
+            css`
+              padding: ${decoration === 'boxed' ? '4px 0' : '2px 0'};
+
+              flex-direction: row;
+              align-items: center;
+              justify-content: space-between;
+            `,
+            styles?.inputContainer,
+          ]}
+        >
+          <>
+            {isValidElement(startElement)
+              ? cloneElemWithDefaultColors({
+                  element: startElement,
+                  color: defaultColor,
+                  style: css`
+                    margin-left: -4px;
+                    margin-right: 4px;
+                  `,
+                })
+              : startElement}
+            <TextInput
+              autoCapitalize={autoCapitalize}
+              autoComplete={autoComplete}
+              editable={editable}
+              maxLength={maxLength}
+              multiline={multiline}
+              numberOfLines={numberOfLines}
+              onBlur={(e) => {
+                setFocused(false);
+                onBlur?.(e);
+              }}
+              onChange={onChange}
+              onChangeText={onChangeText}
+              onFocus={(e) => {
+                setFocused(true);
+                onFocus?.(e);
+              }}
+              onSubmitEditing={onSubmitEditing}
+              placeholder={placeholder}
+              placeholderTextColor={placeholderColor || theme.text.placeholder}
+              ref={inputRef}
+              secureTextEntry={secureTextEntry}
+              selectionColor={theme.role.underlay}
+              style={[
+                // Stretch input in order to make remaining space clickable
+                css`
+                  font-family: Pretendard;
+                  flex: 1;
+                  font-size: 16px;
+                  text-align-vertical: ${multiline ? 'top' : 'center'};
+                `,
+                Platform.OS === 'web' &&
+                  css`
+                    outline-width: 0;
+                  `,
+                direction === 'column'
+                  ? css`
+                      padding-top: 12px;
+                    `
+                  : css`
+                      padding-left: 12px;
+                    `,
+                css`
+                  color: ${defaultColor};
+                  padding: 10px 0 12px 0;
+                `,
+                styles?.input,
+              ]}
+              testID={testID}
+              value={value}
+              {...textInputProps}
+            />
+            {isValidElement(endElement)
+              ? cloneElemWithDefaultColors({
+                  element: endElement,
+                  color: defaultColor,
+                  style: css`
+                    margin-left: 4px;
+                    margin-right: ${decoration === 'boxed' ? '-8px' : '-4px'};
+                  `,
+                })
+              : endElement}
+          </>
+        </View>
+      );
+    }, [
+      autoCapitalize,
+      autoComplete,
+      decoration,
+      defaultColor,
+      direction,
+      editable,
+      endElement,
+      inputRef,
+      maxLength,
+      multiline,
+      numberOfLines,
+      onBlur,
+      onChange,
+      onChangeText,
+      onFocus,
+      onSubmitEditing,
+      placeholder,
+      placeholderColor,
+      secureTextEntry,
+      startElement,
+      styles?.input,
+      styles?.inputContainer,
+      testID,
+      textInputProps,
+      theme.role.underlay,
+      theme.text.placeholder,
+      value,
+    ]);
+
+    const renderError = useCallback((): JSX.Element | null => {
+      return error ? (
+        typeof error === 'string' ? (
+          <Text
+            style={[
+              css`
+                flex: 1;
+                color: ${theme.text.validation};
+                font-size: 12px;
+              `,
+              styles?.error,
+            ]}
+          >
+            {error}
+          </Text>
+        ) : (
+          error?.(status)
+        )
+      ) : null;
+    }, [error, status, styles?.error, theme.text.validation]);
+
+    const renderCounter = useCallback((): JSX.Element | null => {
+      if (hideCounter) {
+        return null;
+      }
+
+      return maxLength ? (
+        <Text
+          style={[
+            css`
+              color: ${theme.text.placeholder};
+              font-size: 12px;
+            `,
+            styles?.counter,
+          ]}
+        >{`${value.length}/${maxLength}`}</Text>
+      ) : null;
+    }, [
+      hideCounter,
+      maxLength,
+      styles?.counter,
+      theme.text.placeholder,
+      value.length,
+    ]);
+
+    return (
+      <>
+        {Platform.OS === 'web' ? <WebStyles /> : null}
+        <View
+          ref={Platform.select({web: webRef, default: undefined})}
+          style={[
+            css`
+              width: 100%;
+            `,
+            style,
+          ]}
+          testID="edit-text"
+        >
+          {renderLabel()}
+          {renderContainer(renderInput())}
+          {renderError() || renderCounter() ? (
+            <View
+              style={css`
+                margin-top: 6px;
+
+                flex-direction: ${!renderError() && renderCounter()
+                  ? 'row-reverse'
+                  : 'row'};
+                gap: 4px;
+              `}
+            >
+              {renderError()}
+              {renderCounter()}
+            </View>
+          ) : null}
+        </View>
+      </>
+    );
+  },
+);
+
+function WebStyles(): JSX.Element {
+  return (
+    <Global
+      // @ts-ignore
+      styles={css`
+        input:autofill,
+        input:autofill:hover,
+        input:autofill:focus,
+        input:autofill:active {
+          -webkit-text-fill-color: #787878;
+          box-shadow: 0 0 0px 1000px #ededed inset;
+          transition: background-color 5000s ease-in-out 0s;
+        }
+        ::-webkit-scrollbar {
+          display: none;
+        }
+      `}
+    />
+  );
+}

package/components/uis/Hr/Hr.js

@@ -0,0 +1,12 @@
+import styled from '@emotion/native';
+import { isEmptyObject } from '../../../utils/theme';
+export const Hr = styled.View `
+  height: 0.5px;
+  width: 100%;
+  background-color: ${({ theme }) => {
+    if (isEmptyObject(theme)) {
+        return theme.role.border;
+    }
+    return theme.role.border;
+}};
+`;

package/components/uis/Hr/Hr.test.tsx

@@ -0,0 +1,26 @@
+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 {Hr} from './Hr';
+
+let testingLib: RenderAPI;
+
+const Component = (): JSX.Element =>
+  createComponent(
+    <View>
+      <Hr />
+    </View>,
+  );
+
+describe('[Hr]', () => {
+  it('should render without crashing', () => {
+    testingLib = render(Component());
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+});

package/components/uis/Hr/Hr.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/native';
+import {isEmptyObject} from '../../../utils/theme';
+
+export const Hr = styled.View`
+  height: 0.5px;
+  width: 100%;
+  background-color: ${({theme}) => {
+    if (isEmptyObject(theme)) {
+      return theme.role.border;
+    }
+
+    return theme.role.border;
+  }};
+`;

package/components/uis/Typography/Typography.js

@@ -15,11 +15,10 @@ const createBaseText = (colorResolver, fallbackColor) => styled.Text `
     return colorResolver(theme);
 }};
 `;
-// Common Text Component Factory
-const createTextComponent = (BaseText, fontSize, lineHeight) => withTheme(({ style, children, theme, ...props }) => (_jsx(BaseText, { ...props, theme: theme, style: [
+const createTextComponent = (BaseText, fontSize, lineHeight) => withTheme(({ style, children, theme, ...props }) => (_jsx(BaseText, { ...props, style: [
         css `
-            font-size: ${fontSize + 'px'};
-            line-height: ${lineHeight + 'px'};
+            font-size: ${fontSize}px;
+            line-height: ${lineHeight}px;
           `,
         { includeFontPadding: false },
         style,

package/components/uis/Typography/Typography.tsx

@@ -22,8 +22,10 @@ const createBaseText = (
 `;
 
 // Common Text Component Factory
+type TextComponentType = ReturnType<typeof styled.Text>;
+
 const createTextComponent = (
-  BaseText: ReturnType<typeof styled.Text>,
+  BaseText: TextComponentType,
   fontSize: number,
   lineHeight: number,
 ) =>
@@ -40,11 +42,10 @@ const createTextComponent = (
     }) => (
       <BaseText
         {...props}
-        theme={theme}
         style={[
           css`
-            font-size: ${fontSize + 'px'};
-            line-height: ${lineHeight + 'px'};
+            font-size: ${fontSize}px;
+            line-height: ${lineHeight}px;
           `,
           {includeFontPadding: false},
           style,
@@ -53,7 +54,7 @@ const createTextComponent = (
         {children}
       </BaseText>
     ),
-  );
+  ) as unknown as TextComponentType;
 
 // Standard and Inverted Base Components
 const StandardBaseText = createBaseText((theme) => theme.text.basic, 'gray');

package/index.js

@@ -7,6 +7,7 @@ export * from './providers';
 export * from './components/uis/Accordion/Accordion';
 export * from './components/uis/Button/Button';
 export * from './components/uis/Checkbox/Checkbox';
+export * from './components/uis/EditText/EditText';
 export * from './components/uis/Icon/Icon';
 export * from './components/uis/IconButton/IconButton';
 export * from './components/uis/LoadingIndicator/LoadingIndicator';

package/index.tsx

@@ -9,6 +9,7 @@ export * from './providers';
 export * from './components/uis/Accordion/Accordion';
 export * from './components/uis/Button/Button';
 export * from './components/uis/Checkbox/Checkbox';
+export * from './components/uis/EditText/EditText';
 export * from './components/uis/Icon/Icon';
 export * from './components/uis/IconButton/IconButton';
 export * from './components/uis/LoadingIndicator/LoadingIndicator';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "main": "index",
   "react-native": "index",
   "module": "index",