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

Completed template

Browse Source
This commit is contained in:
adilallo
2026-03-02 22:12:50 -07:00
parent d811b87b12
commit 3e3d2881f5
103 changed files with 1410 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/utility/AvatarContainer.tsx
+9 -1
View File
@@ -1,7 +1,15 @@
import { memo } from "react";
import { normalizeSize } from "../../../lib/propNormalization";
export type AvatarContainerSizeValue = "small" | "medium" | "large" | "xlarge" | "Small" | "Medium" | "Large" | "XLarge";
export type AvatarContainerSizeValue =
| "small"
| "medium"
| "large"
| "xlarge"
| "Small"
| "Medium"
| "Large"
| "XLarge";
interface AvatarContainerProps extends React.HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
app/components/utility/CardStack/CardStack.container.tsx
+6 -2
View File
@@ -24,7 +24,9 @@ const CardStackContainer = memo<CardStackProps>(
className = "",
}) => {
const [internalExpanded, setInternalExpanded] = useState(false);
const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>([]);
const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>(
[],
);
const expanded =
controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
@@ -41,7 +43,9 @@ const CardStackContainer = memo<CardStackProps>(
controlledSelectedIds !== undefined
? controlledSelectedIds
: controlledSelectedId !== undefined
? (controlledSelectedId ? [controlledSelectedId] : [])
? controlledSelectedId
? [controlledSelectedId]
: []
: internalSelectedIds;
const handleCardSelect = useCallback(
app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
+1 -3
View File
@@ -36,9 +36,7 @@ export function CreateFlowFooterView({
</Button>
{/* Second Button - Right */}
{secondButton && (
<div className="flex-shrink-0">{secondButton}</div>
)}
{secondButton && <div className="flex-shrink-0">{secondButton}</div>}
</div>
</footer>
);
app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
+2
View File
@@ -15,6 +15,7 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
onExport,
onEdit,
onExit,
buttonPalette,
className = "",
}) => {
const router = useRouter();
@@ -38,6 +39,7 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
onExport={onExport}
onEdit={onEdit}
onExit={handleExit}
buttonPalette={buttonPalette}
className={className}
/>
);
app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts
+6 -1
View File
@@ -1,6 +1,6 @@
/**
* Type definitions for CreateFlowTopNav component
*
*
* Top navigation bar for the create rule flow.
* Includes logo and action buttons (Share, Export, Edit, Exit).
*/
@@ -42,6 +42,11 @@ export interface CreateFlowTopNavProps {
* Callback when Exit/Save & Exit button is clicked
*/
onExit?: () => void;
/**
* Palette for nav buttons (e.g. "inverse" on completed page to match teal background)
* @default "default"
*/
buttonPalette?: "default" | "inverse";
/**
* Additional CSS classes
*/
app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
+7 -6
View File
@@ -1,4 +1,4 @@
import Logo from "../../icons/Logo";
import Logo from "../../asset/logo";
import Button from "../../buttons/Button";
import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
@@ -11,6 +11,7 @@ export function CreateFlowTopNavView({
onExport,
onEdit,
onExit,
buttonPalette = "default",
className = "",
}: CreateFlowTopNavProps) {
const exitButtonText = loggedIn ? "Save & Exit" : "Exit";
@@ -27,14 +28,14 @@ export function CreateFlowTopNavView({
aria-label="Create Flow Navigation"
>
{/* Logo - Left */}
<Logo size="createFlow" showText={true} />
<Logo size="createFlow" wordmark palette={buttonPalette} />
{/* Button Group - Right */}
<div className="flex items-center gap-[var(--spacing-scale-012,12px)]">
{hasShare && (
<Button
buttonType="outline"
palette="default"
palette={buttonPalette}
size="xsmall"
onClick={onShare}
ariaLabel="Share"
@@ -47,7 +48,7 @@ export function CreateFlowTopNavView({
{hasExport && (
<Button
buttonType="outline"
palette="default"
palette={buttonPalette}
size="xsmall"
onClick={onExport}
ariaLabel="Export"
@@ -74,7 +75,7 @@ export function CreateFlowTopNavView({
{hasEdit && (
<Button
buttonType="outline"
palette="default"
palette={buttonPalette}
size="xsmall"
onClick={onEdit}
ariaLabel="Edit"
@@ -86,7 +87,7 @@ export function CreateFlowTopNavView({
<Button
buttonType="outline"
palette="default"
palette={buttonPalette}
size="xsmall"
onClick={onExit}
ariaLabel={exitButtonText}
app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts
+3 -1
View File
@@ -24,7 +24,9 @@ export interface DecisionMakingSidebarViewProps {
messageBoxTitle: string;
messageBoxItems: InfoMessageBoxItem[];
messageBoxCheckedIds: string[] | undefined;
onMessageBoxCheckboxChange: ((id: string, checked: boolean) => void) | undefined;
onMessageBoxCheckboxChange:
| ((id: string, checked: boolean) => void)
| undefined;
size: "L" | "M";
justification: "left" | "center";
className: string;
app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx
+1 -3
View File
@@ -53,9 +53,7 @@ function DecisionMakingSidebarView({
className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
isLeft ? "" : "text-center"
} ${
isL
? "text-[18px] leading-[1.3]"
: "text-[14px] leading-[20px]"
isL ? "text-[18px] leading-[1.3]" : "text-[14px] leading-[20px]"
}`}
>
{description}
app/components/utility/InfoMessageBox/index.tsx
+4 -1
View File
@@ -1,2 +1,5 @@
export { default } from "./InfoMessageBox.container";
export type { InfoMessageBoxProps, InfoMessageBoxItem } from "./InfoMessageBox.types";
export type {
InfoMessageBoxProps,
InfoMessageBoxItem,
} from "./InfoMessageBox.types";
app/components/utility/InputLabel/InputLabel.types.ts
+5 -1
View File
@@ -1,5 +1,9 @@
export type InputLabelSizeValue = "S" | "M" | "s" | "m";
export type InputLabelPaletteValue = "Default" | "Inverse" | "default" | "inverse";
export type InputLabelPaletteValue =
| "Default"
| "Inverse"
| "default"
| "inverse";
export interface InputLabelProps {
/**
app/components/utility/InputLabel/InputLabel.view.tsx
+2 -1
View File
@@ -34,7 +34,8 @@ function InputLabelView({
? "text-[color:var(--color-content-inverse-secondary,#1f1f1f)]"
: "text-[color:var(--color-content-default-secondary,#d2d2d2)]";
const helperTextColor = "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
const helperTextColor =
"text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
// Layout: S uses flex-wrap with baseline, M uses flex with center
const containerClass = isSmall
app/components/utility/ModalFooter/ModalFooter.view.tsx
+11 -5
View File
@@ -24,12 +24,13 @@ export function ModalFooterView({
// Use localized defaults if text not provided
const defaultBackText = backButtonText || t("buttons.back");
const defaultNextText = nextButtonText || t("buttons.next");
// Determine if stepper should be shown
// Defaults to true if currentStep and totalSteps are provided, unless explicitly set to false
const shouldShowStepper = stepperProp !== undefined
? stepperProp
: (currentStep !== undefined && totalSteps !== undefined);
const shouldShowStepper =
stepperProp !== undefined
? stepperProp
: currentStep !== undefined && totalSteps !== undefined;
return (
<div
@@ -38,7 +39,12 @@ export function ModalFooterView({
{/* Back Button - Absolutely positioned bottom left */}
{showBackButton && (
<div className="absolute left-[16px] top-[12px]">
<Button buttonType="outline" palette="default" size="medium" onClick={onBack}>
<Button
buttonType="outline"
palette="default"
size="medium"
onClick={onBack}
>
{defaultBackText}
</Button>
</div>
app/components/utility/Tag/Tag.container.tsx
+8 -10
View File
@@ -9,16 +9,14 @@ const DEFAULT_LABELS: Record<TagProps["variant"], string> = {
selected: "SELECTED",
};
const TagContainer = memo<TagProps>(
({ variant, children, className = "" }) => {
const content = children ?? DEFAULT_LABELS[variant];
return (
<TagView variant={variant} className={className}>
{content}
</TagView>
);
},
);
const TagContainer = memo<TagProps>(({ variant, children, className = "" }) => {
const content = children ?? DEFAULT_LABELS[variant];
return (
<TagView variant={variant} className={className}>
{content}
</TagView>
);
});
TagContainer.displayName = "Tag";