Akan.js

Docs

Introduction
• Quick Start
• How it works
• Practice a Workflow
System Architecture
• Overview
• Backend System
• Frontend System
Module Convention
• Overview
• model.constant.ts
• model.dictionary.ts
• model.document.ts
• model.service.ts
• model.signal.ts
• model.store.ts
• Model.Template.ts
• Model.Unit.ts
• Model.Util.ts
• Model.View.ts
• Model.Zone.ts
Scalar Convention
• Overview
• scalar.constant.ts
• scalar.dictionary.ts
Codebase
• Overview
• Environment Variables
• Primitive Scalar Types
• Domain Based Modules
• Component
• CSS
• Enum
• Field
DevOps
• Master System
• Cluster System
• Application System
• Edge System

Component Rule Instruction for Akan.js Framework

Component Architecture
Akan.js uses a modular component architecture that separates UI elements by responsibility. Each feature follows a consistent pattern with standardized component types.
Core Structure
import { clsx } from "@akanjs/client";
import { ModelType } from "@your-app/client";
interface ComponentProps {
  className?: string;
  // Feature-specific props
}
export const Component = ({ className, ...props }: ComponentProps) => {
  return <div className={clsx("base-classes", className)}>
    {/* Component content */}
  </div>;
};
Directory Organization
{apps,libs}/
└── project-name/
    └── lib/
        └── feature-name/
            ├── FeatureName.Unit.tsx
            ├── FeatureName.View.tsx
            ├── FeatureName.Template.tsx
            ├── FeatureName.Util.tsx
            ├── FeatureName.Zone.tsx
            ├── featureName.constant.ts
            ├── featureName.service.ts
            ├── featureName.signal.ts
            ├── featureName.store.ts
            └── index.ts
Component Types
1. Unit Components (*.Unit.tsx)
Display individual items in lists or cards. Used for compact display of model data.
export const Card = ({ model, href }) => {
  return (
    <Link href={href} 
      className="card bg-base-100 rounded-lg shadow-sm transition-shadow hover:shadow-lg">
      <div className="card-body p-4">
        <h3 className="card-title font-medium">{model.title}</h3>
        <p className="text-base-content/70">{model.description}</p>
      </div>
    </Link>
  );
};
2. View Components (*.View.tsx)
Display detailed model information. Used for comprehensive views of single models.
export const General = ({ model, className }) => {
  return (
    <div className={clsx("bg-base-100 rounded-lg p-6 shadow-lg", className)}>
      <div className="border-primary mb-6 border-l-4 pl-4">
        <h1 className="text-primary text-2xl font-bold">{model.title}</h1>
      </div>
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        {/* Model details */}
      </div>
    </div>
  );
};
3. Template Components (*.Template.tsx)
Create/edit forms for models. Handle input gathering and form state management.
export const General = () => {
  const form = useModelForm();
  return (
    <div className="space-y-4">
      <div className="form-control w-full">
        <label className="label">
          <span className="label-text">Title</span>
        </label>
        <input
          value={form.title ?? ""}
          onChange={(e) => setTitle(e.target.value)}
          className="input input-bordered w-full"
        />
      </div>
      {/* Additional form fields */}
    </div>
  );
};
4. Util Components (*.Util.tsx)
Feature-specific UI helpers, buttons, and toolbars.
export const Toolbar = ({ model, className }) => {
  return (
    <div className={clsx("flex gap-2", className)}>
      <button className="btn btn-primary btn-sm">Duplicate</button>
      <button className="btn btn-error btn-sm">Delete</button>
    </div>
  );
};
5. Zone Components (*.Zone.tsx)
Container components with data loading. Handle data fetching, layout, and component wiring.
export const List = ({ init, query, className }) => {
  return (
    <Load.Units
      init={init}
      query={query}
      className={clsx("grid grid-cols-1 gap-4 md:grid-cols-2", className)}
      renderItem={(model) => <Model.Unit.Card model={model} />}
      renderEmpty={() => <div className="alert alert-info">No items found</div>}
    />
  );
};
File Naming Conventions
{Model}.Unit.tsx:Pattern:-

