cpk-ui 0.5.4 → 0.7.0

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

@@ -1,319 +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 Snackbar, {type SnackbarContext} from './Snackbar';
-import {ThemeType} from '../../../providers/ThemeProvider';
-
-let testingLib: RenderAPI;
-
-const TestComponent = ({
-  themeType,
-}: {
-  themeType?: ThemeType;
-}): ReactElement => {
-  const snackbarRef = useRef<SnackbarContext>(null);
-
-  return createComponent(<Snackbar ref={snackbarRef} />, themeType);
-};
-
-describe('[Snackbar]', () => {
-  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 snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Test message',
-            size: 'small',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test message')).toBeTruthy();
-      });
-    });
-
-    it('should accept medium size', async () => {
-      const TestWithSize = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Test message',
-            size: 'medium',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test message')).toBeTruthy();
-      });
-    });
-
-    it('should accept large size', async () => {
-      const TestWithSize = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Test message',
-            size: 'large',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test message')).toBeTruthy();
-      });
-    });
-
-    it('should accept custom numeric size', async () => {
-      const TestWithSize = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Test message',
-            size: 18,
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test message')).toBeTruthy();
-      });
-    });
-
-    it('should default to medium size when size is not specified', async () => {
-      const TestWithoutSize = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Test message',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithoutSize />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test message')).toBeTruthy();
-      });
-    });
-  });
-
-  describe('Content rendering', () => {
-    it('should render text message', async () => {
-      const TestWithText = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Snackbar message content',
-            size: 'medium',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithText />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Snackbar message content')).toBeTruthy();
-      });
-    });
-
-    it('should render with action text', async () => {
-      const TestWithAction = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Action test',
-            actionText: 'Undo',
-            size: 'medium',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithAction />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Action test')).toBeTruthy();
-        expect(testingLib.getByText('Undo')).toBeTruthy();
-      });
-    });
-  });
-
-  describe('Color variants', () => {
-    it('should render with primary color', async () => {
-      const TestWithColor = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Primary color',
-            color: 'primary',
-            size: 'medium',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithColor />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Primary color')).toBeTruthy();
-      });
-    });
-
-    it('should render with danger color', async () => {
-      const TestWithColor = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Danger color',
-            color: 'danger',
-            size: 'medium',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithColor />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Danger color')).toBeTruthy();
-      });
-    });
-
-    it('should render with info color', async () => {
-      const TestWithColor = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Info color',
-            color: 'info',
-            size: 'medium',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithColor />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Info color')).toBeTruthy();
-      });
-    });
-  });
-
-  describe('Close functionality', () => {
-    it('should close snackbar when close is called', async () => {
-      const TestWithClose = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Test message',
-            size: 'medium',
-            timer: 10000,
-          });
-
-          setTimeout(() => {
-            snackbarRef.current?.close();
-          }, 100);
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />);
-      };
-
-      testingLib = render(<TestWithClose />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Test message')).toBeTruthy();
-      });
-
-      await waitFor(
-        () => {
-          expect(testingLib.queryByText('Test message')).toBeNull();
-        },
-        {timeout: 500},
-      );
-    });
-  });
-
-  describe('Dark mode', () => {
-    it('should render in dark mode', async () => {
-      const TestDarkMode = (): ReactElement => {
-        const snackbarRef = useRef<SnackbarContext>(null);
-
-        React.useEffect(() => {
-          snackbarRef.current?.open({
-            text: 'Dark mode message',
-            size: 'medium',
-            timer: 10000,
-          });
-        }, []);
-
-        return createComponent(<Snackbar ref={snackbarRef} />, 'dark');
-      };
-
-      testingLib = render(<TestDarkMode />);
-
-      await waitFor(() => {
-        expect(testingLib.getByText('Dark mode message')).toBeTruthy();
-      });
-    });
-  });
-});

package/src/components/modals/Snackbar/Snackbar.tsx

