cpk-ui 0.0.1

package/components/uis/IconButton/IconButton.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Platform, TouchableHighlight, View } from 'react-native';
+import { useHover } from 'react-native-web-hooks';
+import { css } from '@emotion/native';
+import { Icon } from '../Icon/Icon';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator';
+import { getTheme } from '../../../utils/theme';
+import { useTheme } from '../../../providers/ThemeProvider';
+export const ButtonStyles = ({ theme, type = 'solid', color = 'primary', loading, disabled, }) => {
+    theme = getTheme(theme);
+    let backgroundColor = theme.button[color].bg;
+    let borderColor = theme.button[color].bg;
+    let iconColor = theme.button[color].bg;
+    if (disabled) {
+        backgroundColor = theme.button.disabled.bg;
+        borderColor = theme.button.disabled.text;
+        iconColor = theme.button.disabled.text;
+    }
+    if (['text', 'outlined'].includes(type)) {
+        backgroundColor = theme.bg.basic;
+    }
+    if (type === 'solid' || color === 'light') {
+        iconColor = theme.button[color].text;
+    }
+    return {
+        backgroundColor,
+        borderColor,
+        borderWidth: type === 'outlined' ? 1 : 0,
+        iconColor,
+        disabledBackgroundColor: type === 'solid' && !loading ? theme.button.disabled.bg : theme.bg.basic,
+        disabledBorderColor: theme.bg.disabled,
+        disabledTextColor: theme.button.disabled.text,
+    };
+};
+export function IconButton({ testID, type = 'solid', color = 'primary', size = 'medium', disabled, loading = false, loadingElement, icon, iconElement, style, styles, onPress, activeOpacity = 0.95, touchableHighlightProps, }) {
+    const ref = useRef(null);
+    const hovered = useHover(ref);
+    const { theme } = useTheme();
+    const { backgroundColor, borderColor, borderWidth, iconColor, disabledBackgroundColor, disabledBorderColor, } = ButtonStyles({
+        theme,
+        type,
+        color,
+        loading,
+        disabled,
+    });
+    const iconSize = size === 'large'
+        ? 32
+        : size === 'medium'
+            ? 24
+            : size === 'small'
+                ? 16
+                : size;
+    const borderWidthStr = `${borderWidth + 'px'}`;
+    const borderRadiusStr = `99px`;
+    const compositeStyles = {
+        container: [
+            css `
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+        border-width: ${borderWidthStr};
+        padding: 12px;
+      `,
+            styles?.container,
+        ],
+        icon: [
+            css `
+        color: ${iconColor};
+      `,
+            styles?.icon,
+        ],
+        disabled: [
+            css `
+        background-color: ${disabledBackgroundColor};
+        border-color: ${disabledBorderColor};
+      `,
+            styles?.disabled,
+        ],
+        hovered: [
+            {
+                shadowColor: theme.text.basic,
+                shadowOpacity: 0.24,
+                shadowRadius: 16,
+                elevation: 10,
+            },
+            styles?.hovered,
+        ],
+    };
+    return (_jsx(View, { style: [
+            css `
+          flex-direction: row;
+          border-radius: ${borderRadiusStr};
+        `,
+            style,
+        ], children: _jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 50, disabled: disabled || loading, onPress: onPress, ref: Platform.select({
+                web: ref,
+                default: undefined,
+            }), style: css `
+          border-radius: ${borderRadiusStr};
+        `, testID: testID, underlayColor: theme.role.underlay, ...touchableHighlightProps, children: _jsx(View, { style: [
+                    css `
+              padding: 4px;
+              border-radius: ${borderRadiusStr};
+
+              flex-direction: row;
+              justify-content: center;
+              align-items: center;
+            `,
+                    compositeStyles.container,
+                    hovered && !disabled && compositeStyles.hovered,
+                    disabled && compositeStyles.disabled,
+                ], testID: loading ? 'loading-view' : 'button-container', children: loading
+                    ? loadingElement || (_jsx(LoadingIndicator, { color: theme.text.disabled, size: "small", style: css `
+                    justify-content: center;
+                    align-items: center;
+                    height: ${iconSize + 'px'};
+                    width: ${iconSize + 'px'};
+                  ` }))
+                    : iconElement || (_jsx(Icon, { color: iconColor, name: icon || 'QuestBoxFill', size: iconSize, style: compositeStyles?.icon })) }) }) }));
+}

