torch-glare 1.0.2

package/cli/bin/addProvider.js

@@ -0,0 +1,71 @@
+import fs from "fs";
+import path from "path";
+import { getConfig } from "./cli.js";
+import { fileURLToPath } from "url";
+import { ensureDirectoryExists, getComponentPaths, copyComponent } from "./addComponent.js";
+import inquirer from "inquirer";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Define the path to the provider templates directory
+const providerTemplatesDir = path.resolve(__dirname, "../../lib/providers");
+
+/**
+ * Main function to add a provider and its dependencies.
+ * @param {string} provider - The name of the provider to add.
+ */
+export async function addProvider(provider) {
+    const config = getConfig();
+    const availableProviders = getAvailableProviders(providerTemplatesDir);
+
+    // If no provider is provided, prompt the user to select one
+    if (!provider) {
+        provider = await promptProviderSelection(availableProviders);
+    }
+
+    // Validate if the provider exists in the provider templates directory
+    if (!availableProviders.includes(provider)) {
+        console.error(`❌ Provider "${provider}" not found.`);
+        return;
+    }
+
+    // Get the path and create the target directory
+    const { source, targetDir } = getComponentPaths(provider, config, providerTemplatesDir, "providers");
+    const target = path.join(targetDir, provider);
+    fs.rmSync(target, { recursive: true, force: true });
+
+    // Ensure the target directory exists
+    ensureDirectoryExists(targetDir);
+
+    // Copy the provider (file or directory) and install dependencies
+    copyComponent(source, target, addProvider);
+
+    console.log(`✅ ${provider} has been added to ${config.path}!`);
+}
+
+/**
+ * Get a list of available providers from the provider templates directory.
+ * @param {string} providerTemplatesDir - Path to the provider templates directory.
+ * @returns {string[]} - Array of provider names.
+ */
+function getAvailableProviders(providerTemplatesDir) {
+    return fs.readdirSync(providerTemplatesDir).map((file) => path.basename(file));
+}
+
+/**
+ * Prompt the user to select a provider from a list.
+ * @param {string[]} availableProviders - Array of available providers.
+ * @returns {string} - The selected provider.
+ */
+async function promptProviderSelection(availableProviders) {
+    const { selectedProvider } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "selectedProvider",
+            message: "Which provider would you like to add?",
+            choices: availableProviders,
+        },
+    ]);
+    return selectedProvider;
+}

package/cli/bin/addUtils.js

@@ -0,0 +1,74 @@
+import fs from "fs";
+import path from "path";
+import { getConfig } from "./cli.js";
+import { fileURLToPath } from "url";
+import { ensureDirectoryExists, getComponentPaths, copyComponent } from "./addComponent.js";
+import inquirer from "inquirer";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Define the path to the utils templates directory
+const utilsTemplatesDir = path.resolve(__dirname, "../../lib/utils");
+
+
+/**
+ * Main function to add a utility file and its dependencies.
+ * @param {string} util - The name of the utility file to add.
+ */
+export async function addUtil(util) {
+    const config = getConfig();
+    const availableUtils = getAvailableUtils(utilsTemplatesDir);
+
+    // If no utility file is provided, prompt the user to select one
+    if (!util) {
+        util = await promptUtilSelection(availableUtils);
+    }
+
+    // Validate if the utility file exists in the utils templates directory
+    if (!availableUtils.includes(util)) {
+        console.error(`❌ Utility file "${util}" not found.`);
+        return;
+    }
+
+    // get the path and create the create the target directory
+    const { source, targetDir } = getComponentPaths(util, config, utilsTemplatesDir, "utils");
+    const target = path.join(targetDir, util);
+
+    fs.rmSync(target, { recursive: true, force: true });
+
+    // Ensure the target directory exists
+    ensureDirectoryExists(targetDir);
+
+    // Copy the utility file and install dependencies
+    copyComponent(source, target, addUtil);
+
+    console.log(`✅ ${util} has been added to ${config.path}!`);
+}
+
+/**
+ * Get a list of available utility files from the utils templates directory.
+ * @param {string} utilsTemplatesDir - Path to the utils templates directory.
+ * @returns {string[]} - Array of utility file names.
+ */
+function getAvailableUtils(utilsTemplatesDir) {
+    return fs.readdirSync(utilsTemplatesDir).map((file) => path.basename(file));
+}
+
+
+/**
+ * Prompt the user to select a utility file from a list.
+ * @param {string[]} availableUtils - Array of available utility files.
+ * @returns {string} - The selected utility file.
+ */
+async function promptUtilSelection(availableUtils) {
+    const { selectedUtil } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "selectedUtil",
+            message: "Which utility file would you like to add?",
+            choices: availableUtils,
+        },
+    ]);
+    return selectedUtil;
+}

