@rannah-labs/react-voice-orb 1.1.3

package/src/providers/ThemeProvider.tsx

@@ -0,0 +1,211 @@
+"use client";
+import React, { createContext, ReactNode, useContext, useState } from "react";
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}
+import colorConvert from "color-convert";
+const ThemeContext = createContext<any>("blue-light");
+
+export type ThemeProviderProps = {
+  children: ReactNode;
+  setCustomStyles?: (styles: React.CSSProperties) => void;
+  customStyles?: React.CSSProperties;
+  target?: string;
+  initTheme?: string;
+  useLocalStorage?: boolean;
+  getColor: (colorToGet: string, opacity?: number) => string;
+};
+
+export function useOrbTheme() {
+  const context = useContext<ThemeProviderProps>(ThemeContext);
+  if (!context) {
+    throw new Error("use orb theme must be used within a theme provider");
+  }
+  return context;
+}
+
+const OrbThemeProvider = (props: {
+  children: ReactNode;
+  customStyles?: React.CSSProperties;
+  isDark?: boolean;
+  primaryColor?: string;
+}) => {
+  const [customStyles, setCustomStyles] = useState(props.customStyles || {});
+
+  React.useEffect(() => {
+    // no keys in the customStyles object
+    if (Object.keys(customStyles)?.length === 0) {
+      // handle autogenerate by the primary color
+      if (props.primaryColor) {
+        switchCustomColorPallet(props.primaryColor);
+      } else {
+        // handle default theme
+        switchCustomColorPallet("#0000FF");
+      }
+    }
+  }, [customStyles, props.primaryColor, props.isDark]);
+
+  function getColor(colorToGet: string, opacity?: number) {
+    const element = document.getElementById("vg-theme-container");
+    if (!element) return;
+    const styles = window.getComputedStyle(element);
+    const mainColorRaw = styles.getPropertyValue(`--vg-${colorToGet}`);
+    const mainColorHsl = mainColorRaw
+      .split(" ")
+      .map((item) => Number(item.replaceAll(`%`, "")));
+    if (opacity) {
+      return `rgba(${colorConvert.hsl
+        .rgb(mainColorHsl as any)
+        .join(`,`)}, ${opacity})`;
+    }
+    const mainColorHex = colorConvert.hsl.hex(mainColorHsl as any);
+    return `#${mainColorHex}`;
+  }
+
+  const handleAutoGenPallet = (rootColor: string, themeType?: string) => {
+    const baseColorHSL: any = colorConvert.hex.hsl(rootColor);
+    // console.log(baseColorHSL);
+    if (baseColorHSL?.length) {
+      const newHSLColorsArray: any = [];
+      for (let i = 10; i > 0; i--) {
+        const changePerIndex = 10;
+        let newHslColor = baseColorHSL.slice(0, 2);
+        const finalLuinousValue =
+          i * changePerIndex === 100 ? 95 : i * changePerIndex || 5;
+        newHslColor[2] = finalLuinousValue;
+        newHSLColorsArray.push(newHslColor);
+      }
+      const nineColorPalletFinale =
+        themeType === "light"
+          ? newHSLColorsArray.slice().reverse()
+          : newHSLColorsArray;
+      return nineColorPalletFinale;
+    }
+  };
+
+  function switchCustomColorPallet(customThemeJSONString: string) {
+    let themeObject: {
+      primary: string;
+    } = {
+      primary: props.primaryColor || "#0000FF",
+    };
+    try {
+      themeObject = JSON.parse(customThemeJSONString);
+    } catch (error) {
+      themeObject = {
+        primary: props.primaryColor || "#0000FF",
+      };
+    }
+    try {
+      // themeObject = JSON.parse(customThemeJSONString);
+      // console.log(themeObject)
+      const primaryHSL = colorConvert.hex.hsl(themeObject.primary);
+      const nineCollorPallet = handleAutoGenPallet(
+        themeObject.primary,
+        props.isDark ? "dark" : "light"
+      );
+      // console.log(nineCollorPallet)
+      setCustomStyles({
+        "--vg-primary": primaryHSL
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-50": nineCollorPallet[0]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-100": nineCollorPallet[1]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-200": nineCollorPallet[2]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-300": nineCollorPallet[3]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-400": nineCollorPallet[4]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-500": nineCollorPallet[5]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-600": nineCollorPallet[6]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-700": nineCollorPallet[7]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-800": nineCollorPallet[8]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-900": nineCollorPallet[9]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+      } as any);
+    } catch (error) {
+      console.error(`Error parsing custom theme JSON: `, error);
+    }
+  }
+
+  const setCustomTheme = (primaryHSL: any, nineCollorPallet?: any) => {
+    // console.log(`custom theme triggered:: `, primaryHSL, nineCollorPallet)
+    if (primaryHSL === false && !nineCollorPallet.length) {
+      setCustomStyles({});
+    }
+    if (nineCollorPallet?.length) {
+      // console.log('SETTING CUSTOM STYLES ')
+      setCustomStyles({
+        "--vg-primary": primaryHSL
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-50": nineCollorPallet[0]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-100": nineCollorPallet[1]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-200": nineCollorPallet[2]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-300": nineCollorPallet[3]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-400": nineCollorPallet[4]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-500": nineCollorPallet[5]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-600": nineCollorPallet[6]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-700": nineCollorPallet[7]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-800": nineCollorPallet[8]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+        "--vg-primary-900": nineCollorPallet[9]
+          .map((item: any, index: number) => (index === 0 ? item : `${item}%`))
+          .join(` `),
+      } as any);
+    }
+  };
+
+  const value = {
+    customStyles,
+    setCustomTheme,
+    getColor,
+    switchCustomColorPallet,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <div id={"vg-theme-container"} style={customStyles}>
+        {props.children}
+      </div>
+    </ThemeContext.Provider>
+  );
+};
+
+export default OrbThemeProvider;

