@akanjs/cli 1.0.20 → 2.1.0-rc.1

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

@@ -1,339 +0,0 @@
-# @util/ui Component Library Guide
-
-This guide explains how to use the `@util/ui` component library in the Akan.js framework. The `libs/util/ui` directory contains a comprehensive React component library designed for modern web applications with consistent styling, type safety, and advanced functionality.
-
-## Importing Components
-
-Import components from the `@util/ui` package:
-
-```tsx
-// Single component import
-import { Button } from "@util/ui";
-
-// Multiple components import
-import { Button, Input, Link, Image } from "@util/ui";
-
-// Namespace component import
-import { Dialog } from "@akanjs/ui";
-```
-
-## Component Organization and Usage
-
-The component library follows a namespace pattern where complex components expose subcomponents as properties:
-
-```tsx
-// Namespaced component usage example
-<Dialog>
-  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
-  <Dialog.Modal>
-    <Dialog.Title>Title</Dialog.Title>
-    <Dialog.Content>Content</Dialog.Content>
-    <Dialog.Action>
-      <button>Confirm</button>
-    </Dialog.Action>
-  </Dialog.Modal>
-</Dialog>
-```
-
-## Common Component Patterns
-
-### Form Fields and Data Input
-
-The library provides comprehensive form components with built-in validation:
-
-```tsx
-// Button with loading state handling
-<Button
-  onClick={async (e, { onError }) => {
-    try {
-      const result = await saveData();
-      return result;
-    } catch (error) {
-      onError("Failed to save");
-    }
-  }}
-  onSuccess={(result) => handleSuccess(result)}
->
-  Save
-</Button>
-
-// Text input with validation
-<Input
-  value={inputValue}
-  onChange={(value) => setInputValue(value)}
-  validate={(value) => value.length > 0 || "Field is required"}
-  placeholder="Enter value"
-  inputClassName="w-full"
-  cacheKey="unique-input-key" // For session storage persistence
-  icon={<SomeIcon />}
-/>
-
-// Select dropdown
-<Select
-  value={selectedValue}
-  options={optionsList}
-  searchable
-  onChange={(value) => setSelectedValue(value)}
-  renderOption={(option) => <span>{option.label}</span>}
-/>
-```
-
-### Data Display Components
-
-Use these components to present data:
-
-```tsx
-// Image with optimized loading
-<Image
-  src="/path/to/image.jpg"
-  alt="Description"
-  className="rounded-md"
-  width={400}
-  height={300}
-/>
-
-// Avatar for user profiles
-<Avatar
-  src={user.profileImage}
-  className="w-10 h-10"
-/>
-
-// Empty state
-<Empty
-  description="No items found"
-  minHeight={200}
-/>
-
-// Chart visualization
-<Chart.Bar
-  data={chartData}
-  options={chartOptions}
-/>
-```
-
-### Navigation Components
-
-The library provides various navigation patterns:
-
-```tsx
-// Adaptive link (auto-switches between CSR/Next.js)
-<Link href="/some-path">Go to Page</Link>
-
-// Back navigation
-<Link.Back>Go Back</Link.Back>
-
-// Tabbed interface
-<Tab.Provider defaultMenu="tab1">
-  <div className="flex">
-    <Tab.Menu menu="tab1">Tab 1</Tab.Menu>
-    <Tab.Menu menu="tab2">Tab 2</Tab.Menu>
-  </div>
-  <Tab.Panel menu="tab1">
-    Content for tab 1
-  </Tab.Panel>
-  <Tab.Panel menu="tab2" loading="lazy">
-    Content for tab 2
-  </Tab.Panel>
-</Tab.Provider>
-```
-
-### Layout Components
-
-Create consistent layouts across your application:
-
-```tsx
-// Page layout with header
-<Layout>
-  <Layout.Header type="hide">Header Content</Layout.Header>
-  <main>Page Content</main>
-  <Layout.Navbar>Navigation Items</Layout.Navbar>
-</Layout>
-
-// Modal dialog
-<Modal
-  open={isModalOpen}
-  onCancel={() => setModalOpen(false)}
-  title="Modal Title"
->
-  Modal content goes here
-</Modal>
-
-// Mobile bottom sheet
-<BottomSheet
-  open={isBottomSheetOpen}
-  onCancel={() => setBottomSheetOpen(false)}
-  type="half"
->
-  Bottom sheet content
-</BottomSheet>
-```
-
-### Media and File Components
-
-Handle files and media with these components:
-
-```tsx
-// Single image upload with cropping
-<Upload.Image
-  file={imageFile}
-  onChange={async (file) => {
-    // Handle file upload
-    const uploadedFile = await uploadFile(file);
-    setImageFile(uploadedFile);
-  }}
-  onRemove={() => setImageFile(null)}
-/>
-
-// Multiple file upload
-<Upload.FileList
-  multiple
-  fileList={fileList}
-  onChange={async (files) => {
-    // Handle multiple file upload
-    const uploadedFiles = await uploadFiles(files);
-    setFileList([...fileList, ...uploadedFiles]);
-  }}
-  onRemove={(file) => {
-    setFileList(fileList.filter(f => f.id !== file.id));
-  }}
-/>
-```
-
-### Loading and Feedback Components
-
-Provide user feedback with these components:
-
-```tsx
-// Loading area overlay
-<Loading.Area />
-
-// Loading spinner
-<Loading.Spin isCenter />
-
-// Progress bar
-<Loading.ProgressBar value={75} max={100} />
-
-// Loading skeleton
-<Loading.Skeleton />
-```
-
-## Integration with Akan.js Architecture
-
-The `@util/ui` components are designed to work within the Akan.js module architecture pattern:
-
-### In Model.Template.tsx
-
-```tsx
-// Form templates for creating/editing records
-import { Button, Input, Select } from "@util/ui";
-
-export const UserTemplate = ({ user, onSubmit }) => {
-  return (
-    <form onSubmit={onSubmit}>
-      <Input
-        label="Username"
-        value={user.username}
-        onChange={(value) => updateUser({ username: value })}
-        validate={(value) => value.length > 3 || "Username too short"}
-      />
-      <Select label="Role" value={user.role} options={roleOptions} onChange={(value) => updateUser({ role: value })} />
-      <Button type="submit">Save User</Button>
-    </form>
-  );
-};
-```
-
-### In Model.Unit.tsx
-
-```tsx
-// Card/list item components for displaying records
-import { Avatar, Link } from "@util/ui";
-
-export const UserUnit = ({ user }) => {
-  return (
-    <div className="flex items-center rounded border p-4">
-      <Avatar src={user.profileImage} className="mr-4" />
-      <div>
-        <h3>{user.name}</h3>
-        <p>{user.email}</p>
-      </div>
-      <Link href={`/users/${user.id}`}>View Profile</Link>
-    </div>
-  );
-};
-```
-
-### In Model.View.tsx
-
-```tsx
-// Full page views for displaying detailed records
-import { Tab, Layout, Loading } from "@util/ui";
-
-export const UserView = ({ user, isLoading }) => {
-  if (isLoading) return <Loading.Area />;
-
-  return (
-    <Layout>
-      <Layout.Header>{user.name}'s Profile</Layout.Header>
-      <Tab.Provider defaultMenu="details">
-        <Tab.Menu menu="details">Details</Tab.Menu>
-        <Tab.Menu menu="activity">Activity</Tab.Menu>
-
-        <Tab.Panel menu="details">{/* User details content */}</Tab.Panel>
-        <Tab.Panel menu="activity" loading="lazy">
-          {/* User activity content */}
-        </Tab.Panel>
-      </Tab.Provider>
-    </Layout>
-  );
-};
-```
-
-## Best Practices
-
-1. **Component Selection**
-
-   - Use the most specific component for the task
-   - Prefer namespaced components for complex UI elements
-   - Combine components to create consistent patterns
-
-2. **Props Usage**
-
-   - Only use the documented props for each component
-   - Follow the TypeScript interfaces for proper type checking
-   - Use className props for styling customization
-
-3. **Styling**
-
-   - Use Tailwind CSS classes for styling customization
-   - Maintain consistent spacing and layout
-   - Follow responsive design patterns
-
-4. **Accessibility**
-
-   - Use proper ARIA attributes when required
-   - Ensure keyboard navigation works correctly
-   - Maintain color contrast requirements
-
-5. **Performance**
-   - Use lazy loading for heavy components
-   - Implement proper memoization for complex components
-   - Keep render cycles efficient
-
-## [Strict Caution]
-
-- Every component must be used exactly as described in this documentation
-- Do not add any additional props to the components beyond those documented
-- Only the components explicitly listed in the documentation are available
-- Follow the established patterns for component composition and layout
-
-## Framework Integration Features
-
-- TypeScript support with strict typing
-- Responsive design with mobile-first approach
-- Internationalization (i18n) integration
-- Session storage caching for form inputs
-- Accessibility compliance
-- Consistent DaisyUI/Tailwind CSS styling
-- Modern React patterns (hooks, context, providers)
-- Error handling and validation systems

