Last active
January 23, 2020 09:59
-
-
Save dennishn/02406d4c40c9c5f45f5f1c2abc097944 to your computer and use it in GitHub Desktop.
ferfa
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "devDependencies": { | |
| "cross-env": "^6.0.3", | |
| "node-sass": "^4.13.1", | |
| "webpack": "^4.41.2", | |
| "webpack-cli": "^3.3.10", | |
| "webpack-dev-server": "^3.9.0" | |
| }, | |
| "dependencies": { | |
| "@babel/runtime": "^7.7.2", | |
| "@babel/runtime-corejs3": "^7.7.2", | |
| "@hot-loader/react-dom": "^16.11.0", | |
| "class-names": "^1.0.0", | |
| "core-js": "^3.4.1", | |
| "react": "^16.12.0", | |
| "react-dom": "^16.12.0", | |
| "react-hot-loader": "^4.12.18" | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [modern] | |
| Chrome > 61 | |
| Edge > 16 | |
| Firefox > 60 | |
| iOS > 10.3 | |
| Opera > 48 | |
| Safari > 10.1 | |
| [legacy] | |
| defaults |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import {hot} from "react-hot-loader/root"; | |
| function App() { | |
| return ( | |
| <div> | |
| Hello world! | |
| </div> | |
| ); | |
| } | |
| export default hot(App); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "colors": { | |
| "gray": { | |
| "0": "#212529" | |
| }, | |
| "red": { | |
| "0": "#c92a2a" | |
| }, | |
| "pink": { | |
| "0": "#a61e4d" | |
| }, | |
| "grape": { | |
| "0": "#862e9c" | |
| }, | |
| "violet": { | |
| "0": "#5f3dc4" | |
| }, | |
| "indigo": { | |
| "0": "#364fc7" | |
| }, | |
| "blue": { | |
| "0": "#1864ab" | |
| }, | |
| "cyan": { | |
| "0": "#0b7285" | |
| }, | |
| "teal": { | |
| "0": "#087f5b" | |
| }, | |
| "green": { | |
| "0": "#2b8a3e" | |
| }, | |
| "lime": { | |
| "0": "#5c940d" | |
| }, | |
| "yellow": { | |
| "0": "#e67700" | |
| }, | |
| "orange": { | |
| "0": "#d9480f" | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import {withKnobs, select} from '@storybook/addon-knobs'; | |
| import '../../styles/styles.scss'; | |
| import Heading from "./heading"; | |
| import colorTokens from "../../design-tokens/colors"; | |
| export default { | |
| title: 'Heading', | |
| decorators: [withKnobs] | |
| }; | |
| export const asH1 = () => <Heading as="h1">This is a H1 heading</Heading>; | |
| export const asH2 = () => <Heading as="h2">This is a H2 heading</Heading>; | |
| export const asH3 = () => <Heading as="h3">This is a H3 heading</Heading>; | |
| export const asH4 = () => <Heading as="h4">This is a H4 heading</Heading>; | |
| export const asH5 = () => <Heading as="h5">This is a H5 heading</Heading>; | |
| export const asH6 = () => <Heading as="h6">This is a H6 heading</Heading>; | |
| export const asDefault = () => <Heading>This is a default (H6) heading</Heading>; | |
| export const tintGray = () => <Heading tint="gray">This is a gray heading</Heading>; | |
| export const tintRed = () => <Heading tint="red">This is a red heading</Heading>; | |
| export const tintPink = () => <Heading tint="pink">This is a pink heading</Heading>; | |
| export const tintGrape = () => <Heading tint="grape">This is a grape heading</Heading>; | |
| export const tintViolet = () => <Heading tint="violet">This is a violet heading</Heading>; | |
| export const tintIndigo = () => <Heading tint="indigo">This is a indigo heading</Heading>; | |
| export const tintBlue = () => <Heading tint="blue">This is a blue heading</Heading>; | |
| export const tintCyan = () => <Heading tint="cyan">This is a cyan heading</Heading>; | |
| export const tintTeal = () => <Heading tint="teal">This is a teal heading</Heading>; | |
| export const tintGreen = () => <Heading tint="green">This is a green heading</Heading>; | |
| export const tintLime = () => <Heading tint="lime">This is a lime heading</Heading>; | |
| export const knobs = () => { | |
| const asValues = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; | |
| const tintValues = Object.keys(colorTokens.colors).map(key => key); | |
| const defaultAsValue = 'h1'; | |
| const defaultTintValue = 'gray'; | |
| const as = select('As', asValues, defaultAsValue); | |
| const tint = select('Tint', tintValues, defaultTintValue); | |
| return <Heading as={as} tint={tint}>Lorem ipsum dolor sit amet, consectetur adipisicing.</Heading> | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>React App</title> | |
| </head> | |
| <body> | |
| <noscript>You need to enable JavaScript to run this app.</noscript> | |
| <div id="root"></div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| // Global styles - in a CMS you would import the compiled CSS in a .cshtml master layout | |
| import './styles/styles.scss'; | |
| import App from './App'; | |
| ReactDOM.render(<App />, document.getElementById('root')); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| stories: ['../src/**/*.stories.js'], | |
| addons: ['@storybook/addon-knobs/register'] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| background-color: #e4e4e4; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment