@ambuj.bhaskar/react-component-library 0.30.14 → 0.30.16

package/README.md

@@ -1,34 +1,34 @@
-# 🚀 React UI Library
-
-## A scalable, customizable, and accessible **React component library** designed for building modern UIs. This package includes reusable components, a flexible theming system, and a consistent icon set.
-
-## 📦 What's Included?
-
-### ✅ Components
-
-The library currently provides the following components:
-
-- **`Button`** – Customizable buttons with multiple variants and sizes
-- **`Input`** – Accessible input fields with optional icons and validation
-- **`Icon`** – A collection of SVG-based icons
-- **`Select`** – Single select dropdown component
-- **`MultiSelect`** – Multi-select dropdown with tags
-- **`Modal`** – Flexible modal dialog with header, body, and footer support
-- **`Backdrop`** – Dimmable background for modals or dialogs
-- **`DateRangePicker`** – Date picker for selecting start and end dates
-- **`ContactInput`** – A specialized input component for contact/email entry
-- **`Spinner`** – A loading spinner indicator
-- and more ...
-
----
-
-### 🎨 Theming
-
-The library supports **theme customization** using:
-
-- **`ThemeProvider`** – Wrap your app with this provider to apply a custom theme
-- **`useTheme()` hook** – Access the active theme and color palette in your components
-
-Themes are managed using a flexible token-based system and can be extended or overridden easily.
-
----
+# 🚀 React UI Library
+
+## A scalable, customizable, and accessible **React component library** designed for building modern UIs. This package includes reusable components, a flexible theming system, and a consistent icon set.
+
+## 📦 What's Included?
+
+### ✅ Components
+
+The library currently provides the following components:
+
+- **`Button`** – Customizable buttons with multiple variants and sizes
+- **`Input`** – Accessible input fields with optional icons and validation
+- **`Icon`** – A collection of SVG-based icons
+- **`Select`** – Single select dropdown component
+- **`MultiSelect`** – Multi-select dropdown with tags
+- **`Modal`** – Flexible modal dialog with header, body, and footer support
+- **`Backdrop`** – Dimmable background for modals or dialogs
+- **`DateRangePicker`** – Date picker for selecting start and end dates
+- **`ContactInput`** – A specialized input component for contact/email entry
+- **`Spinner`** – A loading spinner indicator
+- and more ...
+
+---
+
+### 🎨 Theming
+
+The library supports **theme customization** using:
+
+- **`ThemeProvider`** – Wrap your app with this provider to apply a custom theme
+- **`useTheme()` hook** – Access the active theme and color palette in your components
+
+Themes are managed using a flexible token-based system and can be extended or overridden easily.
+
+---

package/bin/cli.js

@@ -1,87 +1,87 @@
 #!/usr/bin/env node
