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

Toggle component with storybook and testing

Browse Source
This commit is contained in:
adilallo
2025-10-14 15:40:51 -06:00
parent b71f0a7dea
commit 929729a67f
6 changed files with 886 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/forms/page.js
+78 -93
View File
@@ -1,111 +1,96 @@
"use client";
import React, { useState } from "react";
import TextArea from "../components/TextArea";
import Toggle from "../components/Toggle";
export default function FormsPlayground() {
const [smallValue, setSmallValue] = useState("");
const [mediumValue, setMediumValue] = useState("");
const [largeValue, setLargeValue] = useState("");
const [defaultLabelValue, setDefaultLabelValue] = useState("");
const [horizontalLabelValue, setHorizontalLabelValue] = useState("");
const [smallHorizontalValue, setSmallHorizontalValue] = useState("");
const [smallDefaultValue, setSmallDefaultValue] = useState("");
const [errorStateValue, setErrorStateValue] = useState("");
const [disabledStateValue, setDisabledStateValue] = useState("");
const [toggleStates, setToggleStates] = useState({
default: false,
hover: false,
selected: true,
focus: false,
disabled: false,
icon: false,
text: false,
both: false,
});
const handleToggleChange = (key) => (e) => {
setToggleStates((prev) => ({
...prev,
[key]: !prev[key],
}));
};
return (
<div className="p-[24px] space-y-[24px]">
<h1 className="font-bricolage text-[24px]">Forms Playground</h1>
<section className="space-y-[12px]">
<h2 className="font-space text-[18px]">TextArea Examples</h2>
<div className="max-w-[520px] space-y-[16px]">
<div>
<h3 className="font-space text-[14px] mb-[8px]">Sizes</h3>
<div className="space-y-[12px]">
<TextArea
label="Small"
size="small"
value={smallValue}
onChange={(e) => setSmallValue(e.target.value)}
placeholder="Enter text..."
/>
<TextArea
label="Medium"
size="medium"
value={mediumValue}
onChange={(e) => setMediumValue(e.target.value)}
placeholder="Enter text..."
/>
<TextArea
label="Large"
size="large"
value={largeValue}
onChange={(e) => setLargeValue(e.target.value)}
placeholder="Enter text..."
/>
</div>
</div>
<div>
<h3 className="font-space text-[14px] mb-[8px]">Label Variants</h3>
<div className="space-y-[12px]">
<TextArea
label="Default (Top Label)"
labelVariant="default"
size="medium"
value={defaultLabelValue}
onChange={(e) => setDefaultLabelValue(e.target.value)}
placeholder="Enter text..."
/>
<TextArea
label="Small Default"
labelVariant="default"
size="small"
value={smallDefaultValue}
onChange={(e) => setSmallDefaultValue(e.target.value)}
placeholder="Enter text..."
/>
<TextArea
label="Horizontal (Left Label)"
labelVariant="horizontal"
size="medium"
value={horizontalLabelValue}
onChange={(e) => setHorizontalLabelValue(e.target.value)}
placeholder="Enter text..."
/>
<TextArea
label="Small Horizontal"
labelVariant="horizontal"
size="small"
value={smallHorizontalValue}
onChange={(e) => setSmallHorizontalValue(e.target.value)}
placeholder="Enter text..."
/>
</div>
</div>
<h2 className="font-space text-[18px]">Toggle Examples</h2>
<div
className="max-w-[520px] space-y-[16px] bg-white p-6 rounded-lg border border-gray-200 shadow-lg"
//style={{ backgroundColor: "white" }}
>
<div>
<h3 className="font-space text-[14px] mb-[8px]">States</h3>
<div className="space-y-[12px]">
<TextArea
label="Error"
size="medium"
state="default"
error={true}
value={errorStateValue}
onChange={(e) => setErrorStateValue(e.target.value)}
placeholder="Enter text..."
<Toggle
label="Default State"
checked={toggleStates.default}
onChange={handleToggleChange("default")}
/>
<TextArea
label="Disabled"
size="medium"
state="default"
disabled={true}
value={disabledStateValue}
onChange={(e) => setDisabledStateValue(e.target.value)}
placeholder="Enter text..."
<Toggle
label="Hover State"
checked={toggleStates.hover}
onChange={handleToggleChange("hover")}
state="hover"
/>
<Toggle
label="Selected State"
checked={toggleStates.selected}
onChange={handleToggleChange("selected")}
/>
<Toggle
label="Focus State"
checked={toggleStates.focus}
onChange={handleToggleChange("focus")}
state="focus"
/>
<Toggle
label="Disabled State"
checked={toggleStates.disabled}
onChange={handleToggleChange("disabled")}
disabled
/>
</div>
</div>
<div>
<h3 className="font-space text-[14px] mb-[8px]">Content Types</h3>
<div className="space-y-[12px]">
<Toggle
label="Icon Only"
checked={toggleStates.icon}
onChange={handleToggleChange("icon")}
showIcon={true}
icon="I"
/>
<Toggle
label="Text Only"
checked={toggleStates.text}
onChange={handleToggleChange("text")}
showText={true}
text="Toggle"
/>
<Toggle
label="Icon and Text"
checked={toggleStates.both}
onChange={handleToggleChange("both")}
showIcon={true}
showText={true}
icon="I"
text="Toggle"
/>
</div>
</div>