Merge pull request #50 from phuoc-ng/pattern

Create TS type for pattern

README.md

@@ -9,6 +9,8 @@ A collection of popular layouts and patterns made with CSS:
 * Good practices (coming soon)
 * Accessibility (coming soon)
 
+![CSS Layout](/public/images/screenshot.png)
+
 ## Why
 
 Being a front-end engineer, I have to deal with a lot of layouts and components.

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={Pattern.HolyGrail} />
-                        <CoverCard pattern="Sidebar" />
+                        <CoverCard pattern={Pattern.Sidebar} />
-                        <CoverCard pattern="Split screen" />
+                        <CoverCard pattern={Pattern.SplitScreen} />
-                        <CoverCard pattern="Sticky footer" />
+                        <CoverCard pattern={Pattern.StickyFooter} />
-                        <CoverCard pattern="Sticky header" />
+                        <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={Pattern.Badge} />
-                        <CoverCard pattern="Breadcrumb" />
+                        <CoverCard pattern={Pattern.Breadcrumb} />
-                        <CoverCard pattern="Button with icon" />
+                        <CoverCard pattern={Pattern.ButtonWithIcon} />
-                        <CoverCard pattern="Card" />
+                        <CoverCard pattern={Pattern.Card} />
-                        <CoverCard pattern="Centering" />
+                        <CoverCard pattern={Pattern.Centering} />
-                        <CoverCard pattern="Docked at corner" />
+                        <CoverCard pattern={Pattern.DockedAtCorner} />
-                        <CoverCard pattern="Dot navigation" />
+                        <CoverCard pattern={Pattern.DotNavigation} />
-                        <CoverCard pattern="Feature list" />
+                        <CoverCard pattern={Pattern.FeatureList} />
-                        <CoverCard pattern="Fixed at corner" />
+                        <CoverCard pattern={Pattern.FixedAtCorner} />
-                        <CoverCard pattern="Input add-on" />
+                        <CoverCard pattern={Pattern.InputAddOn} />
-                        <CoverCard pattern="Media object" />
+                        <CoverCard pattern={Pattern.MediaObject} />
-                        <CoverCard pattern="Menu" />
+                        <CoverCard pattern={Pattern.Menu} />
-                        <CoverCard pattern="Modal" />
+                        <CoverCard pattern={Pattern.Modal} />
-                        <CoverCard pattern="Notification" />
+                        <CoverCard pattern={Pattern.Notification} />
-                        <CoverCard pattern="Pagination" />
+                        <CoverCard pattern={Pattern.Pagination} />
-                        <CoverCard pattern="Previous next buttons" />
+                        <CoverCard pattern={Pattern.PreviousNextButtons} />
-                        <CoverCard pattern="Pricing table" />
+                        <CoverCard pattern={Pattern.PricingTable} />
-                        <CoverCard pattern="Progress bar" />
+                        <CoverCard pattern={Pattern.ProgressBar} />
-                        <CoverCard pattern="Questions and answers" />
+                        <CoverCard pattern={Pattern.QuestionsAndAnswers} />
-                        <CoverCard pattern="Radio switch" />
+                        <CoverCard pattern={Pattern.RadioSwitch} />
-                        <CoverCard pattern="Same height columns" />
+                        <CoverCard pattern={Pattern.SameHeightColumns} />
-                        <CoverCard pattern="Search box" />
+                        <CoverCard pattern={Pattern.SearchBox} />
-                        <CoverCard pattern="Separator" />
+                        <CoverCard pattern={Pattern.Separator} />
-                        <CoverCard pattern="Simple grid" />
+                        <CoverCard pattern={Pattern.SimpleGrid} />
-                        <CoverCard pattern="Slider" />
+                        <CoverCard pattern={Pattern.Slider} />
-                        <CoverCard pattern="Split navigation" />
+                        <CoverCard pattern={Pattern.SplitNavigation} />
-                        <CoverCard pattern="Stepper input" />
+                        <CoverCard pattern={Pattern.StepperInput} />
-                        <CoverCard pattern="Switch" />
+                        <CoverCard pattern={Pattern.Switch} />
-                        <CoverCard pattern="Tab" />
+                        <CoverCard pattern={Pattern.Tab} />
-                        <CoverCard pattern="Toggle password visibility" />
+                        <CoverCard pattern={Pattern.TogglePasswordVisibility} />
-                        <CoverCard pattern="Wizard" />
+                        <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>
             </div>

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 }) => {

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 }) => {

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;

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('-');

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>
     );
 };

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>
     );
 };

package.json

@@ -1,7 +1,7 @@
 {
     "name": "csslayout",
     "scripts": {
-        "copy": "rm -rf dist && mkdir dist && cp robots.txt dist && cp sitemap.xml dist",
+        "copy": "rm -rf dist && mkdir dist && cp -rf public/* dist",
         "dev": "npm run copy && webpack --mode development",
         "dev-server": "npm run copy && webpack-dev-server",
         "build": "npm run copy && webpack --mode production && npm run export",