From 5b6829147ef0184c0eace447807fccca552e2e96 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Tue, 17 Jan 2023 16:05:12 +0100
Subject: [PATCH] add icons story

---
 .../components/src/icons/icons.stories.tsx    | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 packages/components/src/icons/icons.stories.tsx

diff --git a/packages/components/src/icons/icons.stories.tsx b/packages/components/src/icons/icons.stories.tsx
new file mode 100644
index 00000000..f864d1d5
--- /dev/null
+++ b/packages/components/src/icons/icons.stories.tsx
@@ -0,0 +1,48 @@
+import * as icons from '@status-im/icons'
+
+import { Text } from '../typography'
+
+import type { IconProps } from '@status-im/icons'
+import type { Meta, StoryObj } from '@storybook/react'
+import type React from 'react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'icons',
+  // component: Button,
+  argTypes: {},
+}
+
+type Story = StoryObj
+
+function unpascal(str: string) {
+  return str.replace(/([A-Z])/g, ' $1').trim()
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const All: Story = {
+  args: {},
+  render: () => {
+    return (
+      <div style={{ display: 'grid', gap: 12 }}>
+        {Object.keys(icons).map(name => {
+          // @ts-ignore
+          // eslint-disable-next-line import/namespace
+          const Icon = icons[name] as React.FunctionComponent<IconProps>
+
+          return (
+            <div
+              key={name}
+              style={{ display: 'flex', flexDirection: 'column' }}
+            >
+              <Icon color="black" />
+              <Text>{unpascal(name)}</Text>
+            </div>
+          )
+        })}
+      </div>
+    )
+  },
+}
+
+export default meta