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
app/(dev)/components-preview/page.tsx
+103 -104
View File
@@ -14,27 +14,26 @@ let ruleCardIdCounter = 0;
interface ChipData {
id: string;
label: string;
state: "Unselected" | "Selected" | "Custom";
palette: "Default" | "Inverse";
size: "S" | "M";
state: "unselected" | "selected" | "custom";
palette: "default" | "inverse";
size: "s" | "m";
}
// MultiSelect example component with state management
function MultiSelectExample({ size }: { size: "S" | "M" }) {
function MultiSelectExample({ size }: { size: "s" | "m" }) {
const [options, setOptions] = useState<
Array<{
id: string;
label: string;
state: "Unselected" | "Selected" | "Custom";
state: "unselected" | "selected" | "custom";
}>
>([
{ id: "1", label: "1 member", state: "Unselected" },
{ id: "2", label: "2-10 members", state: "Unselected" },
{ id: "3", label: "10-24 members", state: "Unselected" },
{ id: "4", label: "24-64 members", state: "Unselected" },
{ id: "5", label: "64-128 members", state: "Unselected" },
{ id: "6", label: "125-1000 members", state: "Unselected" },
{ id: "7", label: "1000+ members", state: "Unselected" },
{ id: "1", label: "1 member", state: "unselected" },
{ id: "2", label: "2-10 members", state: "unselected" },
{ id: "3", label: "10-24 members", state: "unselected" },
{ id: "4", label: "24-64 members", state: "unselected" },
{ id: "5", label: "64-128 members", state: "unselected" },
{ id: "6", label: "125-1000 members", state: "unselected" },
{ id: "7", label: "1000+ members", state: "unselected" },
]);
const handleChipClick = (chipId: string) => {
@@ -43,7 +42,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
opt.id === chipId
? {
...opt,
state: opt.state === "Selected" ? "Unselected" : "Selected",
state: opt.state === "selected" ? "unselected" : "selected",
}
: opt,
),
@@ -52,14 +51,14 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
const handleAddClick = () => {
const newId = `custom-${Date.now()}`;
setOptions((prev) => [...prev, { id: newId, label: "", state: "Custom" }]);
setOptions((prev) => [...prev, { id: newId, label: "", state: "custom" }]);
};
const handleCustomConfirm = (chipId: string, value: string) => {
setOptions((prev) =>
prev.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" as const }
? { ...opt, label: value, state: "selected" as const }
: opt,
),
);
@@ -72,7 +71,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
return (
<div className="space-y-[var(--spacing-scale-016)]">
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
{size === "S" ? "Small (S)" : "Medium (M)"}
{size === "s" ? "Small (S)" : "Medium (M)"}
</h3>
<MultiSelect
label="Label"
@@ -91,12 +90,12 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
export default function ComponentsPreview() {
const [chipStates, setChipStates] = useState<
Record<string, "Unselected" | "Selected">
Record<string, "unselected" | "selected">
>({
"default-s": "Unselected",
"default-m": "Unselected",
"inverse-s": "Unselected",
"inverse-m": "Unselected",
"default-s": "unselected",
"default-m": "unselected",
"inverse-s": "unselected",
"inverse-m": "unselected",
});
// Manage custom chips separately
@@ -104,16 +103,16 @@ export default function ComponentsPreview() {
{
id: "custom-1",
label: "",
state: "Custom",
palette: "Default",
size: "S",
state: "custom",
palette: "default",
size: "s",
},
{
id: "custom-2",
label: "",
state: "Custom",
palette: "Default",
size: "M",
state: "custom",
palette: "default",
size: "m",
},
]);
@@ -124,7 +123,7 @@ export default function ComponentsPreview() {
chipOptions: Array<{
id: string;
label: string;
state: "Unselected" | "Selected" | "Custom";
state: "unselected" | "selected" | "custom";
}>;
onChipClick?: (_categoryName: string, _chipId: string) => void;
onAddClick?: (_categoryName: string) => void;
@@ -139,11 +138,11 @@ export default function ComponentsPreview() {
{
name: "Values",
chipOptions: [
{ id: "values-1", label: "Consciousness", state: "Unselected" },
{ id: "values-2", label: "Ecology", state: "Unselected" },
{ id: "values-3", label: "Abundance", state: "Unselected" },
{ id: "values-4", label: "Art", state: "Unselected" },
{ id: "values-5", label: "Decisiveness", state: "Unselected" },
{ id: "values-1", label: "Consciousness", state: "unselected" },
{ id: "values-2", label: "Ecology", state: "unselected" },
{ id: "values-3", label: "Abundance", state: "unselected" },
{ id: "values-4", label: "Art", state: "unselected" },
{ id: "values-5", label: "Decisiveness", state: "unselected" },
],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
@@ -156,9 +155,9 @@ export default function ComponentsPreview() {
? {
...opt,
state:
opt.state === "Selected"
? "Unselected"
: "Selected",
opt.state === "selected"
? "unselected"
: "selected",
}
: opt,
),
@@ -176,7 +175,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" },
{ id: newId, label: "", state: "custom" },
],
}
: cat,
@@ -195,7 +194,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" }
? { ...opt, label: value, state: "selected" }
: opt,
),
}
@@ -220,7 +219,7 @@ export default function ComponentsPreview() {
},
{
name: "Communication",
chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
prev.map((cat) =>
@@ -232,9 +231,9 @@ export default function ComponentsPreview() {
? {
...opt,
state:
opt.state === "Selected"
? "Unselected"
: "Selected",
opt.state === "selected"
? "unselected"
: "selected",
}
: opt,
),
@@ -252,7 +251,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" },
{ id: newId, label: "", state: "custom" },
],
}
: cat,
@@ -271,7 +270,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" }
? { ...opt, label: value, state: "selected" }
: opt,
),
}
@@ -297,7 +296,7 @@ export default function ComponentsPreview() {
{
name: "Membership",
chipOptions: [
{ id: "membership-1", label: "Open Admission", state: "Unselected" },
{ id: "membership-1", label: "Open Admission", state: "unselected" },
],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
@@ -310,9 +309,9 @@ export default function ComponentsPreview() {
? {
...opt,
state:
opt.state === "Selected"
? "Unselected"
: "Selected",
opt.state === "selected"
? "unselected"
: "selected",
}
: opt,
),
@@ -330,7 +329,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" },
{ id: newId, label: "", state: "custom" },
],
}
: cat,
@@ -349,7 +348,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" }
? { ...opt, label: value, state: "selected" }
: opt,
),
}
@@ -375,8 +374,8 @@ export default function ComponentsPreview() {
{
name: "Decision-making",
chipOptions: [
{ id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
{ id: "decision-2", label: "Modified Consensus", state: "Unselected" },
{ id: "decision-1", label: "Lazy Consensus", state: "unselected" },
{ id: "decision-2", label: "Modified Consensus", state: "unselected" },
],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
@@ -389,9 +388,9 @@ export default function ComponentsPreview() {
? {
...opt,
state:
opt.state === "Selected"
? "Unselected"
: "Selected",
opt.state === "selected"
? "unselected"
: "selected",
}
: opt,
),
@@ -409,7 +408,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" },
{ id: newId, label: "", state: "custom" },
],
}
: cat,
@@ -428,7 +427,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" }
? { ...opt, label: value, state: "selected" }
: opt,
),
}
@@ -454,8 +453,8 @@ export default function ComponentsPreview() {
{
name: "Conflict management",
chipOptions: [
{ id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
{ id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
{ id: "conflict-1", label: "Code of Conduct", state: "unselected" },
{ id: "conflict-2", label: "Restorative Justice", state: "unselected" },
],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
@@ -468,9 +467,9 @@ export default function ComponentsPreview() {
? {
...opt,
state:
opt.state === "Selected"
? "Unselected"
: "Selected",
opt.state === "selected"
? "unselected"
: "selected",
}
: opt,
),
@@ -488,7 +487,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" },
{ id: newId, label: "", state: "custom" },
],
}
: cat,
@@ -507,7 +506,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" }
? { ...opt, label: value, state: "selected" }
: opt,
),
}
@@ -560,45 +559,45 @@ export default function ComponentsPreview() {
<Chip
label="Small"
state={chipStates["default-s"]}
palette="Default"
size="S"
palette="default"
size="s"
onClick={() =>
setChipStates((prev) => ({
...prev,
"default-s":
prev["default-s"] === "Selected"
? "Unselected"
: "Selected",
prev["default-s"] === "selected"
? "unselected"
: "selected",
}))
}
/>
<Chip
label="Medium"
state={chipStates["default-m"]}
palette="Default"
size="M"
palette="default"
size="m"
onClick={() =>
setChipStates((prev) => ({
...prev,
"default-m":
prev["default-m"] === "Selected"
? "Unselected"
: "Selected",
prev["default-m"] === "selected"
? "unselected"
: "selected",
}))
}
/>
<Chip
label="Disabled"
state="Disabled"
palette="Default"
size="S"
state="disabled"
palette="default"
size="s"
/>
{customChips
.filter((chip) => chip.palette === "Default")
.filter((chip) => chip.palette === "default")
.map((chip) => (
<Chip
key={chip.id}
label={chip.state === "Custom" ? "" : chip.label}
label={chip.state === "custom" ? "" : chip.label}
state={chip.state}
palette={chip.palette}
size={chip.size}
@@ -607,7 +606,7 @@ export default function ComponentsPreview() {
setCustomChips((prev) =>
prev.map((c) =>
c.id === chip.id
? { ...c, label: value, state: "Selected" }
? { ...c, label: value, state: "selected" }
: c,
),
);
@@ -622,8 +621,8 @@ export default function ComponentsPreview() {
e.stopPropagation();
// Only toggle if the chip is in Selected or Unselected state (not Custom)
if (
chip.state === "Selected" ||
chip.state === "Unselected"
chip.state === "selected" ||
chip.state === "unselected"
) {
setCustomChips((prev) =>
prev.map((c) =>
@@ -631,9 +630,9 @@ export default function ComponentsPreview() {
? {
...c,
state:
c.state === "Selected"
? "Unselected"
: "Selected",
c.state === "selected"
? "unselected"
: "selected",
}
: c,
),
@@ -652,9 +651,9 @@ export default function ComponentsPreview() {
{
id: newId,
label: "",
state: "Custom",
palette: "Default",
size: "S",
state: "custom",
palette: "default",
size: "s",
},
]);
}}
@@ -698,38 +697,38 @@ export default function ComponentsPreview() {
<Chip
label="Small"
state={chipStates["inverse-s"]}
palette="Inverse"
size="S"
palette="inverse"
size="s"
onClick={() =>
setChipStates((prev) => ({
...prev,
"inverse-s":
prev["inverse-s"] === "Selected"
? "Unselected"
: "Selected",
prev["inverse-s"] === "selected"
? "unselected"
: "selected",
}))
}
/>
<Chip
label="Medium"
state={chipStates["inverse-m"]}
palette="Inverse"
size="M"
palette="inverse"
size="m"
onClick={() =>
setChipStates((prev) => ({
...prev,
"inverse-m":
prev["inverse-m"] === "Selected"
? "Unselected"
: "Selected",
prev["inverse-m"] === "selected"
? "unselected"
: "selected",
}))
}
/>
<Chip
label="Disabled"
state="Disabled"
palette="Inverse"
size="S"
state="disabled"
palette="inverse"
size="s"
/>
</div>
</div>
@@ -959,10 +958,10 @@ export default function ComponentsPreview() {
</h2>
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
{/* Small size */}
<MultiSelectExample size="S" />
<MultiSelectExample size="s" />
{/* Medium size */}
<MultiSelectExample size="M" />
<MultiSelectExample size="m" />
</div>
</section>
</div>
app/(dev)/layout.tsx
+7
View File
@@ -0,0 +1,7 @@
import type { ReactNode } from "react";
// Development-only previews (e.g. `/components-preview`) — no public chrome.
// Routes here are gated by NODE_ENV checks at the page level.
export default function DevLayout({ children }: { children: ReactNode }) {
return <main className="flex-1">{children}</main>;
}