package/cjs/src/templates/__scalar/__model__/__model__.constant.js

@@ -1,33 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// pkgs/@akanjs/cli/src/templates/__scalar/__model__/__model__.constant.ts
-var model_constant_exports = {};
-__export(model_constant_exports, {
-  default: () => getContent
-});
-module.exports = __toCommonJS(model_constant_exports);
-function getContent(scanInfo, dict) {
-  return `
-import { via } from "@akanjs/constant";
-
-export class ${dict.Model} extends via((field) => ({
-  field: field(String),
-})) {}
-`;
-}

package/cjs/src/templates/__scalar/__model__/__model__.dictionary.js

@@ -1,37 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// pkgs/@akanjs/cli/src/templates/__scalar/__model__/__model__.dictionary.ts
-var model_dictionary_exports = {};
-__export(model_dictionary_exports, {
-  default: () => getContent
-});
-module.exports = __toCommonJS(model_dictionary_exports);
-function getContent(scanInfo, dict) {
-  return `
-import { scalarDictionary } from "@akanjs/dictionary";
-
-import type { ${dict.Model} } from "./${dict.model}.constant";
-
-export const dictionary = scalarDictionary(["en", "ko"])
-  .of((t) => t(["${dict.Model}", "${dict.Model}"]).desc(["${dict.Model} description", "${dict.Model} \uC124\uBA85"]))
-  .model<${dict.Model}>((t) => ({
-    field: t(["Field", "\uD544\uB4DC"]).desc(["Field Description", "\uD544\uB4DC \uC124\uBA85"]),
-  }));
-`;
-}

