From f981d253035e5881df971bbf82ce2c21dcf5ecf6 Mon Sep 17 00:00:00 2001 From: Sujan Sundareswaran Date: Sat, 30 Nov 2024 15:43:32 +0530 Subject: [PATCH] Add explicit type declaration files and update vite config to support them --- CHANGELOG.md | 3 ++ package.json | 8 ++-- src/additional.d.ts | 10 +++++ src/fictoan-react.d.ts | 81 +++++++++++++++++++++++++++++++++++ tsconfig.json | 13 +++++- vite.config.js | 97 +++++++++++++++++++++++++----------------- 6 files changed, 170 insertions(+), 42 deletions(-) create mode 100644 src/additional.d.ts create mode 100644 src/fictoan-react.d.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 42113694..77bf0b98 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/package.json b/package.json index 2c9cdfcb..921d1b45 100644 --- a/package.json +++ b/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": { diff --git a/src/additional.d.ts b/src/additional.d.ts new file mode 100644 index 00000000..5d170446 --- /dev/null +++ b/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>; + export default content; +} diff --git a/src/fictoan-react.d.ts b/src/fictoan-react.d.ts new file mode 100644 index 00000000..4ee64c72 --- /dev/null +++ b/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; + export const Badge: FunctionComponent; + export const Button: FunctionComponent; + export const Callout:FunctionComponent; + export const Card: FunctionComponent; + export const CodeBlock: FunctionComponent; + export const Divider: FunctionComponent; + export const Drawer: FunctionComponent; + export const Element: FunctionComponent; + export const Form: FunctionComponent; + export const Meter: FunctionComponent; + export const Modal: FunctionComponent; + export const Notification: FunctionComponent; + export const OptionCard: FunctionComponent; + export const Pagination: FunctionComponent; + export const Portion: FunctionComponent; + export const ProgressBar: FunctionComponent; + export const Row: FunctionComponent; + export const Sidebar: FunctionComponent; + export const Skeleton: FunctionComponent; + export const Spinner: FunctionComponent; + export const Table: FunctionComponent; + export const Tabs: FunctionComponent; + export const ThemeProvider: FunctionComponent; + export const Toast: FunctionComponent; + export const Tooltip: FunctionComponent; + export const Typography: FunctionComponent; +} diff --git a/tsconfig.json b/tsconfig.json index 5f1707af..c2ddb816 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,15 @@ "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", @@ -21,8 +29,11 @@ "react-dom" ], "paths" : { - "@/*" : [ + "@/*" : [ "./src/*" + ], + "components/*" : [ + "./src/components/*" ] } }, diff --git a/vite.config.js b/vite.config.js index d9dc0c4f..3881f43d 100644 --- a/vite.config.js +++ b/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"); + }, + }), ], });