package/cli/bin/cli.js

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+import fs from "fs";
+import { fileURLToPath } from "url";
+import { Command } from "commander";
+import { initConfig } from "./init/init.js";
+import { addComponent } from "./addComponent.js";
+import { addHook } from "./addHooks.js";
+import { updateInstalledComponents } from "./update.js";
+import { addUtil } from "./addUtils.js";
+import { addProvider } from "./addProvider.js";
+import { addLayout } from "./addLayout.js";
+
+const program = new Command();
+const __filename = fileURLToPath(import.meta.url);
+const CONFIG_FILE = "glare.json";
+
+export function getConfig() {
+  if (!fs.existsSync(CONFIG_FILE)) {
+    console.error('❌ glare.json not found. Run "npx torch-glare@latest init" first');
+    process.exit(1);
+  }
+
+  try {
+    return JSON.parse(fs.readFileSync(CONFIG_FILE, "utf8"));
+  } catch (error) {
+    console.error("❌ Error reading glare.json:", error.message);
+    process.exit(1);
+  }
+}
+
+program
+  .name("torch-glare")
+  .description("Torch Glare for managing React components")
+  .version("0.0.0");
+
+program
+  .command("init")
+  .description("Initialize torch.json configuration file")
+  .action(() => initConfig(CONFIG_FILE));
+
+program
+  .command("add [component]")
+  .description("Add a component interactively or install a specified one")
+  .action((component) => addComponent(component && `${component}.tsx`));
+
+program
+  .command("hook [hook]")
+  .description("Add a hook interactively or install a specified one")
+  .action((hook) => addHook(hook && `${hook}`));
+
+program
+  .command("layout [layout]")
+  .description("Add a Layout interactively or install a specified one")
+  .action((layout) => addLayout(layout && `${layout}.tsx`));
+
+program
+  .command("util [util]")
+  .description("Add a utils interactively or install a specified one")
+  .action((util) => addUtil(util && `${util}.ts`));
+
+program
+  .command("provider [provider]")
+  .description("Add a provider interactively or install a specified one")
+  .action((provider) => addProvider(provider && `${provider}`));
+
+program
+  .command("update")
+  .description("Update everything installed")
+  .action(() => updateInstalledComponents());
+
+program.parse(process.argv);
+
+export { CONFIG_FILE, __filename };

package/cli/bin/init/init.js

@@ -0,0 +1,15 @@
+import fs from "fs";
+import { tailwindInit } from "./tailwindInit.js";
+export async function initConfig(CONFIG_FILE) {
+  const defaultConfig = { path: "./" };
+
+  if (!fs.existsSync(CONFIG_FILE)) {
+    fs.writeFileSync(CONFIG_FILE, JSON.stringify(defaultConfig, null, 2));
+    console.log("✅ Created glare.json configuration file");
+  } else {
+    console.log("⚠️ glare.json already exists, skipping creation.");
+  }
+
+  // Initialize Tailwind CSS config if not exists
+  tailwindInit();
+}

package/cli/bin/init/tailwindInit.js

