From b21c12eefdbf62ba624b4b8a6bf156a6b71ab49b Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Mon, 19 Mar 2018 14:38:18 +0100
Subject: [PATCH] Add icons gallery to Storybook

resolve #234
---
 src/stories/icons.stories.js | 60 ++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/stories/icons.stories.js

diff --git a/src/stories/icons.stories.js b/src/stories/icons.stories.js
new file mode 100644
index 00000000..bfa3b54a
--- /dev/null
+++ b/src/stories/icons.stories.js
@@ -0,0 +1,60 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+const stories = storiesOf('Common', module)
+
+const req = require.context('../icons', true, /.js$/)
+const icons = req.keys().map(file => ({
+  file,
+  Component: req(file).default,
+}))
+
+const IconWrapper = styled(Box).attrs({
+  align: 'center',
+  justify: 'center',
+})`
+  width: 150px;
+  height: 150px;
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+  }
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+const doubleClickMap = {}
+
+function copy(iconName) {
+  return () => {
+    const now = Date.now()
+    const isDoubleClick = iconName in doubleClickMap && now - doubleClickMap[iconName] < 250
+    doubleClickMap[iconName] = now
+    const fakeNode = document.createElement('textarea')
+    fakeNode.value = isDoubleClick ? `import Icon${iconName} from 'icons/${iconName}'` : iconName
+    document.body.appendChild(fakeNode)
+    fakeNode.focus()
+    fakeNode.select()
+    document.execCommand('copy')
+    document.body.removeChild(fakeNode)
+  }
+}
+
+stories.add('Icons', () => (
+  <Wrapper>
+    {icons.map(({ file, Component }) => {
+      const iconName = file.match(/\.\/(.*)\./)[1]
+      return (
+        <IconWrapper onClick={copy(iconName)} key={iconName}>
+          <div style={{ marginBottom: 15 }}>{iconName}</div>
+          <Component size={32} width={32} height={32} />
+        </IconWrapper>
+      )
+    })}
+  </Wrapper>
+))