@iarunsaragadam/ngx-tailwind-flex-ui 0.0.1-canary.0.0

package/libs/ngx-tailwind-flex-ui/src/lib/button/button.component.stories.ts

@@ -0,0 +1,93 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { ButtonComponent } from './button.component';
+
+const meta: Meta<ButtonComponent> = {
+  title: 'Components/Button',
+  component: ButtonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'accent', 'outline', 'text'],
+      description: 'Button style variant',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the button',
+    },
+    class: {
+      control: 'text',
+      description: 'Additional Tailwind CSS classes for customization',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ButtonComponent>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<lib-button [variant]="variant" [disabled]="disabled">Primary Button</lib-button>`,
+  }),
+};
+
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+    disabled: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<lib-button [variant]="variant" [disabled]="disabled">Accent Button</lib-button>`,
+  }),
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    disabled: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<lib-button [variant]="variant" [disabled]="disabled">Outline Button</lib-button>`,
+  }),
+};
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    disabled: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<lib-button [variant]="variant" [disabled]="disabled">Text Button</lib-button>`,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    disabled: true,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<lib-button [variant]="variant" [disabled]="disabled">Disabled Button</lib-button>`,
+  }),
+};
+
+export const CustomStyled: Story = {
+  args: {
+    variant: 'primary',
+    class: 'text-lg px-6 py-3 bg-green-500 hover:bg-green-600',
+  },
+  render: (args) => ({
+    props: args,
+    template: `<lib-button [variant]="variant" [class]="class">Custom Styled Button</lib-button>`,
+  }),
+};

package/libs/ngx-tailwind-flex-ui/src/lib/button/button.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'lib-button',
+  standalone: true,
+  templateUrl: './button.component.html',
+  styles: [], // No inline styles; Tailwind handles it
+})
+export class ButtonComponent {
+  @Input() variant: 'primary' | 'accent' | 'outline' | 'text' = 'primary';
+  @Input() disabled = false;
+  @Input() class = ''; // Allow users to pass custom Tailwind classes
+
+  @HostBinding('class') get hostClasses() {
+    const baseClasses =
+      'inline-flex items-center justify-center px-4 py-2 rounded-md font-medium transition-colors duration-200';
+    const variantClasses = {
+      primary:
+        'bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+      accent:
+        'bg-purple-600 text-white hover:bg-purple-700 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2',
+      outline:
+        'border border-gray-300 text-gray-700 hover:bg-gray-100 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2',
+      text: 'text-gray-700 hover:bg-gray-100 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2',
+    };
+    const disabledClasses = this.disabled
+      ? 'opacity-50 cursor-not-allowed'
+      : '';
+
+    return `${baseClasses} ${variantClasses[this.variant]} ${disabledClasses} ${
+      this.class
+    }`.trim();
+  }
+}

package/libs/ngx-tailwind-flex-ui/src/styles.scss

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

package/libs/ngx-tailwind-flex-ui/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

package/libs/ngx-tailwind-flex-ui/tailwind.config.js

@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/libs/ngx-tailwind-flex-ui/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/libs/ngx-tailwind-flex-ui/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "**/*.stories.ts",
+    "**/*.stories.js"
+  ],
+  "include": ["src/**/*.ts"]
+}

package/libs/ngx-tailwind-flex-ui/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/libs/ngx-tailwind-flex-ui/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

package/nx.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "production": [
+      "default",
+      "!{projectRoot}/.eslintrc.json",
+      "!{projectRoot}/eslint.config.mjs",
+      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/src/test-setup.[jt]s",
+      "!{projectRoot}/test-setup.[jt]s",
+      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+      "!{projectRoot}/.storybook/**/*",
+      "!{projectRoot}/tsconfig.storybook.json"
+    ],
+    "sharedGlobals": ["{workspaceRoot}/.github/workflows/ci.yml"]
+  },
+  "nxCloudId": "67bd132ff78b9f3620c4d81f",
+  "targetDefaults": {
+    "@angular-devkit/build-angular:application": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
+    },
+    "@nx/eslint:lint": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.eslintrc.json",
+        "{workspaceRoot}/.eslintignore",
+        "{workspaceRoot}/eslint.config.mjs"
+      ]
+    },
+    "@nx/jest:jest": {
+      "cache": true,
+      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
+      "options": {
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "e2e-ci--**/*": {
+      "dependsOn": ["^build"]
+    },
+    "@nx/angular:package": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
+    },
+    "build-storybook": {
+      "cache": true
+    }
+  },
+  "plugins": [
+    {
+      "plugin": "@nx/playwright/plugin",
+      "options": {
+        "targetName": "e2e"
+      }
+    },
+    {
+      "plugin": "@nx/eslint/plugin",
+      "options": {
+        "targetName": "lint"
+      }
+    },
+    {
+      "plugin": "@nx/storybook/plugin",
+      "options": {
+        "serveStorybookTargetName": "storybook",
+        "buildStorybookTargetName": "build-storybook",
+        "testStorybookTargetName": "test-storybook",
+        "staticStorybookTargetName": "static-storybook"
+      }
+    }
+  ],
+  "generators": {
+    "@nx/angular:application": {
+      "e2eTestRunner": "playwright",
+      "linter": "eslint",
+      "style": "scss",
+      "unitTestRunner": "jest"
+    },
+    "@nx/angular:library": {
+      "linter": "eslint",
+      "unitTestRunner": "jest"
+    },
+    "@nx/angular:component": {
+      "style": "css"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@iarunsaragadam/ngx-tailwind-flex-ui",
+  "version": "0.0.1-canary.0.0",
+  "license": "MIT",
+  "scripts": {
+    "test": "npx nx run-many --target=test",
+    "build": "npx nx run-many --target=build",
+    "lint": "npx nx run-many --target=lint",
+    "e2e": "npx nx run-many --target=e2e"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "~19.1.0",
+    "@angular/common": "~19.1.0",
+    "@angular/compiler": "~19.1.0",
+    "@angular/core": "~19.1.0",
+    "@angular/forms": "~19.1.0",
+    "@angular/platform-browser": "~19.1.0",
+    "@angular/platform-browser-dynamic": "~19.1.0",
+    "@angular/router": "~19.1.0",
+    "rxjs": "~7.8.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~19.1.0",
+    "@angular-devkit/core": "~19.1.0",
+    "@angular-devkit/schematics": "~19.1.0",
+    "@angular/cli": "~19.1.0",
+    "@angular/compiler-cli": "~19.1.0",
+    "@angular/language-service": "~19.1.0",
+    "@compodoc/compodoc": "^1.1.26",
+    "@eslint/js": "^9.8.0",
+    "@nx/angular": "20.4.6",
+    "@nx/devkit": "20.4.6",
+    "@nx/eslint": "20.4.6",
+    "@nx/eslint-plugin": "20.4.6",
+    "@nx/jest": "20.4.6",
+    "@nx/js": "20.4.6",
+    "@nx/playwright": "20.4.6",
+    "@nx/storybook": "^20.4.6",
+    "@nx/web": "20.4.6",
+    "@nx/workspace": "20.4.6",
+    "@playwright/test": "^1.36.0",
+    "@schematics/angular": "~19.1.0",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/angular": "^8.4.6",
+    "@storybook/core-server": "^8.4.6",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/test-runner": "^0.19.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@swc-node/register": "~1.9.1",
+    "@swc/core": "~1.5.7",
+    "@swc/helpers": "~0.5.11",
+    "@types/jest": "^29.5.12",
+    "@types/node": "18.16.9",
+    "@typescript-eslint/utils": "^8.19.0",
+    "angular-eslint": "^19.0.2",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.8.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-playwright": "^1.6.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-preset-angular": "~14.4.0",
+    "jsonc-eslint-parser": "^2.1.0",
+    "ng-packagr": "~19.1.0",
+    "nx": "20.4.6",
+    "postcss": "^8.5.3",
+    "postcss-url": "~10.1.3",
+    "prettier": "^2.6.2",
+    "storybook": "^8.4.6",
+    "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.1.0",
+    "ts-node": "10.9.1",
+    "tslib": "^2.3.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.19.0"
+  }
+}

package/tsconfig.base.json

@@ -0,0 +1,22 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": ".",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "esnext",
+    "lib": ["es2020", "dom"],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@ngx-tailwind-flex-ui": ["libs/ngx-tailwind-flex-ui/src/index.ts"]
+    }
+  },
+  "exclude": ["node_modules", "tmp"]
+}