@ambuj.bhaskar/react-component-library 0.18.2-alpha → 0.18.4-alpha

package/README.md

@@ -1,155 +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
-
----
-
-### 🎨 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.
-
----
-
-## 🛠️ How to Add & Export a New Component
-
-To add a new component to the library:
-
-### **Step 1 – Create Base Files**
-
-Inside `src/components/<ComponentName>/`, create the following:
-
-```
-<ComponentName>.tsx            # Component logic
-<ComponentName>.stories.tsx    # Storybook stories
-<ComponentName>.types.ts       # Type definitions
-<ComponentName>.module.scss    # Component-specific styles
-index.tsx                      # Local export
-```
-
-### **Step 2 – Export the Component Locally**
-
-In `src/components/<ComponentName>/index.tsx`:
-
-```ts
-export { ComponentName } from "./ComponentName";
-```
-
-### **Step 3 – Export the Component Globally**
-
-In `src/index.tsx`:
-
-```ts
-export * from "./components/ComponentName";
-export type { ComponentNameProps } from "./components/ComponentName/ComponentName.types";
-```
-
----
-
-## 📁 Folder Structure
-
-```
-src/
-├── components/
-│   └── <ComponentName>/
-│       ├── <ComponentName>.tsx
-│       ├── <ComponentName>.types.ts
-│       ├── <ComponentName>.stories.tsx
-│       ├── <ComponentName>.module.scss
-│       └── index.tsx
-│
-├── utils/
-│   └── theme/
-│       ├── ThemeProvider.tsx
-│       ├── useTheme.ts
-│       └── tokens.ts
-│
-└── index.tsx
-
-```
-
----
-
-## 🌈 Theming Example
-
-```tsx
-import { ThemeProvider, useTheme } from "your-ui-library";
-
-const App = () => {
-  return (
-    <ThemeProvider theme="dark">
-      <YourApp />
-    </ThemeProvider>
-  );
-};
-
-const CustomComponent = () => {
-  const { colors } = useTheme();
-  return <div style={{ color: colors.primary }}>Themed Text</div>;
-};
-```
-
----
-
-## 🧪 Storybook
-
-We use **Storybook** for isolated component development and documentation. Run:
-
-```bash
-npm run storybook
-```
-
----
-
-## 📦 Installation
-
-Coming soon when published to npm. For now, use via a GitHub reference or local link.
-
----
-
-## 🧩 Tech Stack
-
-- **React**
-- **TypeScript**
-- **SCSS Modules**
-- **Storybook**
-- **Jest** (optional for testing setup)
-
----
-
-## 🤝 Contribution Guide
-
-1. Clone the repo
-2. Create a new component under `src/components/`
-3. Follow the export guide above
-4. Add stories in Storybook
-5. Run `npm run lint` and `npm run build` before PR
-
----
-
-## 📝 License
-
-MIT – © \[Awiros]
-
----
+# 🚀 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);
+#!/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);