-
-import boxen from "boxen";
-import chalk from "chalk";
-import { Command } from "commander";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-const program = new Command();
-
-// Get __dirname equivalent in ES Modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Styled banner
-console.log(
-  boxen(chalk.bold.cyan("⚡ AWI CLI - Component Generator"), {
-    padding: 1,
-    margin: 1,
-    borderStyle: "round",
-    borderColor: "cyan",
-  })
-);
-
-program
-  .name("awi")
-  .description(chalk.green("A CLI tool for generating components and utilities"))
-  .version(chalk.yellow("1.0.0"));
-
-// Component Generator Command
-program
-  .command("generate <type> <name>")
-  .alias("g")
-  .description(chalk.blue("Generate a new component or utility"))
-  .action((type, name) => {
-    if (type === "component" || type === "c") {
-      createComponent(name);
-    } else {
-      console.log(chalk.red.bold(`❌ Unknown type: ${type}`));
-    }
-  });
-
-function createComponent(componentName) {
-  const componentDir = path.join(process.cwd(), componentName);
-  const formattedName = componentName.replace(/-/g, ".");
-  const pascalCaseName = formattedName
-    .split(".")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join("");
-
-  // Ensure the directory exists
-  fs.mkdirSync(componentDir, { recursive: true });
-
-  // Define file contents
-  const indexContent = `import { ${pascalCaseName} } from "./${formattedName}";\nexport type { ${pascalCaseName}Props } from "./${formattedName}.type";\n\nexport default ${pascalCaseName};`;
-
-  const componentContent = `import "./${formattedName}.css";\nimport { ${pascalCaseName}Props } from "./${formattedName}.type";\n\nexport const ${pascalCaseName}: React.FC<${pascalCaseName}Props> = ({\n  title = "${pascalCaseName}",\n}) => {\n  return <div>{title}</div>;\n};`;
-
-  const typeContent = `export type ${pascalCaseName}Props = {\n  title?: string;\n};`;
-
-  const storiesContent = `import type { Meta, StoryObj } from "@storybook/react";\nimport ${pascalCaseName} from "./";\n\nconst meta: Meta<typeof ${pascalCaseName}> = {\n  component: ${pascalCaseName},\n  title: "Components/Atoms/${pascalCaseName}",\n  tags: ["autodocs"],\n  parameters: {\n    layout: "centered",\n    docs: {\n      panelPosition: "right",\n    },\n  },\n  argTypes: {\n    title: {\n      control: "text",\n      description: "Title of the component",\n      table: {\n        type: { summary: "string" },\n        defaultValue: { summary: "${pascalCaseName}" },\n      },\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof ${pascalCaseName}>;\n\nexport const Default: Story = {\n  args: { title: "${pascalCaseName}" },\n};`;
-
-  // Create and write files
-  const files = {
-    "index.tsx": indexContent,
-    [`${formattedName}.tsx`]: componentContent,
-    [`${formattedName}.type.ts`]: typeContent,
-    [`${formattedName}.stories.tsx`]: storiesContent,
-    [`${formattedName}.css`]: "",
-    [`${formattedName}.utils.ts`]: "",
-  };
-
-  for (const [file, content] of Object.entries(files)) {
-    fs.writeFileSync(path.join(componentDir, file), content, { flag: "w" });
-  }
-
-  console.log(
-    boxen(
-      chalk.greenBright(`✅ Component '${componentName}' created successfully!`),
-      { padding: 1, margin: 1, borderStyle: "double", borderColor: "green" }
-    )
-  );
-}
-
-// Parse CLI arguments
-program.parse(process.argv);
+
+import boxen from "boxen";
+import chalk from "chalk";
+import { Command } from "commander";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const program = new Command();
+
+// Get __dirname equivalent in ES Modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Styled banner
+console.log(
+  boxen(chalk.bold.cyan("⚡ AWI CLI - Component Generator"), {
+    padding: 1,
+    margin: 1,
+    borderStyle: "round",
+    borderColor: "cyan",
+  })
+);
+
+program
+  .name("awi")
+  .description(chalk.green("A CLI tool for generating components and utilities"))
+  .version(chalk.yellow("1.0.0"));
+
+// Component Generator Command
+program
+  .command("generate <type> <name>")
+  .alias("g")
+  .description(chalk.blue("Generate a new component or utility"))
+  .action((type, name) => {
+    if (type === "component" || type === "c") {
+      createComponent(name);
+    } else {
+      console.log(chalk.red.bold(`❌ Unknown type: ${type}`));
+    }
+  });
+
+function createComponent(componentName) {
+  const componentDir = path.join(process.cwd(), componentName);
+  const formattedName = componentName.replace(/-/g, ".");
+  const pascalCaseName = formattedName
+    .split(".")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+
+  // Ensure the directory exists
+  fs.mkdirSync(componentDir, { recursive: true });
+
+  // Define file contents
+  const indexContent = `import { ${pascalCaseName} } from "./${formattedName}";\nexport type { ${pascalCaseName}Props } from "./${formattedName}.type";\n\nexport default ${pascalCaseName};`;
+
+  const componentContent = `import "./${formattedName}.css";\nimport { ${pascalCaseName}Props } from "./${formattedName}.type";\n\nexport const ${pascalCaseName}: React.FC<${pascalCaseName}Props> = ({\n  title = "${pascalCaseName}",\n}) => {\n  return <div>{title}</div>;\n};`;
+
+  const typeContent = `export type ${pascalCaseName}Props = {\n  title?: string;\n};`;
+
+  const storiesContent = `import type { Meta, StoryObj } from "@storybook/react";\nimport ${pascalCaseName} from "./";\n\nconst meta: Meta<typeof ${pascalCaseName}> = {\n  component: ${pascalCaseName},\n  title: "Components/Atoms/${pascalCaseName}",\n  tags: ["autodocs"],\n  parameters: {\n    layout: "centered",\n    docs: {\n      panelPosition: "right",\n    },\n  },\n  argTypes: {\n    title: {\n      control: "text",\n      description: "Title of the component",\n      table: {\n        type: { summary: "string" },\n        defaultValue: { summary: "${pascalCaseName}" },\n      },\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof ${pascalCaseName}>;\n\nexport const Default: Story = {\n  args: { title: "${pascalCaseName}" },\n};`;
+
+  // Create and write files
+  const files = {
+    "index.tsx": indexContent,
+    [`${formattedName}.tsx`]: componentContent,
+    [`${formattedName}.type.ts`]: typeContent,
+    [`${formattedName}.stories.tsx`]: storiesContent,
+    [`${formattedName}.css`]: "",
+    [`${formattedName}.utils.ts`]: "",
+  };
+
+  for (const [file, content] of Object.entries(files)) {
+    fs.writeFileSync(path.join(componentDir, file), content, { flag: "w" });
+  }
+
+  console.log(
+    boxen(
+      chalk.greenBright(`✅ Component '${componentName}' created successfully!`),
+      { padding: 1, margin: 1, borderStyle: "double", borderColor: "green" }
+    )
+  );
+}
+
+// Parse CLI arguments
+program.parse(process.argv);