Card/list item components for model display

{Model}.View.tsx:Pattern:-

Detailed view components for single models

{Model}.Template.tsx:Pattern:-

Form/edit components for model manipulation

{Model}.Util.tsx:Pattern:-

Utility components specific to a feature

{Model}.Zone.tsx:Pattern:-

Container components with data loading

{model}.constant.ts:Pattern:-

Types, GraphQL schema, and enums

{model}.service.ts:Pattern:-

Business logic and database operations

{model}.signal.ts:Pattern:-

Client state management and API calls

Utility Functions
Cookie Management

Handles browser cookie operations

setCookie("session", "token123");
const session = getCookie("session");
Storage Utilities

Cross-platform storage for web and mobile

await storage.setItem("key", "value");
const value = await storage.getItem("key");
Device Capabilities

Access device features like haptic feedback

await device.init();
device.vibrate("medium");
Routing

Navigation and URL management

router.push("/dashboard");
router.replace("/login", { q: "term" });
CSS Utilities

Class name management and composition

clsx("base-class", isActive && "active-class", className)
Best Practices
1. **Separation of Concerns**: Keep business logic in signal/store files, UI rendering in components 2. **Component Composition**: Break complex UIs into smaller components, use composition 3. **Performance**: Use React.memo, avoid inline functions, leverage useMemo/useCallback 4. **Accessibility**: Include ARIA attributes, ensure keyboard navigation, maintain color contrast 5. **Type Safety**: Define clear interfaces, leverage TypeScript's type system 6. **State Management**: Use framework-provided state utilities, keep global state minimal
Complete Examples
Product Unit Component
export const ProductCard = ({ product, href }) => {
  return (
    <Link href={href} className="card bg-base-100 rounded-lg shadow-sm transition-shadow hover:shadow-lg">
      <figure className="px-4 pt-4">
        <img src={product.image?.url} alt={product.name} 
             className="h-48 w-full rounded-lg object-cover" />
      </figure>
      <div className="card-body p-4">
        <h3 className="card-title font-medium">{product.name}</h3>
        <div className="text-primary">${product.price?.toFixed(2)}</div>
        <p className="text-base-content/70 text-sm">{product.description}</p>
      </div>
    </Link>
  );
};
Product View Component
export const ProductView = ({ product, className }) => {
  return (
    <div className={clsx("bg-base-100 rounded-lg p-6 shadow-lg", className)}>
      <div className="flex flex-col gap-6 md:flex-row">
        <div className="w-full md:w-1/2">
          <img src={product.image?.url} alt={product.name} 
               className="w-full rounded-lg object-cover" />
        </div>
        <div className="w-full md:w-1/2 space-y-4">
          <h1 className="text-3xl font-bold">{product.name}</h1>
          <div className="text-primary text-xl font-medium">
            ${product.price?.toFixed(2)}
          </div>
          <p className="whitespace-pre-wrap">{product.description}</p>
          <div className="flex gap-2">
            <button className="btn btn-primary">Add to Cart</button>
            <button className="btn btn-outline">Save for Later</button>
          </div>
        </div>
      </div>
    </div>
  );
};
Product Template Component
export const ProductForm = () => {
  const [form, setForm] = useState({ name: '', price: 0 });
  
  return (
    <div className="space-y-6">
      <div className="form-control w-full">
        <label className="label">
          <span className="label-text">Product Name</span>
        </label>
        <input
          value={form.name}
          onChange={(e) => setForm({...form, name: e.target.value})}
          className="input input-bordered w-full"
        />
      </div>
      
      <div className="form-control w-full">
        <label className="label">
          <span className="label-text">Price</span>
        </label>
        <input
          type="number"
          value={form.price}
          onChange={(e) => setForm({...form, price: Number(e.target.value)})}
          className="input input-bordered w-full"
        />
      </div>
    </div>
  );
};
Next
Quick Start
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2025 Akan.js. All rights reserved.
System managed bybassman