cpk-ui 0.0.1

package/hooks/useDebouncedColorScheme.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { useColorScheme } from "react-native";
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+/* ?
+ * Strangely enough, when useColorScheme() returns from the background state, it first returns a different color value and later returns the original color value.
+ * Due to this phenomenon, there's a momentary flickering effect on the screen.
+ * Therefore, to prevent this, we use useDebounce to delay the return of the color value until after a certain amount of time has passed.
+ */
+export function useDebouncedColorScheme(delay = 300) {
+    const colorScheme = useColorScheme();
+    return useDebounce(colorScheme, delay);
+}

package/hooks/useDebouncedColorScheme.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import type { ColorSchemeName } from "react-native";
+import { useColorScheme } from "react-native";
+
+function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+/* ?
+ * Strangely enough, when useColorScheme() returns from the background state, it first returns a different color value and later returns the original color value.
+ * Due to this phenomenon, there's a momentary flickering effect on the screen.
+ * Therefore, to prevent this, we use useDebounce to delay the return of the color value until after a certain amount of time has passed.
+ */
+export function useDebouncedColorScheme(
+  delay: number = 300
+): "light" | "dark" | null | undefined {
+  const colorScheme = useColorScheme();
+
+  return useDebounce<ColorSchemeName>(colorScheme, delay);
+}

package/index.js

@@ -0,0 +1,16 @@
+// Modals
+export * from './components/modals/AlertDialog/AlertDialog';
+export * from './components/modals/Snackbar/Snackbar';
+// Providers
+export * from './providers';
+// UIs
+export * from './components/uis/Accordion/Accordion';
+export * from './components/uis/Button/Button';
+export * from './components/uis/Checkbox/Checkbox';
+export * from './components/uis/Icon/Icon';
+export * from './components/uis/IconButton/IconButton';
+export * from './components/uis/LoadingIndicator/LoadingIndicator';
+export * from './components/uis/Rating/Rating';
+export * from './components/uis/StatusbarBrightness/StatusBarBrightness';
+export * from './components/uis/SwitchToggle/SwitchToggle';
+export * from './components/uis/Typography/Typography';

package/index.tsx

