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
function MultiSelectExample({ size }: { size: "S" | "M" }) {
const [options, setOptions] = useState([
{ id: "1", label: "1 member", state: "Unselected" as const },
{ id: "2", label: "2-10 members", state: "Unselected" as const },
{ id: "3", label: "10-24 members", state: "Unselected" as const },
{ id: "4", label: "24-64 members", state: "Unselected" as const },
{ id: "5", label: "64-128 members", state: "Unselected" as const },
{ id: "6", label: "125-1000 members", state: "Unselected" as const },
{ id: "7", label: "1000+ members", state: "Unselected" as const },
const [options, setOptions] = useState<Array<{ id: string; label: string; 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" },
]);
const handleChipClick = (chipId: string) => {
@@ -33,7 +33,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
opt.id === chipId
? {
...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
state: opt.state === "Selected" ? "Unselected" : "Selected",
}
: opt
)
@@ -44,7 +44,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
const newId = `custom-${Date.now()}`;
setOptions((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() {
const [expandedCard, setExpandedCard] = useState<string | null>(null);
const [chipStates, setChipStates] = useState<Record<string, "Unselected" | "Selected">>({
"default-s": "Unselected",
"default-m": "Unselected",
@@ -98,15 +97,22 @@ export default function ComponentsPreview() {
]);
// 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",
chipOptions: [
{ id: "values-1", label: "Consciousness", state: "Unselected" as const },
{ id: "values-2", label: "Ecology", state: "Unselected" as const },
{ id: "values-3", label: "Abundance", state: "Unselected" as const },
{ id: "values-4", label: "Art", state: "Unselected" as const },
{ id: "values-5", label: "Decisiveness", state: "Unselected" as const },
{ 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) =>
@@ -118,7 +124,7 @@ export default function ComponentsPreview() {
opt.id === chipId
? {
...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
state: opt.state === "Selected" ? "Unselected" : "Selected",
}
: opt
),
@@ -136,7 +142,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const },
{ id: newId, label: "", state: "Custom" },
],
}
: cat
@@ -151,7 +157,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" as const }
? { ...opt, label: value, state: "Selected" }
: opt
),
}
@@ -175,7 +181,7 @@ export default function ComponentsPreview() {
{
name: "Communication",
chipOptions: [
{ id: "comm-1", label: "Signal", state: "Unselected" as const },
{ id: "comm-1", label: "Signal", state: "Unselected" },
],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
@@ -187,7 +193,7 @@ export default function ComponentsPreview() {
opt.id === chipId
? {
...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
state: opt.state === "Selected" ? "Unselected" : "Selected",
}
: opt
),
@@ -205,7 +211,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const },
{ id: newId, label: "", state: "Custom" },
],
}
: cat
@@ -220,7 +226,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" as const }
? { ...opt, label: value, state: "Selected" }
: opt
),
}
@@ -244,7 +250,7 @@ export default function ComponentsPreview() {
{
name: "Membership",
chipOptions: [
{ id: "membership-1", label: "Open Admission", state: "Unselected" as const },
{ id: "membership-1", label: "Open Admission", state: "Unselected" },
],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
@@ -256,7 +262,7 @@ export default function ComponentsPreview() {
opt.id === chipId
? {
...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
state: opt.state === "Selected" ? "Unselected" : "Selected",
}
: opt
),
@@ -274,7 +280,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const },
{ id: newId, label: "", state: "Custom" },
],
}
: cat
@@ -289,7 +295,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" as const }
? { ...opt, label: value, state: "Selected" }
: opt
),
}
@@ -313,8 +319,8 @@ export default function ComponentsPreview() {
{
name: "Decision-making",
chipOptions: [
{ id: "decision-1", label: "Lazy Consensus", state: "Unselected" as const },
{ id: "decision-2", label: "Modified Consensus", state: "Unselected" as const },
{ id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
{ id: "decision-2", label: "Modified Consensus", state: "Unselected" },
],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
@@ -326,7 +332,7 @@ export default function ComponentsPreview() {
opt.id === chipId
? {
...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
state: opt.state === "Selected" ? "Unselected" : "Selected",
}
: opt
),
@@ -344,7 +350,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const },
{ id: newId, label: "", state: "Custom" },
],
}
: cat
@@ -359,7 +365,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" as const }
? { ...opt, label: value, state: "Selected" }
: opt
),
}
@@ -383,8 +389,8 @@ export default function ComponentsPreview() {
{
name: "Conflict management",
chipOptions: [
{ id: "conflict-1", label: "Code of Conduct", state: "Unselected" as const },
{ id: "conflict-2", label: "Restorative Justice", state: "Unselected" as const },
{ id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
{ id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
],
onChipClick: (categoryName: string, chipId: string) => {
setRuleCardCategories((prev) =>
@@ -396,7 +402,7 @@ export default function ComponentsPreview() {
opt.id === chipId
? {
...opt,
state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
state: opt.state === "Selected" ? "Unselected" : "Selected",
}
: opt
),
@@ -414,7 +420,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: [
...cat.chipOptions,
{ id: newId, label: "", state: "Custom" as const },
{ id: newId, label: "", state: "Custom" },
],
}
: cat
@@ -429,7 +435,7 @@ export default function ComponentsPreview() {
...cat,
chipOptions: cat.chipOptions.map((opt) =>
opt.id === chipId
? { ...opt, label: value, state: "Selected" as const }
? { ...opt, label: value, state: "Selected" }
: opt
),
}
@@ -520,7 +526,7 @@ export default function ComponentsPreview() {
setCustomChips((prev) =>
prev.map((c) =>
c.id === chip.id
? { ...c, label: value, state: "Selected" as const }
? { ...c, label: value, state: "Selected" }
: c
)
);
@@ -538,7 +544,7 @@ export default function ComponentsPreview() {
c.id === chip.id
? {
...c,
state: c.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
state: c.state === "Selected" ? "Unselected" : "Selected",
}
: c
)
app/components/AskOrganizer/AskOrganizer.container.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import type {
import { normalizeAskOrganizerVariant } from "../../../lib/propNormalization";
const VARIANT_STYLES: Record<
AskOrganizerVariant,
"centered" | "left-aligned" | "compact" | "inverse",
{ container: string; buttonContainer: string }
> = {
centered: {
app/components/Checkbox/Checkbox.types.ts
+1 -1
View File
@@ -30,7 +30,7 @@ export interface CheckboxViewProps {
labelId: string;
checked: boolean;
mode: "standard" | "inverse";
state: "default" | "hover" | "focus";
state: "default" | "hover" | "focus" | "selected";
disabled: boolean;
label?: string;
name?: string;
app/components/Chip/Chip.view.tsx
+2 -2
View File
@@ -134,12 +134,12 @@ function ChipView({
.filter(Boolean)
.join(" ");
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
if (isDisabled) {
event.preventDefault();
return;
}
onClick?.(event);
onClick?.(event as React.MouseEvent<HTMLButtonElement>);
};
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 {
id: string;
app/components/RadioGroup/RadioGroup.types.ts
+1 -1
View File
@@ -32,7 +32,7 @@ export interface RadioGroupViewProps {
groupId: string;
value?: string;
mode: "standard" | "inverse";
state: "default" | "hover" | "focus";
state: "default" | "hover" | "focus" | "selected";
disabled: boolean;
options: RadioOption[];
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
// Use a large default (90px) and let CSS handle responsive sizing
const iconSize = 90;
// Card data
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
const _labelVariant = labelVariantProp ? normalizeLabelVariant(labelVariantProp) : undefined;
const _size = sizeProp ? normalizeSmallMediumLargeSize(sizeProp) : undefined;
// Mark as intentionally unused for future implementation
void _labelVariant;
void _size;
const externalState = normalizeState(externalStateProp);
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 {
label?: string;
placeholder: string;
state: "default" | "active" | "hover" | "focus";
state: "default" | "active" | "hover" | "focus" | "selected";
disabled: boolean;
error: boolean;
className: string;
app/components/Switch/Switch.types.ts
+1 -1
View File
@@ -24,7 +24,7 @@ export interface SwitchProps extends Omit<
export interface SwitchViewProps {
switchId: string;
checked: boolean;
state: "default" | "hover" | "focus";
state: "default" | "hover" | "focus" | "selected";
label?: string;
className: string;
switchClasses: string;
app/components/Toggle/Toggle.types.ts
+1 -1
View File
@@ -31,7 +31,7 @@ export interface ToggleViewProps {
labelId: string;
checked: boolean;
disabled: boolean;
state: "default" | "hover" | "focus";
state: "default" | "hover" | "focus" | "selected";
label?: string;
showIcon: boolean;
showText: boolean;
lib/propNormalization.ts
+2 -2
View File
@@ -142,13 +142,13 @@ export function normalizeVariant(
*/
export function normalizeSize(
value: string | undefined,
defaultValue: "xsmall" = "xsmall"
defaultValue: "xsmall" | "small" | "medium" | "large" | "xlarge" = "xsmall"
): "xsmall" | "small" | "medium" | "large" | "xlarge" {
if (!value) return defaultValue;
const normalized = value.toLowerCase();
const sizes = ["xsmall", "small", "medium", "large", "xlarge"];
if (sizes.includes(normalized)) {
return normalized as typeof defaultValue;
return normalized as "xsmall" | "small" | "medium" | "large" | "xlarge";
}
return defaultValue;
}