\n setOpen(true)}\n onBlur={() => setOpen(false)}\n onClick={() => setOpen(false)}\n />\n {children} \n
\n ![](\"https://opencollective.com/docz/contributors.svg?width=890&button=false\")
\n"
},
{
"path": "LICENSE.md",
"content": "MIT License\n\nCopyright (c) 2018 Pedro Nauck\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "MIGRATION_GUIDE.md",
"content": "# Migration Guide\n\nThe [v2 release](https://github.com/pedronauck/docz/pull/950) is our biggest release in terms of changes to our core scripts. Our bundler system was entirely modified in order to use Gatsby as default bundler and you will need to update your code if you’re coming from a previous version. \n\nIt’s not a big deal, but you will need to follow this guide in order to get Docz running properly on your project after the upgrade.\n\n## Gatsby as default bundler\n\nThe biggest change in the new v2 is that our core is now entirely built using Gatsby behind the scenes. This is a huge win for Docz, since now we can focus on building new features instead of handling a lot of bundlers issues (our biggest bottleneck) and leverage the entire Gatsby ecosystem.\n\nSo, in order to refactor our core, we need to change a lot of things and remove others that no longer make sense. The most expressive changes here is about the configuration for `doczrc.js` and the plugin system.\n\n### List of removed properties from `doczrc.js`\n* **`websocketHost`** ▶︎ _no longer need_\n* **`websocketPort`** ︎︎︎▶︎ _no longer need_\n* **`wrapper`** ▶︎ _removed_\n* **`theme`** ▶︎ _removed_\n* **`indexHtml`** ▶︎ _removed_\n* **`codeSandbox`** ▶︎ _removed_\n* **`onCreateWebpackChain`** ▶︎ _removed_\n* **`modifyBundlerConfig`** ▶︎ use Gatsby [`onCreateWebpackConfig`](https://www.gatsbyjs.org/docs/node-apis/#onCreateWebpackConfig) hook\n* **`modifyBabelRc`** ▶︎ use Gatsby [`onCreateBabelConfig`](https://www.gatsbyjs.org/docs/node-apis/#onCreateBabelConfig) hook\n\n## New hooks for plugins\nThe `createPlugin` method also changed in order to fit with Gatsby now.\n\n### List of removed/changed properties from `createPlugin()`\n\n* **`modifyBundlerConfig`** ▶︎ `onCreateWebpackConfig`\n* **`modifyBabelRc`** ▶︎ `onCreateBabelConfig`\n* **`onCreateApp`** ▶︎ `onCreateDevServer`\n* **`onPreCreateApp`** ▶︎ _removed_\n* **`onServerListening`** ▶︎ _removed_\n* **`onPreRender`** ▶︎ _removed_\n* **`onPostRender`** ▶︎ _removed_\n\n> All methods that changed now are using the same API as Gatsby hooks.\n> You can have more details about then [here](https://www.gatsbyjs.org/docs/node-apis).\n\n## `docz-theme-default` removed\n\nMake sure to remove `docz-theme-default` from your dependencies when migrating : \n\n```sh\nyarn remove docz-theme-default # npm uninstall docz-theme-default\n```\n\nThe main reason that made us change our core to use Gatsby is that they have added a feature called themes. \n\nIn the last major version we launched our own Gatsby theme `gatsby-theme-docz` and this was a huge step forward because we can now use Docz inside a Gatsby project and bring a lot of new possibilities when creating documentation.\n\nOne of the best benefits of Gatsby themes is a feature called Component Shadowing, that’s the ability to replace theme files just by creating your own file following a file naming convention. This is awesome and is something that people very often ask, for example: “I want just to change the head in the Docz theme”.\n\nIn order to get Docz running with component shadowing we removed `docz-theme-default` and now you don’t need to install it anymore. You can just add `docz` to your project.\n\nCheck [here](https://github.com/doczjs/docz/tree/master/core/gatsby-theme-docz#customizing-components) for more information about customizing the Gatsby theme.\n\n### Code highlight with PrismJS\n\nIn the last version of Docz we used Codemirror to highlight code inside `\n
\n)\n```\n\n## CSS preprocessors managed by gatsby\n\nCSS preprocessors and modules were handled by [`docz-plugin-css`](https://github.com/doczjs/docz-plugin-css) which hooked into the bundler config to add different loader support via webpack.\n\nWith the change to gatsby, css preprocessors like `sass` can be handled by gatsby via [Plugins](https://www.gatsbyjs.org/plugins/)\n\nThese plugins are added by adding a `gatsby-config.js` in your project root or modifying an existing one. For example if you want to add support for `sass` you would do the following:\n\n1. Install [`node-sass`](https://github.com/sass/node-sass) and [`gatsby-plugin-sass`](https://www.gatsbyjs.org/packages/gatsby-plugin-sass/)\n```bash\n# npm\nnpm install --save node-sass gatsby-plugin-sass\n\n# yarn\nyarn add node-sass gatsby-plugin-sass\n```\n\n2. Add the plugin to your `gatsby-config.js`\n```js\n//gatsby-config.js\nmodule.exports = {\n plugins: ['gatsby-plugin-sass']\n}\n```\n"
},
{
"path": "README.md",
"content": "# Docz\n\nDocz makes it easy to write and publish beautiful interactive documentation for your code.\nCreate MDX files showcasing your code and Docz turns them into a live-reloading, production-ready site.\n\n## Why?\n\nDocumenting code is one of the most important and time-consuming tasks when developing software.\n\nA lot of time is spent on building and maintaining custom documentation sites.\n\nDocz enables you to quickly create a live-reloading, SEO-friendly, production-ready documentation site with MDX and customize the look, feel and behavior when required by leveraging [GatsbyJS](https://www.gatsbyjs.org) and [Gatsby theme shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/).\n\n## Getting started\n\nStart by adding `docz` as a dependency to your project with Yarn or npm:\n\n```bash\n$ yarn add docz # react react-dom\n\n# or\n\n$ npm install docz # react react-dom\n```\n\n> **Note**: `react` and `react-dom` will not be installed automatically. You'll have to install them yourself.\n\nThen, create `.mdx` files anywhere in your project:\n\n```mdx\n---\nname: Button\nroute: /\n---\n\nimport { Playground, Props } from 'docz'\nimport Button from './Button'\n\n# Button\n\nMy custom wrapper
\n {children}\n\n\n## Contributing\n\nAll kinds of contributions are very welcome and appreciated!\n\nIf you want to contribute time to docz then here's a list of suggestions to get you started:\n\n1. Star the project on GitHub.\n2. Help people in the [issues](https://github.com/doczjs/docz/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) by sharing your knowledge and experience.\n3. Find and report issues.\n4. Submit pull requests to help solve issues or add features.\n5. Influence the future of docz with feature requests.\n\nIf you're looking for a place to start make sure to check issues tagged with the `good first issue` label:\n\n[](https://github.com/doczjs/docz/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)\n\nRead the [Contributing Guide](/CONTRIBUTING.md) before you open a pull request.\n\nYou can also sponsor us via OpenCollective to help secure docz's future.\n\n\n \n ![\"Open](\"https://cdn-std.dprcdn.net/files/acc_649651/Q5nVhT\")
\n ![](\"https://cdn-std.dprcdn.net/files/acc_649651/BSPk3z\")
\n \n \n \n \n
\n \n \n
\n \n \n
![\"Chat\"](\"https://img.shields.io/badge/check-our%20roadmap-5362F5.svg\"){kind=icon}
\n \n
\n\n## Contributing\n\nAll kinds of contributions are very welcome and appreciated !\n\nIf you want to contribute time to docz then here's a list of suggestions to get you started :\n\n1. Star the project.\n2. Help people in the [issues](https://github.com/doczjs/docz/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) by sharing your knowledge and experience.\n3. Find and report issues.\n4. Submit PRs to help solve issues or add features.\n5. Influence the future of docz with feature requests.\n\nIf you're looking for a place to start make sure to check issues tagged with :\n\n[](https://github.com/doczjs/docz/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)\n\nAnd make sure to read the [Contributing Guide](/CONTRIBUTING.md) before making a pull request.\n\nYou can also contribute money to help secure docz's future.\n\n\n \n
\n {component}\n
\n)\n\nconst defaultComponents: ComponentsMap = {\n layout: DefLayout,\n notFound: DefNotFound,\n playground: DefPlayground,\n}\n\nexport interface ComponentsProviderProps {\n components: ComponentsMap\n}\n\nconst ctx = createContext{code}\n \n {text}\n
\n)\n\nLabel.propTypes = {\n /** A nice string */\n text: t.string,\n}\n\nexport default Label\n"
},
{
"path": "core/docz-core/__fixtures__/Label.tsx",
"content": "import React, { FC } from 'react'\n\nexport interface LabelProps {\n /**\n * Set this to do the thing\n * @default info\n */\n text: string\n}\n\nconst Label: FC\n {text}\n
\n)\n\nexport default Label\n"
},
{
"path": "core/docz-core/__tests__/config.test.ts",
"content": "import * as path from 'path'\nimport { setArgs } from '../src/config/argv'\nimport { getBaseConfig } from '../src/config/docz'\nimport { getThemesDir } from '../src/config/paths'\nimport yargs from 'yargs'\n\ndescribe('config.argv & config.docz', () => {\n test('works', () => {\n const { argv } = setArgs(yargs)\n // expect(argv).toMatchInlineSnapshot(`undefined`)\n //@ts-ignore\n getBaseConfig(argv, {})\n // expect(c)\n })\n})\n\ndescribe('getThemeDir', () => {\n test('returns src/ for default config', () => {\n const { argv } = setArgs(yargs)\n //@ts-ignore\n const config = getBaseConfig(argv, {})\n\n expect(getThemesDir(config)).toBe(path.join(config.root, '/src'))\n })\n\n test('returns correct path for custom themesDir entry', () => {\n const { argv } = setArgs(yargs)\n //@ts-ignore\n const config = getBaseConfig(argv, { themesDir: 'theme' })\n\n expect(getThemesDir(config)).toBe(path.join(config.root, '/theme'))\n })\n\n test('custom themesDir entries with trailing slashes are handled correctly', () => {\n const { argv } = setArgs(yargs)\n //@ts-ignore\n const config = getBaseConfig(argv, { themesDir: 'theme/' })\n\n expect(getThemesDir(config)).toBe(path.join(config.root, '/theme'))\n })\n})\n"
},
{
"path": "core/docz-core/__tests__/entries.test.ts",
"content": "import { Entries } from '../src/lib/Entries'\nimport { getTestConfig } from '../src/test-utils'\n\ndescribe('Entries', () => {\n test('get entries', async () => {\n const config = getTestConfig()\n const entries = new Entries(config)\n expect(entries).toBeTruthy()\n })\n})\n"
},
{
"path": "core/docz-core/__tests__/props.test.ts",
"content": "import * as fs from 'fs-extra'\nimport { getPattern, initial } from '../src/states/props'\nimport { readCacheFile } from '../src/utils/docgen/typescript'\nimport { getTestConfig, mockedParams } from '../src/test-utils'\n\ndescribe('props', () => {\n beforeEach(() => {\n if (fs.existsSync('./.docz/.cache/propsParser.json')) {\n fs.unlinkSync('./.docz/.cache/propsParser.json')\n }\n })\n\n describe('typescript', () => {\n test('should set props from typescript files', async () => {\n const config = getTestConfig()\n const pattern = getPattern(config)\n const data = initial(config, pattern)\n const params = mockedParams()\n await data(params)\n expect(params.getState().props.length).toBeGreaterThan(0)\n })\n\n test('should set correct key on parsed typescript files', async () => {\n const config = getTestConfig()\n const pattern = getPattern(config)\n const data = initial(config, pattern)\n const params = mockedParams()\n await data(params)\n const expectedFirstPropName = '__fixtures__/Label.tsx'\n const firstProp = params.getState().props[0]\n expect(firstProp.key).toEqual(expectedFirstPropName)\n expect(firstProp.value).toBeTruthy()\n })\n })\n\n describe('javascript', () => {\n test('should set correct key on parsed javascript files', async () => {\n const config = getTestConfig({ typescript: undefined })\n const pattern = getPattern(config)\n const data = initial(config, pattern)\n const params = mockedParams()\n await data(params)\n const expectedFirstPropName = '__fixtures__/Label.jsx'\n const firstProp = params.getState().props[0]\n expect(firstProp.key).toEqual(expectedFirstPropName)\n expect(firstProp.value).toBeTruthy()\n })\n\n test('should set props from javascript files', async () => {\n const config = getTestConfig({ typescript: undefined })\n const pattern = getPattern(config)\n const data = initial(config, pattern)\n const params = mockedParams()\n await data(params)\n expect(params.getState().props.length).toBeGreaterThan(0)\n })\n\n test('should have props on javascript files', async () => {\n const config = getTestConfig({ typescript: undefined })\n const pattern = getPattern(config)\n const data = initial(config, pattern)\n const params = mockedParams()\n await data(params)\n const firstProp = params.getState().props[0]\n expect(firstProp.value[0].props).toBeTruthy()\n })\n })\n\n describe('cache', () => {\n test('should have empty cache on start', async () => {\n const cache = readCacheFile()\n expect(cache).toBeNull()\n })\n\n test('should set cache on loading props', async () => {\n const cache = readCacheFile()\n expect(cache).toBeNull()\n const config = getTestConfig()\n const pattern = getPattern(config)\n const data = initial(config, pattern)\n const params = mockedParams()\n await data(params)\n expect(readCacheFile()).not.toBeNull()\n })\n })\n})\n"
},
{
"path": "core/docz-core/__tests__/states.test.ts",
"content": "import * as states from '../src/states/index'\nimport { createConfigStateInput } from '../src/test-utils/data-bank'\nimport { getBaseConfig } from '../src/config/docz'\nimport * as paths from '../src/config/paths'\nimport { Entries } from '../src/lib/Entries'\nimport { setArgs } from '../src/config/argv'\n\ndescribe('states', () => {\n test('exports', () => {\n expect(states).toBeDefined()\n expect(typeof states.config).toEqual('function')\n expect(typeof states.entries).toEqual('function')\n expect(typeof states.props).toEqual('function')\n })\n})\n\ndescribe('states.config', () => {\n test('config returns valid state', () => {\n const state = states.config({})\n expect(typeof state.close).toEqual('function')\n expect(typeof state.start).toEqual('function')\n expect(state.id).toEqual('config')\n state.close()\n })\n test('config state writes config to state when started', async () => {\n const config = createConfigStateInput()\n const setState = jest.fn()\n const getState = jest.fn()\n const state = states.config(config)\n await state.start({ getState, setState })\n delete config.paths\n delete config.src\n expect(setState).toBeCalledWith('config', expect.objectContaining(config))\n state.close()\n })\n})\n\ndescribe('states.entries', () => {\n test('entries returns start-able state', async () => {\n const yargs = {\n argv: {},\n option: jest.fn().mockImplementation((key, value) => {\n yargs.argv[value.alias ? value.alias : key] = value.default\n return yargs\n }),\n }\n const { argv } = setArgs(yargs)\n //@ts-ignore\n const config = { ...getBaseConfig(argv), paths }\n const entries = new Entries(config)\n const state = states.entries(entries, config)\n const setState = jest.fn()\n const getState = jest.fn()\n await state.start({ getState, setState })\n expect(getState).toBeCalledWith()\n // expect(setState).toBeCalledWith('entries', [])\n state.close()\n })\n})\n"
},
{
"path": "core/docz-core/bin/index.js",
"content": "require('../dist/').cli()\n"
},
{
"path": "core/docz-core/nodemon.json",
"content": "{\n \"ignore\": [\"dist/\"],\n \"//verbose\": true,\n \"exec\": \"yarn build && node bin/index.js init\",\n \"ext\": \"js,ts,json\"\n}\n"
},
{
"path": "core/docz-core/package.json",
"content": "{\n \"name\": \"docz-core\",\n \"version\": \"2.4.0\",\n \"description\": \"All docz core logic of bundle and parsing is included on this package\",\n \"license\": \"MIT\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.esm.js\",\n \"typings\": \"dist/index.d.ts\",\n \"files\": [\n \"dist/\",\n \"package.json\",\n \"README.md\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/doczjs/docz.git\",\n \"directory\": \"core/docz-core\"\n },\n \"scripts\": {\n \"build\": \"yarn cross-env NODE_ENV=production rollup -c\",\n \"dev\": \"yarn cross-env NODE_ENV=development yarn build -w\",\n \"fix\": \"yarn lint --fix\",\n \"lint\": \"yarn eslint . --ext mdx,ts,tsx\",\n \"precommit\": \"lint-staged\",\n \"prepare\": \"yarn build\",\n \"test\": \"yarn jest\"\n },\n \"peerDependencies\": {\n \"typescript\": \"^3.5.0 || ^4.0.0\"\n },\n \"dependencies\": {\n \"@sindresorhus/slugify\": \"^0.9.1\",\n \"chalk\": \"^2.4.2\",\n \"chokidar\": \"^3.0.2\",\n \"cross-spawn\": \"^7.0.2\",\n \"detect-port\": \"^1.3.0\",\n \"docz-utils\": \"^2.4.0\",\n \"env-dot-prop\": \"^2.0.1\",\n \"fast-deep-equal\": \"^2.0.1\",\n \"fast-glob\": \"^3.0.4\",\n \"find-up\": \"^4.1.0\",\n \"fs-extra\": \"^8.1.0\",\n \"gatsby-plugin-eslint\": \"^2.0.5\",\n \"gatsby-plugin-typescript\": \"^2.1.6\",\n \"get-pkg-repo\": \"4.1.1\",\n \"humanize-string\": \"^2.1.0\",\n \"load-cfg\": \"^2.4.0\",\n \"lodash\": \"^4.17.14\",\n \"minimatch\": \"^3.0.4\",\n \"open\": \"^7.0.3\",\n \"ora\": \"^3.4.0\",\n \"react-docgen\": \"^4.1.1\",\n \"react-docgen-actual-name-handler\": \"^2.4.0\",\n \"react-docgen-external-proptypes-handler\": \"^1.0.3\",\n \"react-docgen-typescript\": \"^2.1.0\",\n \"recast\": \"^0.18.1\",\n \"resolve\": \"^1.11.1\",\n \"shelljs\": \"^0.8.3\",\n \"signale\": \"^1.4.0\",\n \"titleize\": \"^2.1.0\",\n \"tslib\": \"^1.11.1\",\n \"wait-on\": \"^3.3.0\",\n \"xstate\": \"^4.6.7\",\n \"yargs\": \"^13.3.0\"\n }\n}\n"
},
{
"path": "core/docz-core/rollup.config.js",
"content": "import { config, copy } from 'docz-rollup'\n\nexport default config({\n input: './src/index.ts',\n plugins: [copy('templates', 'dist/templates')],\n})\n"
},
{
"path": "core/docz-core/src/bundler/build.ts",
"content": "import * as fs from 'fs-extra'\nimport * as path from 'path'\nimport sh from 'shelljs'\n\nimport * as paths from '../config/paths'\nimport { BuildFn } from '../lib/Bundler'\nimport { ensureFiles } from './machine/actions'\nimport { spawnSync } from '../utils/spawn'\n\nexport const build: BuildFn = async (config, dist) => {\n const publicDir = path.join(paths.docz, 'public')\n const cliArgs = ['run', 'build']\n\n if (typeof config.base === 'string' && config.base.length) {\n cliArgs.push('--')\n // Append gatsby option `--prefix-paths`to CLI args which will prepend pathPrefix from gatsby-config to urls\n // https://www.gatsbyjs.org/docs/path-prefix/\n cliArgs.push('--prefix-paths')\n }\n ensureFiles({ args: config })\n sh.cd(paths.docz)\n spawnSync('npm', cliArgs)\n await fs.copy(publicDir, dist)\n}\n"
},
{
"path": "core/docz-core/src/bundler/index.ts",
"content": "import { Bundler } from '../lib/Bundler'\nimport { Config as Args } from '../config/argv'\n\nimport { server } from './server'\nimport { build } from './build'\n\nexport const bundler = (args: Args) => {\n return new Bundler({ args, build, server: server(args) })\n}\n"
},
{
"path": "core/docz-core/src/bundler/machine/actions.ts",
"content": "import * as path from 'path'\nimport * as fs from 'fs-extra'\nimport { assign, Event } from 'xstate'\nimport { assoc } from 'lodash/fp'\nimport glob from 'fast-glob'\nimport log from 'signale'\nimport sh from 'shelljs'\n\nimport * as paths from '../../config/paths'\nimport { ServerMachineCtx } from './context'\nimport { copyDoczRc } from './services/create-resources'\n\nconst ensureFile = (filename: string, toDelete?: string) => {\n const ghost = path.resolve(paths.docz, toDelete || filename)\n const original = path.resolve(paths.root, filename)\n if (fs.pathExistsSync(ghost) && !fs.pathExistsSync(original)) {\n fs.removeSync(ghost)\n }\n}\n\nexport const ensureFiles = ({ args }: ServerMachineCtx) => {\n // themesDir defaults to \"src\" to behave like a normal gatsby site\n const appPath = path.join(paths.root, args.themesDir)\n const themeNames = glob.sync('gatsby-theme-**', {\n cwd: appPath,\n onlyDirectories: true,\n })\n themeNames.forEach(themeName => {\n fs.copySync(\n path.join(appPath, themeName),\n path.join(paths.docz, 'src', themeName)\n )\n })\n const userPagesPath = path.join(appPath, 'pages')\n const doczPagesPath = path.join(paths.docz, 'src', 'pages')\n // Copy 404 and other possible Gatsby pages\n if (fs.existsSync(userPagesPath)) {\n fs.copySync(userPagesPath, doczPagesPath)\n }\n\n copyDoczRc(args.config)\n ensureFile('gatsby-browser.js')\n ensureFile('gatsby-ssr.js')\n ensureFile('gatsby-node.js')\n ensureFile('gatsby-config.js', 'gatsby-config.custom.js')\n\n const publicPath = path.join(paths.docz, '..', args.public)\n if (fs.existsSync(publicPath)) {\n const destinationPath = path.join(paths.docz, 'static', args.public)\n try {\n fs.copySync(publicPath, destinationPath)\n } catch (err) {\n console.log(\n `Failed to copy static assets from ${publicPath} to ${destinationPath} : ${err.message}`\n )\n }\n }\n}\n\nexport const getIsFirstInstall = () => {\n return !sh.test('-e', path.join(paths.docz, 'package.json'))\n}\nexport const getIsDoczRepo = () => {\n return sh.test('-e', path.join(paths.root, '../../core'))\n}\n\nexport const assignFirstInstall = assign((ctx: ServerMachineCtx) => {\n const firstInstall = getIsFirstInstall()\n return assoc('firstInstall', firstInstall, ctx)\n})\n\nexport const checkIsDoczRepo = assign((ctx: ServerMachineCtx) => {\n const isDoczRepo = getIsDoczRepo()\n return assoc('isDoczRepo', isDoczRepo, ctx)\n})\n\nexport const logError = (ctx: ServerMachineCtx, ev: EventNot Found
\n}\n\nexport default NotFound\n"
},
{
"path": "core/docz-core/templates/gatsby-config.tpl.js",
"content": "const { mergeWith } = require('docz-utils')\nconst fs = require('fs-extra')\n\nlet custom = {}\nconst hasGatsbyConfig = fs.existsSync('./gatsby-config.custom.js')\n\nif (hasGatsbyConfig) {\n try {\n custom = require('./gatsby-config.custom')\n } catch (err) {\n console.error(\n `Failed to load your gatsby-config.js file : `,\n JSON.stringify(err)\n )\n }\n}\n\nconst config = {\n <% if (config.base) {%>\n pathPrefix: \"<%- config.base %>\",\n <%}%>\n siteMetadata: {\n title: \"<%- config.title %>\",\n description: \"<%- config.description %>\"\n },\n plugins: [\n <% if (config.typescript) {%>\n {\n resolve: 'gatsby-plugin-typescript',\n options: {\n isTSX: true,\n allExtensions: true\n }\n },<%}%>\n {\n resolve: 'gatsby-theme-docz',\n options: <%- opts %>\n },<% if (isDoczRepo) {%>\n {\n resolve: 'gatsby-plugin-eslint',\n options: {\n test: /\\.js$|\\.jsx$/,\n exclude: /.*/,\n stages: ['develop'],\n options: {\n emitWarning: false,\n failOnError: false,\n },\n },\n },\n {\n resolve: 'gatsby-plugin-compile-es6-packages',\n options: {\n modules: ['docz', 'gatsby-theme-docz'],\n },\n },<%}%>\n ],\n}\n\nconst merge = mergeWith((objValue, srcValue) => {\n if (Array.isArray(objValue)) {\n return objValue.concat(srcValue)\n }\n})\n\nmodule.exports = merge(config, custom)\n"
},
{
"path": "core/docz-core/templates/gatsby-node.tpl.js",
"content": "const { get } = require('docz-utils')\n\nconst NO_OP = () => {}\n\nconst DEFAULT_RESOLVABLE_EXTENSIONS = () => [`.js`, `.jsx`]\n\nlet gatsbyNodeCustom = {}\ntry {\n gatsbyNodeCustom = require('./gatsby-node.custom')\n} catch (err) {}\n\n// https://www.gatsbyjs.org/docs/node-apis/\n\nexports.createPages = args => {\n const createPages = get(gatsbyNodeCustom, 'createPages', NO_OP)\n return createPages(args)\n}\n\nexports.createPagesStatefully = args => {\n const createPagesStatefully = get(\n gatsbyNodeCustom,\n 'createPagesStatefully',\n NO_OP\n )\n return createPagesStatefully(args)\n}\n\nexports.createResolvers = args => {\n const createResolvers = get(gatsbyNodeCustom, 'createResolvers', NO_OP)\n return createResolvers(args)\n}\n\nexports.createSchemaCustomization = args => {\n const createSchemaCustomization = get(\n gatsbyNodeCustom,\n 'createSchemaCustomization',\n NO_OP\n )\n return createSchemaCustomization(args)\n}\n\nexports.generateSideEffects = args => {\n const generateSideEffects = get(\n gatsbyNodeCustom,\n 'generateSideEffects',\n NO_OP\n )\n return generateSideEffects(args)\n}\n\nexports.onCreateBabelConfig = args => {\n const onCreateBabelConfig = get(\n gatsbyNodeCustom,\n 'onCreateBabelConfig',\n NO_OP\n )\n return onCreateBabelConfig(args)\n}\n\nexports.onCreateDevServer = args => {\n const onCreateDevServer = get(gatsbyNodeCustom, 'onCreateDevServer', NO_OP)\n return onCreateDevServer(args)\n}\n\nexports.onCreateNode = args => {\n const onCreateNode = get(gatsbyNodeCustom, 'onCreateNode', NO_OP)\n return onCreateNode(args)\n}\n\nexports.onCreatePage = args => {\n const onCreatePage = get(gatsbyNodeCustom, 'onCreatePage', NO_OP)\n return onCreatePage(args)\n}\n\nexports.onCreateWebpackConfig = args => {\n const onCreateWebpackConfig = get(\n gatsbyNodeCustom,\n 'onCreateWebpackConfig',\n NO_OP\n )\n return onCreateWebpackConfig(args)\n}\n\nexports.onPostBootstrap = args => {\n const onPostBootstrap = get(gatsbyNodeCustom, 'onPostBootstrap', NO_OP)\n return onPostBootstrap(args)\n}\n\nexports.onPostBuild = args => {\n const onPostBuild = get(gatsbyNodeCustom, 'onPostBuild', NO_OP)\n return onPostBuild(args)\n}\n\nexports.onPreBootstrap = args => {\n const onPreBootstrap = get(gatsbyNodeCustom, 'onPreBootstrap', NO_OP)\n return onPreBootstrap(args)\n}\n\nexports.onPreBuild = args => {\n const onPreBuild = get(gatsbyNodeCustom, 'onPreBuild', NO_OP)\n return onPreBuild(args)\n}\n\nexports.onPreExtractQueries = args => {\n const onPreExtractQueries = get(\n gatsbyNodeCustom,\n 'onPreExtractQueries',\n NO_OP\n )\n return onPreExtractQueries(args)\n}\n\nexports.onPreInit = args => {\n const onPreInit = get(gatsbyNodeCustom, 'onPreInit', NO_OP)\n return onPreInit(args)\n}\n\nexports.preprocessSource = args => {\n const preprocessSource = get(gatsbyNodeCustom, 'preprocessSource', NO_OP)\n return preprocessSource(args)\n}\n\nexports.resolvableExtensions = args => {\n const resolvableExtensions = get(\n gatsbyNodeCustom,\n 'resolvableExtensions',\n DEFAULT_RESOLVABLE_EXTENSIONS\n )\n return resolvableExtensions(args)\n}\n\nexports.setFieldsOnGraphQLNodeType = args => {\n const setFieldsOnGraphQLNodeType = get(\n gatsbyNodeCustom,\n 'setFieldsOnGraphQLNodeType',\n () => ({})\n )\n return setFieldsOnGraphQLNodeType(args)\n}\n\nexports.sourceNodes = args => {\n const sourceNodes = get(gatsbyNodeCustom, 'sourceNodes', NO_OP)\n return sourceNodes(args)\n}\n"
},
{
"path": "core/docz-core/templates/imports.tpl.js",
"content": "export const imports = {\n <% entries.forEach(function(entry) { %>'<%- entry.filepath %>': () =>\n import(/* webpackPrefetch: true, webpackChunkName: \"<%- entry.slug %>\" */ '<%- entry.filepath %>'),<% }) %>\n}\n"
},
{
"path": "core/docz-core/templates/index.tpl.html",
"content": "\n\n \n \n \n \n \n Some text
\n Other text
\nSome text
\n Other text
\n \"\n `)\n })\n\n test('works when the closing tag is repeated in a comment', () => {\n expect(\n removeTags(`\nSome text
\n Some text
\n \"\n `)\n })\n})\n"
},
{
"path": "core/docz-utils/package.json",
"content": "{\n \"name\": \"docz-utils\",\n \"version\": \"2.4.0\",\n \"description\": \"Some methods used and utilities used on docz\",\n \"license\": \"MIT\",\n \"main\": \"lib/index.js\",\n \"module\": \"lib/index.esm.js\",\n \"typings\": \"lib/index.d.ts\",\n \"files\": [\n \"lib/\",\n \"package.json\",\n \"README.md\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/doczjs/docz.git\",\n \"directory\": \"core/docz-utils\"\n },\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development yarn build -w\",\n \"build\": \"trash lib && cross-env NODE_ENV=production rollup -c\",\n \"fix\": \"yarn lint --fix\",\n \"lint\": \"eslint . --ext mdx,ts,tsx\",\n \"precommit\": \"lint-staged\",\n \"test\": \"yarn jest\"\n },\n \"dependencies\": {\n \"@babel/generator\": \"^7.16.8\",\n \"@babel/parser\": \"^7.16.12\",\n \"@babel/traverse\": \"^7.16.10\",\n \"art-template\": \"^4.13.2\",\n \"fs-extra\": \"^8.1.0\",\n \"humanize-string\": \"^2.1.0\",\n \"js-string-escape\": \"^1.0.1\",\n \"jsx-ast-utils\": \"^2.2.1\",\n \"lodash\": \"^4.17.14\",\n \"prettier\": \"^1.18.2\",\n \"remark-frontmatter\": \"^1.3.2\",\n \"remark-parse\": \"^6.0.2\",\n \"remark-parse-yaml\": \"^0.0.2\",\n \"remark-slug\": \"^5.1.2\",\n \"signale\": \"^1.4.0\",\n \"strip-indent\": \"^3.0.0\",\n \"to-vfile\": \"^6.0.0\",\n \"unescape-js\": \"^1.1.1\",\n \"unified\": \"^8.3.2\",\n \"unist-util-find\": \"^1.0.1\",\n \"unist-util-is\": \"^3.0.0\",\n \"unist-util-visit\": \"^1.4.1\"\n }\n}\n"
},
{
"path": "core/docz-utils/rollup.config.js",
"content": "import { config } from 'docz-rollup'\n\nexport default config({\n input: [\n './src/ast.ts',\n './src/format.ts',\n './src/fs.ts',\n './src/index.ts',\n './src/imports.ts',\n './src/jsx.ts',\n './src/mdast.ts',\n './src/exports.ts',\n ],\n output: {\n dir: 'lib',\n },\n})\n"
},
{
"path": "core/docz-utils/src/ast.ts",
"content": "import * as parser from '@babel/parser'\nimport traverse from '@babel/traverse'\n\ntype Condition = (path: any) => boolean\ntype Predicate\n
\n)\n```\n\n## Theme UI integrated\n\nAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally different documentation.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n themeConfig: {\n colors: {\n header: {\n bg: 'tomato',\n },\n },\n },\n}\n```\n\nOr, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n colors: {\n header: {\n bg: 'tomato',\n },\n },\n})\n```\n\n### Changing code highlight\n\nBoth code highlights shortcodes and the `My custom wrapper
\n {children}\n{/* my coolest home */}
\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n\n {line.map((token, key) => (\n
\n ))}\n \n )}\n \n )\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Code/styles.js",
"content": "export const editor = {\n borderRadius: 'radius',\n border: t => `1px solid ${t.colors.border}`,\n fontFamily: 'monospace',\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Header/index.js",
"content": "/** @jsx jsx */\nimport { jsx, Box, Flex, useColorMode } from 'theme-ui'\nimport { useConfig, useCurrentDoc } from 'docz'\n\nimport * as styles from './styles'\nimport { Edit, Menu, Sun, Github } from '../Icons'\nimport { Logo } from '../Logo'\n\nexport const Header = props => {\n const { onOpen } = props\n const {\n repository,\n themeConfig: { showDarkModeSwitch, showMarkdownEditButton },\n } = useConfig()\n const { edit = true, ...doc } = useCurrentDoc()\n const [colorMode, setColorMode] = useColorMode()\n\n const toggleColorMode = () => {\n setColorMode(colorMode === 'light' ? 'dark' : 'light')\n }\n\n return (\n \n \n \n \n
\n )\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Header/styles.js",
"content": "import * as mixins from '~utils/mixins'\nimport { media } from '~theme/breakpoints'\n\nexport const wrapper = {\n bg: 'header.bg',\n position: 'relative',\n zIndex: 1,\n borderBottom: t => `1px solid ${t.colors.border}`,\n}\n\nexport const innerContainer = {\n ...mixins.centerAlign,\n px: 4,\n position: 'relative',\n justifyContent: 'space-between',\n height: 80,\n}\n\nexport const menuIcon = {\n display: 'none',\n position: 'absolute',\n top: 'calc(100% + 15px)',\n left: 30,\n [media.tablet]: {\n display: 'block',\n },\n}\n\nexport const menuButton = {\n ...mixins.ghostButton,\n color: 'header.text',\n opacity: 0.5,\n cursor: 'pointer',\n}\n\nexport const headerButton = {\n ...mixins.centerAlign,\n outline: 'none',\n p: '12px',\n border: 'none',\n borderRadius: 9999,\n bg: 'header.button.bg',\n color: 'header.button.color',\n fontSize: 0,\n fontWeight: 600,\n cursor: 'pointer',\n}\n\nexport const editButton = {\n ...mixins.centerAlign,\n position: 'absolute',\n bottom: -40,\n right: 30,\n bg: 'transparent',\n color: 'muted',\n fontSize: 1,\n textDecoration: 'none',\n borderRadius: 'radius',\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Headings/index.js",
"content": "/** @jsx jsx */\nimport { jsx } from 'theme-ui'\n\nconst heading = Tag => {\n const Component = props => {\n return !!props.id ? (\n \n \n {repository && (\n \n \n \n )}\n {showDarkModeSwitch && (\n \n \n {showMarkdownEditButton && edit && doc.link && (\n \n Edit page \n \n )}\n
\n \n
\n )\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/NavGroup/styles.js",
"content": "export const wrapper = {\n my: 3,\n}\n\nexport const sublinkWrapper = {\n ml: 2,\n}\n\nexport const title = {\n mb: 1,\n fontSize: 2,\n fontWeight: 500,\n color: 'sidebar.navGroup',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n}\n\nexport const chevron = ({ active }) => ({\n ml: 1,\n flexShrink: 0,\n alignSelf: 'baseline',\n transform: `rotateX(${active ? 180 : 0}deg)`,\n transformOrigin: 'center',\n transition: 'transform .3s ease-in-out',\n})\n"
},
{
"path": "core/gatsby-theme-docz/src/components/NavLink/index.js",
"content": "/** @jsx jsx */\nimport { Fragment, forwardRef } from 'react'\nimport { jsx } from 'theme-ui'\nimport { Link } from 'gatsby'\nimport { useDocs, useCurrentDoc } from 'docz'\nimport { get } from 'lodash/fp'\n\nimport * as styles from './styles'\n\nconst getHeadings = (route, docs) => {\n const doc = docs.find(doc => doc.route === route)\n const headings = get('headings', doc)\n return headings ? headings.filter(heading => heading.depth === 2) : []\n}\n\nconst getCurrentHash = () => {\n if (typeof window === 'undefined') {\n return ''\n }\n return window.location ? decodeURI(window.location.hash) : ''\n}\n\nexport const NavLink = forwardRef(function NavLink({ item, ...props }, ref) {\n const docs = useDocs()\n const current = useCurrentDoc()\n\n if (item.hidden) {\n return null\n }\n\n const to = item.route\n const headings = docs && getHeadings(to, docs)\n const isCurrent = item.route === current.route\n const showHeadings = isCurrent && headings && headings.length > 0\n const currentHash = getCurrentHash()\n return (\n \n {item.name}\n
\n \n {menu &&\n subheadingsVisible &&\n menu.map(menu => {\n if (currentDoc.route === menu.route) {\n return (\n \n {menu.name}\n \n )\n }\n return (\n \n {menu.name}\n \n )\n })}\n
\n \n
\n )\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/NavSearch/styles.js",
"content": "export const wrapper = {\n mb: 3,\n display: 'inline-flex',\n alignItems: 'center',\n}\n\nexport const input = {\n outline: 'none',\n background: 'none',\n border: 'none',\n color: 'text',\n fontSize: 1,\n}\n\nexport const icon = {\n color: 'border',\n mr: 2,\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Playground/Wrapper.js",
"content": "/** @jsx jsx */\nimport { useState } from 'react'\nimport { jsx } from 'theme-ui'\nimport { useConfig } from 'docz'\nimport Iframe from 'react-frame-component'\nimport ReactResizeDetector from 'react-resize-detector'\n\nimport * as styles from './styles'\n\nconst CLEAR_PADDING = ``\nconst INITIAL_IFRAME_CONTENT = ` ${CLEAR_PADDING} `\n\nconst IframeWrapper = ({ children, style }) => {\n const [containerHeight, setHeight] = useState()\n return (\n \n \n {showLivePreview && (\n
\n {showingCode && (\n \n \n \n
\n \n
\n \n )}\n {showLiveError && (\n {children}
\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Pre/styles.js",
"content": "export const wrapper = {\n position: 'relative',\n my: 4,\n}\n\nexport const language = {\n py: 1,\n px: 2,\n position: 'absolute',\n bottom: 0,\n right: 0,\n fontSize: 1,\n color: 'muted',\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Props/index.js",
"content": "/** @jsx jsx */\nimport { useState } from 'react'\nimport { jsx } from 'theme-ui'\n\nimport { ChevronDown, ChevronUp } from '../Icons'\nimport * as styles from './styles'\n\nexport const getDefaultValue = ({ defaultValue, type, flowType }) => {\n const propType = flowType ? flowType : type\n if (!defaultValue || !defaultValue.value) return null\n if (defaultValue.value === \"''\") {\n return '[Empty string]'\n }\n if (propType && propType.name === 'string') {\n return defaultValue.value.replace(/\\'/g, '\"')\n }\n if (typeof defaultValue.value === 'object' && defaultValue.value.toString) {\n return defaultValue.value.toString()\n }\n return defaultValue.value\n}\n\nexport const Prop = ({ propName, prop, getPropType, isToggle }) => {\n const [showing, setShowing] = useState(isToggle || false)\n if (!prop.type && !prop.flowType) return null\n\n const toggle = () => setShowing(s => !s)\n return (\n \n
\n )\n}\n\nexport const Props = ({ props, getPropType, isToggle }) => {\n const entries = Object.entries(props)\n\n return (\n \n
\n {showing && prop.description && (\n \n {propName}\n
\n \n {getPropType(prop)}\n
\n {prop.defaultValue && (\n \n {getDefaultValue(prop)}\n
\n )}\n \n {prop.required && (\n \n {showing ?
\n \n required\n
\n )}\n {prop.description && (\n \n {prop.description}\n
\n )}\n \n {entries.map(([key, prop]) => (\n
\n )\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Props/styles.js",
"content": "import { breakpoints } from '~theme/breakpoints'\nimport * as mixins from '~utils/mixins'\n\nexport const container = {\n mt: 3,\n mb: 4,\n border: t => `1px solid ${t.colors.border}`,\n borderRadius: 'radius',\n overflow: 'hidden',\n bg: 'props.bg',\n color: 'props.text',\n fontSize: 3,\n}\n\nexport const content = {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n [`@media (min-width: ${breakpoints.tablet}px)`]: {\n flexWrap: 'nowrap',\n flexDirection: 'row',\n },\n}\n\nexport const line = {\n pt: 2,\n '& + &': {\n borderTop: t => `1px solid ${t.colors.border}`,\n },\n}\n\nconst column = {\n minWidth: 0,\n pb: 2,\n px: 3,\n '& ~ &': {\n bg: 'red',\n },\n}\n\nexport const propName = {\n ...column,\n color: 'props.highlight',\n}\n\nexport const propType = {\n ...column,\n color: 'props.text',\n}\n\nexport const defaultValue = {\n ...column,\n color: 'props.defaultValue',\n}\n\nexport const right = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n px: 3,\n flex: 1,\n [`@media (max-width: ${breakpoints.tablet}px)`]: {\n position: 'absolute',\n top: 0,\n right: 0,\n },\n}\n\nexport const propRequired = {\n color: 'props.text',\n fontSize: 1,\n opacity: 0.5,\n}\n\nexport const openDescBtn = {\n ...mixins.ghostButton,\n mt: 0,\n ml: 3,\n color: 'props.defaultValue',\n}\n\nexport const description = {\n fontSize: 2,\n m: 0,\n py: 2,\n px: 3,\n borderTop: t => `1px solid ${t.colors.border}`,\n color: 'props.descriptionText',\n bg: 'props.descriptionBg',\n}\n"
},
{
"path": "core/gatsby-theme-docz/src/components/Sidebar/index.js",
"content": "/** @jsx jsx */\nimport { Fragment, forwardRef, useState, useRef, useEffect } from 'react'\nimport { Global } from '@emotion/react'\nimport { jsx, Box } from 'theme-ui'\nimport { useMenus, useCurrentDoc } from 'docz'\n\nimport * as styles from './styles'\nimport { NavSearch } from '../NavSearch'\nimport { NavLink } from '../NavLink'\nimport { NavGroup } from '../NavGroup'\n\nexport const Sidebar = forwardRef(function Sidebar(props, ref) {\n const [query, setQuery] = useState('')\n const menus = useMenus({ query })\n const currentDoc = useCurrentDoc()\n const currentDocRef = useRef()\n const handleChange = ev => {\n setQuery(ev.target.value)\n }\n useEffect(() => {\n if (ref.current && currentDocRef.current) {\n ref.current.scrollTo(0, currentDocRef.current.offsetTop)\n }\n }, [])\n return (\n {foo}
\\\\\\\\n}'} __scope={{\n props,\n Playground\n }} mdxType=\\\\\"Playground\\\\\">\n {() => {\n const foo = 'foo';\n return {foo}
;\n }}\n {foo}
\\\\\\\\n}'} __scope={{\n props,\n Playground\n }} mdxType=\\\\\"Playground\\\\\">\n {() => {\n const foo = 'foo';\n return {foo}
;\n }}\n {foo}
\n )\n }}\n{foo}
;\n }}\n {foo}
\n )\n }}\n\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.
\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.
\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.
\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.
\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting\n\n### Analyzing the Bundle Size\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size\n\n### Making a Progressive Web App\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app\n\n### Advanced Configuration\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration\n\n### Deployment\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/deployment\n\n### `npm run build` fails to minify\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify\n" }, { "path": "examples/create-react-app/package.json", "content": "{\n \"name\": \"docz-example-create-react-app\",\n \"version\": \"2.0.0-rc.43\",\n \"private\": true,\n \"dependencies\": {\n \"docz\": \"latest\",\n \"react\": \"^16.11.0\",\n \"react-dom\": \"^16.11.0\",\n \"react-scripts\": \"^3.2.0\"\n },\n \"scripts\": {\n \"dev\": \"docz dev\",\n \"docz:build\": \"docz build\",\n \"docz:serve\": \"docz serve\",\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "examples/create-react-app/public/index.html", "content": "\n\n \n \n \n \n \n
\n \n 
\n \n Learn React\n \n \n
\n )\n}\n\nexport default App\n"
},
{
"path": "examples/create-react-app/src/App.test.js",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\n\nit('renders without crashing', () => {\n const div = document.createElement('div')\n ReactDOM.render(\n Edit src/App.js and save to reload.\n
\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.
\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.
\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.
\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.
\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `yarn eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n" }, { "path": "examples/create-react-app-ts/doczrc.js", "content": "export default {\n typescript: true,\n}\n" }, { "path": "examples/create-react-app-ts/package.json", "content": "{\n \"name\": \"create-react-app-ts\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.3.2\",\n \"@testing-library/user-event\": \"^7.1.2\",\n \"@types/jest\": \"^24.0.0\",\n \"@types/node\": \"^12.0.0\",\n \"@types/react\": \"^16.9.0\",\n \"@types/react-dom\": \"^16.9.0\",\n \"docz\": \"^2.2.0\",\n \"react\": \"^16.12.0\",\n \"react-dom\": \"^16.12.0\",\n \"react-scripts\": \"3.3.1\",\n \"typescript\": \"~3.7.2\"\n },\n \"scripts\": {\n \"docz\": \"docz dev --port 1337\",\n \"docz:build\": \"docz build\",\n \"docz:serve\": \"docz serve\",\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "examples/create-react-app-ts/public/index.html", "content": "\n\n \n \n \n \n \n
\n \n \n \n Learn React\n \n \n
\n );\n}\n\nexport default App;\n"
},
{
"path": "examples/create-react-app-ts/src/components/Alert.jsx",
"content": "import React from 'react'\nimport t from 'prop-types'\n\nconst kinds = {\n info: '#5352ED',\n positive: '#2ED573',\n negative: '#FF4757',\n warning: '#FFA502',\n}\n\nexport const Alert = ({ children, kind, ...rest }) => (\n \n Edit src/App.tsx and save to reload.\n
NOT FOUND
\nYou just hit a route that doesn't exist... the sadness.
\n \n)\n\nexport default NotFoundPage\n" }, { "path": "examples/gatsby/src/pages/index.mdx", "content": "---\nname: Home\nroute: /\n---\n\n# Home\n\nDesign 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.\n\nRegardless of the technologies and tools behind them, a successful design system follows these guiding principles:\n\n- **It’s consistent**. The way components are built and managed follows a predictable pattern.\n- **It’s self-contained**. Your design system is treated as a standalone dependency.\n- **It’s reusable**. You’ve built components so they can be reused in many contexts.\n- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.\n- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.\n\n## Consistency\n\nYour 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.\n" }, { "path": "examples/images/.gitignore", "content": ".docz\nnode_modules" }, { "path": "examples/images/README.md", "content": "# Docz with images example\n\n## Using `create-docz-app`\n\n```sh\nnpx create-docz-app docz-app-images --example images\n# or\nyarn create docz-app docz-app-images --example images\n```\n\n## Download manually\n\n```sh\ncurl https://codeload.github.com/doczjs/docz/tar.gz/main | tar -xz --strip=2 docz-main/examples/images\nmv images docz-images-example\ncd docz-images-example\n```\n\n## Setup\n\n```sh\nyarn # npm i\n```\n\n## Run\n\n```sh\nyarn dev # npm run dev\n```\n\n## Build\n\n```sh\nyarn build # npm run build\n```\n\n## Serve built app\n\n```sh\nyarn serve # npm run serve\n```\n" }, { "path": "examples/images/doczrc.js", "content": "export default {\n menu: ['Getting Started', 'Components'],\n}\n" }, { "path": "examples/images/package.json", "content": "{\n \"private\": true,\n \"name\": \"docz-example-images\",\n \"version\": \"2.0.0-rc.41\",\n \"license\": \"MIT\",\n \"files\": [\n \"src/\",\n \"doczrc.js\",\n \"package.json\"\n ],\n \"scripts\": {\n \"dev\": \"docz dev\",\n \"build\": \"docz build\"\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.1.1\",\n \"@emotion/styled\": \"^11.0.0\",\n \"docz\": \"latest\",\n \"prop-types\": \"^15.7.2\",\n \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\"\n }\n}\n" }, { "path": "examples/images/src/index.jsx", "content": "import React from 'react'\n\nexport default function Image() {\n return![](\"/public/tux.png\")
\n}\n"
},
{
"path": "examples/images/src/index.mdx",
"content": "---\nname: Getting Started\nroute: /\n---\n\n# Tux\n\nTux is a penguin character and the official brand character of the Linux kernel.[1] Originally created as an entry to a Linux logo competition, Tux is the most commonly used icon for Linux, although different Linux distributions depict Tux in various styles. The character is used in many other Linux programs and as a general symbol of Linux.\n\nAn image of Tux can be resolved directly in markdown\n\n\n\nIt can also be resolved using explicit relative paths\n\n\n\nImages may also link to external URLs. For example, the following image is downloaded from Wikipedia\n\n\n\nTo link to your images from your components add a `public` directory and store in it your images.\n\nThen, in your code, link to your image (tux.png) by pointing to `/public`, for example : \n\n```jsx\n \n```\n\nYou can also customise the public folder to be anything you want by changing the `public` field in your `doczrc.js` file.\n\nimport Image from './index.jsx'\n\n\n {children}\n
\n)\n\nAlert.propTypes = {\n kind: t.oneOf(['info', 'positive', 'negative', 'warning']),\n}\n\nAlert.defaultProps = {\n kind: 'info',\n}\n"
},
{
"path": "examples/less/src/components/Alert.less",
"content": ".Alert {\n padding: 1rem;\n margin: 1rem;\n border-radius: 0.25rem;\n}\n"
},
{
"path": "examples/less/src/components/Alert.mdx",
"content": "---\nname: Alert\nmenu: Components\n---\n\nimport { Playground, Props } from 'docz'\nimport { Alert } from './Alert'\n\n# Alert\n\n## Properties\n\n\n {children}\n
\n)\n\nAlert.propTypes = {\n kind: t.oneOf(['info', 'positive', 'negative', 'warning']),\n}\n\nAlert.defaultProps = {\n kind: 'info',\n}\n"
},
{
"path": "examples/sass/src/components/Alert.mdx",
"content": "---\nname: Alert\nmenu: Components\n---\n\nimport { Playground, Props } from 'docz'\nimport { Alert } from './Alert'\n\n# Alert\n\n## Properties\n\n\n
\n )\n}\n"
},
{
"path": "examples/shadowed-playground/src/index.mdx",
"content": "---\nname: Getting Started\nroute: /\n---\n\n# Getting Started\n\nDesign 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.\n\nRegardless of the technologies and tools behind them, a successful design system follows these guiding principles:\n\n- **It’s consistent**. The way components are built and managed follows a predictable pattern.\n- **It’s self-contained**. Your design system is treated as a standalone dependency.\n- **It’s reusable**. You’ve built components so they can be reused in many contexts.\n- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.\n- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.\n\n## Consistency\n\nYour 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.\n"
},
{
"path": "examples/styled-components/.gitignore",
"content": ".docz\nnode_modules"
},
{
"path": "examples/styled-components/README.md",
"content": "# Docz Styled Components Example\n\n## Using `create-docz-app`\n\n```sh\nnpx create-docz-app docz-app-styled-docz --example styled-components\n# or\nyarn create docz-app docz-app-styled-docz --example styled-components\n```\n\n## Download manually\n\n```sh\ncurl https://codeload.github.com/doczjs/docz/tar.gz/main | tar -xz --strip=2 docz-main/examples/styled-components\nmv styled-components docz-example-styled-docz\n```\n\n## Setup\n\n```sh\nyarn # npm i\n```\n\n## Run\n\n```sh\nyarn dev # npm run dev\n```\n\n## Build\n\n```sh\nyarn build # npm run build\n```\n\n## Serve built app\n\n```sh\nyarn serve # npm run serve\n```\n\n## Deploy\n\n```sh\nyarn deploy\n```\n\nNote that by default `docz` generates the output site in `.docz/public` to change that add a `dest` field to your `doczrc.js` with the path you want to generate the code in.\n"
},
{
"path": "examples/styled-components/package.json",
"content": "{\n \"private\": true,\n \"name\": \"docz-example-styled-components\",\n \"version\": \"2.0.0-rc.41\",\n \"license\": \"MIT\",\n \"files\": [\n \"src/\",\n \"package.json\"\n ],\n \"scripts\": {\n \"dev\": \"docz dev\",\n \"build\": \"docz build\"\n },\n \"dependencies\": {\n \"docz\": \"next\",\n \"prop-types\": \"^15.7.2\",\n \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\",\n \"styled-components\": \"^4.3.2\"\n }\n}\n"
},
{
"path": "examples/styled-components/src/components/Alert.jsx",
"content": "import React from 'react'\nimport styled from 'styled-components'\nimport t from 'prop-types'\n\nconst kinds = {\n info: '#5352ED',\n positive: '#2ED573',\n negative: '#FF4757',\n warning: '#FFA502',\n}\n\nexport const Alert = styled('div')`\n padding: 15px 20px;\n background: white;\n border-radius: 3px;\n color: white;\n background: ${({ kind = 'info' }) => kinds[kind]};\n`\n\nAlert.propTypes = {\n kind: t.oneOf(['info', 'positive', 'negative', 'warning']),\n}\n\nAlert.defaultProps = {\n kind: 'info',\n}\n"
},
{
"path": "examples/styled-components/src/components/Alert.mdx",
"content": "---\nname: Alert\nmenu: Components\n---\n\nimport { Playground, Props } from 'docz'\nimport { Alert } from './Alert'\n\n# Alert\n\n## Properties\n\n\n {children}\n
\n)\n\nAlert.propTypes = {\n kind: t.oneOf(['info', 'positive', 'negative', 'warning']),\n}\n\nAlert.defaultProps = {\n kind: 'info',\n}\n"
},
{
"path": "examples/stylus/src/components/Alert.mdx",
"content": "---\nname: Alert\nmenu: Components\n---\n\nimport { Playground, Props } from 'docz'\nimport { Alert } from './Alert'\n\n# Alert\n\n## Properties\n\n{children}
\n\nexport default theme()(Theme)\n```\n\n> It's required to \"pass down\" the `children` property inside your theme component in order to render Docz routes properly.\n\nIf you create something like the above example you won't have anything too useful to show.\nTo customize your documentation make sure to check the [gatsby-docz-theme](https://github.com/doczjs/docz/tree/master/core/gatsby-theme-docz/src) source code\nto decide which modules you want to override.\n\n## Default theme configuration\n\nEach theme has its own default `themeConfig` object that allows you to override any part of the default theme found [here](https://github.com/doczjs/docz/blob/master/core/gatsby-theme-docz/src/theme/index.js).\n\nThe `themeConfig` allows you to customize fonts, colors, spaces, styles properties and other project global variables.\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\nimport { theme } from 'docz'\n\nconst Theme = ({ children }) => {children}
\n\nconst themeConfig = {\n colors: {\n primary: 'tomato',\n secondary: 'khaki',\n gray: 'lightslategray',\n },\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\nBy default, Docz will use [this object](https://github.com/doczjs/docz/blob/master/core/gatsby-theme-docz/src/theme/index.js) as the default configuration and merge it with the `themeConfig` setting in the project configuration.\n\nYou can then use the `useConfig` hook to do a lot of things, like use css-in-js theming or retrieve props from your `themeConfig` in a deep rendered component.\n\n```js\n// src/gatsby-theme-docz/index.js\nimport React from 'react'\nimport { theme, useConfig } from 'docz'\nimport { ThemeProvider } from 'theme-ui'\n\nconst Theme = () => {\n const config = useConfig()\n return (\n My theme
\n - \n {menus.map(menu => (\n
- \n {menu.name}\n \n ))}\n
\n {doc.hero &&
\n)\n```\n\nArmed with this knowledge, you can create many variations of your documents based on the data provided in your MDX.\n\n## Examples\n\nTo see an example of a theme, you can check the [source code](https://github.com/doczjs/docz/tree/master/core/gatsby-theme-docz/src) of `gatsby-theme-docz`.\n"
},
{
"path": "examples/with-algolia-search/src/docs/customizing/customizing-webpack-config.mdx",
"content": "---\nname: Customizing Webpack Config\nroute: /docs/customizing-webpack-config\nparent: Documentation\nmenu: Customizing\n---\n\n# Customizing docz's Webpack Configuration\n\nLet's assume we want to configure an alias so that instead of importing files from `../../components/Alert` we import from `@/components/Alert`.\n\nAnd another alias to allow us to replace relative paths like `import A from './src/components/Alert` with an absolute path `import A from 'components/Alert'`\n\nTo configure the webpack config we add a `gatsby-node.js` file at the root of the project and export `onCreateWebpackConfig` like we would normally do in a Gatsby app.\n\nYou can read more about configuring webpack with Gatsby [here](https://www.gatsbyjs.org/docs/add-custom-webpack-config/), see a small example below and a full working example [here](https://github.com/doczjs/docz/tree/master/examples/webpack-alias) : \n\n\n```js\n// gatsby-node.js\nconst path = require('path')\nexports.onCreateWebpackConfig = args => {\n args.actions.setWebpackConfig({\n resolve: {\n // ⚠ Note the '..' in the path because the docz gatsby project lives in the `.docz` directory\n modules: [path.resolve(__dirname, '../src'), 'node_modules'],\n alias: {\n '@': path.resolve(__dirname, '../src/components/'),\n },\n },\n })\n}\n```"
},
{
"path": "examples/with-algolia-search/src/docs/customizing/gatsby-theme.mdx",
"content": "---\nname: Gatsby Theme\nroute: /docs/gatsby-theme\nparent: Documentation\nmenu: Customizing\n---\n\n# Gatsby Theme\n\nIf you want to use Docz in a Gatsby application, you can use `gatsby-theme-docz`.\n\nGatsby themes is one of the coolest features of all time in Gatsby. With the introduction of theming in Gatsby, it's easier than ever to get started building a Gatsby site. Shared functionality, data sourcing, and design can all be prepackaged as a Gatsby Theme that's an NPM install away.\n\nOur theme has all components and algorithms used to render your documentation website, with it we can explore a lot of Gatsby features and put all this things together in order\nto create a really useful documentation website.\nWith `gatsby-theme-docz` you can get the full power of docz in your existing Gatsby app.\n\nIf you're not sure what a Gatsby theme is, please read [the official docs](https://www.gatsbyjs.org/docs/themes/introduction/)\n\n## How to use\n\nFirst, install some packages:\n\n```\nyarn add gatsby gatsby-theme-docz@next docz@next react react-dom\n```\n\nThen set the `gatsby-theme-docz` in the `plugins` option inside your `gatsby-config.js`\n\n```js\n// gatsby-config.js\nmodule.exports = {\n plugins: ['gatsby-theme-docz'],\n}\n```\n\nThen, add some `.mdx` in your project:\n\n```markdown\n---\nname: Hello world\nroute: /\n---\n\n# Hello world\n\nHello, I'm a mdx file!\n```\n\nNow just run gatsby in development mode:\n\n```bash\n$ yarn gatsby develop\n```\n\nIf everything works, you should see something like this:\n\n\n\n## Configuration\n\nSet your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to\nset some defaults for your theme, use `options` in the plugin definition:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n plugins: [\n {\n resolve: 'gatsby-theme-docz',\n options: {\n /* your custom options */\n },\n },\n ],\n}\n```\n\n> We highly recommend that you set your configuration using `doczrc.js` because of live reload that will change in real time your project settings, if you set your configs using the theme definition you will need to reset your dev server in order to see your changes.\n\n## Dark Mode\n\nTo set the dark version as default, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n themeConfig: {\n mode: 'dark',\n },\n}\n```\n\n## Customizing components\n\nComponents shadowing is one of the best things included in the new Gatsby theme feature, with it, it is possible to replace theme files just by creating your own file following a file naming convention.\n\nExample: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?\n\n## Adding your logo\n\nSo, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `\n
\n)\n```\n\n## Theme UI integrated\n\nDocz's code uses [Theme-UI](https://theme-ui.com/) as the default theme system.\n\n[Theme-UI](https://theme-ui.com/) is a library for building consistent, themeable React apps based on constraint-based design principles.\n\nYou can modify the default theme and create your own style by combining these modifications with component shadowing.\n\nCheck our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.\n\nTo create your own theme definition use the `doczrc.js` and set your properties in the `themeConfig` like that:\n\n```js\n// doczrc.js\nexport default {\n themeConfig: {\n colors: {\n header: {\n bg: 'tomato',\n },\n },\n },\n}\n```\n\nOr, to create your own theme, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.\n\n```js\nimport baseTheme from 'gatsby-theme-docz/src/theme'\nimport { merge } from 'lodash/fp'\n\nexport default merge(baseTheme, {\n colors: {\n header: {\n bg: 'tomato',\n },\n },\n})\n```\n\n## Changing code highlight\n\nBoth code highlights shortcodes and the `My custom wrapper
\n {children}\n{/* my coolest home */}
\n}\n\nexport default Home\n```\n\nOr you can have a mdx document inside Docz that has data from Gatsby too:\n\n```markdown\n---\nname: MyDoc\n---\n\nimport { MyComponentWithSomeData } from './my-component-with-data'\n\n\n \n {children}\n \n
\n))\n```\n\n### Properties\n\n- **components:** `ComponentsMap`\n This map is responsible to render components inside your compiled `.mdx`\n\n### Type Definitions\n\n```ts\ninterface ComponentsMap {\n loading?: CT\n layout?: CT
\n All documents parsed by docz\n\n### Typings Definitions\n\n```ts\ninterface Docs {\n id: string\n filepath: string\n link: string | null\n slug: string\n name: string\n route: string\n menu: string | null\n headings: Heading[]\n [key: string]: any\n}\n\nexport function useDocs(): Docs[]\n```\n\n---\n\n## `useMenus`\n\nThis hook will return the menu built by Docz using your documents.\nUse this to quickly get your menus or use `useDocs` if you want the documents ordered in the order of your project configuration.\n\n```js\nimport { useMenus } from 'docz'\n\nconst App = () => {\n const menus = useMenus()\n return /* ... */\n}\n```\n\n### Params\n\n- **options**: `Object`\n - `query: String` Use `query` to filter menu results. The query is matched against the menu headers, not page content.\n\n### Return\n\n- **menus:** `MenuItem[]`\n\n### Type Definitions\n\n```ts\nexport interface MenuItem {\n id: string\n name: string\n route?: string\n href?: string\n menu?: MenuItem[]\n order?: number\n parent?: string\n}\n\nexport function useMenus(opts: UseMenuOpts): MenuItem[]\n```\n\n---\n\n## `useConfig`\n\nRetrieve the project config object passed on your project configuration.\nBy default, Docz merges your `themeConfig` object with the default theme config of each theme.\n\n```js\nimport React from 'react'\nimport { useConfig } from 'docz'\n\nconst MyDeepComponentInsideMyTheme = () => {\n const config = useConfig()\n return /* ... */\n}\n```\n\n### Properties\n\n`none`\n\n### Return\n\n- **config:** `Config`\n\n### Type Definitions\n\n```ts\nexport type ThemeConfig = Record
\n
\n)\n\nconst themeConfig = {\n /* ... */\n}\n\nexport default theme(themeConfig)(Theme)\n```\n\n### Type Definitions\n\n```ts\nimport { ComponentType, ReactNode } from 'react'\n\ninterface ThemeConfig {\n [key: string]: any\n}\n\nfunction theme(config: ThemeConfig): (Component: ComponentType) => ReactNode\n```\n"
},
{
"path": "examples/with-algolia-search/src/docs/references/creating-plugins.mdx",
"content": "---\nname: Creating Plugins\nroute: /docs/creating-plugins\nparent: Documentation\nmenu: References\n---\n\n# Creating Plugins\n\nPlugins give you the ability to modify Docz processes, default configurations and create hooks for build and render. This is a perfect place to integrate Docz with other tools.\n\nTo create a plugin you just need to use the `createPlugin` method from [docz-core](https://github.com/pedronauck/docz/tree/master/packages/docz-core)\n\n```js\nimport { createPlugin } from 'docz-core'\n\nconst myPlugin = () => createPlugin({\n setConfig: (config) => /* ... */,\n onCreateBabelConfig: (args) => /* ... */,\n onCreateDevServer: (args) => /* ... */,\n onCreateWebpackConfig: (args) => /* ... */,\n modifyFiles: (files, args) => /* ... */,\n modifyEntry: (args) => /* ... */,\n onPreBuild: () => /* ... */,\n onPostBuild: () => /* ... */,\n})\n```\n\n## `setConfig`\n\nUse to modify or create custom project configurations.\n\n#### Params\n\n- **config:** Default [configuration object](http://localhost:3000/docs/project-configuration)\n\n#### Return\n\n- `Config`\n\n---\n\n## `onCreateWebpackConfig`\n\nLet plugins extend/mutate the site’s webpack configuration.\n\nSee also the documentation for [setWebpackConfig]().\n\n#### Params\n\n`stage {string}`\nThe current build stage. One of ‘develop’, ‘develop-html’, ‘build-javascript’, or ‘build-html’\n\n`getConfig {function}`\nReturns the current webpack config\n\n`rules {object}`\nA set of preconfigured webpack config rules\n\n`loaders {object}`\nA set of preconfigured webpack config loaders\n\n`plugins {object}`\nA set of preconfigured webpack config plugins\n\n`actions {object}`\n\n#### Example\n\n```js\nexports.onCreateWebpackConfig = ({\n stage, getConfig, rules, loaders, actions\n}) => {\n actions.setWebpackConfig({\n module: {\n rules: [\n {\n test: 'my-css',\n use: [loaders.style(), loaders.css()]\n },\n ],\n },\n });\n}\n```\n\n---\n\n## `onCreateBabelConfig`\n\nUse to modify babelrc configuration\n\n#### Params\n\n`stage {string}`\nThe current build stage. One of ‘develop’, ‘develop-html’, ‘build-javascript’, or ‘build-html’\n\n`getConfig {function}`\nReturns the current webpack config\n\n`rules {object}`\nA set of preconfigured webpack config rules\n\n`loaders {object}`\nA set of preconfigured webpack config loaders\n\n`plugins {object}`\nA set of preconfigured webpack config plugins\n\n`actions {object}`\n\n#### Example\n\n```js\nexports.onCreateBabelConfig = ({\n stage, getConfig, rules, loaders, actions\n}) => {\n actions.setBabelPlugin({\n name: `@emotion/babel-plugin`,\n options: {\n sourceMap: true,\n },\n })\n}\n```\n\n---\n\n## `modifyFiles`\n\nUse to modify mdx files before parsing\n\n#### Params\n\n- **files:** Files parsed by Docz\n- **args:** The Docz config object merged with argv\n\n#### Return\n\n- `string[]`\n\n#### Types definitions\n\n```ts\nexport type ModifyFiles = (files: string[], args: Config) => string[]\n```\n\n---\n\n## `modifyEntry`\n\nUse to modify files entry after created\n\n#### Params\n\n- **entry:** files entry by Docz\n- **args:** The Docz config object merged with argv\n\n#### Return\n\n- `Entry`\n\n#### Types definitions\n\n```ts\nexport type ModifyEntry = (entry: Entry, args: Config) => Entry\n```\n\n---\n\n## `onCreateDevServer`\n\nRun when gatsby develop server is started, its useful to add proxy and middleware to the dev server app\n\n#### Params\n\n- `app {Express}`\nThe Express app used to run the dev server\n\n#### Example\n\n```js\nexports.onCreateDevServer = ({ app }) => {\n app.get('/hello', function (req, res) {\n res.send('hello world')\n })\n}\n```\n\n---\n\n## `onPreBuild`\n\nMethod triggered before the build process\n\n#### Params\n\n- **config:** Default bundler configuration object\n\n#### Return\n\n- `void`\n\n#### Type definitions\n\n```ts\ntype OnPreBuild\n
\n)\n```\n\n## CSS preprocessors managed by gatsby\n\nCSS preprocessors and modules were handled by [`docz-plugin-css`](https://github.com/doczjs/docz-plugin-css) which hooked into the bundler config to add different loader support via webpack.\n\nWith the change to gatsby, css preprocessors like `sass` can be handled by gatsby via [Plugins](https://www.gatsbyjs.org/plugins/)\n\nThese plugins are added by adding a `gatsby-config.js` in your project root or modifying an existing one. For example if you want to add support for `sass` you would do the following:\n\n1. Install [`node-sass`](https://github.com/sass/node-sass) and [`gatsby-plugin-sass`](https://www.gatsbyjs.org/packages/gatsby-plugin-sass/)\n```bash\n# npm\nnpm install --save node-sass gatsby-plugin-sass\n\n# yarn\nyarn add node-sass gatsby-plugin-sass\n```\n\n2. Add the plugin to your `gatsby-config.js`\n```js\n//gatsby-config.js\nmodule.exports = {\n plugins: ['gatsby-plugin-sass']\n}\n```\n\n## Examples \n\nMake sure to check out [docz's `examples` directory](https://github.com/doczjs/docz/tree/master/examples) for the full list of supported examples.\n"
},
{
"path": "examples/with-algolia-search/src/docs/references/project-configuration.mdx",
"content": "---\nname: Project Configuration\nroute: /docs/project-configuration\nparent: Documentation\nmenu: References\n---\n\n# Project Configuration\n\nThe project configuration is used when you need to define some specific customizations on your project. Like use plugins, chose themes, set project title, and other things.\n\nTo customize your project configuration you can use `doczrc.js` following this reference.\n\n## Env file\n\nYou can also create a `.env` file or use an existing `.env` file. You can then define customizations via `DOCZ_My custom wrapper
\n {children}\n\n \n \n
\n
\n)\n"
},
{
"path": "examples/with-algolia-search/src/gatsby-theme-docz/components/Header/Search/index.js",
"content": "import React, { useState, useEffect, createRef } from 'react'\nimport {\n InstantSearch,\n Index,\n Hits,\n connectStateResults,\n} from 'react-instantsearch-dom'\nimport algoliasearch from 'algoliasearch/lite'\nimport * as styles from 'gatsby-theme-docz/src/components/NavSearch/styles'\nimport { Root, HitsWrapper, PoweredBy } from './primitives'\nimport Input from './Input'\nimport * as hitComps from './hitComps'\n\nconst Results = connectStateResults(\n ({ searchState: state, searchResults: res, children }) =>\n res && res.nbHits > 0 ? children : `No results for '${state.query}'`\n)\n\nconst Stats = connectStateResults(\n ({ searchResults: res }) =>\n res && res.nbHits > 0 && `${res.nbHits} result${res.nbHits > 1 ? `s` : ``}`\n)\n\nconst useClickOutside = (ref, handler, events) => {\n if (!events) events = [`mousedown`, `touchstart`]\n const detectClickOutside = event =>\n !ref.current.contains(event.target) && handler()\n useEffect(() => {\n for (const event of events)\n document.addEventListener(event, detectClickOutside)\n return () => {\n for (const event of events)\n document.removeEventListener(event, detectClickOutside)\n }\n })\n}\nconst indices = [\n {\n name: process.env.GATSBY_ALGOLIA_INDEX_NAME,\n title: `docz algolia example`,\n hitComp: `PageHit`,\n },\n]\nexport const NavSearch = ({ collapse, hitsAsGrid }) => {\n const ref = createRef()\n const [query, setQuery] = useState(``)\n const [focus, setFocus] = useState(false)\n const searchClient = algoliasearch(\n process.env.GATSBY_ALGOLIA_APP_ID,\n process.env.GATSBY_ALGOLIA_SEARCH_KEY\n )\n useClickOutside(ref, () => setFocus(false))\n return (\n \n
\n \n setFocus(true)} {...{ collapse, focus }} />\n 0 && focus} asGrid={hitsAsGrid}>\n {indices.map(({ name, title, hitComp }) => (\n \n \n \n \n setFocus(false))} />\n \n \n ))}\n \n
\n \n )\n}\nexport default NavSearch\n"
},
{
"path": "examples/with-algolia-search/src/gatsby-theme-docz/components/Header/Search/primitives.js",
"content": "import React from 'react'\nimport styled, { css } from 'styled-components'\nimport { Search } from 'gatsby-theme-docz/src/components/Icons'\nimport { Algolia } from 'styled-icons/fa-brands/Algolia'\n\nexport const Root = styled.div`\n position: relative;\n display: grid;\n grid-gap: 1em;\n`\n\nexport const SearchIcon = styled(Search)`\n width: 1em;\n pointer-events: none;\n color: #2d3747;\n`\n\nconst focus = css`\n background: white;\n color: ${props => props.theme.darkBlue};\n cursor: text;\n width: 5em;\n + ${SearchIcon} {\n color: ${props => props.theme.darkBlue};\n margin: 0.3em;\n }\n`\n\nconst collapse = css`\n width: 0;\n cursor: pointer;\n color: ${props => props.theme.lightBlue};\n + ${SearchIcon} {\n color: white;\n }\n ${props => props.focus && focus}\n margin-left: ${props => (props.focus ? `-1.6em` : `-1em`)};\n padding-left: ${props => (props.focus ? `1.6em` : `1em`)};\n ::placeholder {\n color: ${props => props.theme.gray};\n }\n`\n\nconst expand = css`\n background: ${props => props.theme.veryLightGray};\n width: 20em;\n margin-left: -1.6em;\n padding-left: 1.6em;\n + ${SearchIcon} {\n margin: 0.3em;\n }\n`\n\nexport const Input = styled.input`\n outline: none;\n border: none;\n font-size: 1em;\n background: transparent;\n transition: ${props => props.theme.shortTrans};\n border-radius: ${props => props.theme.smallBorderRadius};\n ${props => (props.collapse ? collapse : expand)};\n`\n\nexport const Form = styled.form`\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n`\n\nexport const HitsWrapper = styled.div`\n display: ${props => (props.show ? `grid` : `none`)};\n max-height: 80vh;\n overflow: scroll;\n z-index: 2;\n -webkit-overflow-scrolling: touch;\n position: absolute;\n top: calc(100% + 0.5em);\n width: 80vw;\n max-width: 20em;\n box-shadow: 0 0 5px 0;\n padding: 0.7em 1em 0.4em;\n background: white;\n border-radius: ${props => props.theme.smallBorderRadius};\n > * + * {\n padding-top: 1em !important;\n border-top: 2px solid ${props => props.theme.darkGray};\n }\n li + li {\n margin-top: 0.7em;\n padding-top: 0.7em;\n border-top: 1px solid ${props => props.theme.lightGray};\n }\n * {\n margin-top: 0;\n padding: 0;\n }\n ul {\n list-style: none;\n }\n mark {\n color: ${props => props.theme.lightBlue};\n background: ${props => props.theme.darkBlue};\n }\n header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.3em;\n h3 {\n color: white;\n background: ${props => props.theme.gray};\n padding: 0.1em 0.4em;\n border-radius: ${props => props.theme.smallBorderRadius};\n }\n }\n h3 {\n margin: 0 0 0.5em;\n }\n h4 {\n margin-bottom: 0.3em;\n }\n`\n\nconst PoweredBySpan = styled.span`\n font-size: 0.6em;\n text-align: end;\n padding: 0;\n`\n\nexport const PoweredBy = () => (\n {title}
\n\n \n \n \n
\n )\n}\n"
},
{
"path": "examples/with-algolia-search/src/gatsby-theme-docz/wrapper.js",
"content": "import React from 'react'\nimport { Helmet } from 'react-helmet-async'\n\nconst Wrapper = ({ children, doc }) => {\n return (\n <>\n \n \n {repository && (\n \n \n \n )}\n \n {showMarkdownEditButton && edit && doc.link && (\n \n Edit page \n \n )}\n
\n \n
\n)\n\nexport default NotFoundPage\n"
},
{
"path": "examples/with-custom-docz-theme/.gitignore",
"content": ".docz\nnode_modules"
},
{
"path": "examples/with-custom-docz-theme/README.md",
"content": "# Using and Creating a Custom Docz Theme example\n\n## Creating a docz theme\n\nFor this example we want to write a theme that wraps every page with a div that has padding and a pink background-color. You can make a theme that does as much or as little as you wish.\n\nWe start by creating the directory `gatsby-theme-docz-pink`.\n\nInside we're going to shadow gatsby-theme-docz. To do that we create a folder : `src/gatsby-theme-docz`, the component in particular we want to shadow is located in src/gatsby-theme-docz/wrapper.js.\n\n```jsx\nimport React from 'react'\nimport OriginalWrapper from 'gatsby-theme-docz/src/wrapper'\n\nconst Wrapper = ({ children, doc }) => {\n return (\n Oups 🙈
\nYou just hit a route that doesn‘t exist... 👀
\n \n\n {children} \n
\n )\n}\n\nexport default Wrapper\n```\n\nThe component doesn't do much, it imports the original wrapper and wraps it in a styled div.\n\nNext, we add a `package.json` to `gatsby-theme-docz-pink` :\n\n```json\n{\n \"name\": \"gatsby-theme-docz-pink\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\"\n}\n```\n\nAnd since we're saying that main is `index.js` we create an empty file called index.js at the root of the package in order for the bundler to know the package exists\n\n```js\n// noop\n```\n\nAnd that's it our theme is ready to be distributed and consumed.\n\nYou can publish it to npm or host it in a git repo and install it with your favorite package manager\n\n## Consuming a docz theme\n\nIf the theme is published to npm we start by adding the theme as a project dependency\n\n```\n yarn add gatsby-theme-docz-pink\n```\n\n> In this example we'll copy `gatsby-theme-docz-pink` to `node_modules/gatsby-theme-docz-pink` : `cp -r gatsby-theme-docz-pink/ node_modules/gatsby-theme-docz-pink`\n\nThen create a gatsby-config.js file at the root of your project and in it we declare that we want to use `gatsby-theme-docz-pink` and we tell webpack to compile it because it uses JSX which is not valid JS :\n\n```js\n// gatsby-config.js\n\nmodule.exports = {\n plugins: [\n 'gatsby-theme-docz-pink',\n {\n resolve: 'gatsby-plugin-compile-es6-packages',\n options: {\n modules: ['gatsby-theme-docz-pink'],\n },\n },\n ],\n}\n```\n\nIf you run `yarn docz dev` you should see the theme take effect.\n\n## Using `create-docz-app`\n\n```sh\nnpx create-docz-app docz-app-with-custom-docz-theme\n# or\nyarn create docz-app docz-app-with-custom-docz-theme\n```\n\n## Download manually\n\n```sh\ncurl https://codeload.github.com/doczjs/docz/tar.gz/main | tar -xz --strip=2 docz-main/examples/with-custom-docz-theme\nmv with-custom-docz-theme docz-with-custom-docz-theme-example\ncd docz-with-custom-docz-theme-example\n```\n\n## Setup\n\n```sh\nyarn # npm i\n```\n\n## Run\n\n```sh\nyarn dev # npm run dev\n```\n\n## Build\n\n```sh\nyarn build # npm run build\n```\n\n## Serve built app\n\n```sh\nyarn serve # npm run serve\n```\n"
},
{
"path": "examples/with-custom-docz-theme/doczrc.js",
"content": "export default {\n menu: ['Getting Started', 'Components'],\n}\n"
},
{
"path": "examples/with-custom-docz-theme/gatsby-config.js",
"content": "module.exports = {\n plugins: [\n 'gatsby-theme-docz-pink',\n {\n resolve: 'gatsby-plugin-compile-es6-packages',\n options: {\n modules: ['gatsby-theme-docz-pink'],\n },\n },\n ],\n}\n"
},
{
"path": "examples/with-custom-docz-theme/gatsby-theme-docz-pink/index.js",
"content": "// noop\n"
},
{
"path": "examples/with-custom-docz-theme/gatsby-theme-docz-pink/package.json",
"content": "{\n \"name\": \"gatsby-theme-docz-title\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\"\n}\n"
},
{
"path": "examples/with-custom-docz-theme/gatsby-theme-docz-pink/src/gatsby-theme-docz/wrapper.js",
"content": "import React from 'react'\nimport OriginalWrapper from 'gatsby-theme-docz/src/wrapper'\n\nconst Wrapper = ({ children, doc }) => {\n return (\n \n {children} \n
\n )\n}\n\nexport default Wrapper\n"
},
{
"path": "examples/with-custom-docz-theme/package.json",
"content": "{\n \"name\": \"docz-example-with-custom-docz-theme\",\n \"private\": true,\n \"version\": \"2.0.0\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"install:theme\": \"cp -r gatsby-theme-docz-pink/ node_modules/gatsby-theme-docz-pink\",\n \"dev\": \"docz dev\",\n \"build\": \"docz build\",\n \"serve\": \"docz serve\"\n },\n \"dependencies\": {\n \"docz\": \"latest\",\n \"prop-types\": \"^15.7.2\",\n \"react\": \"^16.11.0\",\n \"react-dom\": \"^16.11.0\"\n }\n}\n"
},
{
"path": "examples/with-custom-docz-theme/src/components/Alert.jsx",
"content": "import React from 'react'\nimport t from 'prop-types'\n\nconst kinds = {\n info: '#5352ED',\n positive: '#2ED573',\n negative: '#FF4757',\n warning: '#FFA502',\n}\n\nexport const Alert = ({ children, kind, ...rest }) => (\n MyClass.annotated : {MyClass.annotated}
\n\n# Getting Started\n\nDesign 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.\n\nRegardless of the technologies and tools behind them, a successful design system follows these guiding principles:\n\n- **It’s consistent**. The way components are built and managed follows a predictable pattern.\n- **It’s self-contained**. Your design system is treated as a standalone dependency.\n- **It’s reusable**. You’ve built components so they can be reused in many contexts.\n- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.\n- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.\n\n## Consistency\n\nYour 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.\n" }, { "path": "examples/with-env-variables/.gitignore", "content": ".docz\nnode_modules" }, { "path": "examples/with-env-variables/README.md", "content": "# Docz With Env Variables Example\n\n## Using `create-docz-app`\n\n```sh\nnpx create-docz-app docz-app-with-env-variables\n# or\nyarn create docz-app docz-app-with-env-variables\n```\n\n## Download manually\n\n```sh\ncurl https://codeload.github.com/doczjs/docz/tar.gz/main | tar -xz --strip=2 docz-main/examples/with-env-variables\nmv with-env-variables docz-with-env-variables-example\ncd docz-with-env-variables-example\n```\n\n## Notes\n\nEnvironment variables are defined in `gatsby-node.js` by changing the webpack config (process.env.FOO, process.env.PROD) or in .env.* and then imported using `dotenv` in `gatsby-config.js` (process.env.GATSBY_API_URL).\n\n## Setup\n\n```sh\nyarn # npm i\n```\n\n## Run\n\n```sh\nyarn dev # npm run dev\n```\n\n## Build\n\n```sh\nyarn build # npm run build\n```\n\n## Serve built app\n\n```sh\nyarn serve # npm run serve\n```\n" }, { "path": "examples/with-env-variables/doczrc.js", "content": "export default {\n menu: ['Getting Started', 'Components'],\n}\n" }, { "path": "examples/with-env-variables/gatsby-config.js", "content": "require('dotenv').config({\n path: `.env.development`,\n})\n" }, { "path": "examples/with-env-variables/gatsby-node.js", "content": "exports.onCreateWebpackConfig = ({ plugins, actions }) => {\n const { setWebpackConfig } = actions\n\n setWebpackConfig({\n plugins: [\n plugins.define({\n 'process.env.FOO': JSON.stringify('BAR'),\n 'process.env.PROD': JSON.stringify(true),\n }),\n ],\n })\n}\n" }, { "path": "examples/with-env-variables/package.json", "content": "{\n \"name\": \"docz-example-basic\",\n \"private\": true,\n \"version\": \"2.0.0-rc.41\",\n \"license\": \"MIT\",\n \"files\": [\n \"src/\",\n \"doczrc.js\",\n \"package.json\"\n ],\n \"scripts\": {\n \"dev\": \"docz dev\",\n \"build\": \"docz build\",\n \"serve\": \"docz serve\"\n },\n \"dependencies\": {\n \"docz\": \"latest\",\n \"prop-types\": \"^15.7.2\",\n \"react\": \"^16.11.0\",\n \"react-dom\": \"^16.11.0\"\n }\n}\n" }, { "path": "examples/with-env-variables/src/components/Alert.jsx", "content": "import React from 'react'\nimport t from 'prop-types'\n\nconst kinds = {\n info: '#5352ED',\n positive: '#2ED573',\n negative: '#FF4757',\n warning: '#FFA502',\n}\n\nexport const Alert = ({ children, kind, ...rest }) => (\n{process.env.PROD ? 'PROD' : 'NOT PROD'}
\n{process.env.FOO}
\n{process.env.GATSBY_API_URL}
\n\n {children}\n \n)\n\nAlert.propTypes = {\n /**\n * The kind prop is used to set the alert's background color\n */\n kind: t.oneOf(['info', 'positive', 'negative', 'warning']),\n}\n\nAlert.defaultProps = {\n kind: 'info',\n}\n" }, { "path": "examples/with-env-variables/src/components/Alert.mdx", "content": "---\nname: Alert\nmenu: Components\n---\n\nimport { Playground, Props } from 'docz'\nimport { Alert } from './Alert'\n\n# Alert\n\n## Properties\n\nMyClass.annotated : {MyClass.annotated}
\n\n# Getting Started\n\nDesign 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.\n\nRegardless of the technologies and tools behind them, a successful design system follows these guiding principles:\n\n- **It’s consistent**. The way components are built and managed follows a predictable pattern.\n- **It’s self-contained**. Your design system is treated as a standalone dependency.\n- **It’s reusable**. You’ve built components so they can be reused in many contexts.\n- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.\n- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.\n\n## Consistency\n\nYour 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.\n" }, { "path": "examples/with-typescript-decorators/src/index.ts", "content": "@annotation\nclass MyClass {\n static annotated?: string\n}\n\nfunction annotation(target: typeof MyClass) {\n target.annotated = \"yes it's annotated\"\n}\n\nexport default MyClass\n" }, { "path": "examples/with-typescript-decorators/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"experimentalDecorators\": true,\n \"target\": \"es2015\",\n \"moduleResolution\": \"node\",\n \"strict\": true,\n \"resolveJsonModule\": true,\n \"esModuleInterop\": true,\n \"skipLibCheck\": false,\n \"noEmit\": true,\n \"jsx\": \"react\"\n }\n}\n" }, { "path": "examples/wrapped-playground/.gitignore", "content": ".docz\nnode_modules" }, { "path": "examples/wrapped-playground/README.md", "content": "# Wrapped Playground Docz example\n\n## Using `create-docz-app`\n\n```sh\nnpx create-docz-app docz-app-wrapped-playground\n# or\nyarn create docz-app docz-app-wrapped-playground\n```\n\n## Download manually\n\n```sh\ncurl https://codeload.github.com/doczjs/docz/tar.gz/main | tar -xz --strip=2 docz-main/examples/wrapped-playground\nmv wrapped-playground docz-wrapped-playground-example\ncd docz-wrapped-playground-example\n```\n\n## Setup\n\n```sh\nyarn # npm i\n```\n\n## Run\n\n```sh\nyarn dev # npm run dev\n```\n\n## Build\n\n```sh\nyarn build # npm run build\n```\n\n## Serve built app\n\n```sh\nyarn serve # npm run serve\n```\n" }, { "path": "examples/wrapped-playground/doczrc.js", "content": "export default {\n menu: ['Getting Started', 'Components'],\n}\n" }, { "path": "examples/wrapped-playground/package.json", "content": "{\n \"name\": \"docz-example-wrapped-playground\",\n \"private\": true,\n \"version\": \"2.0.0-rc.41\",\n \"license\": \"MIT\",\n \"files\": [\n \"src/\",\n \"doczrc.js\",\n \"package.json\"\n ],\n \"scripts\": {\n \"dev\": \"docz dev\",\n \"build\": \"docz build\",\n \"serve\": \"docz serve\"\n },\n \"dependencies\": {\n \"docz\": \"latest\",\n \"prop-types\": \"^15.7.2\",\n \"react\": \"^16.11.0\",\n \"react-dom\": \"^16.11.0\"\n }\n}\n" }, { "path": "examples/wrapped-playground/src/Playground.jsx", "content": "import React from 'react'\nimport { Playground } from 'docz'\n\nexport default props => {\n return (\n\n
\n )\n}\n"
},
{
"path": "examples/wrapped-playground/src/components/Alert.jsx",
"content": "import React from 'react'\nimport t from 'prop-types'\n\nconst kinds = {\n info: '#5352ED',\n positive: '#2ED573',\n negative: '#FF4757',\n warning: '#FFA502',\n}\n\nexport const Alert = ({ children, kind, ...rest }) => (\n