kelt-ui-kit-react 2.0.6 → 2.0.9

package/dist/tabs/Tabs.d.ts

@@ -1,18 +1,18 @@
 import { default as React } from 'react';
-
-export type TabItem = {
-    key: string;
-    title: React.ReactNode;
-    panel: React.ReactNode;
-    disabled?: boolean;
-};
-export type TabsProps = {
-    items: TabItem[];
-    defaultIndex?: number;
-    index?: number;
-    onChange?: (nextIndex: number) => void;
-    className?: string;
-    tabClassName?: string;
-    panelClassName?: string;
-};
-export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export type TabItem = {
+    key: string;
+    title: React.ReactNode;
+    panel: React.ReactNode;
+    disabled?: boolean;
+};
+export type TabsProps = {
+    items: TabItem[];
+    defaultIndex?: number;
+    index?: number;
+    onChange?: (nextIndex: number) => void;
+    className?: string;
+    tabClassName?: string;
+    panelClassName?: string;
+    keepMountedVisited?: boolean;
+};
+export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, keepMountedVisited, }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/tabs/Tabs.view.d.ts

@@ -1 +1 @@
-export declare const TabsView: () => import("react/jsx-runtime").JSX.Element;
+export declare const TabsView: () => import("react/jsx-runtime").JSX.Element;

package/dist/toaster/Toaster.d.ts

@@ -1,2 +1 @@
-
-export declare const Toaster: () => import('react').ReactPortal | null;
+export declare const Toaster: () => import('react').ReactPortal | null;

package/dist/toaster/Toaster.view.d.ts

@@ -1 +1 @@
-export declare const ToasterView: () => JSX.Element;
+export declare const ToasterView: () => JSX.Element;

package/dist/toaster/store/useToasterStore.d.ts

@@ -1,20 +1,24 @@
-/// <reference types="react" />
-type ToasterState = {
-    title: string;
-    description?: string;
-    severity?: "info" | "success" | "error" | "warning";
-    children?: React.ReactNode;
-    visible: boolean;
-    duration: number;
-    close?: boolean;
-    showToast: (title: string, options?: {
-        description?: string;
-        severity?: "info" | "success" | "error" | "warning";
-        duration?: number;
-        children?: React.ReactNode;
-        close?: boolean;
-    }) => void;
-    hideToast: () => void;
-};
-export declare const useToasterStore: import('zustand').UseBoundStore<import('zustand').StoreApi<ToasterState>>;
-export {};
+/// <reference types="react" />
+export type ToasterPosition = "top-right" | "top-center" | "bottom-right" | "bottom-center";
+type ToasterState = {
+    title: string;
+    description?: string;
+    severity?: "info" | "success" | "error" | "warning";
+    children?: React.ReactNode;
+    visible: boolean;
+    duration: number;
+    close?: boolean;
+    position: ToasterPosition;
+    showToast: (title: string, options?: {
+        description?: string;
+        severity?: "info" | "success" | "error" | "warning";
+        duration?: number;
+        children?: React.ReactNode;
+        close?: boolean;
+        /** Position à l'écran (défaut : "top-right") */
+        position?: ToasterPosition;
+    }) => void;
+    hideToast: () => void;
+};
+export declare const useToasterStore: import('zustand').UseBoundStore<import('zustand').StoreApi<ToasterState>>;
+export {};

package/docs.plugin.ts

