npm - torch-glare - Versions diffs - 1.2.8 → 1.3.0 - Mend

torch-glare 1.2.8 → 1.3.0

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 (41) hide show

package/apps/lib/components/TableDnDWrapper.ts +495 -0
package/apps/lib/components/TextEditor.tsx +53 -1
package/dist/bin/index.js +5 -0
package/dist/bin/index.js.map +1 -1
package/dist/src/commands/mcp.d.ts +2 -0
package/dist/src/commands/mcp.d.ts.map +1 -0
package/dist/src/commands/mcp.js +91 -0
package/dist/src/commands/mcp.js.map +1 -0
package/dist/src/shared/configureFonts.d.ts +6 -0
package/dist/src/shared/configureFonts.d.ts.map +1 -0
package/dist/src/shared/configureFonts.js +106 -0
package/dist/src/shared/configureFonts.js.map +1 -0
package/dist/src/shared/configureGlobalCss.d.ts +6 -0
package/dist/src/shared/configureGlobalCss.d.ts.map +1 -0
package/dist/src/shared/configureGlobalCss.js +154 -0
package/dist/src/shared/configureGlobalCss.js.map +1 -0
package/dist/src/shared/configureTailwind.d.ts +7 -0
package/dist/src/shared/configureTailwind.d.ts.map +1 -0
package/dist/src/shared/configureTailwind.js +163 -0
package/dist/src/shared/configureTailwind.js.map +1 -0
package/dist/src/shared/detectFramework.d.ts +23 -0
package/dist/src/shared/detectFramework.d.ts.map +1 -0
package/dist/src/shared/detectFramework.js +119 -0
package/dist/src/shared/detectFramework.js.map +1 -0
package/dist/src/shared/getDependenciesAndInstallNestedComponents.d.ts.map +1 -1
package/dist/src/shared/getDependenciesAndInstallNestedComponents.js +18 -2
package/dist/src/shared/getDependenciesAndInstallNestedComponents.js.map +1 -1
package/dist/src/shared/installBaseUtils.d.ts +5 -0
package/dist/src/shared/installBaseUtils.d.ts.map +1 -0
package/dist/src/shared/installBaseUtils.js +79 -0
package/dist/src/shared/installBaseUtils.js.map +1 -0
package/dist/src/shared/resolveAliases.d.ts +24 -0
package/dist/src/shared/resolveAliases.d.ts.map +1 -0
package/dist/src/shared/resolveAliases.js +98 -0
package/dist/src/shared/resolveAliases.js.map +1 -0
package/docs/components/breadcrumb.md +955 -0
package/docs/components/button-group.md +647 -0
package/docs/components/text-editor.md +711 -0
package/docs/components/toggle-button.md +640 -0
package/docs/tutorials/getting-started.md +123 -431
package/package.json +1 -1

package/docs/tutorials/getting-started.md CHANGED Viewed

@@ -4,7 +4,7 @@ description: Step-by-step guide to installing and using TORCH Glare Components L
 category: Tutorial
 difficulty: Beginner
 duration: 15 minutes
-tags: [getting-started, installation, setup, first-component]
+tags: [getting-started, installation, setup, first-component, cli, tailwind]
 related:
   - Building Your First Form
   - Theming Basics
@@ -17,11 +17,10 @@ Welcome to TORCH Glare! This tutorial will guide you through installing the libr
 ## What You'll Learn
-- Installing TORCH Glare and its dependencies
-- Setting up Tailwind CSS with TORCH plugins
-- Configuring the ThemeProvider
+- Installing TORCH Glare using the CLI
+- Configuring Tailwind CSS with TORCH plugins
+- Adding components to your project
 - Creating your first components
-- Understanding the design system
 ## Prerequisites
@@ -29,473 +28,193 @@ Before you begin, make sure you have:
 - Node.js 16+ installed
 - Basic knowledge of React and TypeScript
-- A React project (Next.js, Vite, or Create React App)
+- A React project with Tailwind CSS installed (Next.js, Vite, or Create React App)
 ---
-## Step 1: Installation
+## Step 1: Initialize TORCH Glare
-### Install the Core Library
+Run the following command to initialize your project:
 ```bash
-npm install @torch-ai/torch-glare
+npx torch-glare@latest init
 ```
