Skip to content

Commit 9cbbfff

Browse files
ricardo-devis-agulloricardo-devis-agullo
committed
add editable fields
1 parent 0d3398e commit 9cbbfff

File tree

14 files changed

+213
-59
lines changed

14 files changed

+213
-59
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ test/fixtures/components/lodash-component/_package
4141
test/fixtures/components/no-containers/_package
4242
test/fixtures/components/welcome/_package
4343
test/fixtures/components/welcome-with-optional-parameters/_package
44+
test/fixtures/components/hello-world-custom-cookies/_package
4445

4546
logintervals.md
4647
dist/

‎src/registry/routes/component-info.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,17 @@ function getParams(component: Component) {
1414
params = Object.fromEntries(
1515
Object.entries(component.oc.parameters || {})
1616
.filter(([, param]) => {
17-
return !!param.mandatory && 'example' in param;
17+
// Include parameters that have either a default value or an example
18+
return param.default !== undefined || param.example !== undefined;
19+
})
20+
.map(([paramName, param]) => {
21+
// Prefer default value over example
22+
const value =
23+
param.default !== undefined
24+
? String(param.default)
25+
: param.example!;
26+
return [paramName, value];
1827
})
19-
.map(([paramName, param]) => [paramName, param.example!])
2028
);
2129
}
2230

