@tanstack/cta-ui-base 0.33.0 → 0.33.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/dist/components/sidebar-items/add-ons.js +7 -2
- package/dist/hooks/use-webcontainer-store.js +0 -1
- package/dist/store/project.d.ts +1 -0
- package/dist/store/project.js +1 -0
- package/package.json +1 -1
- package/src/components/sidebar-items/add-ons.tsx +75 -65
- package/src/hooks/use-webcontainer-store.ts +0 -2
- package/src/store/project.ts +2 -0
- package/src/types.d.ts +1 -0
|
@@ -4,7 +4,7 @@ import { InfoIcon, SettingsIcon } from 'lucide-react';
|
|
|
4
4
|
import { Switch } from '../ui/switch';
|
|
5
5
|
import { Label } from '../ui/label';
|
|
6
6
|
import { Button } from '../ui/button';
|
|
7
|
-
import { useAddOns, useProjectOptions } from '../../store/project';
|
|
7
|
+
import { useAddOns, useProjectOptions, useShowHostingOptions, } from '../../store/project';
|
|
8
8
|
import ImportCustomAddOn from '../custom-add-on-dialog';
|
|
9
9
|
import AddOnInfoDialog from '../add-on-info-dialog';
|
|
10
10
|
import AddOnConfigDialog from '../add-on-config-dialog';
|
|
@@ -15,8 +15,10 @@ const addOnTypeLabels = {
|
|
|
15
15
|
example: 'Example',
|
|
16
16
|
};
|
|
17
17
|
export default function SelectedAddOns() {
|
|
18
|
+
const showHostingOptions = useShowHostingOptions();
|
|
18
19
|
const { availableAddOns, addOnState, toggleAddOn, setAddOnOption } = useAddOns();
|
|
19
20
|
const addOnOptions = useProjectOptions((state) => state.addOnOptions);
|
|
21
|
+
console.log('showHostingOptions', showHostingOptions);
|
|
20
22
|
const sortedAddOns = useMemo(() => {
|
|
21
23
|
return availableAddOns.sort((a, b) => {
|
|
22
24
|
const aPriority = a.priority ?? 0;
|
|
@@ -33,7 +35,10 @@ export default function SelectedAddOns() {
|
|
|
33
35
|
if (configAddOn) {
|
|
34
36
|
setAddOnOption(configAddOn.id, optionName, value);
|
|
35
37
|
}
|
|
36
|
-
}, onClose: () => setConfigAddOn(undefined), disabled: configAddOn ? !addOnState[configAddOn.id]?.enabled : false }), _jsx("div", { className: "max-h-[60vh] overflow-y-auto space-y-2", children: Object.keys(addOnTypeLabels)
|
|
38
|
+
}, onClose: () => setConfigAddOn(undefined), disabled: configAddOn ? !addOnState[configAddOn.id]?.enabled : false }), _jsx("div", { className: "max-h-[60vh] overflow-y-auto space-y-2", children: Object.keys(addOnTypeLabels)
|
|
39
|
+
.filter((type) => (showHostingOptions ? true : type !== 'host'))
|
|
40
|
+
.map((type) => (_jsx(Fragment, { children: sortedAddOns.filter((addOn) => addOn.type === type).length >
|
|
41
|
+
0 && (_jsxs("div", { className: "block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active", children: [_jsx("h3", { className: "font-medium", children: addOnTypeLabels[type] }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "flex flex-row flex-wrap", children: sortedAddOns
|
|
37
42
|
.filter((addOn) => addOn.type === type)
|
|
38
43
|
.map((addOn) => (_jsx("div", { className: "w-1/2", children: _jsxs("div", { className: "flex flex-row items-center justify-between", children: [_jsxs("div", { className: "p-1 flex flex-row items-center", children: [_jsx(Switch, { id: addOn.id, checked: addOnState[addOn.id].selected, disabled: !addOnState[addOn.id].enabled, onCheckedChange: () => {
|
|
39
44
|
toggleAddOn(addOn.id);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { WebContainer } from '@webcontainer/api';
|
|
2
2
|
import { createStore } from 'zustand';
|
|
3
3
|
import shimALS from '../lib/als-shim';
|
|
4
|
-
console.log('>>> startup');
|
|
5
4
|
const processTerminalLine = (data) => {
|
|
6
5
|
// Clean up terminal output - remove ANSI codes and control characters
|
|
7
6
|
let cleaned = data;
|
package/dist/store/project.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export declare const useOriginalOutput: () => any;
|
|
|
13
13
|
export declare const useOriginalOptions: () => any;
|
|
14
14
|
export declare const useOriginalSelectedAddOns: () => any;
|
|
15
15
|
export declare const useApplicationMode: () => import("../types").ApplicationMode | undefined;
|
|
16
|
+
export declare const useShowHostingOptions: () => boolean | undefined;
|
|
16
17
|
export declare const useAddOnsByMode: () => Record<string, AddOnInfo[]> | undefined;
|
|
17
18
|
export declare const useSupportedModes: () => Record<string, {
|
|
18
19
|
displayName: string;
|
package/dist/store/project.js
CHANGED
|
@@ -33,6 +33,7 @@ export const useOriginalOutput = () => useInitialData().data?.output;
|
|
|
33
33
|
export const useOriginalOptions = () => useInitialData().data?.options;
|
|
34
34
|
export const useOriginalSelectedAddOns = () => useOriginalOptions()?.chosenAddOns;
|
|
35
35
|
export const useApplicationMode = () => useInitialData().data?.applicationMode;
|
|
36
|
+
export const useShowHostingOptions = () => useInitialData().data?.showHostingOptions;
|
|
36
37
|
export const useAddOnsByMode = () => useInitialData().data?.addOns;
|
|
37
38
|
export const useSupportedModes = () => useInitialData().data?.supportedModes;
|
|
38
39
|
const useApplicationSettings = create(() => ({
|
package/package.json
CHANGED
|
@@ -5,7 +5,11 @@ import { Switch } from '../ui/switch'
|
|
|
5
5
|
import { Label } from '../ui/label'
|
|
6
6
|
import { Button } from '../ui/button'
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import {
|
|
9
|
+
useAddOns,
|
|
10
|
+
useProjectOptions,
|
|
11
|
+
useShowHostingOptions,
|
|
12
|
+
} from '../../store/project'
|
|
9
13
|
|
|
10
14
|
import ImportCustomAddOn from '../custom-add-on-dialog'
|
|
11
15
|
import AddOnInfoDialog from '../add-on-info-dialog'
|
|
@@ -21,10 +25,13 @@ const addOnTypeLabels: Record<string, string> = {
|
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
export default function SelectedAddOns() {
|
|
28
|
+
const showHostingOptions = useShowHostingOptions()
|
|
24
29
|
const { availableAddOns, addOnState, toggleAddOn, setAddOnOption } =
|
|
25
30
|
useAddOns()
|
|
26
31
|
const addOnOptions = useProjectOptions((state) => state.addOnOptions)
|
|
27
32
|
|
|
33
|
+
console.log('showHostingOptions', showHostingOptions)
|
|
34
|
+
|
|
28
35
|
const sortedAddOns = useMemo(() => {
|
|
29
36
|
return availableAddOns.sort((a, b) => {
|
|
30
37
|
const aPriority = a.priority ?? 0
|
|
@@ -57,74 +64,77 @@ export default function SelectedAddOns() {
|
|
|
57
64
|
disabled={configAddOn ? !addOnState[configAddOn.id]?.enabled : false}
|
|
58
65
|
/>
|
|
59
66
|
<div className="max-h-[60vh] overflow-y-auto space-y-2">
|
|
60
|
-
{Object.keys(addOnTypeLabels)
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
67
|
+
{Object.keys(addOnTypeLabels)
|
|
68
|
+
.filter((type) => (showHostingOptions ? true : type !== 'host'))
|
|
69
|
+
.map((type) => (
|
|
70
|
+
<Fragment key={type}>
|
|
71
|
+
{sortedAddOns.filter((addOn) => addOn.type === type).length >
|
|
72
|
+
0 && (
|
|
73
|
+
<div
|
|
74
|
+
key={`${type}-add-ons`}
|
|
75
|
+
className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active"
|
|
76
|
+
>
|
|
77
|
+
<h3 className="font-medium">{addOnTypeLabels[type]}</h3>
|
|
78
|
+
<div className="space-y-3">
|
|
79
|
+
<div className="flex flex-row flex-wrap">
|
|
80
|
+
{sortedAddOns
|
|
81
|
+
.filter((addOn) => addOn.type === type)
|
|
82
|
+
.map((addOn) => (
|
|
83
|
+
<div key={addOn.id} className="w-1/2">
|
|
84
|
+
<div className="flex flex-row items-center justify-between">
|
|
85
|
+
<div className="p-1 flex flex-row items-center">
|
|
86
|
+
<Switch
|
|
87
|
+
id={addOn.id}
|
|
88
|
+
checked={addOnState[addOn.id].selected}
|
|
89
|
+
disabled={!addOnState[addOn.id].enabled}
|
|
90
|
+
onCheckedChange={() => {
|
|
91
|
+
toggleAddOn(addOn.id)
|
|
92
|
+
}}
|
|
93
|
+
/>
|
|
94
|
+
<Label
|
|
95
|
+
htmlFor={addOn.id}
|
|
96
|
+
className="pl-2 font-semibold text-gray-300 flex items-center gap-2"
|
|
97
|
+
>
|
|
98
|
+
{addOn.smallLogo && (
|
|
99
|
+
<img
|
|
100
|
+
src={`data:image/svg+xml,${encodeURIComponent(
|
|
101
|
+
addOn.smallLogo,
|
|
102
|
+
)}`}
|
|
103
|
+
alt={addOn.name}
|
|
104
|
+
className="w-5"
|
|
105
|
+
/>
|
|
106
|
+
)}
|
|
107
|
+
{addOn.name}
|
|
108
|
+
</Label>
|
|
109
|
+
</div>
|
|
110
|
+
<div className="flex items-center gap-1">
|
|
111
|
+
{addOnState[addOn.id].selected &&
|
|
112
|
+
addOn.options &&
|
|
113
|
+
Object.keys(addOn.options).length > 0 && (
|
|
114
|
+
<Button
|
|
115
|
+
variant="ghost"
|
|
116
|
+
size="sm"
|
|
117
|
+
className="h-6 w-6 p-0 text-gray-600 hover:text-gray-400"
|
|
118
|
+
onClick={() => setConfigAddOn(addOn)}
|
|
119
|
+
disabled={!addOnState[addOn.id].enabled}
|
|
120
|
+
>
|
|
121
|
+
<SettingsIcon className="w-4 h-4" />
|
|
122
|
+
</Button>
|
|
123
|
+
)}
|
|
124
|
+
<InfoIcon
|
|
125
|
+
className="w-4 text-gray-600 cursor-pointer hover:text-gray-400"
|
|
126
|
+
onClick={() => setInfoAddOn(addOn)}
|
|
127
|
+
/>
|
|
128
|
+
</div>
|
|
118
129
|
</div>
|
|
119
130
|
</div>
|
|
120
|
-
|
|
121
|
-
|
|
131
|
+
))}
|
|
132
|
+
</div>
|
|
122
133
|
</div>
|
|
123
134
|
</div>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
))}
|
|
135
|
+
)}
|
|
136
|
+
</Fragment>
|
|
137
|
+
))}
|
|
128
138
|
</div>
|
|
129
139
|
<div className="mt-4">
|
|
130
140
|
<ImportCustomAddOn />
|
package/src/store/project.ts
CHANGED
|
@@ -48,6 +48,8 @@ export const useOriginalOptions = () => useInitialData().data?.options
|
|
|
48
48
|
export const useOriginalSelectedAddOns = () =>
|
|
49
49
|
useOriginalOptions()?.chosenAddOns
|
|
50
50
|
export const useApplicationMode = () => useInitialData().data?.applicationMode
|
|
51
|
+
export const useShowHostingOptions = () =>
|
|
52
|
+
useInitialData().data?.showHostingOptions
|
|
51
53
|
export const useAddOnsByMode = () => useInitialData().data?.addOns
|
|
52
54
|
export const useSupportedModes = () => useInitialData().data?.supportedModes
|
|
53
55
|
|
package/src/types.d.ts
CHANGED
|
@@ -89,6 +89,7 @@ export type InitialData = {
|
|
|
89
89
|
localFiles: Record<string, string>
|
|
90
90
|
addOns: Record<string, Array<AddOnInfo>>
|
|
91
91
|
applicationMode: ApplicationMode
|
|
92
|
+
showHostingOptions?: boolean
|
|
92
93
|
forcedRouterMode?: string
|
|
93
94
|
forcedAddOns?: Array<string>
|
|
94
95
|
registry?: Registry | undefined
|