mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 18:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add StorybookJS

Browse source
This commit is contained in:
Michal 2025-04-04 11:51:33 +02:00
parent 1039a4788d
commit cbc1260553
116 changed files with 3560 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

30
stories/forms/button.stories.ts Normal file
View file

@ -0,0 +1,30 @@
import { createHTMLElement } from "../HTMLElement";
import { fn } from "@storybook/test";
export default {
title: "Forms/Button",
tags: ["autodocs"],
args: {
content: "Content",
disabled: false,
form: "",
formaction: "",
formenctype: "",
formmethod: "GET",
formnovalidate: false,
formtarget: "",
name: "",
popovertarget: "",
popovertargetaction: "toggle",
type: "button",
value: "",
onclick: fn(),
},
// Render the <html> element
render: (args) => {
return createHTMLElement("button", args);
},
};
export const Default = {};

15
stories/forms/datalist.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Datalist",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("datalist", args);
},
};
export const Default = {};

18
stories/forms/fieldset.stories.ts Normal file
View file

@ -0,0 +1,18 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Fieldset",
tags: ["autodocs"],
args: {
content: "Content",
disabled: false,
form: "form",
name: "name",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("fieldset", args);
},
};
export const Default = {};

23
stories/forms/form.stories.ts Normal file
View file

@ -0,0 +1,23 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Form",
tags: ["autodocs"],
args: {
content: "Content",
"accept-charset": "UTF-8",
name: "name",
rel: "noopener",
action: "action",
enctype: "application/x-www-form-urlencoded",
method: "get",
novalidate: false,
target: "_self",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("form", args);
},
};
export const Default = {};

220
stories/forms/input.stories.ts Normal file
View file

@ -0,0 +1,220 @@
import { render } from "sass-embedded";
import { createHTMLElement } from "../HTMLElement";
const inputTypes = [
"button",
"checkbox",
"color",
"date",
"datetime-local",
"email",
"file",
"hidden",
"image",
"month",
"number",
"password",
"radio",
"range",
"reset",
"search",
"submit",
"tel",
"text",
"time",
"url",
"week",
];
export default {
title: "Forms/Input",
tags: ["autodocs"],
argTypes: {
type: {
control: "select",
options: inputTypes,
},
},
args: {
content: "Content",
accept: "text/plain",
alt: "Alt text",
capture: "camera",
checked: true,
dirname: "input-dir",
disabled: false,
form: "form-id",
formaction: "action-url",
formenctype: "application/x-www-form-urlencoded",
formmethod: "GET",
formnovalidate: false,
formtarget: "_blank",
height: 100,
list: "datalist-id",
max: 100,
maxlength: 50,
min: 0,
minlength: 5,
multiple: true,
name: "input-name",
pattern: "[a-zA-Z0-9]",
placeholder: "Placeholder text",
popvertarget: "popover-target-id",
popovertargetaction: "toggle",
readonly: false,
required: true,
size: 20,
src: "https://picsum.photos/200/300",
step: 1,
type: "text",
value: "Input value",
width: 200,
},
// Render the <html> element
render: (args) => {
return createHTMLElement("input", args);
},
};
export const Default = {};
// All input types
export const AllInputTypes = {
render: (args) => {
const fragment = document.createDocumentFragment();
for (const type of inputTypes) {
args.type = type;
// Create a new input element for each type
const element = createHTMLElement("input", {
...args,
type: type,
placeholder: `Input type: ${type}`,
});
if (!element) {
console.error(`Failed to create input element for type: ${type}`);
continue;
}
// Add the element to the array
fragment.appendChild(element);
}
return fragment;
},
};
export const WithLabelSibling = {
args: {
labelText: "Label text",
},
render: (args) => {
// Fragment
const fragment = document.createDocumentFragment();
const label = createHTMLElement("label", {
content: args.labelText,
});
const input = createHTMLElement("input", {
...args,
type: args.type,
});
if (!input) {
console.error(`Failed to create input element for type: ${args.type}`);
return;
}
// Append the label to the fragment
fragment.appendChild(label);
// Append the input to the fragment
fragment.appendChild(input);
// Return the fragment
return fragment;
},
};
export const AsChildOfLabel = {
args: {
labelText: "Label text",
},
render: (args) => {
// Fragment
const fragment = document.createDocumentFragment();
const label = createHTMLElement("label", {
content: args.labelText,
});
const input = createHTMLElement("input", {
...args,
type: args.type,
});
if (!input) {
console.error(`Failed to create input element for type: ${args.type}`);
return;
}
label.appendChild(input);
fragment.appendChild(label);
// Return the fragment
return fragment;
},
};
export const AsPrependedChildOfLabel = {
args: {
labelText: "Label text",
},
render: (args) => {
// Fragment
const fragment = document.createDocumentFragment();
const label = createHTMLElement("label", {
content: args.labelText,
});
const input = createHTMLElement("input", {
...args,
type: args.type,
});
if (!input) {
console.error(`Failed to create input element for type: ${args.type}`);
return;
}
label.prepend(input);
fragment.appendChild(label);
// Return the fragment
return fragment;
},
};
export const Inline = {
args: {
labelText: "Label text",
},
render: (args) => {
// We want to encapsulate the input with text before and after it, e.g. have the input in the middle of a sentence
// Fragment
const fragment = document.createDocumentFragment();
const label = createHTMLElement("label", {
content: args.labelText,
});
const input = createHTMLElement("input", {
...args,
type: args.type,
});
if (!input) {
console.error(`Failed to create input element for type: ${args.type}`);
return;
}
// Create a span to encapsulate the input
const span = document.createElement("span");
span.appendChild(input);
// Add text before the input
const beforeText = document.createTextNode("Before text ");
span.prepend(beforeText);
// Add text after the input
const afterText = document.createTextNode(" After text goes here");
span.appendChild(afterText);
// Append the span to the label
label.appendChild(span);
// Append the label to the fragment
fragment.appendChild(label);
// Return the fragment
return fragment;
},
};