-Or using Yarn:
+This will install the required dependencies and generate a `glare.json` file, where you can customize the installation path for your components.
-```bash
-yarn add @torch-ai/torch-glare
+### Configure Component Path
+The generated `glare.json` file controls where components are installed:
+```json
+{
+  "path": "./src"
+}
 ```
-### Install Tailwind CSS Plugins
+Adjust the `path` to match your project structure (e.g., `./src`, `./app`, `./components`).
-TORCH Glare requires several Tailwind CSS plugins for theming and typography:
+---
-```bash
-npm install mapping-color-system glare-torch-mode glare-typography tailwindcss-animate tailwind-scrollbar-hide
-```
+## Step 2: Add Fonts and Icons
-### Install Peer Dependencies
+Add Remix Icons CDN and SF-Pro font to your HTML `<head>` or metadata. SF-Pro is the standard font family for TORCH Glare Components.
-```bash
-npm install tailwindcss postcss autoprefixer class-variance-authority clsx tailwind-merge
+```html
+<head>
+    <link
+        href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
+        rel="stylesheet"
+    />
+    <link
+        rel="stylesheet"
+        href="https://cdn.statically.io/gh/TORCH-Corp/SF-PRO-FONT/main/font/fonts.css"
+    />
+    <link
+        rel="preload"
+        href="https://cdn.statically.io/gh/TORCH-Corp/SF-PRO-FONT/main/font/SF-Pro.woff2"
+        as="font"
+        type="font/woff2"
+    />
+</head>
 ```
 ---
-## Step 2: Configure Tailwind CSS
-Create or update your `tailwind.config.ts` file:
-```ts
-// tailwind.config.ts
-import type { Config } from "tailwindcss";
-export default {
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    // TORCH Glare required plugins
-    require('mapping-color-system'),
-    require('glare-torch-mode'),
-    require('glare-typography'),
-    // Optional but recommended
-    require('tailwindcss-animate'),
-    require('tailwind-scrollbar-hide'),
-  ],
-} satisfies Config;
-```
+## Step 3: Configure Tailwind CSS
-### Create PostCSS Config
+### For Tailwind CSS v4
-```js
-// postcss.config.js
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-```
-### Import Tailwind CSS
+Add the following to your `global.css` file:
 ```css
-/* globals.css or app.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "glare-torch-mode";
+@plugin "tailwind-scrollbar-hide";
+@plugin "tailwindcss-animate";
+@plugin "glare-typography";
+@plugin "mapping-color-system-v4";
+@import "mapping-color-system-v4/tailwindVars.css";
 ```
----
-## Step 3: Set Up Theme Provider
+### For Tailwind CSS v3
-### Next.js App Router
+First install the mapping color system:
-```tsx
-// app/layout.tsx
-import { ThemeProvider } from '@torch-ai/torch-glare';
-import './globals.css';
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>
-        <ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
-          {children}
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}
+```bash
+npm install mapping-color-system@latest
 ```
-### Next.js Pages Router
+Then configure your `tailwind.config.js`:
-```tsx
-// pages/_app.tsx
-import { ThemeProvider } from '@torch-ai/torch-glare';
-import type { AppProps } from 'next/app';
-import '../styles/globals.css';
+```js
+const { plugin, mappingVars } = require('mapping-color-system')
-export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
-      <Component {...pageProps} />
-    </ThemeProvider>
-  );
-}
+module.exports = {
+    content: [
+        // put the path from your glare.json file, e.g.:
+        "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            colors: mappingVars,
+        },
+    },
+    plugins: [
+        plugin,
+        require('tailwindcss-animate'),
+        require('tailwind-scrollbar-hide'),
+        require('glare-typography'),
+        require('glare-torch-mode'),
+        function ({ addVariant }) {
+            addVariant("rtl", '&[dir="rtl"]');
+            addVariant("ltr", '&[dir="ltr"]');
+        },
+    ],
+};
 ```
-### Vite + React
-```tsx
-// main.tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { ThemeProvider } from '@torch-ai/torch-glare';
-import App from './App';
-import './index.css';
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>
-);
-```
+Important:
+- Specify the component path in the `content` array matching your `glare.json` path
+- Add all plugins to the `plugins` array
+- Add `mappingVars` to the `extend.colors` object
 ---
-## Step 4: Create Your First Component
+## Step 4: Add Components
-Let's create a simple welcome card using TORCH Glare components.
+Run the following command to see a dropdown list of available components:
-### Basic Card
+```bash
+npx torch-glare@latest add
+```
-```tsx
-// components/WelcomeCard.tsx
-import { Button } from '@torch-ai/torch-glare';
+Or specify which component you want:
-export default function WelcomeCard() {
-  return (
-    <div className="
-      bg-background-presentation-form-base
-      border border-border-presentation-global-primary
-      rounded-lg p-6 max-w-md
-    ">
-      <h1 className="typography-display-medium-bold mb-2">
-        Welcome to TORCH Glare! 👋
-      </h1>
-      <p className="typography-body-medium-regular text-content-presentation-global-secondary mb-4">
-        You've successfully set up TORCH Glare. Let's build something amazing!
-      </p>
-      <Button theme="light" variant="PrimeStyle">
-        Get Started
-      </Button>
-    </div>
-  );
-}
+```bash
+npx torch-glare@latest add Button
 ```
-### Use the Component
-```tsx
-// app/page.tsx or src/App.tsx
-import WelcomeCard from './components/WelcomeCard';
+You can add multiple components at once:
-export default function Home() {
-  return (
-    <div className="min-h-screen flex items-center justify-center p-4">
-      <WelcomeCard />
-    </div>
-  );
-}
+```bash
+npx torch-glare@latest add Button Input Badge
 ```
 ---
