@akanjs/cli 0.0.150 → 0.0.151
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 +11 -9
- 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 +11 -9
- 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
|
@@ -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.libName}/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";
|
|
@@ -29,7 +29,7 @@ function getContent(scanResult, dict) {
|
|
|
29
29
|
"use client";
|
|
30
30
|
import { cnst, st, usePage } from "@${dict.sysName}/client";
|
|
31
31
|
import { Field } from "@shared/ui";
|
|
32
|
-
import { Layout } from "@
|
|
32
|
+
import { Layout } from "@akanjs/ui";
|
|
33
33
|
|
|
34
34
|
interface ${dict.Model}EditProps {
|
|
35
35
|
${dict.model}Id?: string | null;
|
|
@@ -28,7 +28,7 @@ function getContent(scanResult, dict) {
|
|
|
28
28
|
content: `
|
|
29
29
|
import { ModelProps } from "@akanjs/client";
|
|
30
30
|
import { cnst, ${dict.Model} } from "@${dict.sysName}/client";
|
|
31
|
-
import { Link } from "@
|
|
31
|
+
import { Link } from "@akanjs/ui";
|
|
32
32
|
|
|
33
33
|
export const Card = ({ ${dict.model}, href }: ModelProps<"${dict.model}", cnst.Light${dict.Model}>) => {
|
|
34
34
|
return (
|
|
@@ -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 } from "@${dict.sysName}/client";
|
|
33
|
-
import { Data } from "@
|
|
33
|
+
import { Data } from "@akanjs/ui";
|
|
34
34
|
|
|
35
35
|
export const Stat = ({
|
|
36
36
|
className,
|
|
@@ -28,7 +28,7 @@ function getContent(scanResult, dict) {
|
|
|
28
28
|
content: `
|
|
29
29
|
import { clsx } from "@akanjs/client";
|
|
30
30
|
import { cnst } from "@${dict.sysName}/client";
|
|
31
|
-
import { Image } from "@
|
|
31
|
+
import { Image } from "@akanjs/ui";
|
|
32
32
|
|
|
33
33
|
interface ${dict.Model}ViewProps {
|
|
34
34
|
className?: string;
|
|
@@ -27,7 +27,7 @@ function getContent(scanResult, dict) {
|
|
|
27
27
|
filename: `${dict.Model}.Zone.tsx`,
|
|
28
28
|
content: `
|
|
29
29
|
"use client";
|
|
30
|
-
import { Data, Load } from "@
|
|
30
|
+
import { Data, Load } from "@akanjs/ui";
|
|
31
31
|
import { ModelsProps } from "@akanjs/client";
|
|
32
32
|
import { cnst, ${dict.Model} } from "@${dict.sysName}/client";
|
|
33
33
|
import { ClientInit, ClientView, DefaultOf } from "@akanjs/signal";
|
|
@@ -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 { AiOutlineDatabase } from "react-icons/ai";
|
|
31
31
|
|
|
32
32
|
import * as Template from "./${dict.Model}.Template";
|
package/esm/index.js
CHANGED
|
@@ -599,7 +599,8 @@ var withBase = (appName, config, libs, routes = []) => {
|
|
|
599
599
|
...[appName, ...libs].map((lib) => [`@${lib}/ui`, `@${lib}/next`, `@${lib}/common`, `@${lib}/client`]).flat(),
|
|
600
600
|
"@contract",
|
|
601
601
|
"@akanjs/next",
|
|
602
|
-
"@akanjs/common"
|
|
602
|
+
"@akanjs/common",
|
|
603
|
+
"@akanjs/ui"
|
|
603
604
|
]
|
|
604
605
|
},
|
|
605
606
|
// modularizeImports: {
|
|
@@ -1621,11 +1622,12 @@ var Executor = class _Executor {
|
|
|
1621
1622
|
dict = {},
|
|
1622
1623
|
overwrite = true
|
|
1623
1624
|
}) {
|
|
1624
|
-
const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}
|
|
1625
|
-
|
|
1626
|
-
|
|
1625
|
+
const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}`;
|
|
1626
|
+
const prefixTemplatePath = templatePath.endsWith(".tsx") ? templatePath : templatePath.replace(".ts", ".js");
|
|
1627
|
+
if (fs8.statSync(prefixTemplatePath).isFile()) {
|
|
1628
|
+
const filename = path6.basename(prefixTemplatePath);
|
|
1627
1629
|
const fileContent = await this.#applyTemplateFile(
|
|
1628
|
-
{ templatePath, targetPath: path6.join(basePath2, filename), scanResult, overwrite },
|
|
1630
|
+
{ templatePath: prefixTemplatePath, targetPath: path6.join(basePath2, filename), scanResult, overwrite },
|
|
1629
1631
|
dict
|
|
1630
1632
|
);
|
|
1631
1633
|
return fileContent ? [fileContent] : [];
|
|
@@ -4848,7 +4850,7 @@ var requestTemplate = ({
|
|
|
4848
4850
|
\uCF54\uB529 \uADDC\uCE59
|
|
4849
4851
|
- \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4850
4852
|
- \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4851
|
-
- CSS: tailwind, DaisyUI(
|
|
4853
|
+
- CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
|
|
4852
4854
|
- Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4853
4855
|
- \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4854
4856
|
\uCF54\uB4DC \uC2A4\uD0C0\uC77C
|
|
@@ -4906,7 +4908,7 @@ var requestView = ({
|
|
|
4906
4908
|
\uCF54\uB529 \uADDC\uCE59
|
|
4907
4909
|
- \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4908
4910
|
- \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4909
|
-
- CSS: tailwind, DaisyUI(
|
|
4911
|
+
- CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
|
|
4910
4912
|
- Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4911
4913
|
- \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4912
4914
|
\uCF54\uB4DC \uC2A4\uD0C0\uC77C
|
|
@@ -4967,7 +4969,7 @@ var requestUnit = ({
|
|
|
4967
4969
|
\uCF54\uB529 \uADDC\uCE59
|
|
4968
4970
|
- \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4969
4971
|
- \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4970
|
-
- CSS: tailwind, DaisyUI(
|
|
4972
|
+
- CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
|
|
4971
4973
|
- Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4972
4974
|
- \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
|
|
4973
4975
|
\uCF54\uB4DC \uC2A4\uD0C0\uC77C
|
|
@@ -5013,7 +5015,7 @@ var ModuleRunner = class {
|
|
|
5013
5015
|
async createComponentTemplate(module, type) {
|
|
5014
5016
|
await module.sys.applyTemplate({
|
|
5015
5017
|
basePath: `./lib/${module.name}`,
|
|
5016
|
-
template: `module/
|
|
5018
|
+
template: `module/__Model__.${capitalize(type)}.tsx`,
|
|
5017
5019
|
dict: { model: module.name, appName: module.sys.name }
|
|
5018
5020
|
});
|
|
5019
5021
|
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 (
|
|
@@ -3,11 +3,11 @@ function getContent(scanResult, dict) {
|
|
|
3
3
|
return {
|
|
4
4
|
filename: "page.tsx",
|
|
5
5
|
content: `
|
|
6
|
-
import { Load, System } from "@
|
|
6
|
+
import { Load, System } from "@akanjs/ui";
|
|
7
7
|
|
|
8
8
|
interface PageProps {
|
|
9
9
|
searchParams: Promise<{
|
|
10
|
-
p
|
|
10
|
+
p: string;
|
|
11
11
|
}>;
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -19,7 +19,7 @@ export default function Page({ searchParams }: PageProps) {
|
|
|
19
19
|
const { p } = await searchParams;
|
|
20
20
|
return { p } as const;
|
|
21
21
|
}}
|
|
22
|
-
render={({ p }) => <System.Reconnect dev={true} />}
|
|
22
|
+
render={({ p }) => <System.Reconnect path={p} dev={true} />}
|
|
23
23
|
/>
|
|
24
24
|
);
|
|
25
25
|
}
|
|
@@ -5,7 +5,7 @@ function getContent(scanResult, dict) {
|
|
|
5
5
|
content: `
|
|
6
6
|
import "./styles.css";
|
|
7
7
|
import { RootLayoutProps } from "@akanjs/client";
|
|
8
|
-
import { System } from "@
|
|
8
|
+
import { System } from "@akanjs/ui";
|
|
9
9
|
import { env } from "@${dict.appName}/env/env.client";
|
|
10
10
|
import { fetch } from "@${dict.appName}/client";
|
|
11
11
|
|
|
@@ -4,7 +4,7 @@ function getContent(scanResult, dict) {
|
|
|
4
4
|
filename: "layout.tsx",
|
|
5
5
|
content: `
|
|
6
6
|
import "../(${dict.appName})/styles.css";
|
|
7
|
-
import { System } from "@
|
|
7
|
+
import { System } from "@akanjs/ui";
|
|
8
8
|
import { env } from "@${dict.appName}/env/env.client";
|
|
9
9
|
import { fetch } from "@${dict.appName}/client";
|
|
10
10
|
import type { RootLayoutProps } from "@akanjs/client";
|
|
@@ -5,7 +5,7 @@ function getContent(scanResult, dict) {
|
|
|
5
5
|
content: `
|
|
6
6
|
"use client";
|
|
7
7
|
import { st } from "@${dict.appName}/client";
|
|
8
|
-
import { System } from "@
|
|
8
|
+
import { System } from "@akanjs/ui";
|
|
9
9
|
|
|
10
10
|
export default function Layout({ children }) {
|
|
11
11
|
return <System.Root st={st}>{children}</System.Root>;
|
|
@@ -6,8 +6,8 @@ function getContent(scanResult, dict) {
|
|
|
6
6
|
"use client";
|
|
7
7
|
import { ModelsProps } from "@akanjs/client";
|
|
8
8
|
import { Setting, st, usePage } from "@${dict.appName}/client";
|
|
9
|
-
import { Model } from "@
|
|
10
|
-
import { Loading } from "@
|
|
9
|
+
import { Model } from "@akanjs/ui";
|
|
10
|
+
import { Loading } from "@akanjs/ui";
|
|
11
11
|
import { useEffect } from "react";
|
|
12
12
|
import { AiOutlineEdit } from "react-icons/ai";
|
|
13
13
|
|
|
@@ -3,7 +3,7 @@ function getContent(scanResult, dict = {}) {
|
|
|
3
3
|
return {
|
|
4
4
|
filename: "index.tsx",
|
|
5
5
|
content: `
|
|
6
|
-
import { Signal } from "@
|
|
6
|
+
import { Signal } from "@akanjs/ui";
|
|
7
7
|
import { AiOutlineSetting } from "react-icons/ai";
|
|
8
8
|
|
|
9
9
|
import * as Template from "./Setting.Template";
|
|
@@ -7,8 +7,8 @@ function getContent(scanResult, dict) {
|
|
|
7
7
|
import { ModelsProps } from "@akanjs/client";
|
|
8
8
|
import { DefaultOf } from "@akanjs/signal";
|
|
9
9
|
import { st, Summary } from "@${dict.appName}/client";
|
|
10
|
-
import { Data } from "@
|
|
11
|
-
import { Loading } from "@
|
|
10
|
+
import { Data } from "@akanjs/ui";
|
|
11
|
+
import { Loading } from "@akanjs/ui";
|
|
12
12
|
|
|
13
13
|
import { cnst } from "../cnst";
|
|
14
14
|
|
|
@@ -3,7 +3,7 @@ function getContent(scanResult, dict = {}) {
|
|
|
3
3
|
return {
|
|
4
4
|
filename: "index.tsx",
|
|
5
5
|
content: `
|
|
6
|
-
import { Signal } from "@
|
|
6
|
+
import { Signal } from "@akanjs/ui";
|
|
7
7
|
import { AiOutlineLineChart } from "react-icons/ai";
|
|
8
8
|
|
|
9
9
|
import * as Template from "./Summary.Template";
|
|
@@ -6,7 +6,7 @@ function getContent(scanResult, dict) {
|
|
|
6
6
|
"use client";
|
|
7
7
|
import { clsx } from "@akanjs/client";
|
|
8
8
|
import { Field } from "@shared/ui";
|
|
9
|
-
import { Layout } from "@
|
|
9
|
+
import { Layout } from "@akanjs/ui";
|
|
10
10
|
import { st, usePage } from "@${dict.appName}/client";
|
|
11
11
|
|
|
12
12
|
interface UserEditProps {
|
|
@@ -7,7 +7,7 @@ function getContent(scanResult, dict) {
|
|
|
7
7
|
import { ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
|
|
8
8
|
import { getQueryMap } from "@akanjs/constant";
|
|
9
9
|
import { cnst, st } from "@${dict.appName}/client";
|
|
10
|
-
import { Data } from "@
|
|
10
|
+
import { Data } from "@akanjs/ui";
|
|
11
11
|
import { AiOutlineEdit, AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
|
|
12
12
|
|
|
13
13
|
export const Stat = ({
|
|
@@ -7,7 +7,7 @@ function getContent(scanResult, dict) {
|
|
|
7
7
|
import { ModelsProps } from "@akanjs/client";
|
|
8
8
|
import { DefaultOf } from "@akanjs/signal";
|
|
9
9
|
import { cnst, st, User } from "@${dict.appName}/client";
|
|
10
|
-
import { Data, Model } from "@
|
|
10
|
+
import { Data, Model } from "@akanjs/ui";
|
|
11
11
|
|
|
12
12
|
export const Admin = ({ sliceName = "user", init, query }: ModelsProps<cnst.User>) => {
|
|
13
13
|
return (
|
|
@@ -3,7 +3,7 @@ function getContent(scanResult, dict = {}) {
|
|
|
3
3
|
return {
|
|
4
4
|
filename: "index.tsx",
|
|
5
5
|
content: `
|
|
6
|
-
import { Signal } from "@
|
|
6
|
+
import { Signal } from "@akanjs/ui";
|
|
7
7
|
import { AiOutlineUser } from "react-icons/ai";
|
|
8
8
|
|
|
9
9
|
import * as Template from "./User.Template";
|
|
@@ -9,8 +9,7 @@ import { registerModules } from "./server";
|
|
|
9
9
|
const bootstrap = async () => {
|
|
10
10
|
const serverMode = process.env.SERVER_MODE as "federation" | "batch" | "all" | null;
|
|
11
11
|
if (!serverMode) throw new Error("SERVER_MODE environment variable is not defined");
|
|
12
|
-
|
|
13
|
-
return () => app.close();
|
|
12
|
+
await createNestApp({ registerModules, serverMode, env });
|
|
14
13
|
};
|
|
15
14
|
void bootstrap();
|
|
16
15
|
`;
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
AiOutlineWindows,
|
|
18
18
|
} from "react-icons/ai";
|
|
19
19
|
import { User } from "@shared/client";
|
|
20
|
-
import { Layout, Link } from "@
|
|
20
|
+
import { Layout, Link } from "@akanjs/ui";
|
|
21
21
|
import { ReactNode } from "react";
|
|
22
22
|
import { clsx } from "@akanjs/client";
|
|
23
23
|
|
|
@@ -4,7 +4,7 @@ function getContent(scanResult, dict) {
|
|
|
4
4
|
filename: "page.tsx",
|
|
5
5
|
content: `
|
|
6
6
|
import { AiOutlineTeam } from "react-icons/ai";
|
|
7
|
-
import { Load } from "@
|
|
7
|
+
import { Load } from "@akanjs/ui";
|
|
8
8
|
import { fetch, usePage, ${dict.Model} } from "${dict.appName}/client";
|
|
9
9
|
import type { CsrConfig } from "@akanjs/client";
|
|
10
10
|
|
|
@@ -4,8 +4,8 @@ function getContent(scanResult, dict) {
|
|
|
4
4
|
filename: "page.tsx",
|
|
5
5
|
content: `
|
|
6
6
|
import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
|
|
7
|
-
import { Link } from "@
|
|
8
|
-
import { Load } from "@
|
|
7
|
+
import { Link } from "@akanjs/ui";
|
|
8
|
+
import { Load } from "@akanjs/ui";
|
|
9
9
|
import { getSelf } from "@akanjs/client";
|
|
10
10
|
import { AiOutlineEdit } from "react-icons/ai";
|
|
11
11
|
import type { CsrConfig } from "@akanjs/client";
|
|
@@ -4,7 +4,7 @@ function getContent(scanResult, dict) {
|
|
|
4
4
|
filename: "page.tsx",
|
|
5
5
|
content: `
|
|
6
6
|
import { AiOutlineTeam } from "react-icons/ai";
|
|
7
|
-
import { Load } from "@
|
|
7
|
+
import { Load } from "@akanjs/ui";
|
|
8
8
|
import { cnst, fetch, usePage, ${dict.Model} } from "${dict.appName}/client";
|
|
9
9
|
import { getSelf } from "@akanjs/client";
|
|
10
10
|
import type { CsrConfig } from "@akanjs/client";
|
|
@@ -4,8 +4,8 @@ function getContent(scanResult, dict) {
|
|
|
4
4
|
filename: "page.tsx",
|
|
5
5
|
content: `
|
|
6
6
|
import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
|
|
7
|
-
import { Link } from "@
|
|
8
|
-
import { Load } from "@
|
|
7
|
+
import { Link } from "@akanjs/ui";
|
|
8
|
+
import { Load } from "@akanjs/ui";
|
|
9
9
|
import { getSelf } from "@akanjs/client";
|
|
10
10
|
import type { CsrConfig } from "@akanjs/client";
|
|
11
11
|
|
|
@@ -7,12 +7,12 @@ function getContent(scanResult, dict = {}) {
|
|
|
7
7
|
(module) => module !== "summary" && module !== "setting"
|
|
8
8
|
);
|
|
9
9
|
return `
|
|
10
|
-
${libs.length === 0 ? `import {
|
|
10
|
+
${libs.length === 0 ? `import { dictionary as base } from "@akanjs/dictionary";` : ""}
|
|
11
11
|
${libs.map((lib) => `import { dictionary as ${lib} } from "@${lib}";`).join("\n")}
|
|
12
12
|
|
|
13
13
|
${moduleDictionaries.map((module) => `import { ${module}SummaryDictionary } from "../${module}/${module}.dictionary";`).join("\n")}
|
|
14
14
|
|
|
15
|
-
export const libDictionaries = [${libs.length === 0 ? "
|
|
15
|
+
export const libDictionaries = [${libs.length === 0 ? "base" : libs.join(", ")}] as const;
|
|
16
16
|
|
|
17
17
|
export const libSummaryDictionary = { ${moduleDictionaries.map((module) => `...${module}SummaryDictionary`).join(", ")} };
|
|
18
18
|
`;
|
|
@@ -4,11 +4,11 @@ function getContent(scanResult, dict = {}) {
|
|
|
4
4
|
return null;
|
|
5
5
|
const libs = scanResult.akanConfig.libs;
|
|
6
6
|
return `
|
|
7
|
-
${libs.length > 0 ? "" : `import {
|
|
7
|
+
${libs.length > 0 ? "" : `import { fetch as base } from "@akanjs/signal";`}
|
|
8
8
|
${libs.map((lib) => `import { fetch as ${lib} } from "@${lib}";`).join("\n")}
|
|
9
9
|
|
|
10
|
-
export const root = ${libs.length ? scanResult.akanConfig.rootLib ?? libs[0] : "
|
|
11
|
-
export const libFetches = [${libs.length ? libs.join(", ") : "
|
|
10
|
+
export const root = ${libs.length ? scanResult.akanConfig.rootLib ?? libs[0] : "base"};
|
|
11
|
+
export const libFetches = [${libs.length ? libs.join(", ") : "base"}] as const;
|
|
12
12
|
`;
|
|
13
13
|
}
|
|
14
14
|
export {
|