@@ -0,0 +1,174 @@
+import path from "path";
+import fs from "fs";
+import { execSync } from "child_process";
+import { detectPackageManager, getCurrentInstalledDependencies } from "../addComponent.js";
+
+const tailwindConfigPath = path.join(process.cwd(), "tailwind.config.ts");
+
+
+
+function generatePlugins() {
+  return `
+    require('tailwindcss-animate'),
+    require('tailwind-scrollbar-hide'),
+    require('glare-typography'),
+    require('glare-themes'),
+    require('glare-torch-mode'),
+      function ({ addVariant }: any) {
+        addVariant("rtl", '&[dir="rtl"]');
+        addVariant("ltr", '&[dir="ltr"]');
+      },
+  `;
+}
+
+/**
+ * Installs dependencies using the detected package manager.
+ * @param {string[]} dependencies - List of dependencies to install.
+ */
+function installDependencies(dependencies = []) {
+  if (!dependencies.length) {
+    console.warn("⚠️ No dependencies provided to install.");
+    return;
+  }
+
+  // Detect the package manager
+  const packageManager = detectPackageManager();
+  console.log(`📦 Detected package manager: ${packageManager}`);
+
+  // Generate the install command based on the package manager
+  let installCommand;
+  const latestDeps = dependencies.map(dep => `${dep}@latest`).join(" ");
+
+  switch (packageManager) {
+    case "pnpm":
+      installCommand = `pnpm add ${latestDeps}`;
+      break;
+    case "yarn":
+      installCommand = `yarn add ${latestDeps}`;
+      break;
+    case "npm":
+    default:
+      installCommand = `npm install ${latestDeps}`;
+      break;
+  }
+
+  try {
+    // Execute the install command
+    execSync(installCommand, { stdio: "inherit" });
+    console.log("✅ Dependencies installed successfully.");
+  } catch (error) {
+    console.error("❌ Error installing dependencies:");
+    console.error(error.message);
+
+    // Provide additional troubleshooting tips
+    if (error.message.includes("EACCES")) {
+      console.error(
+        "💡 It seems you don't have permission to install packages globally. Try running the command with sudo or fix your npm permissions."
+      );
+    } else if (error.message.includes("not found")) {
+      console.error(
+        "💡 The package manager might not be installed. Please ensure it is installed and available in your PATH."
+      );
+    } else {
+      console.error("💡 Check your internet connection and try again.");
+    }
+  }
+}
+
+
+function createTailwindConfig() {
+  const tailwindConfig = `
+    import type { Config } from "tailwindcss";
+    export default {
+      content: [
+        "./app/**/*.{js,ts,jsx,tsx}",
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./features/**/*.{js,ts,jsx,tsx,mdx}",
+        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./layout/**/*.{js,ts,jsx,tsx,mdx}",
+      ],
+      theme: {
+        extend: {},
+      },
+      screens: {
+        sm: "600px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px",
+      },
+      plugins: [${generatePlugins()}],
+    }satisfies Config;
+  `;
+
+  fs.writeFileSync(tailwindConfigPath, tailwindConfig);
+  console.log("✅ Created tailwind.config.ts");
+}
+
+function modifyTailwindConfig() {
+  let tailwindConfigContent = fs.readFileSync(tailwindConfigPath, "utf-8");
+
+  if (!tailwindConfigContent.includes("glare-typography") && !tailwindConfigContent.includes("glare-themes")) {
+    if (!tailwindConfigContent.includes("plugins")) {
+      tailwindConfigContent = tailwindConfigContent.replace(
+        "],",
+        `],plugins: [${generatePlugins()}],`
+      );
+    } else {
+      tailwindConfigContent = tailwindConfigContent.replace(
+        "plugins: [",
+        `plugins: [${generatePlugins()}`
+      );
+    }
+    console.log("✅ Modified tailwind.config.ts");
+  }
+
+  fs.writeFileSync(tailwindConfigPath, tailwindConfigContent);
+}
+
+
+/**
+ * Checks if the installed Tailwind CSS version is less than v4.
+ * @param {string} version - The version string of Tailwind CSS.
+ * @returns {boolean} - True if the version is less than v4, otherwise false.
+ */
+function isTailwindVersionLessThanV4(version) {
+  if (!version) {
+    console.warn("⚠️ Tailwind CSS is not installed.");
+    return false; // Assume it needs to be installed
+  }
+
+  // Extract the major version number
+  const majorVersion = parseInt(version.replace(/^[^0-9]*/, "").split(".")[0], 10);
+  return majorVersion < 4;
+}
+
+
+export function tailwindInit() {
+  const dependencies = [
+    "tailwindcss-animate",
+    "tailwind-scrollbar-hide",
+    "glare-typography",
+    "glare-themes",
+    "glare-torch-mode",
+  ];
+  installDependencies(dependencies);
+
+  const { depsNamesAndVersions } = getCurrentInstalledDependencies()
+  if (depsNamesAndVersions["tailwindcss"]) {
+    const tailwindVersion = depsNamesAndVersions["tailwindcss"]
+    if (isTailwindVersionLessThanV4(tailwindVersion)) {
+      if (!fs.existsSync(tailwindConfigPath)) {
+        createTailwindConfig();
+      } else {
+        modifyTailwindConfig();
+      }
+    }
+  }
+
+
+
+
+}

