Merge branch 'staging'

.github/workflows/main.yml

@@ -4,9 +4,10 @@ on:
   push:
     tags:
       - "v[0-9]+.[0-9]+.[0-9]+"
+
 env:
-  DEPLOYMENT_URL: https://datasupr.staging.dataesr.ovh
-  MM_NOTIFICATION_CHANNEL: "bots"
+  DEPLOYMENT_URL: https://www.npmjs.com/package/@dataesr/dsfr-plus
+  MM_NOTIFICATION_CHANNEL: bots
 
 permissions:
   contents: read

.github/workflows/staging.yml

@@ -4,53 +4,21 @@ on:
   push:
     branches:
       - staging
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
 
 env:
-  DEPLOYMENT_URL: https://datasupr.staging.dataesr.ovh
-  MM_NOTIFICATION_CHANNEL: 'bots'
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow one concurrent deployment
-concurrency:
-  group: 'pages'
-  cancel-in-progress: true
+  MM_NOTIFICATION_CHANNEL: bots
 
 jobs:
-  deploy-examples:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+  build-test:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20.x'
-          cache: 'npm'
-      - name: Install dependencies and Build
-        run: npm ci --silent && npm run build && cd ./example-ts && npm run build
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          # Upload build repository
-          path: './example-ts/dist'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+      - uses: actions/checkout@v4
+      - run: npm ci
+      - run: npm run build
 
 
   notify:
-    needs: deploy-examples
+    needs: build-test
     if: always()
     runs-on: ubuntu-latest
     steps:
@@ -59,4 +27,3 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN}}
           mattermost_webhook_url: ${{ secrets.MATTERMOST_WEBHOOK_URL }}
           mattermost_channel: ${{ env.MM_NOTIFICATION_CHANNEL}}
-          deployment_url: ${{ env.DEPLOYMENT_URL }}

src/components/Autocomplete/index.tsx → src/components/Autocomplete/autocomplete.tsx

@@ -5,7 +5,7 @@ import type { LoadingState } from "@react-types/shared";
 import { Item, ItemProps, useAsyncList, useComboBoxState } from "react-stately";
 import { useComboBox, useFilter } from "react-aria";
 
-import Listbox from "../Listbox/listbox";
+import Listbox from "../Listbox/listbox-wrapper";
 import Popover from "../Popover";
 import { DSFRColors } from "../../types/colors";
 

src/components/Autocomplete/index.ts

@@ -0,0 +1 @@
+export * from './autocomplete';

src/components/Listbox/index.ts

@@ -0,0 +1 @@
+export * from './listbox';

src/components/Listbox/listbox-wrapper.tsx

@@ -0,0 +1,62 @@
+import type { AriaListBoxOptions } from 'react-aria';
+import cn from 'classnames';
+import { useFocusRing, useListBox } from 'react-aria';
+import React, { useRef } from 'react';
+import ListboxOption from './listbox-option';
+import styles from './styles.module.scss'
+import { Argument } from 'classnames';
+import type { DSFRColors } from '../../types/colors';
+import { ListState } from 'react-stately';
+import ListboxGroup from './listbox-section';
+
+export type ListboxCss = {
+  base?: Argument;
+  list?: Argument;
+  top?: Argument;
+  bottom?: Argument;
+}
+
+export type ListboxProps<T> = {
+  className?: Argument;
+  css?: ListboxCss;
+  color?: DSFRColors;
+  topContent?: React.ReactNode;
+  bottomContent?: React.ReactNode;
+  state: ListState<T>;
+  triggerRef?: React.RefObject<HTMLButtonElement>;
+  listBoxRef?: React.MutableRefObject<null>;
+}
+
+
+
+export default function Listbox<T extends object>(props: AriaListBoxOptions<T> & ListboxProps<T>) {
+  const ref = useRef(null);
+  const { listBoxRef = ref, state, className, css = {}, color, topContent, bottomContent, ...rest } = props;
+  const { listBoxProps } = useListBox(rest, state, listBoxRef);
+  const { isFocusVisible } = useFocusRing();
+
+  const ElementType: React.ElementType = [...state.collection].find((item) => item.props.href) ? 'div' : 'ul';
+
+  return (
+    <div className={cn(styles.listbox, className, css.base)} style={{ minWidth: props?.triggerRef?.current?.offsetWidth || "auto" }}>
+      <span className={cn(styles["listbox-top"], css.top)}>
+        {topContent && topContent}
+      </span>
+      <ElementType
+        className={cn(styles["listbox-content"], css.list, { [styles[`listbox--${color}`]]: color, })}
+        ref={listBoxRef}
+        data-focus-visible={isFocusVisible}
+        {...listBoxProps}
+      >
+        {[...state.collection].map((item) => {
+          return (item.type === 'section')
+            ? <ListboxGroup {...item.props} key={item.key} section={item} state={state} />
+            : <ListboxOption {...item.props} key={item.key} item={item} state={state} />
+        })}
+      </ElementType>
+      <span className={cn(styles["listbox-bottom"], css.bottom)}>
+        {bottomContent && bottomContent}
+      </span>
+    </div>
+  );
+}

src/components/Listbox/listbox.tsx