package/cjs/src/templates/__scalar/__model__/__model__.document.js

@@ -1,33 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// pkgs/@akanjs/cli/src/templates/__scalar/__model__/__model__.document.ts
-var model_document_exports = {};
-__export(model_document_exports, {
-  default: () => getContent
-});
-module.exports = __toCommonJS(model_document_exports);
-function getContent(scanInfo, dict) {
-  return `
-import { by } from "@akanjs/document";
-
-import * as cnst from "./${dict.model}.constant";
-
-export class ${dict.Model} extends by(cnst.${dict.Model}) {}
-`;
-}

package/cjs/src/templates/app/akan.config.js

@@ -1,33 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// pkgs/@akanjs/cli/src/templates/app/akan.config.ts
-var akan_config_exports = {};
-__export(akan_config_exports, {
-  default: () => getContent
-});
-module.exports = __toCommonJS(akan_config_exports);
-function getContent(scanInfo, dict) {
-  return `
-import type { AppConfig } from "@akanjs/config";
-
-const config: AppConfig = {};
-
-export default config;
-  `;
-}

package/cjs/src/templates/app/app/[lang]/layout.js

@@ -1,55 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/layout.tsx
-var layout_exports = {};
-__export(layout_exports, {
-  default: () => getContent
-});
-module.exports = __toCommonJS(layout_exports);
-function getContent(scanInfo, dict, options) {
-  const isUsingShared = options.libs.includes("shared");
-  return {
-    filename: "layout.tsx",
-    content: `
-import "./styles.css";
-import { RootLayoutProps } from "@akanjs/client";
-import { System } from "@akanjs/ui";
-import { env } from "@${dict.appName}/env/env.client";
-import { fetch } from "@${dict.appName}/client";
-${isUsingShared ? "import { Auth } from '@shared/ui';" : ""}
-
-export const metadata = { title: "${dict.appName}" };
-
-export default function Layout({ children, params }: RootLayoutProps) {
-  return (
-    <System.Provider
-      of={Layout}
-      appName="${dict.appName}"
-      params={params}
-      head={<link rel="icon" href="/favicon.ico" />}
-      // className="bg-base-100"
-      env={env}
-    >
-      {children}${isUsingShared ? "\n      <Auth.User />\n      <Auth.Admin />" : ""}
-    </System.Provider>
-  );
-}
-  `
-  };
-}

package/cjs/src/templates/app/app/[lang]/page.js