@@ -0,0 +1,223 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import ts from "typescript";
+import type { Plugin } from "vite";
+import type {
+  ComponentDocumentation,
+  DocumentedComponent,
+} from "./src/docs/documentation.types";
+
+const moduleId = "virtual:ui-docs";
+const resolvedId = `\0${moduleId}`;
+
+export function uiDocsPlugin(): Plugin {
+  let root: string;
+
+  function generate() {
+    const configPath = path.join(root, "tsconfig.json");
+    const config = ts.readConfigFile(configPath, ts.sys.readFile);
+    if (config.error) throw new Error(ts.flattenDiagnosticMessageText(config.error.messageText, "\n"));
+    const parsed = ts.parseJsonConfigFileContent(config.config, ts.sys, root);
+    if (parsed.errors.length) throw new Error(ts.formatDiagnosticsWithColorAndContext(parsed.errors, {
+      getCanonicalFileName: (name) => name,
+      getCurrentDirectory: () => root,
+      getNewLine: () => "\n",
+    }));
+    const program = ts.createProgram(parsed.fileNames, parsed.options);
+    const checker = program.getTypeChecker();
+    const srcRoot = path.join(root, "src") + path.sep;
+
+    function sourceAt(filename: string) {
+      const source = program.getSourceFile(filename);
+      if (!source) throw new Error(`Documentation source not found: ${filename}`);
+      return source;
+    }
+
+    function importedFiles(source: ts.SourceFile) {
+      return source.statements.filter(ts.isImportDeclaration).flatMap((statement) => {
+        if (!ts.isStringLiteral(statement.moduleSpecifier)) return [];
+        const specifier = statement.moduleSpecifier.text;
+        if (!specifier.startsWith(".")) return [];
+        const filename = ts.resolveModuleName(specifier, source.fileName, parsed.options, ts.sys)
+          .resolvedModule?.resolvedFileName;
+        const bindings = statement.importClause?.namedBindings;
+        if (!filename || !bindings || !ts.isNamedImports(bindings)) return [];
+        return bindings.elements.map((binding) => ({
+          local: binding.name.text,
+          exported: (binding.propertyName ?? binding.name).text,
+          filename,
+        }));
+      });
+    }
+
+    function describe(filename: string, name: string): DocumentedComponent | undefined {
+      const source = sourceAt(filename);
+      const module = checker.getSymbolAtLocation(source);
+      const symbol = module && checker.getExportsOfModule(module).find((item) => item.name === name);
+      if (!symbol) return;
+      const componentType = checker.getTypeOfSymbolAtLocation(symbol, source);
+      const signature = componentType.getCallSignatures()[0];
+      if (!signature) return;
+      const parameter = signature.getParameters()[0];
+      const propsType = parameter && checker.getTypeOfSymbolAtLocation(parameter, source);
+      const defaults = new Map<string, string>();
+
+      function findDefaults(node: ts.Node) {
+        if (ts.isArrowFunction(node) || ts.isFunctionExpression(node) || ts.isFunctionDeclaration(node)) {
+          node.parameters.forEach(findDefaults);
+          return;
+        }
+        if (ts.isParameter(node) && ts.isObjectBindingPattern(node.name)) {
+          node.name.elements.forEach((element) => {
+            if (element.initializer) {
+              defaults.set((element.propertyName ?? element.name).getText(source), element.initializer.getText(source));
+            }
+          });
+        }
+        ts.forEachChild(node, findDefaults);
+      }
+      symbol.declarations?.forEach(findDefaults);
+
+      const types = new Map<string, { name: string; declaration: string }>();
+      const visited = new Set<ts.Type>();
+      function collectTypes(type: ts.Type) {
+        if (visited.has(type)) return;
+        visited.add(type);
+        if (type.isUnionOrIntersection()) type.types.forEach(collectTypes);
+        type.aliasTypeArguments?.forEach(collectTypes);
+        if (type.flags & ts.TypeFlags.Object) {
+          const reference = type as ts.TypeReference;
+          if (reference.objectFlags & ts.ObjectFlags.Reference) {
+            checker.getTypeArguments(reference).forEach(collectTypes);
+          }
+        }
+        const typeSymbol = type.aliasSymbol ?? type.getSymbol();
+        const declarations = typeSymbol?.declarations?.filter((declaration) =>
+          path.resolve(declaration.getSourceFile().fileName).startsWith(srcRoot) &&
+          (ts.isTypeAliasDeclaration(declaration) || ts.isInterfaceDeclaration(declaration) || ts.isEnumDeclaration(declaration))
+        );
+        if (!declarations?.length) return;
+        declarations.forEach((declaration) => {
+          types.set(`${declaration.getSourceFile().fileName}:${declaration.pos}`, {
+            name: typeSymbol!.name,
+            declaration: declaration.getText(),
+          });
+        });
+        type.getProperties().forEach((property) => {
+          const declaration = property.valueDeclaration ?? property.declarations?.[0];
+          if (declaration) collectTypes(checker.getTypeOfSymbolAtLocation(property, declaration));
+        });
+        type.getCallSignatures().forEach((call) => {
+          call.parameters.forEach((argument) => {
+            const declaration = argument.valueDeclaration ?? argument.declarations?.[0];
+            if (declaration) collectTypes(checker.getTypeOfSymbolAtLocation(argument, declaration));
+          });
+          collectTypes(call.getReturnType());
+        });
+      }
+
+      const flags = ts.TypeFormatFlags.NoTruncation | ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope;
+      const props = propsType?.getProperties().map((property) => {
+        const declaration = property.valueDeclaration ?? property.declarations?.[0] ?? source;
+        const type = checker.getTypeOfSymbolAtLocation(property, declaration);
+        collectTypes(type);
+        return {
+          name: property.name,
+          type: checker.typeToString(type, declaration, flags),
+          required: !(property.flags & ts.SymbolFlags.Optional),
+          defaultValue: defaults.get(property.name),
+          description: ts.displayPartsToString(property.getDocumentationComment(checker)),
+        };
+      }) ?? [];
+      if (propsType) collectTypes(propsType);
+      return {
+        name,
+        source: path.relative(root, filename).split(path.sep).join("/"),
+        signature: checker.signatureToString(signature, source, flags),
+        props,
+        types: Array.from(types.values()),
+      };
+    }
+
+    const menu = sourceAt(path.join(root, "src", "App.menu.tsx"));
+    const views = importedFiles(menu);
+    const documentation: Record<string, ComponentDocumentation> = {};
+    function visit(node: ts.Node) {
+      if (ts.isObjectLiteralExpression(node)) {
+        const link = node.properties.find((property) =>
+          ts.isPropertyAssignment(property) && property.name.getText(menu) === "link"
+        );
+        const element = node.properties.find((property) =>
+          ts.isPropertyAssignment(property) && property.name.getText(menu) === "element"
+        );
+        if (link && element && ts.isPropertyAssignment(link) && ts.isStringLiteral(link.initializer) &&
+          ts.isPropertyAssignment(element) && ts.isJsxSelfClosingElement(element.initializer)) {
+          const viewName = element.initializer.tagName.getText(menu);
+          const view = views.find((item) => item.local === viewName);
+          if (!view) throw new Error(`Missing documentation view for ${link.initializer.text}`);
+          const viewSource = sourceAt(view.filename);
+          const components = importedFiles(viewSource)
+            .filter((item) => /^[A-Z]/.test(item.exported))
+            .map((item) => describe(item.filename, item.exported))
+            .filter((item): item is DocumentedComponent => !!item);
+
+          if (link.initializer.text === "/toasters") {
+            const toaster = describe(path.join(root, "src", "toaster", "Toaster.tsx"), "Toaster");
+            if (!toaster) throw new Error("Missing Toaster export");
+            components.unshift(toaster);
+            const storeSource = sourceAt(path.join(root, "src", "toaster", "store", "useToasterStore.tsx"));
+            const stateDeclaration = storeSource.statements.find((statement) =>
+              ts.isTypeAliasDeclaration(statement) && statement.name.text === "ToasterState"
+            );
+            if (!stateDeclaration) throw new Error("Missing ToasterState");
+            const state = checker.getTypeAtLocation(stateDeclaration);
+            const showToast = state.getProperty("showToast");
+            if (!showToast) throw new Error("Missing showToast");
+            const call = checker.getTypeOfSymbolAtLocation(showToast, storeSource).getCallSignatures()[0];
+            const options = call.getParameters()[1];
+            const optionsType = checker.getNonNullableType(checker.getTypeOfSymbolAtLocation(options, storeSource));
+            components.push({
+              name: "showToast",
+              source: "src/toaster/store/useToasterStore.tsx",
+              signature: checker.signatureToString(call, storeSource, ts.TypeFormatFlags.NoTruncation),
+              props: optionsType.getProperties().map((property) => ({
+                name: property.name,
+                type: checker.typeToString(checker.getTypeOfSymbolAtLocation(property, storeSource), storeSource, ts.TypeFormatFlags.NoTruncation),
+                required: !(property.flags & ts.SymbolFlags.Optional),
+                description: ts.displayPartsToString(property.getDocumentationComment(checker)),
+              })),
+              types: storeSource.statements.filter(ts.isTypeAliasDeclaration).map((declaration) => ({
+                name: declaration.name.text,
+                declaration: declaration.getText(),
+              })),
+            });
+          }
+          if (!components.length) throw new Error(`No documented components for ${link.initializer.text}`);
+          documentation[link.initializer.text] = {
+            components,
+            example: readFileSync(view.filename, "utf8"),
+          };
+        }
+      }
+      ts.forEachChild(node, visit);
+    }
+    visit(menu);
+    return documentation;
+  }
+
+  return {
+    name: "ui-kit-documentation",
+    configResolved(config) { root = config.root; },
+    resolveId(id) { if (id === moduleId) return resolvedId; },
+    load(id) {
+      if (id === resolvedId) return `export default ${JSON.stringify(generate())};`;
+    },
+    handleHotUpdate(context) {
+      if (context.file.startsWith(path.join(root, "src")) && /\.tsx?$/.test(context.file)) {
+        const module = context.server.moduleGraph.getModuleById(resolvedId);
+        if (module) context.server.moduleGraph.invalidateModule(module);
+        context.server.ws.send({ type: "full-reload" });
+      }
+    },
+  };
+}