@@ -1,260 +0,0 @@
-import React, {forwardRef, useImperativeHandle, useState, useCallback, useMemo, type ReactElement} from 'react';
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {Modal, Platform, SafeAreaView, StyleSheet, View} from 'react-native';
-import {styled, css} from 'kstyled';
-
-import {SnackbarTimer} from './const';
-import {Button, ButtonColorType} from '../../uis/Button/Button';
-import {useTheme} from '../../../providers/ThemeProvider';
-import {Icon} from '../../uis/Icon/Icon';
-import {Typography} from '../../uis/Typography/Typography';
-
-export type SnackbarSizeType = 'small' | 'medium' | 'large' | number;
-
-const calculateSpacing = (size: SnackbarSizeType = 'medium'): number => {
-  if (typeof size === 'number') return size * 0.75;
-  return size === 'small' ? 10 : size === 'large' ? 14 : 12;
-};
-
-const Container = styled(View)`
-  flex: 1;
-  align-self: stretch;
-
-  flex-direction: row;
-  justify-content: center;
-`;
-
-const SnackbarContainer = styled(SafeAreaView)<{$color: ButtonColorType; $size?: SnackbarSizeType}>`
-  background-color: ${({theme, $color}) => theme.button[$color].bg};
-  border-radius: 8px;
-  margin-bottom: 52px;
-  margin-left: ${({$size}) => calculateSpacing($size)};
-  margin-right: ${({$size}) => calculateSpacing($size)};
-  align-self: flex-end;
-
-  flex-direction: row;
-  align-items: center;
-`;
-
-const ActionContainer = styled(View)`
-  margin-right: 4px;
-`;
-
-const SnackbarText = styled(Typography.Body2)<{$color: ButtonColorType; $size?: SnackbarSizeType}>`
-  color: ${({theme, $color}) => theme.button[$color].text};
-  flex: 1;
-  padding: ${({$size}) => calculateSpacing($size)};
-`;
-
-export type SnackbarProps = {
-  style?: StyleProp<ViewStyle>;
-};
-
-export type SnackbarStyles = {
-  container?: StyleProp<ViewStyle>;
-  text?: StyleProp<TextStyle>;
-  actionContainer?: StyleProp<ViewStyle>;
-  actionText?: StyleProp<TextStyle>;
-};
-
-export type SnackbarOptions = {
-  color?: ButtonColorType;
-  styles?: SnackbarStyles;
-  text?: string;
-  actionText?: string;
-  timer?: SnackbarTimer | number;
-  size?: SnackbarSizeType;
-};
-
-export type SnackbarContext = {
-  open(snackbarOptions?: SnackbarOptions): void;
-  close(): void;
-};
-
-let timer: NodeJS.Timeout | null = null;
-
-function clearTimer(): void {
-  if (timer) {
-    clearTimeout(timer);
-    timer = null;
-  }
-}
-
-function Snackbar(
-  {style}: SnackbarProps,
-  ref: React.Ref<SnackbarContext>,
-): ReactElement {
-  const [options, setOptions] = useState<SnackbarOptions | null>(null);
-  const [visible, setVisible] = useState(false);
-  const {theme} = useTheme();
-
-  // Memoize the close handler
-  const handleClose = useCallback(() => {
-    setVisible(false);
-    setOptions(null);
-  }, []);
-
-  // Memoize the open handler
-  const handleOpen = useCallback((snackbarOptions?: SnackbarOptions) => {
-    clearTimer();
-    setVisible(true);
-    if (snackbarOptions) {
-      setOptions(snackbarOptions);
-    }
-
-    timer = setTimeout(() => {
-      setVisible(false);
-      clearTimer();
-    }, snackbarOptions?.timer ?? SnackbarTimer.SHORT);
-  }, []);
-
-  useImperativeHandle(ref, () => ({
-    open: handleOpen,
-    close: handleClose,
-  }), [handleOpen, handleClose]);
-
-  const {text, styles, actionText, color = 'primary', size = 'medium'} = options ?? {};
-
-  // Calculate sizes based on size prop
-  const sizeConfig = useMemo(() => {
-    if (typeof size === 'number') {
-      return {
-        fontSize: size,
-        iconSize: size,
-      };
-    }
-
-    switch (size) {
-      case 'small':
-        return {
-          fontSize: 12,
-          iconSize: 14,
-        };
-      case 'large':
-        return {
-          fontSize: 16,
-          iconSize: 18,
-        };
-      default: // 'medium'
-        return {
-          fontSize: 14,
-          iconSize: 16,
-        };
-    }
-  }, [size]);
-
-  // Memoize shadow styles
-  const shadowStyles = useMemo(() => 
-    Platform.OS !== 'web' ? {
-      shadowOffset: {width: 0, height: 4},
-      shadowColor: theme.text.basic,
-    } : {},
-    [theme.text.basic]
-  );
-
-  // Memoize container styles
-  const containerStyles = useMemo(() => 
-    StyleSheet.flatten([shadowStyles, styles?.container]),
-    [shadowStyles, styles?.container]
-  );
-
-  // Memoize text styles
-  const textStyles = useMemo(() =>
-    StyleSheet.flatten([
-      css`
-        color: ${theme.button[color].text};
-        font-size: ${sizeConfig.fontSize}px;
-      `,
-      styles?.text,
-    ]),
-    [theme.button, color, sizeConfig.fontSize, styles?.text]
-  );
-
-  // Memoize action text styles
-  const actionTextStyles = useMemo(() => 
-    StyleSheet.flatten([
-      css`
-        color: ${theme.button[color].text};
-      `,
-      styles?.actionText,
-    ]),
-    [theme.button, color, styles?.actionText]
-  );
-
-  // Memoize action button handler
-  const handleActionPress = useCallback(() => setVisible(false), []);
-
-  // Memoize modal styles
-  const modalStyles = useMemo(() => [
-    css`
-      flex: 1;
-      align-self: stretch;
-    `,
-    style,
-  ], [style]);
-
-  const SnackbarContent = useMemo(() => (
-    <Container>
-      <SnackbarContainer
-        $color={color}
-        $size={size}
-        style={containerStyles}
-      >
-        <SnackbarText
-          $color={color}
-          $size={size}
-          style={textStyles}
-        >
-          {text}
-        </SnackbarText>
-        <ActionContainer style={styles?.actionContainer}>
-          {actionText ? (
-            <Button
-              onPress={handleActionPress}
-              styles={{
-                text: actionTextStyles,
-              }}
-              text={actionText}
-              type="text"
-            />
-          ) : (
-            <Button
-              onPress={handleActionPress}
-              text={<Icon color={theme.button[color].text} name="X" size={sizeConfig.iconSize} />}
-              type="text"
-            />
-          )}
-        </ActionContainer>
-      </SnackbarContainer>
-    </Container>
-  ), [
-    color,
-    size,
-    containerStyles,
-    textStyles,
-    text,
-    styles?.actionContainer,
-    actionText,
-    actionTextStyles,
-    handleActionPress,
-    sizeConfig.iconSize,
-    theme.button,
-  ]);
-
-  return (
-    // https://github.com/facebook/react-native/issues/48526#issuecomment-2579478884
-    <View>
-      <Modal
-        animationType="fade"
-        style={modalStyles}
-        transparent={true}
-        visible={visible}
-      >
-        {SnackbarContent}
-      </Modal>
-    </View>
-  );
-}
-
-// Export memoized component for better performance
-export default React.memo(forwardRef<SnackbarContext, SnackbarProps>(Snackbar));

package/src/components/modals/Snackbar/const.ts

@@ -1,4 +0,0 @@
-export enum SnackbarTimer {
-  SHORT = 2000,
-  LONG = 3500,
-}