From 0b42feb69734a24e2f587592a365085895743e37 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 25 Nov 2019 08:40:32 +0700
Subject: [PATCH] Create TS type for pattern

---
 client/Home.tsx                          | 73 ++++++++++++------------
 client/components/CoverCard.tsx          |  3 +-
 client/components/RelatedPatterns.tsx    |  3 +-
 client/constants/Pattern.ts              | 40 +++++++++++++
 client/loaders/CoverLoader.tsx           |  4 +-
 client/patterns/radio-switch/Details.tsx |  3 +-
 client/patterns/switch/Details.tsx       |  3 +-
 7 files changed, 88 insertions(+), 41 deletions(-)
 create mode 100644 client/constants/Pattern.ts

diff --git a/client/Home.tsx b/client/Home.tsx
index 06d6128..e15d163 100644
--- a/client/Home.tsx
+++ b/client/Home.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import CoverCard from './components/CoverCard';
 import Heading from './components/Heading';
+import Pattern from './constants/Pattern';
 import useDocumentTitle from './hooks/useDocumentTitle';
 import Layout from './layouts/Layout';
 
@@ -57,11 +58,11 @@ const Home = () => {
                     <Heading title="Layouts" />
 
                     <div className="flex flex-wrap items-start pa4">
-                        <CoverCard pattern="Holy grail" />
-                        <CoverCard pattern="Sidebar" />
-                        <CoverCard pattern="Split screen" />
-                        <CoverCard pattern="Sticky footer" />
-                        <CoverCard pattern="Sticky header" />
+                        <CoverCard pattern={Pattern.HolyGrail} />
+                        <CoverCard pattern={Pattern.Sidebar} />
+                        <CoverCard pattern={Pattern.SplitScreen} />
+                        <CoverCard pattern={Pattern.StickyFooter} />
+                        <CoverCard pattern={Pattern.StickyHeader} />
                     </div>
                 </section>
 
@@ -69,37 +70,37 @@ const Home = () => {
                     <Heading title="Patterns" />
 
                     <div className="flex flex-wrap items-start pa4">
-                        <CoverCard pattern="Badge" />
-                        <CoverCard pattern="Breadcrumb" />
-                        <CoverCard pattern="Button with icon" />
-                        <CoverCard pattern="Card" />
-                        <CoverCard pattern="Centering" />
-                        <CoverCard pattern="Docked at corner" />
-                        <CoverCard pattern="Dot navigation" />
-                        <CoverCard pattern="Feature list" />
-                        <CoverCard pattern="Fixed at corner" />
-                        <CoverCard pattern="Input add-on" />
-                        <CoverCard pattern="Media object" />
-                        <CoverCard pattern="Menu" />
-                        <CoverCard pattern="Modal" />
-                        <CoverCard pattern="Notification" />
-                        <CoverCard pattern="Pagination" />
-                        <CoverCard pattern="Previous next buttons" />
-                        <CoverCard pattern="Pricing table" />
-                        <CoverCard pattern="Progress bar" />
-                        <CoverCard pattern="Questions and answers" />
-                        <CoverCard pattern="Radio switch" />
-                        <CoverCard pattern="Same height columns" />
-                        <CoverCard pattern="Search box" />
-                        <CoverCard pattern="Separator" />
-                        <CoverCard pattern="Simple grid" />
-                        <CoverCard pattern="Slider" />
-                        <CoverCard pattern="Split navigation" />
-                        <CoverCard pattern="Stepper input" />
-                        <CoverCard pattern="Switch" />
-                        <CoverCard pattern="Tab" />
-                        <CoverCard pattern="Toggle password visibility" />
-                        <CoverCard pattern="Wizard" />
+                        <CoverCard pattern={Pattern.Badge} />
+                        <CoverCard pattern={Pattern.Breadcrumb} />
+                        <CoverCard pattern={Pattern.ButtonWithIcon} />
+                        <CoverCard pattern={Pattern.Card} />
+                        <CoverCard pattern={Pattern.Centering} />
+                        <CoverCard pattern={Pattern.DockedAtCorner} />
+                        <CoverCard pattern={Pattern.DotNavigation} />
+                        <CoverCard pattern={Pattern.FeatureList} />
+                        <CoverCard pattern={Pattern.FixedAtCorner} />
+                        <CoverCard pattern={Pattern.InputAddOn} />
+                        <CoverCard pattern={Pattern.MediaObject} />
+                        <CoverCard pattern={Pattern.Menu} />
+                        <CoverCard pattern={Pattern.Modal} />
+                        <CoverCard pattern={Pattern.Notification} />
+                        <CoverCard pattern={Pattern.Pagination} />
+                        <CoverCard pattern={Pattern.PreviousNextButtons} />
+                        <CoverCard pattern={Pattern.PricingTable} />
+                        <CoverCard pattern={Pattern.ProgressBar} />
+                        <CoverCard pattern={Pattern.QuestionsAndAnswers} />
+                        <CoverCard pattern={Pattern.RadioSwitch} />
+                        <CoverCard pattern={Pattern.SameHeightColumns} />
+                        <CoverCard pattern={Pattern.SearchBox} />
+                        <CoverCard pattern={Pattern.Separator} />
+                        <CoverCard pattern={Pattern.SimpleGrid} />
+                        <CoverCard pattern={Pattern.Slider} />
+                        <CoverCard pattern={Pattern.SplitNavigation} />
+                        <CoverCard pattern={Pattern.StepperInput} />
+                        <CoverCard pattern={Pattern.Switch} />
+                        <CoverCard pattern={Pattern.Tab} />
+                        <CoverCard pattern={Pattern.TogglePasswordVisibility} />
+                        <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>
             </div>
diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index 651aabd..d862514 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import Pattern from '../constants/Pattern';
 import slug from '../helpers/slug';
 import CoverLoader from '../loaders/CoverLoader';
 
 interface CoverCardProps {
-    pattern: string;
+    pattern: Pattern;
 }
 
 const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx
index 06eb348..c9d4a47 100644
--- a/client/components/RelatedPatterns.tsx
+++ b/client/components/RelatedPatterns.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 
+import Pattern from '../constants/Pattern';
 import CoverCard from './CoverCard';
 import Heading from './Heading';
 
 interface RelatedPatternsProps {
-    patterns: string[];
+    patterns: Pattern[];
 }
 
 const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
new file mode 100644
index 0000000..2fcc9fd
--- /dev/null
+++ b/client/constants/Pattern.ts
@@ -0,0 +1,40 @@
+enum Pattern {
+    Badge = 'Badge',
+    Breadcrumb = 'Breadcrumb',
+    ButtonWithIcon = 'Button with icon',
+    Card = 'Card',
+    Centering = 'Centering',
+    DockedAtCorner = 'Docked at corner',
+    DotNavigation = 'Dot navigation',
+    FeatureList = 'Feature list',
+    FixedAtCorner = 'Fixed at corner',
+    HolyGrail = 'Holy grail',
+    InputAddOn = 'Input add-on',
+    MediaObject = 'Media object',
+    Menu = 'Menu',
+    Modal = 'Modal',
+    Notification = 'Notification',
+    Pagination = 'Pagination',
+    PreviousNextButtons = 'Previous next buttons',
+    PricingTable = 'Pricing table',
+    ProgressBar = 'Progress bar',
+    QuestionsAndAnswers = 'Questions and answers',
+    RadioSwitch = 'Radio switch',
+    SameHeightColumns = 'Same height columns',
+    SearchBox = 'Search box',
+    Separator = 'Separator',
+    Sidebar = 'Sidebar',
+    SimpleGrid = 'Simple grid',
+    Slider = 'Slider',
+    SplitNavigation = 'Split navigation',
+    SplitScreen = 'Split screen',
+    StepperInput = 'Stepper input',
+    StickyFooter = 'Sticky footer',
+    StickyHeader = 'Sticky header',
+    Switch = 'Switch',
+    Tab = 'Tab',
+    TogglePasswordVisibility = 'Toggle password visibility',
+    Wizard = 'Wizard',
+}
+
+export default Pattern;
diff --git a/client/loaders/CoverLoader.tsx b/client/loaders/CoverLoader.tsx
index 0a5eac4..9a50c25 100644
--- a/client/loaders/CoverLoader.tsx
+++ b/client/loaders/CoverLoader.tsx
@@ -1,7 +1,9 @@
 import loadable, { LoadableComponent } from '@loadable/component';
 
+import Pattern from '../constants/Pattern';
+
 interface CoverLoaderProps {
-    pattern: string;
+    pattern: Pattern;
 }
 
 const slug = (item: string) => item.toLowerCase().split(' ').join('-');
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index b7c7d43..431cf1f 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import Heading from '../../components/Heading';
 import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
@@ -79,7 +80,7 @@ const Details: React.FC<{}> = () => {
                     </div>
                 </div>
             </section>
-            <RelatedPatterns patterns={['Switch']} />
+            <RelatedPatterns patterns={[Pattern.Switch]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index ead8306..b3123eb 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
@@ -65,7 +66,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={['Radio switch']} />
+            <RelatedPatterns patterns={[Pattern.RadioSwitch]} />
         </DetailsLayout>
     );
 };