package/index.html

@@ -1,19 +1,21 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite + React + TS</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
+<!doctype html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
+  <meta name="theme-color" content="#16776c" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Explorez les composants React Kelt : demos interactives, parametres, types TypeScript et exemples de code." />
+  <title>Kelt UI — Component explorer</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <div id="toaster-root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
 </html>

package/package.json

@@ -1,56 +1,64 @@
-{
-  "name": "kelt-ui-kit-react",
-  "type": "module",
-  "version": "2.0.6",
-  "private": false,
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "dependencies": {
-    "@types/node": "^22.5.5",
-    "@vitejs/plugin-react": "^4.3.1",
-    "bootstrap-icons": "^1.11.3",
-    "jwt-decode": "^4.0.0",
-    "react-date-picker": "^11.0.0",
-    "styled-components": "^6.1.13",
-    "vite": "^5.4.6",
-    "vite-plugin-dts": "^4.2.2",
-    "vite-plugin-eslint": "^1.8.1",
-    "web-vitals": "^2.1.4",
-    "zustand": "^5.0.5"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.2"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
-    "typescript": "^4.9.5",
-    "vite-plugin-checker": "^0.8.0"
-  }
-}
+{
+  "name": "kelt-ui-kit-react",
+  "type": "module",
+  "version": "2.0.9",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/funeste29200/ui-kit-react.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@types/node": "^22.5.5",
+    "@vitejs/plugin-react": "^4.3.1",
+    "bootstrap-icons": "^1.11.3",
+    "jwt-decode": "^4.0.0",
+    "react-date-picker": "^11.0.0",
+    "styled-components": "^6.1.13",
+    "vite": "^5.4.6",
+    "vite-plugin-dts": "^4.2.2",
+    "vite-plugin-eslint": "^1.8.1",
+    "web-vitals": "^2.1.4",
+    "zustand": "^5.0.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "docs:build": "tsc -b && vite build --mode docs",
+    "docs:preview": "vite preview --outDir dist-docs",
+    "docs:test": "tsc -p tsconfig.docs.json && node --test tests/documentation.test.mjs",
+    "test": "node --test tests/dataTable.test.mjs",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "typescript": "^4.9.5",
+    "vite-plugin-checker": "^0.8.0"
+  }
+}

package/public/index.html

@@ -1,18 +1,18 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using Vite" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using Vite" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/public/manifest.json

@@ -1,25 +1,25 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -1,3 +1,3 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: