npm - torch-glare - Versions diffs - 1.0.1 - Mend

torch-glare 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/LICENSE +21 -0
package/README.md +207 -0
package/cli/bin/addComponent.js +278 -0
package/cli/bin/addHooks.js +75 -0
package/cli/bin/addLayout.js +71 -0
package/cli/bin/addProvider.js +71 -0
package/cli/bin/addUtils.js +74 -0
package/cli/bin/cli.js +73 -0
package/cli/bin/init/init.js +15 -0
package/cli/bin/init/tailwindInit.js +174 -0
package/cli/bin/update.js +147 -0
package/lib/components/ActionButton.tsx +63 -0
package/lib/components/ActionsGroup.tsx +34 -0
package/lib/components/AlertDialog.tsx +211 -0
package/lib/components/Badge.tsx +116 -0
package/lib/components/BadgeField.tsx +192 -0
package/lib/components/Button.tsx +277 -0
package/lib/components/Card.tsx +63 -0
package/lib/components/Checkbox.tsx +104 -0
package/lib/components/CountBadge.tsx +54 -0
package/lib/components/DatePicker.tsx +464 -0
package/lib/components/Drawer.tsx +118 -0
package/lib/components/DropdownMenu.tsx +399 -0
package/lib/components/FieldHint.tsx +76 -0
package/lib/components/ImageAttachment.tsx +171 -0
package/lib/components/InnerLabelField.tsx +155 -0
package/lib/components/Input.tsx +179 -0
package/lib/components/InputField.tsx +147 -0
package/lib/components/Label.tsx +107 -0
package/lib/components/LabelField.tsx +75 -0
package/lib/components/LabeledCheckBox.tsx +65 -0
package/lib/components/LabeledRadio.tsx +45 -0
package/lib/components/LinkButton.tsx +90 -0
package/lib/components/LoginButton.tsx +56 -0
package/lib/components/PasswordLevel.tsx +58 -0
package/lib/components/Popover.tsx +274 -0
package/lib/components/ProfileMenu.tsx +90 -0
package/lib/components/Radio.tsx +69 -0
package/lib/components/RadioCard.tsx +70 -0
package/lib/components/RingLoading.tsx +190 -0
package/lib/components/SearchField.tsx +49 -0
package/lib/components/Select.tsx +417 -0
package/lib/components/SlideDatePicker.tsx +120 -0
package/lib/components/SpinLoading.tsx +190 -0
package/lib/components/Switcher.tsx +56 -0
package/lib/components/TabFormItem.tsx +158 -0
package/lib/components/Table.tsx +395 -0
package/lib/components/Textarea.tsx +108 -0
package/lib/components/Tooltip.tsx +111 -0
package/lib/components/TransparentLabel.tsx +72 -0
package/lib/components/TreeDropDown.tsx +69 -0
package/lib/hooks/MobileSlidePicker/components/Picker.tsx +218 -0
package/lib/hooks/MobileSlidePicker/components/PickerColumn.tsx +238 -0
package/lib/hooks/MobileSlidePicker/components/PickerItem.tsx +64 -0
package/lib/hooks/MobileSlidePicker/index.ts +10 -0
package/lib/hooks/useActiveTreeItem.tsx +61 -0
package/lib/hooks/useClickOutside.tsx +20 -0
package/lib/hooks/useResize.tsx +78 -0
package/lib/layouts/CLayout.tsx +326 -0
package/lib/layouts/FieldSection.tsx +64 -0
package/lib/layouts/TreeSubLayout.tsx +187 -0
package/lib/providers/ThemeProvider.tsx +99 -0
package/lib/utils/cn.ts +6 -0
package/lib/utils/convertImageFileToDataUrl.ts +17 -0
package/lib/utils/resize.ts +35 -0
package/lib/utils/types.ts +12 -0
package/package.json +28 -0
package/torch-glare.js +24 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 TORCH corp.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,207 @@
+# TORCH Glare Components Library
+Welcome to the **TORCH Glare Components Library**! This library provides a collection of reusable React components to help you build user interfaces efficiently. Additionally, a CLI tool (**torch-glare CLI**) is available to streamline component management.
+## Table of Contents
+1. [Installation](#installation)
+2. [Usage](#usage)
+3. [CLI Commands](#cli-commands)
+4. [Theming](#theming)
+5. [Contributing](#contributing)
+6. [License](#license)
+## Installation
+## 1. Initialize Your Project
+To install the TORCH Glare Components Library, run the following command:
+```sh
+npx torch-glare@latest init
+```
+This command will:
+- Create or modify the `tailwind.config.js` file to support Tailwind CSS for Tailwind versions less then 4.
+- Generate a `torch.json` file where you can customize the installation path for components.
+### Tailwind CSS Requirement
+Ensure that Tailwind CSS is installed in your project before running the initialization command.
+## 2. Add Essential Plugins for Tailwind CSS
+If you're using Tailwind CSS version 4 or above, add the following plugins to your global CSS file:
+```css
+@import "tailwindcss";
+/* Essential plugins */
+@plugin 'glare-typography';
+@plugin 'glare-themes';
+@plugin 'glare-torch-mode';
+@plugin 'tailwind-scrollbar-hide';
+@plugin 'tailwindcss-animate';
+```
+### 2. Add Remix Icon Library
+Include the following in `index.html` or nextjs `layout.tsx` or meta data for icon support:
+```html
+<html>
+<head>
+  <link
+    href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
+    rel="stylesheet"
+  />
+</head>
+<body></body>
+</html>
+```
+## 3. Configure Installation Path
+Adjust the `glare.json` file to specify where you want to install components:
+```json
+{
+  "path": "./src" // The directory where components will be installed
+}
+```
+### 4. Add Components
+To add a specific component, run:
+```sh
+npx torch-glare@latest add [component-name]
+```
+Or, to add components interactively:
+```sh
+npx torch-glare@latest add
+```
+## Usage
+Once installed, import and use the components as needed:
+```tsx
+import React from "react";
+import { Button } from "./components";
+const App = () => {
+  return (
+    <div>
+      <Button >Hello.</Button>
+    </div>
+  );
+};
+export default App;
+```
+## CLI Commands
+### Initialize Configuration
+```sh
+npx torch-glare@latest init
+```
+- Creates a `torch.json` configuration file.
+- Create or modify `tailwind.config.ts` file for tailwind support.
+### Add Components
+```sh
+npx torch-glare@latest add [component]
+```
+Adds a specific component or runs an interactive prompt if no name is provided.
+### Add Hooks
+```sh
+npx torch-glare@latest hook [hook]
+```
+Adds a specific hook or runs an interactive prompt if no name is provided.
+### Add Utilities
+```sh
+npx torch-glare@latest util [util]
+```
+Adds a specific utility or runs an interactive prompt if no name is provided.
+### Providers
+```sh
+npx torch-glare@latest provider [provider]
+```
+Adds a specific provider or runs an interactive prompt if no name is provided.
+### Update Installed Resources
+```sh
+npx torch-glare@latest update
+```
+Updates all installed components, hooks, utilities, and providers.
+## Theming
+The TORCH Glare Components Library supports both light and dark themes. You can set a fixed theme for your components using the `theme` attribute.
+### Setting a Fixed Theme
+To apply a fixed theme (dark or light) to a component, add the `theme `attribute with the desired theme value:
+```tsx
+import React from "react";
+import { Button } from "./components";
+const App = () => {
+  return (
+    <div>
+      <Button theme="dark">Dark Theme Button</Button>
+      <Button theme="light">Light Theme Button</Button>
+    </div>
+  );
+};
+export default App;
+```
+### Global Theme
+To apply a theme globally, wrap your application with the `ThemeProvider` and set the optional `defaultTheme` props:
+```tsx
+import { ThemeProvider } from "./components";
+const App = () => {
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
+    <App />
+  </ThemeProvider>
+);
+};
+export default App;
+```
+## Contributing
+We welcome contributions! Follow these steps:
+1. Fork the repository.
+2. Create a new branch.
+3. Implement your changes.
+4. Commit with a clear message.
+5. Push your changes and open a pull request.
+### Contribution Guidelines
+- Follow existing code style.
+- Update documentation if necessary.
+## License
+This project is licensed under the **MIT License**.

package/cli/bin/addComponent.js ADDED Viewed

@@ -0,0 +1,278 @@
+import fs from "fs";
+import path from "path";
+import inquirer from "inquirer";
+import { getConfig } from "./cli.js";
+import { execSync } from "child_process";
+import { fileURLToPath } from "url";
+import { addUtil } from "./addUtils.js";
+import { addHook } from "./addHooks.js";
+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/components");
+/**
+ * Main function to add a component and its dependencies.
+ * @param {string} component - The name of the component to add.
+ */
+export async function addComponent(component) {
+  const config = getConfig();
+  const availableComponents = getAvailableComponents(templatesDir);
+  // If no component is provided, prompt the user to select one
+  if (!component) {
+    component = await promptComponentSelection(availableComponents);
+  }
+  // Validate if the component exists in the templates directory
+  if (!availableComponents.includes(component)) {
+    console.error(`❌ Component "${component}" not found.`);
+    return;
+  }
+  const { source, targetDir } = getComponentPaths(component, config, templatesDir, "components");
+  const target = path.join(targetDir, component);
+  // replace the component
+  fs.rmSync(target, { recursive: true, force: true });
+  console.log(`🔄 Replacing "${component}"...`);
+  // Ensure the target directory exists
+  ensureDirectoryExists(targetDir);
+  // Copy the component (directory or file) and install dependencies
+  copyComponent(source, target, addComponent);
+  console.log(`✅ ${component} has been added to ${config.path}!`);
+}
+/**
+ * Get a list of available components from the templates directory.
+ * @param {string} templatesDir - Path to the templates directory.
+ * @returns {string[]} - Array of component names.
+ */
+function getAvailableComponents(templatesDir) {
+  return fs.readdirSync(templatesDir).map((file) => path.basename(file));
+}
+/**
+ * Prompt the user to select a component from a list.
+ * @param {string[]} availableComponents - Array of available components.
+ * @returns {string} - The selected component.
+ */
+async function promptComponentSelection(availableComponents) {
+  const { selectedComponent } = await inquirer.prompt([
+    {
+      type: "list",
+      name: "selectedComponent",
+      message: "Which component would you like to add?",
+      choices: availableComponents,
+    },
+  ]);
+  return selectedComponent;
+}
+/**
+ * Get the source and target paths for the component.
+ * @param {string} component - The name of the component.
+ * @param {object} config - Configuration object.
+ * @returns {object} - Object containing source and target directory paths.
+ */
+export function getComponentPaths(component, config, templatesDir, saveFolderName) {
+  const source = path.join(templatesDir, `${component}`);
+  const normalizedPath = config.path.replace("@/", "");
+  const targetDir = path.join(process.cwd(), normalizedPath, saveFolderName);
+  return { source, targetDir };
+}
+/**
+ * Ensure the target directory exists.
+ * @param {string} targetDir - The target directory path.
+ */
+export function ensureDirectoryExists(targetDir) {
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+  }
+}
+/**
+ * Copy a component (directory or file) and install its dependencies.
+ * @param {string} source - The source path of the component.
+ * @param {string} target - The target path of the component.
+ */
+export function copyComponent(source, target, addFunction) {
+  if (fs.lstatSync(source).isDirectory()) {
+    copyDirectorySync(source, target, addFunction);
+  } else {
+    fs.copyFileSync(source, target);
+    installDependencies(source, addFunction); // Pass addFunction here
+  }
+}
+/**
+ * Detect the package manager used in the project.
+ * @returns {string} - The detected package manager (pnpm, yarn, or npm).
+ */
+export function detectPackageManager() {
+  if (fs.existsSync(path.join(process.cwd(), "pnpm-lock.yaml"))) return "pnpm";
+  if (fs.existsSync(path.join(process.cwd(), "yarn.lock"))) return "yarn";
+  if (fs.existsSync(path.join(process.cwd(), "package-lock.json"))) return "npm";
+  return "npm"; // Default to npm if no lock file is found
+}
+/**
+ * Get the installed dependencies from the project's package.json.
+ * @returns {Set<string>} - Set of installed dependencies.
+ */
+export function getCurrentInstalledDependencies() {
+  const packageJsonPath = path.join(process.cwd(), "package.json");
+  if (!fs.existsSync(packageJsonPath)) {
+    console.error("❌ No package.json found. Run `npm init` or `yarn init` first.");
+    process.exit(1);
+  }
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+  const depsNames = new Set([
+    ...Object.keys(packageJson.dependencies || {}),
+    ...Object.keys(packageJson.devDependencies || {}),
+  ]);
+  const depsNamesAndVersions = {
+    ...(packageJson.dependencies || {}),
+    ...(packageJson.devDependencies || {}),
+  };
+  return { depsNames, depsNamesAndVersions }
+}
+/**
+ * Extract dependencies from a component file.
+ * @param {string} componentPath - Path to the component file.
+ * @param {Set<string>} installedDependencies - Set of installed dependencies.
+ * @param {function} addFunction - Function to make add operation
+ * @returns {Set<string>} - Set of dependencies to install.
+ */
+function getDependenciesToInstall(componentPath, installedDependencies, addFunction) {
+  const componentContent = fs.readFileSync(componentPath, "utf-8");
+  const importRegex = /import\s+.*?\s+from\s+['"]([^'"]+)['"]/g;
+  const dependenciesToInstall = new Set();
+  let match;
+  while ((match = importRegex.exec(componentContent)) !== null) {
+    const moduleName = match[1];
+    if (!moduleName.startsWith(".") && !installedDependencies.has(moduleName)) {
+      dependenciesToInstall.add(moduleName);
+    }
+    // install required utils.
+    else if (
+      moduleName.startsWith("../utils") &&
+      !installedDependencies.has(moduleName)
+    ) {
+      addUtil(moduleName.slice(9) + ".ts"); // Use addFunction here
+    }
+    // install required hooks.
+    else if (
+      moduleName.startsWith("../hooks") &&
+      !installedDependencies.has(moduleName)
+    ) {
+      addHook(moduleName.slice(9)); // Use addFunction here
+    }
+    // install required components
+    else if (
+      moduleName.startsWith("./") ||
+      !moduleName.startsWith("../components") &&
+      !installedDependencies.has(moduleName)
+    ) {
+      addComponent(moduleName.slice(2) + ".tsx"); // Use addFunction here
+    }
+    // install required for layouts components
+    else if (
+      moduleName.startsWith("../components") &&
+      !installedDependencies.has(moduleName)
+    ) {
+      addComponent(moduleName.slice(14) + ".tsx"); // Use addFunction here
+    }
+  }
+  return dependenciesToInstall;
+}
+/**
+ * Install dependencies for a component.
+ * @param {string} componentPath - Path to the component file.
+ */
+export function installDependencies(componentPath, addFunction) {
+  const { depsNames } = getCurrentInstalledDependencies();
+  const dependenciesToInstall = getDependenciesToInstall(
+    componentPath,
+    depsNames,
+    addFunction // Pass addFunction here
+  );
+  if (dependenciesToInstall.size > 0) {
+    const packageManager = detectPackageManager();
+    const installCommand = getInstallCommand(packageManager, dependenciesToInstall);
+    console.log(
+      `📦 Installing missing dependencies using ${packageManager}:`,
+      [...dependenciesToInstall].join(", ")
+    );
+    try {
+      execSync(installCommand, { stdio: "inherit" });
+      console.log("✅ Dependencies installed successfully.");
+    } catch (error) {
+      console.error("❌ Error installing dependencies:", error.message);
+    }
+  } else {
+    console.log("✅ All dependencies are already installed.");
+  }
+}
+/**
+ * Generate the installation command based on the package manager.
+ * @param {string} packageManager - The package manager (pnpm, yarn, or npm).
+ * @param {Set<string>} dependencies - Set of dependencies to install.
+ * @returns {string} - The installation command.
+ */
+function getInstallCommand(packageManager, dependencies) {
+  const deps = [...dependencies].join(" ");
+  switch (packageManager) {
+    case "pnpm":
+      return `pnpm add ${deps}`;
+    case "yarn":
+      return `yarn add ${deps}`;
+    default:
+      return `npm install ${deps}`;
+  }
+}
+/**
+ * Copy a directory and its contents recursively.
+ * @param {string} source - Source directory path.
+ * @param {string} target - Target directory path.
+ */
+export function copyDirectorySync(source, target, addFunction) {
+  if (!fs.existsSync(target)) {
+    fs.mkdirSync(target, { recursive: true });
+  }
+  const items = fs.readdirSync(source, { withFileTypes: true });
+  for (const item of items) {
+    const sourcePath = path.join(source, item.name);
+    const targetPath = path.join(target, item.name);
+    if (item.isDirectory()) {
+      copyDirectorySync(sourcePath, targetPath, addFunction);
+    } else {
+      fs.copyFileSync(sourcePath, targetPath);
+      installDependencies(sourcePath, addFunction); // Pass addFunction here
+    }
+  }
+}

package/cli/bin/addHooks.js ADDED Viewed

@@ -0,0 +1,75 @@
+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 hooks templates directory
+const hooksTemplatesDir = path.resolve(__dirname, "../../lib/hooks");
+/**
+ * Main function to add a hook and its dependencies.
+ * @param {string} hook - The name of the hook to add.
+ */
+export async function addHook(hook) {
+    const config = getConfig();
+    const availableHooks = getAvailableHooks(hooksTemplatesDir);
+    // If no hook is provided, prompt the user to select one
+    if (!hook) {
+        hook = await promptHookSelection(availableHooks);
+    }
+    // Validate if the hook exists in the hooks templates directory
+    if (!availableHooks.includes(hook)) {
+        // console.error(`❌ Hook "${hook}" not found.`);
+        return;
+    }
+    // get the path and create the create the target directory
+    const { source, targetDir } = getComponentPaths(hook, config, hooksTemplatesDir, "hooks");
+    const target = path.join(targetDir, hook);
+    fs.rmSync(target, { recursive: true, force: true });
+    // Ensure the target directory exists
+    ensureDirectoryExists(targetDir);
+    // Copy the hook (file) and install dependencies
+    copyComponent(source, target, addHook);
+    console.log(`✅ ${hook} has been added to ${config.path}!`);
+}
+/**
+ * Get a list of available hooks from the hooks templates directory.
+ * @param {string} hooksTemplatesDir - Path to the hooks templates directory.
+ * @returns {string[]} - Array of hook names.
+ */
+function getAvailableHooks(hooksTemplatesDir) {
+    return fs.readdirSync(hooksTemplatesDir).map((file) => path.basename(file));
+}
+/**
+ * Prompt the user to select a hook from a list.
+ * @param {string[]} availableHooks - Array of available hooks.
+ * @returns {string} - The selected hook.
+ */
+async function promptHookSelection(availableHooks) {
+    const { selectedHook } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "selectedHook",
+            message: "Which hook would you like to add?",
+            choices: availableHooks,
+        },
+    ]);
+    return selectedHook;
+}

package/cli/bin/addLayout.js ADDED Viewed

@@ -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 layouts templates directory
+const layoutsTemplatesDir = path.resolve(__dirname, "../../lib/layouts");
+/**
+ * Main function to add a layout and its dependencies.
+ * @param {string} layout - The name of the layout to add.
+ */
+export async function addLayout(layout) {
+    const config = getConfig();
+    const availableLayouts = getAvailableLayouts(layoutsTemplatesDir);
+    // If no layout is provided, prompt the user to select one
+    if (!layout) {
+        layout = await promptLayoutSelection(availableLayouts);
+    }
+    // Validate if the layout exists in the layouts templates directory
+    if (!availableLayouts.includes(layout)) {
+        // console.error(`❌ Layout "${layout}" not found.`);
+        return;
+    }
+    // get the path and create the create the target directory
+    const { source, targetDir } = getComponentPaths(layout, config, layoutsTemplatesDir, "layouts");
+    const target = path.join(targetDir, layout);
+    fs.rmSync(target, { recursive: true, force: true });
+    // Ensure the target directory exists
+    ensureDirectoryExists(targetDir);
+    // Copy the layout (file) and install dependencies
+    copyComponent(source, target, addLayout);
+    console.log(`✅ ${layout} has been added to ${config.path}!`);
+}
+/**
+ * Get a list of available layouts from the layouts templates directory.
+ * @param {string} layoutsTemplatesDir - Path to the layouts templates directory.
+ * @returns {string[]} - Array of layout names.
+ */
+function getAvailableLayouts(layoutsTemplatesDir) {
+    return fs.readdirSync(layoutsTemplatesDir).map((file) => path.basename(file));
+}
+/**
+ * Prompt the user to select a layout from a list.
+ * @param {string[]} availableLayouts - Array of available layouts.
+ * @returns {string} - The selected layout.
+ */
+async function promptLayoutSelection(availableLayouts) {
+    const { selectedLayout } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "selectedLayout",
+            message: "Which layout would you like to add?",
+            choices: availableLayouts,
+        },
+    ]);
+    return selectedLayout;
+}