cpk-ui 0.2.2 → 0.2.3

package/components/uis/Button/Button.js

@@ -124,7 +124,17 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
         borderRadius,
         hovered,
         styles,
-    }), [theme, type, color, size, loading, innerDisabled, borderRadius, hovered, styles]);
+    }), [
+        theme,
+        type,
+        color,
+        size,
+        loading,
+        innerDisabled,
+        borderRadius,
+        hovered,
+        styles,
+    ]);
     // Memoize loading view
     const LoadingView = useMemo(() => loadingElement ?? (_jsx(LoadingIndicator, { color: loadingColor
             ? loadingColor
@@ -149,7 +159,14 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
                 element: endElement,
                 backgroundColor: viewStyle?.backgroundColor,
                 color: textStyle?.color,
-            })] })), [startElement, endElement, text, compositeStyles.text, viewStyle?.backgroundColor, textStyle?.color]);
+            })] })), [
+        startElement,
+        endElement,
+        text,
+        compositeStyles.text,
+        viewStyle?.backgroundColor,
+        textStyle?.color,
+    ]);
     // Memoize container renderer
     const renderContainer = useCallback(({ children, loadingView, }) => (_jsxs(ButtonContainer, { disabled: innerDisabled, size: size, style: [
             hovered && !innerDisabled && compositeStyles.hovered,
@@ -159,6 +176,10 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
               background-color: transparent;
             `,
             innerDisabled && compositeStyles.disabled,
+            !!borderRadius &&
+                css `
+              border-radius: ${borderRadius + 'px'};
+            `,
         ], testID: loading ? 'loading-view' : 'button-container', type: type, children: [_jsx(View, { style: compositeStyles.content, children: children }), _jsx(View, { style: compositeStyles.loading, children: loadingView })] })), [
         innerDisabled,
         size,
@@ -182,8 +203,8 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
     const buttonStyles = useMemo(() => [
         style,
         css `
-      border-radius: ${borderRadius + 'px'};
-    `,
+        border-radius: ${borderRadius + 'px'};
+      `,
     ], [style, borderRadius]);
     return (_jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: handlePress, ref: Platform.select({
             web: ref,

package/components/uis/Button/Button.tsx

@@ -206,10 +206,13 @@ const useButtonState = ({
   innerDisabled: boolean;
   isLoading: boolean;
 } => {
-  return useMemo(() => ({
-    innerDisabled: disabled || !onPress,
-    isLoading: loading,
-  }), [disabled, onPress, loading]);
+  return useMemo(
+    () => ({
+      innerDisabled: disabled || !onPress,
+      isLoading: loading,
+    }),
+    [disabled, onPress, loading],
+  );
 };
 
 export function Button({
@@ -238,33 +241,51 @@ export function Button({
   const {theme} = useTheme();
 
   const {innerDisabled} = useButtonState({disabled, onPress, loading});
-  
+
   // Memoize styles calculation
-  const compositeStyles: Styles = useMemo(() => calculateStyles({
-    theme,
-    type,
-    color,
-    size,
-    loading,
-    disabled: innerDisabled,
-    borderRadius,
-    hovered,
-    styles,
-  }), [theme, type, color, size, loading, innerDisabled, borderRadius, hovered, styles]);
+  const compositeStyles: Styles = useMemo(
+    () =>
+      calculateStyles({
+        theme,
+        type,
+        color,
+        size,
+        loading,
+        disabled: innerDisabled,
+        borderRadius,
+        hovered,
+        styles,
+      }),
+    [
+      theme,
+      type,
+      color,
+      size,
+      loading,
+      innerDisabled,
+      borderRadius,
+      hovered,
+      styles,
+    ],
+  );
 
   // Memoize loading view
-  const LoadingView = useMemo(() => loadingElement ?? (
-    <LoadingIndicator
-      color={
-        loadingColor
-          ? loadingColor
-          : type === 'solid'
-            ? theme.text.contrast
-            : theme.text.basic
-      }
-      size="small"
-    />
-  ), [loadingElement, loadingColor, type, theme.text.contrast, theme.text.basic]);
+  const LoadingView = useMemo(
+    () =>
+      loadingElement ?? (
+        <LoadingIndicator
+          color={
+            loadingColor
+              ? loadingColor
+              : type === 'solid'
+                ? theme.text.contrast
+                : theme.text.basic
+          }
+          size="small"
+        />
+      ),
+    [loadingElement, loadingColor, type, theme.text.contrast, theme.text.basic],
+  );
 
   // Memoize style resolvers
   const resolveStyle = useCallback(<T,>(style: StyleProp<T>): T | undefined => {
@@ -274,29 +295,47 @@ export function Button({
     return (style as T) || undefined;
   }, []);
 
-  const viewStyle = useMemo(() => resolveStyle<ViewStyle>(compositeStyles.container), [resolveStyle, compositeStyles.container]);
-  const textStyle = useMemo(() => resolveStyle<TextStyle>(compositeStyles.text), [resolveStyle, compositeStyles.text]);
+  const viewStyle = useMemo(
+    () => resolveStyle<ViewStyle>(compositeStyles.container),
+    [resolveStyle, compositeStyles.container],
+  );
+  const textStyle = useMemo(
+    () => resolveStyle<TextStyle>(compositeStyles.text),
+    [resolveStyle, compositeStyles.text],
+  );
 
   // Memoize child view
-  const ChildView = useMemo(() => (
-    <>
-      {cloneElemWithDefaultColors({
-        element: startElement,
-        backgroundColor: viewStyle?.backgroundColor,
-        color: textStyle?.color,
-      })}
-      {!text || typeof text === 'string' ? (
-        <Typography.Body2 style={compositeStyles.text}>{text}</Typography.Body2>
-      ) : (
-        text
-      )}
-      {cloneElemWithDefaultColors({
-        element: endElement,
-        backgroundColor: viewStyle?.backgroundColor,
-        color: textStyle?.color,
-      })}
-    </>
-  ), [startElement, endElement, text, compositeStyles.text, viewStyle?.backgroundColor, textStyle?.color]);
+  const ChildView = useMemo(
+    () => (
+      <>
+        {cloneElemWithDefaultColors({
+          element: startElement,
+          backgroundColor: viewStyle?.backgroundColor,
+          color: textStyle?.color,
+        })}
+        {!text || typeof text === 'string' ? (
+          <Typography.Body2 style={compositeStyles.text}>
+            {text}
+          </Typography.Body2>
+        ) : (
+          text
+        )}
+        {cloneElemWithDefaultColors({
+          element: endElement,
+          backgroundColor: viewStyle?.backgroundColor,
+          color: textStyle?.color,
+        })}
+      </>
+    ),
+    [
+      startElement,
+      endElement,
+      text,
+      compositeStyles.text,
+      viewStyle?.backgroundColor,
+      textStyle?.color,
+    ],
+  );
 
   // Memoize container renderer
   const renderContainer = useCallback(
@@ -318,6 +357,10 @@ export function Button({
               background-color: transparent;
             `,
           innerDisabled && compositeStyles.disabled,
+          !!borderRadius &&
+            css`
+              border-radius: ${borderRadius + 'px'};
+            `,
         ]}
         testID={loading ? 'loading-view' : 'button-container'}
         type={type}
@@ -341,20 +384,26 @@ export function Button({
   );
 
   // Memoize press handler
-  const handlePress = useCallback((e: any) => {
-    onPress?.(e);
-    if (hapticFeedback) {
-      Haptics.impactAsync(hapticFeedback);
-    }
-  }, [onPress, hapticFeedback]);
+  const handlePress = useCallback(
+    (e: any) => {
+      onPress?.(e);
+      if (hapticFeedback) {
+        Haptics.impactAsync(hapticFeedback);
+      }
+    },
+    [onPress, hapticFeedback],
+  );
 
   // Memoize button styles
-  const buttonStyles = useMemo(() => [
-    style,
-    css`
-      border-radius: ${borderRadius + 'px'};
-    `,
-  ], [style, borderRadius]);
+  const buttonStyles = useMemo(
+    () => [
+      style,
+      css`
+        border-radius: ${borderRadius + 'px'};
+      `,
+    ],
+    [style, borderRadius],
+  );
 
   return (
     <TouchableHighlight

package/components/uis/Card/Card.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @name Card
+ *
+ * See the style guide: https://github.com/hyochan/style-guide/blob/main/docs/REACT.md
+ */
+import React from 'react';
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import { useTheme } from '../../../providers/ThemeProvider';
+export default function Card({ testID = 'card-container', children, elevation = 2, borderRadius = 8, padding = 16, margin = 0, backgroundColor, style, styles, onPress, }) {
+    const { theme } = useTheme();
+    const shadowStyle = React.useMemo(() => ({
+        elevation: elevation,
+        shadowOffset: {
+            width: 0,
+            height: elevation / 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: elevation,
+        shadowColor: theme.text.basic,
+    }), [elevation, theme.text.basic]);
+    const containerStyle = React.useMemo(() => [
+        {
+            backgroundColor: backgroundColor || theme.bg.paper,
+            borderRadius: borderRadius,
+            padding: padding,
+            margin: margin,
+        },
+        shadowStyle,
+        style,
+        styles?.container,
+    ], [backgroundColor, theme.bg.paper, borderRadius, padding, margin, shadowStyle, style, styles?.container]);
+    if (onPress) {
+        return (_jsx(TouchableContainer, { testID: testID, style: containerStyle, onPress: onPress, activeOpacity: 0.8, children: _jsx(View, { style: styles?.content, children: children }) }));
+    }
+    return (_jsx(Container, { testID: testID, style: containerStyle, children: _jsx(View, { style: styles?.content, children: children }) }));
+}
+const Container = styled.View `
+  background-color: ${({ theme }) => theme.bg.paper};
+  border-radius: 8px;
+`;
+const TouchableContainer = styled.TouchableOpacity `
+  background-color: ${({ theme }) => theme.bg.paper};
+  border-radius: 8px;
+`;
+export { Card };

package/components/uis/Card/Card.test.tsx

@@ -0,0 +1,146 @@
+import '@testing-library/jest-native/extend-expect';
+
+import React from 'react';
+import {Text} from 'react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {fireEvent, render} from '@testing-library/react-native';
+
+import {createComponent} from '../../../../test/testUtils';
+import {Card} from './Card';
+import type {CardProps} from './Card';
+import type {ThemeType} from '../../../providers/ThemeProvider';
+
+let testingLib: RenderAPI;
+
+const Component = ({
+  props,
+  themeType,
+}: {
+  props?: CardProps;
+  themeType?: ThemeType;
+}): React.JSX.Element =>
+  createComponent(
+    <Card {...props}>
+      <Text>Test Content</Text>
+    </Card>,
+    themeType,
+  );
+
+describe('[Card]', () => {
+  it('should render without crashing', () => {
+    testingLib = render(Component({}));
+
+    const json = testingLib.toJSON();
+    expect(json).toBeTruthy();
+  });
+
+  it('should render with default props', () => {
+    testingLib = render(Component({}));
+
+    const cardContainer = testingLib.getByTestId('card-container');
+    expect(cardContainer).toBeTruthy();
+  });
+
+  it('should render children content', () => {
+    testingLib = render(Component({}));
+
+    expect(testingLib.getByText('Test Content')).toBeTruthy();
+  });
+
+  it('should handle onPress when provided', () => {
+    const mockOnPress = jest.fn();
+    testingLib = render(Component({props: {onPress: mockOnPress}}));
+
+    const cardContainer = testingLib.getByTestId('card-container');
+    fireEvent.press(cardContainer);
+
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should apply custom testID', () => {
+    const customTestID = 'custom-card';
+    testingLib = render(Component({props: {testID: customTestID}}));
+
+    expect(testingLib.getByTestId(customTestID)).toBeTruthy();
+  });
+
+  it('should apply custom elevation', () => {
+    testingLib = render(Component({props: {elevation: 5}}));
+
+    const cardContainer = testingLib.getByTestId('card-container');
+    expect(cardContainer).toBeTruthy();
+  });
+
+  it('should apply custom border radius', () => {
+    testingLib = render(Component({props: {borderRadius: 12}}));
+
+    const cardContainer = testingLib.getByTestId('card-container');
+    expect(cardContainer).toBeTruthy();
+  });
+
+  it('should apply custom padding', () => {
+    testingLib = render(Component({props: {padding: 24}}));
+
+    const cardContainer = testingLib.getByTestId('card-container');
+    expect(cardContainer).toBeTruthy();
+  });
+
+  it('should apply custom margin', () => {
+    testingLib = render(Component({props: {margin: 16}}));
+
+    const cardContainer = testingLib.getByTestId('card-container');
+    expect(cardContainer).toBeTruthy();
+  });
+
+  it('should apply custom background color', () => {
+    testingLib = render(Component({props: {backgroundColor: '#ff0000'}}));
+
+    const cardContainer = testingLib.getByTestId('card-container');
+    expect(cardContainer).toBeTruthy();
+  });
+
+  describe('Themes', () => {
+    it('should render correctly with light theme', () => {
+      testingLib = render(Component({themeType: 'light'}));
+
+      const cardContainer = testingLib.getByTestId('card-container');
+      expect(cardContainer).toBeTruthy();
+    });
+
+    it('should render correctly with dark theme', () => {
+      testingLib = render(Component({themeType: 'dark'}));
+
+      const cardContainer = testingLib.getByTestId('card-container');
+      expect(cardContainer).toBeTruthy();
+    });
+  });
+
+  describe('Custom Styles', () => {
+    it('should apply custom container styles', () => {
+      const customStyles = {
+        container: {
+          borderWidth: 2,
+          borderColor: '#000',
+        },
+      };
+
+      testingLib = render(Component({props: {styles: customStyles}}));
+
+      const cardContainer = testingLib.getByTestId('card-container');
+      expect(cardContainer).toBeTruthy();
+    });
+
+    it('should apply custom content styles', () => {
+      const customStyles = {
+        content: {
+          alignItems: 'center' as const,
+        },
+      };
+
+      testingLib = render(Component({props: {styles: customStyles}}));
+
+      const cardContainer = testingLib.getByTestId('card-container');
+      expect(cardContainer).toBeTruthy();
+    });
+  });
+});

package/components/uis/Card/Card.tsx

@@ -0,0 +1,103 @@
+/**
+ * @name Card
+ *
+ * See the style guide: https://github.com/hyochan/style-guide/blob/main/docs/REACT.md
+ */
+import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import styled, {css} from '@emotion/native';
+
+import {useTheme} from '../../../providers/ThemeProvider';
+import type {CpkTheme} from '../../../utils/theme';
+
+type Styles = {
+  container?: StyleProp<ViewStyle>;
+  content?: StyleProp<ViewStyle>;
+};
+
+export type CardProps = {
+  testID?: string;
+  children?: React.ReactNode;
+  elevation?: number;
+  borderRadius?: number;
+  padding?: number;
+  margin?: number;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  styles?: Styles;
+  onPress?: () => void;
+};
+
+export default function Card({
+  testID = 'card-container',
+  children,
+  elevation = 2,
+  borderRadius = 8,
+  padding = 16,
+  margin = 0,
+  backgroundColor,
+  style,
+  styles,
+  onPress,
+}: CardProps): JSX.Element {
+  const {theme} = useTheme();
+
+  const shadowStyle = React.useMemo(() => ({
+    elevation: elevation,
+    shadowOffset: {
+      width: 0,
+      height: elevation / 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: elevation,
+    shadowColor: theme.text.basic,
+  }), [elevation, theme.text.basic]);
+
+  const containerStyle = React.useMemo(() => [
+    {
+      backgroundColor: backgroundColor || theme.bg.paper,
+      borderRadius: borderRadius,
+      padding: padding,
+      margin: margin,
+    },
+    shadowStyle,
+    style,
+    styles?.container,
+  ], [backgroundColor, theme.bg.paper, borderRadius, padding, margin, shadowStyle, style, styles?.container]);
+
+  if (onPress) {
+    return (
+      <TouchableContainer
+        testID={testID}
+        style={containerStyle}
+        onPress={onPress}
+        activeOpacity={0.8}
+      >
+        <View style={styles?.content}>
+          {children}
+        </View>
+      </TouchableContainer>
+    );
+  }
+
+  return (
+    <Container testID={testID} style={containerStyle}>
+      <View style={styles?.content}>
+        {children}
+      </View>
+    </Container>
+  );
+}
+
+const Container = styled.View`
+  background-color: ${({theme}: {theme: CpkTheme}) => theme.bg.paper};
+  border-radius: 8px;
+`;
+
+const TouchableContainer = styled.TouchableOpacity`
+  background-color: ${({theme}: {theme: CpkTheme}) => theme.bg.paper};
+  border-radius: 8px;
+`;
+
+export {Card};

package/index.js

@@ -8,6 +8,7 @@ export * from './providers';
 // UIs
 export * from './components/uis/Accordion/Accordion';
 export * from './components/uis/Button/Button';
+export * from './components/uis/Card/Card';
 export * from './components/uis/Checkbox/Checkbox';
 export * from './components/uis/CustomPressable/CustomPressable';
 export * from './components/uis/EditText/EditText';

package/index.tsx

@@ -11,6 +11,7 @@ export * from './providers';
 // UIs
 export * from './components/uis/Accordion/Accordion';
 export * from './components/uis/Button/Button';
+export * from './components/uis/Card/Card';
 export * from './components/uis/Checkbox/Checkbox';
 export * from './components/uis/CustomPressable/CustomPressable';
 export * from './components/uis/EditText/EditText';

package/package.json

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