CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

App reorganization

Browse Source
This commit is contained in:
adilallo
2026-04-18 14:12:49 -06:00
parent f866d11ff8
commit e9dab04b34
288 changed files with 2698 additions and 5029 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/controls/Checkbox.stories.js
+9 -11
View File
@@ -46,15 +46,13 @@ export default {
},
mode: {
control: "select",
options: ["standard", "inverse", "Standard", "Inverse"],
description:
"Visual mode of the checkbox (case-insensitive: accepts both lowercase and PascalCase)",
options: ["standard", "inverse"],
description: "Visual mode of the checkbox",
},
state: {
control: "select",
options: ["default", "hover", "focus", "Default", "Hover", "Focus"],
description:
"Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
options: ["default", "hover", "focus"],
description: "Interaction state for static display",
},
disabled: {
control: "boolean",
@@ -228,15 +226,15 @@ export const FigmaPascalCase = () => {
<Checkbox
label="Standard Mode (PascalCase)"
checked={standardChecked}
mode="Standard"
state="Default"
mode="standard"
state="default"
onChange={({ checked }) => setStandardChecked(checked)}
/>
<Checkbox
label="Inverse Mode (PascalCase)"
checked={inverseChecked}
mode="Inverse"
state="Default"
mode="inverse"
state="default"
onChange={({ checked }) => setInverseChecked(checked)}
/>
</div>
@@ -256,7 +254,7 @@ export const FigmaPascalCase = () => {
label="Inverse Mode (mixed) - still works"
checked={false}
mode="inverse"
state="Default"
state="default"
/>
</div>
</div>
stories/controls/Chip.stories.js
+83
View File
@@ -0,0 +1,83 @@
import Chip from "../../app/components/controls/Chip";
export default {
title: "Components/Controls/Chip",
component: Chip,
parameters: {
layout: "centered",
},
argTypes: {
label: {
control: "text",
description: "Text displayed inside the chip",
},
state: {
control: "select",
options: ["unselected", "selected", "disabled", "custom"],
description: "Visual state of the chip",
},
palette: {
control: "select",
options: ["default", "inverse"],
description: "Color palette of the chip",
},
size: {
control: "select",
options: ["s", "m"],
description: "Size of the chip",
},
disabled: {
control: "boolean",
description: "Override the disabled behaviour independently of state",
},
onClick: { action: "clicked" },
onRemove: { action: "removed" },
onCheck: { action: "checked" },
onClose: { action: "closed" },
},
};
export const Default = {
args: {
label: "Worker cooperative",
state: "unselected",
palette: "default",
size: "m",
},
};
export const Selected = {
args: {
label: "Worker cooperative",
state: "selected",
palette: "default",
size: "m",
},
};
export const Disabled = {
args: {
label: "Worker cooperative",
state: "disabled",
palette: "default",
size: "m",
},
};
export const Inverse = {
args: {
label: "Worker cooperative",
state: "selected",
palette: "inverse",
size: "m",
},
};
export const Small = {
args: {
label: "Worker cooperative",
state: "unselected",
palette: "default",
size: "s",
},
};
stories/controls/InputWithCounter.stories.js
+82
View File
@@ -0,0 +1,82 @@
import React from "react";
import InputWithCounter from "../../app/components/controls/InputWithCounter";
export default {
title: "Components/Controls/InputWithCounter",
component: InputWithCounter,
parameters: {
layout: "centered",
},
argTypes: {
label: {
control: "text",
description: "Label rendered above the input",
},
placeholder: {
control: "text",
description: "Placeholder text shown when value is empty",
},
value: {
control: "text",
description: "Current value of the input (controlled)",
},
maxLength: {
control: { type: "number", min: 1, max: 500, step: 1 },
description: "Maximum number of characters allowed",
},
showHelpIcon: {
control: "boolean",
description: "Whether to show the help icon next to the label",
},
onChange: { action: "changed" },
},
};
const Template = (args) => {
const [value, setValue] = React.useState(args.value ?? "");
return (
<div style={{ width: 320 }}>
<InputWithCounter
{...args}
value={value}
onChange={(next) => {
setValue(next);
args.onChange?.(next);
}}
/>
</div>
);
};
export const Default = {
render: Template,
args: {
label: "Community name",
placeholder: "Enter a name",
value: "",
maxLength: 50,
showHelpIcon: false,
},
};
export const WithHelpIcon = {
render: Template,
args: {
label: "Community name",
placeholder: "Enter a name",
value: "",
maxLength: 50,
showHelpIcon: true,
},
};
export const WithInitialValue = {
render: Template,
args: {
label: "Community name",
placeholder: "Enter a name",
value: "My community",
maxLength: 30,
showHelpIcon: false,
},
};
stories/controls/MultiSelect.stories.js
+85
View File
@@ -0,0 +1,85 @@
import React from "react";
import MultiSelect from "../../app/components/controls/MultiSelect";
export default {
title: "Components/Controls/MultiSelect",
component: MultiSelect,
parameters: {
layout: "centered",
},
argTypes: {
label: {
control: "text",
description: "Label displayed above the chip set",
},
showHelpIcon: {
control: "boolean",
description: "Whether to show the help icon next to the label",
},
size: {
control: "select",
options: ["s", "m"],
description: "Size variant of the chips",
},
palette: {
control: "select",
options: ["default", "inverse"],
description: "Color palette applied to the chips",
},
addButton: {
control: "boolean",
description: "Whether to show the add button",
},
addButtonText: {
control: "text",
description: "Text rendered on the add button",
},
formHeader: {
control: "boolean",
description: "Whether to show the label/help-icon header",
},
onChipClick: { action: "chip-clicked" },
onAddClick: { action: "add-clicked" },
},
};
const defaultOptions = [
{ id: "1", label: "Worker cooperative", state: "unselected" },
{ id: "2", label: "Consumer cooperative", state: "selected" },
{ id: "3", label: "Housing cooperative", state: "unselected" },
{ id: "4", label: "Producer cooperative", state: "unselected" },
];
export const Default = {
args: {
label: "Organization type",
showHelpIcon: true,
size: "m",
palette: "default",
options: defaultOptions,
addButton: true,
addButtonText: "Add organization type",
formHeader: true,
},
};
export const Small = {
args: {
...Default.args,
size: "s",
},
};
export const Inverse = {
args: {
...Default.args,
palette: "inverse",
},
};
export const NoAddButton = {
args: {
...Default.args,
addButton: false,
},
};
stories/controls/RadioButton.stories.js
+9 -20
View File
@@ -21,24 +21,13 @@ export default {
},
mode: {
control: "select",
options: ["standard", "inverse", "Standard", "Inverse"],
description:
"Visual mode of the radio button (case-insensitive: accepts both lowercase and PascalCase)",
options: ["standard", "inverse"],
description: "Visual mode of the radio button",
},
state: {
control: "select",
options: [
"default",
"hover",
"focus",
"selected",
"Default",
"Hover",
"Focus",
"Selected",
],
description:
"Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
options: ["default", "hover", "focus", "selected"],
description: "Interaction state for static display",
},
disabled: {
control: "boolean",
@@ -286,15 +275,15 @@ export const FigmaPascalCase = () => {
<RadioButton
label="Standard Mode (PascalCase)"
checked={standardChecked}
mode="Standard"
state="Default"
mode="standard"
state="default"
onChange={({ checked }) => setStandardChecked(checked)}
/>
<RadioButton
label="Inverse Mode (PascalCase)"
checked={inverseChecked}
mode="Inverse"
state="Default"
mode="inverse"
state="default"
onChange={({ checked }) => setInverseChecked(checked)}
/>
</div>
@@ -314,7 +303,7 @@ export const FigmaPascalCase = () => {
label="Inverse Mode (mixed) - still works"
checked={false}
mode="inverse"
state="Default"
state="default"
/>
</div>
</div>