-## Step 5: Add Theme Toggle
-Let's add a theme switcher to test the theming system.
+## Step 5: Use Components
-### Create Theme Toggle Component
+Import and use the components from the path configured in `glare.json`:
 ```tsx
-// components/ThemeToggle.tsx
-'use client'; // Add this for Next.js App Router
-import { useTheme, Button } from '@torch-ai/torch-glare';
-export default function ThemeToggle() {
-  const { theme, updateTheme } = useTheme();
-  const toggleTheme = () => {
-    updateTheme(theme === 'light' ? 'dark' : 'light');
-  };
+import { Button } from "./components/Button";
+function App() {
   return (
-    <Button
-      theme={theme as any}
-      variant="ContStyle"
-      onClick={toggleTheme}
-      buttonType="icon"
-      size="M"
-    >
-      {theme === 'light' ? '🌙' : '☀️'}
+    <Button variant="PrimeStyle" size="M">
+      Click Me
     </Button>
   );
 }
 ```
-### Add to Layout
-```tsx
-// app/layout.tsx (or wherever your layout is)
-import ThemeToggle from './components/ThemeToggle';
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>
-        <ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
-          <div className="fixed top-4 right-4 z-50">
-            <ThemeToggle />
-          </div>
-          {children}
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}
-```
----
-## Step 6: Explore More Components
-Now that you have the basics set up, let's try a few more components.
 ### Button Variants
 ```tsx
-import { Button } from '@torch-ai/torch-glare';
+import { Button } from "./components/Button";
 export default function ButtonShowcase() {
   return (
     <div className="flex gap-2 flex-wrap">
-      <Button theme="light" variant="PrimeStyle">
-        Primary
-      </Button>
-      <Button theme="light" variant="ContStyle">
-        Contrast
-      </Button>
-      <Button theme="light" variant="SecondStyle">
-        Secondary
-      </Button>
-      <Button theme="light" variant="BorderStyle">
-        Outline
-      </Button>
+      <Button variant="PrimeStyle">Primary</Button>
+      <Button variant="ContStyle">Contrast</Button>
+      <Button variant="SecondStyle">Secondary</Button>
+      <Button variant="BorderStyle">Outline</Button>
     </div>
   );
 }
 ```
-### Input Field
-```tsx
-import { InputField } from '@torch-ai/torch-glare';
-import { useState } from 'react';
-export default function InputDemo() {
-  const [email, setEmail] = useState('');
+### Theming
-  return (
-    <InputField
-      theme="light"
-      label="Email Address"
-      type="email"
-      value={email}
-      onChange={(e) => setEmail(e.target.value)}
-      placeholder="you@example.com"
-    />
-  );
-}
-```
-### Badge Component
+Most components accept a `theme` prop for per-component theming:
 ```tsx
-import { Badge } from '@torch-ai/torch-glare';
-export default function BadgeDemo() {
-  return (
-    <div className="flex gap-2">
-      <Badge theme="light" variant="SecondStyle">
-        New
-      </Badge>
-      <Badge theme="light" variant="PrimeStyle">
-        Featured
-      </Badge>
-      <Badge theme="light" variant="ContStyle">
-        Popular
-      </Badge>
-    </div>
-  );
-}
+<Button theme="light" variant="PrimeStyle">Light Theme</Button>
+<Button theme="dark" variant="PrimeStyle">Dark Theme</Button>
 ```
