refactor: update icon preview page

examples/src/routing/route-map.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import { WelcomePage } from "../landingpage";
-import { IconPage } from "../stories/icon-page";
+import { IllustrationPage } from "../stories/illustrations/illustration-page";
+import { MainMenuPage } from "../stories/main-menu/main-menu-page";
 import { PasswordInputPage } from "../stories/password-input/password-input-page";
 import { SliderPage } from "../stories/slider/slider-page";
 import { StepperPage } from "../stories/stepper/stepper-page";
 import { FluentUiTabStylesPage } from "../stories/tab-list-utilities/tab-list-utilities-page";
+import { TableUtilitiesPage } from "../stories/table-utilities/table-utlities-page";
 import { ThemePage } from "../stories/theme-page";
 import { routes, TRoute } from "./routes";
-import { TableUtilitiesPage } from "../stories/table-utilities/table-utlities-page";
-import { IllustrationPage } from "../stories/illustrations/illustration-page";
-import { MainMenuPage } from "../stories/main-menu/main-menu-page";
+import { IconPage } from "../stories/icons/icon-page";
 
 export enum RouteGroup {
   MISC,

examples/src/stories/icons/components/icon-copy.tsx

@@ -0,0 +1,33 @@
+import { Button, Tooltip } from "@fluentui/react-components";
+import { RectangleLandscapeHintCopyRegular } from "@fluentui/react-icons";
+import React, { useCallback } from "react";
+
+type TIconCopy = {
+  toolTip: string;
+  toCopy?: string;
+};
+
+export function IIconCopy({ toolTip, toCopy }: TIconCopy) {
+  const copyCode = useCallback(async () => {
+    toCopy && await copyToClipboard(`<${toCopy}/>`);
+  }, []);
+
+  return (
+    <Tooltip withArrow content={toolTip} relationship={"label"}>
+      <Button
+        appearance="transparent"
+        onClick={copyCode}
+        icon={<RectangleLandscapeHintCopyRegular />}
+      >
+      </Button>
+    </Tooltip>
+  );
+}
+
+async function copyToClipboard(text: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    console.error("Error copying to clipboard:", error);
+  }
+}

examples/src/stories/icons/components/icon-page-header.tsx

@@ -0,0 +1,66 @@
+import {
+  Input,
+  makeStyles,
+  Radio,
+  RadioGroup,
+  RadioGroupOnChangeData,
+  shorthands,
+  tokens,
+} from "@fluentui/react-components";
+import React from "react";
+import { DEFAULT_VARIANT_FILTER, variants } from "../icon-page.types";
+
+const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    ...shorthands.gap(tokens.spacingHorizontalM),
+  },
+});
+
+type TIconPageHeader = {
+  search: string;
+  onSearchQueryChanged: (ev?: React.FormEvent<HTMLInputElement>) => void;
+  filterByVariant: (
+    ev: React.FormEvent<HTMLDivElement>,
+    data: RadioGroupOnChangeData
+  ) => void;
+};
+
+export function IconPageHeader(
+  {
+    search,
+    onSearchQueryChanged,
+    filterByVariant,
+  }: TIconPageHeader
+) {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.root}>
+      <div>
+        <Input
+          size="small"
+          type="search"
+          placeholder="Search icons"
+          value={search}
+          aria-label="search"
+          onChange={onSearchQueryChanged}
+        />
+      </div>
+      <RadioGroup
+        layout="horizontal"
+        defaultValue={DEFAULT_VARIANT_FILTER as string}
+        onChange={filterByVariant}
+      >
+        {variants.map((option) => (
+          <Radio
+            key={`option-${option}`}
+            value={option as string}
+            label={option}
+          />
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}

examples/src/stories/icons/icon-page.hooks.ts

@@ -0,0 +1,59 @@
+import { RadioGroupOnChangeData } from "@fluentui/react-components";
+import React from "react";
+import { axisIcons, DEFAULT_VARIANT_FILTER, TVariant } from "./icon-page.types";
+
+export function useIconPage() {
+  const [search, setSearch] = React.useState("");
+
+  const [variant, setVariant] = React.useState<TVariant>(
+    DEFAULT_VARIANT_FILTER
+  );
+
+  const filterByVariant = (
+    _: React.FormEvent<HTMLDivElement>,
+    data: RadioGroupOnChangeData
+  ) => {
+    const newVariant = data.value;
+    if (newVariant === DEFAULT_VARIANT_FILTER) {
+      setVariant(DEFAULT_VARIANT_FILTER);
+    } else {
+      setVariant(newVariant as TVariant);
+    }
+  };
+
+  const onSearchQueryChanged = (ev?: React.FormEvent<HTMLInputElement>) => {
+    setSearch(ev ? ev.currentTarget.value : "");
+  };
+
+  const filterIcons = React.useMemo(() => {
+    const filteredBySearch = axisIcons.filter((icon) => {
+      return icon.displayName?.toLowerCase().includes(search.toLowerCase());
+    });
+
+    if (variant === "All") {
+      return filteredBySearch;
+    }
+
+    if (variant === "Unsized") {
+      return filteredBySearch.filter((icon) => {
+        return (
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          icon.displayName! && !/\d/.test(icon.displayName.toLowerCase())
+        );
+      });
+    }
+
+    return filteredBySearch.filter((icon) => {
+      return icon.displayName
+        ?.toLowerCase()
+        .includes((variant as unknown as string).toLowerCase());
+    });
+  }, [search, variant]);
+
+  return {
+    search,
+    onSearchQueryChanged,
+    filterByVariant,
+    filterIcons,
+  };
+}

examples/src/stories/icons/icon-page.styles.ts

@@ -0,0 +1,30 @@
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+
+export const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    ...shorthands.gap(tokens.spacingHorizontalM),
+  },
+  iconWrapper: {
+    alignItems: "center",
+    display: "flex",
+    flexBasis: "20%",
+    flexGrow: 0,
+    flexDirection: "column",
+    justifyContent: "space-around",
+    ...shorthands.padding("8px"),
+    ...shorthands.overflow("hidden"),
+  },
+  text: {
+    display: "inline-block",
+    height: "auto",
+    ...shorthands.padding("0px 8px"),
+  },
+  displayName: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    justifyContent: "center",
+  },
+});