@malik72org/storybook 0.0.0

package/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs"
+  ],
+  "framework": "@storybook/react-vite"
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,32 @@
+import type { Preview } from '@storybook/react-vite'
+import "primereact/resources/themes/lara-light-blue/theme.css";
+import "primereact/resources/primereact.min.css";
+// import "primeicons/primeicons.css";
+import '../../storybook/index.css';
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'Maroon', value: '#0f0' },
+        { name: 'Red', value: '#f00' },
+        { name: 'Green', value: '#0f0' },
+        { name: 'Blue', value: '#00f' },
+      ]
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/eslint.config.js

@@ -0,0 +1,23 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([globalIgnores(['dist']), {
+  files: ['**/*.{ts,tsx}'],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+    reactHooks.configs.flat.recommended,
+    reactRefresh.configs.vite,
+  ],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+}, ...storybook.configs["flat/recommended"]])

package/index.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+
+
+:root {
+    --rhl-input-border-color: #000;
+    --rhl-input-border-thickness: 2px;
+    --rhl-input-focus-border-color: #0a0;
+    --rhl-input-error-border-color: #dc2626;
+  }

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@malik72org/storybook",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "primereact": "^10.9.7",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.2.8",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-onboarding": "^10.2.8",
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "ajv": "^8.13.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.2.8",
+    "globals": "^16.5.0",
+    "playwright": "^1.58.2",
+    "primereact": "^10.9.7",
+    "postcss": "^8.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.2.8",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/src/components/button/Button.stories.tsx

@@ -0,0 +1,37 @@
+import type { StoryObj, Meta } from '@storybook/react-vite';
+import { Button } from './Button';
+
+
+type Story = StoryObj<Meta<typeof Button>>;
+
+const meta = {
+    title: 'Inputs/Button',
+    component: Button,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+
+export const Dark: Story = {
+    args: {
+        label: 'Click me!',
+        onClick: () => alert('Button clicked me!')
+    },
+};
+
+export const Light = {
+    args: {
+        label: 'Secondary Button',
+        onClick: () => alert('Button clicked! me')
+    },
+};
+
+export const Maroon = {
+    args: {
+        label: 'Secondary Button',
+        onClick: () => alert('Button clicked me!')
+    },
+
+}
+

package/src/components/button/Button.tsx

@@ -0,0 +1,13 @@
+interface ButtonProps {
+    label: string;
+    onClick: () => void;
+}
+
+export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
+    return (
+        <button onClick={onClick}
+            style={{ width: 'full' }}>
+            {label}
+        </button>
+    );
+}

package/src/components/inputwrapper/InputWrapper.tsx

@@ -0,0 +1,20 @@
+interface InputWrapperProps {
+    label?: string;
+    error?: string;
+    children: React.ReactNode;
+    labelClassName?: string;
+    errorClassName?: string;
+    wrapperClassName?: string;
+}
+
+export const InputWrapper: React.FC<InputWrapperProps> = ({
+    label, error, children, labelClassName, errorClassName, wrapperClassName,
+}) => {
+    return (
+        <div className={`flex flex-col gap-1 ${wrapperClassName}`}>
+            {label && <label className={`${labelClassName}`}>{label}</label>}
+            {children}
+            {error && <small className={`p-error ${errorClassName}`}>{error}</small>}
+        </div>
+    );
+}

package/src/components/textinput/TextInput.css

@@ -0,0 +1,22 @@
+.rhl-text-input {
+    border-color: var(--rhl-input-border-color, #d1d5db);   /* default gray-300 */
+    border-width: var(--rhl-input-border-thickness, 1px);
+    border-style: solid;
+    padding: var(--rhl-input-padding, 0.5rem);
+    border-radius: var(--rhl-input-border-radius, 0.25rem);
+  }
+  
+  .rhl-text-input:focus {
+    border-color: var(--rhl-input-focus-border-color, #3b82f6); /* blue-500 */
+    outline: none;
+    box-shadow: var(--rhl-input-focus-shadow, 0 0 0 2px rgba(59,130,246,0.2));
+  }
+  
+  .rhl-text-input.rhl-invalid {
+    border-color: var(--rhl-input-error-border-color, #ef4444); /* red-500 */
+  }
+  
+  .rhl-error {
+    color: var(--rhl-error-color, #ef4444);
+    font-size: 0.875rem;
+  }

package/src/components/textinput/TextInput.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryFn } from "@storybook/react";
+import { InputTextField } from "./TextInput";
+
+export default {
+    title: "inputs/InputTextField",
+    component: InputTextField,
+    argTypes: {
+        onChange: { action: "changed" },
+    },
+} as Meta;
+
+const Template: StoryFn = (args) => <InputTextField {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    label: "Default Label",
+    placeholder: "Enter text here",
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+    label: "Error Label",
+    placeholder: "Enter text here",
+    error: "This field is required",
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+    label: "With Value",
+    value: "Pre-filled value",
+    placeholder: "Enter text here",
+};
+
+export const WithLabelClassName = Template.bind({});
+WithLabelClassName.args = {
+    label: "With Label Class Name",
+    labelClassName: "text-red-500",
+    placeholder: "Enter text here",
+};

package/src/components/textinput/TextInput.tsx

@@ -0,0 +1,41 @@
+import { InputText } from "primereact/inputtext";
+import React from "react";
+import { InputWrapper } from "../inputwrapper/InputWrapper";
+import "./TextInput.css"
+
+interface Props {
+    label?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    error?: string;
+    placeholder?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    wrapperClassName?: string;
+    inputClassName?: string;
+}
+
+export const InputTextField: React.FC<Props> = ({
+    label,
+    value,
+    onChange,
+    error,
+    placeholder,
+    labelClassName,
+    errorClassName,
+    wrapperClassName,
+    inputClassName,
+}) => {
+    return (
+        <InputWrapper label={label} error={error} labelClassName={labelClassName} errorClassName={errorClassName} wrapperClassName={wrapperClassName}>
+            <InputText
+                value={value}
+                placeholder={placeholder}
+                onChange={(e: any) => onChange?.(e.target.value)}
+                className={`
+                    rhl-text-input
+                ${error ? 'rhl-invalid' : ''} ${inputClassName}`}
+            />
+        </InputWrapper>
+    );
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components/inputwrapper/InputWrapper';
+export * from './components/textinput/TextInput';
+export * from './components/button/Button';

package/src/stories/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,35 @@
+import './button.css';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};