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

Update and resolve test issues

Browse Source
This commit is contained in:
adilallo
2026-02-05 17:45:57 -07:00
parent b012c73e65
commit 794b978aab
12 changed files with 60 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components-preview/page.tsx
+46 -40
View File
@@ -17,14 +17,14 @@ interface ChipData {
// MultiSelect example component with state management // MultiSelect example component with state management
function MultiSelectExample({ size }: { size: "S" | "M" }) { function MultiSelectExample({ size }: { size: "S" | "M" }) {
const [options, setOptions] = useState([ const [options, setOptions] = useState<Array<{ id: string; label: string; state: "Unselected" | "Selected" | "Custom" }>>([
{ id: "1", label: "1 member", state: "Unselected" as const }, { id: "1", label: "1 member", state: "Unselected" },
{ id: "2", label: "2-10 members", state: "Unselected" as const }, { id: "2", label: "2-10 members", state: "Unselected" },
{ id: "3", label: "10-24 members", state: "Unselected" as const }, { id: "3", label: "10-24 members", state: "Unselected" },
{ id: "4", label: "24-64 members", state: "Unselected" as const }, { id: "4", label: "24-64 members", state: "Unselected" },
{ id: "5", label: "64-128 members", state: "Unselected" as const }, { id: "5", label: "64-128 members", state: "Unselected" },
{ id: "6", label: "125-1000 members", state: "Unselected" as const }, { id: "6", label: "125-1000 members", state: "Unselected" },
{ id: "7", label: "1000+ members", state: "Unselected" as const }, { id: "7", label: "1000+ members", state: "Unselected" },
]); ]);
const handleChipClick = (chipId: string) => { const handleChipClick = (chipId: string) => {
@@ -33,7 +33,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
opt.id === chipId opt.id === chipId
? { ? {
...opt, ...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const), state: opt.state === "Selected" ? "Unselected" : "Selected",
} }
: opt : opt
) )
@@ -44,7 +44,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
const newId = `custom-${Date.now()}`; const newId = `custom-${Date.now()}`;
setOptions((prev) => [ setOptions((prev) => [
...prev, ...prev,
{ id: newId, label: "", state: "Custom" as const }, { id: newId, label: "", state: "Custom" },
]); ]);
}; };
@@ -83,7 +83,6 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
} }
export default function ComponentsPreview() { export default function ComponentsPreview() {
const [expandedCard, setExpandedCard] = useState<string | null>(null);
const [chipStates, setChipStates] = useState<Record<string, "Unselected" | "Selected">>({ const [chipStates, setChipStates] = useState<Record<string, "Unselected" | "Selected">>({
"default-s": "Unselected", "default-s": "Unselected",
"default-m": "Unselected", "default-m": "Unselected",
@@ -98,15 +97,22 @@ export default function ComponentsPreview() {
]); ]);
// RuleCard categories with chip options and state management // RuleCard categories with chip options and state management
const [ruleCardCategories, setRuleCardCategories] = useState([ const [ruleCardCategories, setRuleCardCategories] = useState<Array<{
name: string;
chipOptions: Array<{ id: string; label: string; state: "Unselected" | "Selected" | "Custom" }>;
onChipClick?: (categoryName: string, chipId: string) => void;
onAddClick?: (categoryName: string) => void;
onCustomChipConfirm?: (categoryName: string, chipId: string, value: string) => void;
onCustomChipClose?: (categoryName: string, chipId: string) => void;
}>>([
{ {
name: "Values", name: "Values",
chipOptions: [ chipOptions: [
{ id: "values-1", label: "Consciousness", state: "Unselected" as const }, { id: "values-1", label: "Consciousness", state: "Unselected" },
{ id: "values-2", label: "Ecology", state: "Unselected" as const }, { id: "values-2", label: "Ecology", state: "Unselected" },
{ id: "values-3", label: "Abundance", state: "Unselected" as const }, { id: "values-3", label: "Abundance", state: "Unselected" },
{ id: "values-4", label: "Art", state: "Unselected" as const }, { id: "values-4", label: "Art", state: "Unselected" },
{ id: "values-5", label: "Decisiveness", state: "Unselected" as const }, { id: "values-5", label: "Decisiveness", state: "Unselected" },
], ],
onChipClick: (categoryName: string, chipId: string) => { onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) => setRuleCardCategories((prev) =>
@@ -118,7 +124,7 @@ export default function ComponentsPreview() {
opt.id === chipId opt.id === chipId
? { ? {
...opt, ...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const), state: opt.state === "Selected" ? "Unselected" : "Selected",
} }
: opt : opt
), ),
@@ -136,7 +142,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: [ chipOptions: [
...cat.chipOptions, ...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const }, { id: newId, label: "", state: "Custom" },
], ],
} }
: cat : cat
@@ -151,7 +157,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: cat.chipOptions.map((opt) => chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId opt.id === chipId
? { ...opt, label: value, state: "Selected" as const } ? { ...opt, label: value, state: "Selected" }
: opt : opt
), ),
} }
@@ -175,7 +181,7 @@ export default function ComponentsPreview() {
{ {
name: "Communication", name: "Communication",
chipOptions: [ chipOptions: [
{ id: "comm-1", label: "Signal", state: "Unselected" as const }, { id: "comm-1", label: "Signal", state: "Unselected" },
], ],
onChipClick: (categoryName: string, chipId: string) => { onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) => setRuleCardCategories((prev) =>
@@ -187,7 +193,7 @@ export default function ComponentsPreview() {
opt.id === chipId opt.id === chipId
? { ? {
...opt, ...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const), state: opt.state === "Selected" ? "Unselected" : "Selected",
} }
: opt : opt
), ),
@@ -205,7 +211,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: [ chipOptions: [
...cat.chipOptions, ...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const }, { id: newId, label: "", state: "Custom" },
], ],
} }
: cat : cat
@@ -220,7 +226,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: cat.chipOptions.map((opt) => chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId opt.id === chipId
? { ...opt, label: value, state: "Selected" as const } ? { ...opt, label: value, state: "Selected" }
: opt : opt
), ),
} }
@@ -244,7 +250,7 @@ export default function ComponentsPreview() {
{ {
name: "Membership", name: "Membership",
chipOptions: [ chipOptions: [
{ id: "membership-1", label: "Open Admission", state: "Unselected" as const }, { id: "membership-1", label: "Open Admission", state: "Unselected" },
], ],
onChipClick: (categoryName: string, chipId: string) => { onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) => setRuleCardCategories((prev) =>
@@ -256,7 +262,7 @@ export default function ComponentsPreview() {
opt.id === chipId opt.id === chipId
? { ? {
...opt, ...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const), state: opt.state === "Selected" ? "Unselected" : "Selected",
} }
: opt : opt
), ),
@@ -274,7 +280,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: [ chipOptions: [
...cat.chipOptions, ...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const }, { id: newId, label: "", state: "Custom" },
], ],
} }
: cat : cat
@@ -289,7 +295,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: cat.chipOptions.map((opt) => chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId opt.id === chipId
? { ...opt, label: value, state: "Selected" as const } ? { ...opt, label: value, state: "Selected" }
: opt : opt
), ),
} }
@@ -313,8 +319,8 @@ export default function ComponentsPreview() {
{ {
name: "Decision-making", name: "Decision-making",
chipOptions: [ chipOptions: [
{ id: "decision-1", label: "Lazy Consensus", state: "Unselected" as const }, { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
{ id: "decision-2", label: "Modified Consensus", state: "Unselected" as const }, { id: "decision-2", label: "Modified Consensus", state: "Unselected" },
], ],
onChipClick: (categoryName: string, chipId: string) => { onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) => setRuleCardCategories((prev) =>
@@ -326,7 +332,7 @@ export default function ComponentsPreview() {
opt.id === chipId opt.id === chipId
? { ? {
...opt, ...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const), state: opt.state === "Selected" ? "Unselected" : "Selected",
} }
: opt : opt
), ),
@@ -344,7 +350,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: [ chipOptions: [
...cat.chipOptions, ...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const }, { id: newId, label: "", state: "Custom" },
], ],
} }
: cat : cat
@@ -359,7 +365,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: cat.chipOptions.map((opt) => chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId opt.id === chipId
? { ...opt, label: value, state: "Selected" as const } ? { ...opt, label: value, state: "Selected" }
: opt : opt
), ),
} }
@@ -383,8 +389,8 @@ export default function ComponentsPreview() {
{ {
name: "Conflict management", name: "Conflict management",
chipOptions: [ chipOptions: [
{ id: "conflict-1", label: "Code of Conduct", state: "Unselected" as const }, { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
{ id: "conflict-2", label: "Restorative Justice", state: "Unselected" as const }, { id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
], ],
onChipClick: (categoryName: string, chipId: string) => { onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) => setRuleCardCategories((prev) =>
@@ -396,7 +402,7 @@ export default function ComponentsPreview() {
opt.id === chipId opt.id === chipId
? { ? {
...opt, ...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const), state: opt.state === "Selected" ? "Unselected" : "Selected",
} }
: opt : opt
), ),
@@ -414,7 +420,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: [ chipOptions: [
...cat.chipOptions, ...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const }, { id: newId, label: "", state: "Custom" },
], ],
} }
: cat : cat
@@ -429,7 +435,7 @@ export default function ComponentsPreview() {
...cat, ...cat,
chipOptions: cat.chipOptions.map((opt) => chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId opt.id === chipId
? { ...opt, label: value, state: "Selected" as const } ? { ...opt, label: value, state: "Selected" }
: opt : opt
), ),
} }
@@ -520,7 +526,7 @@ export default function ComponentsPreview() {
setCustomChips((prev) => setCustomChips((prev) =>
prev.map((c) => prev.map((c) =>
c.id === chip.id c.id === chip.id
? { ...c, label: value, state: "Selected" as const } ? { ...c, label: value, state: "Selected" }
: c : c
) )
); );
@@ -538,7 +544,7 @@ export default function ComponentsPreview() {
c.id === chip.id c.id === chip.id
? { ? {
...c, ...c,
state: c.state === "Selected" ? ("Unselected" as const) : ("Selected" as const), state: c.state === "Selected" ? "Unselected" : "Selected",
} }
: c : c
) )
app/components/AskOrganizer/AskOrganizer.container.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import type {
import { normalizeAskOrganizerVariant } from "../../../lib/propNormalization"; import { normalizeAskOrganizerVariant } from "../../../lib/propNormalization";
const VARIANT_STYLES: Record< const VARIANT_STYLES: Record<
AskOrganizerVariant, "centered" | "left-aligned" | "compact" | "inverse",
{ container: string; buttonContainer: string } { container: string; buttonContainer: string }
> = { > = {
centered: { centered: {
app/components/Checkbox/Checkbox.types.ts
+1 -1
View File
@@ -30,7 +30,7 @@ export interface CheckboxViewProps {
labelId: string; labelId: string;
checked: boolean; checked: boolean;
mode: "standard" | "inverse"; mode: "standard" | "inverse";
state: "default" | "hover" | "focus"; state: "default" | "hover" | "focus" | "selected";
disabled: boolean; disabled: boolean;
label?: string; label?: string;
name?: string; name?: string;
app/components/Chip/Chip.view.tsx
+2 -2
View File
@@ -134,12 +134,12 @@ function ChipView({
.filter(Boolean) .filter(Boolean)
.join(" "); .join(" ");
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => { const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
if (isDisabled) { if (isDisabled) {
event.preventDefault(); event.preventDefault();
return; return;
} }
onClick?.(event); onClick?.(event as React.MouseEvent<HTMLButtonElement>);
}; };
const sharedA11y = { const sharedA11y = {
app/components/MultiSelect/MultiSelect.types.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import type { ChipStateValue, ChipSizeValue, ChipPaletteValue } from "../../../lib/propNormalization"; import type { ChipStateValue, ChipPaletteValue } from "../../../lib/propNormalization";
export interface ChipOption { export interface ChipOption {
id: string; id: string;
app/components/RadioGroup/RadioGroup.types.ts
+1 -1
View File
@@ -32,7 +32,7 @@ export interface RadioGroupViewProps {
groupId: string; groupId: string;
value?: string; value?: string;
mode: "standard" | "inverse"; mode: "standard" | "inverse";
state: "default" | "hover" | "focus"; state: "default" | "hover" | "focus" | "selected";
disabled: boolean; disabled: boolean;
options: RadioOption[]; options: RadioOption[];
className: string; className: string;
app/components/RuleStack/RuleStack.view.tsx
-1
View File
@@ -48,7 +48,6 @@ export function RuleStackView({
// Icon sizes: XS=40px, S=56px, M=56px, L=90px // Icon sizes: XS=40px, S=56px, M=56px, L=90px
// Use a large default (90px) and let CSS handle responsive sizing // Use a large default (90px) and let CSS handle responsive sizing
const iconSize = 90;
// Card data // Card data
const cards = [ const cards = [
app/components/SelectInput/SelectInput.container.tsx
+3
View File
@@ -42,6 +42,9 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
// Note: labelVariant and size are normalized for future use but not yet implemented in the view // Note: labelVariant and size are normalized for future use but not yet implemented in the view
const _labelVariant = labelVariantProp ? normalizeLabelVariant(labelVariantProp) : undefined; const _labelVariant = labelVariantProp ? normalizeLabelVariant(labelVariantProp) : undefined;
const _size = sizeProp ? normalizeSmallMediumLargeSize(sizeProp) : undefined; const _size = sizeProp ? normalizeSmallMediumLargeSize(sizeProp) : undefined;
// Mark as intentionally unused for future implementation
void _labelVariant;
void _size;
const externalState = normalizeState(externalStateProp); const externalState = normalizeState(externalStateProp);
const generatedId = useId(); const generatedId = useId();
app/components/SelectInput/SelectInput.view.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import type { SelectOptionData } from "./SelectInput.types";
export interface SelectInputViewProps { export interface SelectInputViewProps {
label?: string; label?: string;
placeholder: string; placeholder: string;
state: "default" | "active" | "hover" | "focus"; state: "default" | "active" | "hover" | "focus" | "selected";
disabled: boolean; disabled: boolean;
error: boolean; error: boolean;
className: string; className: string;
app/components/Switch/Switch.types.ts
+1 -1
View File
@@ -24,7 +24,7 @@ export interface SwitchProps extends Omit<
export interface SwitchViewProps { export interface SwitchViewProps {
switchId: string; switchId: string;
checked: boolean; checked: boolean;
state: "default" | "hover" | "focus"; state: "default" | "hover" | "focus" | "selected";
label?: string; label?: string;
className: string; className: string;
switchClasses: string; switchClasses: string;
app/components/Toggle/Toggle.types.ts
+1 -1
View File
@@ -31,7 +31,7 @@ export interface ToggleViewProps {
labelId: string; labelId: string;
checked: boolean; checked: boolean;
disabled: boolean; disabled: boolean;
state: "default" | "hover" | "focus"; state: "default" | "hover" | "focus" | "selected";
label?: string; label?: string;
showIcon: boolean; showIcon: boolean;
showText: boolean; showText: boolean;
lib/propNormalization.ts
+2 -2
View File
@@ -142,13 +142,13 @@ export function normalizeVariant(
*/ */
export function normalizeSize( export function normalizeSize(
value: string | undefined, value: string | undefined,
defaultValue: "xsmall" = "xsmall" defaultValue: "xsmall" | "small" | "medium" | "large" | "xlarge" = "xsmall"
): "xsmall" | "small" | "medium" | "large" | "xlarge" { ): "xsmall" | "small" | "medium" | "large" | "xlarge" {
if (!value) return defaultValue; if (!value) return defaultValue;
const normalized = value.toLowerCase(); const normalized = value.toLowerCase();
const sizes = ["xsmall", "small", "medium", "large", "xlarge"]; const sizes = ["xsmall", "small", "medium", "large", "xlarge"];
if (sizes.includes(normalized)) { if (sizes.includes(normalized)) {
return normalized as typeof defaultValue; return normalized as "xsmall" | "small" | "medium" | "large" | "xlarge";
} }
return defaultValue; return defaultValue;
} }