@akanjs/cli 0.0.149 → 0.0.151

package/cjs/index.js

@@ -602,7 +602,7 @@ var withBase = (appName, config, libs, routes = []) => {
     eslint: { ...config.eslint, ignoreDuringBuilds: true },
     env: {
       ...config.env,
-      basePaths: routes.map(({ basePath: basePath2 }) => basePath2).join(",")
+      basePaths: [...new Set(routes.map(({ basePath: basePath2 }) => basePath2))].join(",")
     },
     transpilePackages: ["swiper", "ssr-window", "dom7"],
     reactStrictMode: commandType === "start" ? false : true,
@@ -612,7 +612,8 @@ var withBase = (appName, config, libs, routes = []) => {
         ...[appName, ...libs].map((lib) => [`@${lib}/ui`, `@${lib}/next`, `@${lib}/common`, `@${lib}/client`]).flat(),
         "@contract",
         "@akanjs/next",
-        "@akanjs/common"
+        "@akanjs/common",
+        "@akanjs/ui"
       ]
     },
     // modularizeImports: {
@@ -768,6 +769,7 @@ CMD ["npm", "start"]`,
         config.libs ?? [],
         config.frontend?.routes
       ),
+      routes: config.frontend?.routes,
       explicitDependencies: config.frontend?.explicitDependencies ?? []
     },
     mobile: {
@@ -1633,11 +1635,12 @@ var Executor = class _Executor {
     dict = {},
     overwrite = true
   }) {
-    const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}`.replace(".ts", ".js");
-    if (import_fs4.default.statSync(templatePath).isFile()) {
-      const filename = import_path3.default.basename(templatePath);
+    const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}`;
+    const prefixTemplatePath = templatePath.endsWith(".tsx") ? templatePath : templatePath.replace(".ts", ".js");
+    if (import_fs4.default.statSync(prefixTemplatePath).isFile()) {
+      const filename = import_path3.default.basename(prefixTemplatePath);
       const fileContent = await this.#applyTemplateFile(
-        { templatePath, targetPath: import_path3.default.join(basePath2, filename), scanResult, overwrite },
+        { templatePath: prefixTemplatePath, targetPath: import_path3.default.join(basePath2, filename), scanResult, overwrite },
         dict
       );
       return fileContent ? [fileContent] : [];
@@ -3177,6 +3180,8 @@ ${fileCheck.lintResult.message}`
 var esbuild = __toESM(require("esbuild"));
 var import_esbuild_plugin_d = require("esbuild-plugin-d.ts");
 var import_fs9 = __toESM(require("fs"));
+var assetExtensions = [".css", ".md", ".js", ".png", ".ico", ".svg", ".json", ".template"];
+var assetLoader = Object.fromEntries(assetExtensions.map((ext) => [ext, "copy"]));
 var Builder = class {
   #executor;
   #distExecutor;
@@ -3201,7 +3206,7 @@ var Builder = class {
       format,
       outdir: `${this.#distExecutor.cwdPath}/${format}`,
       logLevel: "error",
-      loader: { ".template": "copy", ".md": "copy" }
+      loader: assetLoader
     };
   }
   #getAssetBuildOptions() {
@@ -3215,7 +3220,7 @@ var Builder = class {
       ],
       outdir: this.#distExecutor.cwdPath,
       logLevel: "error",
