@akanjs/cli 0.0.146 → 0.0.147

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

@@ -3,6 +3,7 @@
 ## Purpose of Documentation Pages in Akan.js
 
 Documentation pages serve as the comprehensive knowledge base for Akan.js framework developers. They:
+
 - Provide clear explanations of framework concepts, architecture, and components
 - Offer technical reference for APIs, modules, and system functionalities
 - Present implementation examples with real-world code snippets
@@ -16,11 +17,13 @@ Documentation pages serve as the comprehensive knowledge base for Akan.js framew
 ### 1. File Location and Structure
 
 Documentation pages should be created in the following location:
+
 ```
 apps/angelo/app/[lang]/akanjs/(docs)/docs/[category]/[pageName]/page.tsx
 ```
 
 Where:
+
 - `[lang]`: Language code (e.g., `en`, `ko`)
 - `[category]`: Main documentation category (e.g., `systemArch`, `module`, `api`)
 - `[pageName]`: Specific page name (e.g., `frontend`, `signal`, `authentication`)
@@ -34,43 +37,43 @@ Each documentation page follows this basic structure:
 
 ```tsx
 import { usePage } from "@angelo/client";
-import { Docs } from "@/ui/Docs";
+import { Docs } from "@angelo/ui";
 
 export default function Page() {
   const { l } = usePage(); // For internationalization
-  
+
   return (
     <>
       <Docs.Title>
         {l.trans({
           en: "Main Page Title",
-          ko: "메인 페이지 제목"
+          ko: "메인 페이지 제목",
         })}
       </Docs.Title>
-      
+
       <Docs.Description>
         {l.trans({
           en: "Introduction paragraph that explains the concept...",
-          ko: "개념을 설명하는 소개 문단..."
+          ko: "개념을 설명하는 소개 문단...",
         })}
       </Docs.Description>
-      
+
       <div className="divider"></div>
-      
+
       <Docs.SubTitle>
         {l.trans({
           en: "Section Title",
-          ko: "섹션 제목"
+          ko: "섹션 제목",
         })}
       </Docs.SubTitle>
-      
+
       <Docs.Description>
         {l.trans({
           en: "Detailed explanation of this section...",
-          ko: "이 섹션에 대한 자세한 설명..."
+          ko: "이 섹션에 대한 자세한 설명...",
         })}
       </Docs.Description>
-      
+
       <Docs.CodeSnippet
         language="typescript"
         code={`