package/cli/bin/update.js

@@ -0,0 +1,147 @@
+import fs from "fs";
+import path from "path";
+import { getConfig } from "./cli.js";
+import { addComponent, copyDirectorySync, getComponentPaths, installDependencies } from "./addComponent.js";
+import { tailwindInit } from "./init/tailwindInit.js";
+import { fileURLToPath } from "url";
+import readline from "readline";
+
+const __filename = fileURLToPath(import.meta.url);
+
+// Get the current file and directory paths
+const __dirname = path.dirname(__filename);
+
+// Define the path to the templates directory
+const templatesDir = path.resolve(__dirname, "../../lib");
+
+/**
+ * Update all installed components, hooks, and utility files by syncing them with the latest templates.
+ */
+export async function updateInstalledComponents() {
+  const config = getConfig();
+
+  // Ask the user if they are sure about updating
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  const answer = await new Promise((resolve) => {
+    rl.question("Are you sure you want to update all installed components, hooks, and utils? (y/n): ", (input) => {
+      resolve(input.trim().toLowerCase());
+    });
+  });
+
+  rl.close();
+
+  if (answer !== "y") {
+    console.log("Update cancelled.");
+    return;
+  }
+
+  // Update components
+  await updateItems("components", config);
+
+  // Update hooks
+  await updateItems("hooks", config);
+
+  // Update utils
+  await updateItems("utils", config);
+
+  // Reinitialize Tailwind CSS configuration
+  tailwindInit();
+  console.log("✅ All installed items have been updated.");
+}
+
+/**
+ * Update items (components, hooks, or utils) by syncing them with the latest templates.
+ * @param {string} type - The type of items to update (e.g., "components", "hooks", "utils").
+ * @param {object} config - Configuration object.
+ */
+async function updateItems(type, config) {
+  const installedItemsDir = getInstalledItemsDir(config, type);
+
+  // Exit if no installed items are found
+  if (!checkIfItemsExist(installedItemsDir)) {
+    return;
+  }
+
+  // Get the list of installed items
+  const installedItems = getInstalledItems(installedItemsDir);
+
+  // Exit if there are no items to update
+  if (installedItems.length === 0) {
+    console.log(`✅ No ${type} to update.`);
+    return;
+  }
+
+  console.log(`🔄 Updating installed ${type}...`);
+
+  // Update each installed item
+  installedItems.forEach((item) => {
+    updateItem(item, config, type);
+  });
+}
+
+/**
+ * Get the directory path for installed items (components, hooks, or utils).
+ * @param {object} config - Configuration object.
+ * @param {string} type - The type of items (e.g., "components", "hooks", "utils").
+ * @returns {string} - Path to the installed items directory.
+ */
+function getInstalledItemsDir(config, type) {
+  const normalizedPath = config.path.replace("@/", "");
+  return path.join(process.cwd(), normalizedPath, type);
+}
+
+/**
+ * Check if the installed items directory exists.
+ * @param {string} installedItemsDir - Path to the installed items directory.
+ * @returns {boolean} - True if the directory exists, false otherwise.
+ */
+function checkIfItemsExist(installedItemsDir) {
+  if (!fs.existsSync(installedItemsDir)) {
+    console.log(`❌ No installed ${path.basename(installedItemsDir)} found.`);
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Get the list of installed items.
+ * @param {string} installedItemsDir - Path to the installed items directory.
+ * @returns {string[]} - Array of installed item names.
+ */
+function getInstalledItems(installedItemsDir) {
+  return fs.readdirSync(installedItemsDir).map((file) => path.basename(file));
+}
+
+/**
+ * Update a single item (component, hook, or utility file) by syncing it with the latest template.
+ * @param {string} item - The name of the item to update.
+ * @param {object} config - Configuration object.
+ * @param {string} type - The type of item (e.g., "components", "hooks", "utils").
+ */
+function updateItem(item, config, type) {
+  const { source, targetDir } = getComponentPaths(item, config, `${templatesDir}/${type}`, type);
+  const target = path.join(targetDir, item);
+
+  // Check if the item template exists
+  if (fs.existsSync(source)) {
+    console.log(`🔄 Updating ${item}...`);
+
+    // Copy the item (directory or file)
+    if (fs.lstatSync(source).isDirectory()) {
+      copyDirectorySync(source, target, addComponent);
+    } else {
+      fs.copyFileSync(source, target);
+    }
+
+    // Install dependencies for the updated item
+    // installDependencies(source, type);
+
+    console.log(`✅ ${item} updated.`);
+  } else {
+    console.log(`⚠️ Template for ${item} not found. Skipping...`);
+  }
+}

package/lib/components/ActionButton.tsx

@@ -0,0 +1,63 @@
+import React, { ButtonHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Button } from "./Button";
+import { cn } from "../utils/cn";
+import { ButtonVariant, Themes } from "../utils/types";
+
+const buttonVariants = cva("", {
+  variants: {
+    size: {
+      XS: "h-[18px] w-[18px] text-[12px]",
+      S: "h-[22px] w-[22px] text-[12px]",
+      M: "h-[32px] w-[32px] text-[18px]",
+    },
+  },
+  defaultVariants: {
+    size: "M",
+  },
+});
+
+
+interface Props
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  is_loading?: boolean;
+  disabled?: boolean;
+  asChild?: boolean;
+  as?: React.ElementType;
+  theme?: Themes
+  variant?: ButtonVariant
+}
+export const ActionButton = function ({
+  size,
+  asChild,
+  as: Tag = "button",
+  className,
+  variant,
+  children,
+  theme,
+  ...props
+}: Props) {
+  return (
+    <Button
+      theme={theme}
+      asChild={asChild}
+      buttonType="icon"
+      size={
+        size == "XS" ? "S" :
+          size == "S" ? "M" :
+            size == "M" ? "L" : "S"
+      }
+      variant={variant}
+      className={cn(
+        buttonVariants({
+          size,
+        })
+        , className
+      )}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+};

package/lib/components/ActionsGroup.tsx

@@ -0,0 +1,34 @@
+import React, { HTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  withDivider?: boolean; // to display the divider line if you pass it see on figma design file
+  theme?: Themes
+}
+
+const ActionsGroup: React.FC<Props> = ({
+  withDivider,
+  className,
+  children,
+  theme,
+  ...props
+}) => {
+  return (
+    <section
+      {...props}
+      data-theme={theme}
+      className={cn("flex items-center gap-2 flex-1", className)}
+    >
+      {withDivider && (
+        <div className="flex border-t border-solid border-border-presentation-global-primary flex-1 px-2" />
+      )}
+      {children}
+      {withDivider && (
+        <div className="flex border-t border-solid border-border-presentation-global-primary flex-1 px-2" />
+      )}
+    </section>
+  );
+};
+
+export default ActionsGroup;