Update storybook url

codegouvfr · Jul 21, 2023 · 39140e5 · 39140e5
1 parent 982335e
commit 39140e5
Show file tree

Hide file tree

Showing 49 changed files with 55 additions and 55 deletions.
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -15,13 +15,13 @@
 <meta property="og:type" content="website">
 <meta property="og:title" content="react-dsfr components">
 <meta property="og:description" content="@codegouvfr/react-dsfr components playground and showcase">
-<meta property="og:image" content="https://components.react-dsfr.fr/repo-card.png">
+<meta property="og:image" content="https://components.react-dsfr.codegouv.studio/repo-card.png">
 
 <!-- Twitter Meta Tags -->
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="react-dsfr components">
 <meta name="twitter:description" content="@codegouvfr/react-dsfr components playground and showcase">
-<meta name="twitter:image" content="https://components.react-dsfr.fr/repo-card.png">
+<meta name="twitter:image" content="https://components.react-dsfr.codegouv.studio/repo-card.png">
 
 <style>
 	.sidebar-item[data-nodetype="document"] svg {

diff --git a/.storybook/static/CNAME b/.storybook/static/CNAME
@@ -1 +1 @@
-components.react-dsfr.fr
+components.react-dsfr.codegouv.studio
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -3,7 +3,7 @@
 Would you help us implement [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon)?  
 Thank you so much to anyone that would!
 
-To get you started you can check out [the `<Alert />` component](https://components.react-dsfr.fr/?path=/docs/components-alert--default).
+To get you started you can check out [the `<Alert />` component](https://components.react-dsfr.codegouv.studio/?path=/docs/components-alert--default).
 
 -   Here is it's definition from the SIG: [systeme-de-design.gouv.fr/elements-d-interface/composants/alerte](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte) (Pro tip: the real source of truth for DSFR component is [here](https://main--ds-gouv.netlify.app/example/component/))
 -   Here is its implementation [src/Alert.tsx](https://github.com/codegouvfr/react-dsfr/blob/main/src/Alert.tsx)
@@ -19,7 +19,7 @@ A few things:
 -   📣 Let everyone know what component you are working on by [oppening an issue](https://github.com/codegouvfr/react-dsfr/issues).
 -   📚 You can draw inspiration from [`dataesr/react-dsfr`](https://github.com/dataesr/react-dsfr/tree/master/src/components/interface) and the implementation of [france connect](https://github.com/france-connect/sources/tree/main/front/libs/dsfr).
 -   🔗 Use the component returned by `getLink()` instead of `<a />`. [Example in the `<Header />` component](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/Header.tsx#L84-L87). We want to [play nice with all routing libraries](https://guides.react-dsfr.fr/integration-with-routing-libraries).
--   🕹️ When it's relevant, try to enable components to be used either in controlled or uncontrolled mode. [Example with <Tabs />](https://components.react-dsfr.fr/?path=/docs/components-tabs--default).
+-   🕹️ When it's relevant, try to enable components to be used either in controlled or uncontrolled mode. [Example with <Tabs />](https://components.react-dsfr.codegouv.studio/?path=/docs/components-tabs--default).
 -   🌎 Avoid hard coding text in JSX, use [the i18n mechanism](https://guides.react-dsfr.fr/i18n) instead. [Here is an example](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/DarkModeSwitch.tsx#L162-L199). (Don't worry about providing translations other than French.)
 -   🍳 If you have to arbitrate between ease of use and customisability I'd encourage you to favor ease of use. People that would need a greater level of customizability can always fall back to making their own wrapper from the reference documentation using [`fr.cx()`](https://guides.react-dsfr.fr/cx).
 

diff --git a/README.fr.md b/README.fr.md
@@ -19,7 +19,7 @@
     </a>
 </p>
 <p align="center">
-  <a href="https://components.react-dsfr.fr">Documentation des composants</a>
+  <a href="https://components.react-dsfr.codegouv.studio">Documentation des composants</a>
   -
   <a href="https://react-dsfr.codegouv.studio">guides</a>
   -
@@ -48,7 +48,7 @@ DSFR en pur JavaScript/CSS.
 -   [x] la plupart des composants peuvent être rendus directement sur le serveur (voir [RSC](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)). Les autres sont étiquetés `"use client";`.
 -   [x] [Intégration clef en main pour les différents frameworks de développement: vite, Next.js, y compris la version beta de Next 13 (configuration AppDir) et Create React App](https://guides.react-dsfr.fr/) si votre
         framework n'est pas supporté, il suffit de demander notre **il manque un mot là** , nous avons pour but de couvrir tous les cas d'usage effectifs.
--   [x] (Presque) tout [les composants de référence](https://www.systeme-de-design.gouv.fr/elements-d-interface) sont [implémenté](https://components.react-dsfr.fr/).
+-   [x] (Presque) tout [les composants de référence](https://www.systeme-de-design.gouv.fr/elements-d-interface) sont [implémenté](https://components.react-dsfr.codegouv.studio/).
 -   [x] seulement le code des composants que vous utilisez effectivement sera inclus dans votre projet final.
 -   [x] Intégration facultative avec [MUI](https://mui.com/). Si vous utilisez des composants MUI ils seront automatiquement adaptés pour ressembler à des composants DSFR.  
          Voir la [documentation](https://guides.react-dsfr.fr/mui-integration).

diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@
     </a>
 </p>
 <p align="center">
-  <a href="https://components.react-dsfr.fr">Components documentation</a>
+  <a href="https://components.react-dsfr.codegouv.studio">Components documentation</a>
   -
   <a href="https://react-dsfr.codegouv.studio">Guides</a>
   -
@@ -46,7 +46,7 @@ This module is an advanced toolkit that leverages [@gouvfr/dsfr](https://github.
 -   [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
 -   [x] Most components are server component ready. The others are labeled with `"use client";`
 -   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue](https://guides.react-dsfr.fr/).
--   [x] (Almost) All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are [implemented](https://components.react-dsfr.fr/)
+-   [x] (Almost) All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are [implemented](https://components.react-dsfr.codegouv.studio/)
 -   [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)
 -   [x] Optional integration with [MUI](https://mui.com/). If you use MUI components they will
         be automatically adapted to look like [DSFR components](https://www.systeme-de-design.gouv.fr/elements-d-interface). See [documentation](https://guides.react-dsfr.fr/mui-integration).

diff --git a/publiccode.yml b/publiccode.yml
@@ -5,7 +5,7 @@
 publiccodeYmlVersion: '0.2'
 name: '@codegouvfr/react-dsfr'
 url: 'https://github.com/codegouvfr/react-dsfr'
-landingURL: 'https://components.react-dsfr.fr/'
+landingURL: 'https://components.react-dsfr.codegouv.studio/'
 releaseDate: '2022-10-05'
 developmentStatus: beta
 softwareVersion: 0.21.4

diff --git a/src/Accordion.tsx b/src/Accordion.tsx
@@ -41,7 +41,7 @@ export namespace AccordionProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-accordion>  */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-accordion>  */
 export const Accordion = memo(
     forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {
         const {

diff --git a/src/AgentConnectButton.tsx b/src/AgentConnectButton.tsx
@@ -26,7 +26,7 @@ export namespace AgentConnectButtonProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-franceconnectbutton> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-franceconnectbutton> */
 export const AgentConnectButton = memo(
     forwardRef<HTMLDivElement, AgentConnectButtonProps>((props, ref) => {
         const { className, url: href, style, onClick, id: id_props, ...rest } = props;

diff --git a/src/Alert.tsx b/src/Alert.tsx
@@ -76,7 +76,7 @@ export namespace AlertProps {
     export type Severity = ExtractSeverity<FrClassName>;
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-alert> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-alert> */
 export const Alert = memo(
     forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
         const {

diff --git a/src/Badge.tsx b/src/Badge.tsx
@@ -17,7 +17,7 @@ export type BadgeProps = {
     children: NonNullable<ReactNode>;
 };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-badge> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-badge> */
 export const Badge = memo(
     forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
         const {

diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
@@ -22,7 +22,7 @@ export type BreadcrumbProps = {
     style?: CSSProperties;
 };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-breadcrumb> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-breadcrumb> */
 export const Breadcrumb = memo(
     forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
         const {

diff --git a/src/Button.tsx b/src/Button.tsx
@@ -75,7 +75,7 @@ export namespace ButtonProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-button> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-button> */
 export const Button = memo(
     forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
         const {

diff --git a/src/ButtonsGroup.tsx b/src/ButtonsGroup.tsx
@@ -47,7 +47,7 @@ export namespace ButtonsGroupProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-buttonsgroup> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-buttonsgroup> */
 export const ButtonsGroup = memo(
     forwardRef<HTMLUListElement, ButtonsGroupProps>((props, ref) => {
         const {

diff --git a/src/CallOut.tsx b/src/CallOut.tsx
@@ -33,7 +33,7 @@ export namespace CallOutProps {
     export type ColorVariant = ExtractColorVariant<FrClassName>;
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-callout> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-callout> */
 export const CallOut = memo(
     forwardRef<HTMLDivElement, CallOutProps>((props, ref) => {
         const {

diff --git a/src/Card.tsx b/src/Card.tsx
@@ -74,7 +74,7 @@ export namespace CardProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-card> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-card> */
 export const Card = memo(
     forwardRef<HTMLDivElement, CardProps>((props, ref) => {
         const {

diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx
@@ -4,7 +4,7 @@ import { Fieldset, type FieldsetProps } from "./shared/Fieldset";
 
 export type CheckboxProps = FieldsetProps.Common;
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-checkbox> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-checkbox> */
 export const Checkbox = memo(
     forwardRef<HTMLFieldSetElement, CheckboxProps>((props, ref) => (
         <Fieldset ref={ref} type="checkbox" {...props} />

diff --git a/src/Display/Display.tsx b/src/Display/Display.tsx
@@ -29,7 +29,7 @@ export const headerFooterDisplayItem: HeaderProps.QuickAccessItem.Button &
     })()
 };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-display> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-display> */
 export function Display() {
     const { t } = useTranslation();
 

diff --git a/src/Display/index.ts b/src/Display/index.ts
@@ -2,7 +2,7 @@ export { headerFooterDisplayItem, addDisplayTranslations } from "./Display";
 
 /**
  * @deprecated: It's no longer needed to manually mount this component.
- * @see: https://components.react-dsfr.fr/?path=/docs/components-display
+ * @see: https://components.react-dsfr.codegouv.studio/?path=/docs/components-display
  */
 export function Display() {
     return null;

diff --git a/src/Download.tsx b/src/Download.tsx
@@ -17,7 +17,7 @@ export type DownloadProps = {
     classes?: Partial<Record<"root" | "wrapper" | "link" | "details", string>>;
 };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-download> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-download> */
 export const Download = memo(
     forwardRef<HTMLDivElement, DownloadProps>((props, ref) => {
         const {

diff --git a/src/Footer.tsx b/src/Footer.tsx
@@ -140,7 +140,7 @@ export namespace FooterProps {
     }
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-footer> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-footer> */
 export const Footer = memo(
     forwardRef<HTMLDivElement, FooterProps>((props, ref) => {
         const {

diff --git a/src/FranceConnectButton.tsx b/src/FranceConnectButton.tsx
@@ -29,7 +29,7 @@ export namespace FranceConnectButtonProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-franceconnectbutton> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-franceconnectbutton> */
 export const FranceConnectButton = memo(
     forwardRef<HTMLDivElement, FranceConnectButtonProps>((props, ref) => {
         const {

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -105,7 +105,7 @@ export namespace HeaderProps {
 
 export const headerMenuModalIdPrefix = "header-menu-modal";
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-header> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-header> */
 export const Header = memo(
     forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
         const {

diff --git a/src/Highlight.tsx b/src/Highlight.tsx
@@ -19,7 +19,7 @@ export namespace HighlightProps {
     export type Size = "sm" | "lg";
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-highlight> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-highlight> */
 export const Highlight = memo(
     forwardRef<HTMLDivElement, HighlightProps>((props, ref) => {
         const { className, classes = {}, style, children, size, id: id_props, ...rest } = props;

diff --git a/src/Input.tsx b/src/Input.tsx
@@ -63,7 +63,7 @@ export namespace InputProps {
 }
 
 /**
- * @see <https://components.react-dsfr.fr/?path=/docs/components-input>
+ * @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-input>
  * */
 export const Input = memo(
     forwardRef<HTMLDivElement, InputProps>((props, ref) => {

diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
@@ -195,7 +195,7 @@ addModalTranslations({
 
 export { addModalTranslations };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-modal> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-modal> */
 export function createModal(params: { isOpenedByDefault: boolean; id: string }): {
     buttonProps: {
         /** Only for analytics, feel free to overwrite */

diff --git a/src/MonCompteProButton.tsx b/src/MonCompteProButton.tsx
@@ -27,7 +27,7 @@ export namespace FranceConnectButtonProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-franceconnectbutton> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-franceconnectbutton> */
 export const MonCompteProButton = memo(
     forwardRef<HTMLDivElement, FranceConnectButtonProps>((props, ref) => {
         const { classes = {}, className, url: href, style, onClick, id: id_props, ...rest } = props;

diff --git a/src/Notice.tsx b/src/Notice.tsx
@@ -50,7 +50,7 @@ export namespace NoticeProps {
     }
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-notice> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-notice> */
 export const Notice = memo(
     forwardRef<HTMLDivElement, NoticeProps>((props, ref) => {
         const {

diff --git a/src/Pagination.tsx b/src/Pagination.tsx
@@ -60,7 +60,7 @@ const getPaginationParts = ({ count, defaultPage }: { count: number; defaultPage
     ];
 };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-pagination> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-pagination> */
 export const Pagination = memo(
     forwardRef<HTMLDivElement, PaginationProps>((props, ref) => {
         const {

diff --git a/src/Quote.tsx b/src/Quote.tsx
@@ -29,7 +29,7 @@ export namespace QuoteProps {
     export type AccentColor = ExtractAccentColor<FrClassName>;
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-quote> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-quote> */
 export const Quote = memo(
     forwardRef<HTMLDivElement, QuoteProps>((props, ref) => {
         const {

diff --git a/src/RadioButtons.tsx b/src/RadioButtons.tsx
@@ -4,7 +4,7 @@ import { Fieldset, type FieldsetProps } from "./shared/Fieldset";
 
 export type RadioButtonsProps = FieldsetProps.Common & { name?: string };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-radiobutton> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-radiobutton> */
 export const RadioButtons = memo(
     forwardRef<HTMLFieldSetElement, RadioButtonsProps>((props, ref) => (
         <Fieldset ref={ref} type="radio" {...props} />

diff --git a/src/SearchBar/SearchBar.tsx b/src/SearchBar/SearchBar.tsx
@@ -35,7 +35,7 @@ export type SearchBarProps = {
 };
 
 /**
- * @see <https://components.react-dsfr.fr/?path=/docs/components-input>
+ * @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-input>
  * */
 export const SearchBar = memo(
     forwardRef<HTMLDivElement, SearchBarProps>((props, ref) => {

diff --git a/src/Select.tsx b/src/Select.tsx
@@ -28,7 +28,7 @@ export type SelectProps = {
 };
 
 /**
- * @see <https://components.react-dsfr.fr/?path=/docs/components-select>
+ * @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-select>
  * */
 export const Select = memo(
     forwardRef<HTMLDivElement, SelectProps>((props, ref) => {

diff --git a/src/SelectNext.tsx b/src/SelectNext.tsx
@@ -70,7 +70,7 @@ export namespace SelectProps {
 }
 
 /**
- * @see <https://components.react-dsfr.fr/?path=/docs/components-select>
+ * @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-select>
  * */
 function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
     props: SelectProps<T>,

diff --git a/src/SideMenu.tsx b/src/SideMenu.tsx
@@ -49,7 +49,7 @@ export namespace SideMenuProps {
     }
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-sidemenu> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-sidemenu> */
 export const SideMenu = memo(
     forwardRef<HTMLDivElement, SideMenuProps>((props, ref) => {
         const {

diff --git a/src/SkipLinks.tsx b/src/SkipLinks.tsx
@@ -18,7 +18,7 @@ export type SkipLinksProps = {
     style?: CSSProperties;
 };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-skiplinks> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-skiplinks> */
 export const SkipLinks = memo(
     forwardRef<HTMLDivElement, SkipLinksProps>((props, ref) => {
         const { className, classes = {}, links, style, id: id_props, ...rest } = props;

diff --git a/src/Stepper.tsx b/src/Stepper.tsx
@@ -18,7 +18,7 @@ export type StepperProps = {
     style?: CSSProperties;
 };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-stepper> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-stepper> */
 export const Stepper = memo(
     forwardRef<HTMLDivElement, StepperProps>((props, ref) => {
         const {

diff --git a/src/Summary.tsx b/src/Summary.tsx
@@ -24,7 +24,7 @@ export type SummaryProps = {
     style?: CSSProperties;
 };
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-summary> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-summary> */
 export const Summary = memo(
     forwardRef<HTMLDivElement, SummaryProps>((props, ref) => {
         const {

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -38,7 +38,7 @@ export namespace TableProps {
     export type ColorVariant = ExtractColorVariant<FrClassName>;
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/tableau>  */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/tableau>  */
 export const Table = memo(
     forwardRef<HTMLDivElement, TableProps>((props, ref) => {
         const {

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
@@ -53,7 +53,7 @@ export namespace TabsProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-tabs> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-tabs> */
 export const Tabs = memo(
     forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
         const {

diff --git a/src/Tag.tsx b/src/Tag.tsx
@@ -70,7 +70,7 @@ export namespace TagProps {
     };
 }
 
-/** @see <https://components.react-dsfr.fr/?path=/docs/components-tag> */
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-tag> */
 export const Tag = memo(
     forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement, TagProps>((props, ref) => {
         const {