@@ -1,111 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/page.tsx
-var page_exports = {};
-__export(page_exports, {
-  default: () => getContent
-});
-module.exports = __toCommonJS(page_exports);
-function getContent(scanInfo, dict) {
-  return {
-    filename: "page.tsx",
-    content: `
-import { Link } from "@akanjs/ui";
-import { FaBolt, FaBook, FaExternalLinkAlt, FaGraduationCap, FaHeart, FaShieldAlt } from "react-icons/fa";
-
-export const metadata = {
-  title: "Akan.js",
-};
-
-export default function Page() {
-  return (
-    <div className="bg-base-100 flex min-h-screen items-center justify-center">
-      <div className="container mx-auto px-4 py-16">
-        <div className="mb-16 text-center">
-          <h1 className="mb-6 text-6xl font-bold">Akan.js</h1>
-          <p className="mx-auto max-w-2xl text-lg">A typescript full-stack framework designed for solo developers</p>
-          <p className="mx-auto max-w-2xl text-lg">that enables building servers, web, and apps all at once</p>
-          <p className="mx-auto max-w-2xl text-lg">making in-house development with minimal resources.</p>
-          <div className="my-8 flex flex-wrap justify-center gap-4">
-            <div className="badge badge-lg text-base-100 bg-primary border-none">
-              <FaBolt className="" />
-              All-in-One
-            </div>
-            <div className="badge badge-lg text-base-100 bg-secondary border-none">
-              <FaShieldAlt className="" />
-              Type-Safe
-            </div>
-            <div className="badge badge-lg text-base-100 bg-success border-none">
-              <FaHeart className="" />
-              Minimal-Code
-            </div>
-          </div>
-        </div>
-        <div className="mb-16 rounded-lg bg-slate-800 p-8">
-          <h2 className="mb-6 text-center text-2xl font-bold text-gray-200">Quick Start</h2>
-          <div className="mockup-code">
-            <pre data-prefix="$">
-              <code className="text-success">npx create-akan-workspace</code>
-            </pre>
-            <pre data-prefix="$">
-              <code className="text-success">cd my-workspace</code>
-            </pre>
-            <pre data-prefix="$">
-              <code className="text-success">akan start my-app</code>
-            </pre>
-          </div>
-        </div>
-        <div className="mb-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-          <div className="card bg-slate-800">
-            <div className="card-body p-6 text-center">
-              <FaGraduationCap className="mx-auto mb-4 text-4xl text-blue-400" />
-              <h3 className="mb-2 text-lg font-semibold text-gray-200">Learn</h3>
-              <p className="mb-4 text-sm text-gray-400">Step-by-step learning guides</p>
-              <Link href="https://akanjs.com/docs/intro/practice" target="_blank">
-                <button className="btn btn-sm w-full">Learn</button>
-              </Link>
-            </div>
-          </div>
-          <div className="card bg-slate-800">
-            <div className="card-body p-6 text-center">
-              <FaBook className="mx-auto mb-4 text-4xl text-purple-400" />
-              <h3 className="mb-2 text-lg font-semibold text-gray-200">Documentation</h3>
-              <p className="mb-4 text-sm text-gray-400">Complete API guides and tutorials</p>
-              <Link href="https://akanjs.com/docs/systemArch/overview" target="_blank">
-                <button className="btn btn-sm w-full">Read Documentation</button>
-              </Link>
-            </div>
-          </div>
-          <div className="card bg-slate-800">
-            <div className="card-body p-6 text-center">
-              <FaExternalLinkAlt className="mx-auto mb-4 text-4xl text-yellow-400" />
-              <h3 className="mb-2 text-lg font-semibold text-gray-200">Official Site</h3>
-              <p className="mb-4 text-sm text-gray-400">Visit our official website</p>
-              <Link href="https://akanjs.com" target="_blank">
-                <button className="btn btn-sm w-full">Go to akanjs.com</button>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}`
-  };
-}

package/cjs/src/templates/app/app/[lang]/styles.css.template

@@ -1,20 +0,0 @@
-@import "tailwindcss";
-@import "@akanjs/ui/styles.css";
-
-@plugin "daisyui" {
-  logs: false;
-  exclude: properties;
-}
-
-@plugin "daisyui/theme" {
-  name: "light";
-}
-
-@plugin "daisyui/theme" {
-  name: "dark";
-}
-
-@theme {
-  --font-lemonmilk: var(--font-lemonmilk);
-  --font-pretendard: var(--font-pretendard);
-}