From 27002d870afa50d3d790297b9cfae62dacebea2c Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 28 May 2018 20:11:29 -0300 Subject: [PATCH] feat(docz-example-flow): add example folder --- examples/flow/.babelrc | 8 ++++++ examples/flow/package.json | 22 +++++++++++++++ examples/flow/src/components/Alert.jsx | 35 ++++++++++++++++++++++++ examples/flow/src/components/Alert.mdx | 38 ++++++++++++++++++++++++++ examples/flow/src/index.mdx | 15 ++++++++++ yarn.lock | 24 ++++++++++++++++ 6 files changed, 142 insertions(+) create mode 100644 examples/flow/.babelrc create mode 100644 examples/flow/package.json create mode 100644 examples/flow/src/components/Alert.jsx create mode 100644 examples/flow/src/components/Alert.mdx create mode 100644 examples/flow/src/index.mdx diff --git a/examples/flow/.babelrc b/examples/flow/.babelrc new file mode 100644 index 000000000..d202ffb1c --- /dev/null +++ b/examples/flow/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "@babel/preset-flow" + ], + "plugins": [ + "emotion" + ] +} diff --git a/examples/flow/package.json b/examples/flow/package.json new file mode 100644 index 000000000..b025b9910 --- /dev/null +++ b/examples/flow/package.json @@ -0,0 +1,22 @@ +{ + "name": "docz-example-flow", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "dev": "docz dev", + "build": "docz build" + }, + "dependencies": { + "@babel/preset-flow": "^7.0.0-beta.49", + "docz": "^0.0.1", + "emotion": "^9.1.3", + "prop-types": "^15.6.1", + "react": "^16.4.0", + "react-dom": "^16.4.0", + "react-emotion": "^9.1.3" + }, + "devDependencies": { + "babel-plugin-emotion": "^9.0.1", + "flow-bin": "^0.73.0" + } +} diff --git a/examples/flow/src/components/Alert.jsx b/examples/flow/src/components/Alert.jsx new file mode 100644 index 000000000..2720acd5d --- /dev/null +++ b/examples/flow/src/components/Alert.jsx @@ -0,0 +1,35 @@ +// @flow + +import React, { Fragment } from 'react' +import styled from 'react-emotion' +import t from 'prop-types' + +const kinds = { + info: '#5352ED', + positive: '#2ED573', + negative: '#FF4757', + warning: '#FFA502', +} + +type Kind = 'info' | 'positive' | 'negative' | 'warning' + +type AlertProps = { + /** + * Set this to change alert kind + */ + kind: Kind +} + +const AlertStyled = styled('div')` + padding: 15px 20px; + background: white; + border-radius: 3px; + color: white; + background: ${({ kind = 'info' }) => kinds[kind]}; +` + +const Alert = ({ kind = 'info', ...props }: AlertProps) => ( + +) + +export default Alert diff --git a/examples/flow/src/components/Alert.mdx b/examples/flow/src/components/Alert.mdx new file mode 100644 index 000000000..3833b0899 --- /dev/null +++ b/examples/flow/src/components/Alert.mdx @@ -0,0 +1,38 @@ +--- +name: Alert +menu: Components +--- + +import { Playground, PropsTable } from 'docz' +import Alert from './Alert' + +# Alert + + + +## Basic usage + + + Some message + + +## Using different kinds + + + Some message + Some message + Some message + Some message + + +## Use with children as a function + + + {() => { + const message = 'Hello world' + + return ( + {message} + ) + }} + diff --git a/examples/flow/src/index.mdx b/examples/flow/src/index.mdx new file mode 100644 index 000000000..9e90ce6e4 --- /dev/null +++ b/examples/flow/src/index.mdx @@ -0,0 +1,15 @@ +--- +name: Getting Started +route: / +order: 1 +--- + +# Getting Started + +A design system can help establish a common vocabulary between everyone in an organization. That’s why I’ve spent a great deal of time coming up with structure and naming for Vue Design System that would make sense. To start opening it up, let’s go through each layer in detail and what the terms mean: + +- *Principles* are the foundation of the whole system. They form the basis of a good product and help the team with decision making. They are there to guide you and your team when working with the myriad parts of the system and help you do better and more informed decisions. +- *Design* Tokens are the atoms of the system as Salesforce describes them. In Vue Design System they are used instead of hard coded values to ensure a better consistency across any platform. +- *Elements* utilize decisions made on the token level. A simple example of an element would be a button, a link, or an input. Anything that cannot be broken down further. I use the name ‘element’ since everything in Vue and React world is nowadays ‘a component.’ Using that term for anything else would be confusing. +- *Patterns* are UI Patterns that fall on the more complex side of the spectrum. So for example things like a date picker, a data table, or a visualization. Patterns utilize both elements and tokens. If you wonder whether something should be called an element or a pattern, ask yourself this question: “Can this be broken down into smaller pieces?” If the answer is yes, it should most likely be a pattern in Vue Design System. +- *Templates* exist to document the layout and structure of a section. I am not calling these pages since semantically that would be incorrect. While they can be pages, that’s not their only functionality. Templates consist of the three things mentioned above: tokens, elements, and patterns. diff --git a/yarn.lock b/yarn.lock index dfa9f8658..77522ac76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -527,6 +527,12 @@ dependencies: "@babel/helper-plugin-utils" "7.0.0-beta.42" +"@babel/plugin-syntax-flow@7.0.0-beta.49": + version "7.0.0-beta.49" + resolved "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.0.0-beta.49.tgz#5b3f0b65ca9660534535643b82530fb1d58e63ee" + dependencies: + "@babel/helper-plugin-utils" "7.0.0-beta.49" + "@babel/plugin-syntax-jsx@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.0.0-beta.42.tgz#92ef7807bbec0e12a49815a409822262cbaa7ddd" @@ -722,6 +728,13 @@ "@babel/helper-plugin-utils" "7.0.0-beta.42" "@babel/plugin-syntax-flow" "7.0.0-beta.42" +"@babel/plugin-transform-flow-strip-types@7.0.0-beta.49": + version "7.0.0-beta.49" + resolved "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.0.0-beta.49.tgz#f02a26528e94b2c1d11d9573b63ee5782d4f2af9" + dependencies: + "@babel/helper-plugin-utils" "7.0.0-beta.49" + "@babel/plugin-syntax-flow" "7.0.0-beta.49" + "@babel/plugin-transform-for-of@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.0.0-beta.42.tgz#acf51c5986050e1aff054c8d2a95ef3f6bec153e" @@ -1124,6 +1137,13 @@ "@babel/helper-plugin-utils" "7.0.0-beta.42" "@babel/plugin-transform-flow-strip-types" "7.0.0-beta.42" +"@babel/preset-flow@^7.0.0-beta.49": + version "7.0.0-beta.49" + resolved "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.0.0-beta.49.tgz#10cbee1a60db207120a4443c54c0ca5f734eb390" + dependencies: + "@babel/helper-plugin-utils" "7.0.0-beta.49" + "@babel/plugin-transform-flow-strip-types" "7.0.0-beta.49" + "@babel/preset-react@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.0.0-beta.42.tgz#e7a15ee1ab5305d5f8efd43cce01123e2bfdcc9d" @@ -4129,6 +4149,10 @@ flat-cache@^1.2.1: graceful-fs "^4.1.2" write "^0.2.1" +flow-bin@^0.73.0: + version "0.73.0" + resolved "https://registry.npmjs.org/flow-bin/-/flow-bin-0.73.0.tgz#da1b90a02b0ef9c439f068c2fc14968db83be425" + flush-write-stream@^1.0.0: version "1.0.3" resolved "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"