cpk-ui 0.0.1

package/utils/colors.js

@@ -0,0 +1,124 @@
+export const light = {
+    bg: {
+        basic: "#FFFFFF",
+        paper: "#EDEDED",
+        disabled: "#BEBEBE",
+    },
+    role: {
+        primary: "#1B1B1B",
+        secondary: "#3D8BFF",
+        accent: "#6BF3C5",
+        info: "#307EF1",
+        link: "#A351F4",
+        success: "#1CD66C",
+        warning: "#E2B101",
+        danger: "#F84444",
+        border: "#CCCCCC",
+        underlay: "rgba(0, 0, 0, 0.16)",
+        underlayContrast: "rgba(0, 0, 0, 0.8)",
+    },
+    text: {
+        basic: "#000000",
+        label: "#4D4D4D",
+        placeholder: "#787878",
+        disabled: "#BEBEBE",
+        validation: "#DA0000",
+        contrast: "#FFFFFF",
+    },
+    button: {
+        primary: {
+            bg: "#1B1B1B",
+            text: "#FFFFFF",
+        },
+        secondary: {
+            bg: "#3D8BFF",
+            text: "#FFFFFF",
+        },
+        success: {
+            bg: "#1CD66C",
+            text: "#FFFFFF",
+        },
+        danger: {
+            bg: "#F84444",
+            text: "#FFFFFF",
+        },
+        warning: {
+            bg: "#E2B101",
+            text: "#FFFFFF",
+        },
+        info: {
+            bg: "#307EF1",
+            text: "#FFFFFF",
+        },
+        light: {
+            bg: "#E8E8E8",
+            text: "#232323",
+        },
+        disabled: {
+            bg: "#EDEDED",
+            text: "#BEBEBE",
+        },
+    },
+};
+export const dark = {
+    bg: {
+        basic: "#242424",
+        paper: "#1E1D1D",
+        disabled: "#474747",
+    },
+    role: {
+        primary: "#FFFFFF",
+        secondary: "#3D8BFF",
+        accent: "#6BF3C5",
+        info: "#2998FF",
+        link: "#A351F4",
+        success: "#2FFA86",
+        warning: "#F4CC3E",
+        danger: "#FF3C3C",
+        border: "#363636",
+        underlay: "rgba(255, 255, 255, 0.16)",
+        underlayContrast: "rgba(255, 255, 255, 0.8)",
+    },
+    text: {
+        basic: "#FFFFFF",
+        label: "#BEBEBE",
+        placeholder: "#909090",
+        disabled: "#4D4D4D",
+        validation: "#FF2C2C",
+        contrast: "#000000",
+    },
+    button: {
+        primary: {
+            bg: "#FFFFFF",
+            text: "#000000",
+        },
+        secondary: {
+            bg: "#3D8BFF",
+            text: "#000000",
+        },
+        success: {
+            bg: "#2FFA86",
+            text: "#000000",
+        },
+        danger: {
+            bg: "#FF3C3C",
+            text: "#000000",
+        },
+        warning: {
+            bg: "#F4CC3E",
+            text: "#000000",
+        },
+        info: {
+            bg: "#2998FF",
+            text: "#000000",
+        },
+        light: {
+            bg: "#313131",
+            text: "#EBEBEB",
+        },
+        disabled: {
+            bg: "#292929",
+            text: "#474747",
+        },
+    },
+};

package/utils/colors.ts

