├── example ├── .babelrc ├── doczrc.js ├── CHANGELOG.md ├── package.json └── src │ ├── components │ ├── Alert.jsx │ ├── Alert.mdx │ ├── Button.mdx │ └── Button.jsx │ └── index.mdx ├── .editorconfig ├── .prettierrc ├── src └── index.ts ├── CHANGELOG.md ├── .gitignore ├── tslint.json ├── README.md ├── tsconfig.json └── package.json /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /example/doczrc.js: -------------------------------------------------------------------------------- 1 | import { reactNative } from 'docz-plugin-react-native' 2 | 3 | export default { 4 | title: 'React Native', 5 | plugins: [reactNative()], 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "typescript", 3 | "requirePragma": false, 4 | "printWidth": 80, 5 | "tabWidth": 2, 6 | "useTabs": false, 7 | "semi": false, 8 | "singleQuote": true, 9 | "trailingComma": "es5", 10 | "bracketSpacing": true, 11 | "jsxBracketSameLine": false 12 | } 13 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { createPlugin } from 'docz-core' 2 | 3 | export const reactNative = () => 4 | createPlugin({ 5 | setConfig: config => ({ 6 | ...config, 7 | native: true, 8 | }), 9 | modifyBundlerConfig: config => { 10 | config.resolve.alias = { 11 | ...(config.resolve.alias || {}), 12 | 'react-native$': `react-native-web`, 13 | } 14 | 15 | return config 16 | }, 17 | }) 18 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | 7 | # [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02) 8 | 9 | 10 | ### Features 11 | 12 | * integration with react native ([#271](https://github.com/pedronauck/docz/issues/271)) ([ac359ce](https://github.com/pedronauck/docz/commit/ac359ce)) 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | logs 2 | *.log 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | pids 7 | *.pid 8 | *.seed 9 | *.pid.lock 10 | lib-cov 11 | coverage 12 | .nyc_output 13 | .grunt 14 | bower_components 15 | .lock-wscript 16 | build/Release 17 | node_modules/ 18 | jspm_packages/ 19 | typings/ 20 | .npm 21 | .npmrc 22 | .eslintcache 23 | .node_repl_history 24 | *.tgz 25 | .yarn-integrity 26 | .env 27 | es 28 | lib 29 | stats.html 30 | build 31 | dist 32 | .rpt2_cache 33 | .cache 34 | .docz 35 | .idea 36 | -------------------------------------------------------------------------------- /example/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | 7 | # [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02) 8 | 9 | 10 | ### Features 11 | 12 | * integration with react native ([#271](https://github.com/pedronauck/docz/issues/271)) ([ac359ce](https://github.com/pedronauck/docz/commit/ac359ce)) 13 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docz-example-react-native", 3 | "version": "0.11.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "dev": "docz dev", 7 | "build": "docz build" 8 | }, 9 | "dependencies": { 10 | "prop-types": "15.6.2", 11 | "react": "^16.5.0", 12 | "react-dom": "^16.5.0", 13 | "styled-components": "^3.4.2" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.0.0", 17 | "babel-preset-react-native": "^5.0.2", 18 | "docz": "^0.11.2", 19 | "docz-plugin-react-native": "^0.11.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:latest", "tslint-config-prettier"], 3 | "rules": { 4 | "curly": false, 5 | "interface-name": [true, "never-prefix"], 6 | "ordered-imports": false, 7 | "object-literal-sort-keys": false, 8 | "no-console": false, 9 | "no-unused-expression": [true, "allow-fast-null-checks"], 10 | "no-implicit-dependencies": [true, "dev"], 11 | "no-duplicate-imports": false, 12 | "no-submodule-imports": false, 13 | "no-shadowed-variable": false, 14 | "max-classes-per-file": false, 15 | "no-var-keyword": false, 16 | "no-parameter-reassignment": false, 17 | "no-object-literal-type-assertion": false, 18 | "typedef": [true, "call-signature"] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚠️ Deprecated 2 | 3 | This plugin is deprecated since the version [v0.12.15](https://github.com/pedronauck/docz/releases/tag/v0.12.15) that support React Native nativelly. 4 | You can see the [example folder](https://github.com/pedronauck/docz/tree/master/examples/react-native) to know more information about how to use. 5 | 6 | --- 7 | 8 | # docz-plugin-react-native 9 | 10 | Use your React Native components inside docz 11 | 12 | > We're using [react-native-web](https://github.com/necolas/react-native-web) to make this integration possible. So, maybe you can have some caveats. 13 | 14 | ## Instalation 15 | 16 | Just add and use the plugin inside your `doczrc.js` 17 | 18 | ```js 19 | import { reactNative } from 'docz-plugin-react-native' 20 | 21 | export default { 22 | plugins: [reactNative()] 23 | } 24 | ``` 25 | 26 | That's it 🙌🏻 27 | -------------------------------------------------------------------------------- /example/src/components/Alert.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react' 2 | import { Text as BaseText } from 'react-native' 3 | import styled from 'styled-components/native' 4 | import * as t from 'prop-types' 5 | 6 | const kinds = { 7 | info: '#5352ED', 8 | positive: '#2ED573', 9 | negative: '#FF4757', 10 | warning: '#FFA502', 11 | } 12 | 13 | const AlertStyled = styled.View` 14 | padding: 15px 20px; 15 | background: white; 16 | border-radius: 3px; 17 | background: ${({ kind = 'info' }) => kinds[kind]}; 18 | ` 19 | 20 | export const Text = styled(BaseText)` 21 | color: white; 22 | ` 23 | 24 | export const Alert = ({ kind = 'info', ...props }: AlertProps) => ( 25 | 26 | ) 27 | 28 | Alert.propTypes = { 29 | kind: t.oneOf(['info', 'positive', 'negative', 'warning']), 30 | } 31 | 32 | Alert.defaultProps = { 33 | kind: 'info', 34 | } 35 | -------------------------------------------------------------------------------- /example/src/components/Alert.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Alert 3 | menu: Components 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz' 7 | import { Alert, Text } from './Alert' 8 | 9 | # Alert 10 | 11 | ## Properties 12 | 13 | 14 | 15 | ## Basic usage 16 | 17 | 18 | 19 | Hello world 20 | 21 | 22 | 23 | ## Using different kinds 24 | 25 | 26 | Some message 27 | Some message 28 | Some message 29 | Some message 30 | 31 | 32 | 33 | ## Use with children as a function 34 | 35 | 36 | {() => { 37 | const message = 'Hello world' 38 | 39 | return ( 40 | {message} 41 | ) 42 | }} 43 | 44 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "target": "es2017", 5 | "module": "es2015", 6 | "moduleResolution": "node", 7 | "inlineSourceMap": true, 8 | "allowSyntheticDefaultImports": true, 9 | "jsx": "react", 10 | "strict": true, 11 | "noImplicitAny": true, 12 | "strictNullChecks": true, 13 | "strictFunctionTypes": true, 14 | "strictPropertyInitialization": true, 15 | "noImplicitThis": true, 16 | "alwaysStrict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": false, 19 | "noImplicitReturns": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "traceResolution": false, 22 | "listEmittedFiles": false, 23 | "listFiles": false, 24 | "pretty": true, 25 | "lib": ["es2017", "dom"], 26 | "outDir": "dist", 27 | "rootDir": "src", 28 | "declaration": true, 29 | "types": ["node"], 30 | "typeRoots": ["node_modules/@types"] 31 | }, 32 | "include": ["src/**/*", "src/types.d.ts"], 33 | "exclude": ["node_modules/**"] 34 | } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docz-plugin-react-native", 3 | "version": "0.11.2", 4 | "description": "Plugin that allow you to use React Native with docz", 5 | "license": "MIT", 6 | "main": "dist/index.js", 7 | "umd:main": "dist/index.umd.js", 8 | "module": "dist/index.m.js", 9 | "typings": "dist/index.d.ts", 10 | "source": "src/index.ts", 11 | "files": [ 12 | "dist/", 13 | "package.json", 14 | "README.md" 15 | ], 16 | "scripts": { 17 | "dev": "libundler watch --ts -e all", 18 | "build": "libundler build --ts -e all --c", 19 | "fix": "run-s fix:*", 20 | "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write", 21 | "fix:tslint": "tslint --fix --project .", 22 | "tslint": "tslint --project ." 23 | }, 24 | "dependencies": { 25 | "docz-core": "^0.11.2", 26 | "react-art": "^16.5.0", 27 | "react-native-web": "^0.8.9" 28 | }, 29 | "devDependencies": { 30 | "libundler": "^1.7.1", 31 | "lint-staged": "^7.2.2", 32 | "npm-run-all": "^4.1.3", 33 | "prettier": "^1.14.2", 34 | "trash-cli": "^1.4.0", 35 | "tslint": "^5.11.0", 36 | "tslint-config-prettier": "^1.15.0", 37 | "typescript": "^2.9.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /example/src/components/Button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Button 3 | menu: Components 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz' 7 | import { Button } from './Button' 8 | 9 | # Button 10 | 11 | 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. 12 | 13 | ### Best practices 14 | 15 | - Group buttons logically into sets based on usage and importance. 16 | - Ensure that button actions are clear and consistent. 17 | - The main action of a group set can be a primary button. 18 | - Select a single button variation and do not mix them. 19 | 20 | ## Properties 21 | 22 | 23 | 24 | ## Basic usage 25 | 26 | 27 | 28 | 29 | 30 | ## With different sizes 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | ## With different colors 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /example/src/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Getting Started 3 | route: / 4 | order: 1 5 | --- 6 | 7 | # Getting Started 8 | 9 | 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. 10 | 11 | Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: 12 | 13 | - **It’s consistent**. The way components are built and managed follows a predictable pattern. 14 | - **It’s self-contained**. Your design system is treated as a standalone dependency. 15 | - **It’s reusable**. You’ve built components so they can be reused in many contexts. 16 | - **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. 17 | - **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. 18 | 19 | ## Consistency 20 | 21 | 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. 22 | -------------------------------------------------------------------------------- /example/src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components/native' 3 | import * as t from 'prop-types' 4 | 5 | const scales = { 6 | small: ` 7 | width: 100px; 8 | padding: 5px 10px; 9 | font-size: 14; 10 | `, 11 | normal: ` 12 | width: 130px; 13 | padding: 10px 20px; 14 | font-size: 16; 15 | `, 16 | big: ` 17 | width: 180px; 18 | padding: 20px 30px; 19 | font-size: 18; 20 | `, 21 | } 22 | 23 | const kind = (bg, color) => ` 24 | background: ${bg}; 25 | border-color: red; 26 | color: ${color}; 27 | transition: all .3s; 28 | ` 29 | 30 | const kinds = { 31 | primary: kind('#1FB6FF', 'white'), 32 | secondary: kind('#5352ED', 'white'), 33 | cancel: kind('#FF4949', 'white'), 34 | dark: kind('#273444', 'white'), 35 | gray: kind('#8492A6', 'white'), 36 | } 37 | 38 | const getScale = ({ scale = 'normal' }) => scales[scale] 39 | const getKind = ({ kind = 'primary' }) => kinds[kind] 40 | 41 | const ButtonStyled = styled.TouchableOpacity` 42 | ${getKind}; 43 | ${getScale}; 44 | cursor: pointer; 45 | margin: 3px 5px; 46 | border: 0; 47 | border-radius: 3px; 48 | ` 49 | 50 | const Text = styled.Text` 51 | ${getScale}; 52 | width: 100%; 53 | padding: 0; 54 | color: white; 55 | text-align: center; 56 | color: ${p => kinds[p.outline]}; 57 | ` 58 | 59 | export const Button = ({ 60 | scale = 'normal', 61 | kind = 'primary', 62 | outline = false, 63 | children, 64 | }: ButtonProps) => ( 65 | 66 | {children} 67 | 68 | ) 69 | 70 | Button.propTypes = { 71 | scales: t.oneOf(['small', 'normal', 'big']), 72 | kind: t.oneOf(['primary', 'secondary', 'cancel', 'dark', 'gray']), 73 | } 74 | 75 | Button.defaultProps = { 76 | scales: 'normal', 77 | kind: 'primary', 78 | } 79 | --------------------------------------------------------------------------------