-      loader: { ".css": "copy", ".md": "copy", ".js": "copy" }
+      loader: assetLoader
     };
   }
   async build(options = {}) {
@@ -3614,6 +3619,8 @@ var ApplicationRunner = class {
   async #getViteConfig(app, command) {
     const { env } = await this.#prepareCommand(app, command, "csr");
     const tsconfig = app.workspace.getTsConfig();
+    const akanConfig = await app.getConfig();
+    const basePaths = akanConfig.frontend.routes ? [...new Set(akanConfig.frontend.routes.map(({ basePath: basePath2 }) => basePath2))].join(",") : void 0;
     const processEnv = env;
     const akanjsPrefix = process.env.USE_AKANJS_PKGS === "true" ? `${app.workspace.workspaceRoot}/pkgs/` : "";
     const config = vite.defineConfig({
@@ -3677,7 +3684,8 @@ var ApplicationRunner = class {
           APP_OPERATION_MODE: processEnv.APP_OPERATION_MODE ?? "local",
           AKAN_WORKSPACE_ROOT: app.workspace.workspaceRoot,
           AKAN_APP_ROOT: app.cwdPath,
-          RENDER_ENV: "csr"
+          RENDER_ENV: "csr",
+          basePaths
         },
         "process.platform": JSON.stringify("browser"),
         "process.version": JSON.stringify(process.version)
@@ -3992,7 +4000,11 @@ var ApplicationScript = class {
     await this.syncApplication(app);
     if (app.workspace.getBaseDevEnv().env === "local")
       await this.dbup(app.workspace);
-    await Promise.all([this.startBackend(app, { open: open2, sync: false }), this.startFrontend(app, { open: open2, sync: false })]);
+    await Promise.all([
+      this.startBackend(app, { open: open2, sync: false }),
+      this.startFrontend(app, { open: open2, sync: false }),
+      this.startCsr(app, { open: open2, sync: false })
+    ]);
   }
   async buildBackend(app, { sync = true } = {}) {
     if (sync)
@@ -4389,11 +4401,7 @@ var PackageRunner = class {
     if (pkg.name === "@akanjs/cli")
       await builder.build({
         bundle: true,
-        additionalEntryPoints: [
-          `${pkg.cwdPath}/src/templates/**/*.ts`,
-          `${pkg.cwdPath}/src/templates/**/*.template`,
-          `${pkg.cwdPath}/src/guidelines/**/*.md`
-        ]
+        additionalEntryPoints: [`${pkg.cwdPath}/src/templates/**/*`, `${pkg.cwdPath}/src/guidelines/**/*`]
       });
     else
       await builder.build();
@@ -4850,7 +4858,7 @@ var requestTemplate = ({
 	 \uCF54\uB529 \uADDC\uCE59
 		 - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-		 - CSS: tailwind, DaisyUI(btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
+		 - CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
 		 - Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 	 \uCF54\uB4DC \uC2A4\uD0C0\uC77C
@@ -4908,7 +4916,7 @@ var requestView = ({
 	 \uCF54\uB529 \uADDC\uCE59
 		 - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-		 - CSS: tailwind, DaisyUI(btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
+		 - CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
 		 - Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 	 \uCF54\uB4DC \uC2A4\uD0C0\uC77C
@@ -4969,7 +4977,7 @@ var requestUnit = ({
 	 \uCF54\uB529 \uADDC\uCE59
 		 - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-		 - CSS: tailwind, DaisyUI(btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
+		 - CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
 		 - Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 	 \uCF54\uB4DC \uC2A4\uD0C0\uC77C
@@ -5015,7 +5023,7 @@ var ModuleRunner = class {
   async createComponentTemplate(module2, type) {
     await module2.sys.applyTemplate({
       basePath: `./lib/${module2.name}`,
-      template: `module/__model__.${capitalize(type)}.ts`,
+      template: `module/__Model__.${capitalize(type)}.tsx`,
       dict: { model: module2.name, appName: module2.sys.name }
     });
     return {
@@ -5511,7 +5519,7 @@ var WorkspaceCommand = class {
 __decorateClass([
   Target.Public(),
   __decorateParam(0, Argument("workspaceName", { desc: "what is the name of your organization?" })),
-  __decorateParam(1, Option("app", { desc: "describe your first application to create " })),
+  __decorateParam(1, Option("app", { desc: "what is the codename of your first application? (e.g. myapp)" })),
   __decorateParam(2, Option("dir", { desc: "directory of workspace", default: process.env.USE_AKANJS_PKGS === "true" ? "local" : "." }))
 ], WorkspaceCommand.prototype, "createWorkspace", 1);
 __decorateClass([

package/cjs/src/guidelines/componentRule/componentRule.generate.json

@@ -0,0 +1,131 @@
+{
+  "title": "Component Rule",
+  "description": "Comprehensive guidelines for creating React components in the Akan.js framework",
+  "scans": [
+    {
+      "type": "source",
+      "description": "Cookie management utilities for web and mobile",
+      "path": "pkgs/@akanjs/client/src/cookie.ts"
+    },
+    {
+      "type": "source",
+      "description": "Storage utilities for persistent data",
+      "path": "pkgs/@akanjs/client/src/storage.ts"
+    },
+    {
+      "type": "source",
+      "description": "Device capabilities and platform detection",
+      "path": "pkgs/@akanjs/client/src/device.ts"
+    },
+    {
+      "type": "source",
+      "description": "Navigation and routing utilities",
+      "path": "pkgs/@akanjs/client/src/router.ts"
+    },
+    {
+      "type": "source",
+      "description": "Type utilities including clsx for class management",
+      "path": "pkgs/@akanjs/client/src/types.ts"
+    },
+    {
+      "type": "example",
+      "description": "Unit components (list items/cards)",
+      "path": "{apps,libs}/*/lib/*/*.Unit.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "View components (detailed displays)",
+      "path": "{apps,libs}/*/lib/*/*.View.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Template components (forms/edit screens)",
+      "path": "{apps,libs}/*/lib/*/*.Template.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Utility components (toolbars/helpers)",
+      "path": "{apps,libs}/*/lib/*/*.Util.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Zone components (data containers)",
+      "path": "{apps,libs}/*/lib/*/*.Zone.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Reusable UI components",
+      "path": "{libs,apps}/*/ui/**/*.tsx",
+      "sample": 5
+    },
+    {
+      "type": "usage",
+      "description": "Component composition patterns",
+      "path": "{apps,libs}/*/lib/*/*.Zone.tsx",
+      "filterText": "renderItem",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Form state management with stores",
+      "path": "{apps,libs}/*/lib/*/*.Template.tsx",
+      "filterText": "st.use",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Conditional rendering with TailwindCSS",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "clsx",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Data fetching with Load components",
+      "path": "{apps,libs}/*/lib/*/*.Zone.tsx",
+      "filterText": "<Load.",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Responsive design patterns",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "md:",
+      "sample": 3
+    }
+  ],
+  "update": {
+    "filePath": "./componentRule.instruction.md",
+    "contents": [
+      "Component Architecture - Core structure and organization",
+      "Component Types - Purpose and responsibility of each component type",
+      "File Naming Conventions - Standardized naming patterns",
+      "Utility Functions - Core framework utilities",
+      "Best Practices - Guidelines for components",
+      "State Management - Integration with Zustand store and signals",
+      "Responsive Design - Mobile-first approach",
+      "Accessibility - Core principles",
+      "Performance Optimization - Memoization and lazy loading",
+      "Data Fetching - Using Load components",
+      "Composition Patterns - Component rendering methods",
+      "Complete Examples - Full implementation examples"
+    ],
+    "rules": [
+      "Component types (.Unit, .View, .Template, .Util, .Zone) should follow standard patterns and responsibilities",
+      "Every component file should maintain a consistent organization pattern with logical sections",
+      "Responsive design should use Tailwind's mobile-first approach with sm:, md:, lg: prefixes",
+      "Form components should use the framework state management pattern with st.use and st.do",
+      "Data containers should follow the Load.Units/Load.View pattern for consistent data fetching",
+      "Component files should export named components rather than default exports",
+      "Props should use explicit TypeScript interfaces with proper JSDoc comments where helpful",
+      "Separate business logic from presentation components",
+      "Follow Akan.js project structure and module organization"
+    ]
+  },
+  "page": "/[lang]/akanjs/(docs)/docs/codebase/component/page.tsx"
+}

package/cjs/src/guidelines/componentRule/componentRule.instruction.md

@@ -374,7 +374,7 @@ Here's a complete example of components for a "Product" feature:
 ```tsx
 import { clsx, ModelProps } from "@akanjs/client";
 import { cnst } from "@app/client";
-import { Image, Link } from "@util/ui";
+import { Image, Link } from "@akanjs/ui";
 
 export const Card = ({ product, href }: ModelProps<"product", cnst.Product>) => {
   return (
@@ -395,7 +395,7 @@ export const Card = ({ product, href }: ModelProps<"product", cnst.Product>) =>
 ```tsx
 import { clsx } from "@akanjs/client";
 import { cnst } from "@app/client";
-import { Button, Image } from "@util/ui";
+import { Button, Image } from "@akanjs/ui";
 
 interface ProductViewProps {
   className?: string;
@@ -445,7 +445,8 @@ export const General = ({ className, product }: ProductViewProps) => {
 "use client";
 import { clsx } from "@akanjs/client";
 import { st } from "@app/client";
-import { Button, Input, Upload } from "@util/ui";
+import { Button, Input } from "@akanjs/ui";
+import { Upload } from "@util/ui";
 import { AiOutlinePlus } from "react-icons/ai";
 
 export const General = () => {
@@ -520,8 +521,8 @@ export const General = () => {
 import { ModelDashboardProps } from "@akanjs/client";
 import { getQueryMap } from "@akanjs/constant";
 import { cnst, st } from "@app/client";
-import { Data } from "@shared/ui";
-import { Button } from "@util/ui";
+import { Data } from "@akanjs/ui";
+import { Button } from "@akanjs/ui";
 
 export const Stat = ({
   className,
@@ -591,7 +592,7 @@ export const PriceFilter = ({
 import { ModelsProps } from "@akanjs/client";
 import { ClientInit, ClientView } from "@akanjs/signal";
 import { cnst, Product } from "@app/client";
-import { Data, Load } from "@shared/ui";
+import { Data, Load } from "@akanjs/ui";
 
 export const Admin = ({ sliceName = "product", init, query }: ModelsProps<cnst.Product>) => {
   return (

package/cjs/src/guidelines/cssRule/cssRule.generate.json

@@ -0,0 +1,93 @@
+{
+  "title": "CSS Rule with TailwindCSS and DaisyUI",
+  "description": "Comprehensive guidelines for creating CSS with TailwindCSS and DaisyUI in the Akan.js framework",
+  "scans": [
+    {
+      "type": "source",
+      "description": "clsx utility for class name management",
+      "path": "pkgs/@akanjs/client/src/types.ts"
+    },
+    {
+      "type": "example",
+      "description": "Unit components (list items/cards)",
+      "path": "{apps,libs}/*/lib/*/*.Unit.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "View components (detailed displays)",
+      "path": "{apps,libs}/*/lib/*/*.View.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Edit components (forms for data creation/editing)",
+      "path": "{apps,libs}/*/lib/*/*.Edit.tsx",
+      "sample": 2
+    },
+    {
+      "type": "example",
+      "description": "Util components (special function components)",
+      "path": "{apps,libs}/*/lib/*/*.Util.tsx",
+      "sample": 2
+    },
+    {
+      "type": "example",
+      "description": "Zone components (container components)",
+      "path": "{apps,libs}/*/lib/*/*.Zone.tsx",
+      "sample": 2
+    },
+    {
+      "type": "example",
+      "description": "Reusable UI components",
+      "path": "{libs,apps}/*/ui/**/*.tsx",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Conditional rendering with clsx",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "clsx",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "DaisyUI color usage",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "bg-primary|bg-secondary|bg-accent|bg-info|bg-success|bg-warning|bg-error",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Responsive design patterns",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "sm:|md:|lg:|xl:|2xl:",
+      "sample": 3
+    }
+  ],
+  "update": {
+    "filePath": "./cssRule.instruction.md",
+    "contents": [
+      "Core Principles - Fundamental styling concepts",
+      "Class Management with clsx - How to handle conditional class names",
+      "Component Structure Best Practices - Consistent component styling",
+      "Component Types in Akan.js - Styling patterns for different component types",
+      "Common UI Patterns - Reusable design patterns",
+      "Best Practices - Guidelines for maintainable CSS",
+      "Common Mistakes to Avoid - What not to do",
+      "Troubleshooting - Fixing common issues"
+    ],
+    "rules": [
+      "clsx should be used for conditional class names and className composition",
+      "Every component should accept and properly handle className prop for composition",
+      "Color system of DaisyUI should be used for colors (primary, secondary, accent, etc.) - hardcoded colors should be avoided",
+      "Components should follow responsive design principles with mobile-first approach",
+      "Use Tailwind's spacing scale consistently for margins and padding",
+      "Group related classes together for better readability",
+      "DaisyUI components should be used for common UI elements when available",
+      "Apply proper focus, hover, and active states for interactive elements",
+      "Respect the naming conventions for component types (Unit, View, Edit, Util, Zone)"
+    ]
+  },
+  "page": "/[lang]/akanjs/(docs)/docs/codebase/css/page.tsx"
+}

package/cjs/src/guidelines/databaseModule/databaseModule.generate.json

@@ -0,0 +1,51 @@
+{
+  "title": "Database Module",
+  "description": "Structure of database module",
+  "scans": [
+    {
+      "type": "source",
+      "description": "core database module source code",
+      "path": "pkgs/@akanjs/server/src/module.ts"
+    },
+    {
+      "type": "source",
+      "description": "how to boot modules in Nest.js server",
+      "path": "pkgs/@akanjs/server/src/boot.ts"
+    },
+    {
+      "type": "source",
+      "description": "constant model decorators, database schema decorators, signal decorators reference",
+      "path": "pkgs/@akanjs/constant/src/decorator.ts"
+    },
+    {
+      "type": "example",
+      "description": "example database module of admin",
+      "path": "libs/shared/lib/admin/*"
+    }
+  ],
+  "update": {
+    "filePath": "./databaseModule.instruction.md",
+    "contents": [
+      "Purpose of database modules in Akan.js",
+      "File structure and location conventions",
+      "How to create database modules",
+      "How to use database modules in Nest.js server",
+      "How to use components, stores, and signals in client side",
+      "Real-time features with websockets and subscriptions",
+      "Best practices for data modeling and schema design",
+      "Authentication and authorization patterns",
+      "Performance optimization techniques",
+      "Error handling strategies"
+    ],
+    "rules": [
+      "Database module is a domain specific module to manage business logic of database",
+      "Follow consistent naming conventions with PascalCase for classes and camelCase for files",
+      "Keep business logic in service files, not in signals or documents",
+      "Use field validation in constant models to ensure data integrity",
+      "Create proper indexes in middleware for performance optimization",
+      "Apply appropriate authorization guards to protect sensitive operations",
+      "Use dictionary files for all UI text to support internationalization"
+    ]
+  },
+  "page": "/[lang]/akanjs/(docs)/docs/module/overview/page.tsx"
+}

package/cjs/src/guidelines/databaseModule/databaseModule.instruction.md

@@ -379,29 +379,16 @@ export const registerUserModule = (option: ModulesOptions) =>
 #### Template Component (`[ModuleName].Template.tsx`)
 
 ```tsx
-import { Button, Form } from "@util/ui";
+import { Button } from "@akanjs/ui";
 
 import { dict } from "../dict";
 import { st } from "../st";
 
 export const General = () => {
-  const { userForm } = st.use.user();
-  const { signin, setUserForm } = st.do.user();
+  const { userForm } = st.use.userForm();
 
   return (
-    <Form onSubmit={signin}>
-      <Form.Item label={dict.user.email}>
-        <Form.Input type="email" value={userForm.email} onChange={(e) => setUserForm({ email: e.target.value })} />
-      </Form.Item>
-      <Form.Item label={dict.user.password}>
-        <Form.Input
-          type="password"
-          value={userForm.password || ""}
-          onChange={(e) => setUserForm({ password: e.target.value })}
-        />
-      </Form.Item>
-      <Button type="submit">{dict.user.signin}</Button>
-    </Form>
+    // WIP
   );
 };
 ```
@@ -473,7 +460,7 @@ export const User = () => (
 #### Client Exports (`index.tsx`)
 
 ```tsx
-import { Signal } from "@util/ui";
+import { Signal } from "@akanjs/ui";
 import { FaUser } from "react-icons/fa";
 
 import * as Template from "./User.Template";

package/cjs/src/guidelines/docPageRule/docPageRule.generate.json

@@ -0,0 +1,72 @@
+{
+  "title": "How to create doc page",
+  "description": "How to create documentation page of Akan.js framework",
+  "scans": [
+    {
+      "type": "example",
+      "description": "Example of a system architecture documentation page",
+      "path": "apps/angelo/app/[lang]/akanjs/(docs)/docs/systemArch/frontend/page.tsx"
+    },
+    {
+      "type": "example",
+      "description": "Example of a module documentation page with API reference",
+      "path": "apps/angelo/app/[lang]/akanjs/(docs)/docs/module/signal/page.tsx"
+    },
+    {
+      "type": "source",
+      "description": "Documentation utility components",
+      "path": "apps/angelo/ui/Docs/index.ts"
+    },
+    {
+      "type": "source",
+      "description": "Code snippet component for syntax highlighting",
+      "path": "apps/angelo/ui/Docs/CodeSnippet.tsx"
+    },
+    {
+      "type": "source",
+      "description": "Title component for main headings",
+      "path": "apps/angelo/ui/Docs/Title.tsx"
+    },
+    {
+      "type": "source",
+      "description": "Description component for explanatory text",
+      "path": "apps/angelo/ui/Docs/Description.tsx"
+    },
+    {
+      "type": "source",
+      "description": "Option table component for displaying parameters",
+      "path": "apps/angelo/ui/Docs/OptionTable.tsx"
+    },
+    {
+      "type": "source",
+      "description": "Introduction table component for listing features",
+      "path": "apps/angelo/ui/Docs/IntroTable.tsx"
+    }
+  ],
+  "update": {
+    "filePath": "./docPageRule.instruction.md",
+    "contents": [
+      "Purpose of doc page in Akan.js",
+      "How to create doc page",
+      "Page organization and structure",
+      "Utility components",
+      "Best practices for documentation",
+      "Internationalization guidelines",
+      "Code example guidelines",
+      "Complete example implementation",
+      "Troubleshooting common issues"
+    ],
+    "rules": [
+      "Docs.Layout is already set on the top of layout.tsx file in the root of the project, so you don't need to use it in your page",
+      "Docs utility should be used with `Docs` prefix, like <Docs.Title>, do not use object destructuring",
+      "Always wrap user-facing text in l.trans() with at least English and Korean translations",
+      "Use a logical hierarchy of headings (Title → SubTitle → SubSubTitle)",
+      "Include a divider (<div className=\"divider\"></div>) between major sections",
+      "For long pages, use anchor links with hidden divs for navigation",
+      "Code examples should be realistic and include proper comments",
+      "Tables should use the appropriate type (OptionTable for parameters, IntroTable for features)",
+      "Always specify the correct language for CodeSnippet components"
+    ]
+  },
+  "page": "/[lang]/akanjs/(docs)/docs/[category]/[pageName]/page"
+}

package/cjs/src/guidelines/enumConstant/enumConstant.generate.json

@@ -0,0 +1,24 @@
+{
+  "title": "Enum Constant",
+  "description": "how to generate a enumOf usage in constant.ts file",
+  "scans": [
+    {
+      "type": "source",
+      "description": "base enum library source code",
+      "path": "pkgs/@akanjs/base/src/base.ts"
+    },
+    {
+      "type": "example",
+      "description": "enumOf usage in constant.ts files",
+      "path": "{apps,libs}/*/lib/*/*.constant.ts",
+      "filterText": "enumOf",
+      "sample": 10
+    }
+  ],
+  "update": {
+    "filePath": "./enumConstant.instruction.md",
+    "contents": ["Structure of enumOf usage in constant.ts file", "How to add enumOf usage in constant.ts file"],
+    "rules": []
+  },
+  "page": "/[lang]/akanjs/(docs)/docs/codebase/enum/page.tsx"
+}