juo 0.3.0-alpha.0 → 0.3.0-alpha.2
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/README.md +1 -1
- package/bin/dev.js +15 -4
- package/dist/commands/blocks/dev.d.ts +2 -2
- package/dist/commands/create.d.ts +4 -4
- package/dist/commands/create.js +85 -38
- package/dist/commands/generate.d.ts +5 -5
- package/dist/commands/publish/index.d.ts +2 -2
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib/index.js +1 -1
- package/dist/{packageGenerator-Bx2FAq2Y.js → packageGenerator-BToocy-h.js} +6 -7
- package/oclif.manifest.json +1 -1
- package/package.json +1 -1
- package/templates/.storybook/preview-head.html.liquid +3 -5
- package/templates/block/preact/index.ts.liquid +65 -10
- package/templates/block/preact/{{block.clsName}}.tsx.liquid +100 -130
- package/templates/block/react/index.ts.liquid +64 -8
- package/templates/block/react/{{block.clsName}}.tsx.liquid +109 -61
- package/templates/configFiles/src/main.ts.liquid +5 -0
- package/templates/configFiles/vite-env.d.ts.liquid +11 -1
- package/templates/configFiles/vite.config.ts.liquid +1 -1
- package/templates/css/styles.css +31 -35
- package/templates/dev/index.html.liquid +18 -2
- package/templates/dev/vite/blocks-shim.ts.liquid +6 -0
- package/templates/dev/vite/juo-editor-plugin.ts.liquid +23 -2
- package/templates/dev/vite/mock-login.ts.liquid +83 -0
- package/templates/dev/vite/mock-services.ts.liquid +140 -0
- package/templates/dev/vite/theme-shell.ts.liquid +267 -0
- package/templates/dev/vite/workflowOverlay.ts.liquid +280 -0
- package/templates/stories/{{block.clsName}}.stories.tsx.liquid +6 -3
- package/templates/tailwind/postcss.config.js.liquid +6 -0
- package/templates/tailwind/src/tailwind.css.liquid +4 -2
- package/templates/tailwind/tailwind.config.cjs.liquid +15 -0
- package/templates/dev/src/main.ts.liquid +0 -136
- package/templates/tailwind/vite.config.ts.liquid +0 -35
|
@@ -1,162 +1,132 @@
|
|
|
1
1
|
import { useState } from "preact/hooks";
|
|
2
|
-
import type { Props } from "./index.ts";
|
|
2
|
+
import type { Props } from "./index.ts";
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
d="M1.39826 3.49915C3.16081 1.2435 8.76255 2.96245 14.0506 7.09387C19.3388 11.2255 22.362 16.2452 20.5994 18.5011C18.8919 20.6866 13.5812 19.1413 8.44318 15.2863L7.94708 14.9064C2.74167 10.8395 -0.268961 5.91245 1.31916 3.60755L1.39826 3.49915ZM6.12287 3.86145C5.05655 3.55105 4.16349 3.4496 3.48126 3.52258C2.80862 3.59456 2.41359 3.82447 2.18634 4.11536C1.95913 4.40623 1.83182 4.84493 1.92462 5.51477C2.01885 6.1944 2.33325 7.03667 2.8924 7.99622C4.00834 9.91122 5.98872 12.1076 8.56232 14.1183C11.136 16.1291 13.7467 17.5193 15.8748 18.1388C16.9408 18.4491 17.8333 18.5506 18.5154 18.4777C19.1881 18.4057 19.584 18.1759 19.8113 17.8849L19.8914 17.7687C20.0667 17.4807 20.1533 17.0715 20.0721 16.4855C19.9779 15.8059 19.6635 14.9636 19.1043 14.004C17.9883 12.0891 16.0079 9.89265 13.4344 7.88196C10.8609 5.87136 8.25091 4.48095 6.12287 3.86145Z"
|
|
17
|
-
fill="black"
|
|
18
|
-
/>
|
|
19
|
-
<path
|
|
20
|
-
d="M1.26735 18.3321C-0.455255 16.0458 2.65496 11.0798 8.01426 7.04125C13.3738 3.00263 19.0049 1.38157 20.7278 3.66798C22.3969 5.88302 19.5297 10.6128 14.4762 14.578L13.9808 14.9588C8.7053 18.9343 3.16692 20.5671 1.35158 18.4366L1.26735 18.3321ZM2.84013 13.8622C2.26432 14.8119 1.93519 15.6483 1.82911 16.3261C1.72454 16.9945 1.84438 17.4356 2.06654 17.7303C2.28869 18.0251 2.67949 18.2616 3.35053 18.3453C4.03139 18.4302 4.92633 18.3445 5.9979 18.0528C8.13647 17.4705 10.7706 16.1261 13.3788 14.1606C15.9873 12.195 18.0058 10.0331 19.155 8.13783C19.7306 7.18847 20.0596 6.35264 20.1657 5.67489C20.2703 5.00648 20.1508 4.56461 19.9286 4.26972L19.837 4.1623C19.6042 3.9185 19.2314 3.72892 18.6443 3.65567C17.9635 3.57079 17.0685 3.65648 15.997 3.94822C13.8584 4.53054 11.2243 5.875 8.616 7.84044C6.00784 9.8059 3.9893 11.967 2.84013 13.8622Z"
|
|
21
|
-
fill="black"
|
|
22
|
-
/>
|
|
23
|
-
<path
|
|
24
|
-
d="M10.9993 13.0302C12.1207 13.0302 13.0298 12.1211 13.0298 10.9997C13.0298 9.87835 12.1207 8.96924 10.9993 8.96924C9.87786 8.96924 8.96875 9.87835 8.96875 10.9997C8.96875 12.1211 9.87786 13.0302 10.9993 13.0302Z"
|
|
25
|
-
fill="black"
|
|
26
|
-
/>
|
|
27
|
-
</g>
|
|
28
|
-
<defs>
|
|
29
|
-
<clipPath id="clip0_3270_5141">
|
|
30
|
-
<rect width="22" height="22" fill="white" />
|
|
31
|
-
</clipPath>
|
|
32
|
-
</defs>
|
|
33
|
-
</svg>
|
|
34
|
-
);
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const TypeScriptIcon = ({ className }: { className: string }) => {
|
|
38
|
-
return (
|
|
39
|
-
<svg
|
|
40
|
-
width="22"
|
|
41
|
-
height="22"
|
|
42
|
-
viewBox="0 0 22 22"
|
|
43
|
-
fill="none"
|
|
44
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
45
|
-
className={className}
|
|
46
|
-
>
|
|
4
|
+
// Brand marks shown inside the card. `fill="currentColor"` lets each icon
|
|
5
|
+
// inherit the color set on its container, so they pick up the accent palette.
|
|
6
|
+
const FrameworkIcon = ({ className }: { className?: string }) => (
|
|
7
|
+
<svg
|
|
8
|
+
width="22"
|
|
9
|
+
height="22"
|
|
10
|
+
viewBox="0 0 22 22"
|
|
11
|
+
fill="none"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
className={className}
|
|
14
|
+
>
|
|
15
|
+
<g clip-path="url(#clip0_3270_5141)">
|
|
47
16
|
<path
|
|
48
|
-
d="
|
|
49
|
-
fill="
|
|
17
|
+
d="M1.39826 3.49915C3.16081 1.2435 8.76255 2.96245 14.0506 7.09387C19.3388 11.2255 22.362 16.2452 20.5994 18.5011C18.8919 20.6866 13.5812 19.1413 8.44318 15.2863L7.94708 14.9064C2.74167 10.8395 -0.268961 5.91245 1.31916 3.60755L1.39826 3.49915ZM6.12287 3.86145C5.05655 3.55105 4.16349 3.4496 3.48126 3.52258C2.80862 3.59456 2.41359 3.82447 2.18634 4.11536C1.95913 4.40623 1.83182 4.84493 1.92462 5.51477C2.01885 6.1944 2.33325 7.03667 2.8924 7.99622C4.00834 9.91122 5.98872 12.1076 8.56232 14.1183C11.136 16.1291 13.7467 17.5193 15.8748 18.1388C16.9408 18.4491 17.8333 18.5506 18.5154 18.4777C19.1881 18.4057 19.584 18.1759 19.8113 17.8849L19.8914 17.7687C20.0667 17.4807 20.1533 17.0715 20.0721 16.4855C19.9779 15.8059 19.6635 14.9636 19.1043 14.004C17.9883 12.0891 16.0079 9.89265 13.4344 7.88196C10.8609 5.87136 8.25091 4.48095 6.12287 3.86145Z"
|
|
18
|
+
fill="currentColor"
|
|
50
19
|
/>
|
|
51
20
|
<path
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
d="M12.7853 15.4367V16.9034C13.0237 17.0256 13.3057 17.1172 13.6313 17.1783C13.9568 17.2395 14.2999 17.27 14.6606 17.27C15.0121 17.27 15.3461 17.2364 15.6624 17.1692C15.9788 17.102 16.2562 16.9912 16.4947 16.8369C16.7331 16.6826 16.9218 16.4809 17.0609 16.2319C17.2 15.9829 17.2695 15.6751 17.2695 15.3084C17.2695 15.0426 17.2298 14.8096 17.1503 14.6095C17.0708 14.4094 16.9562 14.2314 16.8064 14.0755C16.6567 13.9197 16.4771 13.7799 16.2677 13.6562C16.0583 13.5324 15.8222 13.4155 15.5593 13.3056C15.3667 13.2261 15.194 13.149 15.0412 13.0741C14.8883 12.9992 14.7584 12.9229 14.6514 12.845C14.5445 12.767 14.4619 12.6845 14.4039 12.5975C14.3458 12.5104 14.3167 12.4118 14.3167 12.3018C14.3167 12.201 14.3427 12.1101 14.3947 12.0291C14.4467 11.9482 14.52 11.8787 14.6148 11.8206C14.7095 11.7626 14.8257 11.7175 14.9632 11.6854C15.1008 11.6533 15.2536 11.6373 15.4217 11.6373C15.544 11.6373 15.6731 11.6465 15.8092 11.6648C15.9452 11.6831 16.082 11.7114 16.2196 11.7496C16.3571 11.7878 16.4908 11.8359 16.6208 11.8939C16.7507 11.952 16.8706 12.0192 16.9807 12.0956V10.7252C16.7575 10.6397 16.5138 10.5763 16.2494 10.535C15.985 10.4938 15.6816 10.4731 15.3392 10.4731C14.9907 10.4731 14.6606 10.5106 14.3488 10.5854C14.0371 10.6603 13.7627 10.7772 13.5258 10.936C13.2889 11.0949 13.1017 11.2974 12.9641 11.5433C12.8266 11.7893 12.7578 12.0834 12.7578 12.4256C12.7578 12.8625 12.8839 13.2353 13.1361 13.5439C13.3883 13.8525 13.7711 14.1137 14.2846 14.3276C14.4864 14.4101 14.6744 14.4911 14.8486 14.5705C15.0228 14.65 15.1734 14.7325 15.3002 14.818C15.4271 14.9036 15.5272 14.9968 15.6006 15.0976C15.6739 15.1984 15.7106 15.313 15.7106 15.4413C15.7106 15.5361 15.6877 15.6239 15.6418 15.7049C15.596 15.7858 15.5264 15.8561 15.4332 15.9157C15.34 15.9753 15.2238 16.0219 15.0847 16.0555C14.9456 16.0891 14.7829 16.1059 14.5964 16.1059C14.2785 16.1059 13.9637 16.0501 13.6519 15.9386C13.3401 15.8271 13.0512 15.6598 12.7853 15.4367ZM10.3197 11.8232H12.2012V10.6196H6.95703V11.8232H8.82928V17.1821H10.3197V11.8232Z"
|
|
55
|
-
fill="black"
|
|
21
|
+
d="M1.26735 18.3321C-0.455255 16.0458 2.65496 11.0798 8.01426 7.04125C13.3738 3.00263 19.0049 1.38157 20.7278 3.66798C22.3969 5.88302 19.5297 10.6128 14.4762 14.578L13.9808 14.9588C8.7053 18.9343 3.16692 20.5671 1.35158 18.4366L1.26735 18.3321ZM2.84013 13.8622C2.26432 14.8119 1.93519 15.6483 1.82911 16.3261C1.72454 16.9945 1.84438 17.4356 2.06654 17.7303C2.28869 18.0251 2.67949 18.2616 3.35053 18.3453C4.03139 18.4302 4.92633 18.3445 5.9979 18.0528C8.13647 17.4705 10.7706 16.1261 13.3788 14.1606C15.9873 12.195 18.0058 10.0331 19.155 8.13783C19.7306 7.18847 20.0596 6.35264 20.1657 5.67489C20.2703 5.00648 20.1508 4.56461 19.9286 4.26972L19.837 4.1623C19.6042 3.9185 19.2314 3.72892 18.6443 3.65567C17.9635 3.57079 17.0685 3.65648 15.997 3.94822C13.8584 4.53054 11.2243 5.875 8.616 7.84044C6.00784 9.8059 3.9893 11.967 2.84013 13.8622Z"
|
|
22
|
+
fill="currentColor"
|
|
56
23
|
/>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
24
|
+
<path
|
|
25
|
+
d="M10.9993 13.0302C12.1207 13.0302 13.0298 12.1211 13.0298 10.9997C13.0298 9.87835 12.1207 8.96924 10.9993 8.96924C9.87786 8.96924 8.96875 9.87835 8.96875 10.9997C8.96875 12.1211 9.87786 13.0302 10.9993 13.0302Z"
|
|
26
|
+
fill="currentColor"
|
|
27
|
+
/>
|
|
28
|
+
</g>
|
|
29
|
+
<defs>
|
|
30
|
+
<clipPath id="clip0_3270_5141">
|
|
31
|
+
<rect width="22" height="22" fill="white" />
|
|
32
|
+
</clipPath>
|
|
33
|
+
</defs>
|
|
34
|
+
</svg>
|
|
35
|
+
);
|
|
60
36
|
|
|
37
|
+
const TypeScriptIcon = ({ className }: { className?: string }) => (
|
|
38
|
+
<svg
|
|
39
|
+
width="22"
|
|
40
|
+
height="22"
|
|
41
|
+
viewBox="0 0 22 22"
|
|
42
|
+
fill="none"
|
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
+
className={className}
|
|
45
|
+
>
|
|
46
|
+
<path
|
|
47
|
+
d="M17.0352 2.50195C18.3965 2.50195 19.5 3.6055 19.5 4.9668V17.0371C19.4997 18.3982 18.3963 19.502 17.0352 19.502H4.96484C3.60371 19.502 2.50026 18.3982 2.5 17.0371V4.9668C2.5 3.6055 3.60355 2.50195 4.96484 2.50195H17.0352ZM4.96484 3.50195C4.15583 3.50195 3.5 4.15779 3.5 4.9668V17.0371C3.50026 17.8459 4.156 18.502 4.96484 18.502H17.0352C17.844 18.502 18.4997 17.8459 18.5 17.0371V4.9668C18.5 4.15779 17.8442 3.50195 17.0352 3.50195H4.96484Z"
|
|
48
|
+
fill="currentColor"
|
|
49
|
+
/>
|
|
50
|
+
<path
|
|
51
|
+
fill-rule="evenodd"
|
|
52
|
+
clip-rule="evenodd"
|
|
53
|
+
d="M12.7853 15.4367V16.9034C13.0237 17.0256 13.3057 17.1172 13.6313 17.1783C13.9568 17.2395 14.2999 17.27 14.6606 17.27C15.0121 17.27 15.3461 17.2364 15.6624 17.1692C15.9788 17.102 16.2562 16.9912 16.4947 16.8369C16.7331 16.6826 16.9218 16.4809 17.0609 16.2319C17.2 15.9829 17.2695 15.6751 17.2695 15.3084C17.2695 15.0426 17.2298 14.8096 17.1503 14.6095C17.0708 14.4094 16.9562 14.2314 16.8064 14.0755C16.6567 13.9197 16.4771 13.7799 16.2677 13.6562C16.0583 13.5324 15.8222 13.4155 15.5593 13.3056C15.3667 13.2261 15.194 13.149 15.0412 13.0741C14.8883 12.9992 14.7584 12.9229 14.6514 12.845C14.5445 12.767 14.4619 12.6845 14.4039 12.5975C14.3458 12.5104 14.3167 12.4118 14.3167 12.3018C14.3167 12.201 14.3427 12.1101 14.3947 12.0291C14.4467 11.9482 14.52 11.8787 14.6148 11.8206C14.7095 11.7626 14.8257 11.7175 14.9632 11.6854C15.1008 11.6533 15.2536 11.6373 15.4217 11.6373C15.544 11.6373 15.6731 11.6465 15.8092 11.6648C15.9452 11.6831 16.082 11.7114 16.2196 11.7496C16.3571 11.7878 16.4908 11.8359 16.6208 11.8939C16.7507 11.952 16.8706 12.0192 16.9807 12.0956V10.7252C16.7575 10.6397 16.5138 10.5763 16.2494 10.535C15.985 10.4938 15.6816 10.4731 15.3392 10.4731C14.9907 10.4731 14.6606 10.5106 14.3488 10.5854C14.0371 10.6603 13.7627 10.7772 13.5258 10.936C13.2889 11.0949 13.1017 11.2974 12.9641 11.5433C12.8266 11.7893 12.7578 12.0834 12.7578 12.4256C12.7578 12.8625 12.8839 13.2353 13.1361 13.5439C13.3883 13.8525 13.7711 14.1137 14.2846 14.3276C14.4864 14.4101 14.6744 14.4911 14.8486 14.5705C15.0228 14.65 15.1734 14.7325 15.3002 14.818C15.4271 14.9036 15.5272 14.9968 15.6006 15.0976C15.6739 15.1984 15.7106 15.313 15.7106 15.4413C15.7106 15.5361 15.6877 15.6239 15.6418 15.7049C15.596 15.7858 15.5264 15.8561 15.4332 15.9157C15.34 15.9753 15.2238 16.0219 15.0847 16.0555C14.9456 16.0891 14.7829 16.1059 14.5964 16.1059C14.2785 16.1059 13.9637 16.0501 13.6519 15.9386C13.3401 15.8271 13.0512 15.6598 12.7853 15.4367ZM10.3197 11.8232H12.2012V10.6196H6.95703V11.8232H8.82928V17.1821H10.3197V11.8232Z"
|
|
54
|
+
fill="currentColor"
|
|
55
|
+
/>
|
|
56
|
+
</svg>
|
|
57
|
+
);
|
|
58
|
+
{% if block.tailwind %}
|
|
61
59
|
export function {{ block.clsName }}(props: Props) {
|
|
62
60
|
const [count, setCount] = useState(props.initialCount);
|
|
61
|
+
|
|
62
|
+
// Default to a neutral icon color; the color control can override it.
|
|
63
|
+
const accent = props.accentColor || "var(--tint-900)";
|
|
64
|
+
const iconStyle = { color: accent };
|
|
65
|
+
|
|
63
66
|
return (
|
|
64
67
|
<juo-card>
|
|
65
|
-
<div className="
|
|
66
|
-
<div className="flex items-center gap-
|
|
67
|
-
<div className="flex items-center gap-
|
|
68
|
-
<FrameworkIcon className="
|
|
69
|
-
<TypeScriptIcon className="
|
|
68
|
+
<div className="flex items-center justify-between gap-32 p-36">
|
|
69
|
+
<div className="flex items-center gap-12">
|
|
70
|
+
<div className="flex items-center gap-8" style={iconStyle}>
|
|
71
|
+
<FrameworkIcon className="h-36 w-36" />
|
|
72
|
+
<TypeScriptIcon className="h-36 w-36" />
|
|
70
73
|
</div>
|
|
71
|
-
<div className="flex flex-col
|
|
72
|
-
<
|
|
74
|
+
<div className="flex flex-col">
|
|
75
|
+
{/* <juo-text> renders inline-editable, translatable copy: `prop` is
|
|
76
|
+
the translation key, the child is the fallback. */}
|
|
77
|
+
<juo-text prop="subtitle" class="text-12 text-tint-500">
|
|
73
78
|
{props.subtitle}
|
|
74
|
-
</
|
|
75
|
-
<
|
|
79
|
+
</juo-text>
|
|
80
|
+
<juo-text prop="title" class="text-16 text-tint-900">
|
|
81
|
+
{props.title}
|
|
82
|
+
</juo-text>
|
|
76
83
|
</div>
|
|
77
84
|
</div>
|
|
78
|
-
<juo-button
|
|
85
|
+
<juo-button
|
|
86
|
+
variant={props.buttonVariant}
|
|
87
|
+
onClick={() => setCount(count + 1)}
|
|
88
|
+
>
|
|
89
|
+
Count is {count}
|
|
90
|
+
</juo-button>
|
|
79
91
|
</div>
|
|
80
92
|
</juo-card>
|
|
81
93
|
);
|
|
82
94
|
}
|
|
83
|
-
|
|
84
95
|
{% else %}
|
|
85
96
|
import "../../styles.css";
|
|
86
97
|
|
|
87
|
-
const FrameworkIcon = ({ className }: { className: string }) => {
|
|
88
|
-
return (
|
|
89
|
-
<svg
|
|
90
|
-
width="22"
|
|
91
|
-
height="22"
|
|
92
|
-
viewBox="0 0 22 22"
|
|
93
|
-
fill="none"
|
|
94
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
95
|
-
className={className}
|
|
96
|
-
>
|
|
97
|
-
<g clip-path="url(#clip0_3270_5141)">
|
|
98
|
-
<path
|
|
99
|
-
d="M1.39826 3.49915C3.16081 1.2435 8.76255 2.96245 14.0506 7.09387C19.3388 11.2255 22.362 16.2452 20.5994 18.5011C18.8919 20.6866 13.5812 19.1413 8.44318 15.2863L7.94708 14.9064C2.74167 10.8395 -0.268961 5.91245 1.31916 3.60755L1.39826 3.49915ZM6.12287 3.86145C5.05655 3.55105 4.16349 3.4496 3.48126 3.52258C2.80862 3.59456 2.41359 3.82447 2.18634 4.11536C1.95913 4.40623 1.83182 4.84493 1.92462 5.51477C2.01885 6.1944 2.33325 7.03667 2.8924 7.99622C4.00834 9.91122 5.98872 12.1076 8.56232 14.1183C11.136 16.1291 13.7467 17.5193 15.8748 18.1388C16.9408 18.4491 17.8333 18.5506 18.5154 18.4777C19.1881 18.4057 19.584 18.1759 19.8113 17.8849L19.8914 17.7687C20.0667 17.4807 20.1533 17.0715 20.0721 16.4855C19.9779 15.8059 19.6635 14.9636 19.1043 14.004C17.9883 12.0891 16.0079 9.89265 13.4344 7.88196C10.8609 5.87136 8.25091 4.48095 6.12287 3.86145Z"
|
|
100
|
-
fill="black"
|
|
101
|
-
/>
|
|
102
|
-
<path
|
|
103
|
-
d="M1.26735 18.3321C-0.455255 16.0458 2.65496 11.0798 8.01426 7.04125C13.3738 3.00263 19.0049 1.38157 20.7278 3.66798C22.3969 5.88302 19.5297 10.6128 14.4762 14.578L13.9808 14.9588C8.7053 18.9343 3.16692 20.5671 1.35158 18.4366L1.26735 18.3321ZM2.84013 13.8622C2.26432 14.8119 1.93519 15.6483 1.82911 16.3261C1.72454 16.9945 1.84438 17.4356 2.06654 17.7303C2.28869 18.0251 2.67949 18.2616 3.35053 18.3453C4.03139 18.4302 4.92633 18.3445 5.9979 18.0528C8.13647 17.4705 10.7706 16.1261 13.3788 14.1606C15.9873 12.195 18.0058 10.0331 19.155 8.13783C19.7306 7.18847 20.0596 6.35264 20.1657 5.67489C20.2703 5.00648 20.1508 4.56461 19.9286 4.26972L19.837 4.1623C19.6042 3.9185 19.2314 3.72892 18.6443 3.65567C17.9635 3.57079 17.0685 3.65648 15.997 3.94822C13.8584 4.53054 11.2243 5.875 8.616 7.84044C6.00784 9.8059 3.9893 11.967 2.84013 13.8622Z"
|
|
104
|
-
fill="black"
|
|
105
|
-
/>
|
|
106
|
-
<path
|
|
107
|
-
d="M10.9993 13.0302C12.1207 13.0302 13.0298 12.1211 13.0298 10.9997C13.0298 9.87835 12.1207 8.96924 10.9993 8.96924C9.87786 8.96924 8.96875 9.87835 8.96875 10.9997C8.96875 12.1211 9.87786 13.0302 10.9993 13.0302Z"
|
|
108
|
-
fill="black"
|
|
109
|
-
/>
|
|
110
|
-
</g>
|
|
111
|
-
<defs>
|
|
112
|
-
<clipPath id="clip0_3270_5141">
|
|
113
|
-
<rect width="22" height="22" fill="white" />
|
|
114
|
-
</clipPath>
|
|
115
|
-
</defs>
|
|
116
|
-
</svg>
|
|
117
|
-
);
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
const TypeScriptIcon = ({ className }: { className: string }) => {
|
|
121
|
-
return (
|
|
122
|
-
<svg
|
|
123
|
-
width="22"
|
|
124
|
-
height="22"
|
|
125
|
-
viewBox="0 0 22 22"
|
|
126
|
-
fill="none"
|
|
127
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
128
|
-
className={className}
|
|
129
|
-
>
|
|
130
|
-
<path
|
|
131
|
-
d="M17.0352 2.50195C18.3965 2.50195 19.5 3.6055 19.5 4.9668V17.0371C19.4997 18.3982 18.3963 19.502 17.0352 19.502H4.96484C3.60371 19.502 2.50026 18.3982 2.5 17.0371V4.9668C2.5 3.6055 3.60355 2.50195 4.96484 2.50195H17.0352ZM4.96484 3.50195C4.15583 3.50195 3.5 4.15779 3.5 4.9668V17.0371C3.50026 17.8459 4.156 18.502 4.96484 18.502H17.0352C17.844 18.502 18.4997 17.8459 18.5 17.0371V4.9668C18.5 4.15779 17.8442 3.50195 17.0352 3.50195H4.96484Z"
|
|
132
|
-
fill="black"
|
|
133
|
-
/>
|
|
134
|
-
<path
|
|
135
|
-
fill-rule="evenodd"
|
|
136
|
-
clip-rule="evenodd"
|
|
137
|
-
d="M12.7853 15.4367V16.9034C13.0237 17.0256 13.3057 17.1172 13.6313 17.1783C13.9568 17.2395 14.2999 17.27 14.6606 17.27C15.0121 17.27 15.3461 17.2364 15.6624 17.1692C15.9788 17.102 16.2562 16.9912 16.4947 16.8369C16.7331 16.6826 16.9218 16.4809 17.0609 16.2319C17.2 15.9829 17.2695 15.6751 17.2695 15.3084C17.2695 15.0426 17.2298 14.8096 17.1503 14.6095C17.0708 14.4094 16.9562 14.2314 16.8064 14.0755C16.6567 13.9197 16.4771 13.7799 16.2677 13.6562C16.0583 13.5324 15.8222 13.4155 15.5593 13.3056C15.3667 13.2261 15.194 13.149 15.0412 13.0741C14.8883 12.9992 14.7584 12.9229 14.6514 12.845C14.5445 12.767 14.4619 12.6845 14.4039 12.5975C14.3458 12.5104 14.3167 12.4118 14.3167 12.3018C14.3167 12.201 14.3427 12.1101 14.3947 12.0291C14.4467 11.9482 14.52 11.8787 14.6148 11.8206C14.7095 11.7626 14.8257 11.7175 14.9632 11.6854C15.1008 11.6533 15.2536 11.6373 15.4217 11.6373C15.544 11.6373 15.6731 11.6465 15.8092 11.6648C15.9452 11.6831 16.082 11.7114 16.2196 11.7496C16.3571 11.7878 16.4908 11.8359 16.6208 11.8939C16.7507 11.952 16.8706 12.0192 16.9807 12.0956V10.7252C16.7575 10.6397 16.5138 10.5763 16.2494 10.535C15.985 10.4938 15.6816 10.4731 15.3392 10.4731C14.9907 10.4731 14.6606 10.5106 14.3488 10.5854C14.0371 10.6603 13.7627 10.7772 13.5258 10.936C13.2889 11.0949 13.1017 11.2974 12.9641 11.5433C12.8266 11.7893 12.7578 12.0834 12.7578 12.4256C12.7578 12.8625 12.8839 13.2353 13.1361 13.5439C13.3883 13.8525 13.7711 14.1137 14.2846 14.3276C14.4864 14.4101 14.6744 14.4911 14.8486 14.5705C15.0228 14.65 15.1734 14.7325 15.3002 14.818C15.4271 14.9036 15.5272 14.9968 15.6006 15.0976C15.6739 15.1984 15.7106 15.313 15.7106 15.4413C15.7106 15.5361 15.6877 15.6239 15.6418 15.7049C15.596 15.7858 15.5264 15.8561 15.4332 15.9157C15.34 15.9753 15.2238 16.0219 15.0847 16.0555C14.9456 16.0891 14.7829 16.1059 14.5964 16.1059C14.2785 16.1059 13.9637 16.0501 13.6519 15.9386C13.3401 15.8271 13.0512 15.6598 12.7853 15.4367ZM10.3197 11.8232H12.2012V10.6196H6.95703V11.8232H8.82928V17.1821H10.3197V11.8232Z"
|
|
138
|
-
fill="black"
|
|
139
|
-
/>
|
|
140
|
-
</svg>
|
|
141
|
-
);
|
|
142
|
-
};
|
|
143
|
-
|
|
144
98
|
export function {{ block.clsName }}(props: Props) {
|
|
145
99
|
const [count, setCount] = useState(props.initialCount);
|
|
100
|
+
|
|
101
|
+
// Default to a neutral icon color; the color control can override it.
|
|
102
|
+
const accent = props.accentColor || "var(--tint-900)";
|
|
103
|
+
const iconStyle = { color: accent };
|
|
104
|
+
|
|
146
105
|
return (
|
|
147
106
|
<juo-card>
|
|
148
|
-
<div className="
|
|
149
|
-
<div className="
|
|
150
|
-
<div className="
|
|
151
|
-
<FrameworkIcon className="
|
|
152
|
-
<TypeScriptIcon className="
|
|
107
|
+
<div className="starter-block">
|
|
108
|
+
<div className="starter-block__info">
|
|
109
|
+
<div className="starter-block__icons" style={iconStyle}>
|
|
110
|
+
<FrameworkIcon className="starter-block__icon" />
|
|
111
|
+
<TypeScriptIcon className="starter-block__icon" />
|
|
153
112
|
</div>
|
|
154
|
-
<div className="
|
|
155
|
-
<
|
|
156
|
-
|
|
113
|
+
<div className="starter-block__text">
|
|
114
|
+
{/* <juo-text> renders inline-editable, translatable copy: `prop` is
|
|
115
|
+
the translation key, the child is the fallback. */}
|
|
116
|
+
<juo-text prop="subtitle" class="starter-block__subtitle">
|
|
117
|
+
{props.subtitle}
|
|
118
|
+
</juo-text>
|
|
119
|
+
<juo-text prop="title" class="starter-block__title">
|
|
120
|
+
{props.title}
|
|
121
|
+
</juo-text>
|
|
157
122
|
</div>
|
|
158
123
|
</div>
|
|
159
|
-
<juo-button
|
|
124
|
+
<juo-button
|
|
125
|
+
variant={props.buttonVariant}
|
|
126
|
+
onClick={() => setCount(count + 1)}
|
|
127
|
+
>
|
|
128
|
+
Count is {count}
|
|
129
|
+
</juo-button>
|
|
160
130
|
</div>
|
|
161
131
|
</juo-card>
|
|
162
132
|
);
|
|
@@ -1,25 +1,75 @@
|
|
|
1
1
|
import { defineBlock } from "@juo/blocks";
|
|
2
2
|
import { createReactRenderer } from "@juo/blocks/react";
|
|
3
|
-
import {
|
|
3
|
+
import type { ExtendedJSONSchema, FromSchema } from "json-schema-to-ts";
|
|
4
4
|
import { {{ block.clsName }} } from "./{{ block.clsName }}.tsx";
|
|
5
5
|
|
|
6
|
+
// Default copy for this block, keyed by translation key. Shipped through the
|
|
7
|
+
// block's `locales` loader so the editor's translation panel can override each
|
|
8
|
+
// string per theme/locale. The keys here are the namespace for this block.
|
|
9
|
+
const enTranslations = {
|
|
10
|
+
title: "{{ block.framework | capitalize }} + TypeScript",
|
|
11
|
+
subtitle: "Starter Block",
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
// Allow the juo-specific schema keywords used below. `format: "color"` is a
|
|
15
|
+
// standard JSON Schema keyword and needs no extension.
|
|
16
|
+
type ExtendedSchema = ExtendedJSONSchema<{
|
|
17
|
+
"x-juo-control-type": string;
|
|
18
|
+
"x-juo-option-labels": Record<string, string>;
|
|
19
|
+
}>;
|
|
20
|
+
|
|
6
21
|
const schema = {
|
|
7
22
|
type: "object",
|
|
8
23
|
properties: {
|
|
9
24
|
props: {
|
|
10
25
|
type: "object",
|
|
11
26
|
properties: {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
27
|
+
// `x-juo-control-type: "inline-text"` -> edited directly on the canvas
|
|
28
|
+
// via <juo-text>; the edit is stored as a translation override.
|
|
29
|
+
title: {
|
|
30
|
+
type: "string",
|
|
31
|
+
"x-juo-control-type": "inline-text",
|
|
32
|
+
description: "Heading — edit inline on the canvas.",
|
|
33
|
+
},
|
|
34
|
+
subtitle: {
|
|
35
|
+
type: "string",
|
|
36
|
+
"x-juo-control-type": "inline-text",
|
|
37
|
+
description: "Supporting text — edit inline on the canvas.",
|
|
38
|
+
},
|
|
39
|
+
// `enum` -> Select control. `x-juo-option-labels` gives each option a
|
|
40
|
+
// friendly label in the editor.
|
|
41
|
+
buttonVariant: {
|
|
42
|
+
enum: ["solid", "outline", "ghost"],
|
|
43
|
+
title: "Button style",
|
|
44
|
+
"x-juo-option-labels": {
|
|
45
|
+
solid: "Solid",
|
|
46
|
+
outline: "Outline",
|
|
47
|
+
ghost: "Ghost",
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
// `format: "color"` -> Color control
|
|
51
|
+
accentColor: {
|
|
52
|
+
type: "string",
|
|
53
|
+
format: "color",
|
|
54
|
+
title: "Accent color",
|
|
55
|
+
description:
|
|
56
|
+
"Color for the icons. Leave empty to use the default neutral color.",
|
|
57
|
+
},
|
|
58
|
+
// `x-juo-control-type: "stepper"` -> Stepper control
|
|
59
|
+
initialCount: {
|
|
60
|
+
type: "number",
|
|
61
|
+
title: "Initial count",
|
|
62
|
+
"x-juo-control-type": "stepper",
|
|
63
|
+
},
|
|
15
64
|
},
|
|
16
|
-
required: ["title", "subtitle", "initialCount"],
|
|
65
|
+
required: ["title", "subtitle", "buttonVariant", "initialCount"],
|
|
17
66
|
additionalProperties: false,
|
|
18
67
|
},
|
|
19
68
|
},
|
|
20
69
|
required: ["props"],
|
|
21
70
|
additionalProperties: false,
|
|
22
|
-
} as const satisfies
|
|
71
|
+
} as const satisfies ExtendedSchema;
|
|
72
|
+
|
|
23
73
|
type Schema = FromSchema<typeof schema>;
|
|
24
74
|
export type Props = Schema["props"];
|
|
25
75
|
|
|
@@ -28,11 +78,17 @@ export const {{ block.clsName }}Block = defineBlock<Schema>("{{ block.name }}",
|
|
|
28
78
|
schema,
|
|
29
79
|
initialValue: () => ({
|
|
30
80
|
props: {
|
|
31
|
-
title:
|
|
32
|
-
subtitle:
|
|
81
|
+
title: enTranslations.title,
|
|
82
|
+
subtitle: enTranslations.subtitle,
|
|
83
|
+
buttonVariant: "solid",
|
|
84
|
+
accentColor: "",
|
|
33
85
|
initialCount: 0,
|
|
34
86
|
},
|
|
35
87
|
slots: {},
|
|
36
88
|
}),
|
|
37
89
|
renderer: createReactRenderer({{ block.clsName }}),
|
|
90
|
+
locales: {
|
|
91
|
+
supported: ["en"],
|
|
92
|
+
load: async () => enTranslations,
|
|
93
|
+
},
|
|
38
94
|
});
|
|
@@ -1,77 +1,125 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
|
-
import {
|
|
3
|
-
import type { Props } from ".";
|
|
2
|
+
import type { Props } from "./index.ts";
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
4
|
+
// Brand marks shown inside the card. `fill="currentColor"` lets each icon
|
|
5
|
+
// inherit the color set on its container, so they pick up the accent palette.
|
|
6
|
+
const FrameworkIcon = ({ className }: { className?: string }) => (
|
|
7
|
+
<svg
|
|
8
|
+
width="19"
|
|
9
|
+
height="17"
|
|
10
|
+
viewBox="0 0 19 17"
|
|
11
|
+
fill="none"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
className={className}
|
|
14
|
+
>
|
|
15
|
+
<path
|
|
16
|
+
d="M9.85742 1.12891C11.3312 0.117729 12.8891 -0.347665 14.0605 0.295898C15.2321 0.940105 15.589 2.45904 15.4062 4.18066C15.3865 4.3666 15.3586 4.55633 15.3262 4.75C15.5172 4.81965 15.7022 4.8916 15.8799 4.96777C16.7216 5.32853 17.4269 5.76798 17.9268 6.27441C18.428 6.78237 18.7402 7.37848 18.7402 8.03613C18.7401 8.69359 18.4278 9.28903 17.9268 9.79688C17.427 10.3033 16.7216 10.7428 15.8799 11.1035C15.702 11.1798 15.5164 11.2506 15.3252 11.3203C15.3577 11.5145 15.3855 11.7052 15.4053 11.8916C15.5879 13.613 15.231 15.1312 14.0596 15.7754C12.8881 16.4194 11.3295 15.9538 9.85547 14.9424C9.69342 14.8312 9.53191 14.711 9.36914 14.585C9.20608 14.7113 9.04418 14.832 8.88184 14.9434C7.40775 15.9548 5.84829 16.4196 4.67676 15.7754C3.50571 15.131 3.15035 13.6128 3.33301 11.8916C3.35284 11.7048 3.37949 11.514 3.41211 11.3193C3.22195 11.2499 3.03735 11.1794 2.86035 11.1035C2.01858 10.7428 1.31329 10.3033 0.813477 9.79688C0.312403 9.28901 0.000100855 8.69364 0 8.03613C1.50897e-05 7.37844 0.312223 6.78239 0.813477 6.27441C1.31329 5.76799 2.01859 5.32853 2.86035 4.96777C3.03692 4.89211 3.22049 4.82021 3.41016 4.75098C3.37762 4.55675 3.35085 4.36612 3.33105 4.17969C3.14837 2.45827 3.50445 0.940171 4.67578 0.295898C5.84735 -0.348126 7.4068 0.117442 8.88086 1.12891C9.0433 1.24039 9.20598 1.35992 9.36914 1.48633C9.53223 1.36003 9.69507 1.24032 9.85742 1.12891ZM4.13477 11.5596C4.11458 11.6921 4.09659 11.8223 4.08301 11.9502C3.90652 13.613 4.29623 14.7206 5.06152 15.1416C5.82697 15.5624 7.02933 15.3304 8.45312 14.3535C8.5653 14.2765 8.67691 14.1935 8.79004 14.1084C8.1498 13.5459 7.51557 12.8762 6.91211 12.1191C5.91022 11.9998 4.97399 11.8096 4.13477 11.5596ZM14.6025 11.5596C13.7629 11.8095 12.8265 11.9999 11.8242 12.1191C11.2208 12.8764 10.5865 13.5458 9.94629 14.1084C10.0595 14.1936 10.1719 14.2755 10.2842 14.3525C11.7077 15.3294 12.9093 15.5621 13.6748 15.1416C14.4402 14.7207 14.8307 13.613 14.6543 11.9502C14.6407 11.8224 14.6227 11.692 14.6025 11.5596ZM7.94922 12.2158C8.41482 12.7522 8.89207 13.2303 9.36816 13.6416C9.84414 13.2305 10.3216 12.753 10.7871 12.2168C10.3247 12.2476 9.85142 12.2637 9.37012 12.2637C8.88745 12.2637 8.41293 12.2468 7.94922 12.2158ZM9.37012 4.54883C8.65566 4.54883 7.96243 4.58516 7.2998 4.65332C6.91258 5.15925 6.53859 5.70538 6.18652 6.28613C5.83107 6.87251 5.51909 7.45948 5.25098 8.03711C5.51887 8.61394 5.82965 9.20067 6.18457 9.78613C6.53627 10.3663 6.9111 10.9106 7.29785 11.416C7.96112 11.4843 8.65489 11.5225 9.37012 11.5225C10.0839 11.5225 10.7764 11.485 11.4385 11.417C11.8255 10.9113 12.2008 10.3666 12.5527 9.78613C12.9076 9.20073 13.2175 8.61388 13.4854 8.03711C13.2172 7.4594 12.9063 6.87159 12.5508 6.28516C12.1987 5.7044 11.8238 5.15925 11.4365 4.65332C10.7751 4.58542 10.0832 4.54883 9.37012 4.54883ZM13.8721 8.93945C13.6673 9.33984 13.444 9.74208 13.2012 10.1426C12.9611 10.5386 12.7097 10.9198 12.4512 11.2852C13.1736 11.1699 13.8486 11.0148 14.4629 10.8281C14.3259 10.228 14.1286 9.59351 13.8721 8.93945ZM4.86426 8.93945C4.60788 9.59303 4.41138 10.2274 4.27441 10.8271C4.88778 11.0138 5.56187 11.1689 6.2832 11.2842C6.02503 10.9194 5.77486 10.538 5.53516 10.1426C5.29238 9.74208 5.06902 9.33986 4.86426 8.93945ZM15.1777 5.48535C14.9849 6.29736 14.6911 7.15807 14.3018 8.03711C14.6906 8.91539 14.9832 9.7756 15.1758 10.5869C15.3173 10.5336 15.4551 10.4798 15.5879 10.4229C16.3748 10.0856 16.9884 9.69382 17.3994 9.27734C17.8087 8.86258 17.9999 8.44333 18 8.03613C18 7.62895 17.8086 7.20968 17.3994 6.79492C16.9884 6.37845 16.3748 5.98567 15.5879 5.64844C15.4557 5.59179 15.3185 5.53839 15.1777 5.48535ZM3.55957 5.48535C3.41967 5.53808 3.28373 5.59214 3.15234 5.64844C2.36548 5.98567 1.75185 6.37846 1.34082 6.79492C0.931541 7.20971 0.740249 7.62892 0.740234 8.03613C0.740334 8.44333 0.931485 8.86257 1.34082 9.27734C1.75185 9.69379 2.36552 10.0856 3.15234 10.4229C3.28399 10.4793 3.42035 10.5331 3.56055 10.5859C3.75308 9.77464 4.04593 8.91436 4.43457 8.03613C4.04566 7.15745 3.75219 6.29705 3.55957 5.48535ZM9.36816 6.32129C10.3622 6.32129 11.1679 7.08848 11.168 8.03516C11.168 8.98192 10.3623 9.75 9.36816 9.75C8.37411 9.74995 7.56836 8.98189 7.56836 8.03516C7.56846 7.08851 8.37417 6.32134 9.36816 6.32129ZM12.4492 4.78516C12.708 5.15077 12.959 5.53239 13.1992 5.92871C13.4428 6.3306 13.6677 6.73399 13.873 7.13574C14.1303 6.48047 14.3266 5.84432 14.4639 5.24316C13.8488 5.05616 13.1727 4.90049 12.4492 4.78516ZM6.28613 4.78613C5.56298 4.90163 4.88716 5.05704 4.27246 5.24414C4.40961 5.84445 4.6065 6.47951 4.86328 7.13379C5.06842 6.7325 5.29379 6.3301 5.53711 5.92871C5.77712 5.53279 6.0276 5.15138 6.28613 4.78613ZM8.45117 1.71777C7.02756 0.740992 5.82502 0.508091 5.05957 0.928711C4.29438 1.34967 3.90475 2.45773 4.08105 4.12012C4.09469 4.24855 4.11252 4.37957 4.13281 4.5127C4.97284 4.26245 5.91001 4.07143 6.91309 3.95215C7.51651 3.1951 8.15081 2.52534 8.79102 1.96289C8.67718 1.8772 8.56403 1.79522 8.45117 1.71777ZM13.6777 0.928711C12.9123 0.508055 11.7097 0.741057 10.2861 1.71777C10.1731 1.79531 10.0603 1.87806 9.94629 1.96387C10.5858 2.52597 11.2195 3.19481 11.8223 3.95117C12.826 4.07027 13.7638 4.26149 14.6045 4.51172C14.6247 4.37916 14.6427 4.249 14.6562 4.12109C14.8327 2.4584 14.4431 1.34966 13.6777 0.928711ZM9.36816 2.42969C8.89233 2.8409 8.41555 3.31924 7.9502 3.85547C8.41358 3.82458 8.88781 3.80859 9.37012 3.80859C9.85173 3.8086 10.3253 3.8237 10.7881 3.85449C10.3226 3.31806 9.84417 2.84101 9.36816 2.42969Z"
|
|
17
|
+
fill="currentColor"
|
|
18
|
+
/>
|
|
19
|
+
</svg>
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
const TypeScriptIcon = ({ className }: { className?: string }) => (
|
|
23
|
+
<svg
|
|
24
|
+
width="22"
|
|
25
|
+
height="22"
|
|
26
|
+
viewBox="0 0 22 22"
|
|
27
|
+
fill="none"
|
|
28
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
29
|
+
className={className}
|
|
30
|
+
>
|
|
31
|
+
<g clipPath="url(#clip0_3238_3915)">
|
|
15
32
|
<path
|
|
16
|
-
d="
|
|
33
|
+
d="M17.0352 3.50195C17.8442 3.50195 18.5 4.15779 18.5 4.9668V17.0371C18.4997 17.8459 17.844 18.502 17.0352 18.502H4.96484C4.156 18.502 3.50026 17.8459 3.5 17.0371V4.9668C3.5 4.15779 4.15583 3.50195 4.96484 3.50195H17.0352ZM15.3389 10.4736C14.9904 10.4736 14.6594 10.5111 14.3477 10.5859C14.0361 10.6608 13.7622 10.7778 13.5254 10.9365C13.2885 11.0954 13.1014 11.298 12.9639 11.5439C12.8264 11.7899 12.7568 12.0836 12.7568 12.4258C12.7568 12.8627 12.8836 13.2353 13.1357 13.5439C13.3879 13.8525 13.7707 14.1143 14.2842 14.3281C14.4857 14.4105 14.6736 14.491 14.8477 14.5703C15.0219 14.6498 15.173 14.7328 15.2998 14.8184C15.4264 14.9038 15.5263 14.997 15.5996 15.0977C15.6729 15.1984 15.7099 15.3131 15.71 15.4414C15.71 15.5361 15.6865 15.6241 15.6406 15.7051C15.5948 15.786 15.5257 15.8565 15.4326 15.916C15.3394 15.9756 15.2231 16.0221 15.084 16.0557C14.9449 16.0893 14.7822 16.1064 14.5957 16.1064C14.2778 16.1064 13.9631 16.05 13.6514 15.9385C13.3396 15.827 13.0501 15.6596 12.7842 15.4365V16.9033C13.0226 17.0255 13.3053 17.1176 13.6309 17.1787C13.9563 17.2398 14.2996 17.2705 14.6602 17.2705C15.0116 17.2705 15.3458 17.2362 15.6621 17.1689C15.9783 17.1017 16.2558 16.9911 16.4941 16.8369C16.7324 16.6827 16.9215 16.4813 17.0605 16.2324C17.1996 15.9834 17.2686 15.6752 17.2686 15.3086C17.2686 15.0428 17.2289 14.8095 17.1494 14.6094C17.07 14.4095 16.9553 14.2319 16.8057 14.0762C16.6559 13.9203 16.476 13.78 16.2666 13.6562C16.0573 13.5326 15.8213 13.4156 15.5586 13.3057C15.366 13.2262 15.1929 13.1491 15.04 13.0742C14.8874 12.9994 14.7573 12.9226 14.6504 12.8447C14.5436 12.7669 14.4613 12.6846 14.4033 12.5977C14.3453 12.5106 14.3164 12.4118 14.3164 12.3018C14.3165 12.2011 14.3417 12.1102 14.3936 12.0293C14.4455 11.9483 14.5195 11.8794 14.6143 11.8213C14.709 11.7633 14.8253 11.7176 14.9629 11.6855C15.1003 11.6535 15.253 11.6377 15.4209 11.6377C15.5432 11.6377 15.6726 11.6467 15.8086 11.665C15.9446 11.6834 16.0812 11.7118 16.2188 11.75C16.3563 11.7882 16.4902 11.8365 16.6201 11.8945C16.7498 11.9525 16.8696 12.0194 16.9795 12.0957V10.7256C16.7566 10.6401 16.5132 10.5764 16.249 10.5352C15.9847 10.4939 15.681 10.4736 15.3389 10.4736ZM6.95605 11.8232H8.82812V17.1826H10.3193V11.8232H12.2002V10.6201H6.95605V11.8232Z"
|
|
17
34
|
fill="currentColor"
|
|
18
35
|
/>
|
|
19
|
-
</
|
|
20
|
-
|
|
21
|
-
|
|
36
|
+
</g>
|
|
37
|
+
<defs>
|
|
38
|
+
<clipPath id="clip0_3238_3915">
|
|
39
|
+
<rect
|
|
40
|
+
width="15"
|
|
41
|
+
height="15"
|
|
42
|
+
fill="white"
|
|
43
|
+
transform="translate(3.5 3.5)"
|
|
44
|
+
/>
|
|
45
|
+
</clipPath>
|
|
46
|
+
</defs>
|
|
47
|
+
</svg>
|
|
48
|
+
);
|
|
49
|
+
{% if block.tailwind %}
|
|
50
|
+
export function {{ block.clsName }}(props: Props) {
|
|
51
|
+
const [count, setCount] = useState(props.initialCount);
|
|
52
|
+
|
|
53
|
+
// Default to a neutral icon color; the color control can override it.
|
|
54
|
+
const accent = props.accentColor || "var(--tint-900)";
|
|
55
|
+
const iconStyle = { color: accent };
|
|
22
56
|
|
|
23
|
-
const TypeScriptIcon = ({ className }: { className: string }) => {
|
|
24
57
|
return (
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
58
|
+
<juo-card>
|
|
59
|
+
<div className="flex items-center justify-between gap-32 p-36">
|
|
60
|
+
<div className="flex items-center gap-12">
|
|
61
|
+
<div className="flex items-center gap-8" style={iconStyle}>
|
|
62
|
+
<FrameworkIcon className="h-36 w-36" />
|
|
63
|
+
<TypeScriptIcon className="h-36 w-36" />
|
|
64
|
+
</div>
|
|
65
|
+
<div className="flex flex-col">
|
|
66
|
+
{/* <juo-text> renders inline-editable, translatable copy: `prop` is
|
|
67
|
+
the translation key, the child is the fallback. */}
|
|
68
|
+
<juo-text prop="subtitle" class="text-12 text-tint-500">
|
|
69
|
+
{props.subtitle}
|
|
70
|
+
</juo-text>
|
|
71
|
+
<juo-text prop="title" class="text-16 text-tint-900">
|
|
72
|
+
{props.title}
|
|
73
|
+
</juo-text>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
<juo-button
|
|
77
|
+
variant={props.buttonVariant}
|
|
78
|
+
onClick={() => setCount(count + 1)}
|
|
79
|
+
>
|
|
80
|
+
Count is {count}
|
|
81
|
+
</juo-button>
|
|
82
|
+
</div>
|
|
83
|
+
</juo-card>
|
|
50
84
|
);
|
|
51
|
-
}
|
|
85
|
+
}
|
|
86
|
+
{% else %}
|
|
87
|
+
import "../../styles.css";
|
|
52
88
|
|
|
53
89
|
export function {{ block.clsName }}(props: Props) {
|
|
54
|
-
const [count, setCount] = useState(props.initialCount
|
|
90
|
+
const [count, setCount] = useState(props.initialCount);
|
|
91
|
+
|
|
92
|
+
// Default to a neutral icon color; the color control can override it.
|
|
93
|
+
const accent = props.accentColor || "var(--tint-900)";
|
|
94
|
+
const iconStyle = { color: accent };
|
|
55
95
|
|
|
56
96
|
return (
|
|
57
|
-
<
|
|
58
|
-
<
|
|
59
|
-
<div className="
|
|
60
|
-
<div className="
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
97
|
+
<juo-card>
|
|
98
|
+
<div className="starter-block">
|
|
99
|
+
<div className="starter-block__info">
|
|
100
|
+
<div className="starter-block__icons" style={iconStyle}>
|
|
101
|
+
<FrameworkIcon className="starter-block__icon" />
|
|
102
|
+
<TypeScriptIcon className="starter-block__icon" />
|
|
103
|
+
</div>
|
|
104
|
+
<div className="starter-block__text">
|
|
105
|
+
{/* <juo-text> renders inline-editable, translatable copy: `prop` is
|
|
106
|
+
the translation key, the child is the fallback. */}
|
|
107
|
+
<juo-text prop="subtitle" class="starter-block__subtitle">
|
|
108
|
+
{props.subtitle}
|
|
109
|
+
</juo-text>
|
|
110
|
+
<juo-text prop="title" class="starter-block__title">
|
|
111
|
+
{props.title}
|
|
112
|
+
</juo-text>
|
|
71
113
|
</div>
|
|
72
|
-
<juo-button onClick={() => setCount(count + 1)}>count: is {count}</juo-button>
|
|
73
114
|
</div>
|
|
74
|
-
|
|
75
|
-
|
|
115
|
+
<juo-button
|
|
116
|
+
variant={props.buttonVariant}
|
|
117
|
+
onClick={() => setCount(count + 1)}
|
|
118
|
+
>
|
|
119
|
+
Count is {count}
|
|
120
|
+
</juo-button>
|
|
121
|
+
</div>
|
|
122
|
+
</juo-card>
|
|
76
123
|
);
|
|
77
124
|
}
|
|
125
|
+
{% endif %}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
// Your blocks theme entry. `vite build` bundles this file in library mode into
|
|
2
|
+
// the artifact the Juo runtime loads in production, so it must export
|
|
3
|
+
// `registerBlocks`. Only your project's blocks belong here — the dev preview
|
|
4
|
+
// (theme shell + native blocks) lives in `vite/` and never ships in this bundle.
|
|
5
|
+
export * from "./blocks/register";
|