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/badge/badge.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { HTMLAttributes, PropsWithChildren } from "react";
3 | import { BadgeType } from "./types";
4 |
5 | type BadgeProps = HTMLAttributes
16 | {children}
17 |
18 | );
19 | };
20 |
21 | export default Badge;
22 |
--------------------------------------------------------------------------------
/src/components/badge/index.scss:
--------------------------------------------------------------------------------
1 | .c__badge {
2 | display: inline-flex;
3 | text-align: center;
4 | line-height: 1em;
5 | font-size: var(--c--components--badge--font-size);
6 | padding-inline: var(--c--components--badge--padding-inline);
7 | padding-block: var(--c--components--badge--padding-block);
8 | border-radius: var(--c--components--badge--border-radius);
9 | font-weight: 600;
10 | font-variant-numeric: tabular-nums;
11 | }
12 |
13 | .c__badge--uppercased {
14 | text-transform: uppercase;
15 | letter-spacing: 0.05em;
16 | }
17 |
18 | .c__badge--accent {
19 | background-color: var(--c--components--badge--accent--background-color);
20 | color: var(--c--components--badge--accent--color);
21 | }
22 |
23 | .c__badge--neutral {
24 | background-color: var(--c--components--badge--neutral--background-color);
25 | color: var(--c--components--badge--neutral--color);
26 | }
27 |
28 | .c__badge--danger {
29 | background-color: var(--c--components--badge--danger--background-color);
30 | color: var(--c--components--badge--danger--color);
31 | }
32 |
33 | .c__badge--success {
34 | background-color: var(--c--components--badge--success--background-color);
35 | color: var(--c--components--badge--success--color);
36 | }
37 |
38 | .c__badge--warning {
39 | background-color: var(--c--components--badge--warning--background-color);
40 | color: var(--c--components--badge--warning--color);
41 | }
42 |
43 | .c__badge--info {
44 | background-color: var(--c--components--badge--info--background-color);
45 | color: var(--c--components--badge--info--color);
46 | }
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/src/components/badge/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./badge";
--------------------------------------------------------------------------------
/src/components/badge/types.ts:
--------------------------------------------------------------------------------
1 | export type BadgeType =
2 | | "accent"
3 | | "neutral"
4 | | "danger"
5 | | "success"
6 | | "warning"
7 | | "info";
--------------------------------------------------------------------------------
/src/components/button/ProConnectButton.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@openfun/cunningham-react";
2 |
3 | export type ProConnectButtonProps = {
4 | disabled?: boolean;
5 | onClick?: () => void;
6 | };
7 | export const ProConnectButton = ({
8 | disabled,
9 | onClick,
10 | }: ProConnectButtonProps) => {
11 | return (
12 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/components/button/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./ProConnectButton";
2 |
--------------------------------------------------------------------------------
/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 "@openfun/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
21 | {props.children}
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/dnd/Droppable.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | import { Data, useDroppable } from "@dnd-kit/core";
3 | import { useEffect } from "react";
4 |
5 | type DroppableProps
24 | {props.children}
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/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 |
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/filter/Filter.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment, useContext } from "react";
2 | import {
3 | Button,
4 | Label,
5 | ListBox,
6 | ListBoxItem,
7 | Popover,
8 | Select,
9 | SelectProps,
10 | SelectStateContext,
11 | Separator,
12 | } from "react-aria-components";
13 |
14 | import { Option } from "@openfun/cunningham-react";
15 | import clsx from "clsx";
16 |
17 | export type FilterOption = Option & {
18 | showSeparator?: boolean;
19 | isChecked?: boolean;
20 | };
21 |
22 | export type FilterProps = {
23 | label: string;
24 | options: FilterOption[];
25 | } & SelectProps;
26 |
27 | export const Filter = (props: FilterProps) => {
28 | return (
29 |
32 | );
33 | };
34 |
35 | const FilterInner = (props: FilterProps) => {
36 | const state = useContext(SelectStateContext);
37 |
38 | const selectedOption = state?.selectedItem
39 | ? props.options.find((option) => option.value === state.selectedItem?.key)
40 | : null;
41 |
42 | return (
43 | <>
44 |
69 |
112 |
115 |
127 |
128 |
79 | {option.render ? option.render() : option.label}
80 | {(props.selectedKey === option.value || option.isChecked) && (
81 | check
82 | )}
83 |
84 |
19 |
20 | {children}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/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--theme--spacings--xs);
6 | padding: var(--c--theme--spacings--3xs);
7 |
8 | &.left {
9 | flex-direction: row-reverse;
10 | }
11 |
12 | &:hover {
13 | cursor: pointer;
14 | background-color: var(--c--theme--colors--greyscale-100);
15 | }
16 | }
17 |
18 | .suite__label__container {
19 | display: flex;
20 | flex-direction: column;
21 |
22 | label {
23 | font-size: var(--c--theme--font--sizes--sm);
24 | font-weight: var(--c--theme--font--weights--medium);
25 | color: var(--c--theme--colors--greyscale-1000);
26 | }
27 |
28 | &__description {
29 | font-weight: 400;
30 | font-size: var(--c--theme--font--sizes--s);
31 | color: var(--c--theme--colors--greyscale-600);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/form/label/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./WithLabel";
2 |
--------------------------------------------------------------------------------
/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
10 |
11 | {text && (
12 | {text}
13 | )}
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/components/form/label/with-label.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryFn, StoryObj } from "@storybook/react";
2 |
3 | import { WithLabel } from "./WithLabel";
4 | import { DropdownMenu } from ":/components/dropdown-menu/DropdownMenu";
5 | import { Button } from "@openfun/cunningham-react";
6 | import { useState } from "react";
7 |
8 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
9 | const meta = {
10 | title: "Components/Forms/WithLabel",
11 | component: WithLabel,
12 | tags: ["autodocs"],
13 |
14 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
15 | } satisfies Meta
34 |
40 | ),
41 | };
42 |
43 | export const WithLabelRight: Story = {
44 | render: () => (
45 |
46 |
52 | ),
53 | };
54 |
--------------------------------------------------------------------------------
/src/components/form/textarea/index.scss:
--------------------------------------------------------------------------------
1 | .c__textarea__wrapper:not(.c__textarea__wrapper--disabled):hover {
2 | box-shadow: var(--c--components--forms-textarea--box-shadow--color--hover) 0 0
3 | 0 1px;
4 | border-color: var(--c--components--forms-textarea--box-shadow--color--hover);
5 | }
6 |
7 | .c__textarea__wrapper:not(.c__textarea__wrapper--disabled):focus-within {
8 | box-shadow: var(--c--components--forms-textarea--box-shadow--color--focus) 0 0
9 | 0 1px;
10 | border-color: var(--c--components--forms-textarea--box-shadow--color--focus);
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/form/textarea/textarea.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 |
3 | import { TextArea } from "@openfun/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/TextArea",
8 | component: TextArea,
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
,
28 | banner: "/storybook/hero-image.png",
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/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 |
18 |
28 | );
29 | };
30 |
31 | export const HomeGutter = ({ children }: { children: React.ReactNode }) => {
32 | return
19 | 
26 |
27 |
20 | {logo}
21 |
25 | {title}
22 | {subtitle} 23 | {mainButton ? mainButton :{children}
;
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/hero/index.scss:
--------------------------------------------------------------------------------
1 | @use "sass:map";
2 | @use "@openfun/cunningham-react/style" as *;
3 | @use "../../cunningham-tokens-sass" as *;
4 |
5 | $md: map.get($themes, "default", "theme", "breakpoints", "md");
6 | $sm: map.get($themes, "default", "theme", "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--themes--colorc--greyscale-800);
67 | text-align: center;
68 | margin: 0;
69 | line-height: 45px;
70 | }
71 |
72 | span {
73 | font-size: 1.125rem;
74 | color: var(--c--themes--colorc--greyscale-700);
75 | text-align: center;
76 | margin-bottom: 1rem;
77 | }
78 | }
79 |
80 | > img {
81 | width: auto;
82 | max-width: 100%;
83 | height: fit-content;
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/icon/Icon.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import clsx from "clsx";
3 | import { IconSize, IconType } from "./types";
4 |
5 | export type IconProps = {
6 | /**
7 | * The name of the Material Icon to display
8 | */
9 | name: string;
10 |
11 | /**
12 | * The type of the icon
13 | */
14 | type?: IconType;
15 |
16 | /**
17 | * The size of the icon
18 | */
19 | size?: IconSize | number;
20 | /**
21 | * Custom CSS class name
22 | */
23 | className?: string;
24 | /**
25 | * Custom color for the icon
26 | */
27 | color?: string;
28 |
29 | /**
30 | * Additional props to pass to the span element
31 | */
32 | [key: string]: unknown;
33 | };
34 |
35 | export const Icon: React.FC
24 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/layout/header/index.scss:
--------------------------------------------------------------------------------
1 | @use "../../../styles/_variables";
2 |
3 | .c__header {
4 | display: flex;
5 | background-color: var(--c--theme--colors--greyscale-000);
6 | border-bottom: 1px solid var(--c--theme--colors--greyscale-200);
7 | justify-content: space-between;
8 | align-items: center;
9 | height: variables.$header-height;
10 | min-height: variables.$header-height;
11 | max-height: variables.$header-height;
12 | padding: 0 1.125rem;
13 |
14 | @media screen and (max-width: 1024px) {
15 | padding: 0 1rem;
16 | }
17 |
18 | &__toggle-menu {
19 | display: none;
20 |
21 | @media screen and (max-width: 1024px) {
22 | display: block;
23 | }
24 |
25 | &__icon {
26 | color: var(--c--theme--colors--primary-800);
27 | }
28 | }
29 |
30 | &__left,
31 | &__right {
32 | display: flex;
33 | align-items: center;
34 | }
35 |
36 | &__right {
37 | display: flex;
38 | align-items: center;
39 |
40 | &__language-picker {
41 | @media screen and (max-width: 1024px) {
42 | display: none;
43 | }
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/layout/header/logo-exemple.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/components/layout/index.scss:
--------------------------------------------------------------------------------
1 | @use "./../../styles/variables";
2 |
3 | .c__main-layout {
4 | display: flex;
5 | flex-direction: column;
6 | height: 100dvh;
7 | }
8 |
9 | .c__main-layout__header {
10 | position: fixed;
11 | top: 0;
12 | left: 0;
13 | right: 0;
14 | z-index: 1000;
15 | }
16 |
17 | .c__main-layout__content {
18 | width: 100%;
19 | height: 100%;
20 | display: flex;
21 | margin-top: variables.$header-height;
22 |
23 | &__left-panel {
24 | height: calc(100dvh - variables.$header-height);
25 | width: 300px;
26 | border-right: 1px solid var(--c--theme--colors--greyscale-200);
27 | @media screen and (max-width: 1024px) {
28 | width: 100dvw;
29 | }
30 | }
31 | &__center {
32 | display: flex;
33 |
34 | &__children {
35 | height: calc(100dvh - variables.$header-height);
36 | width: 100%;
37 | flex: 1;
38 | overflow-y: auto;
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/layout/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./header/Header";
2 | export * from "./left-panel/LeftPanel";
3 | export * from "./MainLayout";
4 | export * from "./utils";
5 |
--------------------------------------------------------------------------------
/src/components/layout/left-panel/LeftPanel.tsx:
--------------------------------------------------------------------------------
1 | import { useResponsive } from ":/hooks/useResponsive";
2 | import clsx from "clsx";
3 | import { PropsWithChildren } from "react";
4 |
5 | export type LeftPanelProps = {
6 | isOpen?: boolean;
7 | };
8 | export const LeftPanel = ({
9 | children,
10 | isOpen = false,
11 | }: PropsWithChildren
25 |
37 | {leftIcon}
38 |
39 | {languages && (
40 |
47 |
41 |
43 | )}
44 |
45 | {rightIcon}
46 |
21 | {children}
22 |
23 | );
24 | }
25 |
26 | return {children}
;
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/layout/left-panel/index.scss:
--------------------------------------------------------------------------------
1 | .c__left-panel {
2 | display: flex;
3 | overflow-y: auto;
4 | height: calc(100dvh - 52px);
5 | flex-direction: column;
6 | gap: 1rem;
7 | width: 100%;
8 |
9 | background-color: var(--c--theme--colors--greyscale-000);
10 | }
11 |
12 | .c__left-panel__mobile {
13 | z-index: 999;
14 | width: 100dvw;
15 |
16 | height: calc(100dvh - 52px);
17 | overflow-y: auto;
18 | border-right: 1px solid var(--c--theme--colors--greyscale-200);
19 | position: fixed;
20 | background-color: var(--c--theme--colors--greyscale-000);
21 | transition: transform 0.15s ease-in-out;
22 | transform: translateX(-100dvw);
23 |
24 | &.open {
25 | transform: translateX(0);
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/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/layout/right-panel/index.scss:
--------------------------------------------------------------------------------
1 | .c__right-panel {
2 | height: calc(100dvh - 52px);
3 |
4 | width: 0;
5 | border-left: 1px solid var(--c--theme--colors--greyscale-200);
6 | transition: width 0.15s ease-in-out;
7 | overflow-y: auto;
8 |
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--theme--colors--greyscale-000);
21 | transition: transform 0.15s ease-in-out;
22 | transform: translateX(100dvw);
23 |
24 | &.open {
25 | transform: translateX(0);
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/layout/utils.ts:
--------------------------------------------------------------------------------
1 | export const headerHeight = 52;
2 |
--------------------------------------------------------------------------------
/src/components/loader/Spinner.tsx:
--------------------------------------------------------------------------------
1 | type SpinnerProps = {
2 | size?: "sm" | "md" | "lg" | "xl";
3 | };
4 |
5 | export const Spinner = ({ size = "sm" }: SpinnerProps) => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/components/loader/index.scss:
--------------------------------------------------------------------------------
1 | .c__spinner {
2 | border-radius: 50%;
3 | background: radial-gradient(farthest-side, #cecece 94%, #0000) top/3.8px 3.8px
4 | no-repeat,
5 | conic-gradient(#0000 30%, #cecece);
6 | -webkit-mask: radial-gradient(
7 | farthest-side,
8 | #0000 calc(100% - 3.8px),
9 | #000 0
10 | );
11 | animation: spinner-c7wet2 1s infinite linear;
12 | &.sm {
13 | width: 16px;
14 | height: 16px;
15 | }
16 |
17 | &.md {
18 | width: 24px;
19 | height: 24px;
20 | }
21 |
22 | &.lg {
23 | width: 32px;
24 | height: 32px;
25 | }
26 |
27 | &.xl {
28 | width: 40px;
29 | height: 40px;
30 | }
31 | }
32 |
33 | .spinner {
34 | }
35 |
36 | @keyframes spinner-c7wet2 {
37 | 100% {
38 | transform: rotate(1turn);
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/loader/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./Spinner";
2 |
--------------------------------------------------------------------------------
/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 Meta127 |
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 | -------------------------------------------------------------------------------- /src/components/quick-search/QuickSearch.tsx: -------------------------------------------------------------------------------- 1 | import { Command } from "cmdk"; 2 | import { ReactNode, useRef } from "react"; 3 | import { QuickSearchInput } from "./QuickSearchInput"; 4 | import { hasChildrens } from ":/utils/children"; 5 | 6 | export type QuickSearchProps = { 7 | onFilter?: (str: string) => void; 8 | inputValue?: string; 9 | inputContent?: ReactNode; 10 | showInput?: boolean; 11 | loading?: boolean; 12 | label?: string; 13 | placeholder?: string; 14 | children?: ReactNode; 15 | }; 16 | 17 | export const QuickSearch = ({ 18 | onFilter, 19 | inputContent, 20 | inputValue, 21 | loading, 22 | showInput = true, 23 | label, 24 | placeholder, 25 | children, 26 | }: QuickSearchProps) => { 27 | const ref = useRef
32 |
33 | {showInput && (
34 |
41 | {inputContent}
42 |
43 | )}
44 |
45 |
47 |
48 |
49 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/src/components/quick-search/QuickSearchGroup.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { Command } from "cmdk";
3 |
4 | import { QuickSearchData } from "./types";
5 | import { QuickSearchItem } from "./QuickSearchItem";
6 |
7 | export type QuickSearchGroupProps{children}
46 |
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 | {group.emptyString}
63 | )}
64 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/src/components/quick-search/QuickSearchInput.tsx:
--------------------------------------------------------------------------------
1 | import { Command } from "cmdk";
2 | import { ReactNode } from "react";
3 | import { Spinner } from ":/components/loader/Spinner";
4 | import { useCunningham } from "@openfun/cunningham-react";
5 | import { HorizontalSeparator } from ":/components/separator/HorizontalSeparator";
6 |
7 | type Props = {
8 | loading?: boolean;
9 | inputValue?: string;
10 | onFilter?: (str: string) => void;
11 | placeholder?: string;
12 | children?: ReactNode;
13 | withSeparator?: boolean;
14 | };
15 | export const QuickSearchInput = ({
16 | loading,
17 | inputValue,
18 | onFilter,
19 | placeholder,
20 | children,
21 | withSeparator: separator = true,
22 | }: Props) => {
23 | const { t } = useCunningham();
24 |
25 | if (children) {
26 | return (
27 | <>
28 | {children}
29 | {separator &&
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 |
19 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/quick-search/index.scss:
--------------------------------------------------------------------------------
1 | .quick-search-input-container {
2 | display: flex;
3 | align-items: center;
4 | gap: var(--c--theme--spacings--2xs);
5 | padding: var(--c--theme--spacings--xs) var(--c--theme--spacings--base);
6 | margin-top: var(--c--theme--spacings--xs);
7 | }
8 |
9 | .c__quick-search-item-template {
10 | display: flex;
11 | padding: var(--c--theme--spacings--3xs, 0.25rem)
12 | var(--c--theme--spacings--2xs, 0.375rem);
13 | justify-content: space-between;
14 | width: 100%;
15 | align-items: center;
16 |
17 | &__left {
18 | display: flex;
19 | align-items: center;
20 | gap: var(--c--theme--spacings--2xs);
21 | width: 100%;
22 | }
23 |
24 | &__right {
25 | display: flex;
26 | align-items: center;
27 | justify-content: flex-end;
28 | }
29 |
30 | &__right:not(.always-show-right) {
31 | opacity: 0;
32 | }
33 |
34 | &__right.always-show-right {
35 | opacity: 1 !important;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/quick-search/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./QuickSearch";
2 | export * from "./QuickSearchGroup";
3 | export * from "./QuickSearchItem";
4 | export * from "./QuickSearchInput";
5 | export * from "./QuickSearchItemTemplate";
6 | export * from "./types";
7 |
--------------------------------------------------------------------------------
/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: white;
16 | outline: none;
17 | color: var(--c--theme--colors--greyscale-1000);
18 | border-radius: 0;
19 |
20 | &::placeholder {
21 | color: var(--c--theme--colors--greyscale-500);
22 | }
23 | }
24 |
25 | [cmdk-item] {
26 | content-visibility: auto;
27 | cursor: pointer;
28 | border-radius: var(--c--theme--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(--c--theme--colors--greyscale-100);
45 | .show-right-on-focus {
46 | opacity: 1;
47 | }
48 | }
49 |
50 | &[data-disabled="true"] {
51 | color: var(--c--theme--colors--greyscale-500);
52 | cursor: not-allowed;
53 | }
54 |
55 | & + [cmdk-item] {
56 | margin-top: 4px;
57 | }
58 | }
59 |
60 | [cmdk-list] {
61 | flex: 1;
62 | overflow-y: auto;
63 | overscroll-behavior: contain;
64 | }
65 |
66 | [cmdk-vercel-shortcuts] {
67 | display: flex;
68 | margin-left: auto;
69 | gap: 8px;
70 |
71 | kbd {
72 | font-size: 12px;
73 | min-width: 20px;
74 | padding: 4px;
75 | height: 20px;
76 | border-radius: 4px;
77 | color: white;
78 | background: var(--c--theme--colors--greyscale-500);
79 | display: inline-flex;
80 | align-items: center;
81 | justify-content: center;
82 | text-transform: uppercase;
83 | }
84 | }
85 |
86 | [cmdk-separator] {
87 | height: 1px;
88 | width: 100%;
89 | background: var(--c--theme--colors--greyscale-500);
90 | margin: 4px 0;
91 | }
92 |
93 | *:not([hidden]) + [cmdk-group] {
94 | margin-top: 8px;
95 | }
96 |
97 | [cmdk-group-heading] {
98 | user-select: none;
99 | font-size: var(--c--theme--font--sizes--sm);
100 | color: var(--c--theme--colors--greyscale-700);
101 | font-weight: bold;
102 |
103 | display: flex;
104 | align-items: center;
105 | margin-bottom: var(--c--theme--spacings--xs);
106 | }
107 | }
108 |
109 | .c__modal__scroller:has(.quick-search-container),
110 | .c__modal__scroller:has(.noPadding) {
111 | padding: 0 !important;
112 |
113 | .c__modal__close .c__button {
114 | right: 5px;
115 | top: 5px;
116 | padding: 1.5rem 1rem;
117 | }
118 |
119 | .c__modal__title {
120 | font-size: var(--c--theme--font--sizes--xs);
121 |
122 | padding: var(--c--theme--spacings--base);
123 | margin-bottom: 0;
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/src/components/quick-search/quick-search.stories.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/rules-of-hooks */
2 | import type { Meta, StoryObj } from "@storybook/react";
3 |
4 | import { QuickSearch } from "./QuickSearch";
5 | import { QuickSearchGroup } from "./QuickSearchGroup";
6 | import { Button, Modal, ModalSize } from "@openfun/cunningham-react";
7 | import { useState } from "react";
8 | import { QuickSearchData } from "./types";
9 | import { QuickSearchItemTemplate } from "./QuickSearchItemTemplate";
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/QuickSearch",
14 | component: QuickSearch,
15 |
16 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
17 | } satisfies Meta{left}
20 |
21 | {isDesktop && right && (
22 |
28 | {right}
29 |
30 | )}
31 |
68 |
69 | {selected && (
70 | setOpen(false)}
78 | size={ModalSize.LARGE}
79 | >
80 |
81 |
97 |
98 |
99 | );
100 | },
101 | };
102 |
--------------------------------------------------------------------------------
/src/components/quick-search/types.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | export type QuickSearchAction = {
4 | onSelect?: () => void; // for the keyboard selection with
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 |
20 |
24 | );
25 | },
26 | };
27 |
28 | export const WithoutPadding: Story = {
29 | render: () => {
30 | return (
31 | Up
21 | Down
23 |
32 |
36 | );
37 | },
38 | };
39 |
--------------------------------------------------------------------------------
/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 | {currentRoleString?.label}
27 | );
28 | }
29 | return (
30 | Content
33 | Content
35 | {
52 | onOpenChange?.(!isOpen);
53 | }}
54 | >
55 |
56 | {currentRoleString?.label}
57 |
58 |
59 | {isOpen ? "arrow_drop_up" : "arrow_drop_down"}
60 |
61 |
62 |
21 | {t("components.share.item.add")}
22 | add
23 |
24 | }
25 | />
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/share/modal/items/ShareInvitationItem.tsx:
--------------------------------------------------------------------------------
1 | import { QuickSearchItemTemplate } from ":/components/quick-search";
2 | import { InvitationData } from "../../types";
3 | import { UserRow } from ":/components/users/rows/UserRow";
4 | import { Button, useCunningham } from "@openfun/cunningham-react";
5 | import {
6 | DropdownMenu,
7 | DropdownMenuOption,
8 | useDropdownMenu,
9 | } from ":/components/dropdown-menu";
10 | import { AccessRoleDropdown } from "../../access/AccessRoleDropdown";
11 |
12 | export type ShareInvitationItemProps
53 |
85 | );
86 | };
87 |
--------------------------------------------------------------------------------
/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 "@openfun/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
58 | updateRole?.(invitation, role)}
62 | isOpen={roleDropdown.isOpen}
63 | canUpdate={canUpdate}
64 | onOpenChange={roleDropdown.setIsOpen}
65 | roleTopMessage={roleTopMessage}
66 | />
67 | {canUpdate && (
68 |
73 |
80 | )}
81 |
82 | }
83 | />
84 |
54 |
92 | );
93 | };
94 |
--------------------------------------------------------------------------------
/src/components/share/modal/items/index.scss:
--------------------------------------------------------------------------------
1 | .c__share-member-item {
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 |
6 | border-radius: 10px;
7 |
8 | &__right {
9 | display: flex;
10 | align-items: center;
11 | color: var(--c--theme--colors--primary-800);
12 | .material-icons {
13 | font-size: 24px;
14 | color: var(--c--theme--colors--greyscale-600);
15 | }
16 | }
17 | }
18 |
19 | .c__search-user-item-right {
20 | display: flex;
21 | align-items: center;
22 | color: var(--c--theme--colors--primary-800);
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/share/modal/items/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./ShareInvitationItem";
2 | export * from "./ShareMemberItem";
3 | export * from "./SearchUserItem";
4 |
--------------------------------------------------------------------------------
/src/components/share/modal/items/share-items.stories.tsx:
--------------------------------------------------------------------------------
1 | import { ShareInvitationItem } from "./ShareInvitationItem";
2 | import { ShareMemberItem } from "./ShareMemberItem";
3 | import { SearchUserItem } from "./SearchUserItem";
4 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
5 | const meta = {
6 | title: "Components/Share/Items",
7 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
8 | };
9 |
10 | export default meta;
11 |
12 | const Wrapper = ({ children }: { children: React.ReactNode }) => {
13 | return
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 |
87 | )}
88 |
89 | }
90 | />
91 | {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 |
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 |
77 | );
78 | };
79 |
--------------------------------------------------------------------------------
/src/components/share/users-invitation/index.scss:
--------------------------------------------------------------------------------
1 | .c__add-share-user-list {
2 | display: flex;
3 | align-items: center;
4 | padding: var(--c--theme--spacings--sm);
5 | background-color: var(--c--theme--colors--greyscale-050);
6 | border-radius: var(--c--theme--spacings--3xs);
7 | border: 1px solid var(--c--theme--colors--greyscale-200);
8 | gap: var(--c--theme--spacings--3xs);
9 |
10 | &__items {
11 | display: flex;
12 |
13 | flex-wrap: wrap;
14 | gap: var(--c--theme--spacings--3xs);
15 | flex: 1;
16 | }
17 |
18 | &__right-actions {
19 | display: flex;
20 | align-items: center;
21 | gap: var(--c--theme--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--theme--spacings--3xs);
30 | border-radius: var(--c--theme--spacings--3xs);
31 | height: fit-content;
32 | padding: var(--c--theme--spacings--4xs) var(--c--theme--spacings--4xs)
33 | var(--c--theme--spacings--4xs) var(--c--theme--spacings--xs);
34 | background-color: var(--c--theme--colors--greyscale-250);
35 | color: var(--c--theme--colors--greyscale-1000);
36 | font-size: var(--c--theme--font--sizes--xs);
37 |
38 | .close-icon {
39 | color: var(--c--theme--colors--greyscale-600);
40 | font-size: var(--c--theme--font--sizes--sm);
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/share/utils/ShareModalCopyLinkFooter.tsx:
--------------------------------------------------------------------------------
1 | import { Button, useCunningham } from "@openfun/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/share/utils/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./ShareModalCopyLinkFooter";
2 |
--------------------------------------------------------------------------------
/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/tabs/index.scss:
--------------------------------------------------------------------------------
1 | .c__tabs {
2 | display: flex;
3 |
4 | &__full-width {
5 | .react-aria-Tabs {
6 | width: 100%;
7 | }
8 |
9 | .react-aria-Tab {
10 | flex: 1;
11 | display: flex;
12 | justify-content: center;
13 | }
14 | }
15 |
16 | .react-aria-Tabs {
17 | display: flex;
18 |
19 | &[data-orientation="horizontal"] {
20 | flex-direction: column;
21 | }
22 | }
23 |
24 | .react-aria-TabList {
25 | display: flex;
26 | width: 100%;
27 | }
28 |
29 | .react-aria-Tab {
30 | padding: 10px;
31 | cursor: pointer;
32 | outline: none;
33 | position: relative;
34 | color: var(--c--theme--colors--greyscale-500);
35 | transition: color 200ms;
36 | --border-color: transparent;
37 | forced-color-adjust: none;
38 | display: flex;
39 | align-items: center;
40 | gap: 8px;
41 | border-bottom: 1px solid var(--c--theme--colors--greyscale-200);
42 |
43 | &[data-hovered] {
44 | background-color: var(--c--theme--colors--greyscale-050);
45 | color: var(--text-color-hover);
46 | }
47 |
48 | &[data-selected] {
49 | font-weight: 500;
50 | // font-size: var(--c--theme--font--sizes--md);
51 | color: var(--c--theme--colors--primary-800);
52 | border-bottom: 2px solid var(--c--theme--colors--primary-800);
53 | }
54 |
55 | &[data-disabled] {
56 | color: var(--text-color-disabled);
57 | &[data-selected] {
58 | --border-color: var(--text-color-disabled);
59 | }
60 | }
61 |
62 | &[data-focus-visible]:after {
63 | content: "";
64 | position: absolute;
65 | inset: 4px;
66 | border-radius: 4px;
67 | border: 2px solid var(--focus-ring-color);
68 | }
69 | }
70 |
71 | .react-aria-TabPanel {
72 | margin-top: 4px;
73 | padding: 10px;
74 | border-radius: 4px;
75 | outline: none;
76 |
77 | &[data-focus-visible] {
78 | outline: 2px solid var(--focus-ring-color);
79 | }
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/tabs/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./Tabs";
2 | export * from "./types";
3 |
--------------------------------------------------------------------------------
/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
11 |
16 | );
17 | },
18 | ],
19 | } as Meta
12 |
15 | ⬅️ Hover it
14 |