@@ -0,0 +1,18 @@
+// Modals
+export * from './components/modals/AlertDialog/AlertDialog';
+export * from './components/modals/Snackbar/Snackbar';
+
+// Providers
+export * from './providers';
+
+// UIs
+export * from './components/uis/Accordion/Accordion';
+export * from './components/uis/Button/Button';
+export * from './components/uis/Checkbox/Checkbox';
+export * from './components/uis/Icon/Icon';
+export * from './components/uis/IconButton/IconButton';
+export * from './components/uis/LoadingIndicator/LoadingIndicator';
+export * from './components/uis/Rating/Rating';
+export * from './components/uis/StatusbarBrightness/StatusBarBrightness';
+export * from './components/uis/SwitchToggle/SwitchToggle';
+export * from './components/uis/Typography/Typography';

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "cpk-ui",
+  "version": "0.0.1",
+  "main": "index",
+  "react-native": "index",
+  "module": "index",
+  "source": "index",
+  "types": "index.d.ts",
+  "author": "hyochan",
+  "license": "MIT",
+  "scripts": {
+    "pack": "yarn pack",
+    "publish:next": "npm publish <package>.tgz --tag next"
+  },
+  "bugs": {
+    "url": "https://github.com/crossplatformkorea/CPK-UI/issues"
+  },
+  "homepage": "https://github.com/crossplatformkorea/CPK-UI#readme",
+  "peerDependencies": {
+    "@emotion/native": ">=11.0.0",
+    "@emotion/react": ">=11.0.0",
+    "react": ">=16.9",
+    "react-native": ">=0.58",
+    "react-native-gesture-handler": "*",
+    "@expo/vector-icons": "*"
+  },
+  "dependencies": {
+    "hyochan-welcome": "^1.0.1",
+    "react-native-web-hooks": "^3.0.2",
+    "react-responsive": "^10.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/providers/ThemeProvider.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@expo/match-media";
+import { useEffect, useState } from "react";
+import { useMediaQuery } from "react-responsive";
+import { ThemeProvider as EmotionThemeProvider, withTheme, } from "@emotion/react";
+import { dark, light } from "../utils/colors";
+import { useDebouncedColorScheme } from "../hooks/useDebouncedColorScheme";
+import createCtx from "../utils/createCtx";
+const [useCtx, CpkProvider] = createCtx();
+const genTheme = (type, themeParam) => {
+    const theme = type === "light" ? light : dark;
+    return {
+        ...themeParam?.[type],
+        bg: {
+            ...theme.bg,
+            ...(themeParam?.[type]?.bg || {}),
+        },
+        role: {
+            ...theme.role,
+            ...(themeParam?.[type]?.role || {}),
+        },
+        text: {
+            ...theme.text,
+            ...(themeParam?.[type]?.text || {}),
+        },
+        button: {
+            ...theme.button,
+            primary: {
+                ...theme.button.primary,
+                ...(themeParam?.[type]?.button?.primary || {}),
+            },
+            secondary: {
+                ...theme.button.secondary,
+                ...(themeParam?.[type]?.button?.secondary || {}),
+            },
+            success: {
+                ...theme.button.success,
+                ...(themeParam?.[type]?.button?.success || {}),
+            },
+            warning: {
+                ...theme.button.warning,
+                ...(themeParam?.[type]?.button?.warning || {}),
+            },
+            danger: {
+                ...theme.button.danger,
+                ...(themeParam?.[type]?.button?.danger || {}),
+            },
+            info: {
+                ...theme.button.info,
+                ...(themeParam?.[type]?.button?.info || {}),
+            },
+            light: {
+                ...theme.button.light,
+                ...(themeParam?.[type]?.button?.light || {}),
+            },
+            disabled: {
+                ...theme.button.disabled,
+                ...(themeParam?.[type]?.button?.disabled || {}),
+            },
+        },
+    };
+};
+export function ThemeProvider({ children, initialThemeType, customTheme = {}, responsiveDesignMode = "mobile-first", }) {
+    const isPortrait = useMediaQuery({ orientation: "portrait" });
+    const isMobile = useMediaQuery(responsiveDesignMode === "mobile-first"
+        ? { minWidth: 0 }
+        : { minWidth: 0, maxWidth: 767 });
+    const isTablet = useMediaQuery(responsiveDesignMode === "mobile-first"
+        ? { minWidth: 767 }
+        : { minWidth: 768, maxWidth: 992 });
+    const isDesktop = useMediaQuery(responsiveDesignMode === "mobile-first"
+        ? { minWidth: 992 }
+        : { minWidth: 0 });
+    const colorScheme = useDebouncedColorScheme();
+    const [themeType, setThemeType] = useState(initialThemeType ?? colorScheme);
+    useEffect(() => {
+        if (!initialThemeType) {
+            setThemeType(colorScheme);
+        }
+    }, [colorScheme, initialThemeType]);
+    const changeThemeType = (themeTypeProp) => {
+        if (!themeTypeProp) {
+            setThemeType(themeType === "light" ? "dark" : "light");
+            return;
+        }
+        setThemeType(themeTypeProp);
+    };
+    const theme = {
+        light: genTheme("light", customTheme),
+        dark: genTheme("dark", customTheme),
+    }[themeType || "light"];
+    const media = {
+        isPortrait,
+        isMobile,
+        isTablet,
+        isDesktop,
+    };
+    return (_jsx(CpkProvider, { value: {
+            media,
+            themeType,
+            changeThemeType,
+            // @ts-ignore
+            theme,
+        }, children: _jsx(EmotionThemeProvider, { theme: { ...theme, ...media }, children: children }) }));
+}
+export { useCtx as useTheme, withTheme };

package/providers/ThemeProvider.tsx

@@ -0,0 +1,180 @@
+import "@expo/match-media";
+
+import { useEffect, useState } from "react";
+import type { ColorSchemeName } from "react-native";
+import { useMediaQuery } from "react-responsive";
+import type { Theme } from "@emotion/react";
+import {
+  ThemeProvider as EmotionThemeProvider,
+  withTheme,
+} from "@emotion/react";
+
+import type { CpkTheme, ThemeParam } from "../utils/theme";
+import { dark, light } from "../utils/colors";
+import { useDebouncedColorScheme } from "../hooks/useDebouncedColorScheme";
+import createCtx from "../utils/createCtx";
+
+type ResponsiveDesignMode = "mobile-first" | "desktop-first";
+export type ThemeType = "light" | "dark";
+
+export type ThemeContext = {
+  themeType: ColorSchemeName;
+  media: {
+    isPortrait: boolean;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+  };
+  theme: Theme & CpkTheme;
+  changeThemeType: (themeType?: ColorSchemeName) => void;
+};
+
+const [useCtx, CpkProvider] = createCtx<ThemeContext>();
+
+export type ThemeProps = {
+  children?: JSX.Element;
+  initialThemeType?: ThemeType;
+  customTheme?: ThemeParam;
+  /*
+    @description
+    default: mobile-first
+    - mobile-first: mobile first responsive design mode
+    - desktop-first: desktop first responsive design mode
+  */
+  responsiveDesignMode?: ResponsiveDesignMode;
+};
+
+const genTheme = (type: ThemeType, themeParam: ThemeParam): any => {
+  const theme = type === "light" ? light : dark;
+
+  return {
+    ...themeParam?.[type],
+    bg: {
+      ...theme.bg,
+      ...(themeParam?.[type]?.bg || {}),
+    },
+    role: {
+      ...theme.role,
+      ...(themeParam?.[type]?.role || {}),
+    },
+    text: {
+      ...theme.text,
+      ...(themeParam?.[type]?.text || {}),
+    },
+    button: {
+      ...theme.button,
+      primary: {
+        ...theme.button.primary,
+        ...(themeParam?.[type]?.button?.primary || {}),
+      },
+      secondary: {
+        ...theme.button.secondary,
+        ...(themeParam?.[type]?.button?.secondary || {}),
+      },
+      success: {
+        ...theme.button.success,
+        ...(themeParam?.[type]?.button?.success || {}),
+      },
+      warning: {
+        ...theme.button.warning,
+        ...(themeParam?.[type]?.button?.warning || {}),
+      },
+      danger: {
+        ...theme.button.danger,
+        ...(themeParam?.[type]?.button?.danger || {}),
+      },
+      info: {
+        ...theme.button.info,
+        ...(themeParam?.[type]?.button?.info || {}),
+      },
+      light: {
+        ...theme.button.light,
+        ...(themeParam?.[type]?.button?.light || {}),
+      },
+      disabled: {
+        ...theme.button.disabled,
+        ...(themeParam?.[type]?.button?.disabled || {}),
+      },
+    },
+  };
+};
+
+export function ThemeProvider({
+  children,
+  initialThemeType,
+  customTheme = {},
+  responsiveDesignMode = "mobile-first",
+}: ThemeProps): JSX.Element {
+  const isPortrait = useMediaQuery({ orientation: "portrait" });
+
+  const isMobile = useMediaQuery(
+    responsiveDesignMode === "mobile-first"
+      ? { minWidth: 0 }
+      : { minWidth: 0, maxWidth: 767 }
+  );
+
+  const isTablet = useMediaQuery(
+    responsiveDesignMode === "mobile-first"
+      ? { minWidth: 767 }
+      : { minWidth: 768, maxWidth: 992 }
+  );
+
+  const isDesktop = useMediaQuery(
+    responsiveDesignMode === "mobile-first"
+      ? { minWidth: 992 }
+      : { minWidth: 0 }
+  );
+
+  const colorScheme = useDebouncedColorScheme();
+  const [themeType, setThemeType] = useState(initialThemeType ?? colorScheme);
+
+  useEffect(() => {
+    if (!initialThemeType) {
+      setThemeType(colorScheme);
+    }
+  }, [colorScheme, initialThemeType]);
+
+  const changeThemeType = (themeTypeProp?: ColorSchemeName): void => {
+    if (!themeTypeProp) {
+      setThemeType(themeType === "light" ? "dark" : "light");
+
+      return;
+    }
+
+    setThemeType(themeTypeProp);
+  };
+
+  const theme: Omit<
+    CpkTheme,
+    "isPortrait" | "isMobile" | "isTablet" | "isDesktop"
+  > = {
+    light: genTheme("light", customTheme),
+    dark: genTheme("dark", customTheme),
+  }[themeType || "light"];
+
+  const media = {
+    isPortrait,
+    isMobile,
+    isTablet,
+    isDesktop,
+  };
+
+  return (
+    <CpkProvider
+      value={{
+        media,
+        themeType,
+        changeThemeType,
+        // @ts-ignore
+        theme,
+      }}
+    >
+      {/* @ts-ignore */}
+      <EmotionThemeProvider theme={{ ...theme, ...media }}>
+        {children}
+      </EmotionThemeProvider>
+    </CpkProvider>
+  );
+}
+
+export { useCtx as useTheme, withTheme };

package/providers/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { View } from 'react-native';
+import { css } from '@emotion/native';
+import { useFonts } from 'expo-font';
+import createCtx from '../utils/createCtx';
+import { ThemeProvider, useTheme, } from './ThemeProvider';
+import Snackbar from '../components/modals/Snackbar/Snackbar';
+import AlertDialog from '../components/modals/AlertDialog/AlertDialog';
+import { LoadingIndicator } from '../components/uis/LoadingIndicator/LoadingIndicator';
+const [useCtx, Provider] = createCtx();
+function AppProvider({ children }) {
+    const [assetLoaded] = useFonts({
+        cpk: require('../components/uis/Icon/cpk.ttf'),
+        'Pretendard-Bold': require('../components/uis/Icon/Pretendard-Bold.otf'),
+        Pretendard: require('../components/uis/Icon/Pretendard-Regular.otf'),
+        'Pretendard-Thin': require('../components/uis/Icon/Pretendard-Thin.otf'),
+    });
+    const themeContext = useTheme();
+    const snackbar = useRef();
+    const alertDialog = useRef();
+    /**
+     ** Snackbar
+     */
+    const snackbarContext = {
+        open: (snackbarOption) => {
+            snackbar.current && snackbar.current.open(snackbarOption);
+        },
+        close: () => {
+            snackbar.current && snackbar.current.close();
+        },
+    };
+    /**
+     ** AlertDialog
+     */
+    const alertDialogContext = {
+        open: (alertDialogOptions) => {
+            alertDialog.current && alertDialog.current.open(alertDialogOptions);
+        },
+        close: () => {
+            alertDialog.current && alertDialog.current.close();
+        },
+    };
+    return (_jsx(View, { style: css `
+        flex: 1;
+      `, children: _jsx(Provider, { value: {
+                ...themeContext,
+                assetLoaded,
+                snackbar: snackbarContext,
+                alertDialog: alertDialogContext,
+            }, children: !assetLoaded ? (_jsx(LoadingIndicator, { style: css `
+              align-self: stretch;
+              flex: 1;
+              justify-content: center;
+              background-color: ${themeContext.theme.bg.basic};
+            ` })) : (_jsxs(_Fragment, { children: [children, _jsx(Snackbar, { ref: snackbar }), _jsx(AlertDialog, { ref: alertDialog })] })) }) }));
+}
+function CpkWithThemeProvider(props) {
+    const { themeConfig } = props;
+    return (_jsx(ThemeProvider, { ...themeConfig, children: _jsx(AppProvider, { ...props }) }));
+}
+export { useCtx as useCPK, CpkWithThemeProvider as CpkProvider };

package/providers/index.tsx

@@ -0,0 +1,125 @@
+import type {MutableRefObject} from 'react';
+import {useRef} from 'react';
+import {View} from 'react-native';
+import {css} from '@emotion/native';
+import {useFonts} from 'expo-font';
+
+import createCtx from '../utils/createCtx';
+import {
+  ThemeContext,
+  ThemeProps,
+  ThemeProvider,
+  useTheme,
+} from './ThemeProvider';
+import Snackbar, {
+  SnackbarContext,
+  SnackbarOptions,
+} from '../components/modals/Snackbar/Snackbar';
+import AlertDialog, {
+  AlertDialogContext,
+} from '../components/modals/AlertDialog/AlertDialog';
+import {LoadingIndicator} from '../components/uis/LoadingIndicator/LoadingIndicator';
+
+export type ThemeType = ThemeContext['themeType'];
+export type DoobooTheme = ThemeContext['theme'];
+
+export type CpkContext = {
+  assetLoaded: boolean;
+  snackbar: SnackbarContext;
+  alertDialog: AlertDialogContext;
+} & ThemeContext;
+
+const [useCtx, Provider] = createCtx<CpkContext>();
+
+function AppProvider({children}: {children: JSX.Element}): JSX.Element {
+  const [assetLoaded] = useFonts({
+    cpk: require('../components/uis/Icon/cpk.ttf'),
+    'Pretendard-Bold': require('../components/uis/Icon/Pretendard-Bold.otf'),
+    Pretendard: require('../components/uis/Icon/Pretendard-Regular.otf'),
+    'Pretendard-Thin': require('../components/uis/Icon/Pretendard-Thin.otf'),
+  });
+
+  const themeContext = useTheme();
+
+  const snackbar =
+    useRef<SnackbarContext>() as MutableRefObject<SnackbarContext>;
+
+  const alertDialog =
+    useRef<AlertDialogContext>() as MutableRefObject<AlertDialogContext>;
+
+  /**
+   ** Snackbar
+   */
+  const snackbarContext: SnackbarContext = {
+    open: (snackbarOption): void => {
+      snackbar.current && snackbar.current.open(snackbarOption);
+    },
+    close: (): void => {
+      snackbar.current && snackbar.current.close();
+    },
+  };
+
+  /**
+   ** AlertDialog
+   */
+  const alertDialogContext: AlertDialogContext = {
+    open: (alertDialogOptions): void => {
+      alertDialog.current && alertDialog.current.open(alertDialogOptions);
+    },
+    close: (): void => {
+      alertDialog.current && alertDialog.current.close();
+    },
+  };
+
+  return (
+    <View
+      style={css`
+        flex: 1;
+      `}
+    >
+      <Provider
+        value={{
+          ...themeContext,
+          assetLoaded,
+          snackbar: snackbarContext,
+          alertDialog: alertDialogContext,
+        }}
+      >
+        {!assetLoaded ? (
+          <LoadingIndicator
+            style={css`
+              align-self: stretch;
+              flex: 1;
+              justify-content: center;
+              background-color: ${themeContext.theme.bg.basic};
+            `}
+          />
+        ) : (
+          <>
+            {children}
+            <Snackbar ref={snackbar} />
+            <AlertDialog ref={alertDialog} />
+          </>
+        )}
+      </Provider>
+    </View>
+  );
+}
+
+export type CpkProviderProps = {
+  themeConfig?: Omit<ThemeProps, 'children'>;
+  snackbarConfig?: SnackbarOptions;
+  children: JSX.Element;
+};
+
+function CpkWithThemeProvider(props: CpkProviderProps): JSX.Element {
+  const {themeConfig} = props;
+
+  return (
+    <ThemeProvider {...themeConfig}>
+      <AppProvider {...props} />
+    </ThemeProvider>
+  );
+}
+
+export {useCtx as useCPK, CpkWithThemeProvider as CpkProvider};

package/react-native.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  dependency: {
+    assets: ['components/uis/Icon'],
+  },
+};