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

@@ -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<HTMLDivElement, { children: React.ReactElement }>(
+  pre: (props: any) => {
-    (props, ref) => {
+    const {
-      const {
+      props: { children, className },
-        props: { children, className },
+    } = React.cloneElement(React.Children.only(props.children));
-      } = React.cloneElement(React.Children.only(props.children));
 
-      const language =
+    const language =
-        (typeof className !== "string" || !className.includes("language-")
+      (!className || !className.includes("language-")
-          ? "typescript"
+        ? "typescript"
-          : /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
+        : /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
 
-      return (
+    return <Code language={language}>{children as string}</Code>;
-        <Code ref={ref} language={language}>
+  },
-          {children as string}
-        </Code>
-      );
-    },
-  ),
   code: forwardRef<HTMLElement, any>((props: any, ref) => (
     <code
       ref={ref}
@@ -170,7 +167,7 @@ const router = createBrowserRouter(
           path="introduction"
           element={
             <DynamicLayout toc={docsIntroductionToc}>
-              <DocsIntroduction />
+              <DocsIntroduction components={overrideComponents} />
             </DynamicLayout>
           }
         />
@@ -178,7 +175,15 @@ const router = createBrowserRouter(
           path="installation"
           element={
             <DynamicLayout toc={docsInstallationToc}>
-              <DocsInstallation />
+              <DocsInstallation components={overrideComponents} />
+            </DynamicLayout>
+          }
+        />
+        <Route
+          path="configuration"
+          element={
+            <DynamicLayout toc={docsConfigurationToc}>
+              <DocsConfiguration components={overrideComponents} />
             </DynamicLayout>
           }
         />

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<string, ({ path: string; name: string; eq: (path: string) => boolean })[]> = {
+const sideNav: Record<
-  "Documents": [
+  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,
 };

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({
+  /* ... */
+})
+```