cpk-ui 0.5.5 → 0.7.0

package/src/components/uis/CustomPressable/CustomPressable.tsx

@@ -1,48 +0,0 @@
-import React, {useMemo, type ReactElement} from 'react';
-import type {PressableProps, StyleProp, ViewStyle} from 'react-native';
-import {Pressable} from 'react-native';
-import {css} from 'kstyled';
-import {useCPK} from '../../../providers';
-
-const DEFAULT_HIT_SLOP = {top: 4, bottom: 4, left: 6, right: 6};
-
-function CustomPressable(
-  props: PressableProps & {style?: StyleProp<ViewStyle>},
-): ReactElement {
-  const {children, style, hitSlop, ...restProps} = props;
-  const {theme} = useCPK();
-
-  const effectiveHitSlop = useMemo(() => 
-    hitSlop || DEFAULT_HIT_SLOP, 
-    [hitSlop]
-  );
-
-  const styleFunction = useMemo(
-    () => ({pressed}: {pressed: boolean}) => {
-      if (pressed) {
-        return [
-          css`
-            background-color: ${theme.role.underlay};
-          `,
-          style,
-        ];
-      }
-      return style;
-    },
-    [theme.role.underlay, style]
-  );
-
-  return (
-    <Pressable
-      hitSlop={effectiveHitSlop}
-      style={styleFunction}
-      {...restProps}
-    >
-      {children}
-    </Pressable>
-  );
-}
-
-// Export memoized component for better performance
-export default React.memo(CustomPressable) as typeof CustomPressable;
-export {CustomPressable};

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

