From c27e7bd2c550beae9683c2421df76708e26e1838 Mon Sep 17 00:00:00 2001 From: p-sw Date: Tue, 11 Jun 2024 18:52:02 +0900 Subject: [PATCH] feat(react): add configuration documentation A new configuration documentation file has been added to the react package. This document includes information about the library file, CLI, and the configuration structure. It also contains code examples for enhancing user understanding. --- packages/react/src/App.tsx | 41 ++++++++------- packages/react/src/RouteObject.ts | 40 ++++++++------ packages/react/src/docs/configuration.mdx | 64 +++++++++++++++++++++++ 3 files changed, 112 insertions(+), 33 deletions(-) create mode 100644 packages/react/src/docs/configuration.mdx diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx index 1f2b3a6..1717166 100644 --- a/packages/react/src/App.tsx +++ b/packages/react/src/App.tsx @@ -18,6 +18,9 @@ import DocsIntroduction, { import DocsInstallation, { tableOfContents as docsInstallationToc, } from "./docs/installation.mdx"; +import DocsConfiguration, { + tableOfContents as docsConfigurationToc, +} from "./docs/configuration.mdx"; import { HeadingContext } from "./HeadingContext"; import React, { @@ -87,24 +90,18 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) { } const overrideComponents = { - pre: forwardRef( - (props, ref) => { - const { - props: { children, className }, - } = React.cloneElement(React.Children.only(props.children)); + pre: (props: any) => { + const { + props: { children, className }, + } = React.cloneElement(React.Children.only(props.children)); - const language = - (typeof className !== "string" || !className.includes("language-") - ? "typescript" - : /language-([a-z]+)/.exec(className)![1]) ?? "typescript"; + const language = + (!className || !className.includes("language-") + ? "typescript" + : /language-([a-z]+)/.exec(className)![1]) ?? "typescript"; - return ( - - {children as string} - - ); - }, - ), + return {children as string}; + }, code: forwardRef((props: any, ref) => ( - + } /> @@ -178,7 +175,15 @@ const router = createBrowserRouter( path="installation" element={ - + + + } + /> + + } /> diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts index e14737d..798de14 100644 --- a/packages/react/src/RouteObject.ts +++ b/packages/react/src/RouteObject.ts @@ -1,49 +1,59 @@ -const docsModules = import.meta.glob('./docs/components/*.mdx'); +const docsModules = import.meta.glob("./docs/components/*.mdx"); const mainNav = [ { path: "/docs", name: "Docs", - eq: (pathname: string) => pathname.startsWith("/docs") && !pathname.startsWith("/docs/components") + eq: (pathname: string) => + pathname.startsWith("/docs") && !pathname.startsWith("/docs/components"), }, { path: "/docs/components", name: "Components", - eq: (pathname: string) => pathname.startsWith("/docs/components") + eq: (pathname: string) => pathname.startsWith("/docs/components"), }, { path: "https://github.com/p-sw/ui", name: "Github", - eq: () => false - } + eq: () => false, + }, ]; -const sideNav: Record boolean })[]> = { - "Documents": [ +const sideNav: Record< + string, + { path: string; name: string; eq: (path: string) => boolean }[] +> = { + Documents: [ { path: "/docs/introduction", name: "Introduction", - eq: (pathname: string) => pathname === "/docs/introduction" + eq: (pathname: string) => pathname === "/docs/introduction", }, { path: "/docs/installation", name: "Installation", - eq: (pathname: string) => pathname === "/docs/installation" - } + eq: (pathname: string) => pathname === "/docs/installation", + }, + { + path: "/docs/configuration", + name: "Configuration", + eq: (pathname: string) => pathname === "/docs/configuration", + }, ], - "Components": [] + Components: [], }; Object.keys(docsModules).forEach((path) => { - const name = (path.split('/').pop() ?? '').replace('.mdx', ''); + const name = (path.split("/").pop() ?? "").replace(".mdx", ""); sideNav["Components"].push({ - path: path.replace('./docs', '/docs').replace('.mdx', ''), + path: path.replace("./docs", "/docs").replace(".mdx", ""), name: name.charAt(0).toUpperCase() + name.slice(1), - eq: (pathname: string) => pathname === path.replace('./docs', '/docs').replace('.mdx', '') + eq: (pathname: string) => + pathname === path.replace("./docs", "/docs").replace(".mdx", ""), }); }); export default { mainNav, - sideNav + sideNav, }; diff --git a/packages/react/src/docs/configuration.mdx b/packages/react/src/docs/configuration.mdx new file mode 100644 index 0000000..3b76791 --- /dev/null +++ b/packages/react/src/docs/configuration.mdx @@ -0,0 +1,64 @@ +# Configuration + +## Library File + +Library file is a shared utility container every component uses. +You can put it anywhere as long as you properly update import path. + +PSW/UI manages its import path using tsconfig path. + +If you want to follow our rule, you can add a path to your `tsconfig.json`. +```json +{ + "compilerOptions": { + "paths": { + "@pswui-lib": ["./pswui/lib.tsx"] + } + } +} +``` + +## CLI + +You can use configuration file to change things of CLI. + +Default config file name is `pswui.config.js`. + +Here is our config structure: +```typescript +export interface Config { + /** + * Path that cli will create a file. + */ + paths?: { + components?: 'src/pswui/components' | string + lib?: 'src/pswui/lib.tsx' | string + } + /** + * Absolute path that will used for import in component + */ + import?: { + lib?: '@pswui-lib' | string + } +} +``` + +You can import `Config` type or `buildConfig` function to use typescript intellisense. + +```ts +import { Config } from "@psw-ui/cli" + +const config: Config = { + /* ... */ +} + +export default config; +``` + +```ts +import { buildConfig } from "@psw-ui/cli" + +export default buildConfig({ + /* ... */ +}) +``` \ No newline at end of file