----
-## Step 7: Understanding the Design System
-### Color System
-TORCH Glare uses a comprehensive color token system:
+Or use the `ThemeProvider` for app-wide theming:
 ```tsx
-// Background colors
-<div className="bg-background-system-body-primary">
-<div className="bg-background-presentation-form-base">
-<div className="bg-background-presentation-action-primary">
-// Text colors
-<p className="text-content-presentation-global-primary">
-<p className="text-content-presentation-global-secondary">
-<p className="text-content-presentation-state-success">
-// Border colors
-<div className="border border-border-presentation-global-primary">
-<div className="border border-border-presentation-action-hover">
-```
-### Typography System
-```tsx
-// Display text (large headings)
-<h1 className="typography-display-large-bold">
-// Headers (section titles)
-<h2 className="typography-headers-large-semibold">
-// Body text (paragraphs)
-<p className="typography-body-medium-regular">
-// Labels (form labels, tags)
-<label className="typography-labels-medium-semibold">
-```
-### Theme Props
-Most components accept a `theme` prop:
-```tsx
-<Button theme="light" variant="PrimeStyle">
-  Light Theme
-</Button>
-<Button theme="dark" variant="PrimeStyle">
-  Dark Theme
-</Button>
-```
----
-## Step 8: Build a Complete Example
-Let's combine everything into a complete example:
-```tsx
-// components/UserProfile.tsx
-'use client';
-import { useState } from 'react';
-import {
-  Button,
-  InputField,
-  Badge,
-  Avatar,
-} from '@torch-ai/torch-glare';
-export default function UserProfile() {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const handleSave = () => {
-    console.log('Saving:', { name, email });
-  };
+import { ThemeProvider } from "./providers/ThemeProvider";
+export default function RootLayout({ children }) {
   return (
-    <div className="
-      max-w-2xl mx-auto p-6
-      bg-background-presentation-form-base
-      border border-border-presentation-global-primary
-      rounded-lg
-    ">
-      {/* Header */}
-      <div className="flex items-center gap-4 mb-6">
-        <Avatar
-          theme="light"
-          src="/avatar.jpg"
-          alt="User"
-          size="L"
-        />
-        <div>
-          <h2 className="typography-headers-large-bold">
-            Profile Settings
-          </h2>
-          <Badge theme="light" variant="SecondStyle">
-            Pro Member
-          </Badge>
-        </div>
-      </div>
-      {/* Form */}
-      <div className="space-y-4">
-        <InputField
-          theme="light"
-          label="Full Name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="Enter your name"
-        />
-        <InputField
-          theme="light"
-          label="Email Address"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="you@example.com"
-        />
-        <div className="flex gap-2 justify-end">
-          <Button theme="light" variant="BorderStyle">
-            Cancel
-          </Button>
-          <Button theme="light" variant="PrimeStyle" onClick={handleSave}>
-            Save Changes
-          </Button>
-        </div>
-      </div>
-    </div>
+    <ThemeProvider defaultTheme="light">
+      {children}
+    </ThemeProvider>
   );
 }
 ```
@@ -504,56 +223,29 @@ export default function UserProfile() {
 ## Common Issues and Solutions
-### Issue: Styles Not Applied
+### Styles Not Applied
-**Problem**: Components don't have styling.
-**Solution**: Make sure you've:
+Make sure you've:
 1. Imported `globals.css` with Tailwind directives
-2. Configured `tailwind.config.ts` correctly
-3. Added TORCH Glare plugins
-### Issue: Theme Not Switching
+2. Configured `tailwind.config` correctly with all plugins
+3. Added the correct component path to the `content` array
-**Problem**: Theme toggle doesn't work.
+### Theme Not Switching
-**Solution**: Ensure:
+Ensure:
 1. `ThemeProvider` wraps your app
-2. Component is marked with `'use client'` (Next.js)
+2. Component is marked with `'use client'` (Next.js App Router)
 3. Both `mapping-color-system` and `glare-torch-mode` plugins are installed
-### Issue: TypeScript Errors
+---
-**Problem**: Type errors with components.
+## Manual Installation
-**Solution**:
-```bash
-npm install --save-dev @types/react @types/node
-```
----
+If you have issues with the CLI, see the [manual installation guide](https://torch-glare.com/getting-started/manual) for step-by-step instructions.
 ## Next Steps
-Congratulations! You've successfully set up TORCH Glare. Here's what to explore next:
 1. **[Building Your First Form](./building-first-form.md)** - Create a complete form with validation
 2. **[Theming Basics](./theming-basics.md)** - Customize colors and themes
 3. **[Component Composition](./component-composition.md)** - Build complex UIs
 4. **[Component Documentation](../components/)** - Explore all available components
-## Additional Resources
-- [GitHub Repository](https://github.com/torch-ai/torch-glare)
-- [Component API Reference](../components/)
-- [Tailwind Plugins Reference](../reference/tailwind-plugins.md)
-- [Hooks Reference](../reference/hooks.md)
-## Need Help?
-- Check the [FAQ](../faq.md)
-- Read [Common Issues](../troubleshooting.md)
-- Join our [Discord Community](https://discord.gg/torch-glare)
-- Report issues on [GitHub](https://github.com/torch-ai/torch-glare/issues)
-Happy coding! 🚀

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "type": "module",
   "license": "MIT",
   "files": [