Migrated to V7 Store for Faster Pref

.babelrc

@@ -12,7 +12,8 @@
                     "@Inputs": "./src/Inputs",
                     "@Text": "./src/Text",
                     "@Themes": "./src/Themes",
-                    "@Utils": "./src/Utils"
+                    "@Utils": "./src/Utils",
+                    "@Overview": "./src/Overview"
                 }
             },
             "babel-plugin-styled-components"

.storybook/main.js

@@ -13,7 +13,8 @@ module.exports = {
     "@storybook/addon-postcss"
   ],
   "features": {
-    "babelModeV7": true
+    "babelModeV7": true,
+    "storyStoreV7": true,
   },
   "webpackFinal": config => {
     return {

.storybook/preview.js

@@ -1,6 +1,5 @@
 import React  from 'react';
 import { Global } from '../src';
-import { addDecorator } from '@storybook/react';
 import { MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
 
 const customViewports = {
@@ -77,11 +76,14 @@ const style = theme => `
     }
 `;
 
-addDecorator(story => {
-    if (!document.querySelector('#modal')) {
-        const modal = document.createElement('div');
-        document.body.append(modal);
-        modal.id = 'modal';
+
+export const decorators = [
+    story => {
+        if (!document.querySelector('#modal')) {
+            const modal = document.createElement('div');
+            document.body.append(modal);
+            modal.id = 'modal';
+        }
+        return <Global style={ style }>{ story() }</Global>;
     }
-    return <Global style={ style }>{ story() }</Global>;
-});
+];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cheapreats/react-ui",
-  "version": "2.4.44",
+  "version": "2.4.45",
   "description": "React UI library for CheaprEats",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",

src/Overview/Colors/Colors.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Colors, { ColorsProps } from './Colors';
+
+export default {
+    title: 'Design System/Colors',
+    component: Colors,
+} as Meta;
+
+export const Overview: Story<ColorsProps> = (args) => (
+    <Colors {...args} />
+);

src/Overview/colors.stories.tsx → src/Overview/Colors/Colors.tsx

@@ -1,8 +1,10 @@
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
-import { storiesOf } from '@storybook/react';
 import { MainTheme } from '@Themes/MainTheme';
-import { ColorCard, Heading } from '../index';
+import { DarkTheme } from '@Themes/DarkTheme';
+import { ColorCard, Heading } from '../../index';
+
+export interface ColorsProps {}
 
 interface IListGridProps {
     columnWidth: number;
@@ -35,7 +37,7 @@ const flattenColors = (Value: string, label: string) => (
     </Fragment>
 );
 
-storiesOf('Design System/Colors', module).add('Overview', () => (
+const Colors: React.FC<ColorsProps> = () => (
     <div>
         <Heading type="h1" bold>
             Colors
@@ -53,5 +55,21 @@ storiesOf('Design System/Colors', module).add('Overview', () => (
                 ),
             )}
         </ListGrid>
+
+        <Heading type="h2">Dark Theme</Heading>
+        <ListGrid columnWidth={300} gap={15}>
+            {Object.entries(DarkTheme.colors).map(([key, value]) =>
+                typeof value === 'object' ? (
+                    flattenColors(value as any, key)
+                ) : (
+                    <li key={key}>
+                        <ColorCard color={value} label={key} />
+                    </li>
+                ),
+            )}
+        </ListGrid>
+
     </div>
-));
+)
+
+export default Colors;

src/Overview/Typography/Typography.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Typography, {TypographyProps} from './Typography';
+
+export default {
+    title: 'Design System/Typography',
+    component: Typography,
+} as Meta;
+
+export const Overview: Story<TypographyProps> = (args) => (
+    <Typography {...args} />
+);

src/Overview/Typography/Typography.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MainTheme } from '@Themes/MainTheme';
+import { Heading, Paragraph, SmallText, TextLayout } from '../../index';
+
+const Main = styled.main`
+    max-width: 800px;
+`;
+
+const Section = styled.section`
+    margin: 15px 0;
+`;
+
+const Letters = styled.div`
+    margin: 10px 0;
+    text-align: center;
+    word-break: break-all;
+`;
+
+interface IListGridProps {
+    columnWidth: number;
+    gap?: number;
+}
+
+const ListGrid = styled.ul<IListGridProps>`
+    list-style-type: none;
+    display: grid;
+    align-items: end;
+    margin: 20px 0;
+    padding: 0;
+    ${({ columnWidth, gap }) => `
+    grid-template-columns: repeat(auto-fill, minmax(${columnWidth}px, 1fr));
+    grid-gap: ${gap || 5}px;
+    `}
+`;
+
+export interface TypographyProps {
+
+}
+
+const Typography: React.FC<TypographyProps> = () => (
+    <Main>
+        <Heading type="h1" bold>
+            Typography
+        </Heading>
+
+        <Section>
+            <Heading type="h2">Fonts</Heading>
+            <Paragraph>
+                CheaprEats uses only Quicksand across all applications and
+                systems. Before using our UI components, we highly recommend
+                loading this font-family yourself via{' '}
+                <a href="https://fonts.google.com/specimen/Quicksand">
+                    Google Fonts
+                </a>{' '}
+                or with{' '}
+                <a href="https://github.com/typekit/webfontloader">
+                    WebFontLoader
+                </a>
+                .
+            </Paragraph>
+            <Letters>
+                <Paragraph bold>
+                    ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzž
+                </Paragraph>
+                <Paragraph bold>
+                    {
+                        'ĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.*'
+                    }
+                </Paragraph>
+            </Letters>
+        </Section>
+
+        <Section>
+            <Heading type="h2">Headings</Heading>
+            <Paragraph>
+                CheaprEats uses currently only 3 layers of heading from 1 to
+                3. It is important that headings are used properly to allow
+                for proper HTML formatting. This would help improve SEO,
+                accessibility, and consistency across the application and
+                internet.
+            </Paragraph>
+            <ListGrid columnWidth={120}>
+                {Object.entries(MainTheme.font.size)
+                    .filter(([key]) => key.match(/^h[1-6]$/))
+                    .map(([type, size], index) => (
+                        <li key={type}>
+                            <Heading type={type}>{type}</Heading>
+                            <Paragraph>
+                                Heading
+                                {index + 1}
+                            </Paragraph>
+                            <SmallText>{size}</SmallText>
+                        </li>
+                    ))}
+            </ListGrid>
+        </Section>
+
+        <Section>
+            <Heading type="h2">Paragraph</Heading>
+            <Paragraph>
+                Paragraphs are different from spans as it has semantic
+                meaning - It indicates the information in that tag is the
+                content of the application. Therefore all text within the
+                application should be encapsulated in it rather than other
+                semanticly meaningless tags such as span and Section.
+            </Paragraph>
+        </Section>
+
+        <Section>
+            <Heading type="h2">Other Font Sizes</Heading>
+            <ListGrid columnWidth={120}>
+                {Object.entries(MainTheme.font.size)
+                    .filter(([key]) => !key.match(/^h[1-6]$/))
+                    .map(([type, size], index) => (
+                        <li key={type + index.toString()}>
+                            <TextLayout size={type}>{type}</TextLayout>
+                            <SmallText>{size}</SmallText>
+                        </li>
+                    ))}
+            </ListGrid>
+        </Section>
+    </Main>
+);
+
+
+export default Typography;