{extractInitials(props.name ?? "")}
;
+ const className = avatar(props);
+ if (props.src) {
+ return {extractInitials(props.name ?? "")}
;
}
function extractInitials(name: string) {
- const words = name.split(" ");
- if (words.length === 2) {
- return words
- .map((word) => word[0])
- .join("")
- .toUpperCase();
- }
- return name.substring(0, 2).toUpperCase();
+ const words = name.split(" ");
+ if (words.length === 2) {
+ return words
+ .map(word => word[0])
+ .join("")
+ .toUpperCase();
+ }
+ return name.substring(0, 2).toUpperCase();
}
diff --git a/packages/ui/src/Atoms/Badge/Badge.stories.tsx b/packages/ui/src/Atoms/Badge/Badge.stories.tsx
index 377e8b74b..f4d81aebb 100644
--- a/packages/ui/src/Atoms/Badge/Badge.stories.tsx
+++ b/packages/ui/src/Atoms/Badge/Badge.stories.tsx
@@ -2,41 +2,43 @@ import { Badge } from "./Badge";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Badge",
- component: Badge,
- argTypes: {},
+ title: "Atoms/Badge",
+ component: Badge,
+ argTypes: {},
} satisfies Meta
- {sizes.map((size) => (
- ;
type Story = StoryObj;
export const Default: Story = {
- args: {
- items: [
- {
- label: "Home",
- to: "/",
- },
- {
- label: "Library",
- to: "/library",
- },
- {
- label: "Data",
- to: "/data",
- },
- ],
- },
+ args: {
+ items: [
+ {
+ label: "Home",
+ to: "/",
+ },
+ {
+ label: "Library",
+ to: "/library",
+ },
+ {
+ label: "Data",
+ to: "/data",
+ },
+ ],
+ },
};
diff --git a/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.tsx b/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.tsx
index b4f438d24..110bf75e2 100644
--- a/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.tsx
+++ b/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.tsx
@@ -4,48 +4,48 @@ import { IconChevronRight } from "../Icons";
import { Fragment } from "react/jsx-runtime";
type Props = {
- items: (ItemProps | string)[];
+ items: (ItemProps | string)[];
};
type ItemProps = {
- label: string;
- to?: string;
- active?: boolean;
+ label: string;
+ to?: string;
+ active?: boolean;
};
export function Breadcrumb({ items }: Props) {
- return (
- ;
type Story = StoryObj;
const variants = [
- "primary",
- "secondary",
- "tertiary",
- "quaternary",
- "danger",
+ "primary",
+ "secondary",
+ "tertiary",
+ "quaternary",
+ "danger",
] as const;
export const Default: Story = {
- render() {
- return (
-
-> &
- (
- | ButtonHTMLAttributes
- | AnchorHTMLAttributes
+ {
+ icon?: FC<{ size: number; className?: string }>;
+ iconAfter?: FC<{ size: number; className?: string }>;
+ disabled?: boolean;
+ onClick?: () => void;
+ variant?:
+ | "primary"
+ | "secondary"
+ | "tertiary"
+ | "quaternary"
+ | "danger";
+ to?: string;
+ asChild?: boolean;
+ } & VariantProps
+>
+& (
+ | ButtonHTMLAttributes
+ | AnchorHTMLAttributes
);
export const Button = (props: Props) => {
- const {
- icon: IconComponent,
- iconAfter: IconAfterComponent,
- children,
- onClick,
- variant,
- asChild,
- ...componentProps
- } = props;
- if (asChild) {
- return (
-
- {children}
-
- );
- }
-
- const Component = props.to ? Link : "button";
+ const {
+ icon: IconComponent,
+ iconAfter: IconAfterComponent,
+ children,
+ onClick,
+ variant,
+ asChild,
+ ...componentProps
+ } = props;
+ if (asChild) {
return (
- // @ts-expect-error Component is too dynamic
-
- {IconComponent &&
+
+ {children}
+
);
+ }
+
+ const Component = props.to ? Link : "button";
+ return (
+ // @ts-expect-error Component is too dynamic
+
+ {IconComponent &&
+ );
};
diff --git a/packages/ui/src/Atoms/Card/Card.stories.tsx b/packages/ui/src/Atoms/Card/Card.stories.tsx
index 02d07eaab..3ef1f694e 100644
--- a/packages/ui/src/Atoms/Card/Card.stories.tsx
+++ b/packages/ui/src/Atoms/Card/Card.stories.tsx
@@ -2,16 +2,16 @@ import { Card } from "./Card";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Card",
- component: Card,
- argTypes: {},
+ title: "Atoms/Card",
+ component: Card,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
export const Default: Story = {
- args: {
- padded: true,
- children: "lorem ipsum",
- },
+ args: {
+ padded: true,
+ children: "lorem ipsum",
+ },
};
diff --git a/packages/ui/src/Atoms/Card/Card.tsx b/packages/ui/src/Atoms/Card/Card.tsx
index abe6710ff..f934d5128 100644
--- a/packages/ui/src/Atoms/Card/Card.tsx
+++ b/packages/ui/src/Atoms/Card/Card.tsx
@@ -3,32 +3,32 @@ import { tv } from "tailwind-variants";
import { Slot } from "../Slot";
type Props = PropsWithChildren<{
- padded?: boolean;
- className?: string;
- style?: CSSProperties;
- asChild?: boolean;
+ padded?: boolean;
+ className?: string;
+ style?: CSSProperties;
+ asChild?: boolean;
}>;
const card = tv({
- base: "border border-border-low bg-level-1 rounded-2xl",
- variants: {
- padded: {
- true: "p-4",
- },
+ base: "border border-border-low bg-level-1 rounded-2xl",
+ variants: {
+ padded: {
+ true: "p-4",
},
+ },
});
export function Card({
- padded = false,
- children,
- className,
- asChild,
- style,
+ padded = false,
+ children,
+ className,
+ asChild,
+ style,
}: Props) {
- const Component = asChild ? Slot : "div";
- return (
-
- {children}
-
- );
+ const Component = asChild ? Slot : "div";
+ return (
+
+ {children}
+
+ );
}
diff --git a/packages/ui/src/Atoms/Checkbox/Checkbox.stories.tsx b/packages/ui/src/Atoms/Checkbox/Checkbox.stories.tsx
index 7758b76ba..fffb3f926 100644
--- a/packages/ui/src/Atoms/Checkbox/Checkbox.stories.tsx
+++ b/packages/ui/src/Atoms/Checkbox/Checkbox.stories.tsx
@@ -2,9 +2,9 @@ import { Checkbox } from "./Checkbox";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Checkbox",
- component: Checkbox,
- argTypes: {},
+ title: "Atoms/Checkbox",
+ component: Checkbox,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
diff --git a/packages/ui/src/Atoms/Checkbox/Checkbox.tsx b/packages/ui/src/Atoms/Checkbox/Checkbox.tsx
index f60db0f3f..0d705d51f 100644
--- a/packages/ui/src/Atoms/Checkbox/Checkbox.tsx
+++ b/packages/ui/src/Atoms/Checkbox/Checkbox.tsx
@@ -3,40 +3,40 @@ import { tv } from "tailwind-variants";
import { IconCheckmark1 } from "../Icons";
type Props = {
- checked: boolean;
- onChange: (checked: boolean) => void;
- disabled?: boolean;
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+ disabled?: boolean;
};
const checkbox = tv({
- base: "size-4 border border-border-mid relative rounded-sm flex items-center justify-center",
- variants: {
- isFocused: {
- true: "shadow shadow-focus",
- },
- checked: {
- true: "bg-accent text-invert",
- },
- disabled: {
- true: "opacity-50 cursor-not-allowed",
- },
+ base: "size-4 border border-border-mid relative rounded-sm flex items-center justify-center",
+ variants: {
+ isFocused: {
+ true: "shadow shadow-focus",
},
+ checked: {
+ true: "bg-accent text-invert",
+ },
+ disabled: {
+ true: "opacity-50 cursor-not-allowed",
+ },
+ },
});
export function Checkbox({ checked, onChange, disabled = false }: Props) {
- const [isFocused, setFocus] = useState(false);
- return (
- ;
type Story = StoryObj;
export const Default: Story = {
- args: {
- id: "CC1.1",
- description:
+ args: {
+ id: "CC1.1",
+ description:
"The entity obtains privacy commitments from vendors and other third parties who have access to personal information to meet the entity’s objectives related to privacy. The entity assesses those parties’ compliance on a periodic and as-needed basis and takes corrective action, if necessary.",
- },
- render: (args) => (
- ;
const classNames = tv({
- slots: {
- wrapper: "block p-4 space-y-[6px] rounded-xl cursor-pointer text-start",
- id: "px-[6px] py-[2px] text-base font-medium border border-border-low rounded-lg w-max",
- description: "text-sm text-txt-tertiary line-clamp-3",
+ slots: {
+ wrapper: "block p-4 space-y-[6px] rounded-xl cursor-pointer text-start",
+ id: "px-[6px] py-[2px] text-base font-medium border border-border-low rounded-lg w-max",
+ description: "text-sm text-txt-tertiary line-clamp-3",
+ },
+ variants: {
+ active: {
+ true: {
+ wrapper: "bg-tertiary-pressed",
+ id: "bg-active",
+ },
+ false: {
+ wrapper: "hover:bg-tertiary-hover",
+ id: "bg-highlight",
+ },
},
- variants: {
- active: {
- true: {
- wrapper: "bg-tertiary-pressed",
- id: "bg-active",
- },
- false: {
- wrapper: "hover:bg-tertiary-hover",
- id: "bg-highlight",
- },
- },
- excluded: {
- true: {
- wrapper: "opacity-60",
- },
- false: {
- wrapper: "",
- },
- },
+ excluded: {
+ true: {
+ wrapper: "opacity-60",
+ },
+ false: {
+ wrapper: "",
+ },
},
- compoundVariants: [
- {
- active: true,
- excluded: true,
- class: {
- wrapper: "bg-tertiary-pressed opacity-60",
- id: "bg-active",
- },
- },
- ],
- defaultVariants: {
- active: false,
- excluded: false,
+ },
+ compoundVariants: [
+ {
+ active: true,
+ excluded: true,
+ class: {
+ wrapper: "bg-tertiary-pressed opacity-60",
+ id: "bg-active",
+ },
},
+ ],
+ defaultVariants: {
+ active: false,
+ excluded: false,
+ },
});
export function ControlItem({ active, id, description, excluded, to, ...props }: Props) {
- const {
- wrapper,
- id: idCls,
- description: descriptionCls,
- } = classNames({
- active,
- excluded,
- });
+ const {
+ wrapper,
+ id: idCls,
+ description: descriptionCls,
+ } = classNames({
+ active,
+ excluded,
+ });
- const ref = useRef(null);
+ const ref = useRef(null);
- // Make the active element scroll into view when selected
- useEffect(() => {
- if (ref.current && active) {
- ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
- }
- }, [active]);
+ // Make the active element scroll into view when selected
+ useEffect(() => {
+ if (ref.current && active) {
+ ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
+ }
+ }, [active]);
- return (
-
- >) {
- const Component = asChild ? Slot : "div";
- return (
- ;
type Story = StoryObj;
export const Default: Story = {
- render: () => {
- return (
- Dropdown}>
-
- Item 1
-
-
- Item 2
-
-
- Item 3
-
-
- );
- },
+ render: () => {
+ return (
+ Dropdown}>
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+ );
+ },
};
diff --git a/packages/ui/src/Atoms/Dropdown/Dropdown.tsx b/packages/ui/src/Atoms/Dropdown/Dropdown.tsx
index 4153f1df2..97ec76fb0 100644
--- a/packages/ui/src/Atoms/Dropdown/Dropdown.tsx
+++ b/packages/ui/src/Atoms/Dropdown/Dropdown.tsx
@@ -7,111 +7,113 @@ import { IconDotGrid1x3Horizontal } from "../Icons";
import { Button } from "../Button/Button.tsx";
type Props = PropsWithChildren<{
- toggle?: ReactNode;
- className?: string;
- open?: boolean;
- onOpenChange?: (open: boolean) => void;
+ toggle?: ReactNode;
+ className?: string;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
}>;
export const dropdown = tv({
- base: "z-50 p-2 shadow-mid min-w-[8rem] bg-level-1 overflow-y-auto overflow-x-hidden rounded-2xl border-border-low",
+ base: "z-50 p-2 shadow-mid min-w-[8rem] bg-level-1 overflow-y-auto overflow-x-hidden rounded-2xl border-border-low",
});
export function Dropdown({ children, toggle, className, open, onOpenChange }: Props) {
- return (
-
- {toggle && (
- {toggle}
- )}
-
-
+ {toggle && (
+ {toggle}
+ )}
+
+
- {children}
-
-
-
- );
+ }}
+ className={dropdown({ className })}
+ sideOffset={5}
+ >
+ {children}
+
+
+
+ );
}
export function DropdownSeparator({ className }: { className?: string }) {
- return (
- ;
- asChild?: boolean;
- variant?: "primary" | "tertiary" | "danger";
-}> &
- ComponentProps;
+ className?: string;
+ icon?: FC;
+ asChild?: boolean;
+ variant?: "primary" | "tertiary" | "danger";
+}>
+& ComponentProps;
export const dropdownItem = tv({
- base: "text-txt-primary flex items-center gap-2 hover:bg-tertiary-hover active:bg-tertiary-pressed data-active-item:bg-tertiary-pressed cursor-pointer p-2",
- variants: {
- variant: {
- primary: "text-txt-primary",
- tertiary: "text-txt-tertiary",
- danger: "text-txt-danger",
- },
- },
- defaultVariants: {
- variant: "primary",
+ base: "text-txt-primary flex items-center gap-2 hover:bg-tertiary-hover active:bg-tertiary-pressed data-active-item:bg-tertiary-pressed cursor-pointer p-2",
+ variants: {
+ variant: {
+ primary: "text-txt-primary",
+ tertiary: "text-txt-tertiary",
+ danger: "text-txt-danger",
},
+ },
+ defaultVariants: {
+ variant: "primary",
+ },
});
export function ActionDropdown(
- props: Omit & {
- variant?: ComponentProps["variant"];
- },
+ props: Omit & {
+ variant?: ComponentProps["variant"];
+ },
) {
- return (
-
- {asChild ? (
- children
- ) : (
- <>
- {IconComponent && (
-
- );
+ return (
+
+ {asChild
+ ? (
+ children
+ )
+ : (
+ <>
+ {IconComponent && (
+
+ );
}
diff --git a/packages/ui/src/Atoms/Dropzone/Dropzone.stories.tsx b/packages/ui/src/Atoms/Dropzone/Dropzone.stories.tsx
index dd88e22b0..3128d6c04 100644
--- a/packages/ui/src/Atoms/Dropzone/Dropzone.stories.tsx
+++ b/packages/ui/src/Atoms/Dropzone/Dropzone.stories.tsx
@@ -2,31 +2,31 @@ import { Dropzone } from "./Dropzone";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Dropzone",
- component: Dropzone,
- argTypes: {},
+ title: "Atoms/Dropzone",
+ component: Dropzone,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
export const Default: Story = {
- args: {
- description: "Maximum 500 MB file size",
- isUploading: false,
- disabled: false,
- },
+ args: {
+ description: "Maximum 500 MB file size",
+ isUploading: false,
+ disabled: false,
+ },
};
export const Disabled: Story = {
- args: {
- ...Default.args,
- disabled: true,
- },
+ args: {
+ ...Default.args,
+ disabled: true,
+ },
};
export const Uploading: Story = {
- args: {
- ...Default.args,
- isUploading: true,
- },
+ args: {
+ ...Default.args,
+ isUploading: true,
+ },
};
diff --git a/packages/ui/src/Atoms/Dropzone/Dropzone.tsx b/packages/ui/src/Atoms/Dropzone/Dropzone.tsx
index b8bf0fb2f..b9187d276 100644
--- a/packages/ui/src/Atoms/Dropzone/Dropzone.tsx
+++ b/packages/ui/src/Atoms/Dropzone/Dropzone.tsx
@@ -7,121 +7,125 @@ import { IconPageCross, IconUpload } from "../Icons";
import { Spinner } from "../Spinner/Spinner";
type Props = {
- description: string;
- isUploading: boolean;
- disabled?: boolean;
- accept?: Record;
- maxSize?: number; // maxSize in MB
- onDrop: (acceptedFiles: File[]) => void;
+ description: string;
+ isUploading: boolean;
+ disabled?: boolean;
+ accept?: Record;
+ maxSize?: number; // maxSize in MB
+ onDrop: (acceptedFiles: File[]) => void;
};
export const dropzone = tv({
- slots: {
- wrapper:
+ slots: {
+ wrapper:
"bg-subtle border border border-border-low p-2 rounded-[20px] outline-none focus-visible:shadow-focus",
- zone: "bg-secondary min-h-46 border border-border-low border-dashed rounded-2xl flex items-center justify-center",
- title: "flex gap-2 text-sm font-medium text-center justify-center",
- description: "text-xs text-txt-tertiary text-center",
+ zone: "bg-secondary min-h-46 border border-border-low border-dashed rounded-2xl flex items-center justify-center",
+ title: "flex gap-2 text-sm font-medium text-center justify-center",
+ description: "text-xs text-txt-tertiary text-center",
+ },
+ variants: {
+ isDragActive: {
+ true: {
+ wrapper: "border-border-success shadow-focus",
+ zone: "border-border-success",
+ },
},
- variants: {
- isDragActive: {
- true: {
- wrapper: "border-border-success shadow-focus",
- zone: "border-border-success",
- },
- },
- hasError: {
- true: {
- wrapper: "bg-danger",
- zone: "bg-invert",
- title: "text-txt-danger",
- description: "text-txt-danger",
- },
- },
- disabled: {
- true: {
- wrapper: "opacity-60 cursor-default",
- zone: "bg-highlight",
- },
- false: {
- zone: "hover:bg-secondary-hover",
- },
- },
+ hasError: {
+ true: {
+ wrapper: "bg-danger",
+ zone: "bg-invert",
+ title: "text-txt-danger",
+ description: "text-txt-danger",
+ },
},
- defaultVariants: {
- isDragActive: false,
- disabled: false,
- hasError: false,
+ disabled: {
+ true: {
+ wrapper: "opacity-60 cursor-default",
+ zone: "bg-highlight",
+ },
+ false: {
+ zone: "hover:bg-secondary-hover",
+ },
},
+ },
+ defaultVariants: {
+ isDragActive: false,
+ disabled: false,
+ hasError: false,
+ },
});
const MB = 1024 * 1024;
export function Dropzone(props: Props) {
- const { __ } = useTranslate();
- const onDropRef = useRefSync(props.onDrop);
- const onDrop = useCallback(
- (files: File[]) => {
- onDropRef.current(files);
- },
- [onDropRef],
- );
- const { getRootProps, getInputProps, isDragActive, fileRejections } =
- useDropzone({
- disabled: props.disabled || props.isUploading,
- accept: props.accept,
- onDrop,
- maxSize: props.maxSize ? props.maxSize * MB : undefined,
- });
- const error = getDropzoneError(__, fileRejections);
- const { wrapper, zone, title, description } = dropzone({
- ...props,
- isDragActive,
- hasError: !!error,
+ const { __ } = useTranslate();
+ const onDropRef = useRefSync(props.onDrop);
+ const onDrop = useCallback(
+ (files: File[]) => {
+ onDropRef.current(files);
+ },
+ [onDropRef],
+ );
+ const { getRootProps, getInputProps, isDragActive, fileRejections }
+ = useDropzone({
+ disabled: props.disabled || props.isUploading,
+ accept: props.accept,
+ onDrop,
+ maxSize: props.maxSize ? props.maxSize * MB : undefined,
});
+ const error = getDropzoneError(__, fileRejections);
+ const { wrapper, zone, title, description } = dropzone({
+ ...props,
+ isDragActive,
+ hasError: !!error,
+ });
- return (
- 
- )}
- {darkLogoURL && (
- 
- )}
+ {lightLogoURL && (
+
+ )}
+ {darkLogoURL && (
+
+ )}
- ) : (
+ )
+ : (
;
type Story = StoryObj;
export const Default: Story = {
- args: {
- state: "TODO",
- },
+ args: {
+ state: "TODO",
+ },
};
export const Done: Story = {
- args: {
- state: "DONE",
- },
+ args: {
+ state: "DONE",
+ },
};
diff --git a/packages/ui/src/Atoms/Icons/TaskStateIcon.tsx b/packages/ui/src/Atoms/Icons/TaskStateIcon.tsx
index 28967cb74..8264ce8ff 100644
--- a/packages/ui/src/Atoms/Icons/TaskStateIcon.tsx
+++ b/packages/ui/src/Atoms/Icons/TaskStateIcon.tsx
@@ -2,13 +2,15 @@ import { IconCircleProgress } from "./IconCircleProgress";
import { IconRadioUnchecked } from "./IconRadioUnchecked";
type Props = {
- state: "TODO" | "DONE";
+ state: "TODO" | "DONE";
};
export function TaskStateIcon({ state }: Props) {
- return state === "TODO" ? (
+ return state === "TODO"
+ ? (
;
type Story = StoryObj;
export const Default: Story = {
- args: {
- onView: () => {},
- },
+ args: {
+ onView: () => {},
+ },
};
diff --git a/packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx b/packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx
index b72c1edbb..7994b8902 100644
--- a/packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx
+++ b/packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx
@@ -5,32 +5,32 @@ import { useInView } from "react-intersection-observer";
import { Spinner } from "../Spinner/Spinner";
type Props = {
- children?: ReactNode;
- onView: () => void;
- loading?: boolean;
+ children?: ReactNode;
+ onView: () => void;
+ loading?: boolean;
};
export function InfiniteScrollTrigger({ children, onView, loading }: Props) {
- const { __ } = useTranslate();
- const { ref, inView } = useInView({
- threshold: 0,
- });
- const onViewRef = useRefSync(onView);
- useEffect(() => {
- if (inView && !loading) onViewRef.current();
- }, [inView, loading, onViewRef]);
+ const { __ } = useTranslate();
+ const { ref, inView } = useInView({
+ threshold: 0,
+ });
+ const onViewRef = useRefSync(onView);
+ useEffect(() => {
+ if (inView && !loading) onViewRef.current();
+ }, [inView, loading, onViewRef]);
- return (
- ;
type Story = StoryObj;
@@ -12,14 +12,14 @@ type Story = StoryObj;
export const Default: Story = {};
export const Disabled: Story = {
- args: {
- disabled: true,
- },
+ args: {
+ disabled: true,
+ },
};
export const Title: Story = {
- args: {
- variant: "title",
- placeholder: "Policy title",
- },
+ args: {
+ variant: "title",
+ placeholder: "Policy title",
+ },
};
diff --git a/packages/ui/src/Atoms/Input/Input.tsx b/packages/ui/src/Atoms/Input/Input.tsx
index f2a24ef56..ffcefb86d 100644
--- a/packages/ui/src/Atoms/Input/Input.tsx
+++ b/packages/ui/src/Atoms/Input/Input.tsx
@@ -3,77 +3,77 @@ import { tv } from "tailwind-variants";
import type { IconProps } from "../Icons/type";
type Props = {
- invalid?: boolean;
- disabled?: boolean;
- icon?: FC;
- onValueChange?: (value: string) => void;
- variant?: "bordered" | "ghost" | "title";
+ invalid?: boolean;
+ disabled?: boolean;
+ icon?: FC;
+ onValueChange?: (value: string) => void;
+ variant?: "bordered" | "ghost" | "title";
} & InputHTMLAttributes;
export const input = tv({
- base: "w-full disabled:bg-transparent",
- variants: {
- invalid: {
- true: "border-border-danger",
- },
- variant: {
- bordered:
+ base: "w-full disabled:bg-transparent",
+ variants: {
+ invalid: {
+ true: "border-border-danger",
+ },
+ variant: {
+ bordered:
"py-[6px] bg-secondary border border-border-mid rounded-[10px] hover:border-border-strong text-sm px-3 text-txt-primary",
- ghost: "text-base text-txt-secondary outline-none",
- title: "text-2xl font-semibold text-txt-primary outline-none",
- },
- },
- defaultVariants: {
- variant: "bordered",
+ ghost: "text-base text-txt-secondary outline-none",
+ title: "text-2xl font-semibold text-txt-primary outline-none",
},
+ },
+ defaultVariants: {
+ variant: "bordered",
+ },
});
export function Input({
- invalid,
- icon: IconComponent,
- onValueChange,
- ...props
+ invalid,
+ icon: IconComponent,
+ onValueChange,
+ ...props
}: Props) {
- const [focus, setFocus] = useState(false);
+ const [focus, setFocus] = useState(false);
- if (IconComponent) {
- return (
- ;
type Story = StoryObj;
diff --git a/packages/ui/src/Atoms/Label/Label.tsx b/packages/ui/src/Atoms/Label/Label.tsx
index 4c013227d..0ed22af22 100644
--- a/packages/ui/src/Atoms/Label/Label.tsx
+++ b/packages/ui/src/Atoms/Label/Label.tsx
@@ -5,9 +5,9 @@ import { Label as RadixLabel } from "@radix-ui/react-label";
type Props = ComponentProps;
const label = tv({
- base: "block text-sm font-medium text-txt-primary mb-[6px]",
+ base: "block text-sm font-medium text-txt-primary mb-[6px]",
});
export function Label({ ...props }: Props) {
- return ;
export default meta;
diff --git a/packages/ui/src/Atoms/Logo/Logo.tsx b/packages/ui/src/Atoms/Logo/Logo.tsx
index 34cc65192..cb8e1ddff 100644
--- a/packages/ui/src/Atoms/Logo/Logo.tsx
+++ b/packages/ui/src/Atoms/Logo/Logo.tsx
@@ -2,85 +2,85 @@ import clsx from "clsx";
import { useId } from "react";
type Props = {
- className?: string;
- withPicto?: boolean;
+ className?: string;
+ withPicto?: boolean;
};
export function Logo({ className, withPicto }: Props) {
- const id = useId();
- if (withPicto) {
- return (
-
- );
- }
+ const id = useId();
+ if (withPicto) {
return (
-
+
+
+
);
+ }
+ return (
+
+ );
}
diff --git a/packages/ui/src/Atoms/Markdown/Markdown.stories.tsx b/packages/ui/src/Atoms/Markdown/Markdown.stories.tsx
index 21b011bec..b1f399099 100644
--- a/packages/ui/src/Atoms/Markdown/Markdown.stories.tsx
+++ b/packages/ui/src/Atoms/Markdown/Markdown.stories.tsx
@@ -2,16 +2,16 @@ import { Markdown } from "./Markdown";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Markdown",
- component: Markdown,
- argTypes: {},
+ title: "Atoms/Markdown",
+ component: Markdown,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
export const Default: Story = {
- args: {
- content: `# Siquis facies post
+ args: {
+ content: `# Siquis facies post
## Venit Ianigenam egressus a tamen terra frater
@@ -71,5 +71,5 @@ Fecissem quem degravat quibus movere inmotus sacer Iovem, sic *urbis mala
quoque*. Tereu ut tuos sed recessit petit patriaeque subit palude subposuere
certum: tempora, telisque. In quaesitique habitavit nostris Scylaceaque potest
omnia pastoribus meminisse ignara. Sed pando functaque perenni gemitus tibi.`,
- },
+ },
};
diff --git a/packages/ui/src/Atoms/Markdown/Markdown.tsx b/packages/ui/src/Atoms/Markdown/Markdown.tsx
index 22101aafb..3d55fcc04 100644
--- a/packages/ui/src/Atoms/Markdown/Markdown.tsx
+++ b/packages/ui/src/Atoms/Markdown/Markdown.tsx
@@ -3,43 +3,43 @@ import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
type Props = {
- content: string;
+ content: string;
};
export function Markdown({ content }: Props) {
- return (
- ;
type Story = StoryObj;
export const Default: Story = {
- args: {
- level: 1,
- },
+ args: {
+ level: 1,
+ },
};
diff --git a/packages/ui/src/Atoms/PriorityLevel/PriorityLevel.tsx b/packages/ui/src/Atoms/PriorityLevel/PriorityLevel.tsx
index f0b75c704..543840fa7 100644
--- a/packages/ui/src/Atoms/PriorityLevel/PriorityLevel.tsx
+++ b/packages/ui/src/Atoms/PriorityLevel/PriorityLevel.tsx
@@ -1,30 +1,30 @@
import clsx from "clsx";
type Props = {
- level: number;
+ level: number;
};
export function PriorityLevel({ level }: Props) {
- return (
-
-
+ render: () => (
+
- Size : {size}
-
-
- {variants.map((variant) => (
-
- {variant}
-
- ))}
-
-
+ {sizes.map(size => (
+
+ ),
};
diff --git a/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.stories.tsx b/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.stories.tsx
index 467350fef..174a92ed0 100644
--- a/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.stories.tsx
+++ b/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.stories.tsx
@@ -2,28 +2,28 @@ import { Breadcrumb } from "./Breadcrumb";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Breadcrumb",
- component: Breadcrumb,
- argTypes: {},
+ title: "Atoms/Breadcrumb",
+ component: Breadcrumb,
+ argTypes: {},
} satisfies Meta
+
- ),
+ ))}
+
+ Size :
+ {" "}
+ {size}
+
+
+ {variants.map(variant => (
+
+ {variant}
+
))}
+
- {items.map((item, k) => (
-
- {k > 0 &&
- ))}
-
- );
+ return (
+
+ {items.map((item, k) => (
+
+ {k > 0 &&
+ ))}
+
+ );
}
function BreadcrumbItem({ label, to, active }: ItemProps) {
- const className = clsx(
- "text-sm px-1 rounded-sm h-5",
- active && "text-txt-primary font-medium",
+ const className = clsx(
+ "text-sm px-1 rounded-sm h-5",
+ active && "text-txt-primary font-medium",
+ );
+ if (to) {
+ return (
+
+ {label}
+
);
- if (to) {
- return (
-
- {label}
-
- );
- }
- return {label};
+ }
+ return {label};
}
diff --git a/packages/ui/src/Atoms/Button/Button.stories.tsx b/packages/ui/src/Atoms/Button/Button.stories.tsx
index 02b602457..bb2046c2f 100644
--- a/packages/ui/src/Atoms/Button/Button.stories.tsx
+++ b/packages/ui/src/Atoms/Button/Button.stories.tsx
@@ -3,52 +3,52 @@ import { Button } from "./Button";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Button",
- component: Button,
- argTypes: {},
+ title: "Atoms/Button",
+ component: Button,
+ argTypes: {},
} satisfies Meta
- {variants.map((variant) => (
-
- );
- },
+ render() {
+ return (
+
-
-
-
-
- ))}
-
+ {variants.map(variant => (
+
+ );
+ },
};
diff --git a/packages/ui/src/Atoms/Button/Button.tsx b/packages/ui/src/Atoms/Button/Button.tsx
index 702aabc07..aa863622a 100644
--- a/packages/ui/src/Atoms/Button/Button.tsx
+++ b/packages/ui/src/Atoms/Button/Button.tsx
@@ -1,96 +1,96 @@
import type {
- AnchorHTMLAttributes,
- ButtonHTMLAttributes,
- FC,
- PropsWithChildren,
+ AnchorHTMLAttributes,
+ ButtonHTMLAttributes,
+ FC,
+ PropsWithChildren,
} from "react";
import { Link } from "react-router";
import { tv, type VariantProps } from "tailwind-variants";
import { Slot } from "../Slot";
export const button = tv({
- base: "flex items-center justify-center gap-[6px] px-3 py-2 rounded-full cursor-pointer text-sm font-medium h-8 focus:outline-none whitespace-nowrap w-max",
- variants: {
- variant: {
- primary:
+ base: "flex items-center justify-center gap-[6px] px-3 py-2 rounded-full cursor-pointer text-sm font-medium h-8 focus:outline-none whitespace-nowrap w-max",
+ variants: {
+ variant: {
+ primary:
"bg-primary text-invert hover:bg-primary-hover shadow-base hover:shadow-hover active:bg-primary-pressed",
- secondary:
+ secondary:
"bg-secondary text-txt-primary hover:bg-secondary-hover shadow-base hover:shadow-hover active:bg-secondary-pressed border border-border-low",
- tertiary:
+ tertiary:
"bg-tertiary text-txt-primary hover:bg-tertiary-hover active:bg-tertiary-pressed",
- quaternary:
+ quaternary:
"bg-highlight text-txt-primary hover:bg-highlight-hover active:bg-highlight-pressed",
- danger: "bg-danger-plain text-txt-invert hover:bg-danger-hover shadow-base hover:shadow-hover active:bg-danger-pressed border border-border-danger",
- },
- disabled: {
- true: "opacity-60 cursor-default",
- },
- empty: {
- true: "p-2 size-8",
- },
+ danger: "bg-danger-plain text-txt-invert hover:bg-danger-hover shadow-base hover:shadow-hover active:bg-danger-pressed border border-border-danger",
},
- defaultVariants: {
- variant: "primary",
- icon: false,
- children: undefined,
+ disabled: {
+ true: "opacity-60 cursor-default",
},
+ empty: {
+ true: "p-2 size-8",
+ },
+ },
+ defaultVariants: {
+ variant: "primary",
+ icon: false,
+ children: undefined,
+ },
});
type Props = PropsWithChildren<
- {
- icon?: FC<{ size: number; className?: string }>;
- iconAfter?: FC<{ size: number; className?: string }>;
- disabled?: boolean;
- onClick?: () => void;
- variant?:
- | "primary"
- | "secondary"
- | "tertiary"
- | "quaternary"
- | "danger";
- to?: string;
- asChild?: boolean;
- } & VariantProps
+
+
+
+
+ ))}
+
- !disabled && onChange(e.target.checked)}
- onFocus={() => !disabled && setFocus(true)}
- onBlur={() => setFocus(false)}
- />
- {checked &&
- );
+ const [isFocused, setFocus] = useState(false);
+ return (
+
+ !disabled && onChange(e.target.checked)}
+ onFocus={() => !disabled && setFocus(true)}
+ onBlur={() => setFocus(false)}
+ />
+ {checked &&
+ );
}
diff --git a/packages/ui/src/Atoms/ControlItem/ControlItem.stories.tsx b/packages/ui/src/Atoms/ControlItem/ControlItem.stories.tsx
index 0a8ab1f2b..a690bd73e 100644
--- a/packages/ui/src/Atoms/ControlItem/ControlItem.stories.tsx
+++ b/packages/ui/src/Atoms/ControlItem/ControlItem.stories.tsx
@@ -2,26 +2,26 @@ import { ControlItem } from "./ControlItem";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/ControlItem",
- component: ControlItem,
- argTypes: {},
+ title: "Atoms/ControlItem",
+ component: ControlItem,
+ argTypes: {},
} satisfies Meta
-
- ),
+ },
+ render: args => (
+
+
+ ),
};
diff --git a/packages/ui/src/Atoms/ControlItem/ControlItem.tsx b/packages/ui/src/Atoms/ControlItem/ControlItem.tsx
index f55abbc13..8be1933b4 100644
--- a/packages/ui/src/Atoms/ControlItem/ControlItem.tsx
+++ b/packages/ui/src/Atoms/ControlItem/ControlItem.tsx
@@ -3,78 +3,78 @@ import { Link } from "react-router";
import { tv } from "tailwind-variants";
type Props = {
- active?: boolean;
- id: string;
- description?: string;
- excluded?: boolean;
- to: string;
+ active?: boolean;
+ id: string;
+ description?: string;
+ excluded?: boolean;
+ to: string;
} & HTMLAttributes{id}
- {description}
-
- );
+ return (
+
+ {id}
+ {description}
+
+ );
}
diff --git a/packages/ui/src/Atoms/DataTable/DataTable.tsx b/packages/ui/src/Atoms/DataTable/DataTable.tsx
index f57fe9647..e1e4accb9 100644
--- a/packages/ui/src/Atoms/DataTable/DataTable.tsx
+++ b/packages/ui/src/Atoms/DataTable/DataTable.tsx
@@ -1,8 +1,8 @@
import {
- type ComponentPropsWithRef,
- type FC,
- type PropsWithChildren,
- type ReactNode,
+ type ComponentPropsWithRef,
+ type FC,
+ type PropsWithChildren,
+ type ReactNode,
} from "react";
import { Card } from "../Card/Card";
import clsx from "clsx";
@@ -10,100 +10,100 @@ import { type AsChildProps, Slot } from "../Slot.tsx";
import { IconPlusLarge } from "../Icons";
export function DataTable({
- children,
- className,
- columns,
+ children,
+ className,
+ columns,
}: PropsWithChildren<{ className?: string; columns: number | string[] }>) {
- const style = () => {
- if (typeof columns === "number") {
- return {
- gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
- };
- }
- return {
- gridTemplateColumns: columns.join(" "),
- };
+ const style = () => {
+ if (typeof columns === "number") {
+ return {
+ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+ };
+ }
+ return {
+ gridTemplateColumns: columns.join(" "),
};
+ };
- return (
-
-
- {children}
-
-
- );
+ return (
+
+
+ {children}
+
+
+ );
}
export function CellHead({
- children,
- className,
- ...props
+ children,
+ className,
+ ...props
}: ComponentPropsWithRef<"div">) {
- return (
-
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
export function Row(props: ComponentPropsWithRef<"div">) {
- return ;
+ return ;
}
export function Cell({
- asChild,
- ...props
+ asChild,
+ ...props
}: AsChildProps
-
- );
+ return (
+
-
- {props.isUploading ? (
-
-
-
- ) : (
-
-
- )}
-
- {error ? (
-
- {props.description}
-
+
+ );
}
function getDropzoneError(
- __: (s: string) => string,
- fileRejections: readonly FileRejection[],
+ __: (s: string) => string,
+ fileRejections: readonly FileRejection[],
) {
- if (fileRejections.length === 0) {
- return null;
- }
+ if (fileRejections.length === 0) {
+ return null;
+ }
- const code = fileRejections[0].errors[0].code;
- switch (code) {
- case "file-invalid-type":
- return __("This file is not supported");
- case "file-too-large":
- return __("This file is too large");
- default:
- return __("Something went wrong");
- }
+ const code = fileRejections[0].errors[0].code;
+ switch (code) {
+ case "file-invalid-type":
+ return __("This file is not supported");
+ case "file-too-large":
+ return __("This file is too large");
+ default:
+ return __("Something went wrong");
+ }
}
diff --git a/packages/ui/src/Atoms/FrameworkLogo/FrameworkLogo.tsx b/packages/ui/src/Atoms/FrameworkLogo/FrameworkLogo.tsx
index 5b3206bdd..fbe9edd55 100644
--- a/packages/ui/src/Atoms/FrameworkLogo/FrameworkLogo.tsx
+++ b/packages/ui/src/Atoms/FrameworkLogo/FrameworkLogo.tsx
@@ -2,33 +2,35 @@ import clsx from "clsx";
import { Avatar } from "../Avatar/Avatar";
interface FrameworkLogoProps {
- className?: string;
- darkLogoURL?: string | null;
- lightLogoURL?: string | null;
- name: string;
+ className?: string;
+ darkLogoURL?: string | null;
+ lightLogoURL?: string | null;
+ name: string;
}
export function FrameworkLogo(props: FrameworkLogoProps) {
- const { className, lightLogoURL, darkLogoURL, name } = props;
+ const { className, lightLogoURL, darkLogoURL, name } = props;
- return lightLogoURL || darkLogoURL ? (
+ return lightLogoURL || darkLogoURL
+ ? (
<>
- {lightLogoURL && (
-
+
+ {props.isUploading
+ ? (
+
+
+
+ )
+ : (
+
+
+ )}
+
+ {error
+ ? (
+
+ {props.description}
+
- {children ?? (
- <>
-
- );
+ return (
+
+ {children ?? (
+ <>
+
+ );
}
diff --git a/packages/ui/src/Atoms/Input/Input.stories.tsx b/packages/ui/src/Atoms/Input/Input.stories.tsx
index 86d97ffe3..c46543967 100644
--- a/packages/ui/src/Atoms/Input/Input.stories.tsx
+++ b/packages/ui/src/Atoms/Input/Input.stories.tsx
@@ -2,9 +2,9 @@ import { Input } from "./Input";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Form/Input",
- component: Input,
- argTypes: {},
+ title: "Atoms/Form/Input",
+ component: Input,
+ argTypes: {},
} satisfies Meta
-
- );
- }
+ if (IconComponent) {
return (
+
+
);
+ }
+ return (
+ {
+ onValueChange?.(e.currentTarget.value);
+ props.onChange?.(e);
+ }}
+ />
+ );
}
diff --git a/packages/ui/src/Atoms/Label/Label.stories.tsx b/packages/ui/src/Atoms/Label/Label.stories.tsx
index c29e74d54..fd68cef21 100644
--- a/packages/ui/src/Atoms/Label/Label.stories.tsx
+++ b/packages/ui/src/Atoms/Label/Label.stories.tsx
@@ -2,9 +2,9 @@ import { Label } from "./Label";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Form/Label",
- component: Label,
- argTypes: {},
+ title: "Atoms/Form/Label",
+ component: Label,
+ argTypes: {},
} satisfies Meta
- (
-
- {children}
-
- ),
- pre: ({ children, ...props }) => (
-
+
+ );
}
diff --git a/packages/ui/src/Atoms/PriorityLevel/PriorityLevel.stories.tsx b/packages/ui/src/Atoms/PriorityLevel/PriorityLevel.stories.tsx
index f81ba0f96..401b69e43 100644
--- a/packages/ui/src/Atoms/PriorityLevel/PriorityLevel.stories.tsx
+++ b/packages/ui/src/Atoms/PriorityLevel/PriorityLevel.stories.tsx
@@ -2,15 +2,15 @@ import { PriorityLevel } from "./PriorityLevel.tsx";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/PriorityLevel",
- component: PriorityLevel,
- argTypes: {},
+ title: "Atoms/PriorityLevel",
+ component: PriorityLevel,
+ argTypes: {},
} satisfies Meta
- {children}
-
- ),
- code: ({ children, ...props }) => (
-
- {children}
-
- ),
- }}
+ return (
+
+ (
+
- {content}
-
-
- );
+ {children}
+
+ ),
+ pre: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+ code: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+ }}
+ >
+ {content}
+
-
= 1 ? "bg-txt-secondary" : "bg-txt-quaternary",
- )}
- />
-
= 2 ? "bg-txt-secondary" : "bg-txt-quaternary",
- )}
- />
-
= 3 ? "bg-txt-secondary" : "bg-txt-quaternary",
- )}
- />
-
- );
+ return (
+
+
= 1 ? "bg-txt-secondary" : "bg-txt-quaternary",
+ )}
+ />
+ ) {
- const hasSingleChildren = Children.count(children) <= 1;
- return (
- -
+
+
-
-
- {children}
-
-
-
- );
+ {children}
+
+
+
+ );
}
diff --git a/packages/ui/src/Atoms/Sidebar/Sidebar.stories.tsx b/packages/ui/src/Atoms/Sidebar/Sidebar.stories.tsx
index 0f80da8eb..f22203258 100644
--- a/packages/ui/src/Atoms/Sidebar/Sidebar.stories.tsx
+++ b/packages/ui/src/Atoms/Sidebar/Sidebar.stories.tsx
@@ -5,17 +5,17 @@ import { SidebarItem } from "./SidebarItem";
import { IconBank } from "../Icons/IconBank.tsx";
const meta: Meta = {
- component: Sidebar,
- subcomponents: { SidebarItem },
+ component: Sidebar,
+ subcomponents: { SidebarItem },
};
export default meta;
type Story = StoryObj;
export const Default: Story = {
- render: (args) => (
-
-
- ),
+ render: args => (
+
+
+ ),
};
diff --git a/packages/ui/src/Atoms/Sidebar/Sidebar.tsx b/packages/ui/src/Atoms/Sidebar/Sidebar.tsx
index 231c57bbe..0e6f50883 100644
--- a/packages/ui/src/Atoms/Sidebar/Sidebar.tsx
+++ b/packages/ui/src/Atoms/Sidebar/Sidebar.tsx
@@ -1,8 +1,8 @@
import {
- createContext,
- type PropsWithChildren,
- useContext,
- useState,
+ createContext,
+ type PropsWithChildren,
+ useContext,
+ useState,
} from "react";
import { clsx } from "clsx";
import { IconCollapse, IconExpand } from "../Icons";
@@ -11,42 +11,42 @@ import { Button } from "../Button/Button";
const sidebarContext = createContext({ open: true });
function useSidebarState() {
- const [open, setOpenState] = useState(() => {
- const stored = localStorage.getItem("sidebar-open");
- return stored !== null ? JSON.parse(stored) : true;
- });
+ const [open, setOpenState] = useState(() => {
+ const stored = localStorage.getItem("sidebar-open");
+ return stored !== null ? !!JSON.parse(stored) : true;
+ });
- const setOpen = (value: boolean) => {
- setOpenState(value);
+ const setOpen = (value: boolean) => {
+ setOpenState(value);
- localStorage.setItem("sidebar-open", JSON.stringify(value));
- };
+ localStorage.setItem("sidebar-open", JSON.stringify(value));
+ };
- return [open, setOpen] as const;
+ return [open, setOpen] as const;
}
export function Sidebar({ children }: PropsWithChildren) {
- const [open, setOpen] = useSidebarState();
- return (
-
-
-
- );
+ const [open, setOpen] = useSidebarState();
+ return (
+
+
+
+ );
}
export function useSidebarCollapsed(): boolean {
- return !useContext(sidebarContext).open;
+ return !useContext(sidebarContext).open;
}
diff --git a/packages/ui/src/Atoms/Sidebar/SidebarItem.tsx b/packages/ui/src/Atoms/Sidebar/SidebarItem.tsx
index 4e44c9c6a..3e9c34ae3 100644
--- a/packages/ui/src/Atoms/Sidebar/SidebarItem.tsx
+++ b/packages/ui/src/Atoms/Sidebar/SidebarItem.tsx
@@ -4,42 +4,41 @@ import { NavLink } from "react-router";
import { useSidebarCollapsed } from "./Sidebar.tsx";
const sidebarItem = tv({
- base: "flex items-center gap-2 w-full py-2 rounded-full",
- variants: {
- active: {
- true: "bg-active hover:bg-active-hover active:bg-active-pressed text-txt-primary",
- false: "hover:bg-subtle-hover active:bg-subtle-pressed text-txt-tertiary",
- },
- isCollapsed: {
- true: "px-[10px]",
- false: "px-3",
- },
+ base: "flex items-center gap-2 w-full py-2 rounded-full",
+ variants: {
+ active: {
+ true: "bg-active hover:bg-active-hover active:bg-active-pressed text-txt-primary",
+ false: "hover:bg-subtle-hover active:bg-subtle-pressed text-txt-tertiary",
},
- defaultVariants: {
- active: false,
+ isCollapsed: {
+ true: "px-[10px]",
+ false: "px-3",
},
+ },
+ defaultVariants: {
+ active: false,
+ },
});
type Props = PropsWithChildren<{
- icon?: FC<{ size: number }>;
- label: string;
- to?: string;
+ icon?: FC<{ size: number }>;
+ label: string;
+ to?: string;
}>;
export function SidebarItem(props: Props) {
- const isCollapsed = useSidebarCollapsed();
- return (
-
-
- sidebarItem({ ...props, active: isActive, isCollapsed })
- }
- >
- {props.icon &&
- {props.children &&
- );
+ const isCollapsed = useSidebarCollapsed();
+ return (
+
+
+ sidebarItem({ ...props, active: isActive, isCollapsed })}
+ >
+ {props.icon &&
+ {props.children &&
+ );
}
diff --git a/packages/ui/src/Atoms/Skeleton/Skeleton.stories.tsx b/packages/ui/src/Atoms/Skeleton/Skeleton.stories.tsx
index ed45dc617..11b2f6b8c 100644
--- a/packages/ui/src/Atoms/Skeleton/Skeleton.stories.tsx
+++ b/packages/ui/src/Atoms/Skeleton/Skeleton.stories.tsx
@@ -2,15 +2,15 @@ import { Skeleton } from "./Skeleton";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Skeleton",
- component: Skeleton,
- argTypes: {},
+ title: "Atoms/Skeleton",
+ component: Skeleton,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
export const Default: Story = {
- args: {
- className: "w-50 h-4",
- },
+ args: {
+ className: "w-50 h-4",
+ },
};
diff --git a/packages/ui/src/Atoms/Skeleton/Skeleton.tsx b/packages/ui/src/Atoms/Skeleton/Skeleton.tsx
index 3f8717ae9..f0dda44d0 100644
--- a/packages/ui/src/Atoms/Skeleton/Skeleton.tsx
+++ b/packages/ui/src/Atoms/Skeleton/Skeleton.tsx
@@ -1,16 +1,16 @@
import { clsx } from "clsx";
export function Skeleton({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/packages/ui/src/Atoms/Slot.tsx b/packages/ui/src/Atoms/Slot.tsx
index 430212e25..bb4f7b976 100644
--- a/packages/ui/src/Atoms/Slot.tsx
+++ b/packages/ui/src/Atoms/Slot.tsx
@@ -1,29 +1,23 @@
import clsx from "clsx";
-import React from "react";
import { cloneElement, isValidElement, Children } from "react";
-import type { ReactNode } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
-export type AsChildProps =
- | ({ asChild?: false } & DefaultElementProps)
+export type AsChildProps
+ = | ({ asChild?: false } & DefaultElementProps)
| ({ asChild: true; children: ReactNode } & DefaultElementProps);
export function Slot({
- children,
- ...props
-}: React.HTMLAttributes & {
- children?: ReactNode;
-}) {
- if (isValidElement(children)) {
- return cloneElement(children, {
- ...props,
- // @ts-expect-error children.props can be undefined it's ok
- ...children.props,
- // @ts-expect-error children.props.className can be undefined it's ok
- className: clsx(props.className, children.props.className),
- });
- }
- if (Children.count(children) > 1) {
- Children.only(null);
- }
- return null;
+ children,
+ ...props
+}: PropsWithChildren<{ className?: string | undefined } & Record>) {
+ if (isValidElement<{ className?: string | undefined } & Record>(children)) {
+ return cloneElement(children, {
+ ...props,
+ className: clsx(props.className, children.props.className),
+ });
+ }
+ if (Children.count(children) > 1) {
+ Children.only(null);
+ }
+ return null;
}
diff --git a/packages/ui/src/Atoms/Spinner/Spinner.stories.tsx b/packages/ui/src/Atoms/Spinner/Spinner.stories.tsx
index 6d5856208..6371b0f21 100644
--- a/packages/ui/src/Atoms/Spinner/Spinner.stories.tsx
+++ b/packages/ui/src/Atoms/Spinner/Spinner.stories.tsx
@@ -2,9 +2,9 @@ import { Spinner } from "./Spinner";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Spinner",
- component: Spinner,
- argTypes: {},
+ title: "Atoms/Spinner",
+ component: Spinner,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
diff --git a/packages/ui/src/Atoms/Spinner/Spinner.tsx b/packages/ui/src/Atoms/Spinner/Spinner.tsx
index f0ec16424..7904ff400 100644
--- a/packages/ui/src/Atoms/Spinner/Spinner.tsx
+++ b/packages/ui/src/Atoms/Spinner/Spinner.tsx
@@ -3,14 +3,14 @@ import clsx from "clsx";
type Props = { size?: number; className?: string; centered?: boolean };
export function Spinner({ size = 16, className, centered }: Props) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/packages/ui/src/Atoms/Table/Table.stories.tsx b/packages/ui/src/Atoms/Table/Table.stories.tsx
index 9b139cb60..3f06d7ae6 100644
--- a/packages/ui/src/Atoms/Table/Table.stories.tsx
+++ b/packages/ui/src/Atoms/Table/Table.stories.tsx
@@ -2,40 +2,40 @@ import { Table, Tbody, Td, Th, Thead, Tr, TrButton } from "./Table";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Table",
- component: Table,
- argTypes: {},
+ title: "Atoms/Table",
+ component: Table,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
export const Default: Story = {
- render: () => {
- return (
-
-
-
- );
- },
+ render: () => {
+ return (
+
+
+
+ );
+ },
};
diff --git a/packages/ui/src/Atoms/Table/Table.tsx b/packages/ui/src/Atoms/Table/Table.tsx
index 418596f63..e64ebd9e6 100644
--- a/packages/ui/src/Atoms/Table/Table.tsx
+++ b/packages/ui/src/Atoms/Table/Table.tsx
@@ -1,11 +1,11 @@
import {
- createContext,
- type FC,
- type HTMLAttributes,
- type PropsWithChildren,
- type ReactNode,
- type ThHTMLAttributes,
- useContext,
+ createContext,
+ type FC,
+ type HTMLAttributes,
+ type PropsWithChildren,
+ type ReactNode,
+ type ThHTMLAttributes,
+ useContext,
} from "react";
import { Card } from "../Card/Card";
import { Link } from "react-router";
@@ -13,146 +13,146 @@ import clsx from "clsx";
import { IconPlusLarge } from "../Icons";
export function Table({
- children,
- className,
+ children,
+ className,
}: PropsWithChildren<{ className?: string }>) {
- return (
-
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
export function Thead({
- children,
- className,
+ children,
+ className,
}: PropsWithChildren<{ className?: string }>) {
- return (
-
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
export function Th({
- children,
- className,
- width,
- compact,
- ...props
+ children,
+ className,
+ width,
+ compact,
+ ...props
}: {
- className?: string;
- width?: number;
- colspan?: number;
- compact?: boolean;
+ className?: string;
+ width?: number;
+ colspan?: number;
+ compact?: boolean;
} & ThHTMLAttributes) {
- return (
-
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
const TrContext = createContext({} as { to?: string });
export function Tr({
- to,
- className,
- ...props
+ to,
+ className,
+ ...props
}: { to?: string } & HTMLAttributes) {
- return (
-
-
- );
+ return (
+
+
+ );
}
export function Tbody({ children }: PropsWithChildren) {
- return (
-
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
export function Td({
- children,
- noLink,
- className,
- width,
- ...props
+ children,
+ noLink,
+ className,
+ width,
+ ...props
}: {
- noLink?: boolean;
- width?: number;
- colSpan?: number;
+ noLink?: boolean;
+ width?: number;
+ colSpan?: number;
} & HTMLAttributes) {
- const { to } = useContext(TrContext);
- if (!to || noLink) {
- return (
-
- {children}
-
- );
- }
+ const { to } = useContext(TrContext);
+ if (!to || noLink) {
return (
-
-
- {children}
-
-
+
+ {children}
+
);
+ }
+ return (
+
+
+ {children}
+
+
+ );
}
export function TrButton({
- icon = IconPlusLarge,
- children,
- colspan,
- ...props
+ icon = IconPlusLarge,
+ children,
+ colspan,
+ ...props
}: {
- colspan?: number;
- children: ReactNode;
- icon?: FC<{ size: number; className?: string }>;
+ colspan?: number;
+ children: ReactNode;
+ icon?: FC<{ size: number; className?: string }>;
} & HTMLAttributes) {
- const IconComponent = icon;
- return (
-
-
-
-
-
- );
+ const IconComponent = icon;
+ return (
+
+
+
+
+
+ );
}
diff --git a/packages/ui/src/Atoms/Tabs/Tabs.stories.tsx b/packages/ui/src/Atoms/Tabs/Tabs.stories.tsx
index fe9a0984d..30f8cf750 100644
--- a/packages/ui/src/Atoms/Tabs/Tabs.stories.tsx
+++ b/packages/ui/src/Atoms/Tabs/Tabs.stories.tsx
@@ -2,21 +2,23 @@ import { Tabs, TabLink, TabBadge } from "./Tabs";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Tabs",
- component: Tabs,
- argTypes: {},
+ title: "Atoms/Tabs",
+ component: Tabs,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
export const Default: Story = {
- render: () => (
-
- Tab 1
- Tab 2
-
- Tab 3 3
-
-
- ),
+ render: () => (
+
+ Tab 1
+ Tab 2
+
+ Tab 3
+ {" "}
+ 3
+
+
+ ),
};
diff --git a/packages/ui/src/Atoms/Tabs/Tabs.tsx b/packages/ui/src/Atoms/Tabs/Tabs.tsx
index 880529214..c49d1d955 100644
--- a/packages/ui/src/Atoms/Tabs/Tabs.tsx
+++ b/packages/ui/src/Atoms/Tabs/Tabs.tsx
@@ -5,51 +5,51 @@ import { Slot, type AsChildProps } from "../Slot";
import { tv } from "tailwind-variants";
const cls = tv({
- slots: {
- wrapper:
+ slots: {
+ wrapper:
"border-b border-border-low flex gap-6 text-sm font-medium text-txt-secondary",
- item: "py-4 hover:text-txt-primary border-b-2 active:border-border-active -mb-[1px] active:text-txt-primary flex items-center gap-2 cursor-pointer",
- badge: "py-1 px-2 text-txt-secondary text-xs font-semibold rounded-lg bg-highlight",
- },
- variants: {
- active: {
- true: {
- item: "border-border-active text-txt-primary",
- wrapper: "border-border-active",
- },
- false: {
- item: "border-transparent",
- },
- },
+ item: "py-4 hover:text-txt-primary border-b-2 active:border-border-active -mb-[1px] active:text-txt-primary flex items-center gap-2 cursor-pointer",
+ badge: "py-1 px-2 text-txt-secondary text-xs font-semibold rounded-lg bg-highlight",
+ },
+ variants: {
+ active: {
+ true: {
+ item: "border-border-active text-txt-primary",
+ wrapper: "border-border-active",
+ },
+ false: {
+ item: "border-transparent",
+ },
},
+ },
})();
export function Tabs(props: HTMLAttributes) {
- return (
-
-
- );
+ return (
+
+
+ );
}
export function TabItem({
- asChild,
- active,
- ...props
+ asChild,
+ active,
+ ...props
}: AsChildProps<{ active?: boolean; onClick?: () => void }>) {
- const Component = asChild ? Slot : "div";
- return boolean }>) {
- return (
- cls.item({ active: params.isActive })}
- {...props}
- />
- );
+ return (
+ cls.item({ active: params.isActive })}
+ {...props}
+ />
+ );
}
export function TabBadge(props: PropsWithChildren) {
- return {props.children};
+ return {props.children};
}
diff --git a/packages/ui/src/Atoms/Textarea/Textarea.stories.tsx b/packages/ui/src/Atoms/Textarea/Textarea.stories.tsx
index 9d3c2ccfc..2762bc457 100644
--- a/packages/ui/src/Atoms/Textarea/Textarea.stories.tsx
+++ b/packages/ui/src/Atoms/Textarea/Textarea.stories.tsx
@@ -2,16 +2,16 @@ import { Textarea } from "./Textarea";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Form/Textarea",
- component: Textarea,
- argTypes: {},
+ title: "Atoms/Form/Textarea",
+ component: Textarea,
+ argTypes: {},
} satisfies Meta;
type Story = StoryObj;
export const Default: Story = {};
export const Autogrow: Story = {
- args: {
- autogrow: true,
- },
+ args: {
+ autogrow: true,
+ },
};
diff --git a/packages/ui/src/Atoms/Textarea/Textarea.tsx b/packages/ui/src/Atoms/Textarea/Textarea.tsx
index f7843dbf4..2ab3b61a8 100644
--- a/packages/ui/src/Atoms/Textarea/Textarea.tsx
+++ b/packages/ui/src/Atoms/Textarea/Textarea.tsx
@@ -1,49 +1,49 @@
import {
- useRef,
- type TextareaHTMLAttributes,
- type RefCallback,
- useLayoutEffect,
- useCallback,
+ useRef,
+ type TextareaHTMLAttributes,
+ type RefCallback,
+ useLayoutEffect,
+ useCallback,
} from "react";
import { input } from "../Input/Input";
import clsx from "clsx";
type Props = TextareaHTMLAttributes & {
- variant?: "bordered" | "ghost" | "title";
- autogrow?: boolean;
- ref?: RefCallback;
+ variant?: "bordered" | "ghost" | "title";
+ autogrow?: boolean;
+ ref?: RefCallback;
};
export function Textarea(props: Props) {
- const ref = useRef(null);
- const { autogrow, ref: propsRef, ...restProps } = props;
+ const ref = useRef(null);
+ const { autogrow, ref: propsRef, ...restProps } = props;
- const adjustHeight = useCallback(() => {
- if (!autogrow || !ref.current) return;
- ref.current.style.height = "inherit";
- const paddingY = 2;
- ref.current.style.height = `${ref.current.scrollHeight + paddingY * 2}px`;
- }, [autogrow, ref]);
+ const adjustHeight = useCallback(() => {
+ if (!autogrow || !ref.current) return;
+ ref.current.style.height = "inherit";
+ const paddingY = 2;
+ ref.current.style.height = `${ref.current.scrollHeight + paddingY * 2}px`;
+ }, [autogrow, ref]);
- useLayoutEffect(() => {
+ useLayoutEffect(() => {
+ adjustHeight();
+ }, [adjustHeight]);
+
+ return (
+
= 2 ? "bg-txt-secondary" : "bg-txt-quaternary",
+ )}
+ />
+ ;
type Story = StoryObj;
export const Default: Story = {
- args: {
- id: "test",
- label: "Test",
- children: ,
- },
+ args: {
+ id: "test",
+ label: "Test",
+ children: ,
+ },
};
export const WithError: Story = {
- args: {
- ...Default.args,
- error: "This is an error",
- },
+ args: {
+ ...Default.args,
+ error: "This is an error",
+ },
};
diff --git a/packages/ui/src/Atoms/PropertyRow/PropertyRow.tsx b/packages/ui/src/Atoms/PropertyRow/PropertyRow.tsx
index 6febfc59d..ae774b522 100644
--- a/packages/ui/src/Atoms/PropertyRow/PropertyRow.tsx
+++ b/packages/ui/src/Atoms/PropertyRow/PropertyRow.tsx
@@ -2,28 +2,28 @@ import { Children, type ReactNode } from "react";
import { Label } from "../Label/Label";
type Props = {
- label: string;
- id?: string;
- children: ReactNode;
- error?: string;
+ label: string;
+ id?: string;
+ children: ReactNode;
+ error?: string;
};
export function PropertyRow({ id, label, children, error, ...props }: Props) {
- const [firstChild, ...restChildren] = Children.toArray(children);
+ const [firstChild, ...restChildren] = Children.toArray(children);
- return (
- ;
type Story = StoryObj;
export const Default: Story = {
- args: {
- placeholder: "Select an option",
- children: (
- <>
-
-
-
-
-
-
- ),
- },
+ args: {
+ placeholder: "Select an option",
+ children: (
+ <>
+
+
+
+
+
+
+ ),
+ },
};
export const Dashed: Story = {
- args: {
- ...Default.args,
- variant: "dashed",
- },
+ args: {
+ ...Default.args,
+ variant: "dashed",
+ },
};
export const Invalid: Story = {
- args: {
- ...Default.args,
- invalid: true,
- },
+ args: {
+ ...Default.args,
+ invalid: true,
+ },
};
export const Loading: Story = {
- args: {
- ...Default.args,
- loading: true,
- },
+ args: {
+ ...Default.args,
+ loading: true,
+ },
};
export const Disabled: Story = {
- args: {
- ...Default.args,
- disabled: true,
- },
+ args: {
+ ...Default.args,
+ disabled: true,
+ },
};
diff --git a/packages/ui/src/Atoms/Select/Select.tsx b/packages/ui/src/Atoms/Select/Select.tsx
index 553652574..f4c2815b2 100644
--- a/packages/ui/src/Atoms/Select/Select.tsx
+++ b/packages/ui/src/Atoms/Select/Select.tsx
@@ -1,211 +1,211 @@
import {
- Root,
- Trigger,
- Value,
- Icon,
- Portal,
- Content,
- Viewport,
- Item,
- ItemText,
+ Root,
+ Trigger,
+ Value,
+ Icon,
+ Portal,
+ Content,
+ Viewport,
+ Item,
+ ItemText,
} from "@radix-ui/react-select";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { Input, input } from "../Input/Input.tsx";
import { IconChevronGrabberVertical } from "../Icons/IconChevronGrabberVertical.tsx";
import { tv } from "tailwind-variants";
import {
- Children,
- type ComponentProps,
- type CSSProperties,
- type PropsWithChildren,
- type ReactNode,
+ Children,
+ type ComponentProps,
+ type CSSProperties,
+ type PropsWithChildren,
+ type ReactNode,
} from "react";
import { IconMagnifyingGlass } from "../Icons/IconMagnifyingGlass.tsx";
import { Spinner } from "../Spinner/Spinner.tsx";
type Props = PropsWithChildren<
- {
- id?: string;
- placeholder?: ReactNode;
- onValueChange?: (s: NonNullable) => void;
- variant?: "default" | "editor" | "dashed" | "ghost";
- invalid?: boolean;
- disabled?: boolean;
- className?: string;
- value?: T;
- searchValue?: string;
- onSearch?: (s: string) => void;
- searchPlaceholder?: string;
- loading?: boolean;
- style?: CSSProperties;
- dropdownProps?: ComponentProps;
- } & Omit, "onChange" | "value">
+ {
+ id?: string;
+ placeholder?: ReactNode;
+ onValueChange?: (s: NonNullable) => void;
+ variant?: "default" | "editor" | "dashed" | "ghost";
+ invalid?: boolean;
+ disabled?: boolean;
+ className?: string;
+ value?: T;
+ searchValue?: string;
+ onSearch?: (s: string) => void;
+ searchPlaceholder?: string;
+ loading?: boolean;
+ style?: CSSProperties;
+ dropdownProps?: ComponentProps;
+ } & Omit, "onChange" | "value">
>;
const select = tv({
- slots: {
- trigger:
+ slots: {
+ trigger:
"flex justify-between items-center data-placeholder:text-txt-tertiary whitespace-nowrap cursor-pointer *:first:contents",
- content:
+ content:
"z-100 shadow-mid rounded-[10px] bg-level-1 p-1 animate-in fade-in slide-in-from-top-2 overflow-y-auto overflow-y-auto",
- icon: "-mr-1",
+ icon: "-mr-1",
+ },
+ variants: {
+ invalid: {
+ true: {
+ trigger: "border-border-danger",
+ },
},
- variants: {
- invalid: {
- true: {
- trigger: "border-border-danger",
- },
- },
- disabled: {
- true: {
- trigger: "opacity-60",
- },
- },
- loading: {
- true: {
- trigger: "opacity-60",
- },
- },
- variant: {
- dashed: {
- trigger: input({
- class: "w-full gap-4 border-dashed pointer-events-none",
- }),
- },
- editor: {
- trigger:
+ disabled: {
+ true: {
+ trigger: "opacity-60",
+ },
+ },
+ loading: {
+ true: {
+ trigger: "opacity-60",
+ },
+ },
+ variant: {
+ dashed: {
+ trigger: input({
+ class: "w-full gap-4 border-dashed pointer-events-none",
+ }),
+ },
+ editor: {
+ trigger:
"bg-highlight hover:bg-highlight-hover active:bg-highlight-pressed text-txt-primary text-sm px-[10px] py-[6px] rounded-lg w-max gap-2",
- },
- default: {
- trigger: input({ class: "w-full gap-4 " }),
- },
- ghost: {
- trigger: "w-full px-3",
- content: "bg-level-2",
- },
- },
+ },
+ default: {
+ trigger: input({ class: "w-full gap-4 " }),
+ },
+ ghost: {
+ trigger: "w-full px-3",
+ content: "bg-level-2",
+ },
},
- compoundVariants: [
- {
- invalid: true,
- variant: "default",
- class: {
- trigger: "border-border-danger",
- },
- },
- ],
- defaultVariants: {
- variant: "default",
+ },
+ compoundVariants: [
+ {
+ invalid: true,
+ variant: "default",
+ class: {
+ trigger: "border-border-danger",
+ },
},
+ ],
+ defaultVariants: {
+ variant: "default",
+ },
});
export function Select({
- placeholder,
- children,
- onValueChange,
- value,
- searchValue,
- onSearch,
- searchPlaceholder,
- loading,
- open,
- defaultOpen = false,
- onOpenChange,
- dropdownProps,
- ...props
+ placeholder,
+ children,
+ onValueChange,
+ value,
+ searchValue,
+ onSearch,
+ searchPlaceholder,
+ loading,
+ open,
+ defaultOpen = false,
+ onOpenChange,
+ dropdownProps,
+ ...props
}: Props) {
- const { trigger, content, icon } = select({
- ...props,
- });
+ const { trigger, content, icon } = select({
+ ...props,
+ });
- return (
-
+
+
+ {children}
+
+
+
+
+
+
+
+ );
}
export function Option({ children, ...props }: ComponentProps= 3 ? "bg-txt-secondary" : "bg-txt-quaternary",
+ )}
+ />
+
+ );
}
diff --git a/packages/ui/src/Atoms/PropertyRow/PropertyRow.stories.tsx b/packages/ui/src/Atoms/PropertyRow/PropertyRow.stories.tsx
index ce81de06c..6d32987f8 100644
--- a/packages/ui/src/Atoms/PropertyRow/PropertyRow.stories.tsx
+++ b/packages/ui/src/Atoms/PropertyRow/PropertyRow.stories.tsx
@@ -3,24 +3,24 @@ import { PropertyRow } from "./PropertyRow";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/PropertyRow",
- component: PropertyRow,
- argTypes: {},
+ title: "Atoms/PropertyRow",
+ component: PropertyRow,
+ argTypes: {},
} satisfies Meta
-
- );
+ return (
+
-
-
- {error && {firstChild}
- {error}
}
- {restChildren}
-
+
+ );
}
diff --git a/packages/ui/src/Atoms/Select/Select.stories.tsx b/packages/ui/src/Atoms/Select/Select.stories.tsx
index 7d89df492..d109d1f38 100644
--- a/packages/ui/src/Atoms/Select/Select.stories.tsx
+++ b/packages/ui/src/Atoms/Select/Select.stories.tsx
@@ -2,52 +2,52 @@ import { Select, Option } from "./Select";
import type { Meta, StoryObj } from "@storybook/react";
export default {
- title: "Atoms/Form/Select",
- component: Select,
- argTypes: {},
+ title: "Atoms/Form/Select",
+ component: Select,
+ argTypes: {},
} satisfies Meta
+
+
+ {error && {firstChild}
+ {error}
}
+ {restChildren}
+
-
-
-
- {loading ? (
-
-
-
-
+
+
+
+ {loading
+ ? (
+
+
+
+
- {onSearch && (
- {
- e.stopPropagation();
- e.preventDefault();
- }}
- autoFocus
- icon={IconMagnifyingGlass}
- placeholder={searchPlaceholder}
- value={searchValue}
- onChange={(e) => onSearch(e.target.value)}
- />
- )}
-
-
-
- {children}
-
-
-
-
-
-
-
- );
+ ...dropdownProps?.style,
+ }}
+ className={content({
+ className: dropdownProps?.className,
+ })}
+ >
+ {onSearch && (
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ autoFocus
+ icon={IconMagnifyingGlass}
+ placeholder={searchPlaceholder}
+ value={searchValue}
+ onChange={e => onSearch(e.target.value)}
+ />
+ )}
+ - {props.children}
- {props.children}
| Header 1 | -Header 2 | -Header 3 | -
|---|---|---|
| Row 1, Cell 1 | -Row 1, Cell 2 | -Row 1, Cell 3 | -
| Row 2, Cell 1 | -Row 2, Cell 2 | -Row 2, Cell 3 | -
| Header 1 | +Header 2 | +Header 3 | +
|---|---|---|
| Row 1, Cell 1 | +Row 1, Cell 2 | +Row 1, Cell 3 | +
| Row 2, Cell 1 | +Row 2, Cell 2 | +Row 2, Cell 3 | +