Add explicit type declaration files and update vite config to support…

… them

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## 1.10.0
+- `Breadcrumbs` is now far simpler, and immediate children are automatically converted to `BreadcrumbItem`
+
 ## 1.9.4
 - `Breadcrumbs` is now far simpler, and immediate children are automatically converted to `BreadcrumbItem`
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.9.5-alpha.19",
+    "version": "1.10.0",
     "private": false,
     "description": "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository": {
@@ -17,13 +17,15 @@
         "./src/components/**/typography.css"
     ],
     "files": [
-        "dist"
+        "dist",
+        "dist/types"
     ],
     "main": "./dist/index.js",
     "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
+    "types": "./dist/types/fictoan-react.d.ts",
     "exports": {
         ".": {
+            "types": "./dist/types/fictoan-react.d.ts",
             "import": "./dist/index.js"
         },
         "./components": {

src/additional.d.ts

@@ -0,0 +1,10 @@
+declare module "*.css" {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+declare module "*.svg" {
+    import { ComponentType, SVGProps } from "react";
+    const content: ComponentType<SVGProps<SVGSVGElement>>;
+    export default content;
+}

src/fictoan-react.d.ts

@@ -0,0 +1,81 @@
+declare module "fictoan-react" {
+    import { FunctionComponent, ReactNode, ComponentProps } from "react";
+
+    export { AccordionProps } from "./components/Accordion";
+    export { BadgeProps } from "./components/Badge";
+    export { BreadcrumbsProps } from "./components/Breadcrumbs";
+    export { ButtonProps } from "./components/Button";
+    export { CalloutProps } from "./components/Callout";
+    export { CardProps } from "./components/Card";
+    export { CodeBlockProps } from "./components/CodeBlock";
+    export { DividerProps } from "./components/Divider";
+    export { DrawerProps } from "./components/Drawer";
+    export { ElementProps } from "./components/Element/constants";
+    export { FormProps } from "./components/Form";
+    export { MeterProps } from "./components/Meter";
+    export { ModalProps } from "./components/Modal";
+    export { NotificationsWrapperProps, NotificationItemProps } from "./components/Notification";
+    export { OptionCardProps } from "./components/OptionCard";
+    export { PaginationProps } from "./components/Pagination";
+    export { PortionProps } from "./components/Portion";
+    export { ProgressBarProps } from "./components/ProgressBar";
+    export { RowProps } from "./components/Row";
+    export {
+        SidebarWrapperNewProps,
+        ContentWrapperProps,
+        SidebarHeaderNewProps,
+        SidebarItemNewProps,
+        SidebarFooterNewProps
+    } from "./components/Sidebar";
+    export { SkeletonProps } from "./components/Skeleton";
+    export { SpinnerProps } from "./components/Spinner";
+    export { TableProps } from "./components/Table";
+    export { TabsProps } from "./components/Tabs";
+    export { ThemeProviderProps } from "./components/ThemeProvider";
+    export { ToastsWrapperProps, ToastItemProps } from "./components/Toast";
+    export { TooltipProps } from "./components/Tooltip";
+    export { TextProps } from "./components/Typography";
+
+    // Utility types
+    export {
+        DefaultColours,
+        BasicColours,
+        FictoanColours,
+        ColourPropTypes,
+        EmphasisTypes,
+        SpacingTypes,
+        ShadowTypes,
+        ShapeTypes,
+        OpacityTypes,
+        WeightTypes,
+    } from "./components/Element/constants";
+
+    // Component exports
+    export const Accordion: FunctionComponent<AccordionProps>;
+    export const Badge: FunctionComponent<BadgeProps>;
+    export const Button: FunctionComponent<ButtonProps>;
+    export const Callout:FunctionComponent<CalloutProps>;
+    export const Card: FunctionComponent<CardProps>;
+    export const CodeBlock: FunctionComponent<CodeBlockProps>;
+    export const Divider: FunctionComponent<DividerProps>;
+    export const Drawer: FunctionComponent<DrawerProps>;
+    export const Element: FunctionComponent<ElementProps>;
+    export const Form: FunctionComponent<FormProps>;
+    export const Meter: FunctionComponent<MeterProps>;
+    export const Modal: FunctionComponent<ModalProps>;
+    export const Notification: FunctionComponent<NotificationsWrapperProps>;
+    export const OptionCard: FunctionComponent<OptionCardProps>;
+    export const Pagination: FunctionComponent<PaginationProps>;
+    export const Portion: FunctionComponent<PortionProps>;
+    export const ProgressBar: FunctionComponent<ProgressBarProps>;
+    export const Row: FunctionComponent<RowProps>;
+    export const Sidebar: FunctionComponent<SidebarWrapperNewProps>;
+    export const Skeleton: FunctionComponent<SkeletonProps>;
+    export const Spinner: FunctionComponent<SpinnerProps>;
+    export const Table: FunctionComponent<TableProps>;
+    export const Tabs: FunctionComponent<TabsProps>;
+    export const ThemeProvider: FunctionComponent<ThemeProviderProps>;
+    export const Toast: FunctionComponent<ToastsWrapperProps>;
+    export const Tooltip: FunctionComponent<TooltipProps>;
+    export const Typography: FunctionComponent<TextProps>;
+}

tsconfig.json

@@ -13,16 +13,27 @@
         "outDir"                           : "dist",
         "moduleResolution"                 : "bundler",
         "allowSyntheticDefaultImports"     : true,
+        "rootDir"                          : "./src",
         "emitDeclarationOnly"              : true,
+        "declarationDir"                   : "./dist/types",
+        "declarationMap"                   : true,
+        "allowJs"                          : true,
+        "isolatedModules"                  : true,
+        "noEmitOnError"                    : true,
+        "composite"                        : true,
+        "baseUrl"                          : ".",
         "types"                            : [
             "vite-plugin-svgr/client",
             "node",
             "react",
             "react-dom"
         ],
         "paths"                            : {
-            "@/*" : [
+            "@/*"          : [
                 "./src/*"
+            ],
+            "components/*" : [
+                "./src/components/*"
             ]
         }
     },

vite.config.js

@@ -15,7 +15,7 @@ const pkg = JSON.parse(readFileSync(new URL("./package.json", import.meta.url)))
 
 const input = Object.fromEntries(
     glob
-        .sync(["src/index.tsx", "src/components/**/*.{ts,tsx}"], { ignore: "src/**/*.stories.{js,jsx,ts,tsx}" })
+        .sync(["src/index.tsx", "src/components/**/*.{ts,tsx}"], { ignore : "src/**/*.stories.{js,jsx,ts,tsx}" })
         .map((file) => [
             relative("src", file.slice(0, file.length - extname(file).length)),
             fileURLToPath(new URL(file, import.meta.url)),
@@ -24,14 +24,14 @@ const input = Object.fromEntries(
 
 function preserveUseClient() {
     return {
-        name: "preserve-use-client",
-        enforce: "post",
+        name    : "preserve-use-client",
+        enforce : "post",
         generateBundle(options, bundle) {
             Object.entries(bundle).forEach(([_, chunk]) => {
                 if (chunk.type === "chunk") {
                     chunk.code = chunk.code.replace(
                         /("use client";|('use client';))?/,
-                        '"use client";\n'
+                        "\"use client\";\n",
                     );
                 }
             });
@@ -41,25 +41,25 @@ function preserveUseClient() {
 
 function generateColors() {
     return {
-        name: "generate-colors",
-        buildStart: {
-            sequential: true,
+        name       : "generate-colors",
+        buildStart : {
+            sequential : true,
             handler() {
                 console.log("Generating color system...");
-                execSync("node src/scripts/generateColourClasses.js", { stdio: "inherit" });
+                execSync("node src/scripts/generateColourClasses.js", { stdio : "inherit" });
             },
         },
         configureServer(server) {
             // Generate on dev server start
             console.log("Generating color system...");
-            execSync("node src/scripts/generateColourClasses.js", { stdio: "inherit" });
+            execSync("node src/scripts/generateColourClasses.js", { stdio : "inherit" });
 
             // Watch for changes in the script
             server.watcher.add("src/scripts/generateColourClasses.js");
             server.watcher.on("change", (path) => {
                 if (path.endsWith("generateColourClasses.js")) {
                     console.log("Color generation script changed, regenerating...");
-                    execSync("node scripts/generateColourClasses.js", { stdio: "inherit" });
+                    execSync("node scripts/generateColourClasses.js", { stdio : "inherit" });
                 }
             });
         },
@@ -68,57 +68,78 @@ function generateColors() {
 
 function createVisualizer() {
     return {
-        ...visualizer({ gzipSize: true }),
-        apply: "build",
+        ...visualizer({ gzipSize : true }),
+        apply : "build",
     };
 }
 
 export default defineConfig({
-    build: {
-        minify: "terser",
-        terserOptions: {
-            format: {
-                comments: false,
-                preserve_annotations: true,
+    build   : {
+        minify        : "terser",
+        terserOptions : {
+            format : {
+                comments             : false,
+                preserve_annotations : true,
             },
         },
-        lib: {
-            entry: input,
-            name: pkg.name,
-            fileName: "index",
+        lib           : {
+            entry    : input,
+            name     : pkg.name,
+            fileName : "index",
         },
-        rollupOptions: {
-            output: [
+        rollupOptions : {
+            output   : [
                 {
-                    format: "es",
-                    entryFileNames: "[name].js",
-                    assetFileNames: "index.[ext]",
-                    banner: `"use client;"`,
+                    format              : "es",
+                    entryFileNames      : "[name].js",
+                    assetFileNames      : "index.[ext]",
+                    banner              : `"use client;"`,
+                    preserveModules     : true,
+                    preserveModulesRoot : "src",
                 },
             ],
-            plugins: [
+            plugins  : [
                 babel({
-                    exclude: "node_modules/**",
-                    babelHelpers: "bundled",
-                    presets: [
+                    exclude      : "node_modules/**",
+                    babelHelpers : "bundled",
+                    presets      : [
                         ["@babel/preset-env", {
-                            useBuiltIns: "usage",
-                            corejs: 3,
-                            targets: {
-                                esmodules: true,
+                            useBuiltIns : "usage",
+                            corejs      : 3,
+                            targets     : {
+                                esmodules : true,
                             },
                         }],
                         "@babel/preset-react",
                     ],
                 }),
             ],
-            external: [...Object.keys(pkg.peerDependencies)],
+            external : [...Object.keys(pkg.peerDependencies)],
         },
     },
-    plugins: [
+    plugins : [
         generateColors(),
         svgr(),
         preserveUseClient(),
         createVisualizer(),
+        dts({
+            insertTypesEntry : true,
+            include          : ["src"],
+            outDir           : "dist/types",
+            exclude          : ["**/*.stories.{ts,tsx}", "**/*.test.{ts,tsx}"],
+            copyDtsFiles     : true,
+            skipDiagnostics  : false,
+            rollupTypes      : true,
+            compilerOptions  : {
+                baseUrl : ".",
+                paths   : {
+                    "@/*" : ["./src/*"],
+                },
+            },
+            afterBuild       : () => {
+                // Optional: Log completion of type generation
+                console.log("Type definitions generated successfully");
+            },
+        }),
     ],
 });