@@ -1,124 +0,0 @@
-import type {ComponentProps} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {withThemeProvider} from '../../../../.storybook/decorators';
-import {EditText} from './EditText';
-
-const EDITTEXT_DOCS = `
-A flexible text input component with various styling and validation options.
-
-## Features
-- **Flexible Sizing**: Preset sizes and custom numeric values
-- **Two Decoration Styles**: Underline or boxed input styles
-- **Layout Directions**: Row or column layout for label and input
-- **Validation Support**: Built-in error message display
-- **Character Counter**: Optional character counter with maxLength support
-- **Multiline Support**: Can be used as a textarea
-- **Secure Text Entry**: Password input support
-- **Status States**: Visual feedback for focused, hovered, error, and disabled states
-- **Custom Elements**: Support for left and right elements/icons
-
-## Decoration Options
-- \`underline\`: Bottom border style (default)
-- \`boxed\`: Full border box style
-
-## Direction Options
-- \`row\`: Label and input side by side
-- \`column\`: Label above input (default)
-
-## Size Options
-- \`small\`: 14px font size with proportional padding
-- \`medium\`: 16px font size with proportional padding (default)
-- \`large\`: 18px font size with proportional padding
-- Custom number: Custom font size in pixels with proportional padding
-
-## Usage
-\`\`\`tsx
-<EditText
-  label="Email"
-  placeholder="Enter your email"
-  value={email}
-  onChangeText={setEmail}
-  size="medium"
-  decoration="boxed"
-  direction="column"
-  required
-/>
-\`\`\`
-
-### With Validation
-\`\`\`tsx
-<EditText
-  label="Password"
-  placeholder="Enter password"
-  value={password}
-  onChangeText={setPassword}
-  secureTextEntry
-  error={passwordError}
-  maxLength={20}
-/>
-\`\`\`
-`;
-
-const meta = {
-  title: 'EditText',
-  component: (props) => <EditText {...props} />,
-  parameters: {
-    notes: EDITTEXT_DOCS,
-    docs: {
-      description: {
-        component: EDITTEXT_DOCS,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['small', 'medium', 'large', 14, 16, 18, 20],
-      description: 'Input size: "small" (14px), "medium" (16px), "large" (18px), or custom number in pixels',
-    },
-    required: {type: 'boolean', description: 'Shows required indicator'},
-    label: {type: 'string', description: 'Label text for the input'},
-    error: {type: 'string', description: 'Error message to display'},
-    value: {type: 'string', description: 'Current input value'},
-    multiline: {type: 'boolean', description: 'Enables multiline input'},
-    placeholder: {type: 'string', description: 'Placeholder text'},
-    placeholderColor: {type: 'string', description: 'Custom placeholder color'},
-    editable: {type: 'boolean', description: 'Controls if input is editable'},
-    secureTextEntry: {type: 'boolean', description: 'Hides text for password input'},
-    numberOfLines: {type: 'number', description: 'Number of lines for multiline input'},
-    maxLength: {type: 'number', description: 'Maximum character length'},
-    hideCounter: {type: 'boolean', description: 'Hides character counter'},
-    direction: {
-      control: 'select',
-      options: ['row', 'column'],
-      description: 'Layout direction of label and input',
-    },
-    decoration: {
-      control: 'select',
-      options: ['underline', 'boxed'],
-      description: 'Visual style of the input',
-    },
-  },
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof EditText>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    size: 'medium',
-    onChangeText: () => {},
-    direction: 'column',
-    decoration: 'boxed',
-    placeholder: 'Write something...',
-    editable: true,
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};

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

@@ -1,477 +0,0 @@
-// Mock Platform API before any imports
-jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-  OS: 'web',
-  select: (obj) => obj.web || obj.default,
-}));
-
-// Mock @expo/vector-icons
-jest.mock('@expo/vector-icons', () => ({
-  AntDesign: 'AntDesign',
-  createIconSetFromIcoMoon: () => 'Icon',
-  // Add any other exports from @expo/vector-icons that you're using
-}));
-
-import '@testing-library/jest-native/extend-expect';
-
-import React, {type ReactElement} 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): ReactElement =>
-  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 = (): ReactElement => {
-          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', () => {
-    it('renders web style', () => {
-      testingLib = render(
-        Component({
-          testID: 'INPUT_TEST',
-        }),
-      );
-
-      const input = testingLib.getByTestId('INPUT_TEST');
-      expect(input).toBeTruthy();
-      // No need to check for outlineWidth: 0 since we handle this dynamically now
-    });
-  });
-
-  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 = (): ReactElement => <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'});
-      });
-    });
-  });
-
-  describe('sizes', () => {
-    it('should render with small size', () => {
-      testingLib = render(
-        Component({
-          testID: 'INPUT_TEST',
-          size: 'small',
-          label: 'Small Input',
-        }),
-      );
-
-      const input = testingLib.getByTestId('INPUT_TEST');
-      expect(input).toBeTruthy();
-
-      const label = testingLib.getByText('Small Input');
-      expect(label).toBeTruthy();
-    });
-
-    it('should render with medium size', () => {
-      testingLib = render(
-        Component({
-          testID: 'INPUT_TEST',
-          size: 'medium',
-          label: 'Medium Input',
-        }),
-      );
-
-      const input = testingLib.getByTestId('INPUT_TEST');
-      expect(input).toBeTruthy();
-
-      const label = testingLib.getByText('Medium Input');
-      expect(label).toBeTruthy();
-    });
-
-    it('should render with large size', () => {
-      testingLib = render(
-        Component({
-          testID: 'INPUT_TEST',
-          size: 'large',
-          label: 'Large Input',
-        }),
-      );
-
-      const input = testingLib.getByTestId('INPUT_TEST');
-      expect(input).toBeTruthy();
-
-      const label = testingLib.getByText('Large Input');
-      expect(label).toBeTruthy();
-    });
-
-    it('should render with custom numeric size', () => {
-      testingLib = render(
-        Component({
-          testID: 'INPUT_TEST',
-          size: 20,
-          label: 'Custom Size Input',
-        }),
-      );
-
-      const input = testingLib.getByTestId('INPUT_TEST');
-      expect(input).toBeTruthy();
-
-      const label = testingLib.getByText('Custom Size Input');
-      expect(label).toBeTruthy();
-    });
-  });
-});