@korsolutions/ui 0.0.3 → 0.0.5

package/src/themes/provider.tsx

@@ -0,0 +1,56 @@
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from "react";
+import { Colors, ColorScheme, Radius, ThemeName } from "./types";
+import { themes } from "./themes";
+import { useColorScheme } from "react-native";
+
+interface ThemeContext {
+  colors: Colors;
+  radius: Radius;
+  fontFamily: string;
+  colorScheme: ColorScheme;
+  setColorScheme: (scheme: ColorScheme) => void;
+  setTheme: (themeName: ThemeName) => void;
+  themeName: ThemeName;
+}
+
+const ThemeContext = createContext<ThemeContext | null>(null);
+
+export const ThemeProvider = (props: PropsWithChildren) => {
+  const [themeName, setTheme] = useState<ThemeName>("default");
+
+  const systemColorScheme = useColorScheme();
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(systemColorScheme ?? "light");
+
+  const themesAssets = themes[themeName];
+  const colors = themesAssets.colors[colorScheme];
+
+  useEffect(() => {
+    if (systemColorScheme) {
+      setColorScheme(systemColorScheme);
+    }
+  }, [systemColorScheme]);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        themeName,
+        setTheme,
+        colorScheme,
+        setColorScheme,
+        colors,
+        radius: themesAssets.radius,
+        fontFamily: themesAssets.fontFamily,
+      }}
+    >
+      {props.children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};

package/src/themes/themes.ts

@@ -0,0 +1,6 @@
+import { defaultThemeAssets } from "./default";
+import { ThemeAssets, ThemeName } from "./types";
+
+export const themes: Record<ThemeName, ThemeAssets> = {
+  default: defaultThemeAssets,
+};

package/src/themes/types.ts

@@ -0,0 +1,30 @@
+export type ThemeName = "default";
+export type ColorScheme = "light" | "dark";
+
+type Color = `hsla(${number}, ${number}%, ${number}%, ${number})`;
+
+export interface Colors {
+  background: Color;
+  foreground: Color;
+  primary: Color;
+  primaryForeground: Color;
+  secondary: Color;
+  secondaryForeground: Color;
+  muted: Color;
+  mutedForeground: Color;
+  border: Color;
+  surface: Color;
+  success: Color;
+  warning: Color;
+  danger: Color;
+  info: Color;
+}
+
+export type Radius = number;
+export type FontFamily = string;
+
+export interface ThemeAssets {
+  colors: Record<ColorScheme, Colors>;
+  radius: Radius;
+  fontFamily: FontFamily;
+}

package/src/utils/hsla-utils.ts

@@ -0,0 +1,10 @@
+export const hslaSetAlpha = (hsla: string, alpha: number): string => {
+  const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+  if (parts.length < 3) {
+    throw new Error("Invalid HSLA color format");
+  }
+  const h = parseInt(parts[0], 10);
+  const s = parseInt(parts[1], 10);
+  const l = parseInt(parts[2], 10);
+  return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;
+};

package/src/utils/use-themed-styles.ts

@@ -0,0 +1,13 @@
+import { useTheme } from "@/themes";
+import { Colors, FontFamily, Radius } from "@/themes/types";
+
+interface CallbackProps {
+  colors: Colors;
+  radius: Radius;
+  fontFamily: FontFamily;
+}
+
+export const useThemedStyles = <T>(callback: (props: CallbackProps) => T): T => {
+  const theme = useTheme();
+  return callback({ colors: theme.colors, radius: theme.radius, fontFamily: theme.fontFamily });
+};

package/tsconfig.json

@@ -1,4 +1,12 @@
 {
   "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
   "include": ["src/**/*"]
 }

package/tsdown.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["./src/index.tsx", "./src/primitives/index.ts", "./src/components/index.ts"],
+  onSuccess() {
+    console.info("🙏 Build succeeded!");
+  },
+});

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from "./primitives/provider";
-
-export * from "./primitives/field";
-export * from "./primitives/input";
-export * from "./primitives/button";
-export * from "./primitives/select";
-export * from "./primitives/card";

package/src/primitives/field/field-control.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { useField } from "./context";
-import { FieldRootProps } from "./field-root";
-
-interface FieldControlInjectedProps<TControlStyles> {
-  value: FieldRootProps["value"];
-  onChange: FieldRootProps["onChange"];
-
-  onFocus?: () => void;
-  onBlur?: () => void;
-
-  styles?: TControlStyles;
-}
-
-export type FieldControlProps<T> = {
-  render: (props: FieldControlInjectedProps<T>) => React.ReactElement;
-};
-
-export function FieldControl<T>(props: FieldControlProps<T>) {
-  const { value, onChange, setFocused, state, styles } = useField<T>();
-
-  const controlStyles = styles?.control;
-  const composedStyles = controlStyles ? { ...controlStyles.default, ...controlStyles[state] } : undefined;
-
-  const Component = props.render;
-  return (
-    <Component value={value} onChange={onChange} onBlur={() => setFocused(false)} onFocus={() => setFocused(true)} styles={composedStyles as T} />
-  );
-}

package/src/primitives/provider.tsx

@@ -1,10 +0,0 @@
-import { PortalHost } from "./portal";
-
-export const UniversalUIProvider = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-      <PortalHost />
-    </>
-  );
-};