package/components/uis/IconButton/IconButton.test.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import type {RenderAPI} from '@testing-library/react-native';
+import {render} from '@testing-library/react-native';
+
+import {createComponent} from '../../../../test/testUtils';
+import type {IconButtonProps} from './IconButton';
+import {IconButton} from './IconButton';
+
+let testingLib: RenderAPI;
+
+jest.mock('react-native-web-hooks', () => ({
+  useHover: () => true,
+}));
+
+const Component = (props?: IconButtonProps): JSX.Element =>
+  createComponent(<IconButton {...props} />);
+
+describe('[IconButton]', () => {
+  it('should render without crashing', () => {
+    testingLib = render(Component());
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should render `outlined` button', () => {
+    testingLib = render(
+      Component({
+        type: 'outlined',
+      }),
+    );
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  describe('loading', () => {
+    it('should render `loading` button', () => {
+      testingLib = render(
+        Component({
+          loading: true,
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+
+    it('should render `disabled` button', () => {
+      testingLib = render(
+        Component({
+          loading: true,
+          disabled: true,
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+  });
+
+  describe('size', () => {
+    it('should renders large size', () => {
+      testingLib = render(
+        Component({
+          size: 'large',
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+
+    it('should renders small size', () => {
+      testingLib = render(
+        Component({
+          size: 'small',
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+  });
+
+  describe('type', () => {
+    it('should render color==="info"', () => {
+      testingLib = render(
+        Component({
+          color: 'info',
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+
+    it('should renders primary color', () => {
+      testingLib = render(
+        Component({
+          color: 'primary',
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+
+    it('should renders secondary color', () => {
+      testingLib = render(
+        Component({
+          color: 'secondary',
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+
+    it('should renders danger color', () => {
+      testingLib = render(
+        Component({
+          color: 'danger',
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+
+    it('should renders warning color', () => {
+      testingLib = render(
+        Component({
+          color: 'warning',
+        }),
+      );
+
+      const json = testingLib.toJSON();
+
+      expect(json).toBeTruthy();
+    });
+  });
+
+  it('should render `disabled` button', () => {
+    testingLib = render(
+      Component({
+        disabled: true,
+      }),
+    );
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+});

package/components/uis/IconButton/IconButton.tsx

@@ -0,0 +1,252 @@
+import React, {useRef} from 'react';
+import type {StyleProp, TouchableHighlightProps, ViewStyle} from 'react-native';
+import {Platform, TouchableHighlight, View} from 'react-native';
+import {useHover} from 'react-native-web-hooks';
+import {css} from '@emotion/native';
+
+import type {IconName} from '../Icon/Icon';
+import {Icon} from '../Icon/Icon';
+import {LoadingIndicator} from '../LoadingIndicator/LoadingIndicator';
+import {CpkTheme, getTheme} from '../../../utils/theme';
+import {useTheme} from '../../../providers/ThemeProvider';
+
+type Styles = {
+  container?: StyleProp<ViewStyle>;
+  icon?: StyleProp<ViewStyle>;
+  disabled?: StyleProp<ViewStyle>;
+  hovered?: StyleProp<ViewStyle>;
+};
+
+type ButtonType = 'text' | 'solid' | 'outlined';
+
+type ButtonColorType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light';
+
+type ButtonSizeType = 'small' | 'medium' | 'large' | number;
+
+export const ButtonStyles = ({
+  theme,
+  type = 'solid',
+  color = 'primary',
+  loading,
+  disabled,
+}: {
+  theme?: CpkTheme;
+  type?: ButtonType;
+  color?: ButtonColorType;
+  disabled?: boolean;
+  loading?: boolean;
+}): {
+  padding?: number;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
+  iconColor?: string;
+  disabledBackgroundColor: string;
+  disabledBorderColor: string;
+  disabledTextColor: string;
+} => {
+  theme = getTheme(theme);
+
+  let backgroundColor = theme.button[color].bg;
+  let borderColor = theme.button[color].bg;
+  let iconColor = theme.button[color].bg;
+
+  if (disabled) {
+    backgroundColor = theme.button.disabled.bg;
+    borderColor = theme.button.disabled.text;
+    iconColor = theme.button.disabled.text;
+  }
+
+  if (['text', 'outlined'].includes(type)) {
+    backgroundColor = theme.bg.basic;
+  }
+
+  if (type === 'solid' || color === 'light') {
+    iconColor = theme.button[color].text;
+  }
+
+  return {
+    backgroundColor,
+    borderColor,
+    borderWidth: type === 'outlined' ? 1 : 0,
+    iconColor,
+    disabledBackgroundColor:
+      type === 'solid' && !loading ? theme.button.disabled.bg : theme.bg.basic,
+    disabledBorderColor: theme.bg.disabled,
+    disabledTextColor: theme.button.disabled.text,
+  };
+};
+
+export type IconButtonProps = {
+  testID?: string;
+  type?: ButtonType;
+  color?: ButtonColorType;
+  size?: ButtonSizeType | number;
+  disabled?: boolean;
+  loading?: boolean;
+  loadingElement?: JSX.Element;
+  icon?: IconName;
+  iconElement?: JSX.Element;
+  style?: StyleProp<Omit<ViewStyle, 'borderRadius' | 'padding'>>;
+  styles?: Styles;
+  onPress?: TouchableHighlightProps['onPress'];
+  activeOpacity?: number;
+  touchableHighlightProps?: Omit<TouchableHighlightProps, 'onPress' | 'style'>;
+};
+
+export function IconButton({
+  testID,
+  type = 'solid',
+  color = 'primary',
+  size = 'medium',
+  disabled,
+  loading = false,
+  loadingElement,
+  icon,
+  iconElement,
+  style,
+  styles,
+  onPress,
+  activeOpacity = 0.95,
+  touchableHighlightProps,
+}: IconButtonProps): JSX.Element {
+  const ref = useRef<React.ElementRef<typeof TouchableHighlight>>(null);
+  const hovered = useHover(ref);
+  const {theme} = useTheme();
+
+  const {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    iconColor,
+    disabledBackgroundColor,
+    disabledBorderColor,
+  } = ButtonStyles({
+    theme,
+    type,
+    color,
+    loading,
+    disabled,
+  });
+
+  const iconSize =
+    size === 'large'
+      ? 32
+      : size === 'medium'
+        ? 24
+        : size === 'small'
+          ? 16
+          : size;
+
+  const borderWidthStr = `${borderWidth + 'px'}`;
+  const borderRadiusStr = `99px`;
+
+  const compositeStyles: Styles = {
+    container: [
+      css`
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+        border-width: ${borderWidthStr};
+        padding: 12px;
+      `,
+      styles?.container,
+    ],
+    icon: [
+      css`
+        color: ${iconColor};
+      `,
+      styles?.icon,
+    ],
+    disabled: [
+      css`
+        background-color: ${disabledBackgroundColor};
+        border-color: ${disabledBorderColor};
+      `,
+      styles?.disabled,
+    ],
+    hovered: [
+      {
+        shadowColor: theme.text.basic,
+        shadowOpacity: 0.24,
+        shadowRadius: 16,
+        elevation: 10,
+      },
+      styles?.hovered,
+    ],
+  };
+
+  return (
+    <View
+      style={[
+        css`
+          flex-direction: row;
+          border-radius: ${borderRadiusStr};
+        `,
+        style,
+      ]}
+    >
+      <TouchableHighlight
+        activeOpacity={activeOpacity}
+        delayPressIn={50}
+        disabled={disabled || loading}
+        onPress={onPress}
+        ref={Platform.select({
+          web: ref,
+          default: undefined,
+        })}
+        style={css`
+          border-radius: ${borderRadiusStr};
+        `}
+        testID={testID}
+        underlayColor={theme.role.underlay}
+        {...touchableHighlightProps}
+      >
+        <View
+          style={[
+            css`
+              padding: 4px;
+              border-radius: ${borderRadiusStr};
+
+              flex-direction: row;
+              justify-content: center;
+              align-items: center;
+            `,
+            compositeStyles.container,
+            hovered && !disabled && compositeStyles.hovered,
+            disabled && compositeStyles.disabled,
+          ]}
+          testID={loading ? 'loading-view' : 'button-container'}
+        >
+          {loading
+            ? loadingElement || (
+                <LoadingIndicator
+                  color={theme.text.disabled}
+                  size="small"
+                  style={css`
+                    justify-content: center;
+                    align-items: center;
+                    height: ${iconSize + 'px'};
+                    width: ${iconSize + 'px'};
+                  `}
+                />
+              )
+            : iconElement || (
+                <Icon
+                  color={iconColor}
+                  name={icon || 'QuestBoxFill'}
+                  size={iconSize}
+                  style={compositeStyles?.icon}
+                />
+              )}
+        </View>
+      </TouchableHighlight>
+    </View>
+  );
+}

package/components/uis/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActivityIndicator, Image } from "react-native";
+import styled from "@emotion/native";
+import { useTheme } from "../../../providers/ThemeProvider";
+const Container = styled.View ``;
+export function LoadingIndicator({ customElement, style, styles, size = "large", color, imgSource, }) {
+    const { theme } = useTheme();
+    const handleImgSourceType = (src) => {
+        if (typeof src === "string") {
+            return {
+                uri: src,
+            };
+        }
+        return src;
+    };
+    return (_jsx(Container, { style: style, children: customElement ? (typeof customElement === "function" ? (customElement()) : (customElement)) : !imgSource ? (_jsx(ActivityIndicator, { color: color || theme.role.secondary, size: size, style: styles?.activityIndicator })) : (_jsx(Image, { source: handleImgSourceType(imgSource), style: [
+                size === "large"
+                    ? { width: 50, height: 50 }
+                    : size === "small"
+                        ? { width: 30, height: 30 }
+                        : undefined,
+                styles?.image,
+            ] })) }));
+}

package/components/uis/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import type {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { ActivityIndicator, Image } from "react-native";
+import styled from "@emotion/native";
+import { useTheme } from "../../../providers/ThemeProvider";
+
+type Styles = {
+  activityIndicator?: ViewStyle;
+  image?: ImageStyle;
+};
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  styles?: Styles;
+  color?: string;
+  size?: ActivityIndicator["props"]["size"];
+  imgSource?: string | ImageSourcePropType;
+  customElement?: JSX.Element | (() => JSX.Element);
+};
+
+const Container = styled.View``;
+
+export function LoadingIndicator({
+  customElement,
+  style,
+  styles,
+  size = "large",
+  color,
+  imgSource,
+}: Props): JSX.Element {
+  const { theme } = useTheme();
+
+  const handleImgSourceType = (
+    src: string | ImageSourcePropType
+  ): ImageSourcePropType => {
+    if (typeof src === "string") {
+      return {
+        uri: src,
+      };
+    }
+
+    return src;
+  };
+
+  return (
+    <Container style={style}>
+      {customElement ? (
+        typeof customElement === "function" ? (
+          customElement()
+        ) : (
+          customElement
+        )
+      ) : !imgSource ? (
+        <ActivityIndicator
+          color={color || theme.role.secondary}
+          size={size}
+          style={styles?.activityIndicator}
+        />
+      ) : (
+        <Image
+          source={handleImgSourceType(imgSource)}
+          style={[
+            size === "large"
+              ? { width: 50, height: 50 }
+              : size === "small"
+              ? { width: 30, height: 30 }
+              : undefined,
+            styles?.image,
+          ]}
+        />
+      )}
+    </Container>
+  );
+}

package/components/uis/Rating/Rating.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// React import is needed for expo-web
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import styled, { css } from '@emotion/native';
+import { Icon } from '../Icon/Icon';
+const Container = styled.View `
+  flex-direction: row;
+`;
+const StarContainer = styled.View `
+  padding: 1px;
+
+  flex-direction: row;
+`;
+export function Rating({ testID, style, styles, initialRating = 0, size = 24, iconType = 'star', onRatingUpdate, direction = 'horizontal', allowHalfRating = true, disabled = false, color, }) {
+    const [rating, setRating] = useState(initialRating);
+    const iconPrefix = iconType === 'star' ? 'Star' : 'QuestBox';
+    const handlePress = (newRating, halfPressed) => {
+        const convertedRating = newRating + (!halfPressed ? 0.5 : 0);
+        setRating(convertedRating);
+        if (onRatingUpdate) {
+            onRatingUpdate(convertedRating);
+        }
+    };
+    const renderStarIcon = ({ key, position, }) => {
+        const filled = rating >= position + (allowHalfRating ? 0.5 : 0);
+        const iconName = filled ? `${iconPrefix}Fill` : `${iconPrefix}`;
+        const halfFilled = rating >= position && rating < position + (allowHalfRating ? 0.5 : 0);
+        return (_jsxs(StarContainer, { style: [
+                css `
+            width: ${size + 'px'};
+          `,
+                styles?.starContainer,
+            ], testID: testID, children: [halfFilled && allowHalfRating ? (_jsxs(View, { style: { position: 'absolute' }, children: [_jsx(Icon, { color: color, name: `${iconPrefix}`, size: size, style: { position: 'absolute' } }), _jsx(Icon, { color: color, name: `${iconPrefix}HalfFill`, size: size })] })) : (_jsx(Icon, { color: color, name: iconName, size: size, style: { position: 'absolute' } })), _jsx(Pressable, { accessibilityRole: "button", disabled: disabled, onPress: () => handlePress(position, true), children: _jsx(View, { style: {
+                            width: size / 2,
+                            height: size,
+                            backgroundColor: 'transparent',
+                        } }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: disabled, onPress: () => handlePress(position), children: _jsx(View, { style: {
+                            width: size / 2,
+                            height: size,
+                            backgroundColor: 'transparent',
+                        } }) })] }, key));
+    };
+    return (_jsx(Container, { style: [
+            css `
+          flex-direction: ${direction === 'horizontal' ? 'row' : 'column'};
+        `,
+            style,
+        ], children: [...Array(5)].map((_, index) => {
+            const position = index + (allowHalfRating ? 0.5 : 1);
+            return renderStarIcon({ key: `${_}-${index}`, position });
+        }) }));
+}