@@ -0,0 +1,127 @@
+export const light = {
+  bg: {
+    basic: "#FFFFFF",
+    paper: "#EDEDED",
+    disabled: "#BEBEBE",
+  },
+  role: {
+    primary: "#1B1B1B",
+    secondary: "#3D8BFF",
+    accent: "#6BF3C5",
+    info: "#307EF1",
+    link: "#A351F4",
+    success: "#1CD66C",
+    warning: "#E2B101",
+    danger: "#F84444",
+    border: "#CCCCCC",
+    underlay: "rgba(0, 0, 0, 0.16)",
+    underlayContrast: "rgba(0, 0, 0, 0.8)",
+  },
+  text: {
+    basic: "#000000",
+    label: "#4D4D4D",
+    placeholder: "#787878",
+    disabled: "#BEBEBE",
+    validation: "#DA0000",
+    contrast: "#FFFFFF",
+  },
+  button: {
+    primary: {
+      bg: "#1B1B1B",
+      text: "#FFFFFF",
+    },
+    secondary: {
+      bg: "#3D8BFF",
+      text: "#FFFFFF",
+    },
+    success: {
+      bg: "#1CD66C",
+      text: "#FFFFFF",
+    },
+    danger: {
+      bg: "#F84444",
+      text: "#FFFFFF",
+    },
+    warning: {
+      bg: "#E2B101",
+      text: "#FFFFFF",
+    },
+    info: {
+      bg: "#307EF1",
+      text: "#FFFFFF",
+    },
+    light: {
+      bg: "#E8E8E8",
+      text: "#232323",
+    },
+    disabled: {
+      bg: "#EDEDED",
+      text: "#BEBEBE",
+    },
+  },
+};
+
+export const dark: typeof light = {
+  bg: {
+    basic: "#242424",
+    paper: "#1E1D1D",
+    disabled: "#474747",
+  },
+  role: {
+    primary: "#FFFFFF",
+    secondary: "#3D8BFF",
+    accent: "#6BF3C5",
+    info: "#2998FF",
+    link: "#A351F4",
+    success: "#2FFA86",
+    warning: "#F4CC3E",
+    danger: "#FF3C3C",
+    border: "#363636",
+    underlay: "rgba(255, 255, 255, 0.16)",
+    underlayContrast: "rgba(255, 255, 255, 0.8)",
+  },
+  text: {
+    basic: "#FFFFFF",
+    label: "#BEBEBE",
+    placeholder: "#909090",
+    disabled: "#4D4D4D",
+    validation: "#FF2C2C",
+    contrast: "#000000",
+  },
+  button: {
+    primary: {
+      bg: "#FFFFFF",
+      text: "#000000",
+    },
+    secondary: {
+      bg: "#3D8BFF",
+      text: "#000000",
+    },
+    success: {
+      bg: "#2FFA86",
+      text: "#000000",
+    },
+    danger: {
+      bg: "#FF3C3C",
+      text: "#000000",
+    },
+    warning: {
+      bg: "#F4CC3E",
+      text: "#000000",
+    },
+    info: {
+      bg: "#2998FF",
+      text: "#000000",
+    },
+    light: {
+      bg: "#313131",
+      text: "#EBEBEB",
+    },
+    disabled: {
+      bg: "#292929",
+      text: "#474747",
+    },
+  },
+};
+
+export type Colors = typeof light;

package/utils/createCtx.js

@@ -0,0 +1,15 @@
+import React from "react";
+// create context with no upfront defaultValue
+// without having to do undefined check all the time
+function createCtx() {
+    const ctx = React.createContext(undefined);
+    function useCtx() {
+        const c = React.useContext(ctx);
+        if (!c) {
+            throw new Error("useTheme must be inside a ThemeProvider");
+        }
+        return c;
+    }
+    return [useCtx, ctx.Provider];
+}
+export default createCtx;

package/utils/createCtx.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+type CreateCtx<A> = readonly [
+  () => A,
+  React.ProviderExoticComponent<React.ProviderProps<A | undefined>>
+];
+
+// create context with no upfront defaultValue
+// without having to do undefined check all the time
+function createCtx<A>(): CreateCtx<A> {
+  const ctx = React.createContext<A | undefined>(undefined);
+
+  function useCtx(): A {
+    const c = React.useContext(ctx);
+
+    if (!c) {
+      throw new Error("useTheme must be inside a ThemeProvider");
+    }
+
+    return c;
+  }
+
+  return [useCtx, ctx.Provider] as const;
+}
+
+export default createCtx;

package/utils/guards.js

@@ -0,0 +1,44 @@
+import React, { cloneElement } from "react";
+import { Button, Image, Pressable, Text, TextInput, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, View, } from "react-native";
+import { Icon } from "../components/uis/Icon/Icon";
+const getRootElementStyleType = (element) => {
+    if (React.isValidElement(element)) {
+        if (element.type === Text ||
+            element.type === TextInput ||
+            element.type === Icon) {
+            return "TextStyle";
+        }
+        if (element.type === Image ||
+            element.type === View ||
+            element.type === Button ||
+            element.type === TouchableHighlight ||
+            element.type === TouchableOpacity ||
+            element.type === Pressable ||
+            element.type === TouchableWithoutFeedback) {
+            return "ViewStyle";
+        }
+    }
+    return "unknown";
+};
+/**
+ * This function applies default colors to cloned element.
+ *
+ * @param {CloneElemColorsParams} params
+ * @returns {JSX.Element} - Cloned element with default colors if exists. Otherwise, null.
+ */
+export const cloneElemWithDefaultColors = ({ element, color, backgroundColor, style, }) => {
+    return element
+        ? cloneElement(element, {
+            style: [
+                getRootElementStyleType(element) === "TextStyle" && {
+                    color,
+                },
+                getRootElementStyleType(element) === "ViewStyle" && {
+                    borderColor: color,
+                    backgroundColor: backgroundColor,
+                },
+                { ...style, ...element.props.style },
+            ],
+        })
+        : null;
+};