@@ -78,7 +81,7 @@ export default function Page() {
 const example = "Hello Akan.js";
 `}
       />
-      
+
       {/* Additional sections and components */}
     </>
   );
@@ -109,10 +112,10 @@ const { l } = usePage();
 <Docs.Title>
   {l.trans({
     en: "English Title",
-    ko: "한국어 제목"
+    ko: "한국어 제목",
     // Add other languages as needed
   })}
-</Docs.Title>
+</Docs.Title>;
 ```
 
 ## Utility Components
@@ -120,8 +123,8 @@ const { l } = usePage();
 The `Docs` namespace provides specialized components for creating consistent documentation pages. Always import and use them with the `Docs` prefix:
 
 ```tsx
-import { Docs } from "@/ui/Docs";
-// Correct usage: <Docs.Title>, NOT import { Title } from "@/ui/Docs";
+import { Docs } from "@angelo/ui";
+// Correct usage: <Docs.Title>, NOT import { Title } from "@angelo/ui";
 ```
 
 ### 1. Title Components
@@ -135,17 +138,16 @@ import { Docs } from "@/ui/Docs";
 ### 2. Content Components
 
 **Description Block:**
+
 ```tsx
 <Docs.Description>
-  Detailed explanatory text that supports:
-  - Markdown-style formatting
-  - Multi-paragraph content
-  - HTML elements
-  - Internationalization via l.trans()
+  Detailed explanatory text that supports: - Markdown-style formatting - Multi-paragraph content - HTML elements -
+  Internationalization via l.trans()
 </Docs.Description>
 ```
 
 **Code Snippet:**
+
 ```tsx
 <Docs.CodeSnippet
   language="typescript" // Supported: typescript, bash, and others
@@ -162,15 +164,16 @@ import { Docs } from "@/ui/Docs";
 ### 3. Table Components
 
 **Option Table:** For displaying configuration options, parameters, or properties
+
 ```tsx
 <Docs.OptionTable
   items={[
     {
-      key: "optionName",     // Option identifier
-      type: "string",        // Data type
+      key: "optionName", // Option identifier
+      type: "string", // Data type
       default: "defaultVal", // Default value
-      desc: "Description",   // Explanation (can use l.trans())
-      example: "example()"   // Usage example
+      desc: "Description", // Explanation (can use l.trans())
+      example: "example()", // Usage example
     },
     // Additional items...
   ]}
@@ -178,14 +181,15 @@ import { Docs } from "@/ui/Docs";
 ```
 
 **Introduction Table:** For listing and describing related items
+
 ```tsx
 <Docs.IntroTable
-  type="conceptName"  // Table category identifier
+  type="conceptName" // Table category identifier
   items={[
     {
-      name: "itemName",    // Item name
+      name: "itemName", // Item name
       desc: "Description", // Explanation (can use l.trans())
-      example: "example()" // Usage example
+      example: "example()", // Usage example
     },
     // Additional items...
   ]}
@@ -195,11 +199,13 @@ import { Docs } from "@/ui/Docs";
 ### 4. Code Display Components
 
 **Inline Code:**
+
 ```tsx
 <Docs.Code language="typescript">inlineCodeExample</Docs.Code>
 ```
 
 **Custom Code Block:**
+
 ```tsx
 <Docs.CodeView>
   <Docs.Code prefix="1">// First line with line number</Docs.Code>
@@ -212,6 +218,7 @@ import { Docs } from "@/ui/Docs";
 The document layout is automatically applied through the parent layout.tsx file, so you don't need to use `<Docs.Layout>` in your page component.
 
 **Header and Footer:**
+
 ```tsx
 <Docs.Header>Header content</Docs.Header>
 <Docs.Footer>Footer content</Docs.Footer>
@@ -264,11 +271,11 @@ The document layout is automatically applied through the parent layout.tsx file,
 
 ```tsx
 import { usePage } from "@angelo/client";
-import { Docs, type IntroItem, type OptionItem } from "@/ui/Docs";
+import { Docs, type IntroItem, type OptionItem } from "@angelo/ui";
 
 export default function SignalDocsPage() {
   const { l } = usePage();
-  
+
   // Define configuration options
   const signalOptions: OptionItem[] = [
     {
@@ -277,22 +284,22 @@ export default function SignalDocsPage() {
       default: "undefined",
       desc: l.trans({
         en: "Initial value of the signal",
-        ko: "시그널의 초기값"
+        ko: "시그널의 초기값",
       }),
-      example: "signal(0)"
+      example: "signal(0)",
     },
     // Additional options...
   ];
-  
+
   // Define feature list
   const signalFeatures: IntroItem[] = [
     {
       name: "createSignal",
       desc: l.trans({
         en: "Creates a new reactive signal",
-        ko: "새로운 반응형 시그널을 생성"
+        ko: "새로운 반응형 시그널을 생성",
       }),
-      example: "const [value, setValue] = createSignal(0)"
+      example: "const [value, setValue] = createSignal(0)",
     },
     // Additional features...
   ];
@@ -302,33 +309,33 @@ export default function SignalDocsPage() {
       <Docs.Title>
         {l.trans({
           en: "Signal Module",
-          ko: "시그널 모듈"
+          ko: "시그널 모듈",
         })}
       </Docs.Title>
-      
+
       <Docs.Description>
         {l.trans({
           en: "The Signal module provides reactive state management capabilities for Akan.js applications. Signals allow components to efficiently respond to state changes without unnecessary re-renders.",
-          ko: "시그널 모듈은 Akan.js 애플리케이션을 위한 반응형 상태 관리 기능을 제공합니다. 시그널을 통해 컴포넌트는 불필요한 재렌더링 없이 상태 변화에 효율적으로 반응할 수 있습니다."
+          ko: "시그널 모듈은 Akan.js 애플리케이션을 위한 반응형 상태 관리 기능을 제공합니다. 시그널을 통해 컴포넌트는 불필요한 재렌더링 없이 상태 변화에 효율적으로 반응할 수 있습니다.",
         })}
       </Docs.Description>
-      
+
       <div className="divider"></div>
-      
+
       <Docs.SubTitle>
         {l.trans({
           en: "Basic Usage",
-          ko: "기본 사용법"
+          ko: "기본 사용법",
         })}
       </Docs.SubTitle>
-      
+
       <Docs.Description>
         {l.trans({
           en: "Creating and using signals is straightforward:",
-          ko: "시그널 생성 및 사용은 간단합니다:"
+          ko: "시그널 생성 및 사용은 간단합니다:",
         })}
       </Docs.Description>
-      
+
       <Docs.CodeSnippet
         language="typescript"
         code={`
@@ -347,23 +354,23 @@ function Counter() {
   return <div>{count()}</div>;
 }`}
       />
-      
+
       <Docs.SubTitle>
         {l.trans({
           en: "Configuration Options",
-          ko: "설정 옵션"
+          ko: "설정 옵션",
         })}
       </Docs.SubTitle>
-      
+
       <Docs.OptionTable items={signalOptions} />
-      
+
       <Docs.SubTitle>
         {l.trans({
           en: "API Reference",
-          ko: "API 참조"
+          ko: "API 참조",
         })}
       </Docs.SubTitle>
-      
+
       <Docs.IntroTable type="function" items={signalFeatures} />
     </>
   );
@@ -373,10 +380,10 @@ function Counter() {
 ## Troubleshooting
 
 1. **Layout Issues**: Do not manually add `<Docs.Layout>` as it's automatically applied at the layout level
-2. **Component Import**: Always use the namespace import `import { Docs } from "@/ui/Docs"` and reference components as `<Docs.ComponentName>`
+2. **Component Import**: Always use the namespace import `import { Docs } from "@angelo/ui"` and reference components as `<Docs.ComponentName>`
 3. **Translation Issues**: Ensure all user-facing text uses `l.trans()` with complete translations for all supported languages
 4. **Code Highlighting**: Verify the correct language is specified for `<Docs.CodeSnippet>` and `<Docs.Code>` components
 5. **Style Consistency**: If your documentation looks different from others, compare with existing pages to identify styling discrepancies
 6. **Navigation Anchors**: For long pages, include anchor links by adding hidden divs with IDs
 
-For additional assistance, refer to existing documentation pages or contact the framework documentation team.
+For additional assistance, refer to existing documentation pages or contact the framework documentation team.