‎src/registry/views/info.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export default function Info(vm: Vm) {
149149
selectedVersion={component.version}
150150
/>
151151
</h2>
152-
<p class="w-100">
152+
<p class="w-100" safe>
153153
{component.description} {componentState()}
154154
</p>
155155
{statsAvailable ? (
@@ -184,15 +184,30 @@ export default function Info(vm: Vm) {
184184
) : (
185185
''
186186
)}
187-
<ComponentParameters parameters={component.oc.parameters} />
187+
<ComponentParameters
188+
parameters={component.oc.parameters}
189+
currentValues={Object.fromEntries(
190+
Object.entries(component.oc.parameters || {})
191+
.filter(([, param]) => {
192+
return param.default !== undefined || param.example !== undefined;
193+
})
194+
.map(([paramName, param]) => {
195+
const value =
196+
param.default !== undefined
197+
? String(param.default)
198+
: param.example!;
199+
return [paramName, value];
200+
})
201+
)}
202+
/>
188203
<h3>Code</h3>
189204
<p>
190205
You can edit the following area and then
191206
<a href="#refresh" class="refresh-preview">
192207
{' '}
193208
refresh{' '}
194209
</a>
195-
to apply the change into the preview window.
210+
or hit Enter to apply the change into the preview window.
196211
</p>
197212
<div class="field">
198213
<p>Component's href:</p>

‎src/registry/views/partials/component-author.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ const componentAuthor = (props: {
88
<div class="field">
99
<p>Author:</p>
1010
{!name && !email && !url && <span>not available</span>}
11-
{name && <span>{name}&nbsp;</span>}
11+
{!!name && <span safe>{name}&nbsp;</span>}
1212
{email && (
1313
<span>
1414
<a href={`mailto:${email}`}>{email}</a>&nbsp;
1515
</span>
1616
)}
17-
{url && (
17+
{!!url && (
1818
<span>
19-
<a href={url} target="_blank" rel="noreferrer">
19+
<a safe href={url} target="_blank" rel="noreferrer">
2020
{url}
2121
</a>
2222
</span>

‎src/registry/views/partials/component-parameters.tsx‎

Lines changed: 72 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { OcParameter } from '../../../types';
22

33
const componentParameters = ({
4-
parameters
4+
parameters,
5+
currentValues
56
}: {
67
parameters?: Record<string, OcParameter>;
8+
currentValues?: Record<string, string>;
79
}) => {
810
if (!parameters) {
911
return (
@@ -16,32 +18,94 @@ const componentParameters = ({
1618

1719
const parameterRow = (param: OcParameter, paramName: string) => {
1820
const mandatory = param.mandatory ? 'mandatory' : 'optional';
21+
const defaultValue =
22+
param.default !== undefined ? String(param.default) : '';
23+
const exampleValue =
24+
param.example !== undefined ? String(param.example) : '';
25+
const currentValue =
26+
currentValues?.[paramName] || defaultValue || exampleValue;
27+
28+
const renderInput = () => {
29+
switch (param.type) {
30+
case 'number':
31+
return (
32+
<input
33+
type="number"
34+
class="parameter-input"
35+
name={paramName}
36+
data-parameter={paramName}
37+
value={currentValue}
38+
placeholder={param.example || ''}
39+
/>
40+
);
41+
case 'boolean': {
42+
const isChecked = String(currentValue) === 'true';
43+
return (
44+
<input
45+
type="checkbox"
46+
class="parameter-input"
47+
name={paramName}
48+
data-parameter={paramName}
49+
checked={isChecked}
50+
/>
51+
);
52+
}
53+
default:
54+
return (
55+
<input
56+
type="text"
57+
class="parameter-input"
58+
name={paramName}
59+
data-parameter={paramName}
60+
value={currentValue}
61+
placeholder={
62+
typeof param.default !== 'undefined'
63+
? String(param.default)
64+
: param.example || ''
65+
}
66+
/>
67+
);
68+
}
69+
};
70+
1971
return (
2072
<div class="row">
2173
<div class="parameter">
22-
<span class="bold">{paramName}</span>
74+
<span safe class="bold">
75+
{paramName}
76+
</span>
2377
<span>
2478
({param.type}, {mandatory})
2579
</span>
2680
</div>
2781
<div class="parameter-description">
28-
{param.description && (
82+
{!!param.description && (
2983
<>
30-
<span>{param.description}</span>
84+
<span safe>{param.description}</span>
3185
<br />
3286
<br />
3387
</>
3488
)}
35-
<span class="bold">Example:</span>
36-
<span>{param.example}</span>
37-
{!param.mandatory && param.default && (
89+
{param.type !== 'boolean' && !!param.example && (
3890
<>
91+
<span class="bold">Example:</span>
92+
<span>{param.example}</span>
3993
<br />
4094
<br />
95+
</>
96+
)}
97+
{!param.mandatory && !!param.default && (
98+
<>
4199
<span class="bold">Default:</span>
42-
<span>{param.default}</span>
100+
<span safe>{String(param.default)}</span>
101+
<br />
102+
<br />
43103
</>
44104
)}
105+
<span class="bold">
106+
{param.type === 'boolean' ? 'Enabled:' : 'Value:'}
107+
</span>
108+
{renderInput()}
45109
</div>
46110
</div>
47111
);
@@ -51,10 +115,6 @@ const componentParameters = ({
51115
<div>
52116
<h3>Parameters</h3>
53117
<div id="plugins" class="table">
54-
<div class="row header">
55-
<div class="parameter">Parameters</div>
56-
<div class="parameter-description" />
57-
</div>
58118
{Object.keys(parameters).map((parameterName) =>
59119
parameterRow(parameters[parameterName], parameterName)
60120
)}

‎src/registry/views/partials/component-versions.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const componentVersions = ({
88
return (
99
<select id="versions">
1010
{versions.map((version) => (
11-
<option value={version} selected={version === selectedVersion}>
11+
<option safe value={version} selected={version === selectedVersion}>
1212
{version}
1313
</option>
1414
))}

‎src/registry/views/partials/components-dependencies.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ const ComponentsDependencies = (props: {
1616
return (
1717
<a href={link} target="_blank" rel="noreferrer">
1818
<div class="componentRow row table">
19-
<p class="release">{label}</p>
19+
<p safe class="release">
20+
{label}
21+
</p>
2022
</div>
2123
</a>
2224
);

‎src/registry/views/partials/components-list.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ const ComponentsList = (props: {
3030

3131
const remoteServerColumns = isRemote
3232
? [
33-
<div class="date">{component.oc.stringifiedDate || ''}</div>,
33+
<div class="date" safe>
34+
{component.oc.stringifiedDate || ''}
35+
</div>,
3436
<div class="activity">{component.allVersions.length}</div>
3537
]
3638
: null;
@@ -49,12 +51,18 @@ const ComponentsList = (props: {
4951
class={`componentRow row table${isHidden ? ' hide' : ''}`}
5052
>
5153
<div class="title">
52-
<p class="name">{component.name}</p>
53-
<span class="description">{component.description}</span>
54+
<p class="name" safe>
55+
{component.name}
56+
</p>
57+
<span class="description" safe>
58+
{component.description}
59+
</span>
5460
</div>
5561
{componentState}
56-
<div class="author">{component.author.name || ''}</div>
57-
<div>{component.version}</div>
62+
<div class="author" safe>
63+
{component.author.name || ''}
64+
</div>
65+
<div safe>{component.version}</div>
5866
{remoteServerColumns}
5967
{sizeColumn}
6068
</div>

‎src/registry/views/partials/components-templates.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const ComponentsTemplates = (props: { templates: Templates }) => {
1111
global: string | string[];
1212
url: string;
1313
}) => (
14-
<a href={url} target="_blank" rel="noreferrer">
14+
<a safe href={url} target="_blank" rel="noreferrer">
1515
{global}
1616
</a>
1717
);
@@ -29,6 +29,7 @@ const ComponentsTemplates = (props: { templates: Templates }) => {
2929
href={`https://www.npmjs.com/package/${type}`}
3030
target="_blank"
3131
rel="noreferrer"
32+
safe
3233
>
3334
{type}@{version}
3435
</a>

‎src/registry/views/partials/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Layout = ({ title, href, children, scripts }: LayoutProps) => {
2020
{'<!DOCTYPE html>'}
2121
<html lang="en">
2222
<head>
23-
<title>{title}</title>
23+
<title safe>{title}</title>
2424
<meta name="robots" content="index, follow" />
2525
<meta name="language" content="EN" />
2626
<meta name="distribution" content="global" />

0 commit comments

Comments
 (0)