From 9d91b4f67d6c06a8677c2f04085fcfc0e03c50e8 Mon Sep 17 00:00:00 2001 From: jaburcodes Date: Fri, 31 Aug 2018 00:54:20 +0200 Subject: [PATCH 01/12] feat(react-native): add rn-example to README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 81ab81a0d..1136d279a 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,7 @@ Documenting our things is one of the most important and heavy processes when you ## 🗃   Examples - **[basic](https://github.com/pedronauck/docz/tree/master/examples/basic)** - Some basic example +- **[react-native](https://github.com/pedronauck/docz/tree/master/examples/react-native)** - Using in a React Native project - **[babel 6](https://github.com/pedronauck/docz/tree/master/examples/babel6)** - Using docz with Babel@6 - **[with typescript](https://github.com/pedronauck/docz/tree/master/examples/typescript)** - Using docz with Typescript - **[with flow](https://github.com/pedronauck/docz/tree/master/examples/flow)** - Using docz with Flow @@ -95,6 +96,7 @@ Documenting our things is one of the most important and heavy processes when you - **[with postcss](https://github.com/pedronauck/docz/tree/master/examples/css-postcss)** - Using docz parsing css with PostCSS - **[with stylus](https://github.com/pedronauck/docz/tree/master/examples/css-stylus)** - Using docz parsing css with Stylus + ## 🚧   Warning! > Due to performance issues **docz** uses Babel@7 and Webpack@4. So, if you're using some older version of this packages you'll probably get some errors! If you need to use Babel@6 you can try [docz-plugin-babel6](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-babel6), but about Webpack@4 we can't do anything! From dbef13b82207b7de7adadc2631b0e96807735c8d Mon Sep 17 00:00:00 2001 From: jaburcodes Date: Fri, 31 Aug 2018 00:54:30 +0200 Subject: [PATCH 02/12] feat(react-native): add rn examples --- examples/react-native/.babelrc | 8 + examples/react-native/CHANGELOG.md | 543 +++++++++++++++++++++++++++ examples/react-native/doczrc.js | 21 ++ examples/react-native/package.json | 27 ++ examples/react-native/src/Button.js | 27 ++ examples/react-native/src/Button.mdx | 13 + 6 files changed, 639 insertions(+) create mode 100644 examples/react-native/.babelrc create mode 100644 examples/react-native/CHANGELOG.md create mode 100644 examples/react-native/doczrc.js create mode 100644 examples/react-native/package.json create mode 100644 examples/react-native/src/Button.js create mode 100644 examples/react-native/src/Button.mdx diff --git a/examples/react-native/.babelrc b/examples/react-native/.babelrc new file mode 100644 index 000000000..d850218ad --- /dev/null +++ b/examples/react-native/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "react-native" + ], + "plugins": [ + "react-native-web" + ] +} \ No newline at end of file diff --git a/examples/react-native/CHANGELOG.md b/examples/react-native/CHANGELOG.md new file mode 100644 index 000000000..6acf0dcff --- /dev/null +++ b/examples/react-native/CHANGELOG.md @@ -0,0 +1,543 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +# [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11) + + +### Bug Fixes + +* **docz:** add theme config transform before merge ([dc3448a](https://github.com/pedronauck/docz/commit/dc3448a)) + + + + + +## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26) + + +### Bug Fixes + +* **docz-core:** copy templates files for dist ([#88](https://github.com/pedronauck/docz/issues/88)) ([5e4b98d](https://github.com/pedronauck/docz/commit/5e4b98d)) + + + + + +## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25) + + +### Features + +* **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81) + + + + + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.9](https://github.com/pedronauck/docz/compare/v0.2.8...v0.2.9) (2018-06-21) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.8](https://github.com/pedronauck/docz/compare/v0.2.7...v0.2.8) (2018-06-21) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.7](https://github.com/pedronauck/docz/compare/v0.2.6...v0.2.7) (2018-06-20) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.6](https://github.com/pedronauck/docz/compare/v0.2.5...v0.2.6) (2018-06-17) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.5](https://github.com/pedronauck/docz/compare/v0.2.4...v0.2.5) (2018-06-15) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.4](https://github.com/pedronauck/docz/compare/v0.2.3...v0.2.4) (2018-06-13) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.3](https://github.com/pedronauck/docz/compare/v0.2.2...v0.2.3) (2018-06-13) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.2](https://github.com/pedronauck/docz/compare/v0.2.1...v0.2.2) (2018-06-12) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.2.1](https://github.com/pedronauck/docz/compare/v0.2.0...v0.2.1) (2018-06-12) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.2.0](https://github.com/pedronauck/docz/compare/v0.2.0-beta.2...v0.2.0) (2018-06-11) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.2.0-beta.2](https://github.com/doczjs/docz/compare/v0.2.0-beta.1...v0.2.0-beta.2) (2018-06-10) + + +### Bug Fixes + +* **docz-core:** autolink headings ([0b8369d](https://github.com/doczjs/docz/commit/0b8369d)) + + + + + +# [0.2.0-beta.1](https://github.com/doczjs/docz/compare/v0.2.0-beta.0...v0.2.0-beta.1) (2018-06-10) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.2.0-beta.0](https://github.com/doczjs/docz/compare/v0.1.2-beta.6...v0.2.0-beta.0) (2018-06-10) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.2-beta.6](https://github.com/doczjs/docz/compare/v0.1.2-beta.5...v0.1.2-beta.6) (2018-06-09) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.2-beta.5](https://github.com/doczjs/docz/compare/v0.1.2-beta.4...v0.1.2-beta.5) (2018-06-09) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.2-beta.4](https://github.com/doczjs/docz/compare/v0.1.2-beta.3...v0.1.2-beta.4) (2018-06-09) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.2-beta.3](https://github.com/doczjs/docz/compare/v0.1.2-beta.2...v0.1.2-beta.3) (2018-06-09) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.2-beta.2](https://github.com/doczjs/docz/compare/v0.1.2-beta.1...v0.1.2-beta.2) (2018-06-09) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.2-beta.1](https://github.com/doczjs/docz/compare/v0.1.2-beta.0...v0.1.2-beta.1) (2018-06-09) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.2-beta.0](https://github.com/doczjs/docz/compare/v0.1.1...v0.1.2-beta.0) (2018-06-02) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.1-beta.6](https://github.com/doczjs/docz/compare/v0.1.1-beta.5...v0.1.1-beta.6) (2018-06-01) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.1-beta.5](https://github.com/doczjs/docz/compare/v0.1.1-beta.4...v0.1.1-beta.5) (2018-06-01) + + +### Bug Fixes + +* **load-cfg:** add namedExports options ([d36194d](https://github.com/doczjs/docz/commit/d36194d)) + + + + + +## [0.1.1-beta.4](https://github.com/doczjs/docz/compare/v0.1.1-beta.3...v0.1.1-beta.4) (2018-05-29) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.1-beta.3](https://github.com/doczjs/docz/compare/v0.1.1-beta.2...v0.1.1-beta.3) (2018-05-29) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.1-beta.2](https://github.com/doczjs/docz/compare/v0.1.1-beta.0...v0.1.1-beta.2) (2018-05-29) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.1-beta.1](https://github.com/doczjs/docz/compare/v0.1.1-beta.0...v0.1.1-beta.1) (2018-05-29) + + + + +**Note:** Version bump only for package docz-example-basic + + +## [0.1.1-beta.0](https://github.com/doczjs/docz/compare/v0.1.0...v0.1.1-beta.0) (2018-05-29) + + + + +**Note:** Version bump only for package docz-example-basic + + +# 0.1.0 (2018-05-29) + + +### Bug Fixes + +* **docz-core:** config watch for directory operations ([43fa7ab](https://github.com/doczjs/docz/commit/43fa7ab)) +* **docz-core:** create plugin to fix paragraph parse on mdx ([42b4f05](https://github.com/doczjs/docz/commit/42b4f05)) +* **docz-core:** packages splitting ([d2e74ee](https://github.com/doczjs/docz/commit/d2e74ee)) +* **docz-example-basic:** package name ([dec5713](https://github.com/doczjs/docz/commit/dec5713)) + + +### Features + +* **docz:** add groups feature ([9652b30](https://github.com/doczjs/docz/commit/9652b30)) +* add basic monorepo structure ([5a977ed](https://github.com/doczjs/docz/commit/5a977ed)) +* **docz:** add components parser ([a4127d9](https://github.com/doczjs/docz/commit/a4127d9)) +* **docz:** add custom routes for docs ([8458d91](https://github.com/doczjs/docz/commit/8458d91)) +* **docz-core:** add build command ([ef7abd2](https://github.com/doczjs/docz/commit/ef7abd2)) +* **docz-core:** add hot reload ([9ebe65d](https://github.com/doczjs/docz/commit/9ebe65d)) +* **docz-core:** add playground code parse section ([6bbf158](https://github.com/doczjs/docz/commit/6bbf158)) +* **docz-core:** set babel on the fly ([672be49](https://github.com/doczjs/docz/commit/672be49)) +* add component props parse feature ([987627d](https://github.com/doczjs/docz/commit/987627d)) +* add support for highlight code sections ([19bf7ea](https://github.com/doczjs/docz/commit/19bf7ea)) +* **docz-core:** use websockets instead of generate json to process entries ([e0773a0](https://github.com/doczjs/docz/commit/e0773a0)) +* **docz-theme-default:** start logic to create theme feature ([900cf2b](https://github.com/doczjs/docz/commit/900cf2b)) +* refac to use mdx ([04b59e5](https://github.com/doczjs/docz/commit/04b59e5)) diff --git a/examples/react-native/doczrc.js b/examples/react-native/doczrc.js new file mode 100644 index 000000000..3fd18b8a0 --- /dev/null +++ b/examples/react-native/doczrc.js @@ -0,0 +1,21 @@ +export default { + modifyBabelRc: config => { + config.plugins = [ + [ + `module-resolver`, + { + alias: { + '^react-native$': `react-native-web`, + }, + }, + ], + ]; + return config; + }, + modifyBundlerConfig: config => { + config.resolve.alias = { + 'react-native$': `react-native-web`, + }; + return config; + }, +}; diff --git a/examples/react-native/package.json b/examples/react-native/package.json new file mode 100644 index 000000000..773f2135b --- /dev/null +++ b/examples/react-native/package.json @@ -0,0 +1,27 @@ +{ + "name": "docz-example-react-native", + "version": "0.10.0", + "license": "MIT", + "scripts": { + "dev": "docz dev", + "build": "docz build" + }, + "dependencies": { + "docz": "^0.10.0", + "docz-core": "^0.10.0", + "prop-types": "^15.6.2", + "react": "^16.4.2", + "react-dom": "^16.4.2", + "react-art": "^16.4.2", + "react-native": "0.56.0", + "react-native-web": "^0.8.9", + "styled-components": "^3.4.2" + }, + "devDependencies": { + "babel-jest": "23.4.2", + "babel-plugin-module-resolver": "^3.1.1", + "babel-plugin-react-native-web": "^0.8.9", + "babel-preset-react-native": "^5", + "docz": "^0.10.3" + } +} diff --git a/examples/react-native/src/Button.js b/examples/react-native/src/Button.js new file mode 100644 index 000000000..3ba73db1c --- /dev/null +++ b/examples/react-native/src/Button.js @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { TouchableOpacity, Text, View, StyleSheet } from 'react-native' +import styled from 'styled-components/native'; + +const BlueButton = styled.TouchableOpacity` + background-color: blue; + width: 100px; + height: 50px; + justify-content: center; +align-items: center; +` + +const WhiteText = styled.Text` + color: #ffffff; +` + +export default ({text}) => ( + console.log('hello world')}> + {text} + +) + +const styles = StyleSheet.create({ + button: { + backgroundColor: 'red' + } +}) diff --git a/examples/react-native/src/Button.mdx b/examples/react-native/src/Button.mdx new file mode 100644 index 000000000..e25549ef3 --- /dev/null +++ b/examples/react-native/src/Button.mdx @@ -0,0 +1,13 @@ +--- +name: Button +--- + +import { Playground } from 'docz' +import { View, Text } from 'react-native'; +import Button from './Button' + +## Basic usage + + + + + +## With different sizes + + + + + + + +## With different colors + + + + + + + + diff --git a/examples/react-native-flow/src/index.mdx b/examples/react-native-flow/src/index.mdx new file mode 100644 index 000000000..71f122bbb --- /dev/null +++ b/examples/react-native-flow/src/index.mdx @@ -0,0 +1,21 @@ +--- +name: Getting Started +route: / +order: 1 +--- + +# Getting Started + +Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. + +Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: + +- **It’s consistent**. The way components are built and managed follows a predictable pattern. +- **It’s self-contained**. Your design system is treated as a standalone dependency. +- **It’s reusable**. You’ve built components so they can be reused in many contexts. +- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. +- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. + +## Consistency + +Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system. diff --git a/examples/react-native-propTypes/CHANGELOG.md b/examples/react-native-prop-types/CHANGELOG.md similarity index 100% rename from examples/react-native-propTypes/CHANGELOG.md rename to examples/react-native-prop-types/CHANGELOG.md diff --git a/examples/react-native-prop-types/doczrc.js b/examples/react-native-prop-types/doczrc.js new file mode 100644 index 000000000..a1567e165 --- /dev/null +++ b/examples/react-native-prop-types/doczrc.js @@ -0,0 +1,6 @@ +import { reactNative } from 'docz-plugin-react-native' + +export default { + title: 'React Native', + plugins: [reactNative()], +} diff --git a/examples/react-native-prop-types/package.json b/examples/react-native-prop-types/package.json new file mode 100644 index 000000000..4ba7201bd --- /dev/null +++ b/examples/react-native-prop-types/package.json @@ -0,0 +1,18 @@ +{ + "name": "docz-example-react-native-prop-types", + "version": "0.10.0", + "license": "MIT", + "scripts": { + "dev": "docz dev", + "build": "docz build" + }, + "dependencies": { + "react": "^16.4.2", + "react-dom": "^16.4.2", + "styled-components": "^3.4.2", + "prop-types": "15.6.2" + }, + "devDependencies": { + "docz": "^0.10.3" + } +} diff --git a/examples/react-native-prop-types/src/components/Alert.jsx b/examples/react-native-prop-types/src/components/Alert.jsx new file mode 100644 index 000000000..61af83f44 --- /dev/null +++ b/examples/react-native-prop-types/src/components/Alert.jsx @@ -0,0 +1,34 @@ +import React, { Fragment } from 'react' +import styled from 'styled-components/native' +import * as t from 'prop-types' + +const kinds = { + info: '#5352ED', + positive: '#2ED573', + negative: '#FF4757', + warning: '#FFA502', +} + +const AlertStyled = styled.View` + padding: 15px 20px; + background: white; + border-radius: 3px; + color: white; + background: ${({ kind = 'info' }) => kinds[kind]}; +` + +export const Text = styled.Text` + color: white; +` + +export const Alert = ({ kind = 'info', ...props }: AlertProps) => ( + +) + +Alert.propTypes = { + kind: t.oneOf(['info', 'positive', 'negative', 'warning']), +} + +Alert.defaultProps = { + kind: 'info', +} diff --git a/examples/react-native-prop-types/src/components/Alert.mdx b/examples/react-native-prop-types/src/components/Alert.mdx new file mode 100644 index 000000000..ce984df52 --- /dev/null +++ b/examples/react-native-prop-types/src/components/Alert.mdx @@ -0,0 +1,43 @@ +--- +name: Alert +menu: Components +--- + +import { Playground, PropsTable } from 'docz' +import { Alert, Text } from './Alert' + +# Alert + +## Properties + + + +## 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/react-native-prop-types/src/components/Button.jsx b/examples/react-native-prop-types/src/components/Button.jsx new file mode 100644 index 000000000..11d169d77 --- /dev/null +++ b/examples/react-native-prop-types/src/components/Button.jsx @@ -0,0 +1,78 @@ +import React from 'react' +import styled from 'styled-components/native' +import * as t from 'prop-types' + +const scales = { + small: ` + width: 100px; + padding: 5px 10px; + font-size: 14; + `, + normal: ` + width: 130px; + padding: 10px 20px; + font-size: 16; + `, + big: ` + width: 180px; + padding: 20px 30px; + font-size: 18; + `, +} + +const kind = (bg, color) => ` + background: ${bg}; + border-color: red; + color: ${color}; + transition: all .3s; +` + +const kinds = { + primary: kind('#1FB6FF', 'white'), + secondary: kind('#5352ED', 'white'), + cancel: kind('#FF4949', 'white'), + dark: kind('#273444', 'white'), + gray: kind('#8492A6', 'white'), +} + +const getScale = ({ scale = 'normal' }) => scales[scale] +const getKind = ({ kind = 'primary' }) => kinds[kind] + +const ButtonStyled = styled.TouchableOpacity` + ${getKind}; + ${getScale}; + cursor: pointer; + margin: 3px 5px; + border: 0; + border-radius: 3px; +` + +const Text = styled.Text` + ${getScale}; + width: 100%; + padding: 0; + color: white; + text-align: center; + color: ${p => kinds[p.outline]}; +` + +export const Button = ({ + scale = 'normal', + kind = 'primary', + outline = false, + children, +}: ButtonProps) => ( + + {children} + +) + +Button.propTypes = { + scales: t.oneOf(['small', 'normal', 'big']), + kind: t.oneOf(['primary', 'secondary', 'cancel', 'dark', 'gray']), +} + +Button.defaultProps = { + scales: 'normal', + kind: 'primary', +} diff --git a/examples/react-native-prop-types/src/components/Button.mdx b/examples/react-native-prop-types/src/components/Button.mdx new file mode 100644 index 000000000..9c190ab6f --- /dev/null +++ b/examples/react-native-prop-types/src/components/Button.mdx @@ -0,0 +1,46 @@ +--- +name: Button +menu: Components +--- + +import { Playground, PropsTable } from 'docz' +import { Button } from './Button' + +# Button + +Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them. + +### Best practices + +- Group buttons logically into sets based on usage and importance. +- Ensure that button actions are clear and consistent. +- The main action of a group set can be a primary button. +- Select a single button variation and do not mix them. + +## Properties + + + +## Basic usage + + + + + +## With different sizes + + + + + + + +## With different colors + + + + + + + + diff --git a/examples/react-native-prop-types/src/index.mdx b/examples/react-native-prop-types/src/index.mdx new file mode 100644 index 000000000..71f122bbb --- /dev/null +++ b/examples/react-native-prop-types/src/index.mdx @@ -0,0 +1,21 @@ +--- +name: Getting Started +route: / +order: 1 +--- + +# Getting Started + +Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. + +Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: + +- **It’s consistent**. The way components are built and managed follows a predictable pattern. +- **It’s self-contained**. Your design system is treated as a standalone dependency. +- **It’s reusable**. You’ve built components so they can be reused in many contexts. +- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. +- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. + +## Consistency + +Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system. diff --git a/examples/react-native-propTypes/.babelrc b/examples/react-native-propTypes/.babelrc deleted file mode 100644 index ac0b32a5a..000000000 --- a/examples/react-native-propTypes/.babelrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "presets": [ - "react-native" - ] -} \ No newline at end of file diff --git a/examples/react-native-propTypes/doczrc.js b/examples/react-native-propTypes/doczrc.js deleted file mode 100644 index 9fdf10d03..000000000 --- a/examples/react-native-propTypes/doczrc.js +++ /dev/null @@ -1,23 +0,0 @@ -export default { - modifyBabelRc: config => { - config.plugins = [ - ...config.plugins, - [ - `module-resolver`, - { - alias: { - '^react-native$': `react-native-web`, - }, - }, - ], - ] - return config - }, - modifyBundlerConfig: config => { - config.resolve.alias = { - ...config.resolve.alias, - 'react-native$': `react-native-web`, - } - return config - }, -} \ No newline at end of file diff --git a/examples/react-native-propTypes/package.json b/examples/react-native-propTypes/package.json deleted file mode 100644 index dc9846b99..000000000 --- a/examples/react-native-propTypes/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "docz-example-react-native-propTypes", - "version": "0.10.0", - "license": "MIT", - "scripts": { - "dev": "docz dev", - "build": "docz build" - }, - "dependencies": { - "react": "^16.4.2", - "react-dom": "^16.4.2", - "react-art": "^16.4.2", - "react-native": "0.56.0", - "react-native-web": "^0.8.9", - "styled-components": "^3.4.2", - "docz-theme-default": "^0.10.3", - "prop-types": "^15.6.2" - }, - "devDependencies": { - "docz": "^0.10.3", - "babel-jest": "23.4.2", - "babel-plugin-module-resolver": "^3.1.1", - "babel-plugin-react-native-web": "^0.8.9", - "babel-preset-react-native": "^5" - } -} diff --git a/examples/react-native-propTypes/src/Button.js b/examples/react-native-propTypes/src/Button.js deleted file mode 100644 index 7b3b809e8..000000000 --- a/examples/react-native-propTypes/src/Button.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react' -import styled from 'styled-components/native' -import t from 'prop-types' - -const BlueButton = styled.TouchableOpacity` - background-color: blue; - width: 100px; - height: 50px; - justify-content: center; - align-items: center; - border-radius: 5px; -` - -const WhiteText = styled.Text` - color: #fff; -` - -const Button = ({ text, onPress }) => ( - - {text} - -) - -Button.propTypes = { - text: t.string, - onPress: t.func, -} - -Button.defaultProps = { - text: null, -} - -export default Button \ No newline at end of file diff --git a/examples/react-native-propTypes/src/Button.mdx b/examples/react-native-propTypes/src/Button.mdx deleted file mode 100644 index b387a4355..000000000 --- a/examples/react-native-propTypes/src/Button.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -name: Button ---- - -import { PropsTable, Playground } from 'docz' -import Button from './Button' - -## Properties - - - -## Basic usage - - -