monorepo

packages/ui/src/foundation/colors.stories.tsx

@@ -0,0 +1,70 @@
+
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { useTheme } from 'styled-components/native';
+import styled from 'styled-components';
+
+const Table = styled.table`
+  width: 100%;
+  max-width: 900px;
+  margin: auto;
+  border-collapse: collapse;
+  border-spacing:0;
+
+  td {
+    margin: 0; 
+    padding: 15px 15px;
+  }
+`;
+
+const Thead = styled.thead`
+  font-weight: bold;
+`;
+
+const Row = styled.tr`
+  padding: 0 15px;
+  &:nth-child(even) {
+    background: rgba(0, 0, 0, .05);
+  }
+`;
+
+const Example = styled.div<{ color: string }>`
+  background: ${props => props.color};
+  width: 50px;
+  height: 50px;
+`
+
+const SpacingComponent = () => {
+  const theme = useTheme();
+
+  return (
+    <Table>
+      <Thead>
+        <tr>
+          <td>Example</td>
+          <td>Name</td>
+          <td>Color</td>
+        </tr>
+      </Thead>
+      <tbody>
+        {Object.entries(theme.colors).map(([key, value]) => {
+          return (
+            <Row key={key}>
+              <td><Example color={value} /></td>
+              <td>{key}</td>
+              <td>{value}</td>
+            </Row>
+          )
+        })}
+      </tbody>
+    </Table>
+  )
+  }
+
+export default {
+  title: 'Foundation/Colors',
+  component: SpacingComponent,
+} as ComponentMeta<typeof SpacingComponent>;
+
+export const Colors = () => <SpacingComponent />;
+

packages/ui/src/foundation/icons.stories.tsx

@@ -0,0 +1,52 @@
+
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { useTheme } from 'styled-components/native';
+import { Icon } from '../components/base/icon';
+import styled from 'styled-components';
+import { icons } from 'feather-icons';
+
+const Table = styled.div`
+  width: 100%;
+  max-width: 900px;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const Row = styled.div`
+  padding: 35px;
+  &:nth-child(even) {
+    background: rgba(0, 0, 0, .05);
+  }
+`;
+
+const Name = styled.div`
+  text-align: center;
+  font-weight: bold;
+`;
+
+export const Icons = () => {
+  const theme = useTheme();
+
+  return (
+    <Table>
+      {Object.entries(icons).map(([key, value]) => {
+        return (
+          <Row>
+            <Icon name={key} size={220} />
+            <Name>
+              {key}
+            </Name>
+          </Row>
+        )
+      })}
+    </Table>
+  )
+  }
+
+export default {
+  title: 'Foundation/Icons',
+  component: Icons,
+} as ComponentMeta<typeof Icons>;
+

packages/ui/src/foundation/spacings.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { useTheme } from 'styled-components/native';
+import styled from 'styled-components';
+
+const Table = styled.table`
+  width: 100%;
+  max-width: 900px;
+  margin: auto;
+  border-collapse: collapse;
+  border-spacing:0;
+
+  td {
+    margin: 0; 
+    padding: 15px 15px;
+  }
+`;
+
+const Thead = styled.thead`
+  font-weight: bold;
+`;
+
+const Row = styled.tr`
+  padding: 0 15px;
+  &:nth-child(even) {
+    background: rgba(0, 0, 0, .05);
+  }
+`;
+
+const Example = styled.div<{ size: number }>`
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
+  background: red;
+`
+
+const SpacingComponent = () => {
+  const theme = useTheme();
+
+  return (
+    <Table>
+      <Thead>
+        <tr>
+          <td>Example</td>
+          <td>Name</td>
+          <td>Size</td>
+        </tr>
+      </Thead>
+      <tbody>
+        {Object.entries(theme.margins).map(([key, value]) => {
+          return (
+            <Row key={key}>
+              <td><Example size={value} /></td>
+              <td>{key}</td>
+              <td>{value}px</td>
+            </Row>
+          )
+        })}
+      </tbody>
+    </Table>
+  )
+  }
+
+export default {
+  title: 'Foundation/Spacing',
+  component: SpacingComponent,
+} as ComponentMeta<typeof SpacingComponent>;
+
+export const Spacing = () => <SpacingComponent />;
+

packages/ui/src/foundation/typography.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { useTheme } from 'styled-components/native';
+import { types } from '../typography';
+import styled from 'styled-components';
+
+const Table = styled.table`
+  width: 100%;
+  max-width: 900px;
+  margin: auto;
+  border-collapse: collapse;
+  border-spacing:0;
+
+  td {
+    margin: 0; 
+    padding: 15px 15px;
+  }
+`;
+
+const Thead = styled.thead`
+  font-weight: bold;
+`;
+
+const Row = styled.tr`
+  padding: 0 15px;
+  &:nth-child(even) {
+    background: rgba(0, 0, 0, .05);
+  }
+`;
+
+const TypographyComponent = () => {
+  const theme = useTheme();
+
+  return (
+    <Table>
+      <Thead>
+        <tr>
+          <td>Example</td>
+          <td>Name</td>
+          <td>Size</td>
+          <td>Weight</td>
+          <td>Spacing</td>
+        </tr>
+      </Thead>
+      <tbody>
+        {Object.entries(theme.typography).map(([key, value]) => {
+          const Component = types[key];
+          return (
+            <Row key={key}>
+              <td><Component>{key}</Component></td>
+              <td>{key}</td>
+              <td>{value.size || 1}x</td>
+              <td>{value.weight || 'normal'}</td>
+              <td>{value.spacing || 0}px</td>
+            </Row>
+          )
+        })}
+      </tbody>
+    </Table>
+  )
+  }
+
+export default {
+  title: 'Foundation/Typography',
+  component: TypographyComponent,
+} as ComponentMeta<typeof TypographyComponent>;
+
+export const Typography = () => <TypographyComponent />;
+