cpk-ui 0.5.5 → 0.7.0

package/src/components/common/ErrorBoundary/ErrorBoundary.tsx

@@ -1,75 +0,0 @@
-import React, {Component, ReactNode} from 'react';
-import {View, Text} from 'react-native';
-import type {StyleProp, ViewStyle, TextStyle} from 'react-native';
-
-interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
-  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-interface State {
-  hasError: boolean;
-  error?: Error;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {hasError: false};
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return {hasError: true, error};
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    this.props.onError?.(error, errorInfo);
-    
-    // Log error in development
-    if (__DEV__) {
-      console.error('ErrorBoundary caught an error:', error, errorInfo);
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
-      return (
-        <View style={[defaultErrorStyle.container, this.props.style]}>
-          <Text style={defaultErrorStyle.title}>Something went wrong</Text>
-          <Text style={defaultErrorStyle.message}>
-            {this.state.error?.message || 'An unexpected error occurred'}
-          </Text>
-        </View>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-const defaultErrorStyle = {
-  container: {
-    flex: 1,
-    justifyContent: 'center' as const,
-    alignItems: 'center' as const,
-    padding: 20,
-    backgroundColor: '#f8f9fa',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold' as const,
-    color: '#dc3545',
-    marginBottom: 8,
-  },
-  message: {
-    fontSize: 14,
-    color: '#6c757d',
-    textAlign: 'center' as const,
-  },
-} satisfies Record<string, StyleProp<ViewStyle | TextStyle>>;

package/src/components/modals/AlertDialog/AlertDialog.stories.tsx

@@ -1,216 +0,0 @@
-import React, {type ReactElement} from 'react';
-import type {ComponentProps} from 'react';
-import {SafeAreaView} from 'react-native';
-import {styled, css} from 'kstyled';
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {withThemeProvider} from '../../../../.storybook/decorators';
-import {useCPK} from '../../../providers';
-import {Typography} from '../../uis/Typography/Typography';
-import {Button} from '../../uis/Button/Button';
-import AlertDialog, {type AlertDialogSizeType} from './AlertDialog';
-
-const Container = styled(SafeAreaView)`
-  flex-direction: column;
-  padding: 48px 24px;
-  align-self: stretch;
-  justify-content: center;
-  align-items: center;
-`;
-
-type AlertDialogBasicStoryProps = {
-  size: AlertDialogSizeType;
-};
-
-function AlertDialogBasicStory({size}: AlertDialogBasicStoryProps): ReactElement {
-  const {alertDialog} = useCPK();
-
-  return (
-    <Container>
-      <Typography.Title>AlertDialog</Typography.Title>
-      <Button
-        color="primary"
-        onPress={() =>
-          alertDialog.open({
-            title: 'Hello there!',
-            body: 'This is an alert dialog.',
-            size,
-          })
-        }
-        style={{marginTop: 60, width: 200}}
-        text="Dialog"
-      />
-      <Button
-        color="primary"
-        onPress={() =>
-          alertDialog.open({
-            title: 'Hello there!',
-            body: 'This is an alert dialog.',
-            size,
-            actions: [
-              <Button
-                color="light"
-                key="button-cancel"
-                onPress={() => alertDialog.close()}
-                text="Cancel"
-              />,
-              <Button
-                key="button-ok"
-                onPress={() => alertDialog.close()}
-                text="OK"
-              />,
-            ],
-          })
-        }
-        style={{marginTop: 20, width: 200}}
-        text="With actions"
-      />
-    </Container>
-  );
-}
-
-const meta = {
-  title: 'AlertDialog',
-  component: AlertDialogBasicStory,
-  parameters: {
-    notes: `
-A modal dialog component for displaying important information or requiring user confirmation.
-
-## Features
-- **Flexible Sizing**: Preset sizes (small, medium, large) and custom numeric values
-- **Customizable Actions**: Support for multiple action buttons
-- **Backdrop Control**: Configurable backdrop opacity and outside click behavior
-- **Close Button**: Optional close button in the header
-- **Custom Content**: Support for custom title and body elements
-- **Accessibility**: Built-in accessibility support with proper roles and labels
-
-## Size Options
-- \`small\`: 14px title, 12px body, 16px icon
-- \`medium\`: 16px title, 14px body, 18px icon (default)
-- \`large\`: 18px title, 16px body, 20px icon
-- Custom number: Custom font size in pixels with proportional spacing
-
-## Usage
-\`\`\`tsx
-const {alertDialog} = useCPK();
-
-alertDialog.open({
-  title: 'Confirm Action',
-  body: 'Are you sure you want to proceed?',
-  size: 'medium',
-  actions: [
-    <Button text="Cancel" onPress={() => alertDialog.close()} />,
-    <Button text="Confirm" onPress={handleConfirm} />
-  ]
-});
-\`\`\`
-
-### Basic Dialog
-\`\`\`tsx
-alertDialog.open({
-  title: 'Hello',
-  body: 'This is a basic alert dialog.',
-  size: 'medium',
-});
-\`\`\`
-
-### With Custom Actions
-\`\`\`tsx
-alertDialog.open({
-  title: 'Delete Item',
-  body: 'This action cannot be undone.',
-  size: 'large',
-  actions: [
-    <Button color="light" text="Cancel" onPress={() => alertDialog.close()} />,
-    <Button color="danger" text="Delete" onPress={handleDelete} />
-  ],
-  showCloseButton: false
-});
-\`\`\`
-        `,
-    docs: {
-      description: {
-        component: `
-A modal dialog component for displaying important information or requiring user confirmation.
-
-## Features
-- **Flexible Sizing**: Preset sizes (small, medium, large) and custom numeric values
-- **Customizable Actions**: Support for multiple action buttons
-- **Backdrop Control**: Configurable backdrop opacity and outside click behavior
-- **Close Button**: Optional close button in the header
-- **Custom Content**: Support for custom title and body elements
-- **Accessibility**: Built-in accessibility support with proper roles and labels
-
-## Size Options
-- \`small\`: 14px title, 12px body, 16px icon
-- \`medium\`: 16px title, 14px body, 18px icon (default)
-- \`large\`: 18px title, 16px body, 20px icon
-- Custom number: Custom font size in pixels with proportional spacing
-
-## Usage
-\`\`\`tsx
-const {alertDialog} = useCPK();
-
-alertDialog.open({
-  title: 'Confirm Action',
-  body: 'Are you sure you want to proceed?',
-  size: 'medium',
-  actions: [
-    <Button text="Cancel" onPress={() => alertDialog.close()} />,
-    <Button text="Confirm" onPress={handleConfirm} />
-  ]
-});
-\`\`\`
-
-### Basic Dialog
-\`\`\`tsx
-alertDialog.open({
-  title: 'Hello',
-  body: 'This is a basic alert dialog.',
-  size: 'medium',
-});
-\`\`\`
-
-### With Custom Actions
-\`\`\`tsx
-alertDialog.open({
-  title: 'Delete Item',
-  body: 'This action cannot be undone.',
-  size: 'large',
-  actions: [
-    <Button color="light" text="Cancel" onPress={() => alertDialog.close()} />,
-    <Button color="danger" text="Delete" onPress={handleDelete} />
-  ],
-  showCloseButton: false
-});
-\`\`\`
-        `,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['small', 'medium', 'large', 14, 16, 18, 20],
-      description: 'Dialog size: "small" (14px title), "medium" (16px title), "large" (18px title), or custom number in pixels',
-    },
-  },
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof AlertDialogBasicStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    size: 'medium',
-  },
-  argTypes: {
-    // @ts-expect-error - theme is for storybook control
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};

package/src/components/modals/AlertDialog/AlertDialog.test.tsx

@@ -1,251 +0,0 @@
-import '@testing-library/jest-native/extend-expect';
-
-import React, {type ReactElement, useRef} from 'react';
-import type {RenderAPI} from '@testing-library/react-native';
-import {render, waitFor} from '@testing-library/react-native';
-
-import {createComponent} from '../../../../test/testUtils';
-import AlertDialog, {type AlertDialogContext} from './AlertDialog';
-import {ThemeType} from '../../../providers/ThemeProvider';
-
-let testingLib: RenderAPI;
-
-const TestComponent = ({
-  themeType,
-}: {
-  themeType?: ThemeType;
-}): ReactElement => {
-  const alertDialogRef = useRef<AlertDialogContext>(null);
-
-  return createComponent(<AlertDialog ref={alertDialogRef} />, themeType);
-};
-
-describe('[AlertDialog]', () => {
-  it('should render without crashing', () => {
-    testingLib = render(<TestComponent />);
-
-    const json = testingLib.toJSON();
-    expect(json).toBeTruthy();
-  });
-
-  describe('Size prop', () => {
-    it('should accept small size', async () => {
-      const TestWithSize = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Test Title',
-            body: 'Test Body',
-            size: 'small',
-          });
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />);
-      };
-
-      testingLib = render(<TestWithSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test Title')).toBeTruthy();
-      });
-    });
-
-    it('should accept medium size', async () => {
-      const TestWithSize = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Test Title',
-            body: 'Test Body',
-            size: 'medium',
-          });
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />);
-      };
-
-      testingLib = render(<TestWithSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test Title')).toBeTruthy();
-      });
-    });
-
-    it('should accept large size', async () => {
-      const TestWithSize = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Test Title',
-            body: 'Test Body',
-            size: 'large',
-          });
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />);
-      };
-
-      testingLib = render(<TestWithSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test Title')).toBeTruthy();
-      });
-    });
-
-    it('should accept custom numeric size', async () => {
-      const TestWithSize = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Test Title',
-            body: 'Test Body',
-            size: 20,
-          });
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />);
-      };
-
-      testingLib = render(<TestWithSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test Title')).toBeTruthy();
-      });
-    });
-
-    it('should default to medium size when size is not specified', async () => {
-      const TestWithoutSize = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Test Title',
-            body: 'Test Body',
-          });
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />);
-      };
-
-      testingLib = render(<TestWithoutSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test Title')).toBeTruthy();
-      });
-    });
-  });
-
-  describe('Content rendering', () => {
-    it('should render title and body', async () => {
-      const TestWithContent = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Alert Title',
-            body: 'Alert Body Content',
-            size: 'medium',
-          });
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />);
-      };
-
-      testingLib = render(<TestWithContent />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Alert Title')).toBeTruthy();
-        expect(testingLib.getByText('Alert Body Content')).toBeTruthy();
-      });
-    });
-
-    it('should render with actions', async () => {
-      const TestWithActions = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Confirm',
-            body: 'Are you sure?',
-            size: 'medium',
-            actions: [
-              <button key="cancel">Cancel</button>,
-              <button key="ok">OK</button>,
-            ],
-          });
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />);
-      };
-
-      testingLib = render(<TestWithActions />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Confirm')).toBeTruthy();
-      });
-    });
-  });
-
-  describe('Close functionality', () => {
-    it('should close dialog when close is called', async () => {
-      const TestWithClose = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Test Title',
-            body: 'Test Body',
-            size: 'medium',
-          });
-
-          setTimeout(() => {
-            alertDialogRef.current?.close();
-          }, 100);
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />);
-      };
-
-      testingLib = render(<TestWithClose />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test Title')).toBeTruthy();
-      });
-
-      await waitFor(
-        () => {
-          expect(testingLib.queryByText('Test Title')).toBeNull();
-        },
-        {timeout: 500},
-      );
-    });
-  });
-
-  describe('Dark mode', () => {
-    it('should render in dark mode', async () => {
-      const TestDarkMode = (): ReactElement => {
-        const alertDialogRef = useRef<AlertDialogContext>(null);
-
-        React.useEffect(() => {
-          alertDialogRef.current?.open({
-            title: 'Dark Mode Title',
-            body: 'Dark Mode Body',
-            size: 'medium',
-          });
-        }, []);
-
-        return createComponent(<AlertDialog ref={alertDialogRef} />, 'dark');
-      };
-
-      testingLib = render(<TestDarkMode />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Dark Mode Title')).toBeTruthy();
-      });
-    });
-  });
-});