docs(evo-react): compact all-icons storybook example into a dense grid

packages/evo-react/.prettierignore

@@ -1,3 +1,4 @@
 # Autogenerated files
 src/icon/icons/*
+src/icon/icon.stories.tsx
 src/icon/types.ts

packages/evo-react/scripts/import-svg.ts

@@ -103,6 +103,7 @@ export function ${iconComponentName}(props: EvoIconComponentProps) {
   const storiesContent = `${fileHeader}\n// @ts-nocheck\n
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { EvoIconProvider } from "./context";
+import { IconExample, IconGrid } from "./icon-example";
 import type { EvoIconComponentProps } from "./icons/types";
 ${icons.map(({ componentName, filePath }) => `import { ${componentName} } from "./icons/${filePath}";`).join("\n")}
 
@@ -169,22 +170,15 @@ type Story = StoryObj<EvoIconComponentProps>;
 export const AllIcons: Story = {
   render: (args) => (
     <EvoIconProvider>
-      <table>
-        <tbody>
-          ${icons
-            .map(
-              ({ componentName, filePath }) => `
-          <tr>
-            <td>{${componentName}.name || "${filePath}"}</td>
-            <td>
-              <${componentName} {...args} />
-            </td>
-          </tr>
-              `,
-            )
-            .join("\n")}
-        </tbody>
-      </table>
+      <IconGrid>
+        ${icons
+          .map(
+            ({ componentName }) => `<IconExample name="${componentName}">
+          <${componentName} {...args} />
+        </IconExample>`,
+          )
+          .join("\n        ")}
+      </IconGrid>
     </EvoIconProvider>
   ),
 };

packages/evo-react/src/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: Record<string, string>;
+  export default classes;
+}

packages/evo-react/src/icon/icon-example.module.css

@@ -0,0 +1,46 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 4px;
+}
+
+.cell {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 72px;
+}
+
+.host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  color: inherit;
+}
+
+.host:hover {
+  background-color: var(--color-background-faint);
+}
+
+.bubble {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background-color: var(--color-background-inverse);
+  color: var(--color-foreground-on-inverse);
+  font-size: 14px;
+  white-space: nowrap;
+}

packages/evo-react/src/icon/icon-example.tsx

@@ -0,0 +1,44 @@
+import { useState, type ReactNode } from "react";
+import styles from "./icon-example.module.css";
+
+export function IconGrid({ children }: { children: ReactNode }) {
+  return <div className={styles.grid}>{children}</div>;
+}
+
+export function IconExample({
+  name,
+  children,
+}: {
+  name: string;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div
+      className={styles.cell}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          setOpen(false);
+        }
+      }}
+    >
+      <button
+        type="button"
+        aria-label={name}
+        aria-expanded={open}
+        className={styles.host}
+        onClick={(e) => {
+          e.currentTarget.focus();
+          setOpen(!open);
+        }}
+      >
+        {children}
+      </button>
+      {open && (
+        <span role="tooltip" tabIndex={-1} className={styles.bubble}>
+          {`<${name}/>`}
+        </span>
+      )}
+    </div>
+  );
+}