shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Aniimo guides and link game cards to toolbox checklists
Some checks failed
Deploy Sokko G / deploy (push) Failing after 3s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-23 20:05:19 +02:00
parent f0797ccf14
commit 13434f72f6
278 changed files with 10025 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

23
website/src/pages/DesignSystemPage.jsx
View file

@ -67,6 +67,15 @@ const RADIO_OPTIONS = {
};
const COMPONENTS = [
{
id: "nds-range",
name: "Range",
className: "nds-range",
sizes: ["sm", "md"],
variants: VARIANT_VALUES.none,
attributes: { "data-size": ["sm", "md"], "data-state": FIELD_STATE_VALUES },
render: ({ attributes, state }) => <InteractiveRange attributes={attributes} disabled={state === "disabled"} />
},
{
id: "nds-input",
name: "Input",
@ -400,10 +409,10 @@ const PATTERN_COMPONENTS = [
id: "nds-progress",
name: "Progress",
className: "nds-progress",
sizes: SIZE_VALUES.none,
sizes: ["md", "sm"],
variants: ["primary", "success", "warning", "danger"],
attributes: { "data-variant": ["primary", "success", "warning", "danger"] },
render: ({ attributes, variant }) => <span className="nds-progress" {...attributes} aria-label={`Progression ${variant}`}><span style={{ width: variant === "danger" ? "86%" : "58%" }} /></span>
attributes: { "data-size": ["md", "sm"], "data-variant": ["primary", "success", "warning", "danger"] },
render: ({ attributes, variant }) => <span className="nds-progress" {...attributes} role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={variant === "danger" ? 86 : 58} aria-label={`Progression ${variant}`}><span style={{ width: variant === "danger" ? "86%" : "58%" }} /></span>
},
{
id: "nds-filter-panel",
@ -661,6 +670,14 @@ function InteractiveRadioButtonGroup({ attributes, options, iconOnly = false })
);
}
function InteractiveRange({ attributes, disabled }) {
const [value, setValue] = useState(1);
return <label className="field">
<span>Niveau minimum ≥ {value}</span>
<input className="nds-range" {...dataProps(attributes)} type="range" min="1" max="4" step="1" value={value} disabled={disabled} onChange={(event) => setValue(Number(event.target.value))} />
</label>;
}
function InteractiveStepper({ attributes, input = false }) {
const [value, setValue] = useState(2);
const increment = (step) => setValue((current) => Math.min(20, Math.max(0, current + step)));