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

Create InputLabel component and add RuleCard chips

Browse Source
This commit is contained in:
adilallo
2026-02-05 09:25:42 -07:00
parent 3e935ecd9e
commit 0dedebfaf8
12 changed files with 638 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/RuleCard/RuleCard.container.tsx
-4
View File
@@ -29,8 +29,6 @@ const RuleCardContainer = memo<RuleCardProps>(
expanded = false,
size: sizeProp,
categories,
onPillClick,
onCreateClick,
logoUrl,
logoAlt,
communityInitials,
@@ -77,8 +75,6 @@ const RuleCardContainer = memo<RuleCardProps>(
expanded={expanded}
size={size}
categories={categories}
onPillClick={onPillClick}
onCreateClick={onCreateClick}
logoUrl={logoUrl}
logoAlt={logoAlt}
communityInitials={communityInitials}
app/components/RuleCard/RuleCard.types.ts
+7 -6
View File
@@ -1,7 +1,12 @@
import type { ChipOption } from "../MultiSelect/MultiSelect.types";
export interface Category {
name: string;
items: string[];
createUrl?: string;
chipOptions: ChipOption[];
onChipClick?: (categoryName: string, chipId: string) => void;
onAddClick?: (categoryName: string) => void;
onCustomChipConfirm?: (categoryName: string, chipId: string, value: string) => void;
onCustomChipClose?: (categoryName: string, chipId: string) => void;
}
export interface RuleCardProps {
@@ -14,8 +19,6 @@ export interface RuleCardProps {
expanded?: boolean;
size?: "L" | "M" | "l" | "m";
categories?: Category[];
onPillClick?: (category: string, item: string) => void;
onCreateClick?: (category: string) => void;
logoUrl?: string;
logoAlt?: string;
communityInitials?: string;
@@ -32,8 +35,6 @@ export interface RuleCardViewProps {
expanded: boolean;
size: "L" | "M";
categories?: Category[];
onPillClick?: (category: string, item: string) => void;
onCreateClick?: (category: string) => void;
logoUrl?: string;
logoAlt?: string;
communityInitials?: string;
app/components/RuleCard/RuleCard.view.tsx
+25 -52
View File
@@ -2,6 +2,7 @@
import Image from "next/image";
import { useTranslation } from "../../contexts/MessagesContext";
import MultiSelect from "../MultiSelect";
import type { RuleCardViewProps } from "./RuleCard.types";
export function RuleCardView({
@@ -15,8 +16,6 @@ export function RuleCardView({
expanded,
size,
categories,
onPillClick,
onCreateClick,
logoUrl,
logoAlt,
communityInitials,
@@ -111,21 +110,6 @@ export function RuleCardView({
return null;
};
// Handle pill click with stopPropagation
const handlePillClick = (e: React.MouseEvent<HTMLButtonElement>, categoryName: string, item: string) => {
e.stopPropagation();
if (onPillClick) {
onPillClick(categoryName, item);
}
};
// Handle create button click with stopPropagation
const handleCreateClick = (e: React.MouseEvent<HTMLButtonElement>, categoryName: string) => {
e.stopPropagation();
if (onCreateClick) {
onCreateClick(categoryName);
}
};
return (
<div
@@ -157,44 +141,33 @@ export function RuleCardView({
{expanded ? (
<>
{/* Categories Section */}
{/* Categories Section - Using MultiSelect */}
{categories && categories.length > 0 && (
<div className="flex flex-col gap-[16px] items-start px-[12px] relative shrink-0 w-full">
{categories.map((category, categoryIndex) => (
<div key={categoryIndex} className="flex flex-col gap-[var(--spacing-scale-008)] items-start relative shrink-0 w-full">
{/* Category Label */}
<div className="flex items-baseline gap-[var(--spacing-scale-008)] pr-[var(--spacing-scale-004)] relative shrink-0 w-full">
<h4 className={`${categoryLabelClass} text-[var(--color-content-inverse-primary)]`}>
{category.name}
</h4>
</div>
{/* Pills Container */}
<div className="flex flex-wrap gap-[var(--spacing-scale-008)] items-center relative shrink-0 w-full">
{/* Pills */}
{category.items && category.items.map((item, itemIndex) => (
<button
key={itemIndex}
type="button"
className="bg-transparent border-[1.25px] border-[var(--color-content-inverse-primary)] h-[30px] px-[var(--spacing-scale-008)] rounded-[var(--radius-measures-radius-full)] flex items-center justify-center shrink-0 cursor-pointer"
onClick={(e) => handlePillClick(e, category.name, item)}
aria-label={`Edit ${item}`}
>
<span className={`${pillTextClass} text-[var(--color-content-inverse-primary)]`}>
{item}
</span>
</button>
))}
{/* Add Button */}
<button
type="button"
className="bg-transparent border-[1.25px] border-[var(--color-content-inverse-primary)] size-[30px] rounded-[var(--radius-measures-radius-full)] flex items-center justify-center shrink-0 cursor-pointer"
onClick={(e) => handleCreateClick(e, category.name)}
aria-label={`Add new ${category.name}`}
>
<span className="text-[var(--color-content-inverse-primary)] text-[14px] leading-[14px]">+</span>
</button>
</div>
</div>
<MultiSelect
key={categoryIndex}
label={category.name}
showHelpIcon={false}
size="S"
palette="Inverse"
options={category.chipOptions}
onChipClick={(chipId) => {
category.onChipClick?.(category.name, chipId);
}}
onAddClick={() => {
category.onAddClick?.(category.name);
}}
onCustomChipConfirm={(chipId, value) => {
category.onCustomChipConfirm?.(category.name, chipId, value);
}}
onCustomChipClose={(chipId) => {
category.onCustomChipClose?.(category.name, chipId);
}}
showAddButton={true}
addButtonText="" // Empty text for icon-only circular button
className="w-full"
/>
))}
</div>
)}