10 |
11 | {text && (
12 | {text}
13 | )}
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/components/icon/index.scss:
--------------------------------------------------------------------------------
1 | .material-icons.icon--filled {
2 | font-family: "Material Icons", sans-serif;
3 | }
4 |
5 | // Icon sizes
6 | .material-icons.icon--xsmall {
7 | font-size: 11px;
8 | }
9 |
10 | .material-icons.icon--small {
11 | font-size: 16px;
12 | }
13 |
14 | .material-icons.icon--medium {
15 | font-size: 24px;
16 | }
17 |
18 | .material-icons.icon--large {
19 | font-size: 32px;
20 | }
21 |
22 | .material-icons.icon--xlarge {
23 | font-size: 48px;
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/share/types.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | export type InvitationData
19 |
20 | {children}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/quick-search/types.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | export type QuickSearchAction = {
4 | onSelect?: () => void; // for the keyboard selection with
21 | {props.children}
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/layout/right-panel/RightPanel.tsx:
--------------------------------------------------------------------------------
1 | import { useResponsive } from ":/hooks/useResponsive";
2 | import clsx from "clsx";
3 | import { PropsWithChildren } from "react";
4 |
5 | export type RightPanelProps = {
6 | isOpen?: boolean;
7 | };
8 | export const RightPanel = ({
9 | children,
10 | isOpen,
11 | }: PropsWithChildren
17 | {children}
18 |
19 | );
20 | }
21 |
22 | return (
23 | {children}
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/button/ProConnectButton.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@gouvfr-lasuite/cunningham-react";
2 | import logo from ":/assets/proconnect-content.svg";
3 | import logoDisabled from ":/assets/proconnect-content-disabled.svg";
4 |
5 | export type ProConnectButtonProps = {
6 | disabled?: boolean;
7 | onClick?: () => void;
8 | };
9 | export const ProConnectButton = ({
10 | disabled,
11 | onClick,
12 | }: ProConnectButtonProps) => {
13 | return (
14 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/utils/get-ui-kit-themes-from-globals.ts:
--------------------------------------------------------------------------------
1 | import { getThemesFromGlobals } from "@gouvfr-lasuite/cunningham-tokens";
2 | import { deepMerge } from "./objects";
3 | import { commonTokenOverrides, commonGlobals } from "../../cunningham";
4 |
5 |
6 |
7 | // Utils functions to create a theme from a set of globals with UIKit overrides applied by default
8 | export const getUIKitThemesFromGlobals = (globals: Parameters
25 | {children}
26 |
27 | );
28 | };
29 |
30 | export default Badge;
31 |
--------------------------------------------------------------------------------
/src/components/users/rows/user-row.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import { UserRow } from "./UserRow";
3 |
4 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
5 | const meta = {
6 | title: "Components/users/Row",
7 | component: UserRow,
8 | tags: ["autodocs"],
9 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
10 | } satisfies Meta
24 | {props.children}
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Distribution / packaging
2 | .Python
3 | build/
4 | develop-eggs/
5 | dist/
6 | downloads/
7 | eggs/
8 | .eggs/
9 | lib/
10 | lib64/
11 | parts/
12 | sdist/
13 | var/
14 | wheels/
15 | pip-wheel-metadata/
16 | share/python-wheels/
17 | *.egg-info/
18 | .installed.cfg
19 | *.egg
20 | MANIFEST
21 | .DS_Store
22 | .next/
23 |
24 | # Environments
25 | .venv
26 | env/
27 | venv/
28 | ENV/
29 | env.bak/
30 | venv.bak/
31 | env.d/development/*
32 | !env.d/development/*.dist
33 | env.d/terraform
34 |
35 | # npm
36 | node_modules
37 |
38 |
39 | # Logs
40 | *.log
41 |
42 |
43 |
44 | # Test & lint
45 | .coverage
46 | .pylint.d
47 | .pytest_cache
48 | db.sqlite3
49 | .mypy_cache
50 |
51 | # Site media
52 | /data/
53 |
54 | # IDEs
55 | .idea/
56 | .vscode/
57 | *.iml
58 | .devcontainer
59 | node_modules
--------------------------------------------------------------------------------
/src/components/form/label/label.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 |
3 | import { WithLabel } from "./WithLabel";
4 | import { Label } from "./label";
5 |
6 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
7 | const meta = {
8 | title: "Components/Forms/Label",
9 | component: Label,
10 | tags: ["autodocs"],
11 |
12 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
13 | } satisfies Meta
23 | {children}
24 |
25 | );
26 | }
27 |
28 | return (
29 |
30 | {children}
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/share/utils/ShareModalCopyLinkFooter.tsx:
--------------------------------------------------------------------------------
1 | import { Button, useCunningham } from "@gouvfr-lasuite/cunningham-react";
2 |
3 | export type ShareModalCopyLinkFooterProps = {
4 | onCopyLink: () => void;
5 | onOk: () => void;
6 | };
7 |
8 | export const ShareModalCopyLinkFooter = ({
9 | onCopyLink,
10 | onOk,
11 | }: ShareModalCopyLinkFooterProps) => {
12 | const { t } = useCunningham();
13 | return (
14 |
15 |
22 |
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/tree-view/utils.tsx:
--------------------------------------------------------------------------------
1 | import { TreeViewDataType, TreeViewNodeTypeEnum } from "./types";
2 |
3 | export const isSeparator = 
,
28 | banner: "/storybook/hero-image.png",
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/src/components/datagrid/index.scss:
--------------------------------------------------------------------------------
1 | .c__datagrid__table__container {
2 | overflow: auto;
3 | }
4 |
5 | .c__datagrid__table__container > table th {
6 | height: 24px;
7 | }
8 |
9 | .c__datagrid__table__container > table thead tr {
10 | border: none;
11 | }
12 |
13 | .c__datagrid__table__container > table td {
14 | height: 40px;
15 | }
16 |
17 | .c__datagrid__table__container > table th .c__datagrid__header {
18 | color: var(--c--components--datagrid--header--color);
19 | font-weight: var(--c--components--datagrid--header--weight);
20 | font-size: var(--c--components--datagrid--header--size);
21 | text-transform: none;
22 | }
23 |
24 | .c__datagrid__table__container > table tbody tr {
25 | border: none;
26 | }
27 |
28 | .c__datagrid__table__container > table tbody tr:hover {
29 | background-color: var(
30 | --c--components--datagrid--body--background-color-hover
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/la-gaufre/LaGaufreV2.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 |
3 | import { LaGaufre } from "./LaGaufre";
4 | import { LaGaufreV2 } from "./LaGaufreV2";
5 |
6 | const meta = {
7 | title: "Components/LaGaufreV2",
8 | component: LaGaufreV2,
9 | tags: ["autodocs"],
10 | parameters: {
11 | layout: "fullscreen",
12 | },
13 | } satisfies Meta
28 |
30 | );
31 | },
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/layout/right-panel/index.scss:
--------------------------------------------------------------------------------
1 | .c__right-panel {
2 | height: calc(100dvh - 52px);
3 | width: 0;
4 | border-left: 1px solid var(--c--contextuals--border--surface--primary);
5 | transition: width 0.15s ease-in-out;
6 | overflow-y: auto;
7 | transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
8 | background-color: var(--c--contextuals--background--surface--secondary);
9 | &.open {
10 | width: 300px;
11 | }
12 | }
13 |
14 | .c__right-panel__mobile {
15 | z-index: 998;
16 | width: 100dvw;
17 | height: calc(100dvh - 52px);
18 | overflow-y: auto;
19 | position: fixed;
20 | background-color: var(--c--contextuals--background--surface--secondary);
21 | transition: transform 0.15s ease-in-out;
22 | transform: translateX(100dvw);
23 |
24 | // Animation for both opening and closing
25 | transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
26 |
27 | &.open {
28 | transform: translateX(0);
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/loader/spinner.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 |
3 | import { Spinner } from "./Spinner";
4 |
5 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6 | const meta = {
7 | title: "Components/Spinner",
8 | component: Spinner,
9 | tags: ["autodocs"],
10 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
11 | } satisfies Meta
21 | {t("components.share.item.add")}
22 | add
23 |
24 | }
25 | />
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/users/avatar/UserAvatar.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { getUserInitials, getUserColor, AVATAR_COLORS } from "./utils";
3 |
4 | export type AvatarProps = {
5 | fullName: string;
6 | size?: "xsmall" | "small" | "medium" | "large";
7 | forceColor?: string;
8 | backgroundColor?: (typeof AVATAR_COLORS)[number];
9 | };
10 |
11 | export const UserAvatar = ({
12 | fullName,
13 | size = "medium",
14 | forceColor,
15 | backgroundColor: color,
16 | }: AvatarProps) => {
17 | const initials = getUserInitials(fullName);
18 | const backgroundColor = color ? color : getUserColor(fullName);
19 | return (
20 |
26 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/components/form/label/index.scss:
--------------------------------------------------------------------------------
1 | .c__with-label {
2 | display: flex;
3 | width: fit-content;
4 | align-items: center;
5 | gap: var(--c--globals--spacings--xs);
6 | padding: var(--c--globals--spacings--3xs);
7 |
8 | &.left {
9 | flex-direction: row-reverse;
10 | }
11 |
12 | &:hover {
13 | cursor: pointer;
14 | background-color: var(
15 | --c--contextuals--background--semantic--neutral--tertiary-hover
16 | );
17 | }
18 | }
19 |
20 | .suite__label__container {
21 | display: flex;
22 | flex-direction: column;
23 |
24 | label {
25 | font-size: var(--c--globals--font--sizes--sm);
26 | font-weight: var(--c--globals--font--weights--medium);
27 | color: var(--c--contextuals--content--semantic--neutral--primary);
28 | }
29 |
30 | &__description {
31 | font-weight: 400;
32 | font-size: var(--c--globals--font--sizes--s);
33 | color: var(--c--contextuals--content--semantic--neutral--secondary);
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/users/avatar/utils.ts:
--------------------------------------------------------------------------------
1 | export const AVATAR_COLORS = [
2 | "gray",
3 | "brand",
4 | "red",
5 | "orange",
6 | "brown",
7 | "green",
8 | "blue-1",
9 | "blue-2",
10 | "pink",
11 | "yellow",
12 | "purple",
13 | ];
14 |
15 |
16 | /**
17 | * Split the name into parts and return the first two initials
18 | */
19 | export const getUserInitials = (name: string) => {
20 | // If there are more than 2 words, take only the first two ones
21 | return name
22 | .split(/[\s-_]+/)
23 | .slice(0, 2)
24 | .map((n) => n[0])
25 | .join("")
26 | .toUpperCase();
27 | };
28 |
29 | /**
30 | * Get a consistent avatar's color according to a hash of the name
31 | */
32 | export const getUserColor = (name: string) => {
33 | let sum = 0;
34 | for (let i = 0; i < name.length; i++) {
35 | sum += name.charCodeAt(i);
36 | }
37 |
38 | return AVATAR_COLORS[sum % AVATAR_COLORS.length];
39 | };
40 |
--------------------------------------------------------------------------------
/src/components/users/rows/UserRow.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { UserAvatar } from "../avatar/UserAvatar";
3 |
4 | type UserProps = {
5 | fullName?: string;
6 | email?: string;
7 | showEmail?: boolean;
8 | };
9 |
10 | export const UserRow = ({
11 | fullName: full_name,
12 | email,
13 | showEmail = true,
14 | }: UserProps) => {
15 | const name = full_name && full_name !== "" ? full_name : email ?? "";
16 | return (
17 | {initials}
27 |
18 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/hero/Hero.tsx:
--------------------------------------------------------------------------------
1 | import { ProConnectButton } from "../button/ProConnectButton";
2 |
3 | export const Hero = ({
4 | logo,
5 | mainButton,
6 | banner,
7 | title,
8 | subtitle,
9 | }: {
10 | logo: React.ReactNode;
11 | mainButton?: React.ReactNode;
12 | banner: string;
13 | title: string;
14 | subtitle: string;
15 | }) => {
16 | return (
17 |
20 | {full_name}
21 | {showEmail && email && (
22 |
27 | {email}
28 |
29 | )}
30 |
31 |
18 |
30 | );
31 | };
32 |
33 | export const HomeGutter = ({ children }: { children: React.ReactNode }) => {
34 | return
19 | 
28 |
29 |
20 | {logo}
21 |
27 | {title}
22 | 23 | {subtitle} 24 | 25 | {mainButton ? mainButton :{children}
;
35 | };
36 |
--------------------------------------------------------------------------------
/src/components/separator/AbstractSeparator.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { CSSProperties } from "react";
3 |
4 | export type AbstractSeparatorProps = {
5 | withPadding?: boolean;
6 | direction: "horizontal" | "vertical";
7 | width?: "thin" | "double";
8 | size?: string;
9 | };
10 |
11 | /**
12 | * An abstract component which display a vertical or horizontal separator.
13 | * It should not be used directly, but rather extended by the concrete implementations.
14 | * See `HorizontalSeparator` and `VerticalSeparator` for concrete implementations.
15 | */
16 | export const _AbstractSeparator = ({ withPadding = true, direction, width = "thin", size }: AbstractSeparatorProps) => {
17 | return ;
28 | };
29 |
--------------------------------------------------------------------------------
/src/components/quick-search/QuickSearchItemTemplate.tsx:
--------------------------------------------------------------------------------
1 | import { useResponsive } from ":/hooks/useResponsive";
2 | import clsx from "clsx";
3 | import { ReactNode } from "react";
4 |
5 | export type QuickSearchItemTemplateProps = {
6 | alwaysShowRight?: boolean;
7 | left: ReactNode;
8 | right?: ReactNode;
9 | };
10 |
11 | export const QuickSearchItemTemplate = ({
12 | alwaysShowRight = false,
13 | left,
14 | right,
15 | }: QuickSearchItemTemplateProps) => {
16 | const { isDesktop } = useResponsive();
17 | return (
18 |
19 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/separator/index.scss:
--------------------------------------------------------------------------------
1 | .c__separator {
2 | --border-width: 1px;
3 | --padding: var(--c--globals--spacings--sm, 0.75rem);
4 | background-color: var(--c--contextuals--border--surface--primary);
5 | }
6 |
7 | .c__separator--double {
8 | --border-width: 2px;
9 | }
10 |
11 | .c__separator--horizontal {
12 | height: var(--border-width);
13 | width: var(--size, 100%);
14 |
15 | &.with-padding {
16 | margin-block: var(--padding);
17 | }
18 | }
19 |
20 | .c__separator--vertical {
21 | width: var(--border-width);
22 | /* Let flexbox compute cross-size; ensures full container height in row flex */
23 | align-self: stretch;
24 | /* Also work inline by default */
25 | display: inline-block;
26 | height: var(--size, auto);
27 | min-height: 1.5em;
28 | vertical-align: middle;
29 |
30 | &.with-padding {
31 | margin-inline: var(--padding);
32 | }
33 | }
34 |
35 | /* When --size is defined, don't stretch */
36 | .c__separator--vertical[style*="--size"] {
37 | align-self: auto;
38 | }
39 |
--------------------------------------------------------------------------------
/public/storybook/logo-fichiers.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/hooks/useCustomTranslations.ts:
--------------------------------------------------------------------------------
1 | import { useCunningham } from "@gouvfr-lasuite/cunningham-react";
2 | import type { TranslationKey } from "../types/translations";
3 |
4 | /**
5 | * Type for custom translations - maps translation keys to their string values
6 | */
7 | export type CustomTranslations = Partial{left}
20 |
21 | {isDesktop && right && (
22 |
28 | {right}
29 |
30 | )}
31 |
22 | Accent
23 | Neutral
24 | Info
25 | Success
26 | Warning
27 | Danger
28 |
29 | )
30 | }
31 |
32 | export const WithNumber: Story = {
33 | args: {
34 | children: '42',
35 | },
36 | };
37 |
38 | export const Uppercased: Story = {
39 | args: {
40 | children: 'new',
41 | uppercased: true,
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/src/components/tabs/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs, TabList, Tab, TabPanel } from "react-aria-components";
2 | import { TabData } from "./types";
3 | import clsx from "clsx";
4 |
5 | export type TabsProps = {
6 | tabs: TabData[];
7 | defaultSelectedTab?: string;
8 | fullWidth?: boolean;
9 | };
10 |
11 | export const CustomTabs = ({
12 | tabs,
13 | defaultSelectedTab,
14 | fullWidth = false,
15 | }: TabsProps) => {
16 | if (tabs.length === 0) {
17 | return null;
18 | }
19 |
20 | return (
21 |
26 |
27 |
28 | {tabs.map((tab) => (
29 |
30 | {tab.icon && {tab.icon}}
31 | {tab.label}
32 |
33 | ))}
34 |
35 | {tabs.map((tab) => (
36 |
37 | {tab.content}
38 |
39 | ))}
40 |
41 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/src/components/form/radio/radio.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 |
3 | import { Radio } from "@gouvfr-lasuite/cunningham-react";
4 |
5 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6 | const meta = {
7 | title: "Components/Forms/Radio",
8 | component: Radio,
9 | tags: ["autodocs"],
10 |
11 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
12 | } satisfies Meta
32 |
33 | {showInput && (
34 |
41 | {inputContent}
42 |
43 | )}
44 |
45 |
47 |
48 |
49 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/src/components/form/switch/switch.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 |
3 | import { Switch } from "@gouvfr-lasuite/cunningham-react";
4 |
5 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6 | const meta = {
7 | title: "Components/Forms/Switch",
8 | component: Switch,
9 | tags: ["autodocs"],
10 |
11 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
12 | } satisfies Meta{children}
46 |
34 |
40 | ),
41 | };
42 |
43 | export const WithLabelRight: Story = {
44 | render: () => (
45 |
46 |
52 | ),
53 | };
54 |
--------------------------------------------------------------------------------
/src/components/share/users-invitation/index.scss:
--------------------------------------------------------------------------------
1 | .c__add-share-user-list {
2 | display: flex;
3 | align-items: center;
4 | padding: var(--c--globals--spacings--sm);
5 | background-color: var(--c--contextuals--background--surface--tertiary);
6 | border-radius: var(--c--globals--spacings--3xs);
7 | border: 1px solid var(--c--contextuals--border--surface--primary);
8 | gap: var(--c--globals--spacings--3xs);
9 |
10 | &__items {
11 | display: flex;
12 |
13 | flex-wrap: wrap;
14 | gap: var(--c--globals--spacings--3xs);
15 | flex: 1;
16 | }
17 |
18 | &__right-actions {
19 | display: flex;
20 | align-items: center;
21 | gap: var(--c--globals--spacings--xs);
22 | }
23 | }
24 |
25 | .c__add-share-user-item {
26 | display: flex;
27 | align-items: center;
28 | justify-content: center;
29 | gap: var(--c--globals--spacings--3xs);
30 | border-radius: var(--c--globals--spacings--3xs);
31 | height: fit-content;
32 | padding: var(--c--globals--spacings--4xs) var(--c--globals--spacings--4xs)
33 | var(--c--globals--spacings--4xs) var(--c--globals--spacings--xs);
34 | background-color: var(
35 | --c--contextuals--background--semantic--neutral--secondary
36 | );
37 | color: var(--c--contextuals--content--semantic--neutral--primary);
38 | font-size: var(--c--globals--font--sizes--xs);
39 |
40 | .close-icon {
41 | color: var(--c--contextuals--content--semantic--neutral--tertiary);
42 | font-size: var(--c--globals--font--sizes--sm);
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/.storybook/preview.tsx:
--------------------------------------------------------------------------------
1 | import { CunninghamProvider } from "../src/components/Provider/Provider";
2 | import "./../src/index.scss";
3 | import "./../src/styles/fonts.scss";
4 | import "./../src/style-stories.scss";
5 | import type { Preview } from "@storybook/react";
6 | import { DocsContainer } from "@storybook/blocks";
7 | import React from "react";
8 | import { BACKGROUND_COLOR_TO_THEME, getThemeFromGlobals, Themes, themes } from "./theme";
9 |
10 | const DocsWithTheme = (props) => {
11 | const theme = getThemeFromGlobals(props.context.store.userGlobals.globals);
12 | return (
13 |
24 |
26 |
24 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/tabs/tabs.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 |
3 | import { CustomTabs } from "./Tabs";
4 |
5 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6 | const meta = {
7 | title: "Components/Tabs [WIP]",
8 | component: CustomTabs,
9 | tags: ["autodocs"],
10 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
11 | } satisfies Meta
25 |
37 | {leftIcon}
38 |
39 | {languages && (
40 |
47 |
41 |
43 | )}
44 |
45 | {rightIcon}
46 |
37 | {!loading && search}
38 | {loading && (
39 | {
47 | e.stopPropagation();
48 | }}
49 | role="combobox"
50 | value={inputValue}
51 | placeholder={placeholder}
52 | onValueChange={onFilter}
53 | />
54 |
55 | {separator &&
40 |
42 | )}
43 |
31 | {AVATAR_COLORS.map((color) => (
32 |
42 | );
43 | },
44 | };
45 |
46 | export const Small: Story = {
47 | args: {
48 | fullName: "Jules Verne",
49 | size: "small",
50 | },
51 | };
52 | export const Medium: Story = {
53 | args: {
54 | fullName: "John Doe",
55 | size: "medium",
56 | },
57 | };
58 |
59 | export const Large: Story = {
60 | args: {
61 | fullName: "Albert Einstein",
62 | size: "large",
63 | },
64 | };
65 |
66 | export const ComplexName: Story = {
67 | args: {
68 | fullName: "Jean-Philippe De La Rozière",
69 | size: "large",
70 | },
71 | };
72 |
--------------------------------------------------------------------------------
/src/components/share/access/AccessRoleDropdown.tsx:
--------------------------------------------------------------------------------
1 | import { DropdownMenu, DropdownMenuOption } from ":/components/dropdown-menu";
2 |
3 | type AccessRoleDropdownProps = {
4 | selectedRole: string;
5 | roles: DropdownMenuOption[];
6 | onSelect: (role: string) => void;
7 | canUpdate?: boolean;
8 | isOpen?: boolean;
9 | onOpenChange?: (isOpen: boolean) => void;
10 | roleTopMessage?: string;
11 | };
12 |
13 | export const AccessRoleDropdown = ({
14 | roles,
15 | onSelect,
16 | canUpdate = true,
17 | selectedRole,
18 | isOpen,
19 | onOpenChange,
20 | roleTopMessage,
21 | }: AccessRoleDropdownProps) => {
22 | const currentRoleString = roles.find((role) => role.value === selectedRole);
23 |
24 | if (!canUpdate) {
25 | return (
26 |
27 | {currentRoleString?.label}
28 |
29 | );
30 | }
31 | return (
32 |
33 |
40 | ))}
41 | {
54 | onOpenChange?.(!isOpen);
55 | }}
56 | >
57 |
58 | {currentRoleString?.label}
59 |
60 |
61 | {isOpen ? "arrow_drop_up" : "arrow_drop_down"}
62 |
63 |
64 | {children}
;
14 | };
15 |
16 | const roles = [
17 | { label: "Admin", value: "admin" },
18 | { label: "Editor", value: "editor" },
19 | { label: "Viewer", value: "viewer" },
20 | ];
21 |
22 | export const InvitationItem = {
23 | render: () => (
24 |
23 |
28 | {group.startActions?.map((action, index) => {
29 | return (
30 |
34 | {action.content}
35 |
36 | );
37 | })}
38 | {group.elements.map((groupElement, index) => {
39 | return (
40 | {
44 | onSelect?.(groupElement);
45 | }}
46 | >
47 | {renderElement?.(groupElement)}
48 |
49 | );
50 | })}
51 | {group.endActions?.map((action, index) => {
52 | return (
53 |
57 | {action.content}
58 |
59 | );
60 | })}
61 | {group.emptyString && group.elements.length === 0 && (
62 |
63 | {group.emptyString}
64 |
65 | )}
66 |
67 |
68 | );
69 | };
70 |
--------------------------------------------------------------------------------
/src/components/hero/index.scss:
--------------------------------------------------------------------------------
1 | @use "sass:map";
2 | @use "@gouvfr-lasuite/cunningham-react/style" as *;
3 | @use "../../cunningham-tokens-sass" as *;
4 |
5 | $md: map.get($themes, "default", "globals", "breakpoints", "md");
6 | $sm: map.get($themes, "default", "globals", "breakpoints", "sm");
7 |
8 | .c__home-gutter {
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | max-width: 1120px;
13 | padding: 0 3rem;
14 | width: 100%;
15 | margin: auto;
16 | box-sizing: border-box;
17 |
18 | @media (max-width: $sm) {
19 | padding: 1rem;
20 | }
21 | }
22 |
23 | .c__hero {
24 | display: flex;
25 | max-width: 78rem;
26 | width: 100%;
27 | justify-content: space-around;
28 | align-items: center;
29 | height: 100vh;
30 | position: relative;
31 |
32 | * {
33 | box-sizing: border-box;
34 | }
35 |
36 | &__display {
37 | display: flex;
38 | width: 100%;
39 | justify-content: center;
40 | align-items: center;
41 | position: relative;
42 | flex-direction: row;
43 | gap: 1rem;
44 | overflow: auto;
45 |
46 | @media (max-width: $md) {
47 | flex-direction: column;
48 | }
49 |
50 | &__captions {
51 | display: flex;
52 | justify-content: center;
53 | align-items: center;
54 | gap: 0.75rem;
55 | flex-direction: column;
56 | flex-grow: 1;
57 | max-width: 400px;
58 |
59 | @media (max-width: $md) {
60 | max-width: 100%;
61 | }
62 |
63 | > h2 {
64 | font-size: 2.3rem;
65 | font-weight: bold;
66 | color: var(--c--contextuals--content--semantic--neutral--primary);
67 | text-align: center;
68 | margin: 0;
69 | line-height: 45px;
70 | }
71 |
72 | &__subtitle {
73 | font-size: 1.125rem;
74 | color: var(--c--contextuals--content--semantic--neutral--secondary);
75 | text-align: center;
76 | margin-bottom: 1rem;
77 | }
78 | }
79 |
80 | > img {
81 | width: auto;
82 | max-width: 100%;
83 | object-fit: contain;
84 | overflow: auto;
85 | max-height: 100%;
86 | width: 50%;
87 | flex-grow: 1;
88 |
89 | @media (max-width: $md) {
90 | display: none;
91 | }
92 | }
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/datagrid/datagrid.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from "@storybook/react";
2 | import databaseCars from "./resources/databaseCars.json";
3 |
4 | import { Button, DataGrid, SimpleDataGrid } from "@gouvfr-lasuite/cunningham-react";
5 |
6 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
7 | const meta = {
8 | title: "Components/Datagrid",
9 | component: DataGrid,
10 | tags: ["autodocs"],
11 |
12 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
13 | } satisfies Meta
32 |
55 | );
56 | };
57 |
58 | export type ShareSelectedUserItemProps
33 | {users.map((user) => (
34 |
41 |
42 | {rightActions}
43 |
54 |
69 | {user.full_name || user.email}
70 |
78 | );
79 | };
80 |
--------------------------------------------------------------------------------
/src/locales/en-US.json:
--------------------------------------------------------------------------------
1 | {
2 | "components": {
3 | "share": {
4 | "copyLink": "Copy link",
5 | "ok": "Ok",
6 | "shareButton": "Share",
7 | "modalTitle": "Share folder",
8 | "access": {
9 | "delete": "Remove access"
10 | },
11 | "cannot_view": {
12 | "message": "You can view this item but you need additional access to view its members or modify the settings."
13 | },
14 | "invitations": {
15 | "title": "Pending invitations"
16 | },
17 | "members": {
18 | "title_plural": "Shared between {count} people",
19 | "title_singular": "Shared between {count} person",
20 | "load_more": "Show more "
21 | },
22 | "item": {
23 | "add": "Add"
24 | },
25 | "search": {
26 | "placeholder": "Search user",
27 | "group_name": "Search user result"
28 | },
29 | "user": {
30 | "no_result": "No result",
31 | "placeholder": "Search user"
32 | },
33 | "linkSettings": {
34 | "title": "Link settings",
35 | "reach": {
36 | "choices": {
37 | "public": {
38 | "title": "Public",
39 | "description": "Anyone with the link can access the document"
40 | },
41 | "restricted": {
42 | "title": "Private",
43 | "description": "Only users of the space can access the document"
44 | }
45 | }
46 | },
47 | "role": {
48 | "choices": {
49 | "reader": {
50 | "title": "Reader"
51 | },
52 | "editor": {
53 | "title": "Editor"
54 | }
55 | }
56 | }
57 | }
58 | },
59 | "laGaufre": {
60 | "label": "Digital LaSuite services",
61 | "closeLabel": "Close the menu",
62 | "viewMoreLabel": "View more",
63 | "viewLessLabel": "View less",
64 | "loadingText": "Loading…",
65 | "newWindowLabelSuffix": " (new window)",
66 | "headerLabel": "About"
67 | },
68 | "userMenu": {
69 | "term_of_service": "Terms of service",
70 | "manage_account": "Manage account",
71 | "open": "Open user menu",
72 | "close": "Close user menu",
73 | "accountSettings": "Account settings",
74 | "logout": "Logout",
75 | "dialogTitle": "User menu"
76 | },
77 | "treeView": {
78 | "viewMore": "Load more elements"
79 | },
80 | "footer": {
81 | "logo": {
82 | "alt": "Logo of the French government"
83 | }
84 | }
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/public/storybook/logo-uikit-dark.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/storybook/logo-uikit-default.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/form/input/input.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 |
3 | import { Input } from "@gouvfr-lasuite/cunningham-react";
4 |
5 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6 | const meta = {
7 | title: "Components/Forms/Input",
8 | component: Input,
9 | tags: ["autodocs"],
10 |
11 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
12 | } satisfies Meta
18 |
20 | ),
21 | ],
22 | };
23 |
24 | export default meta;
25 | type Story = StoryObj
79 | {option.render ? option.render() : option.label}
80 | {(props.selectedKey === option.value || option.isChecked) && (
81 | check
82 | )}
83 |
84 |
55 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/src/components/tree-view/stories/logo-example.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/components/share/modal/items/ShareMemberItem.tsx:
--------------------------------------------------------------------------------
1 | import { QuickSearchItemTemplate } from ":/components/quick-search";
2 | import { AccessData } from "../../types";
3 | import { UserRow } from ":/components/users/rows/UserRow";
4 | import { Button, useCunningham } from "@gouvfr-lasuite/cunningham-react";
5 | import {
6 | DropdownMenu,
7 | DropdownMenuOption,
8 | useDropdownMenu,
9 | } from ":/components/dropdown-menu";
10 | import { AccessRoleDropdown } from "../../access/AccessRoleDropdown";
11 | import { useMemo } from "react";
12 |
13 | export type ShareMemberItemProps
60 | updateRole?.(invitation, role)}
64 | isOpen={roleDropdown.isOpen}
65 | canUpdate={canUpdate}
66 | onOpenChange={roleDropdown.setIsOpen}
67 | roleTopMessage={roleTopMessage}
68 | />
69 | {showMoreActionsButton && canUpdate && (
70 |
75 |
83 | )}
84 |
85 | }
86 | />
87 |
54 |
93 | );
94 | };
95 |
--------------------------------------------------------------------------------
/src/hooks/useArrowRoving.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 |
3 | /**
4 | * useArrowRoving
5 | *
6 | * Hook to manage keyboard navigation with ArrowLeft / ArrowRight inside a toolbar of actions.
7 | * - ArrowLeft / ArrowRight → move focus between buttons in the same container (roving focus).
8 | * - Enter → still activate the focused button normally, except right after roving
9 | * where the hook suppresses the "phantom click" (to avoid triggering actions by mistake).
10 | *
11 | * Usage:
12 | * const actionsRef = useRef
65 | updateRole?.(accessData, role)}
69 | isOpen={roleDropdown.isOpen}
70 | onOpenChange={roleDropdown.setIsOpen}
71 | canUpdate={canUpdate}
72 | roleTopMessage={roleTopMessage}
73 | />
74 | {options.length > 0 && canUpdate && (
75 |
80 |
88 | )}
89 |
90 | }
91 | />
92 |
17 | *
18 | *
19 | *
20 | * );
21 | */
22 |
23 | export function useArrowRoving(container: HTMLElement | null): void {
24 | useEffect(() => {
25 | if (!container) return;
26 |
27 | let blockNextActivate = false;
28 |
29 | const getButtons = (): HTMLButtonElement[] =>
30 | Array.from(container.querySelectorAll("button")).filter(
31 | (btn): btn is HTMLButtonElement =>
32 | !btn.disabled && btn.getAttribute("aria-disabled") !== "true"
33 | );
34 |
35 | const onKeyDown = (e: KeyboardEvent): void => {
36 | const isArrowKey = e.key === "ArrowLeft" || e.key === "ArrowRight";
37 | const isActivationKey = e.key === " ";
38 | const isHTMLElementTarget = e.target instanceof HTMLElement;
39 | if (!isHTMLElementTarget) return;
40 |
41 | if (isActivationKey) {
42 | const btn = e.target.closest("button");
43 | const isValidButton =
44 | btn instanceof HTMLButtonElement && container.contains(btn);
45 | if (isValidButton) {
46 | btn.click();
47 | }
48 | return;
49 | }
50 |
51 | if (!isArrowKey) return;
52 |
53 | const btn = e.target.closest("button");
54 | const isValidButton =
55 | btn instanceof HTMLButtonElement && container.contains(btn);
56 | if (!isValidButton) return;
57 |
58 | const buttons = getButtons();
59 | const buttonIndex = buttons.indexOf(btn as HTMLButtonElement);
60 | if (buttonIndex < 0) return;
61 |
62 | e.preventDefault();
63 | e.stopPropagation();
64 |
65 | const nextButtonIndex =
66 | e.key === "ArrowRight"
67 | ? (buttonIndex + 1) % buttons.length
68 | : (buttonIndex - 1 + buttons.length) % buttons.length;
69 |
70 | buttons[nextButtonIndex].focus();
71 | blockNextActivate = true;
72 | };
73 |
74 | // Prevents accidental click when pressing Enter/Space right after roving
75 | const onKeyUp = (e: KeyboardEvent): void => {
76 | if (!blockNextActivate) return;
77 | if (e.key === " " || e.key === "Enter") {
78 | e.preventDefault();
79 | e.stopPropagation();
80 | }
81 | blockNextActivate = false;
82 | };
83 |
84 | // Intercept events before they bubble
85 | const options: AddEventListenerOptions = { capture: true };
86 | container.addEventListener("keydown", onKeyDown, options);
87 | container.addEventListener("keyup", onKeyUp, options);
88 |
89 | return () => {
90 | container.removeEventListener("keydown", onKeyDown, options);
91 | container.removeEventListener("keyup", onKeyUp, options);
92 | };
93 | }, [container]);
94 | }
95 |
--------------------------------------------------------------------------------
/.storybook/theme.ts:
--------------------------------------------------------------------------------
1 | import { create } from "@storybook/theming";
2 | import { tokens } from "../src/cunningham-tokens";
3 |
4 | type DesignTokens = typeof tokens.themes.default;
5 |
6 | const buildTheme = (
7 | { globals, contextuals }: DesignTokens,
8 | type: "default" | "dark" = "default"
9 | ) => {
10 | return {
11 | brandUrl: "https://github.com/suitenumerique/cunningham",
12 | brandImage: `storybook/logo-uikit-${type}.svg`,
13 | brandTitle: "La Suite UI Kit",
14 | brandTarget: "_self",
15 |
16 | //
17 | colorPrimary: contextuals.content.semantic.brand.primary, // content.brand.primary
18 | colorSecondary: contextuals.content.semantic.brand.primary, // content.brand.secondary
19 |
20 | fontBase: globals.font.families.base,
21 |
22 | // UI
23 | appBg: contextuals.background.surface.secondary, // background.surface.tertiary
24 | appContentBg: contextuals.background.surface.tertiary, // background.surface.primary
25 | appBorderColor: contextuals.border.surface.primary, // border.surface.primary
26 | appBorderRadius: 4,
27 |
28 | // Text colors
29 | textColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
30 | textInverseColor: contextuals.content.semantic.neutral.secondary, // content.neutral.secondary
31 | textMutedColor: contextuals.content.semantic.neutral.tertiary,
32 |
33 | // Toolbar default and active colors
34 | barTextColor: contextuals.content.semantic.neutral.tertiary, // content.neutral.tertiary
35 | barSelectedColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
36 | barSelectedTextColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
37 | barBg: contextuals.background.surface.primary, // background.surface.primary
38 |
39 | // Form colors
40 | inputBg: contextuals.background.surface.primary, // background.surface.primary
41 | inputBorder: contextuals.border.semantic.neutral.secondary, // border.neutral.secondary
42 | inputTextColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
43 | inputBorderRadius: 2,
44 |
45 | // Code preview colors
46 | codeBg: contextuals.background.surface.secondary, // background.surface.secondary
47 | codeColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
48 | };
49 | };
50 |
51 | export const themes = {
52 | default: create({
53 | base: "light",
54 | ...buildTheme(tokens.themes.default),
55 | }),
56 | dark: create({
57 | base: "dark",
58 | ...buildTheme(tokens.themes.dark as DesignTokens, "dark"),
59 | }),
60 | };
61 |
62 | export const Themes = {
63 | 'dsfr-light': ['dsfr-light', 'DSFR light'],
64 | 'dsfr-dark': ['dsfr-dark', 'DSFR dark'],
65 | 'white-label-light': ['default', 'White label light'],
66 | 'white-label-dark': ['dark', 'White label dark'],
67 | 'anct-light': ['anct-light', 'ANCT light'],
68 | 'anct-dark': ['anct-dark', 'ANCT dark'],
69 | }
70 |
71 | export const BACKGROUND_COLOR_TO_THEME = {
72 | "#FEFFFF": 'dsfr-light',
73 | "#2B303D": 'dsfr-dark',
74 | "#FFFEFF": 'anct-light',
75 | "#283044": 'anct-dark',
76 | "#FFFFFF": 'white-label-light',
77 | "#2F2F40": 'white-label-dark',
78 | };
79 |
80 | export const getThemeFromGlobals = (globals): string => {
81 | const themeKey = BACKGROUND_COLOR_TO_THEME[globals.backgrounds?.value] ?? 'dsfr-light';
82 | return Themes[themeKey][0];
83 | };
84 |
--------------------------------------------------------------------------------
/src/components/dropdown-menu/DropdownMenu.tsx:
--------------------------------------------------------------------------------
1 | import { Menu, MenuItem, Popover, Separator } from "react-aria-components";
2 | import { DropdownMenuOption } from "./types";
3 | import { Fragment, PropsWithChildren, useId, useRef } from "react";
4 |
5 | export type DropdownMenuProps = {
6 | options: DropdownMenuOption[];
7 | onOpenChange?: (isOpen: boolean) => void;
8 | selectedValues?: string[];
9 | onSelectValue?: (value: string) => void;
10 | isOpen?: boolean;
11 | topMessage?: string;
12 | shouldCloseOnInteractOutside?: (element: Element) => boolean;
13 | };
14 |
15 | export const DropdownMenu = ({
16 | options,
17 | isOpen = false,
18 | onOpenChange,
19 | children,
20 | selectedValues = [],
21 | onSelectValue,
22 | topMessage,
23 | shouldCloseOnInteractOutside,
24 | }: PropsWithChildren {
38 | e.stopPropagation();
39 | e.preventDefault();
40 | }}
41 | >
42 | {children}
43 |
44 |
45 |
68 |
69 | {selected && (
70 | setOpen(false)}
78 | size={ModalSize.LARGE}
79 | >
80 |
81 |
97 |
98 |
99 | );
100 | },
101 | };
102 |
--------------------------------------------------------------------------------
/src/components/quick-search/quick-search-global-style.scss:
--------------------------------------------------------------------------------
1 | .quick-search-container {
2 | [cmdk-root] {
3 | width: 100%;
4 |
5 | border-radius: 12px;
6 | overflow: hidden;
7 | transition: transform 100ms ease;
8 | outline: none;
9 | }
10 |
11 | [cmdk-input] {
12 | border: none;
13 | width: 100%;
14 | font-size: 17px;
15 | background: var(--c--contextuals--background--surface--primary);
16 | outline: none;
17 | color: var(--c--contextuals--content--semantic--neutral--primary);
18 | border-radius: 0;
19 |
20 | &::placeholder {
21 | color: var(--c--contextuals--content--semantic--neutral--tertiary);
22 | }
23 | }
24 |
25 | [cmdk-item] {
26 | content-visibility: auto;
27 | cursor: pointer;
28 | border-radius: var(--c--globals--spacings--xs);
29 | font-size: 14px;
30 | display: flex;
31 | align-items: center;
32 | gap: 8px;
33 | user-select: none;
34 | will-change: background, color;
35 | transition: all 150ms ease;
36 | transition-property: none;
37 |
38 | .show-right-on-focus {
39 | opacity: 0;
40 | }
41 |
42 | &:hover,
43 | &[data-selected="true"] {
44 | background: var(
45 | --c--contextuals--background--semantic--neutral--tertiary
46 | );
47 | .show-right-on-focus {
48 | opacity: 1;
49 | }
50 | }
51 |
52 | &[data-disabled="true"] {
53 | background: var(
54 | var(--c--contextuals--background--semantic--disabled--primary)
55 | );
56 | cursor: not-allowed;
57 | }
58 |
59 | & + [cmdk-item] {
60 | margin-top: 4px;
61 | }
62 | }
63 |
64 | [cmdk-list] {
65 | flex: 1;
66 | overflow-y: auto;
67 | overscroll-behavior: contain;
68 | }
69 |
70 | [cmdk-vercel-shortcuts] {
71 | display: flex;
72 | margin-left: auto;
73 | gap: 8px;
74 |
75 | kbd {
76 | font-size: 12px;
77 | min-width: 20px;
78 | padding: 4px;
79 | height: 20px;
80 | border-radius: 4px;
81 | color: white;
82 | background: var(
83 | --c--contextuals--background--semantic--neutral--tertiary
84 | );
85 | display: inline-flex;
86 | align-items: center;
87 | justify-content: center;
88 | text-transform: uppercase;
89 | }
90 | }
91 |
92 | [cmdk-separator] {
93 | height: 1px;
94 | width: 100%;
95 | background: var(--c--contextuals--background--semantic--neutral--tertiary);
96 | margin: 4px 0;
97 | }
98 |
99 | *:not([hidden]) + [cmdk-group] {
100 | margin-top: 8px;
101 | }
102 |
103 | [cmdk-group-heading] {
104 | user-select: none;
105 | font-size: var(--c--globals--font--sizes--sm);
106 | color: var(--c--contextuals--content--semantic--neutral--primary);
107 | font-weight: bold;
108 |
109 | display: flex;
110 | align-items: center;
111 | margin-bottom: var(--c--globals--spacings--xs);
112 | }
113 | }
114 |
115 | .c__modal__scroller:has(.quick-search-container),
116 | .c__modal__scroller:has(.no-padding),
117 | .c__modal__scroller:has(.noPadding) {
118 | padding: 0 !important;
119 |
120 | .c__modal__close .c__button {
121 | right: 5px;
122 | top: 5px;
123 | padding: 1.5rem 1rem;
124 | }
125 |
126 | .c__modal__title {
127 | font-size: var(--c--globals--font--sizes--xs);
128 | padding: var(--c--globals--spacings--sm) var(--c--globals--spacings--base);
129 | margin-bottom: 0;
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/src/components/language/language-picker.tsx:
--------------------------------------------------------------------------------
1 | import { Button, ButtonProps } from "@gouvfr-lasuite/cunningham-react";
2 | import { useEffect, useMemo, useState } from "react";
3 | import {
4 | useDropdownMenu,
5 | DropdownMenu,
6 | DropdownMenuOption,
7 | } from ":/components/dropdown-menu";
8 | import { Icon, IconSize } from ":/components/icon";
9 |
10 | export type LanguagesOption = DropdownMenuOption & {
11 | shortLabel?: string;
12 | };
13 |
14 | export type LanguagePickerProps = {
15 | languages: LanguagesOption[];
16 | onChange?: (language: string) => void;
17 | color?: ButtonProps["color"];
18 | variant?: ButtonProps["variant"];
19 | size?: ButtonProps["size"];
20 | fullWidth?: ButtonProps["fullWidth"];
21 | compact?: boolean;
22 | };
23 |
24 | /**
25 | * A DropdownMenu specific to languages.
26 | *
27 | * **Props:**
28 | * - `languages`: The languages options (use `isChecked` attribute to set the default selected language).
29 | * - `onChange`: A callback called when a language is selected.
30 | * - `size`: The size of the CTA.
31 | * - `color`: The color of the CTA.
32 | */
33 | export const LanguagePicker = ({
34 | languages,
35 | onChange,
36 | size,
37 | color = "brand",
38 | variant = "tertiary",
39 | fullWidth,
40 | compact: lightMode = false,
41 | }: LanguagePickerProps) => {
42 | const { isOpen, setIsOpen } = useDropdownMenu();
43 | const getInitialLanguage = () => {
44 | const selectedLanguage = languages.find((lang) => lang.isChecked);
45 | return selectedLanguage?.value ?? languages[0].value!;
46 | };
47 | const [selectedLanguage, setSelectedLanguage] =
48 | useState
71 | Selected: {selected.name}
72 |
73 | )}
74 |
75 |
82 | {
85 | setSelected(element);
86 | setOpen(false);
87 | }}
88 | renderElement={(element) => (
89 | {element.name}}
91 | right={add}
92 | />
93 | )}
94 | />
95 |
96 |
18 | {/* 👇 Decorators in Storybook also accept a function. Replace
21 | ),
22 | ],
23 | };
24 |
25 | export default meta;
26 | type Story = StoryObj
48 | file_present File
49 |
50 | ),
51 | value: "file",
52 | },
53 | {
54 | label: "Folder",
55 | value: "folder",
56 | showSeparator: true,
57 |
58 | render: () => (
59 |
60 | folder Folder
61 |
62 | ),
63 | },
64 | {
65 | label: "Reset",
66 | render: () => (
67 |
68 | all_inclusive All
69 |
70 | ),
71 | value: "all",
72 | },
73 | ];
74 |
75 | export const Uncontrolled: Story = {
76 | args: {
77 | label: "Type",
78 | options: OPTIONS,
79 | },
80 | };
81 |
82 | export const UncontrolledWithDefault: Story = {
83 | args: {
84 | label: "Type",
85 | defaultSelectedKey: "folder",
86 | options: OPTIONS,
87 | },
88 | };
89 |
90 | export const Controlled: Story = {
91 | args: {
92 | label: "Type",
93 | options: OPTIONS_CUSTOM,
94 | },
95 | render: (args) => {
96 | // eslint-disable-next-line react-hooks/rules-of-hooks
97 | const [selected, setSelected] = useState
100 | {
104 | if (key === "all") {
105 | setSelected(null);
106 | } else {
107 | setSelected(key);
108 | }
109 | }}
110 | />
111 |
129 | );
130 | },
131 | };
132 |
--------------------------------------------------------------------------------
/src/components/modal/modal.stories.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Input,
4 | Modal,
5 | ModalSize,
6 | useModal,
7 | } from "@gouvfr-lasuite/cunningham-react";
8 | import type { Meta, StoryObj } from "@storybook/react";
9 | import { useEffect } from "react";
10 |
11 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
12 | const meta = {
13 | title: "Components/Modal",
14 | component: Modal,
15 | args: {
16 | children: "Description",
17 | title: "Title",
18 | isOpen: false,
19 | onClose: () => {},
20 | },
21 | decorators: [
22 | (Story, context) => {
23 | const modal = useModal();
24 |
25 | useEffect(() => {
26 | modal.open();
27 | // eslint-disable-next-line react-hooks/exhaustive-deps
28 | }, []);
29 |
30 | return (
31 | <>
32 |
33 |
112 |
115 |
127 |
128 | 127 |
128 | You will receive a confirmation email shortly with the details of your 129 | submission. If there are any further steps required our team will be in 130 | touch. 131 | 132 | ), 133 | rightActions: , 134 | }, 135 | }; 136 | --------------------------------------------------------------------------------