@eml-payments/ui-kit 0.1.0 → 0.1.2

package/dist/types/components/Table/Table.d.ts

@@ -0,0 +1,36 @@
+import { type ColumnDef, type RowSelectionState } from '@tanstack/react-table';
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+type PaginationProps = {
+    pageSize: number;
+    pageIndex: number;
+    pageCount: number;
+    onPageChange: (_pageIndex: number) => void;
+    onPageSizeChange: (_pageSize: number) => void;
+};
+type RowAction<T> = {
+    title: string;
+    fn: (_row: T) => void;
+    icon: ReactNode;
+    className?: string;
+};
+type TableAction = {
+    title: string;
+    fn: () => void;
+    icon: ReactNode;
+    className?: string;
+};
+type TableProps<T extends object> = {
+    data: T[];
+    columns: ColumnDef<T, unknown>[];
+    sortableFields?: string[];
+    onSortChange?: (_field: string | undefined, _direction: 'asc' | 'desc' | undefined) => void;
+    selected?: RowSelectionState;
+    setSelected?: Dispatch<SetStateAction<RowSelectionState>>;
+    rowIdKey?: keyof T;
+    rowActions?: RowAction<T>[];
+    tableActions?: TableAction[];
+    search?: string;
+    setSearch?: Dispatch<SetStateAction<string>>;
+} & Partial<PaginationProps>;
+export declare function Table<T extends object>({ data, search, columns, selected, pageSize, rowIdKey, setSearch, pageIndex, pageCount, rowActions, setSelected, onSortChange, tableActions, onPageChange, onPageSizeChange, sortableFields, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Table/Table.stories.d.ts

@@ -0,0 +1,9 @@
+import { Table } from './Table';
+declare const _default: {
+    title: string;
+    component: typeof Table;
+};
+export default _default;
+export declare const Basic: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/types/components/Table/Table.types.d.ts

@@ -0,0 +1,4 @@
+import { TableOptions } from '@tanstack/react-table';
+export interface TableProps<T> extends TableOptions<T> {
+    className?: string;
+}

package/dist/types/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Table';
+export * from './Table.types';

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/types/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { TooltipStoryWrapperProps } from './Tooltip.types';
+export declare const TooltipStoryWrapper: React.FC<TooltipStoryWrapperProps>;
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;
+export declare const LongTextResponsive: StoryObj;
+export declare const OnDifferentSides: StoryObj;

package/dist/types/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,5 @@
+import { TooltipContent } from './Tooltip';
+export interface TooltipStoryWrapperProps extends React.ComponentPropsWithoutRef<typeof TooltipContent> {
+    content: string;
+    children: React.ReactNode;
+}

package/dist/types/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/types/config/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import { UIKitConfig } from './uikitConfig';
+export declare const defaultTheme: UIKitConfig;

package/dist/types/config/index.d.ts

@@ -0,0 +1,2 @@
+export * from './defaultTheme';
+export * from './uikitConfig';

package/dist/types/config/uikitConfig.d.ts

@@ -0,0 +1,19 @@
+export type UIKitColors = {
+    primary?: string;
+    secondary?: string;
+    accent?: string;
+    success?: string;
+    warning?: string;
+    error?: string;
+    info?: string;
+    background?: string;
+    foreground?: string;
+    textPrimary?: string;
+    [key: string]: string | undefined;
+};
+export type UIKitConfig = {
+    colors?: UIKitColors;
+    radius?: string;
+    fontFamily?: string;
+    [key: string]: any;
+};

package/dist/types/context/UIKitContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { UIKitConfig } from '../config/uikitConfig';
+export declare const UIKitContext: React.Context<UIKitConfig>;
+export declare const useUIKitTheme: () => UIKitConfig;

package/dist/types/context/UIKitProvider.d.ts

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from 'react';
+import { UIKitConfig } from '../config/uikitConfig';
+export declare const UIKitProvider: React.FC<PropsWithChildren<{
+    config?: UIKitConfig;
+}>>;

package/dist/types/context/useUIKitTheme.d.ts

@@ -0,0 +1 @@
+export { useUIKitTheme } from './UIKitContext';

package/dist/types/hooks/useToggle.d.ts

@@ -0,0 +1 @@
+export declare function useToggle(initial?: boolean): [boolean, () => void];

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { UIKitProvider } from './context/UIKitProvider';
+export { useUIKitTheme } from './context/useUIKitTheme';
+export * from './components/Button';
+export * from './components/Input';
+export * from './components/Table';
+export * from './types';

package/dist/types/index.js

@@ -0,0 +1 @@
+export * from '../config/uikitConfig';

package/dist/types/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/stories/Header.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/types/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/dist/types/stories/Page.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/types/types/index.d.ts

@@ -0,0 +1 @@
+export * from '../config/uikitConfig';

package/dist/types/utils/classNames.d.ts

@@ -0,0 +1 @@
+export declare function classNames(...args: Array<string | boolean | null | undefined | string[]>): string;

package/dist/utils/classNames.js

@@ -0,0 +1,3 @@
+export function classNames(...args) {
+    return args.flat(Infinity).filter(Boolean).join(' ');
+}

package/package.json

@@ -1,74 +1,75 @@
-{
-  "name": "@eml-payments/ui-kit",
-  "version": "0.1.0",
-  "private": false,
-  "description": "ARLO UIKit",
-  "homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
-  "bugs": {
-    "url": "https://github.com/EML-Payments/arlo.npm.uikit/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/EML-Payments/arlo.npm.uikit.git"
-  },
-  "license": "MIT",
-  "author": "EML Payments",
-  "type": "commonjs",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "directories": {
-    "doc": "docs",
-    "lib": "lib"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsc",
-    "lint": "eslint . --ext .ts,.tsx --fix",
-    "prepare": "husky install"
-  },
-  "dependencies": {
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@tanstack/react-table": "^8.12.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.525.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^3.4.1",
-    "tailwindcss-animate": "^1.0.7",
-    "tw-animate-css": "^1.3.5"
-  },
-  "devDependencies": {
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/addon-onboarding": "^9.0.15",
-    "@storybook/react-vite": "^9.0.15",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.0.15",
-    "husky": "^8.0.3",
-    "postcss": "^8.4.21",
-    "storybook": "^9.0.15",
-    "typescript": "^5.4.0"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  }
-}
+{
+	"name": "@eml-payments/ui-kit",
+	"version": "0.1.2",
+	"private": false,
+	"description": "ARLO UIKit",
+	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
+	"bugs": {
+		"url": "https://github.com/EML-Payments/arlo.npm.uikit/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/EML-Payments/arlo.npm.uikit.git"
+	},
+	"license": "MIT",
+	"author": "EML Payments",
+	"type": "commonjs",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"directories": {
+		"doc": "docs",
+		"lib": "lib"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"build": "tsc",
+		"lint": "eslint . --ext .ts,.tsx --fix",
+		"prepare": "husky install"
+	},
+	"dependencies": {
+		"@radix-ui/react-checkbox": "^1.3.2",
+		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-radio-group": "^1.3.7",
+		"@radix-ui/react-slot": "^1.2.3",
+		"@radix-ui/react-switch": "^1.2.5",
+		"@radix-ui/react-tooltip": "^1.2.7",
+		"@tanstack/react-table": "^8.12.0",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"lucide-react": "^0.525.0",
+		"prettier": "^3.6.2",
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0",
+		"tailwind-merge": "^3.3.1",
+		"tailwindcss": "^3.4.1",
+		"tailwindcss-animate": "^1.0.7",
+		"tw-animate-css": "^1.3.5"
+	},
+	"devDependencies": {
+		"@storybook/addon-docs": "^9.0.15",
+		"@storybook/addon-onboarding": "^9.0.15",
+		"@storybook/react-vite": "^9.0.15",
+		"@typescript-eslint/eslint-plugin": "^8.35.1",
+		"autoprefixer": "^10.4.13",
+		"eslint": "^8.56.0",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-storybook": "^9.0.15",
+		"husky": "^8.0.3",
+		"postcss": "^8.4.21",
+		"storybook": "^9.0.15",
+		"typescript": "^5.4.0"
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0"
+	},
+	"eslintConfig": {
+		"extends": [
+			"plugin:storybook/recommended"
+		]
+	}
+}