@@ -1,62 +1,59 @@
-import type { AriaListBoxOptions } from 'react-aria';
-import cn from 'classnames';
-import { useFocusRing, useListBox } from 'react-aria';
-import React, { useRef } from 'react';
-import ListboxOption from './listbox-option';
-import styles from './styles.module.scss'
+import type { AriaListBoxProps } from 'react-aria';
+import { Item, ItemProps, Section, SectionProps, useListState } from 'react-stately';
 import { Argument } from 'classnames';
 import type { DSFRColors } from '../../types/colors';
-import { ListState } from 'react-stately';
-import ListboxGroup from './listbox-section';
+import ListBox from './listbox-wrapper';
 
 export type ListboxCss = {
   base?: Argument;
   list?: Argument;
-  top?: Argument;
-  bottom?: Argument;
 }
 
-export type ListboxProps<T> = {
+export type ListboxProps = {
   className?: Argument;
   css?: ListboxCss;
   color?: DSFRColors;
   topContent?: React.ReactNode;
   bottomContent?: React.ReactNode;
-  state: ListState<T>;
-  triggerRef?: React.RefObject<HTMLButtonElement>;
-  listBoxRef?: React.MutableRefObject<null>;
 }
 
+export function Listbox<T extends object>(props: AriaListBoxProps<T> & ListboxProps) {
+  // Create state based on the incoming props
+  const state = useListState(props);
 
+  return (
+    <ListBox {...props} state={state} />
+  );
+}
+
+export type ListboxItemProps = {
+  showDivider?: boolean;
+  className?: Argument;
+  color?: DSFRColors;
+  description?: React.ReactNode;
+  startContent?: React.ReactNode;
+  endContent?: React.ReactNode;
+}
+
+export const ListboxItem = Item as <T extends object>(
+  props: ListboxItemProps & ItemProps<T>,
+) => JSX.Element;
+
+export type ListboxSectionCss = {
+  base?: Argument;
+  title?: Argument;
+  list?: Argument;
+}
+
+export type ListboxSectionProps = {
+  showDivider?: boolean;
+  className?: Argument;
+  css?: ListboxSectionCss;
+}
+
+export const ListboxSection = Section as <T extends object>(
+  props: ListboxSectionProps & SectionProps<T>,
+) => JSX.Element;
 
-export default function Listbox<T extends object>(props: AriaListBoxOptions<T> & ListboxProps<T>) {
-  const ref = useRef(null);
-  const { listBoxRef = ref, state, className, css = {}, color, topContent, bottomContent, ...rest } = props;
-  const { listBoxProps } = useListBox(rest, state, listBoxRef);
-  const { isFocusVisible } = useFocusRing();
 
-  const ElementType: React.ElementType = [...state.collection].find((item) => item.props.href) ? 'div' : 'ul';
 
-  return (
-    <div className={cn(styles.listbox, className, css.base)} style={{ minWidth: props?.triggerRef?.current?.offsetWidth || "auto" }}>
-      <span className={cn(styles["listbox-top"], css.top)}>
-        {topContent && topContent}
-      </span>
-      <ElementType
-        className={cn(styles["listbox-content"], css.list, { [styles[`listbox--${color}`]]: color, })}
-        ref={listBoxRef}
-        data-focus-visible={isFocusVisible}
-        {...listBoxProps}
-      >
-        {[...state.collection].map((item) => {
-          return (item.type === 'section')
-            ? <ListboxGroup {...item.props} key={item.key} section={item} state={state} />
-            : <ListboxOption {...item.props} key={item.key} item={item} state={state} />
-        })}
-      </ElementType>
-      <span className={cn(styles["listbox-bottom"], css.bottom)}>
-        {bottomContent && bottomContent}
-      </span>
-    </div>
-  );
-}

src/components/Menu/index.ts

@@ -0,0 +1 @@
+export * from './menu-button';

src/components/SearchBar/SearchBar.tsx

@@ -17,6 +17,7 @@ export type SearchBarBaseProps = {
   onSearch: (text?: string) => void;
   isLarge?: boolean;
   id?: string;
+  placeholder?: string;
 }
 
 export type SearchBarProps = Merge<React.HTMLAttributes<HTMLInputElement>, SearchBarBaseProps>;
@@ -28,6 +29,7 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(({
   isLarge,
   label,
   onSearch,
+  placeholder,
   ...props
 }, ref) => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -46,6 +48,7 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(({
         type="search"
         id={id}
         onKeyDown={onKeyDown}
+        placeholder={placeholder}
         {...forwardProps(props as React.HTMLAttributes<HTMLInputElement>)}
       />
       <button

src/components/Select/index.ts

@@ -0,0 +1 @@
+export * from './select';

src/components/Select/index.tsx → src/components/Select/select.tsx

@@ -5,7 +5,7 @@ import { AriaSelectProps, HiddenSelect, mergeProps, useButton, useFocusRing, use
 import { Argument } from 'classnames';
 
 import { DSFRColors } from '../../types/colors';
-import Listbox from "../Listbox/listbox";
+import Listbox from "../Listbox/listbox-wrapper";
 import Popover from '../Popover';
 import styles from './styles.module.scss';