package/utils/guards.ts

@@ -0,0 +1,93 @@
+import React, { cloneElement } from "react";
+import type { ViewStyle } from "react-native";
+import {
+  Button,
+  Image,
+  Pressable,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+import { Icon } from "../components/uis/Icon/Icon";
+
+const getRootElementStyleType = (
+  element: JSX.Element
+): "TextStyle" | "ViewStyle" | "unknown" => {
+  if (React.isValidElement(element)) {
+    if (
+      element.type === Text ||
+      element.type === TextInput ||
+      element.type === Icon
+    ) {
+      return "TextStyle";
+    }
+
+    if (
+      element.type === Image ||
+      element.type === View ||
+      element.type === Button ||
+      element.type === TouchableHighlight ||
+      element.type === TouchableOpacity ||
+      element.type === Pressable ||
+      element.type === TouchableWithoutFeedback
+    ) {
+      return "ViewStyle";
+    }
+  }
+
+  return "unknown";
+};
+
+type CloneElemColorsParams = {
+  /**
+   * ReactElement to be cloned to shape default colors.
+   */
+  element?: JSX.Element;
+  /**
+   * Text color to be applied.
+   * If not passed, default color will be applied.
+   * Invalid if element is ViewStyle.
+   */
+  color?: string;
+  /**
+   * Background color to be applied.
+   * If not passed, default color will be applied.
+   * Invalid if element is TextStyle.
+   */
+  backgroundColor?: string;
+  /**
+   * Extra style to be applied.
+   */
+  style?: ViewStyle;
+};
+
+/**
+ * This function applies default colors to cloned element.
+ *
+ * @param {CloneElemColorsParams} params
+ * @returns {JSX.Element} - Cloned element with default colors if exists. Otherwise, null.
+ */
+export const cloneElemWithDefaultColors = ({
+  element,
+  color,
+  backgroundColor,
+  style,
+}: CloneElemColorsParams): JSX.Element | null => {
+  return element
+    ? cloneElement(element, {
+        style: [
+          getRootElementStyleType(element) === "TextStyle" && {
+            color,
+          },
+          getRootElementStyleType(element) === "ViewStyle" && {
+            borderColor: color,
+            backgroundColor: backgroundColor,
+          },
+          { ...style, ...element.props.style },
+        ],
+      })
+    : null;
+};

package/utils/theme.js

@@ -0,0 +1,5 @@
+import { light } from './colors';
+export const isEmptyObject = (param) => Object.keys(param).length === 0 && param.constructor === Object;
+export const getTheme = (theme) => {
+    return isEmptyObject(theme) || theme === undefined ? light : theme;
+};

package/utils/theme.ts

@@ -0,0 +1,33 @@
+import {Colors, light} from './colors';
+
+export type CpkTheme = Colors & {
+  isPortrait?: boolean;
+  isDesktop?: boolean;
+  isTablet?: boolean;
+  isMobile?: boolean;
+};
+
+type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>;
+};
+
+export type CpkThemeParams = RecursivePartial<CpkTheme>;
+
+export type ThemeObjParams = {
+  bg: Partial<Colors['bg']>;
+  role: Partial<Colors['role']>;
+  text: Partial<Colors['text']>;
+  button: Partial<Colors['button']>;
+};
+
+export interface ThemeParam {
+  light?: Partial<ThemeObjParams & any>;
+  dark?: Partial<ThemeObjParams & any>;
+}
+
+export const isEmptyObject = (param: any): boolean =>
+  Object.keys(param).length === 0 && param.constructor === Object;
+
+export const getTheme = (theme?: CpkTheme): CpkTheme => {
+  return isEmptyObject(theme) || theme === undefined ? light : theme;
+};