@ambuj.bhaskar/react-component-library 0.16.1-alpha → 0.17.0-alpha

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 (3) hide show
  1. package/README.md +21 -21
  2. package/bin/cli.js +87 -87
  3. package/package.json +87 -84
package/README.md CHANGED
@@ -1,21 +1,21 @@
1
- # React UI library
2
-
3
- This package contains a UI library.
4
-
5
- The library provides `Components`, `Icons` as well as `Themes`.
6
-
7
- ## Components
8
-
9
- Currently it has support for the following components:
10
-
11
- - `Button`
12
- - `Input`
13
- - `Icon`
14
- - `Select`
15
- - `MultiSelect`
16
- - `Modal`
17
- - `DateRangePicker`
18
- - `ContactInput`
19
- - `Spinner`
20
-
21
- Theming can be done using `ThemeProvider`. And themes can be used via `useTheme` hook which exposes color pallette.
1
+ # React UI library
2
+
3
+ This package contains a UI library.
4
+
5
+ The library provides `Components`, `Icons` as well as `Themes`.
6
+
7
+ ## Components
8
+
9
+ Currently it has support for the following components:
10
+
11
+ - `Button`
12
+ - `Input`
13
+ - `Icon`
14
+ - `Select`
15
+ - `MultiSelect`
16
+ - `Modal`
17
+ - `DateRangePicker`
18
+ - `ContactInput`
19
+ - `Spinner`
20
+
21
+ Theming can be done using `ThemeProvider`. And themes can be used via `useTheme` hook which exposes color pallette.
package/bin/cli.js CHANGED
@@ -1,87 +1,87 @@
1
- #!/usr/bin/env node
2
-
3
- import boxen from "boxen";
4
- import chalk from "chalk";
5
- import { Command } from "commander";
6
- import fs from "fs";
7
- import path from "path";
8
- import { fileURLToPath } from "url";
9
-
10
- const program = new Command();
11
-
12
- // Get __dirname equivalent in ES Modules
13
- const __filename = fileURLToPath(import.meta.url);
14
- const __dirname = path.dirname(__filename);
15
-
16
- // Styled banner
17
- console.log(
18
- boxen(chalk.bold.cyan("⚡ AWI CLI - Component Generator"), {
19
- padding: 1,
20
- margin: 1,
21
- borderStyle: "round",
22
- borderColor: "cyan",
23
- })
24
- );
25
-
26
- program
27
- .name("awi")
28
- .description(chalk.green("A CLI tool for generating components and utilities"))
29
- .version(chalk.yellow("1.0.0"));
30
-
31
- // Component Generator Command
32
- program
33
- .command("generate <type> <name>")
34
- .alias("g")
35
- .description(chalk.blue("Generate a new component or utility"))
36
- .action((type, name) => {
37
- if (type === "component" || type === "c") {
38
- createComponent(name);
39
- } else {
40
- console.log(chalk.red.bold(`❌ Unknown type: ${type}`));
41
- }
42
- });
43
-
44
- function createComponent(componentName) {
45
- const componentDir = path.join(process.cwd(), componentName);
46
- const formattedName = componentName.replace(/-/g, ".");
47
- const pascalCaseName = formattedName
48
- .split(".")
49
- .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
50
- .join("");
51
-
52
- // Ensure the directory exists
53
- fs.mkdirSync(componentDir, { recursive: true });
54
-
55
- // Define file contents
56
- const indexContent = `import { ${pascalCaseName} } from "./${formattedName}";\nexport type { ${pascalCaseName}Props } from "./${formattedName}.type";\n\nexport default ${pascalCaseName};`;
57
-
58
- 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};`;
59
-
60
- const typeContent = `export type ${pascalCaseName}Props = {\n title?: string;\n};`;
61
-
62
- 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};`;
63
-
64
- // Create and write files
65
- const files = {
66
- "index.tsx": indexContent,
67
- [`${formattedName}.tsx`]: componentContent,
68
- [`${formattedName}.type.ts`]: typeContent,
69
- [`${formattedName}.stories.tsx`]: storiesContent,
70
- [`${formattedName}.css`]: "",
71
- [`${formattedName}.utils.ts`]: "",
72
- };
73
-
74
- for (const [file, content] of Object.entries(files)) {
75
- fs.writeFileSync(path.join(componentDir, file), content, { flag: "w" });
76
- }
77
-
78
- console.log(
79
- boxen(
80
- chalk.greenBright(`✅ Component '${componentName}' created successfully!`),
81
- { padding: 1, margin: 1, borderStyle: "double", borderColor: "green" }
82
- )
83
- );
84
- }
85
-
86
- // Parse CLI arguments
87
- program.parse(process.argv);
1
+ #!/usr/bin/env node
2
+
3
+ import boxen from "boxen";
4
+ import chalk from "chalk";
5
+ import { Command } from "commander";
6
+ import fs from "fs";
7
+ import path from "path";
8
+ import { fileURLToPath } from "url";
9
+
10
+ const program = new Command();
11
+
12
+ // Get __dirname equivalent in ES Modules
13
+ const __filename = fileURLToPath(import.meta.url);
14
+ const __dirname = path.dirname(__filename);
15
+
16
+ // Styled banner
17
+ console.log(
18
+ boxen(chalk.bold.cyan("⚡ AWI CLI - Component Generator"), {
19
+ padding: 1,
20
+ margin: 1,
21
+ borderStyle: "round",
22
+ borderColor: "cyan",
23
+ })
24
+ );
25
+
26
+ program
27
+ .name("awi")
28
+ .description(chalk.green("A CLI tool for generating components and utilities"))
29
+ .version(chalk.yellow("1.0.0"));
30
+
31
+ // Component Generator Command
32
+ program
33
+ .command("generate <type> <name>")
34
+ .alias("g")
35
+ .description(chalk.blue("Generate a new component or utility"))
36
+ .action((type, name) => {
37
+ if (type === "component" || type === "c") {
38
+ createComponent(name);
39
+ } else {
40
+ console.log(chalk.red.bold(`❌ Unknown type: ${type}`));
41
+ }
42
+ });
43
+
44
+ function createComponent(componentName) {
45
+ const componentDir = path.join(process.cwd(), componentName);
46
+ const formattedName = componentName.replace(/-/g, ".");
47
+ const pascalCaseName = formattedName
48
+ .split(".")
49
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
50
+ .join("");
51
+
52
+ // Ensure the directory exists
53
+ fs.mkdirSync(componentDir, { recursive: true });
54
+
55
+ // Define file contents
56
+ const indexContent = `import { ${pascalCaseName} } from "./${formattedName}";\nexport type { ${pascalCaseName}Props } from "./${formattedName}.type";\n\nexport default ${pascalCaseName};`;
57
+
58
+ 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};`;
59
+
60
+ const typeContent = `export type ${pascalCaseName}Props = {\n title?: string;\n};`;
61
+
62
+ 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};`;
63
+
64
+ // Create and write files
65
+ const files = {
66
+ "index.tsx": indexContent,
67
+ [`${formattedName}.tsx`]: componentContent,
68
+ [`${formattedName}.type.ts`]: typeContent,
69
+ [`${formattedName}.stories.tsx`]: storiesContent,
70
+ [`${formattedName}.css`]: "",
71
+ [`${formattedName}.utils.ts`]: "",
72
+ };
73
+
74
+ for (const [file, content] of Object.entries(files)) {
75
+ fs.writeFileSync(path.join(componentDir, file), content, { flag: "w" });
76
+ }
77
+
78
+ console.log(
79
+ boxen(
80
+ chalk.greenBright(`✅ Component '${componentName}' created successfully!`),
81
+ { padding: 1, margin: 1, borderStyle: "double", borderColor: "green" }
82
+ )
83
+ );
84
+ }
85
+
86
+ // Parse CLI arguments
87
+ program.parse(process.argv);
package/package.json CHANGED
@@ -1,84 +1,87 @@
1
- {
2
- "name": "@ambuj.bhaskar/react-component-library",
3
- "private": false,
4
- "version": "0.16.1-alpha",
5
- "type": "module",
6
- "files": [
7
- "dist"
8
- ],
9
- "main": "dist/index.umd.js",
10
- "module": "dist/index.js",
11
- "types": "dist/index.d.ts",
12
- "description": "A React component library for building UI components",
13
- "exports": {
14
- ".": {
15
- "import": "./dist/index.js",
16
- "require": "./dist/index.cjs",
17
- "default": "./dist/index.js"
18
- },
19
- "./style.css": "./dist/assets/index.css"
20
- },
21
- "bin": {
22
- "awi": "./bin/cli.js"
23
- },
24
- "scripts": {
25
- "dev": "storybook dev -p 6006",
26
- "build": "tsc -b && vite build",
27
- "lint": "eslint .",
28
- "preview": "vite preview",
29
- "start": "storybook dev -p 6006",
30
- "storybook": "storybook dev -p 6006",
31
- "build-storybook": "storybook build",
32
- "release": "tsc -b && vite build && npm publish --access public",
33
- "cli": "node ./bin/cli.js"
34
- },
35
- "dependencies": {
36
- "antd": "^5.23.0",
37
- "chart.js": "^4.4.9",
38
- "dayjs": "^1.11.13",
39
- "lodash": "^4.17.21",
40
- "react-chartjs-2": "^5.3.0"
41
- },
42
- "peerDependencies": {
43
- "react": ">=18.0.0",
44
- "react-dom": ">=18.0.0"
45
- },
46
- "devDependencies": {
47
- "@chromatic-com/storybook": "^3.2.3",
48
- "@eslint/js": "^9.17.0",
49
- "@newhighsco/storybook-addon-svgr": "^2.0.39",
50
- "@storybook/addon-essentials": "^8.4.7",
51
- "@storybook/addon-interactions": "^8.4.7",
52
- "@storybook/blocks": "^8.4.7",
53
- "@storybook/manager-api": "^8.4.7",
54
- "@storybook/react": "^8.4.7",
55
- "@storybook/react-vite": "^8.4.7",
56
- "@storybook/test": "^8.4.7",
57
- "@storybook/theming": "^8.4.7",
58
- "@types/lodash": "^4.17.15",
59
- "@types/react": "^18.3.18",
60
- "@types/react-dom": "^18.3.5",
61
- "@vitejs/plugin-react": "^4.3.4",
62
- "boxen": "^8.0.1",
63
- "chalk": "^5.4.1",
64
- "commander": "^11.0.0",
65
- "eslint": "^9.17.0",
66
- "eslint-plugin-react-hooks": "^5.0.0",
67
- "eslint-plugin-react-refresh": "^0.4.16",
68
- "eslint-plugin-storybook": "^0.11.1",
69
- "globals": "^15.14.0",
70
- "storybook": "^8.4.7",
71
- "typescript": "~5.6.2",
72
- "typescript-eslint": "^8.18.2",
73
- "vite": "^6.0.5",
74
- "vite-plugin-dts": "^4.4.0",
75
- "vite-plugin-lib-inject-css": "^2.2.1",
76
- "vite-plugin-svgr": "^4.3.0",
77
- "vite-tsconfig-paths": "^5.1.4"
78
- },
79
- "eslintConfig": {
80
- "extends": [
81
- "plugin:storybook/recommended"
82
- ]
83
- }
84
- }
1
+ {
2
+ "name": "@ambuj.bhaskar/react-component-library",
3
+ "private": false,
4
+ "version": "0.17.0-alpha",
5
+ "type": "module",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "main": "dist/index.umd.js",
10
+ "module": "dist/index.js",
11
+ "types": "dist/index.d.ts",
12
+ "description": "A React component library for building UI components",
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/index.js",
16
+ "require": "./dist/index.cjs",
17
+ "default": "./dist/index.js"
18
+ },
19
+ "./style.css": "./dist/assets/index.css"
20
+ },
21
+ "bin": {
22
+ "awi": "./bin/cli.js"
23
+ },
24
+ "scripts": {
25
+ "dev": "storybook dev -p 6006",
26
+ "build": "tsc -b && vite build",
27
+ "lint": "eslint .",
28
+ "preview": "vite preview",
29
+ "start": "storybook dev -p 6006",
30
+ "storybook": "storybook dev -p 6006",
31
+ "build-storybook": "storybook build",
32
+ "release": "tsc -b && vite build && npm publish --access public",
33
+ "cli": "node ./bin/cli.js"
34
+ },
35
+ "dependencies": {
36
+ "antd": "^5.23.0",
37
+ "chart.js": "^4.4.9",
38
+ "clsx": "^2.1.1",
39
+ "dayjs": "^1.11.13",
40
+ "lodash": "^4.17.21",
41
+ "react-chartjs-2": "^5.3.0",
42
+ "sass": "^1.89.0"
43
+ },
44
+ "peerDependencies": {
45
+ "react": ">=18.0.0",
46
+ "react-dom": ">=18.0.0"
47
+ },
48
+ "devDependencies": {
49
+ "@chromatic-com/storybook": "^3.2.3",
50
+ "@eslint/js": "^9.17.0",
51
+ "@newhighsco/storybook-addon-svgr": "^2.0.39",
52
+ "@storybook/addon-essentials": "^8.4.7",
53
+ "@storybook/addon-interactions": "^8.4.7",
54
+ "@storybook/blocks": "^8.4.7",
55
+ "@storybook/manager-api": "^8.4.7",
56
+ "@storybook/react": "^8.4.7",
57
+ "@storybook/react-vite": "^8.4.7",
58
+ "@storybook/test": "^8.4.7",
59
+ "@storybook/theming": "^8.4.7",
60
+ "@types/lodash": "^4.17.15",
61
+ "@types/react": "^18.3.18",
62
+ "@types/react-dom": "^18.3.5",
63
+ "@vitejs/plugin-react": "^4.3.4",
64
+ "boxen": "^8.0.1",
65
+ "chalk": "^5.4.1",
66
+ "commander": "^11.0.0",
67
+ "eslint": "^9.17.0",
68
+ "eslint-plugin-react-hooks": "^5.0.0",
69
+ "eslint-plugin-react-refresh": "^0.4.16",
70
+ "eslint-plugin-storybook": "^0.11.1",
71
+ "globals": "^15.14.0",
72
+ "sass-embedded": "^1.89.0",
73
+ "storybook": "^8.4.7",
74
+ "typescript": "~5.6.2",
75
+ "typescript-eslint": "^8.18.2",
76
+ "vite": "^6.0.5",
77
+ "vite-plugin-dts": "^4.4.0",
78
+ "vite-plugin-lib-inject-css": "^2.2.1",
79
+ "vite-plugin-svgr": "^4.3.0",
80
+ "vite-tsconfig-paths": "^5.1.4"
81
+ },
82
+ "eslintConfig": {
83
+ "extends": [
84
+ "plugin:storybook/recommended"
85
+ ]
86
+ }
87
+ }