package/src/scripts/same-script.ts

@@ -0,0 +1,73 @@
+import * as fs from "fs/promises";
+import * as path from "path";
+
+/**
+ * Deletes all files and folders inside `rootPath` except for those
+ * whose relative paths (from rootPath) appear in the `exceptions` array.
+ *
+ * @param rootPath - The directory to process.
+ * @param exceptions - An array of paths (relative to rootPath) to keep.
+ */
+async function deleteAllExcept(
+  rootPath: string,
+  exceptions: string[]
+): Promise<void> {
+  // Normalize exception paths for consistent matching.
+  const exceptionsSet = new Set(exceptions.map((e) => path.normalize(e)));
+
+  /**
+   * Recursively processes the directory at `currentPath`.
+   *
+   * @param currentPath - Absolute path of the current directory.
+   * @param relativePath - The path relative to the original rootPath.
+   */
+  async function processDirectory(
+    currentPath: string,
+    relativePath: string
+  ): Promise<void> {
+    // Read the directory entries.
+    const items = await fs.readdir(currentPath);
+
+    for (const item of items) {
+      // Build the relative path for the item.
+      const itemRelPath = relativePath ? path.join(relativePath, item) : item;
+      const fullItemPath = path.join(currentPath, item);
+
+      // If the item is in the exceptions list, skip processing it.
+      if (exceptionsSet.has(path.normalize(itemRelPath))) {
+        // Do not process inside an exception folder (or delete an exception file).
+        continue;
+      }
+
+      const stats = await fs.lstat(fullItemPath);
+      if (stats.isDirectory()) {
+        // Process the contents of the directory.
+        await processDirectory(fullItemPath, itemRelPath);
+        // After processing, check if the directory is now empty.
+        const remaining = await fs.readdir(fullItemPath);
+        if (remaining.length === 0) {
+          await fs.rmdir(fullItemPath);
+        }
+      } else {
+        // Delete the file.
+        await fs.unlink(fullItemPath);
+      }
+    }
+  }
+
+  // Process the root directory but never remove the root itself.
+  await processDirectory(rootPath, "");
+}
+
+// --- Example usage ---
+// This call will delete everything under './dist/vg-docker/src'
+// except for the folder "+global_consts" and any file/folder whose
+// relative path matches one of the entries in the exceptions array.
+deleteAllExcept("./dist", [
+  "vg-docker/src/+global_consts/client.js",
+  "vg-docker/src/+global_consts/client.d.ts",
+  "src/app/Types",
+  "src/app/Types",
+  "bun-server",
+  "src/public_packages/react-voice-orb",
+]).catch(console.error);

