@eintrek/erp-theme 1.0.0

package/README.md

@@ -0,0 +1,135 @@
+# ERP Theme - shadcn/ui Component Library
+
+A beautiful and reusable component library built with shadcn/ui, TypeScript, TailwindCSS, and Storybook.
+
+## Features
+
+- 🎨 Beautiful components based on shadcn/ui
+- 📚 Storybook for component documentation and testing
+- 🔧 TypeScript support
+- 🎯 TailwindCSS for styling
+- 📦 Ready to be packaged and used in Next.js projects
+- 🌙 Dark mode support
+- ♿ Accessibility-first design
+
+## Getting Started
+
+### Installation
+
+```bash
+npm install
+```
+
+### Development
+
+Start Storybook development server:
+
+```bash
+npm run storybook
+```
+
+Build the library:
+
+```bash
+npm run build
+```
+
+Build Storybook for production:
+
+```bash
+npm run build-storybook
+```
+
+## Usage in Next.js Project
+
+1. Install the package in your Next.js project:
+
+```bash
+npm install erp-theme
+```
+
+2. Import TailwindCSS configuration in your `tailwind.config.js`:
+
+```javascript
+import type { Config } from "tailwindcss";
+import erpThemeConfig from "erp-theme/tailwind.config";
+
+const config: Config = {
+  ...erpThemeConfig,
+  content: [
+    // your existing content paths
+    "./node_modules/erp-theme/dist/**/*.{js,ts,jsx,tsx}",
+    ...erpThemeConfig.content,
+  ],
+};
+
+export default config;
+```
+
+3. Import the CSS variables in your global CSS:
+
+```css
+@import "erp-theme/dist/globals.css";
+```
+
+4. Use the components:
+
+```tsx
+import { Button, Card, CardContent, CardHeader, CardTitle } from "erp-theme";
+
+export default function MyPage() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Hello World</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Components
+
+- **Button** - Versatile button component with multiple variants
+- **Card** - Card container with header, content, and footer sections
+
+More components coming soon!
+
+## Development
+
+### Project Structure
+
+```
+src/
+├── components/
+│   └── ui/
+│       ├── button.tsx
+│       ├── button.stories.tsx
+│       ├── card.tsx
+│       └── card.stories.tsx
+├── lib/
+│   └── utils.ts
+└── index.ts
+```
+
+### Adding New Components
+
+1. Create the component in `src/components/ui/`
+2. Create corresponding stories in the same directory
+3. Export the component from `src/index.ts`
+4. Update this README
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch
+3. Commit your changes
+4. Push to the branch
+5. Create a Pull Request
+
+## License
+
+MIT

package/dist/components/ui/Form.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface FormField {
+    name: string;
+    label: string;
+    type: string;
+    placeholder: string;
+    required: boolean;
+    component?: 'input' | 'dropdown';
+    options?: {
+        label: string;
+        value: string;
+    }[];
+}
+export interface FormProps {
+    onSubmit: (data: any) => void;
+    children: (props: {
+        control: any;
+        errors: any;
+        handleSubmit: any;
+    }) => React.ReactNode;
+    defaultValues?: Record<string, any>;
+    formRef?: React.Ref<HTMLFormElement>;
+}
+declare const Form: React.FC<FormProps>;
+export default Form;

package/dist/components/ui/Form.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Form from './Form';
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const Basic: Story;
+export declare const WithValidation: Story;
+export declare const WithDefaultValues: Story;

package/dist/components/ui/Input.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface InputProps {
+    label: string;
+    type?: string;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    required?: boolean;
+    error?: string;
+    name?: string;
+    icon?: string;
+    suffix?: string;
+    disabled?: boolean;
+    inputClassName?: string;
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/components/ui/Input.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Basic: Story;
+export declare const Disabled: Story;
+export declare const WithIcon: Story;
+export declare const SuffixText: Story;
+export declare const SuffixIcon: Story;

package/dist/components/ui/InputDropdown.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface InputDropdownOption {
+    label: string;
+    value: string;
+}
+export interface InputDropdownProps {
+    label: string;
+    options: InputDropdownOption[];
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    placeholder?: string;
+    required?: boolean;
+    error?: string;
+    name?: string;
+    disabled?: boolean;
+    inputClassName?: string;
+}
+declare const InputDropdown: React.FC<InputDropdownProps>;
+export default InputDropdown;

package/dist/components/ui/InputDropdown.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InputDropdown from './InputDropdown';
+declare const meta: Meta<typeof InputDropdown>;
+export default meta;
+type Story = StoryObj<typeof InputDropdown>;
+export declare const Basic: Story;
+export declare const Disabled: Story;
+export declare const CustomBackground: Story;
+export declare const InputClassNameStringExample: Story;

package/dist/components/ui/Label.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface LabelProps {
+    label: string;
+    required?: boolean;
+    className?: string;
+}
+declare const Label: React.FC<LabelProps>;
+export default Label;

package/dist/components/ui/Label.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Label from './Label';
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof Label>;
+export declare const Basic: Story;
+export declare const Required: Story;
+export declare const CustomClass: Story;

package/dist/components/ui/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'full';
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/ui/Modal.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Basic: Story;
+export declare const WithForm: Story;
+export declare const WithFormFooterSubmit: Story;
+export declare const WithHeaderAndFooter: Story;
+export declare const Sizes: Story;
+export declare const SuccessModal: Story;
+export declare const WarningModal: Story;
+export declare const InfoModal: Story;

package/dist/components/ui/badge/Badge.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'destructive';
+}
+declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Badge };

package/dist/components/ui/button/Button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg' | 'icon';
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    prefix?: string;
+    suffix?: string;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/ui/button.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const Secondary: Story;
+export declare const Destructive: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const Link: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const Blue: Story;
+export declare const Green: Story;
+export declare const Red: Story;
+export declare const Yellow: Story;
+export declare const Purple: Story;
+export declare const Pink: Story;
+export declare const Gray: Story;
+export declare const Basic: Story;
+export declare const Disabled: Story;
+export declare const WithPrefixIcon: Story;
+export declare const WithSuffixIcon: Story;
+export declare const WithBothIcons: Story;

package/dist/components/ui/card.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };

package/dist/components/ui/card.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from './card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const WithImage: Story;
+export declare const Simple: Story;

package/dist/components/ui/table/Table.d.ts

@@ -0,0 +1,5 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { TableProps } from './types';
+export declare function Table<T extends Record<string, any> = any>({ data, columns, className, height, enableRowSelection, enableMultiRowSelection, enableSorting, enableFiltering, enablePagination, enableDateFilter, dateColumn, onRowClick, onSelectionChange, onSortingChange, onFilteringChange, onDateFilterChange, headerLeftSection, headerRightSection, }: TableProps<T> & {
+    columns: ColumnDef<T>[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/table/Table.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Table } from './Table';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof Table>;
+export declare const Basic: Story;

package/dist/components/ui/table/TableBody.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableBodyProps } from './types';
+export declare const TableBody: React.FC<TableBodyProps>;

package/dist/components/ui/table/TableBody.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableBody } from './TableBody';
+declare const meta: Meta<typeof TableBody>;
+export default meta;
+type Story = StoryObj<typeof TableBody>;
+export declare const Default: Story;
+export declare const Basic: Story;

package/dist/components/ui/table/TableFilter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableFilterProps } from './types';
+export declare const TableFilter: React.FC<TableFilterProps>;

package/dist/components/ui/table/TableFilter.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableFilter } from './TableFilter';
+declare const meta: Meta<typeof TableFilter>;
+export default meta;
+type Story = StoryObj<typeof TableFilter>;
+export declare const Default: Story;

package/dist/components/ui/table/TablePagination.d.ts

@@ -0,0 +1,10 @@
+export interface TablePaginationProps {
+    pageIndex: number;
+    pageCount: number;
+    pageSize: number;
+    pageSizeOptions?: number[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    className?: string;
+}
+export declare function TablePagination({ pageIndex, pageCount, pageSize, pageSizeOptions, onPageChange, onPageSizeChange, className, }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/table/TablePagination.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TablePagination } from './TablePagination';
+declare const meta: Meta<typeof TablePagination>;
+export default meta;
+type Story = StoryObj<typeof TablePagination>;
+export declare const FullyFeatured: Story;

package/dist/components/ui/table/index.d.ts

@@ -0,0 +1,13 @@
+export * from './types';
+export * from './TableFilter';
+export * from './TableBody';
+export interface AccountingRecord {
+    id: number;
+    date: string;
+    description: string;
+    debit: number;
+    credit: number;
+    balance: number;
+    created_at: string;
+}
+export declare const mockAccountingData: AccountingRecord[];

package/dist/components/ui/table/types.d.ts

@@ -0,0 +1,54 @@
+import { Table as TableInstance, Row } from '@tanstack/react-table';
+import { DateValueType } from 'react-tailwindcss-datepicker';
+import { ReactNode } from 'react';
+export interface TableData {
+    [key: string]: any;
+}
+export interface TableProps<T = any> {
+    data: T[];
+    columns: any[];
+    className?: string;
+    height?: string;
+    enableRowSelection?: boolean;
+    enableMultiRowSelection?: boolean;
+    enableSorting?: boolean;
+    enableFiltering?: boolean;
+    enablePagination?: boolean;
+    enableDateFilter?: boolean;
+    dateColumn?: string;
+    headerLeftSection?: ReactNode;
+    headerRightSection?: ReactNode;
+    onRowClick?: (row: Row<T>) => void;
+    onSelectionChange?: (selectedRows: Row<T>[]) => void;
+    onSortingChange?: (sorting: any) => void;
+    onFilteringChange?: (filters: any) => void;
+    onPaginationChange?: (pagination: any) => void;
+    onDateFilterChange?: (dateRange: DateValueType) => void;
+}
+export interface TableHeaderProps {
+    title?: string;
+    description?: string;
+    className?: string;
+    leftSection?: ReactNode;
+    rightSection?: ReactNode;
+    tabsSection?: ReactNode;
+}
+export interface TableFilterProps {
+    globalFilter: string;
+    setGlobalFilter: (value: string) => void;
+    showFilterPanel: boolean;
+    setShowFilterPanel: (value: boolean) => void;
+    enableDateFilter: boolean;
+    dateRange: DateValueType;
+    setDateRange: (value: DateValueType) => void;
+    isDatePickerOpen: boolean;
+    setIsDatePickerOpen: (value: boolean) => void;
+    table: any;
+}
+export interface TableBodyProps {
+    table: TableInstance<any>;
+    onRowClick?: (row: Row<any>) => void;
+}
+export interface TablePaginationProps {
+    table: TableInstance<any>;
+}

package/dist/components/ui/tabs/Tabs.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface TabItem {
+    label: string;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    activeIndex: number;
+    onTabChange: (index: number) => void;
+    className?: string;
+}
+export declare const Tabs: React.FC<TabsProps>;

package/dist/index.css

@@ -0,0 +1 @@
+.container{margin-left:auto;margin-right:auto;padding-left:2rem;padding-right:2rem;width:100%}@media (min-width:1400px){.container{max-width:1400px}}.\!table,.table{caption-side:bottom;font-size:.875rem;line-height:1.25rem;width:100%}@media (max-width:640px){.\!table{min-width:640px}.table-container{margin-left:-1rem;margin-right:-1rem}.table{min-width:640px}}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import "./styles/globals.css";
+export { Button } from "./components/ui/button";
+export { default as Input } from "./components/ui/Input";
+export { default as InputDropdown } from "./components/ui/InputDropdown";
+export { default as Form } from "./components/ui/Form";
+export { default as Modal } from "./components/ui/Modal";
+export { default as Label } from "./components/ui/Label";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "./components/ui/card";
+export { Table } from "./components/ui/table/Table";
+export * from "./components/ui/table";
+export * from "./lib/utils";