16
stories/forms/label.stories.ts Normal file
View file

@ -0,0 +1,16 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Label",
tags: ["autodocs"],
args: {
content: "Content",
for: "input-id",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("label", args);
},
};
export const Default = {};

15
stories/forms/legend.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Legend",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("legend", args);
},
};
export const Default = {};

22
stories/forms/meter.stories.ts Normal file
View file

@ -0,0 +1,22 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Meter",
tags: ["autodocs"],
args: {
content: "Content",
value: 0.5,
min: 0,
max: 1,
low: 0.2,
high: 0.8,
optimum: 0.5,
form: "form",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("meter", args);
},
};
export const Default = {};

17
stories/forms/optgroup.stories.ts Normal file
View file

@ -0,0 +1,17 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Optgroup",
tags: ["autodocs"],
args: {
content: "Content",
label: "Label",
disabled: false,
},
// Render the <html> element
render: (args) => {
return createHTMLElement("optgroup", args);
},
};
export const Default = {};

19
stories/forms/option.stories.ts Normal file
View file

@ -0,0 +1,19 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Option",
tags: ["autodocs"],
args: {
content: "Content",
disabled: false,
label: "Label",
selected: false,
value: "Value",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("option", args);
},
};
export const Default = {};

18
stories/forms/output.stories.ts Normal file
View file

@ -0,0 +1,18 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Output",
tags: ["autodocs"],
args: {
content: "Content",
for: "for",
form: "form",
name: "name",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("output", args);
},
};
export const Default = {};

17
stories/forms/progress.stories.ts Normal file
View file

@ -0,0 +1,17 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Progress",
tags: ["autodocs"],
args: {
content: "Content",
max: 100,
value: 50,
},
// Render the <html> element
render: (args) => {
return createHTMLElement("progress", args);
},
};
export const Default = {};

22
stories/forms/select.stories.ts Normal file
View file

@ -0,0 +1,22 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Select",
tags: ["autodocs"],
args: {
content: "Content",
autocomplete: "on",
disabled: false,
form: "form",
multiple: false,
name: "name",
required: false,
size: 0,
},
// Render the <html> element
render: (args) => {
return createHTMLElement("select", args);
},
};
export const Default = {};

27
stories/forms/textarea.stories.ts Normal file
View file

@ -0,0 +1,27 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Forms/Textarea",
tags: ["autodocs"],
args: {
content: "Content",
cols: 20,
dirname: "dirname",
disabled: false,
form: "form",
maxlength: 100,
minlength: 0,
name: "name",
placeholder: "placeholder",
readonly: false,
required: false,
rows: 2,
wrap: "soft",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("textarea", args);
},
};
export const Default = {};