✍ It has never been so easy to document your things!

Overview

Docz makes it easy to write and publish beautiful interactive documentation for your code.

Create MDX files showcasing your code and Docz turns them into a live-reloading, production-ready site.

docz example

Table of Contents

Why ?

Documenting code is one of the most important and time-heavy processes when developing software.

A lot of time is spent on building and maintaining custom documentation sites.

Docz enables you to quickly create live-reloading, seo-friendly, production-ready documentation sites with MDX and customize the look, feel and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing.

Start a New Project

Use create-docz-app to quickly get started :

npx create-docz-app my-docz-app
# or
yarn create docz-app my-docz-app --example typescript

Add Docz to an Existing Project

Start by adding docz as a dependency :

$ yarn add docz # react react-dom

# or

$ npm install docz # react react-dom

Note: react and react-dom will not be installed automatically. You'll have to install them yourself.

Then, add .mdx files anywhere in your project:

---
name: Button
route: /
---

import { Playground, Props } from 'docz'
import Button from './Button'

# Button

<Props of={Button} />

## Basic usage

<Playground>
  <Button type="submit">Click me</Button>
  <Button>No, click me</Button>
</Playground>

And a Button component Button.jsx:

import React from 'react'
import t from 'prop-types'

const Button = ({ children, type }) => <button type={type}>{children}</button>

Button.propTypes = {
  /**
   * This is a description for this prop.
   * Button type.
   */
  type: t.oneOf(['button', 'submit', 'reset']),
}
Button.defaultProps = {
  type: 'button',
}
export default Button

Finally, run:

yarn docz dev

This will start a local development server and open your documentation site in the browser.

Build

yarn docz build will generate a static site for your site in .docz/dist/.

You can try it out with yarn docz serve or by serving the generated site with your favorite static file server (e.g. npx serve .docz/dist).

You can have yarn docz build emit to a different directory by providing a path to the dest field in your doczrc.js or from the command line : yarn docz build --dest docs-site-directory.

Deploy

The output of docz consists of static assets only. This allows you to deploy your generated docz site with any static site hosting provider you'd like.

Start by building your site with yarn docz build, if you haven't provided a dest flag to your config then you will find your generated files in .docz/dist to copy to the server.

Examples

You can check the complete list of docz examples here.

More info on docz.site

Used by

  • Welcome UI : Customizable design system with react • styled-components • styled-system and reakit.
  • React Hooks Testing Library : 🐏 Simple and complete React hooks testing utilities that encourage good testing practices.
  • Mobx React : mobx-react documentation site.
  • React Google Charts : A thin, typed, React wrapper over Google Charts Visualization and Charts API.
  • Entur : Entur operates the national registry for all public transport in Norway.
  • FAB Specification : 💎 FABs are a compile target for frontend applications.
  • @umijs/hooks: React Hooks Library.
  • React Yandex Maps: Yandex Maps API bindings for React.
  • Components-extra: Customizable react component blocks built with material-ui and styled-components.
  • Add your site

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Contributing

All kinds of contributions are very welcome and appreciated !

If you want to contribute time to docz then here's a list of suggestions to get you started :

  1. Star the project.
  2. Help people in the issues by sharing your knowledge and experience.
  3. Find and report issues.
  4. Submit PRs to help solve issues or add features.
  5. Influence the future of docz with feature requests.

If you're looking for a place to start make sure to check issues tagged with :

Good First Issue

And make sure to read the Contributing Guide before making a pull request.

You can also contribute money to help secure docz's future.

Open Collective

