Feat: SearchBar component

Author: garronej

package.json

@@ -136,6 +136,7 @@
         "./Summary": "./dist/Summary.js",
         "./Stepper": "./dist/Stepper.js",
         "./SkipLinks": "./dist/SkipLinks.js",
+        "./SearchBar": "./dist/SearchBar.js",
         "./Quote": "./dist/Quote.js",
         "./Pagination": "./dist/Pagination.js",
         "./Notice": "./dist/Notice.js",

src/SearchBar.tsx

@@ -0,0 +1,92 @@
+import React, { memo, forwardRef, useId } from "react";
+import type { InputHTMLAttributes } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { assert } from "tsafe/assert";
+import { createComponentI18nApi } from "./i18n";
+import type { Equals } from "tsafe";
+import { cx } from "./tools/cx";
+import { fr } from "./fr";
+
+export type SearchBarProps = {
+    className?: string;
+    /** Default: "Rechercher" (or translation) */
+    label?: string;
+    /** Props forwarded to the underlying <input /> element */
+    nativeInputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** Default: false */
+    big?: boolean;
+    classes?: Partial<Record<"root" | "label" | "input", string>>;
+};
+
+/**
+ * @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-input>
+ * */
+export const SearchBar = memo(
+    forwardRef<HTMLDivElement, SearchBarProps>((props, ref) => {
+        const {
+            className,
+            label: label_props,
+            nativeInputProps = {},
+            big = false,
+            classes = {},
+            ...rest
+        } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        const { t } = useTranslation();
+
+        const label = label_props ?? t("label");
+
+        const inputId = `search-${useId()}-input`;
+
+        return (
+            <div
+                className={cx(
+                    fr.cx("fr-search-bar", big && "fr-search-bar--lg"),
+                    classes.root,
+                    className
+                )}
+                role="search"
+                ref={ref}
+                {...rest}
+            >
+                <label className={cx(fr.cx("fr-label"), classes.label)} htmlFor={inputId}>
+                    {label}
+                </label>
+                <input
+                    {...nativeInputProps}
+                    className={cx(fr.cx("fr-input"), classes.input, nativeInputProps.className)}
+                    placeholder={label}
+                    type="search"
+                    id={inputId}
+                />
+                <button className="fr-btn" title="Rechercher">
+                    {label}
+                </button>
+            </div>
+        );
+    })
+);
+
+SearchBar.displayName = symToStr({ SearchBar });
+
+export default SearchBar;
+
+const { useTranslation, addSearchBarTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ SearchBar }),
+    "frMessages": {
+        /* spell-checker: disable */
+        "label": "Rechercher"
+        /* spell-checker: enable */
+    }
+});
+
+addSearchBarTranslations({
+    "lang": "en",
+    "messages": {
+        "label": "Search"
+    }
+});
+
+export { addSearchBarTranslations };

stories/SearchBar.stories.tsx

@@ -0,0 +1,32 @@
+import { SearchBar } from "../dist/SearchBar";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { SearchBar },
+    "description": `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/barre-de-recherche)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/SearchBar.tsx)`,
+    "argTypes": {
+        "big": {
+            "description": "Use the big variant if you have space to spare",
+            "control": { "type": "boolean" }
+        },
+        "label": {
+            "description": "Default: 'Rechercher' (or translation)",
+            "control": { "type": "text" }
+        },
+        "nativeInputProps": {
+            "description": `An object that is forwarded as props to te underlying native \`<input />\` element.  
+                This is where you pass the \`name\` prop or \`onChange\` for example.`,
+            "control": { "type": null }
+        }
+    }
+});
+
+export default meta;
+
+export const Default = getStory({
+    "label": undefined
+});