Skip to content

Commit 0a6baee

Browse files
jeffreylauwersjeffreylauwers
authored
Merge pull request #26 from jeffreylauwers/feature/codetabs-html-dynamic
feat(storybook): HTML/CSS tab dynamisch via transform + htmlTemplate
2 parents 4d967d2 + 5fe494b commit 0a6baee

28 files changed

Lines changed: 526 additions & 3 deletions

‎packages/storybook/src/Button.stories.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,25 @@ const iconOptions: (IconName | undefined)[] = [
6262
const meta: Meta<typeof Button> = {
6363
title: 'Components/Button',
6464
component: Button,
65+
parameters: {
66+
dsn: {
67+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
68+
htmlTemplate: (args: any) => {
69+
const cls = [
70+
'dsn-button',
71+
`dsn-button--${args.variant ?? 'strong'}`,
72+
`dsn-button--size-${args.size ?? 'default'}`,
73+
args.loading && 'dsn-button--loading',
74+
args.fullWidth && 'dsn-button--full-width',
75+
args.iconOnly && 'dsn-button--icon-only',
76+
]
77+
.filter(Boolean)
78+
.join(' ');
79+
const disabled = args.disabled || args.loading ? ' disabled' : '';
80+
return `<button type="button" class="${cls}"${disabled}>${args.children ?? 'Tekst'}</button>`;
81+
},
82+
},
83+
},
6584
argTypes: {
6685
variant: {
6786
control: 'select',

‎packages/storybook/src/Checkbox.stories.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,29 @@ const meta: Meta<typeof Checkbox> = {
1010
docs: {
1111
page: DocsPage,
1212
},
13+
dsn: {
14+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
15+
htmlTemplate: (args: any) => {
16+
const inputCls = [
17+
'dsn-checkbox__input',
18+
args.invalid && 'dsn-checkbox__input--invalid',
19+
]
20+
.filter(Boolean)
21+
.join(' ');
22+
const inputAttrs = [
23+
args.checked && 'checked',
24+
args.disabled && 'disabled',
25+
args.required && 'required',
26+
args.invalid && 'aria-invalid="true"',
27+
]
28+
.filter(Boolean)
29+
.join(' ');
30+
const iconComment = args.indeterminate
31+
? '<!-- minus icon -->'
32+
: '<!-- check icon -->';
33+
return `<div class="dsn-checkbox">\n <input type="checkbox" class="${inputCls}"${inputAttrs ? ' ' + inputAttrs : ''} />\n <span class="dsn-checkbox__control" aria-hidden="true">\n ${iconComment}\n </span>\n</div>`;
34+
},
35+
},
1336
},
1437
argTypes: {
1538
checked: { control: 'boolean' },

‎packages/storybook/src/CheckboxOption.stories.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,35 @@ const meta: Meta<typeof CheckboxOption> = {
1717
docs: {
1818
page: DocsPage,
1919
},
20+
dsn: {
21+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
22+
htmlTemplate: (args: any) => {
23+
const inputCls = [
24+
'dsn-checkbox__input',
25+
args.invalid && 'dsn-checkbox__input--invalid',
26+
]
27+
.filter(Boolean)
28+
.join(' ');
29+
const inputAttrs = [
30+
args.checked && 'checked',
31+
args.disabled && 'disabled',
32+
args.required && 'required',
33+
args.invalid && 'aria-invalid="true"',
34+
]
35+
.filter(Boolean)
36+
.join(' ');
37+
const labelCls = [
38+
'dsn-option-label',
39+
args.disabled && 'dsn-option-label--disabled',
40+
]
41+
.filter(Boolean)
42+
.join(' ');
43+
const iconComment = args.indeterminate
44+
? '<!-- minus icon -->'
45+
: '<!-- check icon -->';
46+
return `<label class="dsn-checkbox-option">\n <div class="dsn-checkbox">\n <input type="checkbox" class="${inputCls}"${inputAttrs ? ' ' + inputAttrs : ''} />\n <span class="dsn-checkbox__control" aria-hidden="true">\n ${iconComment}\n </span>\n </div>\n <span class="${labelCls}">${args.label ?? 'Tekst'}</span>\n</label>`;
47+
},
48+
},
2049
},
2150
argTypes: {
2251
checked: { control: 'boolean' },

‎packages/storybook/src/DateInput.stories.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,24 @@ const meta: Meta<typeof DateInput> = {
1010
docs: {
1111
page: DocsPage,
1212
},
13+
dsn: {
14+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
15+
htmlTemplate: (args: any) => {
16+
const attrs = [
17+
args.disabled && 'disabled',
18+
args.readOnly && 'readonly',
19+
args.required && 'required',
20+
args.invalid && 'aria-invalid="true"',
21+
]
22+
.filter(Boolean)
23+
.join(' ');
24+
const button =
25+
!args.disabled && !args.readOnly
26+
? '\n <!-- calendar button (niet-focusbaar, voor muisgebruikers) -->'
27+
: '';
28+
return `<div class="dsn-date-input-wrapper">\n <input type="date" class="dsn-text-input dsn-date-input"${attrs ? ' ' + attrs : ''} />${button}\n</div>`;
29+
},
30+
},
1331
},
1432
argTypes: {
1533
disabled: { control: 'boolean' },

‎packages/storybook/src/EmailInput.stories.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,27 @@ const meta: Meta<typeof EmailInput> = {
1616
docs: {
1717
page: DocsPage,
1818
},
19+
dsn: {
20+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
21+
htmlTemplate: (args: any) => {
22+
const cls = [
23+
'dsn-text-input',
24+
args.width && `dsn-text-input--width-${args.width}`,
25+
]
26+
.filter(Boolean)
27+
.join(' ');
28+
const attrs = [
29+
args.disabled && 'disabled',
30+
args.readOnly && 'readonly',
31+
args.required && 'required',
32+
args.invalid && 'aria-invalid="true"',
33+
args.placeholder && `placeholder="${args.placeholder}"`,
34+
]
35+
.filter(Boolean)
36+
.join(' ');
37+
return `<input type="email" inputmode="email" class="${cls}" autocomplete="email"${attrs ? ' ' + attrs : ''} />`;
38+
},
39+
},
1940
},
2041
argTypes: {
2142
placeholder: { control: 'text' },

‎packages/storybook/src/FormField.stories.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,34 @@ const meta: Meta<typeof FormField> = {
2222
docs: {
2323
page: DocsPage,
2424
},
25+
dsn: {
26+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
27+
htmlTemplate: (args: any) => {
28+
const cls = ['dsn-form-field', args.error && 'dsn-form-field--invalid']
29+
.filter(Boolean)
30+
.join(' ');
31+
const forAttr = args.htmlFor ? ` for="${args.htmlFor}"` : '';
32+
const suffix = args.labelSuffix
33+
? `<span class="dsn-form-field-label-suffix">${args.labelSuffix}</span>`
34+
: '';
35+
let html = `<div class="${cls}">\n`;
36+
html += ` <label class="dsn-form-field-label"${forAttr}>${args.label ?? 'Label'}${suffix}</label>\n`;
37+
if (args.description)
38+
html += ` <p class="dsn-form-field-description">${args.description}</p>\n`;
39+
if (args.error)
40+
html += ` <p class="dsn-form-field-error-message"><!-- exclamation-circle icon -->${args.error}</p>\n`;
41+
html += ` <input type="text" class="dsn-text-input"${args.htmlFor ? ` id="${args.htmlFor}"` : ''} />\n`;
42+
if (args.status) {
43+
const variantCls =
44+
args.statusVariant && args.statusVariant !== 'default'
45+
? ` dsn-form-field-status--${args.statusVariant}`
46+
: '';
47+
html += ` <p class="dsn-form-field-status${variantCls}">${args.status}</p>\n`;
48+
}
49+
html += `</div>`;
50+
return html;
51+
},
52+
},
2553
},
2654
argTypes: {
2755
label: { control: 'text' },

‎packages/storybook/src/FormFieldDescription.stories.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@ const meta: Meta<typeof FormFieldDescription> = {
1717
docs: {
1818
page: DocsPage,
1919
},
20+
dsn: {
21+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
22+
htmlTemplate: (args: any) => {
23+
const idAttr = args.id ? ` id="${args.id}"` : '';
24+
return `<p class="dsn-form-field-description"${idAttr}>${args.children ?? 'Tekst'}</p>`;
25+
},
26+
},
2027
},
2128
argTypes: {
2229
id: { control: 'text' },

‎packages/storybook/src/FormFieldErrorMessage.stories.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,15 @@ const meta: Meta<typeof FormFieldErrorMessage> = {
1717
docs: {
1818
page: DocsPage,
1919
},
20+
dsn: {
21+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
22+
htmlTemplate: (args: any) => {
23+
const showIcon = args.showIcon !== false;
24+
const idAttr = args.id ? ` id="${args.id}"` : '';
25+
const icon = showIcon ? '<!-- exclamation-circle icon -->\n ' : '';
26+
return `<p class="dsn-form-field-error-message"${idAttr}>\n ${icon}${args.children ?? 'Tekst'}\n</p>`;
27+
},
28+
},
2029
},
2130
argTypes: {
2231
showIcon: { control: 'boolean' },

‎packages/storybook/src/FormFieldLabel.stories.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@ const meta: Meta<typeof FormFieldLabel> = {
1717
docs: {
1818
page: DocsPage,
1919
},
20+
dsn: {
21+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
22+
htmlTemplate: (args: any) => {
23+
const forAttr = args.htmlFor ? ` for="${args.htmlFor}"` : '';
24+
const suffix = args.suffix
25+
? `<span class="dsn-form-field-label-suffix">${args.suffix}</span>`
26+
: '';
27+
return `<label class="dsn-form-field-label"${forAttr}>${args.children ?? 'Label'}${suffix}</label>`;
28+
},
29+
},
2030
},
2131
argTypes: {
2232
suffix: { control: 'text' },

‎packages/storybook/src/FormFieldStatus.stories.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,29 @@ const meta: Meta<typeof FormFieldStatus> = {
1717
docs: {
1818
page: DocsPage,
1919
},
20+
dsn: {
21+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
22+
htmlTemplate: (args: any) => {
23+
const variant = args.variant ?? 'default';
24+
const cls = [
25+
'dsn-form-field-status',
26+
variant !== 'default' && `dsn-form-field-status--${variant}`,
27+
]
28+
.filter(Boolean)
29+
.join(' ');
30+
const showIcon = args.showIcon !== false && variant !== 'default';
31+
const iconName =
32+
variant === 'positive'
33+
? 'check'
34+
: variant === 'warning'
35+
? 'alert-triangle'
36+
: null;
37+
const idAttr = args.id ? ` id="${args.id}"` : '';
38+
const icon =
39+
showIcon && iconName ? `<!-- ${iconName} icon -->\n ` : '';
40+
return `<p class="${cls}"${idAttr}>\n ${icon}${args.children ?? 'Tekst'}\n</p>`;
41+
},
42+
},
2043
},
2144
argTypes: {
2245
variant: {

0 commit comments

Comments
 (0)