Comments
  • Props components not working since 1.0.0-rc.8

    Props components not working since 1.0.0-rc.8

    Bug Report

    The Props components don't render props since rc8 (working in rc7).

    There is our folders structure:

    📂 src
    ↳ 📂 docs (our documentation with MDX files)
    ↳ 📂 saagie-ui (our React components)
    📄 doczrc.js
    
    // doczrc.js
    export default {
      title: 'Saagie Design System',
      description: 'Documentation from the Saagie Design Team',
    
      src: './src',
      public: './src/docs/public',
      files: '**/*.mdx',
      ignore: ['docs-versions'],
      wrapper: 'src/docs/Wrapper',
      codeSandbox: false,
    }
    

    No idea why, we investigate on it. Any idea?

    v1 stale 
    opened by ivan-dalmet 83
  • Projects using docz 🙌🏻

    Projects using docz 🙌🏻

    Question

    Hey guys, I'm really impressed with the number of people asking me about how use docz and this gave me an idea... I'm thinking about creating a section on docz.site listing all project that is using Docz as documentation tools, please give me some links 🙏

    What do you thinking about that? 😍

    help wanted stale 
    opened by pedronauck 68
  • Attempting to use the Props builtin component. It simply just never works.

    Attempting to use the Props builtin component. It simply just never works.

    Bug Report

    Describe the bug

    Attempting to use the Props builtin component. It simple just never works. There are no errors.

    To Reproduce import Props from docz ( import { Playground, Props } from "docz";

    Expected behavior

    Should render a <Props of={MyComponent}/> table.

    Right now it just never renders; and there are no errors.

    Environment

    • OS: OSX 10.14.6 (18G87)
    • Node: 12.4.0
    user help request v2 pending-user-response add to faq 
    opened by robjac 43
  • New install fails with error: Unable to find plugin

    New install fails with error: Unable to find plugin "gatsby-theme-docz".

    Bug Report

    Describe the bug

    New install fails with error: Unable to find plugin "gatsby-theme-docz".

    A clear and concise description of what the bug is.

    I am adding docz to an existing project yarn add [email protected] -D I then add an mdx file and run yarn docz dev and it produces the error message:

    UNHANDLED REJECTION Unable to find plugin "gatsby-theme-docz". Perhaps you need to install its package?

    Error: Unable to find plugin "gatsby-theme-docz". Perhaps you need to install its package?

    λ yarn docz dev
    yarn run v1.13.0
    $ C:\Users\riha\Documents\webui\node_modules\.bin\docz dev
    info No lockfile found.
    [1/4] Resolving packages...
    warning @types/[email protected]: This is a stub types definition. query-string provides its own type definitions, so you do not need this installed.
    error Package "check-line-coverage" refers to a non-existing file '"C:\\Users\\riha\\Documents\\webui\\.docz\\tools\\check-line-coverage"'.
    info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
    √ Dependencies checked!
    
    Building app
    $ gatsby develop --port 3001
    success open and validate gatsby-configs - 0.139 s
    
     ERROR
    
    UNHANDLED REJECTION Unable to find plugin "gatsby-theme-docz". Perhaps you need to install its package?
    
    
    
      Error: Unable to find plugin "gatsby-theme-docz". Perhaps you need to install its package?
    
      - load.js:109 resolvePlugin
        [webui]/[gatsby]/dist/bootstrap/load-plugins/load.js:109:11
    
      - load.js:152 processPlugin
        [webui]/[gatsby]/dist/bootstrap/load-plugins/load.js:152:20
    
      - load.js:171 config.plugins.forEach.plugin
        [webui]/[gatsby]/dist/bootstrap/load-plugins/load.js:171:20
    
      - Array.forEach
    
      - load.js:170 module.exports
        [webui]/[gatsby]/dist/bootstrap/load-plugins/load.js:170:20
    
      - index.js:58 module.exports
        [webui]/[gatsby]/dist/bootstrap/load-plugins/index.js:58:19
    
      - index.js:138 module.exports
        [webui]/[gatsby]/dist/bootstrap/index.js:138:34
    
    
    ⠋ load plugins
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    
    

    In order to allow us to quickly reproduce you issue please include a link to a reproduction repository.

    I cant do that as its for a work project...

    Expected behavior

    That it loads and works!

    A clear and concise description of what you expected to happen..

    Environment

    • OS: [Windows 10]
    • Node/npm version: [v10.16.3]

    Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

    bug v2 
    opened by molebox 40
  • v1.0.0-rc.* Compiled with errors: Module parse failed: Unexpected token

    v1.0.0-rc.* Compiled with errors: Module parse failed: Unexpected token

    Bug Report

    Describe the bug

    When I try to run docz dev I get multiple errors regarding an appropriate loader

    ✖ Docz
      Compiled with some errors in 29.12s
    
    
    
     ERROR  Failed to compile with 3 errors              12:00:39 PM
    
     error  in ./node_modules/docz/dist/index.esm.js
    
    Module parse failed: Unexpected token (15:38)
    You may need an appropriate loader to handle this file type.
    | import { MDXProvider } from '@mdx-js/tag';
    |
    > const BasePlayground = loadable(() => import('./chunk.esm2.js'));
    | const Playground = props => typeof window !== 'undefined' ? (createElement(Suspense, { fallback: null },
    |     createElement(BasePlayground, Object.assign({}, props)))) : null;
    
     @ ./.docz/app/root.jsx 9:0-59 17:2-15 20:19-23 27:25-31
     @ ./.docz/app/index.jsx
     @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx
    
     error  in ./node_modules/docz-theme-default/dist/index.esm.js
    
    Module parse failed: Unexpected token (245:30)
    You may need an appropriate loader to handle this file type.
    | `;
    |
    > const CodeMirror = lazy(() => import('./chunk.esm2.js'));
    | const getLanguage = (children) => {
    |     const defaultLanguage = 'jsx';
    
     @ ./.docz/app/root.jsx 11:0-39 18:29-34
     @ ./.docz/app/index.jsx
     @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx
    
     error  in ./.docz/app/imports.js
    
    Module parse failed: Unexpected token (8:11)
    You may need an appropriate loader to handle this file type.
    | export var imports = {
    |   'src/index.mdx': function srcIndexMdx() {
    >     return import(
    |     /* webpackPrefetch: true, webpackChunkName: "src-index" */
    |     'src/index.mdx');
    
     @ ./.docz/app/root.jsx 12:0-36 28:13-20
     @ ./.docz/app/index.jsx
     @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx
    

    Environment

    Additional context/Screenshots

    Screenshot 2019-03-22 at 12 03 25

    opened by davidtaboas 35
  • WebpackError: ReferenceError: window is not defined

    WebpackError: ReferenceError: window is not defined

    Bug Report

    Describe the bug Not able to generate build. Trying to deploy documentaiton live
    A clear and concise description of what the bug is.

    To Reproduce

    1. docz build
    FOR BUGS: Insert debug trace
     ERROR #95312 
    
    "window" is not available during server side rendering.
    
    See our docs page for more info on this error: https://gatsby.dev/debug-html
    
    
      21 |  // to operate correctly into non-standard environments
      22 |  // @see https://github.com/webpack-contrib/style-loader/issues/177
    > 23 |  return window && document && document.all && !window.atob;
         | ^
      24 | });
      25 | 
      26 | var getTarget = function (target, parent) {
    
    
      WebpackError: ReferenceError: window is not defined
      
      - addStyles.js:23 
        node_modules/style-loader/lib/addStyles.js:23:1
      
      - addStyles.js:12 
        node_modules/style-loader/lib/addStyles.js:12:1
      
      - addStyles.js:80 ./node_modules/style-loader/lib/addStyles.js.module.exports
        node_modules/style-loader/lib/addStyles.js:80:1
      
      - buttons.scss?d045:16 Object.../src/components/Button/buttons.scss
        src/components/Button/buttons.scss?d045:16:82
      
      - index.js:1 Module.../src/components/Button/index.js
        src/components/Button/index.js:1:1
      
    
    ⠋ Building static HTML for pages
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    

    In order to allow us to quickly reproduce you issue please include a link to a reproduction repository.

    Expected behavior sucessful build A clear and concise description of what you expected to happen..

    Environment

    • OS: [e.g. OSX 10.13.4]
    • Node/npm version: [e.g. Node v10.15.3/npm 6.4.1]
    user help request v2 pending-user-response reproducible 
    opened by BTARPAR 33
  • Error: Cannot find module 'react-docgen/dist/babylon'

    Error: Cannot find module 'react-docgen/dist/babylon'

    Bug Report

    Describe the bug

    Update to docz 1.0.0-rc.3 when run docz dev,an error has occurred.

    Error: Cannot find module 'react-docgen/dist/babylon'
        at Function.Module._resolveFilename (module.js:547:15)
        at Function.Module._load (module.js:474:25)
        at Module.require (module.js:596:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (/Users/ronghang/work/react-components/node_modules/react-docgen-external-proptypes-handler/index.js:15:13)
        at Module._compile (module.js:652:30)
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
        at tryModuleLoad (module.js:505:12)
        at Function.Module._load (module.js:497:3)
        at Module.require (module.js:596:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (/Users/ronghang/work/react-components/node_modules/docz/node_modules/docz-core/dist/index.js:57:48)
        at Module._compile (module.js:652:30)
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
    

    A clear and concise description of what the bug is.

    I check the react-docgen-external-proptypes-handler source code,i found it uses a file that does not exist in try catch.

    'react-docgen/dist/babylon' does not exist in the react-docgen-external-proptypes-handler.

    try {
      const buildParser = require('react-docgen/dist/babelParser').default
      babylon = buildParser()
    } catch (e) {
      babylon = require('react-docgen/dist/babylon').default
    }
    
    opened by ronghang 33
  • TypeError: n is not a function

    TypeError: n is not a function

    Bug Report

    docz: 0.12.17 & 0.13.5

    To Reproduce npx docz dev

    /Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@docz-core/dist/index.js:5227
            n({
            ^
    
    TypeError: n is not a function
        at parseHtml (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@docz-core/dist/index.js:5227:9)
        at template (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@docz-core/dist/index.js:5365:21)
        at MiniHtmlWebpackPlugin.plugin (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@mini-html-webpack-plugin/index.js:17:33)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@tapable/lib/Hook.js:154:20)
        at Compiler.emitAssets (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@webpack/lib/Compiler.js:363:19)
        at onCompiled (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@webpack/lib/Watching.js:50:19)
        at hooks.afterCompile.callAsync.err (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@webpack/lib/Compiler.js:552:14)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@tapable/lib/Hook.js:154:20)
        at compilation.seal.err (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@webpack/lib/Compiler.js:549:30)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@tapable/lib/Hook.js:154:20)
        at hooks.optimizeAssets.callAsync.err (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@webpack/lib/Compilation.js:1323:35)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/puwei/Dev/test/test_lib/test-library/node_modules/[email protected]@tapable/lib/Hook.js:154:20)
    

    I flowed the minified code, found that e is string 'null', not null.

    getHtmlFilepath = e =>
        e ? path.resolve(root$1, e) : fromTemplates("index.tpl.html"),
    htmlTemplate = async e =>
        compiled(getHtmlFilepath(e), { minimize: !1, escape: !1 }),
    

    so it complied an error:

     { Error: ENOENT: no such file or directory, open '/Users/puwei/Dev/test/test_lib/test-library/null'
      errno: -2,
      code: 'ENOENT',
      syscall: 'open',
      path: '/Users/puwei/Dev/test/test_lib/test-library/null' }
    
    opened by clock157 33
  • Uncaught TypeError: Cannot read property 'close' of undefined

    Uncaught TypeError: Cannot read property 'close' of undefined

    Bug Report

    Describe the bug

    When i add docz to a create-react-app and start the server, it shows a blank page and it gives me this error.

    To Reproduce

    1. npx create-react-app my-app && cd my-app
    2. yarn add docz docz-theme-default --dev
    3. Create a basic mdx file
    4. yarn docz dev
    5. A blank page appears
    6. See this error in console:
    Uncaught TypeError: Cannot read property 'close' of undefined
        at Object.eval (index.js?e094:72)
        at eval (index.js:230)
        at Object../node_modules/chalk/index.js (vendors.js:554)
        at __webpack_require__ (runtime~app.js:801)
        at fn (runtime~app.js:164)
        at eval (formatWebpackMessages.js?5b63:10)
        at Object../node_modules/react-dev-utils/formatWebpackMessages.js (vendors.js:6800)
        at __webpack_require__ (runtime~app.js:801)
        at fn (runtime~app.js:164)
        at eval (webpackHotDevClient.js?7ef4:23)
    

    Expected behavior

    The app should work

    Environment

    • OS: MacOS 10.14.1
    • Node/npm version: Node 10.14.2/npm 6.4.1/Yarn 1.12.3
    help wanted 
    opened by lorenzorapetti 31
  • Generated docs and docz.site seems to be broken in IE11

    Generated docs and docz.site seems to be broken in IE11

    Bug Report

    If I navigate to http://docz.site/ using IE11, the screen is just blank. The same applies to any generated docs, whether in dev mode or on the built docs.

    To Reproduce

    1. Go to http://docz.site/ with IE11

    Expected: the docz site Actual: blank screen and an error in the console complaining about an unexpected closing body tag. A little later, a syntax error is encountered in a JavaScript file.

    I have reproduced this error with the example provided in examples/basic.

    bug 
    opened by mzedeler 31
  • The above error occurred in the <StoreStateProvider> component

    The above error occurred in the component

    Bug Report

    Version: 2.0.0-rc.68

    The error occur when I npm run dev. Go wrong in 2.0.0-rc.68, but not happen in 1.3.2.

    Error Info:

    Building app
    The above error occurred in the <StoreStateProvider> component:
        in StoreStateProvider
        in App
    
    React will try to recreate this component tree from scratch using the error boundary you provided, App.
    Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
    
    bug v2 not reproducible stale 
    opened by xingBri 30
  • Error: Cannot find module 'typescript' docz

    Error: Cannot find module 'typescript' docz

    Bug Report

    Describe the bug

    I configured the docs not to use typescript even so it gives this error!

    To Reproduce

    Doczrc.js

    export default {
        typescript: false
    }
    
    

    Error:

    $ docz dev --config ./doczrc.js
    node:internal/modules/cjs/loader:998
      throw err;
      ^
    
    Error: Cannot find module 'typescript'
    Require stack:
    

    Environment

    • docz version: 2.4.0
    • OS: macOS 13.0 22A380 x86_64
    • Node/npm version: 18.12.0/8.19.2
    opened by giovanesantossilva 0
  • Can't resolve '@babel/runtime/helpers/esm/regeneratorRuntime'

    Can't resolve '@babel/runtime/helpers/esm/regeneratorRuntime'

    Question

    Description

    Generating development SSR bundle failed
    
    Can't resolve '@babel/runtime/helpers/esm/regeneratorRuntime' in '/Users/ying/work/seadaka-design-next/node_modules/antd/es/notification'
    
    If you're trying to use a package make sure that '@babel/runtime/helpers/esm/regeneratorRuntime' is installed. If you're trying to use a local file make sure that the path is correct.
    
    File: ../../../node_modules/antd/es/notification/index.js
    
    • Twitter: If it's just a quick question you can ping me on Twitter: https://twitter.com/pedronauck
    opened by kimmy214 0
  • Error while initializing babel in docz

    Error while initializing babel in docz

    Error while initializing babel in docz: Error: Configuration contains string/RegExp pattern, but no filename was passed to Babel

    1. yarn add docz # react react-dom in existing project
    2. run docz:dev

    Output:

    Error while initializing babel in docz:  Error: Configuration contains string/RegExp pattern, but no filename was passed to Babel
        at matchPattern (/Users/kxnkxv/Desktop/frontend/node_modules/react-docgen/node_modules/@babel/core/lib/config/config-chain.js:556:11)
        at /Users/kxnkxv/Desktop/frontend/node_modules/react-docgen/node_modules/@babel/core/lib/config/config-chain.js:543:35
        at Array.some (<anonymous>)
        at matchesPatterns (/Users/kxnkxv/Desktop/frontend/node_modules/react-docgen/node_modules/@babel/core/lib/config/config-chain.js:543:19)
        at configFieldIsApplicable (/Users/kxnkxv/Desktop/frontend/node_modules/react-docgen/node_modules/@babel/core/lib/config/config-chain.js:501:10)
        at configIsApplicable (/Users/kxnkxv/Desktop/frontend/node_modules/react-docgen/node_modules/@babel/core/lib/config/config-chain.js:496:233)
        at /Users/kxnkxv/Desktop/frontend/node_modules/react-docgen/node_modules/@babel/core/lib/config/config-chain.js:316:9
        at Generator.next (<anonymous>)
        at loadFileChain (/Users/kxnkxv/Desktop/frontend/node_modules/react-docgen/node_modules/@babel/core/lib/config/config-chain.js:232:24)
        at loadFileChain.next (<anonymous>)
    /Users/kxnkxv/Desktop/frontend/node_modules/docz-core/dist/index.js:1605
      throw new Error(e); // babylon = require('react-docgen/dist/babylon').default
      ^
    
    Error: Error: Configuration contains string/RegExp pattern, but no filename was passed to Babel
        at Object.<anonymous> (/Users/kxnkxv/Desktop/frontend/node_modules/docz-core/dist/index.js:1605:9)
        at Module._compile (node:internal/modules/cjs/loader:1105:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
        at Module.load (node:internal/modules/cjs/loader:981:32)
        at Function.Module._load (node:internal/modules/cjs/loader:822:12)
        at Module.require (node:internal/modules/cjs/loader:1005:19)
        at require (node:internal/modules/cjs/helpers:102:18)
        at Object.<anonymous> (/Users/kxnkxv/Desktop/frontend/node_modules/docz/bin/index.js:2:1)
        at Module._compile (node:internal/modules/cjs/loader:1105:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    
    Process finished with exit code 1
    
    opened by kxnkxv 3
  • Multiple errors after installing docz

    Multiple errors after installing docz

    Bug Report

    Describe the bug

    I'm getting multiple errors when following the installation and run instructions in docz documentation.

    To Reproduce

    1. Inside an empty folder, run yarn add docz react react-dom
    2. Once the install is finished, add the following scripts to you package.json:
    "scripts": {
        "docz:dev": "docz dev",
        "docz:build": "docz build",
        "docz:serve": "docz build && docz serve"
      }
    
    1. Run yarn docz:dev
    2. See the first error Error: Cannot find module 'typescript'
    3. Install Typescript: yarn add typescript
    4. Run yarn docz:dev again
    5. See error Can't resolve '@emotion/core' in...
    6. Install emotion: yarn add @emotion/core
    7. Run yarn docz:dev again
    8. More errors: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module image

    image

    Expected behavior

    To run yarn docz:dev and yarn docz:serve without errors.

    Environment

    • docz version: 2.4.0
    • OS: OSX 12.3.1
    • Node/npm version: Node v14.18.3/npm 6.14.15
    opened by lceconi 11
  • Test out possibly breaking changes on security updates made from dependabot pull-requests

    Test out possibly breaking changes on security updates made from dependabot pull-requests

    Respectively, we have the following opening PRs from dependabot, where we need to test everything out, as such build scripts, and so on, to make sure that nothing is going to be broken if we merge them in main:

    • [ ] #1722
    • [ ] #1720
    • [ ] #1706
    • [ ] #1705
    • [ ] #1704
    • [ ] #1703
    • [ ] #1698
    • [ ] #1697
    • [ ] #1724

    Anyone feel free to pick it up and update your progress here in the comments for any of the above changes needing to be tested. As many people as we get to help here will be very valuable, especially for newcomers contributors.

    good first issue 
    opened by renatobenks 3
Releases(v2.4.0)
  • v2.4.0(Jun 23, 2022)

    Bug Fixes

    • babel-plugin-export-metadata: fix hasOwnProperty method call (#1581) (9067ffb)
    • dev-env/basic: building and running development (#1646) (7baaaf2)
    • docz: dependency issues (#1647) (5bdca48)
    • docz-utils: fix closing tag detection in removeTags (#1696) (bfcd923)
    • examples: import alert component by correct lib name. (#1605) (fadb6dd)
    • gatsby-theme-docz: wrong imports (ed169cf)
    • add functions never to eslint rule (#1487) (becd589)

    Features

    • add gatsby https flag to use in dev mode (#1569) (9d91503)
    • docz-core: add modifyEntry plugin supported (#1621) (317987e)
    • gatsby-theme-docz: configure SEO information from md/mdx files (#1477) (24bb600)
    • gatsby-theme-docz: no reload on relative links (#1482) (ff7211c)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.1(Apr 5, 2020)

  • v2.3.0(Apr 5, 2020)

    Bug Fixes

    babel-plugin-export-metadata

    • add case for export default (#1417) (31ebd08)

    docz-core

    • always use custom prop filter if it's provideded (#1415) (53063ff)
    • pass down host when running serve (#1384) (80a0e1e)
    • be explicit about cli args (6f5b4ee)
    • parse port when running serve (29d0edd)
    • prevent falsy error code on cli (#1332) (1437b59)
    • revert ts auto-detect (f0ce584)
    • forward cli status code properly (#1319) (99ebf82)
    • properly support node_modules for multiple file patterns (#1315) (4d9f9b3)
    • use docz-utils for get and mergeWith (f222083)

    gatsby-theme-docz

    • add pre-wrap to error (#1406) (ca6b02d)
    • content overflowing issue (#1437) (56f4cb8)
    • flex component aligmItems -> alignItems (#1391) (b80524f)
    • use sx instead of style prop in Playgro… (#1389) (98f3311)
    • removed unused gatsby-plugin-manifest (#1368) (44edc68)
    • fix playground react-resize-detector usage (#1350) (f0baf67)
    • src -> gatsbyRoot for file system source (71dd572)
    • make Props isToggle work again (#1326) (4921ef5)
    • fix preview padding (ebebd1c), closes #1325

    docz

    • pass useScoping to theme Playground (6ec7315), closes #1390
    • fix capitalization of ts interfaces (9e950eb)

    Features

    docz-core

    • pass down cli args to Gatsby + fix open flag (385b006)
    • add hook to find docgen props (#1371) (8fffa26)
    • add the ability to hide a document from the menu (#1354) (95b0d7f)
    • introduce gatsbyRoot to use for fs sourcing (8e89d64)
    • allow custom pattern for globbing components with docgenConfig.searchPatterns (#1316) (29e0165)
    • support kebab & pascal case component file name pattern (#1314) (9d5b129)

    docz

    • bump babel-preset-react-app to 9.1.2 (#1435) (8f071eb)

    gatsby-theme-docz

    • include MDX transclusion support (#1436) (435001a)
    • create MainContainer component (#1381) (e8d1c04)

    docz-utils:

    • add exports parser to add to Playground scope (9c564d0), closes #1247
    • export mergeWith and get from [email protected] (53fbde0), closes #1313

    rehype-docz

    • add mdx exports to Playground scope (d902e2a), closes #1247
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Dec 11, 2019)

    Features

    • gatsby-theme-docz: add optional iframe for preview and ed… (#1305) (9c5082e), closes #1306

    • gatsby-theme-docz: add showMarkdownEditButton flag (8fd04e8), closes #1291

    • docz-core: copy .env (51f7027)

    • docz-core: add all gatsby node apis to generated gatsby-node (918b44c), closes #1285

    • docz-core: recommend commands on typo (#1282) (0f8430d)

    Bug Fixes

    • gatsby-theme-docz: fix infinite renders in playground on hot reload (3451fd1), closes #1299

    • gatsby-theme-docz: fix horizontal code overflow (a0b7823)

    • gatsby-theme-docz: fix tsx parsing in code blocks (b321ff8)

    • docz-core: re-sync .docz on build (dfd4262)

    • docz-core: log errors that happen in gatsby-config (fe1e2da)

    • gatsby-theme-docz: remove typo from the theme styles (a25da88)

    • gatsby-theme-docz: set gatsby root from doczrc src (e6b1521)

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Nov 27, 2019)

    • feat(gatsby-theme-docz): use mdxExtensions from config - @rakannimer
    • feat(docz-core): add mdxExtensions to config - @rakannimer
    • fix(gatsby-theme-docz): allow empty ts prop defaultValue - @rakannimer
    • fix(docz): remove lowercasing of enum ts prop type - @rakannimer
    • feat(docz): spread remaining props to Props component (#1276) - @selbekk
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.77(Nov 27, 2019)

  • v2.0.0-rc.76(Nov 24, 2019)

    • fix(gatsby-theme-docz): fix large apps reload performance - @rakannimer

    • fix(gatsby-theme-docz): fix can't read route of undefined - @rakannimer

    • feat(gatsby-theme-docz): add jsxFrag pragma (#1269) - @tamagokun

    • fix(gatsby-theme-docz): fix search svg icon in firefox #1262 - @rakannimer

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.75(Nov 15, 2019)

    • fix(docz-core): ignore test files (#1259) - @selbekk

    • fix(gatsby-theme-docz): sidebar mobile position (#1258) - @mickaelzhang

    • style(gatsby-theme-docz): update Playground margin (#1257) - @mickaelzhang

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.74(Nov 14, 2019)

    • feat(docz-core): copy eslint config to .docz (#1254) - @rakannimer

    • fix(gatsby-theme-docz): ignore the .git folder (#1251) - @selbekk

    • fix(docz-core): windows shadow copy gatsby-theme (#1249) - @ejuo

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.73(Nov 11, 2019)

    • feat(docz): allow for custom properties in useMenus hook (#1246) - @NicolaiF

    • docs(docz-core): change the language of a warning (#1245) - @selbekk

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.72(Nov 8, 2019)

    • fix(gatsby-theme-docz): broken dark mode screen caused by main html tag height (#1232) - @marcelovicentegc
    • fix(gatsby-theme-docz): non-latin anchor link (#1240) - @ejuo
    • fix(docz-core): add gatsby dev host arg (#1241) - @ejuo
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.71(Nov 6, 2019)

  • v2.0.0-rc.70(Nov 5, 2019)

    • chore(gatsby-theme-docz): switch out react-helmet with react-helmet-async (#1223) - @selbekk
    • feat(gatsby-theme-docz): sidebar scroll to selected item in menu (#1228) - @rakannimer
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.69(Nov 5, 2019)

  • v2.0.0-rc.68(Nov 1, 2019)

  • v2.0.0-rc.67(Oct 30, 2019)

    • feat(docz-core): make docz parse components in index files by default (#1215) - @esturcke
    • docs: add example for the themesDir option (#1105) (#1218) - @simonrelet
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.66(Oct 29, 2019)

    • fix(docz-core): add pathPrefix from config (#1214) - @rakannimer

    • style(gatsby-theme-docz): keep NavGroup opened on item click (#1211) - @Kerumen

    • docs: fix docz + react-native example - @rakannimer

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.65(Oct 28, 2019)

    • feat(docz): expose <Code /> component (#1206) - @cdaringe
    • style(gatsby-theme-docz): remove word-wrap on Props component (#1209) - @Kerumen
    • docs: correct svg link for good first issue badge (#1208) - @PeachScript
    • feat(gatsby-theme-docz): add a config to hide the dark mode switch (#1205) - @Kerumen
    • chore(docz-core): add missing openChrome.applescript (#1204) - @Kerumen
    • style(gatsby-theme-docz): simplify the default config (#1203) - @Kerumen
    • style(gatsby-theme-docz): remove deprecation warning for grid (#1200) - @Kerumen
    • style(gatsby-theme-docz): collapse NavGroup by default (#1202) - @Kerumen
    • chore(docz-core): copy .eslintignore from project (#1201) - @Kerumen
    • chore: dedupe yarn.lock (#1199) - @Kerumen
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.64(Oct 24, 2019)

    • style(gatsby-theme-docz): improve Playground style (#1198) - @Kerumen

    • feat: integrate with eslint-mdx to lint .mdx with ESLint (#1195) - @JounQin

    • fix(docz-core): always copy theme under src (#1105) (#1194) - @simonrelet

    • fix(docz): use playground from context (fixes playground shadowing) (#1197) - @rakannimer

    • feat(docz): forward of prop to custom Props component (#1193) - @selbekk

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.63(Oct 22, 2019)

    • chore(docz-core): fix resolveApp when called from the docz project (#1189) - @Kerumen
    • feat(docz): allow components from node_modules when explicitly requested (#1188) - @axe312ger
    • style(docz-components): fix live preview background (#1190) - @Kerumen
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.62(Oct 22, 2019)

  • v2.0.0-rc.61(Oct 22, 2019)

  • v2.0.0-rc.60(Oct 22, 2019)

  • v2.0.0-rc.58(Oct 17, 2019)

    • chore(docz-components): upgrade re-resizable to v6 (#1178) - @Kerumen
    • chore(docz-components): change item key and filename comparison (#1176) - @Kerumen
    • feat(gatsby-theme-docz): pass the entry property down to Wrapper (#1181) - @pepibumur
    • docs: remove extra space in readme (#1182) - @ericcarboni
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.57(Oct 17, 2019)

  • v2.0.0-rc.56(Oct 14, 2019)

    • fix(docz-core): allow custom doczrc location with config cli flag (#1169) - @rakannimer

    • chore(babel-plugin-export-metadata): don't add filemeta if it exists (#1173) - @Kerumen

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.55(Oct 9, 2019)

  • v2.0.0-rc.54(Oct 8, 2019)

    • (docz-core) handle props on windows (#1151) … @jesperorb

    • fix(gatsby-theme-docz): able to set container width … @jesperorb

    • fix(docz-rollup): handle defaultsExternal on windows … @jesperorb

    • docs: fix funding.yml (#1158) … @goldins

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.53(Oct 5, 2019)

    • chore(docz): add css preprocessor examples and info - @jesperorb

    • fix(gatsby-theme-docz): round playground borders #1080 (#1157) - @jesperorb

    • fix(docz-core): add support for hoisted dependencies (#1149) - @rakannimer

    • docs: fix readme toc links (#1154) - @athul

    • docs: sentence refactor (#1150) … @bisonwebmedia

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.52(Oct 1, 2019)

Owner
Docz
✍🏻It has never been so easy to document your things!
Docz
Memo/useMemo/useCallback all the things!

eslint-plugin-react-usememo Enforce that functions or complex objects that can generate unecessary renders or side-effects are wrapped in useMemo or u

Arthur Geron 13 Nov 8, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.4k Dec 5, 2022
Simple mobile app to track who has paid for an event

PayMe Simple app that tracks who has paid for an event. Track small payments for an event Use common people lists for an event Features Overview (list

Kendall Roth 6 Oct 10, 2022
Engineering at EcoVadis 16 Aug 22, 2022
Collaborate & label any type of data, images, text, or documents, in an easy web interface or desktop app.

Universal Data Tool Try it out at udt.dev, download the desktop app or run on-premise. Docs • Website • Playground • Library Usage • On-Premise The Un

Universal Data Tool 1.7k Dec 2, 2022
Chainable, easy to read, React testing library

##Legit Tests This is a super friendly testing library for React, inspired by express middleware, it's easily extendable. Why did I make this when you

Legitcode 252 Jul 31, 2022
⚛️ React testing made easy. Supports DOM and custom renderers.

Rut Rut is a DOM-less React testing library that aims to be lightweight, encourage great testing practices, and reduce flakiness and code smells. It i

Miles Johnson 15 May 22, 2022
Minimalistic, super lightweight React service injection container extremely easy to use.

Thinjector (React) Minimalistic, super lightweight React service injection container extremely easy to use. Why It's important to decouple your ui com

Cesar Martinez 6 May 14, 2022
A lightweight, easy to extend web debugging tool developed based on react.

English | 简体中文 A lightweight, easy to extend web debugging tool developed based on react. Easy to use Full-featured Easy to expand high performance Us

腾讯TNTWeb前端团队 234 Nov 28, 2022
A flexible, responsive, and easy-to-use crossword component for React apps.

Install npm install --save @jaredreisinger/react-crossword # or # yarn add @jaredreisinger/react-crossword Usage See also the styleguidist docs for

Jared Reisinger 113 Nov 14, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.8k Nov 29, 2022
🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

Storybook 651 Nov 16, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.8k Dec 4, 2022
A CLI tool to bootstrap your modern React application.

create-react-saga is a CLI tool for quickly setup your next clutter free webpack backed React application. It provides you the latest hooks based codebase, testing utilities and storybooks.

Sunny Praksah 6 Oct 30, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.8k Dec 2, 2022
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Carte Blanche IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore. Carte Blanche is an iso

Carte Blanche 1.5k Nov 20, 2022
The smartest way to share interactive components with your team.

A React component that works like a preview of other components. An excellent tool to show how your component works and looks with. Easy to install an

Scup by Sprinklr 995 Nov 5, 2022
Harness the power of reactive programming to supercharge your components

Handle your component effects and side-effects in a clear and declarative fashion by using asynchronous data streams (reactive programming). Why? · In

FanDuel OSS 810 Dec 5, 2022
🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

Storybook 651 Nov 16, 2022