From a9c2b0e6b9a82ea7f1ff626c47519b8404a67b04 Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Sat, 5 Nov 2022 10:33:23 +0400
Subject: [PATCH] Storybook for Icons (#388)

Fixes #375

<img width="1434" alt="Screenshot 2022-11-04 at 16 24 58"
src="https://user-images.githubusercontent.com/825702/199972200-323199c4-95e1-4b8d-87da-d99c84c1a33f.png">
---
 packages/icons/.storybook/main.js    |  9 ++++
 packages/icons/.storybook/preview.js |  9 ++++
 packages/icons/package.json          | 13 +++++-
 packages/icons/src/index.stories.tsx | 69 ++++++++++++++++++++++++++++
 packages/icons/src/index.ts          | 32 +------------
 packages/icons/src/legacy.ts         | 31 +++++++++++++
 6 files changed, 131 insertions(+), 32 deletions(-)
 create mode 100644 packages/icons/.storybook/main.js
 create mode 100644 packages/icons/.storybook/preview.js
 create mode 100644 packages/icons/src/index.stories.tsx
 create mode 100644 packages/icons/src/legacy.ts

diff --git a/packages/icons/.storybook/main.js b/packages/icons/.storybook/main.js
new file mode 100644
index 0000000000..6314a3edad
--- /dev/null
+++ b/packages/icons/.storybook/main.js
@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ["../src/*.stories.mdx", "../src/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+};
diff --git a/packages/icons/.storybook/preview.js b/packages/icons/.storybook/preview.js
new file mode 100644
index 0000000000..f089c7f9d5
--- /dev/null
+++ b/packages/icons/.storybook/preview.js
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
diff --git a/packages/icons/package.json b/packages/icons/package.json
index f90efaa891..544c89fba4 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -9,9 +9,20 @@
     "build": "rm -fr lib tsconfig.tsbuildinfo && tsc",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
-    "checks": "yarn typecheck && yarn lint"
+    "checks": "yarn typecheck && yarn lint",
+    "storybook:run": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/builder-webpack4": "^6.5.6",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/manager-webpack4": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/testing-library": "^0.0.13",
     "tsup": "^6.1.3",
     "typescript": "4.7.4"
   },
diff --git a/packages/icons/src/index.stories.tsx b/packages/icons/src/index.stories.tsx
new file mode 100644
index 0000000000..d80133a6fe
--- /dev/null
+++ b/packages/icons/src/index.stories.tsx
@@ -0,0 +1,69 @@
+import * as icons from "./index";
+import * as legacyIcons from "./legacy";
+
+export const Icons = () => {
+  return (
+    <>
+      <style>{`
+        svg {width: 100%; height: 100%;}
+    `}</style>
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {Object.entries(icons).map(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ([name, Icon]: [string, any]) => {
+            if (name.endsWith("Icon") === false) {
+              return null;
+            }
+            return (
+              <div
+                key={name}
+                style={{
+                  width: 150,
+                  height: 100,
+                  margin: 5,
+                  padding: 5,
+                  border: "solid 1px #f5f5f5",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    width: 32,
+                    height: 32,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 16,
+                  }}
+                >
+                  <Icon />
+                </div>
+                <div
+                  style={{
+                    fontFamily: "Arial",
+                    textAlign: "center",
+                    wordWrap: "break-word",
+                    width: "100%",
+                    fontSize: "14px",
+                    color: "#5a5a5a",
+                  }}
+                >
+                  {name.replace(/Icon$/, "")}
+                  {name in legacyIcons && " (legacy)"}
+                </div>
+              </div>
+            );
+          }
+        )}
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: "All Icons",
+  component: Icons,
+};
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 978dab539a..e92ceb5b7c 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -1,34 +1,4 @@
-export {
-  ImageIcon,
-  FontBoldIcon,
-  FontItalicIcon,
-  Link2Icon,
-  MobileIcon,
-  LaptopIcon,
-  DesktopIcon,
-  PlusIcon,
-  HamburgerMenuIcon,
-  DotsHorizontalIcon,
-  CheckIcon,
-  RocketIcon,
-  ExternalLinkIcon,
-  Share1Icon,
-  EyeOpenIcon,
-  ExclamationTriangleIcon,
-  DotFilledIcon,
-  TriangleRightIcon,
-  TriangleDownIcon,
-  CommitIcon,
-  InputIcon,
-  ButtonIcon,
-  TextAlignLeftIcon,
-  HeadingIcon,
-  TextIcon,
-  SquareIcon,
-  InfoCircledIcon,
-  CrossCircledIcon,
-  CheckCircledIcon,
-} from "@radix-ui/react-icons"; // Legacy icons
+export * from "./legacy";
 export * from "./list-nested";
 export * from "./brush";
 export * from "./form";
diff --git a/packages/icons/src/legacy.ts b/packages/icons/src/legacy.ts
new file mode 100644
index 0000000000..b885b1d51a
--- /dev/null
+++ b/packages/icons/src/legacy.ts
@@ -0,0 +1,31 @@
+export {
+  ImageIcon,
+  FontBoldIcon,
+  FontItalicIcon,
+  Link2Icon,
+  MobileIcon,
+  LaptopIcon,
+  DesktopIcon,
+  PlusIcon,
+  HamburgerMenuIcon,
+  DotsHorizontalIcon,
+  CheckIcon,
+  RocketIcon,
+  ExternalLinkIcon,
+  Share1Icon,
+  EyeOpenIcon,
+  ExclamationTriangleIcon,
+  DotFilledIcon,
+  TriangleRightIcon,
+  TriangleDownIcon,
+  CommitIcon,
+  InputIcon,
+  ButtonIcon,
+  TextAlignLeftIcon,
+  HeadingIcon,
+  TextIcon,
+  SquareIcon,
+  InfoCircledIcon,
+  CrossCircledIcon,
+  CheckCircledIcon,
+} from "@radix-ui/react-icons";