mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 06:07:33 +02:00
Code Issues Releases Wiki Activity

Merge pull request #49 from phuoc-ng/ts

Browse Source 
Convert entire code to Typescript
This commit is contained in:
phuoc-ng
2019-11-25 01:03:04 +07:00
committed by GitHub
parent bf35bd3b92 5fd9ff5ddf
commit 60612ba11c
111 changed files with 730 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,3 +1,4 @@
.netlify
dist
node_modules
node_modules
tslint.log

8
client/App.jsx → client/App.tsx
View File

@@ -27,10 +27,14 @@ const App = () => {
<Route exact={true} path='/modal'><DetailsLoader pattern="Modal" /></Route>
<Route exact={true} path='/notification'><DetailsLoader pattern="Notification" /></Route>
<Route exact={true} path='/pagination'><DetailsLoader pattern="Pagination" /></Route>
<Route exact={true} path='/previous-next-buttons'><DetailsLoader pattern="Previous next buttons" /></Route>
<Route exact={true} path='/previous-next-buttons'>
<DetailsLoader pattern="Previous next buttons" />
</Route>
<Route exact={true} path='/pricing-table'><DetailsLoader pattern="Pricing table" /></Route>
<Route exact={true} path='/progress-bar'><DetailsLoader pattern="Progress bar" /></Route>
<Route exact={true} path='/questions-and-answers'><DetailsLoader pattern="Questions and answers" /></Route>
<Route exact={true} path='/questions-and-answers'>
<DetailsLoader pattern="Questions and answers" />
</Route>
<Route exact={true} path='/radio-switch'><DetailsLoader pattern="Radio switch" /></Route>
<Route exact={true} path='/same-height-columns'><DetailsLoader pattern="Same height columns" /></Route>
<Route exact={true} path='/search-box'><DetailsLoader pattern="Search box" /></Route>

11
client/Home.jsx → client/Home.tsx
View File

@@ -12,9 +12,16 @@ const Home = () => {
<Layout>
<div className="mt5 bl br bt b--black-20 br4 br--top">
<div className="relative">
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>CSS Layout</h1>
<h1
className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue"
style={{ left: '50%', transform: 'translate(-50%, -50%)' }}
>
CSS Layout
</h1>
<h2 className="fw3 f3 tc lh-copy ma0 pa4">a collection of popular layouts and patterns made with CSS</h2>
<h2 className="fw3 f3 tc lh-copy ma0 pa4">
a collection of popular layouts and patterns made with CSS
</h2>
<div className="w-30 center mb4">
<ul className="ma0 pa0 list f4 lh-copy">

8
client/components/CoverCard.jsx → client/components/CoverCard.tsx
View File

@@ -1,10 +1,14 @@
import React from 'react';
import { Link } from 'react-router-dom';
import CoverLoader from '../loaders/CoverLoader';
import slug from '../helpers/slug';
import CoverLoader from '../loaders/CoverLoader';
const CoverCard = ({ pattern }) => {
interface CoverCardProps {
pattern: string;
}
const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
return (
<div className="pa1 w-20">
<Link

6
client/components/Heading.jsx → client/components/Heading.tsx
View File

@@ -1,6 +1,10 @@
import React from 'react';
const Heading = ({ title }) => {
interface HeadingProps {
title: string;
}
const Heading: React.FC<HeadingProps> = ({ title }) => {
return (
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3>

8
client/components/RelatedPatterns.jsx → client/components/RelatedPatterns.tsx
View File

@@ -3,14 +3,18 @@ import React, { useEffect } from 'react';
import CoverCard from './CoverCard';
import Heading from './Heading';
const RelatedPatterns = ({ patterns }) => {
interface RelatedPatternsProps {
patterns: string[];
}
const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
return (
<section>
<Heading title="Related patterns" />
<div className="flex flex-wrap items-start pa4">
{
patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
}
</div>
</section>

7
client/components/SampleCode.jsx → client/components/SampleCode.tsx
View File

@@ -2,7 +2,12 @@ import React from 'react';
import highlight from '../helpers/highlight';
const SampleCode = ({ code, lang }) => {
interface SampleCodeProps {
code: string;
lang: string;
}
const SampleCode: React.FC<SampleCodeProps> = ({ code, lang }) => {
return code === ''
? <></>
: (

6
client/helpers/highlight.js → client/helpers/highlight.ts
View File

@@ -1,9 +1,9 @@
import hljs from 'highlight.js/lib/highlight';
import html from 'highlight.js/lib/languages/xml';
import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
hljs.registerLanguage('html', html);
const highlight = (input, language) => {
const highlight = (input: string, language: string) => {
const lang = language || 'html';
const { value } = hljs.highlight(lang, input);
const highlighted = value.replace('&amp;', '&').trim();

2
client/helpers/random.js
View File

@@ -1,2 +0,0 @@
const random = (min, max) => min + Math.round(Math.random() * (max - min));
export default random;

3
client/helpers/random.ts Normal file
View File

@@ -0,0 +1,3 @@
const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
export default random;

2
client/helpers/randomFromArray.js
View File

@@ -1,2 +0,0 @@
const randomFromArray = (array) => array[Math.floor(Math.random() * array.length)];
export default randomFromArray;

3
client/helpers/randomFromArray.ts Normal file
View File

@@ -0,0 +1,3 @@
const randomFromArray = (array: number[]) => array[Math.floor(Math.random() * array.length)];
export default randomFromArray;

2
client/helpers/shuffe.js → client/helpers/shuffe.ts
View File

@@ -1,4 +1,4 @@
const shuffe = (array) => {
const shuffe = (array: number[]) => {
array.sort(() => Math.random() - 0.5);
return array;
};

2
client/helpers/slug.js
View File

@@ -1,2 +0,0 @@
const slug = item => item.toLowerCase().split(' ').join('-');
export default slug;

3
client/helpers/slug.ts Normal file
View File

@@ -0,0 +1,3 @@
const slug = (item: string) => item.toLowerCase().split(' ').join('-');
export default slug;

2
client/hooks/useDocumentTitle.js → client/hooks/useDocumentTitle.ts
View File

@@ -1,6 +1,6 @@
import { useEffect } from 'react';
const useDocumentTitle = (title) => {
const useDocumentTitle = (title: string) => {
useEffect(() => {
document.title = title;
}, [title]);

4
client/hooks/useInterval.js → client/hooks/useInterval.ts
View File

@@ -1,6 +1,6 @@
import { useEffect } from 'react';
const useInterval = (callback, delay) => {
const useInterval = (callback: () => void, delay?: number) => {
useEffect(
() => {
const handler = () => callback();
@@ -9,7 +9,7 @@ const useInterval = (callback, delay) => {
return () => clearInterval(id);
}
},
[delay]
[delay],
);
};

0
client/index.jsx → client/index.tsx
View File

6
client/layouts/DetailsLayout.jsx → client/layouts/DetailsLayout.tsx
View File

@@ -4,7 +4,11 @@ import { Link } from 'react-router-dom';
import useDocumentTitle from '../hooks/useDocumentTitle';
import Layout from './Layout';
const DetailsLayout = ({ title, children }) => {
interface DetailsLayoutProps {
title: string;
}
const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
useDocumentTitle(`CSS Layout ∙ ${title}`);
return (

17
client/layouts/Footer.jsx → client/layouts/Footer.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Heading from '../components/Heading';
const Footer = () => {
const Footer: React.FC<{}> = () => {
return (
<div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
<div className="br b--black-20" style={{ flex: 1 }}>
@@ -35,7 +35,10 @@ const Footer = () => {
<ul className="list ma0 pa0 lh-copy fw5">
<li className="mb1">
<a href="https://twitter.com/nghuuphuoc" className="link flex items-center">
<span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
<span
className="bg-black-40 br-pill flex items-center justify-center mr2"
style={{ height: '24px', width: '24px' }}
>
<svg
viewBox="0 0 24 24"
className="w-60 h-60"
@@ -55,7 +58,10 @@ const Footer = () => {
</li>
<li className="mb1">
<a href="mailto: me@phuoc.ng" className="link flex items-center">
<span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
<span
className="bg-black-40 br-pill flex items-center justify-center mr2"
style={{ height: '24px', width: '24px' }}
>
<svg
viewBox="0 0 24 24"
className="w-60 h-60"
@@ -75,7 +81,10 @@ const Footer = () => {
</li>
<li className="mb1">
<a href="https://github.com/phuoc-ng/csslayout" className="link flex items-center">
<span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
<span
className="bg-black-40 br-pill flex items-center justify-center mr2"
style={{ height: '24px', width: '24px' }}
>
<svg
viewBox="0 0 24 24"
className="w-60 h-60"

2
client/layouts/Layout.jsx → client/layouts/Layout.tsx
View File

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import Footer from './Footer';
const Layout = ({ children }) => {
const Layout: React.FC<{}> = ({ children }) => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);

8
client/loaders/CoverLoader.jsx
View File

@@ -1,8 +0,0 @@
import loadable from '@loadable/component';
//import slug from './helpers/slug';
const slug = item => item.toLowerCase().split(' ').join('-');
const CoverLoader = loadable(props => import(`../patterns/${slug(props.pattern)}/Cover`));
export default CoverLoader;

11
client/loaders/CoverLoader.tsx Normal file
View File

@@ -0,0 +1,11 @@
import loadable, { LoadableComponent } from '@loadable/component';
interface CoverLoaderProps {
pattern: string;
}
const slug = (item: string) => item.toLowerCase().split(' ').join('-');
const CoverLoader: LoadableComponent<CoverLoaderProps> = loadable((props: CoverLoaderProps) => import(`../patterns/${slug(props.pattern)}/Cover`));
export default CoverLoader;

14
client/loaders/DetailsLoader.jsx → client/loaders/DetailsLoader.tsx
View File

@@ -1,9 +1,13 @@
import loadable, { LoadableComponent } from '@loadable/component';
import React from 'react';
import loadable from '@loadable/component';
import './spinner.css';
const slug = item => item.toLowerCase().split(' ').join('-');
interface DetailsLoaderProps {
pattern: string;
}
const slug = (item: string) => item.toLowerCase().split(' ').join('-');
// In order to create a link to another page that is dynamically loaded (via <Link to="...">),
// the page chunks have to be loadable by @loadable.
@@ -12,9 +16,9 @@ const slug = item => item.toLowerCase().split(' ').join('-');
// {
// "plugins": ["@loadable/babel-plugin"],
// }
const loadDetails = /* #__LOADABLE__ */ (props) => import(`../patterns/${slug(props.pattern)}/Details`)
const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`../patterns/${slug(props.pattern)}/Details`);
const DetailsLoader = loadable(loadDetails, {
const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
fallback: (
<div className="w100 h-100 flex items-center justify-center">
<svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
@@ -30,7 +34,7 @@ const DetailsLoader = loadable(loadDetails, {
/>
</svg>
</div>
)
),
});
export default DetailsLoader;

2
client/patterns/badge/Cover.jsx → client/patterns/badge/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

6
client/patterns/badge/Details.jsx → client/patterns/badge/Details.tsx
View File

@@ -3,18 +3,18 @@ import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Badge">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2 f4">
1
</div>
</div>
}
)}
source={`
<div style="
/* Content is centered */

2
client/patterns/breadcrumb/Cover.jsx → client/patterns/breadcrumb/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

6
client/patterns/breadcrumb/Details.jsx → client/patterns/breadcrumb/Details.tsx
View File

@@ -4,12 +4,12 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Breadcrumb">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center">
<div className="w4"><Rectangle height={16} /></div>
@@ -21,7 +21,7 @@ const Details = () => {
<div className="w2"><Rectangle height={16} /></div>
</div>
</div>
}
)}
source={`
<div style="
/* Content is centered vertically */

2
client/patterns/button-with-icon/Cover.jsx → client/patterns/button-with-icon/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

6
client/patterns/button-with-icon/Details.jsx → client/patterns/button-with-icon/Details.tsx
View File

@@ -5,12 +5,12 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Button with icon">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
@@ -19,7 +19,7 @@ const Details = () => {
</button>
</div>
</div>
}
)}
source={`
<button style="
/* Content is centered */

2
client/patterns/card/Cover.jsx → client/patterns/card/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex flex-column h-100 pa2">

6
client/patterns/card/Details.jsx → client/patterns/card/Details.tsx
View File

@@ -5,12 +5,12 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Card">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="b--black-30 ba br2 flex flex-column w5">
<Rectangle height={150} />
@@ -22,7 +22,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<div style="
display: flex;

2
client/patterns/centering/Cover.jsx → client/patterns/centering/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

6
client/patterns/centering/Details.jsx → client/patterns/centering/Details.tsx
View File

@@ -5,19 +5,19 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Centering">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<Circle size={64} />
<div className="w-40 mt3"><Rectangle /></div>
<div className="w-30 mt2"><Rectangle /></div>
<div className="w-20 mt2"><Rectangle /></div>
</div>
}
)}
source={`
<div style="
align-items: center;

2
client/patterns/docked-at-corner/Cover.jsx → client/patterns/docked-at-corner/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

6
client/patterns/docked-at-corner/Details.jsx → client/patterns/docked-at-corner/Details.tsx
View File

@@ -5,12 +5,12 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Docked at corner">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="w4 pa3 relative ba b--black-30 br2">
<Rectangle />
@@ -20,7 +20,7 @@ const Details = () => {
/>
</div>
</div>
}
)}
source={`
<div style="
position: relative;

2
client/patterns/dot-navigation/Cover.jsx → client/patterns/dot-navigation/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

12
client/patterns/dot-navigation/Details.jsx → client/patterns/dot-navigation/Details.tsx
View File

@@ -3,10 +3,14 @@ import React, { useState } from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
interface DotProps {
index: number;
}
const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = useState(0);
const Dot = ({ index }) => {
const Dot: React.FC<DotProps> = ({ index }) => {
const isActive = index === activeItem;
const click = () => setActiveItem(index);
return (
@@ -25,7 +29,7 @@ const Details = () => {
<DetailsLayout title="Dot navigation">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<ul className="list ma0 pa0 flex items-center justify-center">
<Dot index={0} />
@@ -34,7 +38,7 @@ const Details = () => {
<Dot index={3} />
</ul>
</div>
}
)}
source={`
<ul style="
/* Content is centered */

2
client/patterns/feature-list/Cover.jsx → client/patterns/feature-list/Cover.tsx
View File

@@ -5,7 +5,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex flex-column justify-center h-100 pa2 w-100">

6
client/patterns/feature-list/Details.jsx → client/patterns/feature-list/Details.tsx
View File

@@ -6,12 +6,12 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Feature list">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="flex h-100 items-center justify-center">
<div className="w-60">
<div className="flex flex-row mb4">
@@ -30,7 +30,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<!-- Feature item -->
<div style="

2
client/patterns/fixed-at-corner/Cover.jsx → client/patterns/fixed-at-corner/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Triangle from '../../placeholders/Triangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="relative">

6
client/patterns/fixed-at-corner/Details.jsx → client/patterns/fixed-at-corner/Details.tsx
View File

@@ -4,12 +4,12 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Fixed at corner">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="relative h-100">
<div className="absolute top-0 left-0">
<Triangle size={64} corner="tl" />
@@ -24,7 +24,7 @@ const Details = () => {
<Triangle size={64} corner="bl" />
</div>
</div>
}
)}
source={`
<div style="
position: relative;

2
client/patterns/holy-grail/Cover.jsx → client/patterns/holy-grail/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column">

8
client/patterns/holy-grail/Details.jsx → client/patterns/holy-grail/Details.tsx
View File

@@ -5,12 +5,12 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Holy grail">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30 pa3">
<div className="w-50"><Rectangle /></div>
@@ -30,7 +30,7 @@ const Details = () => {
<div className="w-40"><Rectangle /></div>
</div>
</div>
}
)}
source={`
<div style="
display: flex;
@@ -42,7 +42,7 @@ const Details = () => {
<main style="
/* Take the remaining height */
flex-grow: 1;
/* Layout the left sidebar, main content and right sidebar */
display: flex;
flex-direction: row;

8
client/patterns/input-add-on/Cover.jsx → client/patterns/input-add-on/Cover.tsx
View File

@@ -3,17 +3,15 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center pa2">
<div className="b--black-30 ba br2 flex w-100 h1">
<div className="b--black-30 br flex items-center justify-center w-30 ph2">
<div className="w-100">
<Line />
</div>
<div className="w-100"><Line /></div>
</div>
<div className="flex-grow-1"></div>
<div className="flex-grow-1" />
</div>
</div>
</Frame>

14
client/patterns/input-add-on/Details.jsx → client/patterns/input-add-on/Details.tsx
View File

@@ -4,12 +4,12 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Input add-on">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br2 flex h2 w-100 mb3">
@@ -35,7 +35,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<!-- Add-on prepended -->
<div style="
@@ -46,7 +46,7 @@ const Details = () => {
">
<!-- Add-on -->
<div style="
/* Content is centered */
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
@@ -76,7 +76,7 @@ const Details = () => {
<!-- Add-on -->
<div style="
/* Content is centered */
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
@@ -94,7 +94,7 @@ const Details = () => {
">
<!-- Add-on -->
<div style="
/* Content is centered */
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
@@ -110,7 +110,7 @@ const Details = () => {
<!-- Add-on -->
<div style="
/* Content is centered */
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;

6
client/patterns/media-object/Cover.jsx → client/patterns/media-object/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Square from '../../placeholders/Square';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex h-100 items-start pa2 w-100">
@@ -15,11 +15,11 @@ const Cover = () => {
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb3"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb3"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb1"><Line /></div>

6
client/patterns/media-object/Details.jsx → client/patterns/media-object/Details.tsx
View File

@@ -6,12 +6,12 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Square from '../../placeholders/Square';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Media object">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex items-start pa3">
<div className="w4 h4 mr3">
<Square />
@@ -24,7 +24,7 @@ const Details = () => {
<div className="mb4"><Block numberOfBlocks={15} /></div>
</div>
</div>
}
)}
source={`
<div style="
/* Align sub-items to top */

2
client/patterns/menu/Cover.jsx → client/patterns/menu/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa3">

6
client/patterns/menu/Details.jsx → client/patterns/menu/Details.tsx
View File

@@ -5,12 +5,12 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Menu">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex flex-column w-40">
<div className="flex items-center h2 ph2 hover-bg-black-10">
@@ -46,7 +46,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<div style="
display: flex;

2
client/patterns/modal/Cover.jsx → client/patterns/modal/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex flex-column h-100 items-center justify-center pa3">

6
client/patterns/modal/Details.jsx → client/patterns/modal/Details.tsx
View File

@@ -6,12 +6,12 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Modal">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 w-50">
<div className="flex items-center justify-between bb b--black-30 pa3">
@@ -30,7 +30,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<div style="
/* Border */

2
client/patterns/notification/Cover.jsx → client/patterns/notification/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

11
client/patterns/notification/Details.jsx → client/patterns/notification/Details.tsx
View File

@@ -5,21 +5,24 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Notification">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex justify-between w-60">
<div className="pa3 w-80"><Block numberOfBlocks={5} /></div>
<button className="black-30 bn f2 flex h2 items-center justify-center w2" style={{ marginRight: '1px' }}>
<button
className="black-30 bn f2 flex h2 items-center justify-center w2"
style={{ marginRight: '1px' }}
>
<Circle />
</button>
</div>
</div>
}
)}
source={`
<div style="
display: flex;

5
client/patterns/pagination/Cover.jsx → client/patterns/pagination/Cover.tsx
View File

@@ -1,10 +1,9 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

6
client/patterns/pagination/Details.jsx → client/patterns/pagination/Details.tsx
View File

@@ -5,12 +5,12 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Pagination">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="b--black-30 ba br2 flex">
<div className="b--black-30 br flex items-center justify-center pa2 w4">
@@ -33,7 +33,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<div style="
display: flex;

2
client/patterns/previous-next-buttons/Cover.jsx → client/patterns/previous-next-buttons/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

6
client/patterns/previous-next-buttons/Details.jsx → client/patterns/previous-next-buttons/Details.tsx
View File

@@ -4,12 +4,12 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Previous and next buttons">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-50">
<div className="flex items-center justify-between pa2 w-100 h2">
@@ -24,7 +24,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<div style="
align-items: center;

17
client/patterns/pricing-table/Cover.jsx → client/patterns/pricing-table/Cover.tsx
View File

@@ -5,11 +5,14 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center ph2">
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{ flex: 1 }}>
<div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1"
style={{ flex: 1 }}
>
<div className="mb1"><Circle /></div>
<div className="mb1 w-100">
<div className="w-100 mb1"><Line /></div>
@@ -18,7 +21,10 @@ const Cover = () => {
</div>
<Rectangle />
</div>
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{ flex: 1 }}>
<div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1"
style={{ flex: 1 }}
>
<div className="mb1"><Circle /></div>
<div className="mb1 w-100">
<div className="w-100 mb1"><Line /></div>
@@ -29,7 +35,10 @@ const Cover = () => {
</div>
<Rectangle />
</div>
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1" style={{ flex: 1 }}>
<div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa1"
style={{ flex: 1 }}
>
<div className="mb1"><Circle /></div>
<div className="mb1 w-100">
<div className="w-100 mb1"><Line /></div>

41
client/patterns/pricing-table/Details.jsx → client/patterns/pricing-table/Details.tsx
View File

@@ -1,46 +1,49 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import Circle from '../../placeholders/Circle';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Pricing table">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex items-center justify-center pa3">
<div className="w-60 flex items-center justify-center">
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
style={{ flex: 1 }}
>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={10} />
</div>
<div className="mb3 w-100"><Block numberOfBlocks={10} /></div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
style={{ flex: 1 }}
>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={20} />
</div>
<div className="mb3 w-100"><Block numberOfBlocks={20} /></div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={10} />
</div>
<div className="w-40"><Rectangle height={32} /></div>
<div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
style={{ flex: 1 }}
>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100"><Block numberOfBlocks={10} /></div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
</div>
</div>
}
)}
source={`
<div style="
/* Content is centered horizontally */

2
client/patterns/progress-bar/Cover.jsx → client/patterns/progress-bar/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

15
client/patterns/progress-bar/Details.jsx → client/patterns/progress-bar/Details.tsx
View File

@@ -1,28 +1,31 @@
import React, { useState } from 'react';
import useInterval from '../../hooks/useInterval';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import useInterval from '../../hooks/useInterval';
const Details = () => {
const Details: React.FC<{}> = () => {
const [progress, setProgress] = useState(0);
useInterval(() => {
setProgress(v => v === 100 ? 0 : v + 1);
setProgress((v) => v === 100 ? 0 : v + 1);
}, 1 * 100);
return (
<DetailsLayout title="Progress bar">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="h1 w-50 br-pill bg-black-10">
<div className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7" style={{ width: `${progress}%` }}>
<div
className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7"
style={{ width: `${progress}%` }}
>
{progress}%
</div>
</div>
</div>
}
)}
source={`
<div style="
/* Colors */

2
client/patterns/questions-and-answers/Cover.jsx → client/patterns/questions-and-answers/Cover.tsx
View File

@@ -5,7 +5,7 @@ import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
import Triangle from '../../placeholders/Triangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

13
client/patterns/questions-and-answers/Details.jsx → client/patterns/questions-and-answers/Details.tsx
View File

@@ -6,10 +6,15 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Triangle from '../../placeholders/Triangle';
const Details = () => {
interface ItemProps {
index: number;
title: React.ReactNode;
}
const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = useState(-1);
const Item = ({ index, title, children }) => {
const Item: React.FC<ItemProps> = ({ index, title, children }) => {
const isOpened = (index === activeItem);
const click = () => setActiveItem(isOpened ? -1 : index);
return (
@@ -30,7 +35,7 @@ const Details = () => {
<DetailsLayout title="Questions and answers">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-60">
<div className="mb3 bt bb b--black-30">
@@ -59,7 +64,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<!-- Each question and answer item -->
<div style="

5
client/patterns/radio-switch/Cover.jsx → client/patterns/radio-switch/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">
@@ -11,8 +11,7 @@ const Cover = () => {
<div className="pa1" style={{ flex: 1 }}>
<Rectangle />
</div>
<div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }}>
</div>
<div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }} />
</div>
</div>
</Frame>

18
client/patterns/radio-switch/Details.jsx → client/patterns/radio-switch/Details.tsx
View File

@@ -5,28 +5,34 @@ import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
const [isFirstChecked, setFirstChecked] = useState(false);
const toggle = () => setFirstChecked(c => !c);
const toggle = () => setFirstChecked((c) => !c);
return (
<DetailsLayout title="Radio switch">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="inline-flex br-pill bg-black-10 pa1">
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
<input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
<div className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`} style={{ height: '8px' }} />
<div
className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`}
style={{ height: '8px' }}
/>
</label>
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
<input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} />
<div className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{ height: '8px' }} />
<div
className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`}
style={{ height: '8px' }}
/>
</label>
</div>
</div>
}
)}
source={`
<!-- Container -->
<div style="

2
client/patterns/same-height-columns/Cover.jsx → client/patterns/same-height-columns/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Square from '../../placeholders/Square';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex h-100 pa2">

6
client/patterns/same-height-columns/Details.jsx → client/patterns/same-height-columns/Details.tsx
View File

@@ -5,12 +5,12 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Same height columns">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="flex h-100 w-100">
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
@@ -44,7 +44,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<div style="display: flex;">
<!-- Column -->

2
client/patterns/search-box/Cover.jsx → client/patterns/search-box/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

20
client/patterns/search-box/Details.jsx → client/patterns/search-box/Details.tsx
View File

@@ -4,30 +4,40 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Search box">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="mb3 b--black-30 ba br1 flex">
<input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
<input
type="text"
placeholder="Search"
className="pa1 b--transparent"
style={{ flex: 1 }}
/>
<div className="pa2">
<Circle />
</div>
</div>
<div className="b--black-30 ba br1 flex flex-row-reverse">
<input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
<input
type="text"
placeholder="Search"
className="pa1 b--transparent"
style={{ flex: 1 }}
/>
<div className="pa2">
<Circle />
</div>
</div>
</div>
</div>
}
)}
source={`
<div style="
display: flex;

2
client/patterns/separator/Cover.jsx → client/patterns/separator/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

8
client/patterns/separator/Details.jsx → client/patterns/separator/Details.tsx
View File

@@ -4,12 +4,12 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Separator">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center w-60 relative">
<div className="absolute bg-white ph2" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
@@ -18,7 +18,7 @@ const Details = () => {
<div className="bb b--black-30 w-100" style={{ height: '1px' }} />
</div>
</div>
}
)}
source={`
<div style="
/* Content is centered horizontally */
@@ -32,7 +32,7 @@ const Details = () => {
<div style="
/* We won't see the separator line */
background: #FFF;
/* Displayed at the center of container */
left: 50%;
position: absolute;

2
client/patterns/sidebar/Cover.jsx → client/patterns/sidebar/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex">

8
client/patterns/sidebar/Details.jsx → client/patterns/sidebar/Details.tsx
View File

@@ -1,16 +1,16 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Sidebar">
<div className="ph4 pv5">
<div className="lh-copy mb3">Try to scroll the main content!</div>
<BrowserFrame
content={
content={(
<div className="h-100 flex">
<div className="b--black-30 br flex flex-column justify-end pa3 w-30">
<div className="mb3"><Block numberOfBlocks={5} /></div>
@@ -24,7 +24,7 @@ const Details = () => {
<div className="w-80"><Block numberOfBlocks={10} /></div>
</div>
</div>
}
)}
source={`
<div style="display: flex;">
<!-- Sidebar -->

2
client/patterns/simple-grid/Cover.jsx → client/patterns/simple-grid/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

6
client/patterns/simple-grid/Details.jsx → client/patterns/simple-grid/Details.tsx
View File

@@ -4,12 +4,12 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Simple grid">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-60">
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
@@ -82,7 +82,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<!-- Row -->
<div style="

2
client/patterns/slider/Cover.jsx → client/patterns/slider/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

10
client/patterns/slider/Details.jsx → client/patterns/slider/Details.tsx
View File

@@ -1,16 +1,16 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import Circle from '../../placeholders/Circle';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Slider">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center h1 w5">
<div className="w-20"><Rectangle height={2} /></div>
@@ -18,7 +18,7 @@ const Details = () => {
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
</div>
</div>
}
)}
source={`
<div style="
/* Content is centered horizontally */
@@ -37,7 +37,7 @@ const Details = () => {
/* Colors */
background-color: rgba(0, 0, 0, .3);
" />
<!-- Circle -->
<div style="
/* Size */

2
client/patterns/split-navigation/Cover.jsx → client/patterns/split-navigation/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

6
client/patterns/split-navigation/Details.jsx → client/patterns/split-navigation/Details.tsx
View File

@@ -4,12 +4,12 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Split navigation">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<ul className="list ma0 b--black-30 ba br3 flex items-center pa3 w-60">
<li className="w-20 mr1"><Rectangle /></li>
@@ -18,7 +18,7 @@ const Details = () => {
<li className="w-10 ml-auto"><Rectangle /></li>
</ul>
</div>
}
)}
source={`
<ul style="
/* Content is centered horizontally */

2
client/patterns/split-screen/Cover.jsx → client/patterns/split-screen/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex">

13
client/patterns/split-screen/Details.jsx → client/patterns/split-screen/Details.tsx
View File

@@ -1,19 +1,22 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Split screen">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex">
<div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
<div
className="b--black-30 br flex flex-column justify-center items-center"
style={{ flex: 1 }}
>
<div className="mb3"><Circle size={128} /></div>
<div className="w-60"><Rectangle /></div>
</div>
@@ -25,7 +28,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<div style="display: flex;">
<!-- Left content -->

4
client/patterns/stepper-input/Cover.jsx → client/patterns/stepper-input/Cover.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center pa2">
<div className="b--black-30 ba br2 flex w-100 h1">
<div className="b--black-30 br flex items-center justify-center w1">-</div>
<div className="flex-grow-1"></div>
<div className="flex-grow-1" />
<div className="b--black-30 bl flex items-center justify-center w1">+</div>
</div>
</div>

28
client/patterns/stepper-input/Details.jsx → client/patterns/stepper-input/Details.tsx
View File

@@ -4,11 +4,11 @@ import { Link } from 'react-router-dom';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
const [value, setValue] = useState(0);
const decrease = () => setValue(value - 1);
const increase = () => setValue(value + 1);
const change = (e) => setValue(parseInt(e.target.value, 10));
const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
return (
<DetailsLayout title="Stepper input">
@@ -17,17 +17,27 @@ const Details = () => {
The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
</div>
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex h2 w4">
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={decrease}>-</button>
<button
className="bg-black-05 bn flex items-center justify-center pointer w2"
onClick={decrease}
>
-
</button>
<div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}>
<input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} />
</div>
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={increase}>+</button>
<button
className="bg-black-05 bn flex items-center justify-center pointer w2"
onClick={increase}
>
+
</button>
</div>
</div>
}
)}
source={`
<div style="
display: flex;
@@ -41,11 +51,11 @@ const Details = () => {
">
<!-- Minus button -->
<button style="
/* Content is centered */
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Size */
width: 32px;
">-</button>
@@ -61,7 +71,7 @@ const Details = () => {
<!-- Plus button -->
<button style="
/* Content is centered */
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/sticky-footer/Cover.jsx → client/patterns/sticky-footer/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column">

6
client/patterns/sticky-footer/Details.jsx → client/patterns/sticky-footer/Details.tsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Sticky footer">
<div className="ph4 pv5">
@@ -13,7 +13,7 @@ const Details = () => {
The footer always sticks to the bottom if the main content is short.
</div>
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30 pa3">
<div className="w-50"><Rectangle /></div>
@@ -25,7 +25,7 @@ const Details = () => {
<div className="w-40"><Rectangle /></div>
</div>
</div>
}
)}
source={`
<div style="
display: flex;

2
client/patterns/sticky-header/Cover.jsx → client/patterns/sticky-header/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column">

10
client/patterns/sticky-header/Details.jsx → client/patterns/sticky-header/Details.tsx
View File

@@ -5,13 +5,15 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Sticky header">
<div className="ph4 pv5">
<div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
<div className="lh-copy mb3">
Try to scroll the main content to see the header sticks to the top of page.
</div>
<BrowserFrame
content={
content={(
<div>
<div className="top-0 bg-white bb b--black-30 pa3" style={{ position: 'sticky' }}>
<div className="w-50"><Rectangle /></div>
@@ -22,7 +24,7 @@ const Details = () => {
<div><Block numberOfBlocks={30} /></div>
</div>
</div>
}
)}
source={`
<div>
<header style="

2
client/patterns/switch/Cover.jsx → client/patterns/switch/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

13
client/patterns/switch/Details.jsx → client/patterns/switch/Details.tsx
View File

@@ -4,23 +4,26 @@ import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
const [checked, setChecked] = useState(false);
const toggle = () => setChecked(c => !c);
const toggle = () => setChecked((c) => !c);
return (
<DetailsLayout title="Switch">
<div className="ph4 pv5">
<div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
<div className="lh-copy mb3">
The checkbox is placed inside a label. So when clicking on the label,
the checkbox will be checked even though it's hidden.
</div>
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
<input type="checkbox" className="dn" checked={checked} onChange={toggle} />
<div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
</label>
</div>
}
)}
source={`
<label style="
display: flex;

9
client/patterns/tab/Cover.jsx → client/patterns/tab/Cover.tsx
View File

@@ -3,12 +3,17 @@ import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center justify-center">
<div className="ph2 pv1 ba b--black-30 br2 br--top" style={{ borderBottomColor: 'transparent' }}><Circle size={8} /></div>
<div
className="ph2 pv1 ba b--black-30 br2 br--top"
style={{ borderBottomColor: 'transparent' }}
>
<Circle size={8} />
</div>
<div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
<div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
</div>

12
client/patterns/tab/Details.jsx → client/patterns/tab/Details.tsx
View File

@@ -4,10 +4,14 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
interface TabProps {
tabIndex: number;
}
const Details: React.FC<{}> = () => {
const [activeTab, setActiveTab] = useState(0);
const Tab = ({ tabIndex, children }) => {
const Tab: React.FC<TabProps> = ({ tabIndex, children }) => {
const isActive = tabIndex === activeTab;
const click = () => setActiveTab(tabIndex);
return (
@@ -27,7 +31,7 @@ const Details = () => {
<DetailsLayout title="Tab">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center justify-center">
<Tab tabIndex={0}>
@@ -47,7 +51,7 @@ const Details = () => {
</Tab>
</div>
</div>
}
)}
source={`
<div style="
/* Content is centered */

2
client/patterns/toggle-password-visibility/Cover.jsx → client/patterns/toggle-password-visibility/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

10
client/patterns/toggle-password-visibility/Details.jsx → client/patterns/toggle-password-visibility/Details.tsx
View File

@@ -3,15 +3,15 @@ import React, { useState } from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
const [visible, setVisible] = useState(false);
const toggle = () => setVisible(v => !v);
const toggle = () => setVisible((v) => !v);
return (
<DetailsLayout title="Toggle password visibility">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br1 flex">
@@ -20,8 +20,8 @@ const Details = () => {
<svg
viewBox="0 0 24 24"
style={{
height: '24px',
fill: "none",
height: '24px',
stroke: "rgba(0, 0, 0, 0.4)",
strokeLinecap: "round",
strokeLinejoin: "round",
@@ -41,7 +41,7 @@ const Details = () => {
</div>
</div>
</div>
}
)}
source={`
<div style="
display: flex;

2
client/patterns/wizard/Cover.jsx → client/patterns/wizard/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

22
client/patterns/wizard/Details.jsx → client/patterns/wizard/Details.tsx
View File

@@ -6,12 +6,12 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Line from '../../placeholders/Line';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Wizard">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex w-80">
<div style={{ flex: 1 }}>
@@ -20,7 +20,9 @@ const Details = () => {
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }}><Line /></div>
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
<div className="ph3 flex justify-center">
<Block justify='center' numberOfBlocks={5} />
</div>
</div>
<div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center">
@@ -28,7 +30,9 @@ const Details = () => {
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }}><Line /></div>
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
<div className="ph3 flex justify-center">
<Block justify='center' numberOfBlocks={5} />
</div>
</div>
<div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center">
@@ -36,11 +40,13 @@ const Details = () => {
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }} />
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
<div className="ph3 flex justify-center">
<Block justify='center' numberOfBlocks={5} />
</div>
</div>
</div>
</div>
}
)}
source={`
<div style="
display: flex;
@@ -62,7 +68,7 @@ const Details = () => {
height: 1px;
background-color: rgba(0, 0, 0, .3);
/*
/*
For the first step, you might need to set it to transparent background:
background-color: transparent;
*/
@@ -94,7 +100,7 @@ const Details = () => {
height: 1px;
background-color: rgba(0, 0, 0, .3);
/*
/*
For the last step, you might need to set it to transparent background:
background-color: transparent;
*/

8
client/placeholders/Block.jsx → client/placeholders/Block.tsx
View File

@@ -2,7 +2,13 @@ import React from 'react';
import random from '../helpers/random';
const Block = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
interface BlockProps {
blockHeight?: number;
justify?: string;
numberOfBlocks?: number;
}
const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
return (
<div className={`flex flex-wrap w-100 justify-${justify}`}>
{

21
client/placeholders/BrowserFrame.jsx → client/placeholders/BrowserFrame.tsx
View File

@@ -2,12 +2,16 @@ import React, { useState } from 'react';
import SampleCode from '../components/SampleCode';
const BrowserFrame = ({ content, source }) => {
interface BrowserFrameProps {
content: React.ReactNode;
source: string;
}
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
const [isContentActive, setContentActive] = useState(true);
const flip = () => setContentActive(isActive => !isActive);
const flip = () => setContentActive((isActive) => !isActive);
return (
<div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}>
<div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
<div className="br-100 mr1 w1 h1 bg-red" />
@@ -23,25 +27,26 @@ const BrowserFrame = ({ content, source }) => {
className="relative"
style={{
height: '512px',
transition: 'transform 1s',
transformStyle: 'preserve-3d',
transform: isContentActive ? '' : 'rotateY(180deg)',
transformStyle: 'preserve-3d',
transition: 'transform 1s',
}}
>
<div
className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
style={{
backfaceVisibility: 'hidden',
WebkitBackfaceVisibility: 'hidden',
}}>
backfaceVisibility: 'hidden',
}}
>
{content}
</div>
<div
className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
style={{
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
WebkitBackfaceVisibility: 'hidden',
}}
>
<SampleCode lang="html" code={source} />

6
client/placeholders/Circle.jsx → client/placeholders/Circle.tsx
View File

@@ -1,6 +1,10 @@
import React from 'react';
const Circle = ({ size = 16 }) => {
interface CircleProps {
size?: number;
}
const Circle: React.FC<CircleProps> = ({ size = 16 }) => {
return (
<div
className="bg-black-30 br-pill"

2
client/placeholders/Frame.jsx → client/placeholders/Frame.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
const Frame = ({ children }) => {
const Frame: React.FC<{}> = ({ children }) => {
return (
<div
className="ba b--black-30 br2"

Some files were not shown because too many files have changed in this diff Show More