@akanjs/cli 0.0.150 → 0.0.152
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.js +18 -15
- package/cjs/src/guidelines/componentRule/componentRule.instruction.md +7 -6
- package/cjs/src/guidelines/databaseModule/databaseModule.instruction.md +4 -17
- package/cjs/src/guidelines/modelConstant/modelConstant.instruction.md +1 -1
- package/cjs/src/guidelines/modelUnit/modelUnit.instruction.md +2 -2
- package/cjs/src/guidelines/modelView/modelView.instruction.md +1 -1
- package/cjs/src/guidelines/modelZone/modelZone.instruction.md +3 -3
- package/cjs/src/guidelines/sharedUiUsage/sharedUiUsage.instruction.md +5 -10
- package/cjs/src/guidelines/utilUiUsage/utilUiUsage.instruction.md +1 -1
- package/cjs/src/templates/app/app/[lang]/(__appName__)/(public)/forgotpassword/page.js +1 -1
- package/cjs/src/templates/app/app/[lang]/(__appName__)/(public)/signin/page.js +1 -1
- package/cjs/src/templates/app/app/[lang]/(__appName__)/(public)/unknown/page.js +3 -3
- package/cjs/src/templates/app/app/[lang]/(__appName__)/layout.js +1 -1
- package/cjs/src/templates/app/app/[lang]/admin/layout.js +1 -1
- package/cjs/src/templates/app/app/layout.js +1 -1
- package/cjs/src/templates/app/lib/setting/Setting.Zone.js +2 -2
- package/cjs/src/templates/app/lib/setting/index.js +1 -1
- package/cjs/src/templates/app/lib/summary/Summary.Zone.js +2 -2
- package/cjs/src/templates/app/lib/summary/index.js +1 -1
- package/cjs/src/templates/app/lib/user/User.Template.js +1 -1
- package/cjs/src/templates/app/lib/user/User.Util.js +1 -1
- package/cjs/src/templates/app/lib/user/User.Zone.js +1 -1
- package/cjs/src/templates/app/lib/user/index.js +1 -1
- package/cjs/src/templates/app/main.js +1 -2
- package/cjs/src/templates/app/ui/Footer.js +1 -1
- package/cjs/src/templates/app/ui/MainHeader.js +1 -1
- package/cjs/src/templates/crudPages/[__model__Id]/edit/page.js +1 -1
- package/cjs/src/templates/crudPages/[__model__Id]/page.js +2 -2
- package/cjs/src/templates/crudPages/new/page.js +1 -1
- package/cjs/src/templates/crudPages/page.js +2 -2
- package/cjs/src/templates/lib/__lib/lib.dictionary.js +2 -2
- package/cjs/src/templates/lib/__lib/lib.signal.js +3 -3
- package/cjs/src/templates/lib/__lib/lib.store.js +2 -1
- package/cjs/src/templates/libRoot/lib/setting/Setting.Zone.js +2 -2
- package/cjs/src/templates/libRoot/lib/setting/index.js +1 -1
- package/cjs/src/templates/libRoot/lib/summary/Summary.Zone.js +2 -2
- package/cjs/src/templates/libRoot/lib/summary/index.js +1 -1
- package/cjs/src/templates/libRoot/lib/user/User.Template.js +1 -1
- package/cjs/src/templates/libRoot/lib/user/User.Util.js +1 -1
- package/cjs/src/templates/libRoot/lib/user/User.Zone.js +1 -1
- package/cjs/src/templates/libRoot/lib/user/index.js +1 -1
- package/cjs/src/templates/module/__Model__.Template.js +1 -1
- package/cjs/src/templates/module/__Model__.Unit.js +1 -1
- package/cjs/src/templates/module/__Model__.Util.js +1 -1
- package/cjs/src/templates/module/__Model__.View.js +1 -1
- package/cjs/src/templates/module/__Model__.Zone.js +1 -1
- package/cjs/src/templates/module/index.js +1 -1
- package/esm/index.js +18 -15
- package/esm/src/guidelines/componentRule/componentRule.instruction.md +7 -6
- package/esm/src/guidelines/databaseModule/databaseModule.instruction.md +4 -17
- package/esm/src/guidelines/modelConstant/modelConstant.instruction.md +1 -1
- package/esm/src/guidelines/modelUnit/modelUnit.instruction.md +2 -2
- package/esm/src/guidelines/modelView/modelView.instruction.md +1 -1
- package/esm/src/guidelines/modelZone/modelZone.instruction.md +3 -3
- package/esm/src/guidelines/sharedUiUsage/sharedUiUsage.instruction.md +5 -10
- package/esm/src/guidelines/utilUiUsage/utilUiUsage.instruction.md +1 -1
- package/esm/src/templates/app/app/[lang]/(__appName__)/(public)/forgotpassword/page.js +1 -1
- package/esm/src/templates/app/app/[lang]/(__appName__)/(public)/signin/page.js +1 -1
- package/esm/src/templates/app/app/[lang]/(__appName__)/(public)/unknown/page.js +3 -3
- package/esm/src/templates/app/app/[lang]/(__appName__)/layout.js +1 -1
- package/esm/src/templates/app/app/[lang]/admin/layout.js +1 -1
- package/esm/src/templates/app/app/layout.js +1 -1
- package/esm/src/templates/app/lib/setting/Setting.Zone.js +2 -2
- package/esm/src/templates/app/lib/setting/index.js +1 -1
- package/esm/src/templates/app/lib/summary/Summary.Zone.js +2 -2
- package/esm/src/templates/app/lib/summary/index.js +1 -1
- package/esm/src/templates/app/lib/user/User.Template.js +1 -1
- package/esm/src/templates/app/lib/user/User.Util.js +1 -1
- package/esm/src/templates/app/lib/user/User.Zone.js +1 -1
- package/esm/src/templates/app/lib/user/index.js +1 -1
- package/esm/src/templates/app/main.js +1 -2
- package/esm/src/templates/app/ui/Footer.js +1 -1
- package/esm/src/templates/app/ui/MainHeader.js +1 -1
- package/esm/src/templates/crudPages/[__model__Id]/edit/page.js +1 -1
- package/esm/src/templates/crudPages/[__model__Id]/page.js +2 -2
- package/esm/src/templates/crudPages/new/page.js +1 -1
- package/esm/src/templates/crudPages/page.js +2 -2
- package/esm/src/templates/lib/__lib/lib.dictionary.js +2 -2
- package/esm/src/templates/lib/__lib/lib.signal.js +3 -3
- package/esm/src/templates/lib/__lib/lib.store.js +2 -1
- package/esm/src/templates/libRoot/lib/setting/Setting.Zone.js +2 -2
- package/esm/src/templates/libRoot/lib/setting/index.js +1 -1
- package/esm/src/templates/libRoot/lib/summary/Summary.Zone.js +2 -2
- package/esm/src/templates/libRoot/lib/summary/index.js +1 -1
- package/esm/src/templates/libRoot/lib/user/User.Template.js +1 -1
- package/esm/src/templates/libRoot/lib/user/User.Util.js +1 -1
- package/esm/src/templates/libRoot/lib/user/User.Zone.js +1 -1
- package/esm/src/templates/libRoot/lib/user/index.js +1 -1
- package/esm/src/templates/module/__Model__.Template.js +1 -1
- package/esm/src/templates/module/__Model__.Unit.js +1 -1
- package/esm/src/templates/module/__Model__.Util.js +1 -1
- package/esm/src/templates/module/__Model__.View.js +1 -1
- package/esm/src/templates/module/__Model__.Zone.js +1 -1
- package/esm/src/templates/module/index.js +1 -1
- package/package.json +1 -1
- package/src/guidelines/componentRule/componentRule.instruction.md +7 -6
- package/src/guidelines/databaseModule/databaseModule.instruction.md +4 -17
- package/src/guidelines/modelConstant/modelConstant.instruction.md +1 -1
- package/src/guidelines/modelUnit/modelUnit.instruction.md +2 -2
- package/src/guidelines/modelView/modelView.instruction.md +1 -1
- package/src/guidelines/modelZone/modelZone.instruction.md +3 -3
- package/src/guidelines/sharedUiUsage/sharedUiUsage.instruction.md +5 -10
- package/src/guidelines/utilUiUsage/utilUiUsage.instruction.md +1 -1
package/cjs/index.js
CHANGED
|
@@ -612,7 +612,8 @@ var withBase = (appName, config, libs, routes = []) => {
|
|
|
612
612
|
...[appName, ...libs].map((lib) => [`@${lib}/ui`, `@${lib}/next`, `@${lib}/common`, `@${lib}/client`]).flat(),
|
|
613
613
|
"@contract",
|
|
614
614
|
"@akanjs/next",
|
|
615
|
-
"@akanjs/common"
|
|
615
|
+
"@akanjs/common",
|
|
616
|
+
"@akanjs/ui"
|
|
616
617
|
]
|
|
617
618
|
},
|
|
618
619
|
// modularizeImports: {
|
|
@@ -1435,19 +1436,19 @@ var Executor = class _Executor {
|
|
|
1435
1436
|
...options
|
|
1436
1437
|
});
|
|
1437
1438
|
let stdout = "";
|
|
1439
|
+
let stderr = "";
|
|
1438
1440
|
proc.stdout?.on("data", (data) => {
|
|
1439
1441
|
stdout += data;
|
|
1440
|
-
});
|
|
1441
|
-
proc.stdout?.on("data", (data) => {
|
|
1442
1442
|
this.#stdout(data);
|
|
1443
1443
|
});
|
|
1444
1444
|
proc.stderr?.on("data", (data) => {
|
|
1445
|
+
stderr += data;
|
|
1445
1446
|
this.#stdout(data);
|
|
1446
1447
|
});
|
|
1447
1448
|
return new Promise((resolve, reject) => {
|
|
1448
1449
|
proc.on("exit", (code, signal) => {
|
|
1449
1450
|
if (!!code || signal)
|
|
1450
|
-
reject({ code, signal, stdout });
|
|
1451
|
+
reject({ code, signal, stdout, stderr });
|
|
1451
1452
|
else
|
|
1452
1453
|
resolve(stdout);
|
|
1453
1454
|
});
|
|
@@ -1634,11 +1635,12 @@ var Executor = class _Executor {
|
|
|
1634
1635
|
dict = {},
|
|
1635
1636
|
overwrite = true
|
|
1636
1637
|
}) {
|
|
1637
|
-
const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}
|
|
1638
|
-
|
|
1639
|
-
|
|
1638
|
+
const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}`;
|
|
1639
|
+
const prefixTemplatePath = templatePath.endsWith(".tsx") ? templatePath : templatePath.replace(".ts", ".js");
|
|
1640
|
+
if (import_fs4.default.statSync(prefixTemplatePath).isFile()) {
|
|
1641
|
+
const filename = import_path3.default.basename(prefixTemplatePath);
|
|
1640
1642
|
const fileContent = await this.#applyTemplateFile(
|
|
1641
|
-
{ templatePath, targetPath: import_path3.default.join(basePath2, filename), scanResult, overwrite },
|
|
1643
|
+
{ templatePath: prefixTemplatePath, targetPath: import_path3.default.join(basePath2, filename), scanResult, overwrite },
|
|
1642
1644
|
dict
|
|
1643
1645
|
);
|
|
1644
1646
|
return fileContent ? [fileContent] : [];
|
|
@@ -2893,7 +2895,6 @@ var runCommands = async (...commands) => {
|
|
|
2893
2895
|
} catch (e) {
|
|
2894
2896
|
const errMsg = e instanceof Error ? e.message : typeof e === "string" ? e : JSON.stringify(e);
|
|
2895
2897
|
Logger.error(`Command Error: ${import_chalk4.default.red(errMsg)}`);
|
|
2896
|
-
console.error(e);
|
|
2897
2898
|
throw e;
|
|
2898
2899
|
}
|
|
2899
2900
|
});
|
|
@@ -3204,6 +3205,7 @@ var Builder = class {
|
|
|
3204
3205
|
format,
|
|
3205
3206
|
outdir: `${this.#distExecutor.cwdPath}/${format}`,
|
|
3206
3207
|
logLevel: "error",
|
|
3208
|
+
// external: ["react", "react-dom"],
|
|
3207
3209
|
loader: assetLoader
|
|
3208
3210
|
};
|
|
3209
3211
|
}
|
|
@@ -3524,7 +3526,8 @@ var ApplicationRunner = class {
|
|
|
3524
3526
|
if (target === "frontend") {
|
|
3525
3527
|
await app.exec("rm -rf .next");
|
|
3526
3528
|
app.writeFile("next.config.ts", defaultNextConfigFile);
|
|
3527
|
-
}
|
|
3529
|
+
} else if (target === "csr")
|
|
3530
|
+
await app.workspace.exec("rm -rf node_modules/.vite");
|
|
3528
3531
|
return { env: this.#getEnv(app, { AKAN_COMMAND_TYPE: type }) };
|
|
3529
3532
|
}
|
|
3530
3533
|
async buildBackend(app) {
|
|
@@ -3612,7 +3615,7 @@ var ApplicationRunner = class {
|
|
|
3612
3615
|
if (open2)
|
|
3613
3616
|
setTimeout(() => (0, import_open.default)("http://localhost:4200"), 3e3);
|
|
3614
3617
|
onStart?.();
|
|
3615
|
-
await app.spawn("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], { env });
|
|
3618
|
+
await app.spawn("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], { env, stdio: "inherit" });
|
|
3616
3619
|
}
|
|
3617
3620
|
async #getViteConfig(app, command) {
|
|
3618
3621
|
const { env } = await this.#prepareCommand(app, command, "csr");
|
|
@@ -4856,7 +4859,7 @@ var requestTemplate = ({
|
|
|
4856
4859
|
\uCF54\uB529 \uADDC\uCE59
|
|
4857
4860
|
- \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4858
4861
|
- \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4859
|
-
- CSS: tailwind, DaisyUI(
|
|
4862
|
+
- CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
|
|
4860
4863
|
- Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4861
4864
|
- \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4862
4865
|
\uCF54\uB4DC \uC2A4\uD0C0\uC77C
|
|
@@ -4914,7 +4917,7 @@ var requestView = ({
|
|
|
4914
4917
|
\uCF54\uB529 \uADDC\uCE59
|
|
4915
4918
|
- \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4916
4919
|
- \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4917
|
-
- CSS: tailwind, DaisyUI(
|
|
4920
|
+
- CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
|
|
4918
4921
|
- Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4919
4922
|
- \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4920
4923
|
\uCF54\uB4DC \uC2A4\uD0C0\uC77C
|
|
@@ -4975,7 +4978,7 @@ var requestUnit = ({
|
|
|
4975
4978
|
\uCF54\uB529 \uADDC\uCE59
|
|
4976
4979
|
- \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4977
4980
|
- \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4978
|
-
- CSS: tailwind, DaisyUI(
|
|
4981
|
+
- CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
|
|
4979
4982
|
- Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4980
4983
|
- \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4981
4984
|
\uCF54\uB4DC \uC2A4\uD0C0\uC77C
|
|
@@ -5021,7 +5024,7 @@ var ModuleRunner = class {
|
|
|
5021
5024
|
async createComponentTemplate(module2, type) {
|
|
5022
5025
|
await module2.sys.applyTemplate({
|
|
5023
5026
|
basePath: `./lib/${module2.name}`,
|
|
5024
|
-
template: `module/
|
|
5027
|
+
template: `module/__Model__.${capitalize(type)}.tsx`,
|
|
5025
5028
|
dict: { model: module2.name, appName: module2.sys.name }
|
|
5026
5029
|
});
|
|
5027
5030
|
return {
|
|
@@ -374,7 +374,7 @@ Here's a complete example of components for a "Product" feature:
|
|
|
374
374
|
```tsx
|
|
375
375
|
import { clsx, ModelProps } from "@akanjs/client";
|
|
376
376
|
import { cnst } from "@app/client";
|
|
377
|
-
import { Image, Link } from "@
|
|
377
|
+
import { Image, Link } from "@akanjs/ui";
|
|
378
378
|
|
|
379
379
|
export const Card = ({ product, href }: ModelProps<"product", cnst.Product>) => {
|
|
380
380
|
return (
|
|
@@ -395,7 +395,7 @@ export const Card = ({ product, href }: ModelProps<"product", cnst.Product>) =>
|
|
|
395
395
|
```tsx
|
|
396
396
|
import { clsx } from "@akanjs/client";
|
|
397
397
|
import { cnst } from "@app/client";
|
|
398
|
-
import { Button, Image } from "@
|
|
398
|
+
import { Button, Image } from "@akanjs/ui";
|
|
399
399
|
|
|
400
400
|
interface ProductViewProps {
|
|
401
401
|
className?: string;
|
|
@@ -445,7 +445,8 @@ export const General = ({ className, product }: ProductViewProps) => {
|
|
|
445
445
|
"use client";
|
|
446
446
|
import { clsx } from "@akanjs/client";
|
|
447
447
|
import { st } from "@app/client";
|
|
448
|
-
import { Button, Input
|
|
448
|
+
import { Button, Input } from "@akanjs/ui";
|
|
449
|
+
import { Upload } from "@util/ui";
|
|
449
450
|
import { AiOutlinePlus } from "react-icons/ai";
|
|
450
451
|
|
|
451
452
|
export const General = () => {
|
|
@@ -520,8 +521,8 @@ export const General = () => {
|
|
|
520
521
|
import { ModelDashboardProps } from "@akanjs/client";
|
|
521
522
|
import { getQueryMap } from "@akanjs/constant";
|
|
522
523
|
import { cnst, st } from "@app/client";
|
|
523
|
-
import { Data } from "@
|
|
524
|
-
import { Button } from "@
|
|
524
|
+
import { Data } from "@akanjs/ui";
|
|
525
|
+
import { Button } from "@akanjs/ui";
|
|
525
526
|
|
|
526
527
|
export const Stat = ({
|
|
527
528
|
className,
|
|
@@ -591,7 +592,7 @@ export const PriceFilter = ({
|
|
|
591
592
|
import { ModelsProps } from "@akanjs/client";
|
|
592
593
|
import { ClientInit, ClientView } from "@akanjs/signal";
|
|
593
594
|
import { cnst, Product } from "@app/client";
|
|
594
|
-
import { Data, Load } from "@
|
|
595
|
+
import { Data, Load } from "@akanjs/ui";
|
|
595
596
|
|
|
596
597
|
export const Admin = ({ sliceName = "product", init, query }: ModelsProps<cnst.Product>) => {
|
|
597
598
|
return (
|
|
@@ -379,29 +379,16 @@ export const registerUserModule = (option: ModulesOptions) =>
|
|
|
379
379
|
#### Template Component (`[ModuleName].Template.tsx`)
|
|
380
380
|
|
|
381
381
|
```tsx
|
|
382
|
-
import { Button
|
|
382
|
+
import { Button } from "@akanjs/ui";
|
|
383
383
|
|
|
384
384
|
import { dict } from "../dict";
|
|
385
385
|
import { st } from "../st";
|
|
386
386
|
|
|
387
387
|
export const General = () => {
|
|
388
|
-
const { userForm } = st.use.
|
|
389
|
-
const { signin, setUserForm } = st.do.user();
|
|
388
|
+
const { userForm } = st.use.userForm();
|
|
390
389
|
|
|
391
390
|
return (
|
|
392
|
-
|
|
393
|
-
<Form.Item label={dict.user.email}>
|
|
394
|
-
<Form.Input type="email" value={userForm.email} onChange={(e) => setUserForm({ email: e.target.value })} />
|
|
395
|
-
</Form.Item>
|
|
396
|
-
<Form.Item label={dict.user.password}>
|
|
397
|
-
<Form.Input
|
|
398
|
-
type="password"
|
|
399
|
-
value={userForm.password || ""}
|
|
400
|
-
onChange={(e) => setUserForm({ password: e.target.value })}
|
|
401
|
-
/>
|
|
402
|
-
</Form.Item>
|
|
403
|
-
<Button type="submit">{dict.user.signin}</Button>
|
|
404
|
-
</Form>
|
|
391
|
+
// WIP
|
|
405
392
|
);
|
|
406
393
|
};
|
|
407
394
|
```
|
|
@@ -473,7 +460,7 @@ export const User = () => (
|
|
|
473
460
|
#### Client Exports (`index.tsx`)
|
|
474
461
|
|
|
475
462
|
```tsx
|
|
476
|
-
import { Signal } from "@
|
|
463
|
+
import { Signal } from "@akanjs/ui";
|
|
477
464
|
import { FaUser } from "react-icons/fa";
|
|
478
465
|
|
|
479
466
|
import * as Template from "./User.Template";
|
|
@@ -340,7 +340,7 @@ const drones = await this.listByName("myDrone", { sort: "alphabetical" });
|
|
|
340
340
|
| `maxlength` | `number` | - | Maximum string length | `@Field.Prop(()=> String, { maxlength: 30 }) title: string;` |
|
|
341
341
|
| `query` | `object` | - | Query value for Summary fields | `@Field.Prop(() => Int, { query: { status: { $ne: 'inactive' } })` |
|
|
342
342
|
| `accumulate` | `object` | - | Aggregation value for Insight fields | `@Field.Prop(() => Int, { accumulate: { $sum: 1 } }) count: number;` |
|
|
343
|
-
| `example` | `any` | - | Example value for API docs | `@Field.Prop(()=> String, { example: "
|
|
343
|
+
| `example` | `any` | - | Example value for API docs | `@Field.Prop(()=> String, { example: "contact@akanjs.com" }) email;` |
|
|
344
344
|
| `of` | `any` | - | Value type for Map fields | `@Field.Prop(()=> Map, { of: Date }) readAts: Map<string, Dayjs>;` |
|
|
345
345
|
| `validate` | `(value) => boolean` | - | Custom validation function | `@Field.Prop(()=> String, { validate: (v)=> v.includes("@") }) email;` |
|
|
346
346
|
|
|
@@ -39,7 +39,7 @@ A typical Model.Unit.tsx file exports multiple component variations:
|
|
|
39
39
|
```tsx
|
|
40
40
|
import { clsx } from "clsx";
|
|
41
41
|
import { cnst } from "@your-lib/client";
|
|
42
|
-
import { Image, Link } from "@
|
|
42
|
+
import { Image, Link } from "@akanjs/ui";
|
|
43
43
|
|
|
44
44
|
// Compact representation (minimal details)
|
|
45
45
|
export const Abstract = ({
|
|
@@ -253,7 +253,7 @@ export const Card = ({ user, className }: { user: cnst.LightUser; className?: st
|
|
|
253
253
|
Always use the optimized `Image` component from `@util/ui` with proper attributes:
|
|
254
254
|
|
|
255
255
|
```tsx
|
|
256
|
-
import { Image } from "@
|
|
256
|
+
import { Image } from "@akanjs/ui";
|
|
257
257
|
|
|
258
258
|
export const Card = ({ product }: { product: cnst.LightProduct }) => (
|
|
259
259
|
<div className="card">
|
|
@@ -748,7 +748,7 @@ export const Product = ({ product }: ProductViewProps) => (
|
|
|
748
748
|
### 1. Optimize Images and Media
|
|
749
749
|
|
|
750
750
|
```tsx
|
|
751
|
-
import { Image } from "@
|
|
751
|
+
import { Image } from "@akanjs/ui"; // Optimized image component
|
|
752
752
|
|
|
753
753
|
export const General = ({ product }: ProductViewProps) => (
|
|
754
754
|
<div className="product-view">
|
|
@@ -33,7 +33,7 @@ Example: `apps/angelo/lib/bizAccount/bizAccount.Zone.tsx`
|
|
|
33
33
|
```tsx
|
|
34
34
|
"use client";
|
|
35
35
|
|
|
36
|
-
import { Load, Data } from "@
|
|
36
|
+
import { Load, Data } from "@akanjs/ui";
|
|
37
37
|
import { ModelsProps } from "@akanjs/client";
|
|
38
38
|
import { ClientInit, ClientView } from "@akanjs/signal";
|
|
39
39
|
import { Model } from "./index";
|
|
@@ -275,7 +275,7 @@ Zone components are typically used within page.tsx files using the Load.Page pat
|
|
|
275
275
|
|
|
276
276
|
```tsx
|
|
277
277
|
// app/[lang]/(app)/model/page.tsx
|
|
278
|
-
import { Load } from "@
|
|
278
|
+
import { Load } from "@akanjs/ui";
|
|
279
279
|
import { fetch } from "@akanjs/signal";
|
|
280
280
|
import { Model } from "@app/lib";
|
|
281
281
|
|
|
@@ -465,7 +465,7 @@ export const Dashboard = ({ className }: { className?: string }) => {
|
|
|
465
465
|
"use client";
|
|
466
466
|
|
|
467
467
|
import { useEffect } from "react";
|
|
468
|
-
import { Load } from "@
|
|
468
|
+
import { Load } from "@akanjs/ui";
|
|
469
469
|
import { fetch, subscriptions } from "@akanjs/signal";
|
|
470
470
|
|
|
471
471
|
export const LiveFeed = ({ className, init }: { className?: string; init: ClientInit<"model", cnst.LightModel> }) => {
|
|
@@ -19,22 +19,17 @@ The `@shared/ui` library in the Akan.js framework provides a comprehensive set o
|
|
|
19
19
|
|
|
20
20
|
### Importing Components
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
UI components are available as named exports from the `@shared/ui` package:
|
|
23
23
|
|
|
24
24
|
```tsx
|
|
25
|
-
import { Field,
|
|
25
|
+
import { Field, Only, Editor } from "@shared/ui";
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
Each namespace contains specialized components for specific use cases:
|
|
29
29
|
|
|
30
30
|
- **Field**: Form inputs and data entry components
|
|
31
|
-
- **Data**: Data visualization and management interfaces
|
|
32
|
-
- **Load**: Data loading patterns with SSR/CSR support
|
|
33
|
-
- **Model**: CRUD operations with modal and inline editing
|
|
34
|
-
- **System**: Application-level providers and utilities
|
|
35
31
|
- **Only**: Conditional rendering based on user state and device
|
|
36
32
|
- **Editor**: Rich text editing capabilities
|
|
37
|
-
- **Property**: Metadata-driven property editing
|
|
38
33
|
|
|
39
34
|
### Component Organization in Your Module
|
|
40
35
|
|
|
@@ -106,7 +101,7 @@ const MyComponent = () => {
|
|
|
106
101
|
Data components are used to display and manage collections of data:
|
|
107
102
|
|
|
108
103
|
```tsx
|
|
109
|
-
import { Data, Model } from "@
|
|
104
|
+
import { Data, Model } from "@akanjs/ui";
|
|
110
105
|
|
|
111
106
|
export const MyFeatureAdmin = ({ sliceName = "myFeature" }) => {
|
|
112
107
|
return (
|
|
@@ -128,7 +123,7 @@ export const MyFeatureAdmin = ({ sliceName = "myFeature" }) => {
|
|
|
128
123
|
Load components handle data fetching and state management:
|
|
129
124
|
|
|
130
125
|
```tsx
|
|
131
|
-
import { Load } from "@
|
|
126
|
+
import { Load } from "@akanjs/ui";
|
|
132
127
|
|
|
133
128
|
export const MyFeatureView = ({ id }) => {
|
|
134
129
|
return (
|
|
@@ -161,7 +156,7 @@ export const MyFeatureList = () => {
|
|
|
161
156
|
Model components handle create, read, update and delete operations:
|
|
162
157
|
|
|
163
158
|
```tsx
|
|
164
|
-
import { Model } from "@
|
|
159
|
+
import { Model } from "@akanjs/ui";
|
|
165
160
|
|
|
166
161
|
export const CreateMyFeature = () => {
|
|
167
162
|
return (
|
|
@@ -26,7 +26,7 @@ function getContent(scanResult, dict = {}) {
|
|
|
26
26
|
return {
|
|
27
27
|
filename: "page.tsx",
|
|
28
28
|
content: `
|
|
29
|
-
import { Image, Link } from "@
|
|
29
|
+
import { Image, Link } from "@akanjs/ui";
|
|
30
30
|
import { User } from "@shared/client";
|
|
31
31
|
|
|
32
32
|
export default function Page() {
|
|
@@ -26,7 +26,7 @@ function getContent(scanResult, dict) {
|
|
|
26
26
|
return {
|
|
27
27
|
filename: "page.tsx",
|
|
28
28
|
content: `
|
|
29
|
-
import { Image } from "@
|
|
29
|
+
import { Image } from "@akanjs/ui";
|
|
30
30
|
import { User } from "@shared/client";
|
|
31
31
|
import { getSelf, router } from "@akanjs/client";
|
|
32
32
|
|
|
@@ -26,11 +26,11 @@ function getContent(scanResult, dict) {
|
|
|
26
26
|
return {
|
|
27
27
|
filename: "page.tsx",
|
|
28
28
|
content: `
|
|
29
|
-
import { Load, System } from "@
|
|
29
|
+
import { Load, System } from "@akanjs/ui";
|
|
30
30
|
|
|
31
31
|
interface PageProps {
|
|
32
32
|
searchParams: Promise<{
|
|
33
|
-
p
|
|
33
|
+
p: string;
|
|
34
34
|
}>;
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -42,7 +42,7 @@ export default function Page({ searchParams }: PageProps) {
|
|
|
42
42
|
const { p } = await searchParams;
|
|
43
43
|
return { p } as const;
|
|
44
44
|
}}
|
|
45
|
-
render={({ p }) => <System.Reconnect dev={true} />}
|
|
45
|
+
render={({ p }) => <System.Reconnect path={p} dev={true} />}
|
|
46
46
|
/>
|
|
47
47
|
);
|
|
48
48
|
}
|
|
@@ -28,7 +28,7 @@ function getContent(scanResult, dict) {
|
|
|
28
28
|
content: `
|
|
29
29
|
import "./styles.css";
|
|
30
30
|
import { RootLayoutProps } from "@akanjs/client";
|
|
31
|
-
import { System } from "@
|
|
31
|
+
import { System } from "@akanjs/ui";
|
|
32
32
|
import { env } from "@${dict.appName}/env/env.client";
|
|
33
33
|
import { fetch } from "@${dict.appName}/client";
|
|
34
34
|
|
|
@@ -27,7 +27,7 @@ function getContent(scanResult, dict) {
|
|
|
27
27
|
filename: "layout.tsx",
|
|
28
28
|
content: `
|
|
29
29
|
import "../(${dict.appName})/styles.css";
|
|
30
|
-
import { System } from "@
|
|
30
|
+
import { System } from "@akanjs/ui";
|
|
31
31
|
import { env } from "@${dict.appName}/env/env.client";
|
|
32
32
|
import { fetch } from "@${dict.appName}/client";
|
|
33
33
|
import type { RootLayoutProps } from "@akanjs/client";
|
|
@@ -28,7 +28,7 @@ function getContent(scanResult, dict) {
|
|
|
28
28
|
content: `
|
|
29
29
|
"use client";
|
|
30
30
|
import { st } from "@${dict.appName}/client";
|
|
31
|
-
import { System } from "@
|
|
31
|
+
import { System } from "@akanjs/ui";
|
|
32
32
|
|
|
33
33
|
export default function Layout({ children }) {
|
|
34
34
|
return <System.Root st={st}>{children}</System.Root>;
|
|
@@ -29,8 +29,8 @@ function getContent(scanResult, dict) {
|
|
|
29
29
|
"use client";
|
|
30
30
|
import { ModelsProps } from "@akanjs/client";
|
|
31
31
|
import { Setting, st, usePage } from "@${dict.appName}/client";
|
|
32
|
-
import { Model } from "@
|
|
33
|
-
import { Loading } from "@
|
|
32
|
+
import { Model } from "@akanjs/ui";
|
|
33
|
+
import { Loading } from "@akanjs/ui";
|
|
34
34
|
import { useEffect } from "react";
|
|
35
35
|
import { AiOutlineEdit } from "react-icons/ai";
|
|
36
36
|
|
|
@@ -26,7 +26,7 @@ function getContent(scanResult, dict = {}) {
|
|
|
26
26
|
return {
|
|
27
27
|
filename: "index.tsx",
|
|
28
28
|
content: `
|
|
29
|
-
import { Signal } from "@
|
|
29
|
+
import { Signal } from "@akanjs/ui";
|
|
30
30
|
import { AiOutlineSetting } from "react-icons/ai";
|
|
31
31
|
|
|
32
32
|
import * as Template from "./Setting.Template";
|
|
@@ -30,8 +30,8 @@ function getContent(scanResult, dict) {
|
|
|
30
30
|
import { ModelsProps } from "@akanjs/client";
|
|
31
31
|
import { DefaultOf } from "@akanjs/signal";
|
|
32
32
|
import { st, Summary } from "@${dict.appName}/client";
|
|
33
|
-
import { Data } from "@
|
|
34
|
-
import { Loading } from "@
|
|
33
|
+
import { Data } from "@akanjs/ui";
|
|
34
|
+
import { Loading } from "@akanjs/ui";
|
|
35
35
|
|
|
36
36
|
import { cnst } from "../cnst";
|
|
37
37
|
|
|
@@ -26,7 +26,7 @@ function getContent(scanResult, dict = {}) {
|
|
|
26
26
|
return {
|
|
27
27
|
filename: "index.tsx",
|
|
28
28
|
content: `
|
|
29
|
-
import { Signal } from "@
|
|
29
|
+
import { Signal } from "@akanjs/ui";
|
|
30
30
|
import { AiOutlineLineChart } from "react-icons/ai";
|
|
31
31
|
|
|
32
32
|
import * as Template from "./Summary.Template";
|
|
@@ -29,7 +29,7 @@ function getContent(scanResult, dict) {
|
|
|
29
29
|
"use client";
|
|
30
30
|
import { clsx } from "@akanjs/client";
|
|
31
31
|
import { Field } from "@shared/ui";
|
|
32
|
-
import { Layout } from "@
|
|
32
|
+
import { Layout } from "@akanjs/ui";
|
|
33
33
|
import { st, usePage } from "@${dict.appName}/client";
|
|
34
34
|
|
|
35
35
|
interface UserEditProps {
|
|
@@ -30,7 +30,7 @@ function getContent(scanResult, dict) {
|
|
|
30
30
|
import { ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
|
|
31
31
|
import { getQueryMap } from "@akanjs/constant";
|
|
32
32
|
import { cnst, st } from "@${dict.appName}/client";
|
|
33
|
-
import { Data } from "@
|
|
33
|
+
import { Data } from "@akanjs/ui";
|
|
34
34
|
import { AiOutlineEdit, AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
|
|
35
35
|
|
|
36
36
|
export const Stat = ({
|
|
@@ -30,7 +30,7 @@ function getContent(scanResult, dict) {
|
|
|
30
30
|
import { ModelsProps } from "@akanjs/client";
|
|
31
31
|
import { DefaultOf } from "@akanjs/signal";
|
|
32
32
|
import { cnst, st, User } from "@${dict.appName}/client";
|
|
33
|
-
import { Data, Model } from "@
|
|
33
|
+
import { Data, Model } from "@akanjs/ui";
|
|
34
34
|
|
|
35
35
|
export const Admin = ({ sliceName = "user", init, query }: ModelsProps<cnst.User>) => {
|
|
36
36
|
return (
|
|
@@ -26,7 +26,7 @@ function getContent(scanResult, dict = {}) {
|
|
|
26
26
|
return {
|
|
27
27
|
filename: "index.tsx",
|
|
28
28
|
content: `
|
|
29
|
-
import { Signal } from "@
|
|
29
|
+
import { Signal } from "@akanjs/ui";
|
|
30
30
|
import { AiOutlineUser } from "react-icons/ai";
|
|
31
31
|
|
|
32
32
|
import * as Template from "./User.Template";
|
|
@@ -32,8 +32,7 @@ import { registerModules } from "./server";
|
|
|
32
32
|
const bootstrap = async () => {
|
|
33
33
|
const serverMode = process.env.SERVER_MODE as "federation" | "batch" | "all" | null;
|
|
34
34
|
if (!serverMode) throw new Error("SERVER_MODE environment variable is not defined");
|
|
35
|
-
|
|
36
|
-
return () => app.close();
|
|
35
|
+
await createNestApp({ registerModules, serverMode, env });
|
|
37
36
|
};
|
|
38
37
|
void bootstrap();
|
|
39
38
|
`;
|
|
@@ -40,7 +40,7 @@ import {
|
|
|
40
40
|
AiOutlineWindows,
|
|
41
41
|
} from "react-icons/ai";
|
|
42
42
|
import { User } from "@shared/client";
|
|
43
|
-
import { Layout, Link } from "@
|
|
43
|
+
import { Layout, Link } from "@akanjs/ui";
|
|
44
44
|
import { ReactNode } from "react";
|
|
45
45
|
import { clsx } from "@akanjs/client";
|
|
46
46
|
|
|
@@ -27,7 +27,7 @@ function getContent(scanResult, dict) {
|
|
|
27
27
|
filename: "page.tsx",
|
|
28
28
|
content: `
|
|
29
29
|
import { AiOutlineTeam } from "react-icons/ai";
|
|
30
|
-
import { Load } from "@
|
|
30
|
+
import { Load } from "@akanjs/ui";
|
|
31
31
|
import { fetch, usePage, ${dict.Model} } from "${dict.appName}/client";
|
|
32
32
|
import type { CsrConfig } from "@akanjs/client";
|
|
33
33
|
|
|
@@ -27,8 +27,8 @@ function getContent(scanResult, dict) {
|
|
|
27
27
|
filename: "page.tsx",
|
|
28
28
|
content: `
|
|
29
29
|
import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
|
|
30
|
-
import { Link } from "@
|
|
31
|
-
import { Load } from "@
|
|
30
|
+
import { Link } from "@akanjs/ui";
|
|
31
|
+
import { Load } from "@akanjs/ui";
|
|
32
32
|
import { getSelf } from "@akanjs/client";
|
|
33
33
|
import { AiOutlineEdit } from "react-icons/ai";
|
|
34
34
|
import type { CsrConfig } from "@akanjs/client";
|
|
@@ -27,7 +27,7 @@ function getContent(scanResult, dict) {
|
|
|
27
27
|
filename: "page.tsx",
|
|
28
28
|
content: `
|
|
29
29
|
import { AiOutlineTeam } from "react-icons/ai";
|
|
30
|
-
import { Load } from "@
|
|
30
|
+
import { Load } from "@akanjs/ui";
|
|
31
31
|
import { cnst, fetch, usePage, ${dict.Model} } from "${dict.appName}/client";
|
|
32
32
|
import { getSelf } from "@akanjs/client";
|
|
33
33
|
import type { CsrConfig } from "@akanjs/client";
|
|
@@ -27,8 +27,8 @@ function getContent(scanResult, dict) {
|
|
|
27
27
|
filename: "page.tsx",
|
|
28
28
|
content: `
|
|
29
29
|
import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
|
|
30
|
-
import { Link } from "@
|
|
31
|
-
import { Load } from "@
|
|
30
|
+
import { Link } from "@akanjs/ui";
|
|
31
|
+
import { Load } from "@akanjs/ui";
|
|
32
32
|
import { getSelf } from "@akanjs/client";
|
|
33
33
|
import type { CsrConfig } from "@akanjs/client";
|
|
34
34
|
|
|
@@ -30,12 +30,12 @@ function getContent(scanResult, dict = {}) {
|
|
|
30
30
|
(module2) => module2 !== "summary" && module2 !== "setting"
|
|
31
31
|
);
|
|
32
32
|
return `
|
|
33
|
-
${libs.length === 0 ? `import {
|
|
33
|
+
${libs.length === 0 ? `import { dictionary as base } from "@akanjs/dictionary";` : ""}
|
|
34
34
|
${libs.map((lib) => `import { dictionary as ${lib} } from "@${lib}";`).join("\n")}
|
|
35
35
|
|
|
36
36
|
${moduleDictionaries.map((module2) => `import { ${module2}SummaryDictionary } from "../${module2}/${module2}.dictionary";`).join("\n")}
|
|
37
37
|
|
|
38
|
-
export const libDictionaries = [${libs.length === 0 ? "
|
|
38
|
+
export const libDictionaries = [${libs.length === 0 ? "base" : libs.join(", ")}] as const;
|
|
39
39
|
|
|
40
40
|
export const libSummaryDictionary = { ${moduleDictionaries.map((module2) => `...${module2}SummaryDictionary`).join(", ")} };
|
|
41
41
|
`;
|
|
@@ -27,10 +27,10 @@ function getContent(scanResult, dict = {}) {
|
|
|
27
27
|
return null;
|
|
28
28
|
const libs = scanResult.akanConfig.libs;
|
|
29
29
|
return `
|
|
30
|
-
${libs.length > 0 ? "" : `import {
|
|
30
|
+
${libs.length > 0 ? "" : `import { fetch as base } from "@akanjs/signal";`}
|
|
31
31
|
${libs.map((lib) => `import { fetch as ${lib} } from "@${lib}";`).join("\n")}
|
|
32
32
|
|
|
33
|
-
export const root = ${libs.length ? scanResult.akanConfig.rootLib ?? libs[0] : "
|
|
34
|
-
export const libFetches = [${libs.length ? libs.join(", ") : "
|
|
33
|
+
export const root = ${libs.length ? scanResult.akanConfig.rootLib ?? libs[0] : "base"};
|
|
34
|
+
export const libFetches = [${libs.length ? libs.join(", ") : "base"}] as const;
|
|
35
35
|
`;
|
|
36
36
|
}
|
|
@@ -27,8 +27,9 @@ function getContent(scanResult, dict = {}) {
|
|
|
27
27
|
return null;
|
|
28
28
|
const libs = scanResult.akanConfig.libs;
|
|
29
29
|
return `
|
|
30
|
+
import { store as base } from "@akanjs/store";
|
|
30
31
|
${libs.map((lib) => `import { store as ${lib} } from "@${lib}/client";`).join("\n")}
|
|
31
32
|
|
|
32
|
-
export const libStores = [${libs.join(", ")}] as const;
|
|
33
|
+
export const libStores = [${[...libs, "base"].join(", ")}] as const;
|
|
33
34
|
`;
|
|
34
35
|
}
|
|
@@ -29,8 +29,8 @@ function getContent(scanResult, dict) {
|
|
|
29
29
|
"use client";
|
|
30
30
|
import { ModelsProps } from "@akanjs/client";
|
|
31
31
|
import { Setting, st, usePage } from "@${dict.libName}/client";
|
|
32
|
-
import { Model } from "@
|
|
33
|
-
import { Loading } from "@
|
|
32
|
+
import { Model } from "@akanjs/ui";
|
|
33
|
+
import { Loading } from "@akanjs/ui";
|
|
34
34
|
import { useEffect } from "react";
|
|
35
35
|
import { AiOutlineEdit } from "react-icons/ai";
|
|
36
36
|
|
|
@@ -26,7 +26,7 @@ function getContent(scanResult, dict = {}) {
|
|
|
26
26
|
return {
|
|
27
27
|
filename: "index.tsx",
|
|
28
28
|
content: `
|
|
29
|
-
import { Signal } from "@
|
|
29
|
+
import { Signal } from "@akanjs/ui";
|
|
30
30
|
import { AiOutlineSetting } from "react-icons/ai";
|
|
31
31
|
|
|
32
32
|
import * as Template from "./Setting.Template";
|