package/src/spinner.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const Spinner = () => {
+  return (
+    <div
+      className="pulse"
+      style={{
+        width: "50px",
+        height: "50px",
+        backgroundColor: "white",
+        borderRadius: "50%",
+        animation: "pulse 1.5s infinite",
+        margin: " auto",
+      }}
+    />
+  );
+};
+
+export default Spinner;

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "CommonJS",
+        "baseUrl": "./",
+        "composite": true,
+        "strict": true,
+        "jsx": "react",
+        "noEmit": false,
+        "allowJs": true,
+        "outDir": "dist",
+        "rootDir": "../../../",
+        "skipLibCheck": true,
+        "preserveSymlinks": false,
+        "sourceMap": false,
+        "esModuleInterop": true,
+        "declaration": true,
+        "isolatedModules": true
+    },
+    "include": [
+        "src/**/*.tsx",
+        "src/**/*.ts",
+        "../../../src/app/Types/*.ts"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist",
+        "packages/*",
+        "vg-docker",
+        "call-service/*",
+        "bun-server/*",
+        "../../../src/*.tsx"
+    ]
+}

package/webpack.config.js

@@ -0,0 +1,141 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+// const removeDuplicates = require("./remove-dups.js"); // Adjust the path as necessary
+const path = require("path");
+// const million = require("million/compiler");
+// const { millionConfig } = require('./next.config.js');
+const webpack = require("webpack");
+// const AddImportantPlugin = require("./add-important-styles.js"); // Import the custom plugin
+
+module.exports = (env) => {
+  const dir = env.dir || `/tmp/replace_me`;
+
+  return {
+    mode: "production",
+    entry: "./src/app/Components/root_build.js",
+    output: {
+      path: dir,
+      filename: "vg_bundle.js",
+    },
+    resolve: {
+      alias: {
+        "@vg-edge": path.resolve(__dirname, "vg-edge"),
+        "@main": path.resolve(__dirname, "vg-docker/src"),
+        "@monorepo": path.resolve(__dirname),
+        "@": path.resolve(__dirname, "src"),
+        "@server": path.resolve(__dirname, "vg-docker"),
+        "@nextui-org/react": path.resolve(
+          __dirname,
+          `src`,
+          `nextui-fork`,
+          `nextui`,
+          `packages`,
+          `core`,
+          `react`
+        ),
+        "@nextui-org/theme": path.resolve(
+          __dirname,
+          `src`,
+          `nextui-fork`,
+          `nextui`,
+          `packages`,
+          `core`,
+          `theme`
+        ),
+        react: path.resolve(__dirname, `node_modules`, `react`),
+        // "react-dom/test-utils": "preact/test-utils",
+        "react-dom": path.resolve(__dirname, `node_modules`, `react-dom`),
+        // "react/jsx-runtime": "preact/jsx-runtime"
+      },
+      extensions: [".ts", ".tsx", ".js", ".jsx"],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx|ts|tsx)$/,
+          exclude: /node_modules/,
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-typescript",
+              "next/babel",
+            ],
+            plugins: [
+              "./babel-react-prefix-classnames.js",
+              // ["@babel/plugin-transform-react-jsx", {
+              //   "pragma": "h",
+              //   "pragmaFrag": "Fragment",
+              // }]
+            ],
+          },
+        },
+        {
+          test: /\.css$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            "css-loader",
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: [
+                    require("autoprefixer"),
+                    require("tailwindcss"),
+                    require("postcss-prefixer")({
+                      prefix: "vg-",
+                    }),
+                    require("postcss-selector-namespace")({
+                      namespace: ".vg-render-container", // Replace with your desired ID
+                    }),
+                    // require('postcss-safe-important')(), // This will add !important to all styles
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            // Enable/disable options as needed
+            compress: {
+              drop_console: true, // Remove console.* calls
+            },
+            output: {
+              comments: false, // Remove comments
+            },
+          },
+          extractComments: false, // Don't extract comments to a separate file
+        }),
+        new CssMinimizerPlugin(),
+      ],
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: "styles.css",
+      }),
+      new AddImportantPlugin(), // Add the custom plugin
+      new webpack.DefinePlugin({
+        "process.env": {
+          NODE_ENV: JSON.stringify("production"),
+          WORKER_ENV: JSON.stringify("production"),
+        },
+      }),
+      // million.webpack({
+      //   auto: {
+      //     rsc: true,
+      //     threshold: 0.25, // default: 0.1,
+      //     skip: [/nextui/g],
+      //     mute: true
+      //   },
+      //   mute: true
+      // })
+    ],
+  };
+};