Giter Site home page Giter Site logo

doczjs / docz Goto Github PK

View Code? Open in Web Editor NEW
23.5K 184.0 1.5K 9.84 MB

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

Home Page: https://docz.site

License: MIT License

JavaScript 37.66% TypeScript 61.17% HTML 0.18% CSS 0.07% AppleScript 0.92%
docs documentation js react zero-configuration ui design-system gatsby mdx docz

docz's People

Contributors

adbayb avatar aleen42 avatar ambar avatar amedora avatar axe312ger avatar bpetetot avatar diegohaz avatar ejuo avatar fi3ework avatar glazy avatar ivan-dalmet avatar jared-dev avatar jedmao avatar kerumen avatar lettertwo avatar marceloavf avatar mickaelzhang avatar mpivaa avatar nicholasess avatar patricksevat avatar pedronauck avatar rakannimer avatar renatobenks avatar renatorib avatar rfoel avatar selbekk avatar simonrelet avatar socksrust avatar swapnull avatar yaodingyd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

docz's Issues

Add search

Feature Request

Is your feature request related to a problem? Please describe.
Some documentation is long and complicated to find things in, which leads to lots of clicking around and reading

Describe the solution you'd like
Having a search dropdown, like on the react documentation, for example. This can be done using DocSearch for free, simply by having the autocomplete etc. as an option, and then explaining how to apply. A similar process as for docusaurus can be followed

Note that I work for Algolia.

Page Not Found

I follow the steps on the website here
my directory structure:

index.mdx
package.json
yarn.lock

But my page has no content

look:
image

Docz cannot "find" custom theme

Bug Report

Describe the bug

I need to have both dark and light versions of the <Playground> component, so I have copied the default theme and made the updates I need. I have updated the doczrc.js config to read like so:

export default {
  theme: 'src/docz-theme-fx',
}

When I run docz in dev mode, I see this error:


ERROR  Failed to compile with 1 errors
This relative module was not found:

* src/docz-theme-fx in ./.docz/app/root.jsx

I then had a look at root.jsx and I can see it has an import statement that references the path that I added to the config, it looks like this:

import Theme from 'src/docz-theme-fx'

As far as I'm aware, this is not valid import syntax if it needs to find that module. So I though I would change the setting to read like this:

export default {
  theme: '../../src/docz-theme-fx',
}

This updated the path in the root.jsx file but the same problem still occurred.

Is there a something else that should be done to get this to work?

@pedronauck I also think that the <Playground> component should have a themeable background so that it can be dark or light.. 🤔

Environment

  • OS: MacOS 10.13.4
  • Node/npm version: Node 9.9.0/npm 6.1.0/yarn 1.6.0
    Add any other context about the problem here. If applicable, add screenshots to help explain.

Make docs generated responsive

It would be nice if the docs were mobile-friendly, and it would give Docz a big win over Storybook, which is still not responsive either.

Support env files to set configuration

Bug Report

Incorrect path

Docz is looking in the wrong place for the my components imported modules. I think it is not taking into account NODE_PATH=src in my .env file

To Reproduce

  1. Use Create React App boilerplate
  2. Save NODE_PATH=src into an .env file
  3. Import modules into component without src in the path (e.g. import Foo from 'lib/foo' rather than import Foo from 'src/lib/foo')
  4. See error below
These dependencies were not found:

* lib/foo in ./src/components/Partials/SubTitle/index.js

To install them, you can run: npm install --save lib/foo

Environment

  • OS: OSX 10.13.3
  • Node: v8.9.4
  • NPM: v6.0.1

Not working with pnpm

Bug Report

Describe the bug

Doesn't work with pnpm

To Reproduce

Install with `pnpm install --shamlessly-flatten`

Start it
Module build failed (from ./node_modules/.registry.npmjs.org/happypack/5.0.0/node_modules/happypack/loader.js):
Error: .test must be a string/Function/RegExp, or an array of those
    at assertConfigApplicableTest (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/@babel/core/7.0.0-beta.49/node_modules/@babel/core/lib/config/validation/option-assertions.js:121:11)
    at Object.keys.forEach.key (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/@babel/core/7.0.0-beta.49/node_modules/@babel/core/lib/config/validation/options.js:99:20)
    at Array.forEach (<anonymous>)
    at validate (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/@babel/core/7.0.0-beta.49/node_modules/@babel/core/lib/config/validation/options.js:69:21)
    at assertOverridesList (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/@babel/core/7.0.0-beta.49/node_modules/@babel/core/lib/config/validation/options.js:147:7)
    at Object.keys.forEach.key (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/@babel/core/7.0.0-beta.49/node_modules/@babel/core/lib/config/validation/options.js:99:20)
    at Array.forEach (<anonymous>)
    at validate (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/@babel/core/7.0.0-beta.49/node_modules/@babel/core/lib/config/validation/options.js:69:21)
    at loadPrivatePartialConfig (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/@babel/core/7.0.0-beta.49/node_modules/@babel/core/lib/config/partial.js:38:50)
    at Object.loadPartialConfig (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/@babel/core/7.0.0-beta.49/node_modules/@babel/core/lib/config/partial.js:80:18)
    at Object.<anonymous> (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/babel-loader/8.0.0-beta.3/990591e7a67c83fd69ae74242914edd8/node_modules/babel-loader/lib/index.js:82:26)
    at Generator.next (<anonymous>)
    at step (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/babel-loader/8.0.0-beta.3/990591e7a67c83fd69ae74242914edd8/node_modules/babel-loader/lib/index.js:3:221)
    at _next (xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/babel-loader/8.0.0-beta.3/990591e7a67c83fd69ae74242914edd8/node_modules/babel-loader/lib/index.js:3:409)
    at xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/babel-loader/8.0.0-beta.3/990591e7a67c83fd69ae74242914edd8/node_modules/babel-loader/lib/index.js:3:477
    at new Promise (<anonymous>)

Also,

> @live/[email protected] dev xxx/packages/public/apps-templates/docz
> docz dev

ℹ  info      Removing old app files
ℹ  info      Creating new docz files
xxx/packages/public/apps-templates/docz/node_modules/.registry.npmjs.org/happypack/5.0.0/node_modules/happypack/lib/HappyThread.js:175
  throw e;
  ^

Error: spawn /Users/Vaughan/nvm/versions/node/v8.9.0/bin/node EAGAIN
    at _errnoException (util.js:1024:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
    at onErrorNT (internal/child_process.js:372:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)

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

Expected behavior

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

Enviroment

  • OS: [e.g. OSX 10.13.4, Windows 10] macOS
  • Node/npm version: [e.g. Node 8/npm 5] Node 8/[email protected]

Additional context/Screenshots

Favicon

What's the best way to add a favicon? Maybe we should add this to the docs too.

css in js Support

css in js Support

Description
Can you support css in js? It is very useful to customize components in document.

It doesnt start

Hi, can you help me? Docz doesn't start...

 ERROR  Failed to compile with 1 errors23:29:58

 error  in ./.docz/app/index.jsx

Module build failed (from ./node_modules/happypack/loader.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/babel-preset-react/lib/index.js
    at createDescriptor (/Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/config-descriptors.js:138:11)
    at items.map (/Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/config-descriptors.js:69:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/config-descriptors.js:69:29)
    at createPresetDescriptors (/Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/config-descriptors.js:61:10)
    at passPerPreset (/Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/config-descriptors.js:53:96)
    at cachedFunction (/Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/caching.js:32:19)
    at presets.presets (/Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/config-descriptors.js:25:84)
    at mergeChainOpts (/Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/config-chain.js:304:26)
    at /Users/max/Projetos/mytestapp/apps/d4_web/assets/node_modules/docz-core/node_modules/@babel/core/lib/config/config-chain.js:267:7

 @ multi ./node_modules/docz-core/node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

Constantly getting error with styled component and typescript

Module build failed (from ./node_modules/happypack/loader.js):
TypeError: Cannot read property 'kind' of undefined
    at getLiteralValueFromPropertyAssignment (/root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:359:25)
    at /root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:336:28
    at Array.reduce (<anonymous>)
    at getPropMap (/root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:332:30)
    at /root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:304:37
    at Array.forEach (<anonymous>)
    at Parser.extractDefaultPropsFromComponent (/root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:299:37)
    at Parser.getComponentInfo (/root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:118:37)
    at /root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:73:57
    at Array.map (<anonymous>)
    at /root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:73:22
    at Array.reduce (<anonymous>)
    at Object.parse (/root/ui-lib/node_modules/react-docgen-typescript/lib/parser.js:66:18)
    at Object.processResource (/root/ui-lib/node_modules/react-docgen-typescript-loader/dist/loader.js:69:32)
    at Object.loader (/root/ui-lib/node_modules/react-docgen-typescript-loader/dist/loader.js:15:41)
    at applySyncOrAsync (/root/ui-lib/node_modules/happypack/lib/applyLoaders.js:350:21)

 @ ./components/Button/Button.mdx 3:0-38 33:99-105
 @ ./.docz/app/imports.js
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

Hey I am getting this error and I cant help it. Please help I am using typescript and styled-components

Repo: https://github.com/javascript-af/ui-lib

The stuff is in docz branch.

OS: Windows 10 (using bash on windows(ubuntu))
Node:- v8.11.2

TypeError: Cannot read property 'presets' of null

Hi there!

I started to integrate docz into my project. Installed according the getting started.
When I'm running docz dev, I'm running into the following error:

> docz dev

TypeError: Cannot read property 'presets' of null
    at /Users/xxx/Projects/xxx/node_modules/deepmerge/dist/umd.js:56:57
    at Array.forEach (<anonymous>)

Tried with Node Version v9.11.1 and v10.4.0.

Allow user to pass empty components to playground

Currently, doing

<Playground
components={{}}
>
  <Button>Click me</Button>
  <Button title="secondary">Click me</Button>
</Playground>

will be fine but

<Playground>
  <Button>Click me</Button>
  <Button title="secondary">Click me</Button>
</Playground>

won't.

The error I'm getting is:

index.m.js?4320:formatted:1 Uncaught TypeError: Cannot destructure property `render` of 'undefined' or 'null'.
    at Playground (index.m.js?4320:formatted:1)
    at ProxyFacade (react-hot-loader.development.js?c2cb:670)
    at mountIndeterminateComponent (react-dom.development.js?61bb:13272)
    at beginWork (react-dom.development.js?61bb:13711)
    at performUnitOfWork (react-dom.development.js?61bb:15741)
    at workLoop (react-dom.development.js?61bb:15780)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:138)
    at invokeGuardedCallback (react-dom.development.js?61bb:187)
    at replayUnitOfWork (react-dom.development.js?61bb:15194)
react-dom.development.js?61bb:14113 The above error occurred in the <Playground> component:
    in Playground (created by Component)
    in div (created by Component)
    in Component (created by Component)
    in Component (created by Component)
    in Component (created by n)
    in n (created by t)
    in div (created by Styled(div))
    in Styled(div) (created by Page)
    in div (created by Styled(div))
    in Styled(div) (created by Page)
    in Page (created by t)
    in t
    in t
    in DocPreview
    in div (created by Styled(div))
    in Styled(div) (created by Main)
    in Main
    in t
    in ThemeConfig (created by Theme)
    in Theme (created by DoczTheme)
    in DefaultWrapper (created by DoczTheme)
    in t (created by t)
    in t (created by DoczTheme)
    in DoczTheme (created by Root)
    in Root (created by HotExportedRoot)
    in AppContainer (created by HotExportedRoot)
    in HotExportedRoot

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

I think I can fix it, will submit a PR.

CLI it’s running on port 3000, but that port is already taken. (Actually running on 3001?)

Bug Report

The CLI is saying:

DONE  Compiled successfully in 166ms                                                                                                                                                                                                                              
You application is running at http://localhost:3000

But I already have an app running there. When I go to the port, my app is running there. Not docz. Meanwhile, there’s no indication of an error in the console.

But I tried port 3001 and it seems docz is running there.

Enviroment

  • MacOS
  • Tested with both Node 6.5.0 and Node 9.5.0

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? 😍

When no name is specified in mdx file, it throws Cannot read property 'name' of undefined

Bug Report

To Reproduce

Create an MDX file with no name specified.
It will generate the error:

$ docz dev
TypeError: Cannot read property 'name' of undefined
    at new Entry (.../frontend/node_modules/docz-core/dist/index.js:1:5189)
    at Promise.all.s.filter.map (.../frontend/node_modules/docz-core/dist/index.js:1:7654)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:746:11)
    at startup (internal/bootstrap/node.js:238:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:572:3)

Expected behavior

Provide a helpful error message that $path/to/file.mdx does not contain a name.

It probably occurs at this line but couldn't find out how to run docz without using the dist version to validate:
https://github.com/pedronauck/docz/blob/master/packages/docz-core/src/Entry.ts#L98

Can't execute docz in Laravel project

Bug Report

Describe the bug

Hi, when I try to install docz, everything's fine but when I try to launch it, i got this error :

C:\xampp\htdocs\cdg_reload>yarn docz dev
yarn run v1.7.0
$ C:\xampp\htdocs\cdg_reload\node_modules\.bin\docz dev
i  info      Removing old app files
i  info      Creating new docz files
i  info      Setup entries socket on port 8089

Compiling

* Client █████████████████████████ building modules (29%) 161/167 modules 6 active
  node_modules\core-js\modules\_string-ws.js

C:\xampp\htdocs\cdg_reload\node_modules\snapdragon\lib\parser.js:473
        throw new Error('no parsers registered for: "' + self.input.slice(0, 5) + '"');
        ^

Error: no parsers registered for: "]a(r)"
    at parse (C:\xampp\htdocs\cdg_reload\node_modules\snapdragon\lib\parser.js:473:15)
    at Parser.parse (C:\xampp\htdocs\cdg_reload\node_modules\snapdragon\lib\parser.js:477:24)
    at Snapdragon.parse (C:\xampp\htdocs\cdg_reload\node_modules\snapdragon\index.js:122:28)
    at Snapdragon.<anonymous> (C:\xampp\htdocs\cdg_reload\node_modules\braces\lib\braces.js:40:45)
    at Braces.parse (C:\xampp\htdocs\cdg_reload\node_modules\braces\lib\braces.js:66:26)
    at Braces.expand (C:\xampp\htdocs\cdg_reload\node_modules\braces\lib\braces.js:87:18)
    at create (C:\xampp\htdocs\cdg_reload\node_modules\braces\index.js:142:15)
    at memoize (C:\xampp\htdocs\cdg_reload\node_modules\braces\index.js:298:13)
    at Function.braces.create (C:\xampp\htdocs\cdg_reload\node_modules\braces\index.js:165:10)
    at Function.braces.expand (C:\xampp\htdocs\cdg_reload\node_modules\braces\index.js:81:17)
    at getDirParts (C:\xampp\htdocs\cdg_reload\node_modules\chokidar\index.js:435:31)
    at FSWatcher.<anonymous> (C:\xampp\htdocs\cdg_reload\node_modules\chokidar\index.js:452:24)
    at C:\xampp\htdocs\cdg_reload\node_modules\readdirp\readdirp.js:226:72
    at Array.filter (<anonymous>)
    at C:\xampp\htdocs\cdg_reload\node_modules\readdirp\readdirp.js:226:12
    at C:\xampp\htdocs\cdg_reload\node_modules\readdirp\readdirp.js:199:38
error Command failed with exit code 1.

To Reproduce

  1. Create a Laravel 5.6 project
  2. Add some scss content, update, etc all this stuff
  3. Install docz
  4. Launch docz
  5. See error

Enviroment

  • OS: Windows 10
  • Node/npm version: Node v8.9.2 & npm : v5.8.0

Thank's :)

Read name from package.json and populate title by default

Feature Request

It would be nice if the "MyDoc" title defaulted to the name property inside package.json

Describe the solution you'd like

Read package.json name and populate title

Describe alternatives you've considered

Maybe creating a theme that does this? 🤔

Teachability, Documentation, Adoption, Migration Strategy

the config file and other ways to set the title should overwrite this, reading name from package.json should probably only be done if there's no title configured. This would make it more zero-config than it is right now.

Allow deploying on GitHub pages

Feature Request

I'm not sure if it's something for the default theme or the core package, but:

Is your feature request related to a problem? Please describe.

It's currently impossible (I think) to deploy Docz to GitHub Pages, since the latter has now way of working with routes.

Describe the solution you'd like

Either allow using hash routes, such as: https://username.github.io/project/#section (The way Storybook does it)

or, ideally, generate individual pages for all the sections with SSR.

Describe alternatives you've considered

I'm currently investigating whether there's something one can do about it in the current Docz version.

Teachability, Documentation, Adoption, Migration Strategy

The hash-route will (probably) manifest itself in a config option that is opt-in. Not sure yet about SSR.

Constantly getting missing dep on running on windows

Bug Report

Describe the bug
If I make a MDX file I am getting this wierd missing dep error. I am using the typescript setup

To Reproduce

  1. Install docz on windows
  2. Make a MDX file and run docz
This dependency was not found:

* componentsButtonButton.mdx in ./.docz/app/imports.js

To install it, you can run: npm install --save componentsButtonButton.mdx

https://github.com/javascript-af/ui-lib
It is on the docz branch

Expected behavior

It should bootstrap the site and it should run

Enviroment

  • OS: Windows 10
  • Node/npm version: Node 8.11.2

Remove <Playground> from output in the Playground

When using <Playground> docz renders the <Playground> component as well as the component markup. Can it be removed?

Make this:

<Playground>
  <MyComponent />
</Playground>

Like this:

<MyComponent />

Blog support

Feature Request

Is your feature request related to a problem? Please describe.
Nope.

Describe the solution you'd like
A blog engine, alongside the documentation. I think that this would be an awesome addition. One tool to rule them all.

Describe alternatives you've considered
I think that https://docusaurus.io is a nice example of doc engine with blog support.

Teachability, Documentation, Adoption, Migration Strategy
Use MDX to write blog posts about the new features of the documented tool.

vue support

This tool looks amazing! 🎉 Do you have any plans for vue support?

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Built-in component for controlled components

Disclaimer: I'm just now reading through the docs, maybe I have missed it. Apologies in advance :)

Since React 16.4, having mixed-control components (that work either via a value prop and onChange callback, or with an internal state) are discouraged, if cumbersome to build.

I wonder if there could be a built-in component that can manage the state for a controlled component:

<Controller>
{ (state, setState) => 
    <MyComponent value={state.value} onChange={ value => setState({ value }) } />
}
</Controller>

Polymer/Web components - possibly babel issue

Bug Report

I am trying to create docz for a library of custom elements, most of the are built on top of Polymer.
as React supports working with web-components, the babel transpiling is not configured to support that.

To Reproduce

Add custom element component, preferably Polymer based (not mandatory)

  1. Go to 'localhost://3000'
  2. Open dev-tools console
  3. Error: Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'

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

Expected behavior
Web component to work ;)

Enviroment

Windows 10 :(
Node 9.x
npm 5+

Docz mdx file

---
name: card-layout
---

import { Playground } from 'docz';
import CardLayout from './components/card-layout.js';

# CardLayout

## Basic usage

<Playground>
  <card-layout>
    <div slot="header">Header</div>
  </card-layout>
</Playground>

Docz requires a Webpack install

Bug Report

We didn't have Webpack installed, so Docz threw an error when running docz dev:

Error: Cannot find module 'webpack/schemas/WebpackOptions.json'

npm i -D webpack fixed the error immediately.

To Reproduce

  1. Create a project without Webpack installed
  2. Install Docz npm i -D docz
  3. Run npx docz dev
❯ npm run docz:dev

> test@ docz:dev /Users/oliver.phillips/Code/mosaic-project/mosaic
> docz dev

module.js:549
    throw err;
    ^

Error: Cannot find module 'webpack/schemas/WebpackOptions.json'
    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/oliver.phillips/Code/mosaic-project/mosaic/node_modules/@webpack-contrib/config-loader/lib/index.js:4:23)
    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/oliver.phillips/Code/mosaic-project/mosaic/node_modules/webpack-serve/lib/config.js:3:16)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
npm ERR! code ELIFECYCLE

Expected behavior

Docz should either have Webpack as a dependency or at least warn that a peerDependency is missing.

Environment

  • OS: macOS 10.13.5
  • Node/npm version: Node v8.11.1/npm v6.0.1

TypeError: Cannot read property 'bindings' of null

Bug Report

Describe the bug

After installing docz, I tried to give a go with the following command:

$ docz dev

and I got the following error:

 error  in ./.docz/app/index.jsx
Module build failed (from ./node_modules/happypack/loader.js):
TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/***/node_modules/docz-core/node_modules/@babel/traverse/lib/scope/index.js:869:13)
    at convertBlockScopedToVar (/***/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:139:13)
    at PluginPass.VariableDeclaration (/***/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:26:9)
    at newFn (/***/node_modules/docz-core/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/***/node_modules/docz-core/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/***/node_modules/docz-core/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/***/node_modules/docz-core/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/***/node_modules/docz-core/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitMultiple (/***/node_modules/docz-core/node_modules/@babel/traverse/lib/context.js:85:17)
    at TraversalContext.visit (/***/node_modules/docz-core/node_modules/@babel/traverse/lib/context.js:144:19)

 @ multi ./node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

Enviroment

  • OS: [e.g. OSX 10.13.4, Windows 10] Windows 10 and WSL Ubuntu.
  • Node/npm version: [e.g. Node 8/npm 5] v10.3.0 / 6.1.0

Order doesn't work as expected with menu

I have a list of pages with the following headers:

name: Introduction
route: /
order: 100
menu: Getting Started

name: Check Server Status
route: /check-server-status
order: 99
menu: Getting Started

name: Login
route: /login
order: 86
menu: Authentication

name: Update User
route: /user-update
order: 5
menu: User

(it's just a part of the list)

The groups are shown as follows: Authentication > Getting Started > User. How do i order them with Getting Started as the first element (without using subfolders as in docz-website)?

Use vanilla HTML without JS components

Is it possible to use docz without importing JS components and instead just use basic HTML?

I currently have a hello.mdx file which looks like the following:

---
name: Hello World
---

import { Playground } from 'docz'

# Hello
<Playground components={{}}>
    <h1>Hello</h1>
</Playground>

I run yarn docz dev and get the following error:

ERROR  Failed to compile with 1 errors

This dependency was not found:
* srcdocuttons.mdx in ./.docz/app/imports.js
To install it, you can run: npm install --save srcdocuttons.mdx

System specs:

  • Windows 7
  • Node v8.9.3
  • Yarn v1.7.0
  • docz v0.2.4

Wrong path for components in Windows

Bug Report

Describe the bug

When try to run dev project it return an error about wrong imports from components without the slash bar, probably something with windows path.

To Reproduce

  1. Run npm install
  2. Run npm dev
 ERROR  Failed to compile with 3 errors                                                                                                                                  09:20:48

These dependencies were not found:

* srccomponentsAlert.mdx in ./.docz/app/imports.js
* srccomponentsButton.mdx in ./.docz/app/imports.js
* srcindex.mdx in ./.docz/app/imports.js

To install them, you can run: npm install --save srccomponentsAlert.mdx srccomponentsButton.mdx srcindex.mdx

Enviroment

  • OS: Windows 10
  • Node/npm version: v10.4.0 / 6.0.0

Additional context/Screenshots
image

Unable to use PropsTable

Bug Report

getValue this function in <PropsTable> causing error

Describe the bug
Once include PropsTable component in my mdx file it throw error

To Reproduce

  1. Go to Button.mdx
  2. Include PropsTable as describe
  3. See error
Uncaught TypeError: Cannot read property 'replace' of undefined at getValue 

Expected behavior
To see the <PropsTable> with correct props defined in ../lib/Button/index.js

Enviroment

{
  "engines": {
    "node": "8.11.1",
    "npm": "5.7.1",
    "yarn": "1.6.0"
  }
}

Additional context/Screenshots
screen shot 2018-06-13 at 3 32 49 pm
screen shot 2018-06-13 at 3 33 27 pm

Missing dependency: webpack-hot-client

Bug Report

With docz 0.2.3, running docz dev fails with the following error:

screen shot 2018-06-13 at 11 57 20

It can be fixed by installing webpack-hot-client, but it should probably be an explicit dependency for the package.

Putting `dist` as `./` removes all files

Bug Report

  1. Set "dist": "./"
  2. Run docz build
  3. Everything except node_modules is removed.

Expected behavior

Docs are compiled to "./", or a warning is thrown. No files should be deleted.

Luckily this happened when i was playing around but it could be devastating if you aren't using git correctly 😄

Uncaught TypeError: cannot read property 'pre' of undefined

Is it related to the use of typescript?
error message:
Uncaught TypeError: Cannot read property 'pre' of undefined
at webpack_exports.default (button.mdx?a2b0:9)
at ProxyFacade (react-hot-loader.development.js?c2cb:670)
at mountIndeterminateComponent (react-dom.development.js?61bb:13272)
at beginWork (react-dom.development.js?61bb:13711)
at performUnitOfWork (react-dom.development.js?61bb:15741)
at workLoop (react-dom.development.js?61bb:15780)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:138)
at invokeGuardedCallback (react-dom.development.js?61bb:187)
at replayUnitOfWork (react-dom.development.js?61bb:15194)
webpack_exports.default @ button.mdx?a2b0:9
Component @ react-hot-loader.development.js?c2cb:670
mountIndeterminateComponent @ react-dom.development.js?61bb:13272
beginWork @ react-dom.development.js?61bb:13711
performUnitOfWork @ react-dom.development.js?61bb:15741
workLoop @ react-dom.development.js?61bb:15780
callCallback @ react-dom.development.js?61bb:100
invokeGuardedCallbackDev @ react-dom.development.js?61bb:138
invokeGuardedCallback @ react-dom.development.js?61bb:187
replayUnitOfWork @ react-dom.development.js?61bb:15194
renderRoot @ react-dom.development.js?61bb:15840
performWorkOnRoot @ react-dom.development.js?61bb:16437
performWork @ react-dom.development.js?61bb:16358
performSyncWork @ react-dom.development.js?61bb:16330
requestWork @ react-dom.development.js?61bb:16230
scheduleWork$1 @ react-dom.development.js?61bb:16096
enqueueSetState @ react-dom.development.js?61bb:11185
Component.setState @ react.development.js?72d0:273
n.safeSetState @ index.m.js?4320:1
(anonymous) @ react-hot-loader.development.js?c2cb:582
(anonymous) @ index.m.js?4320:1
Promise.then (async)
n @ index.m.js?4320:1
n @ VM6155:5
constructClassInstance @ react-dom.development.js?61bb:11333
updateClassComponent @ react-dom.development.js?61bb:13036
beginWork @ react-dom.development.js?61bb:13715
performUnitOfWork @ react-dom.development.js?61bb:15741
workLoop @ react-dom.development.js?61bb:15780
renderRoot @ react-dom.development.js?61bb:15820
performWorkOnRoot @ react-dom.development.js?61bb:16437
performWork @ react-dom.development.js?61bb:16358
performSyncWork @ react-dom.development.js?61bb:16330
interactiveUpdates$1 @ react-dom.development.js?61bb:16597
interactiveUpdates @ react-dom.development.js?61bb:2150
dispatchInteractiveEvent @ react-dom.development.js?61bb:4528
react-dom.development.js?61bb:14113 The above error occurred in the component:
in Component (created by Component)
in div (created by Styled(div))
in Styled(div) (created by Render)
in Render (created by Playground)
in Playground (created by Component)
in div (created by Component)
in Component (created by Component)
in Component (created by Component)
in Component (created by n)
in n (created by t)
in div (created by Styled(div))
in Styled(div) (created by Page)
in div (created by Styled(div))
in Styled(div) (created by Page)
in Page (created by t)
in t
in t
in DocPreview
in div (created by Styled(div))
in Styled(div) (created by Main)
in Main
in t
in ThemeConfig (created by Theme)
in Theme (created by DoczTheme)
in DefaultWrapper (created by DoczTheme)
in t (created by t)
in t (created by DoczTheme)
in DoczTheme (created by Root)
in Root (created by HotExportedRoot)
in AppContainer (created by HotExportedRoot)
in HotExportedRoot

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

Advanced typescript annotation integration

Hi,

Thank you so much for Docz, I always had issues with other tools, and Docz just work. The Typescript integration with PropsTable is awesome and I'd just like to open discussion on some more advanced integration:

  • Support default value with JS default function parameters, ie function MyComponent({text = "hello"}) {}
  • Support description with JS comment above the parameter, as currently handled by the typescript language server used in IDEs, ie
    function MyComponent({
    /**
    * Documentation for the “text” parameter
    **/
    text = "hello"
    }) 
  • Support normal functions, and not exclusively React components, including with parameters typing and inline parameter documentation.

Voilà, I'm sure you already though of these items but I though it would be good to have an open discussion on it.

First run failed (webpack-hot-client ?)

Bug Report

When I try to run docz for the first time (the only thing I did was yarn add -D docz), it compiles but then throw this error:

screen shot 2018-06-15 at 11 34 01

Then, after I think "this is not zero-config", I install the webpack-hot-client and try to run docz again typing yarn docz dev in my terminal and it throws me this:

screen shot 2018-06-15 at 11 40 05

My index.mdx file looks like this:

---
name: Deudas
---

import { Playground } from 'docz'
import { StatusLabel, STATUSES } from './debtsList'

# StatusLabel

<Playground>
  {STATUSES.map(({ id, label, tagType }) => (
    <StatusLabel key={id} label={label} tagType={tagType} />
  ))}
</Playground>

I don't know if I'm missing something and this is my fault but it happens in my both laptops

To Reproduce

  1. run yarn add -D docz in the terminal in the project folder
  2. create an index.mdx file with the code pasted above
  3. run yarn docz dev
  4. See error

Enviroment

  • OS: [e.g. OSX 10.13.45]
  • Node/npm version: [e.g. Node 8.9.4/npm 5.6.0]

Additional context/Screenshots
my package.json :

{
  "name": "rtd-frontend",
  "private": true,
  "description": "Servir de frontend para interactuar con __RTD API__ para los ARD y Negociadores.",
  "standard": {
    "parser": "babel-eslint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "*.{js, scss}": [
        "prettier-standard",
        "git add"
      ]
    }
  },
  "dependencies": {
    "accounting": "^0.4.1",
    "axios": "^0.18.0",
    "bulma": "^0.6.2",
    "bulma-accordion": "^1.0.1",
    "bulma-pageloader": "^1.0.1",
    "bulma-steps": "^1.0.2",
    "bulma-timeline": "^2.0.1",
    "chai": "^4.1.2",
    "classnames": "^2.2.5",
    "enzyme": "^3.0.0",
    "enzyme-adapter-react-15": "^1.0.0",
    "events": "^1.1.1",
    "jsdom": "^11.2.0",
    "jsoneditor": "^5.9.6",
    "lodash": "^4.17.10",
    "mobx": "^4.1.0",
    "mobx-react": "^5.0.0",
    "mocha": "^3.5.3",
    "moment": "^2.17.1",
    "prop-types": "^15.6.1",
    "query-string": "^4.3.2",
    "react": "^15.3.2",
    "react-addons-test-utils": "^15.6.2",
    "react-addons-update": "^15.4.2",
    "react-alert": "^2.4.0",
    "react-async-loader": "^0.1.2",
    "react-datepicker": "^0.52.0",
    "react-document-title": "^2.0.2",
    "react-dom": "^15.3.2",
    "react-google-login": "^2.9.3",
    "react-image-zoom": "^0.7.0",
    "react-router": "^3.0.2",
    "react-select": "^1.0.0-rc.5",
    "react-toastify": "^3.4.2",
    "react-tooltip": "^3.3.0",
    "recharts": "^0.21.2",
    "sinon": "^4.0.0",
    "stackdriver-errors-js": "^0.4.0",
    "store": "2.0.3",
    "validator": "^7.0.0",
    "validatorjs": "^3.14.2"
  },
  "scripts": {
    "deploy": "rm -rf build && mkdir build && npm run css && cp -R ./public/. ./build && npm run build",
    "build": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js -p",
    "deploy-sandbox": "rm -rf build && mkdir build && npm run css && cp -R ./public/. ./build && npm run build-sandbox",
    "build-sandbox": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=sandbox node_modules/webpack/bin/webpack.js -p",
    "test": "NODE_ENV=test mocha --compilers js:babel-register --require ./test/helpers.js --require ./test/dom.js --recursive",
    "tdd": "npm test -- --watch",
    "css": "node_modules/node-sass/bin/node-sass public/css/src/main.scss public/css/main.css --output-style compressed"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.28.11",
    "docz": "^0.2.4",
    "ejs-loader": "^0.3.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.0.0-rc.6",
    "jest": "^21.1.0",
    "lint-staged": "^7.1.2",
    "node-sass": "^4.9.0",
    "prettier-standard": "^8.0.1",
    "react-test-renderer": "^15.6.2",
    "sass-loader": "^7.0.3",
    "standard": "^11.0.1",
    "style-loader": "^0.21.0",
    "url-loader": "^0.5.7",
    "webpack": "^3.11",
    "webpack-dev-server": "^2.11.1"
  }
}

issue when installing through NPM

Bug Report

When installed through NPM the script refuses to run, reporting that its unable to find a webpack module. When installing through Yarn it works as described in the docs

To Reproduce

  1. run 'npm i -D docx' in project directory
  2. add 'docz dev' script to package.json
  3. run dev script
  4. see glorious broken output
module.js:549
    throw err;
    ^

Error: Cannot find module 'webpack/schemas/WebpackOptions.json'

Expected behavior

NPM and Yarn should behave the same

Enviroment

  • OS: OSX 10.13.4
  • Node/npm version: npm 6.1.0

My library generates a CSS file, I'd like to watch it and include it

Question

Description
I have a library of components (TS, React, SCSS) that follows a very simple structure. I've developed a tool similar to Docz but I'd like to give Docz a try. Having Docz use the TSX components is easy, but I have no idea how to include in the generated HTML my project's generated CSS.

Give more information about your doubt

Should this be a plugin ? Or should I somehow use webpack for that ? I have no idea. ¯_(ツ)_/¯

Also, thanks a lot for this project, it looks great !

How to compile React Component with less or css?

How to compile React Component with less or css? Our UI Library in private npm registry just compiled to es5 and we didn't compile less(We compiled less in our business project with webpack).

Routing problem

Bug Report

Describe the bug

Routes are active only for the current session. If someone shares the link to one of the pages in the documentation (or even reload the page), they will come across a 404 page.

To Reproduce

  1. Go to your documentation.
  2. Click on a new section.
  3. You'll get a root like domain.com/section
  4. Access this url on a new tab

Expected behavior

Access the shared page

2018-06-15_11 56 11

Nested lists in sidebar navigation

Is it possible to have nested lists in the sidebar navigation? I am using the route front-matter and I would like the navigation to follow the hierarchy of my files.

e.g.

- Components
  - Atoms
    - Buttons
    - Heading
  - Molecules
	- Masthead

Docz dosent find custom paths

Hi, I have this config on my webpack:

    resolve: {
      modules: [
        '.',
        '..',
        __dirname,
        __dirname + '/js',
        'node_modules'
      ]
   }

So, in can import without use things like '../'

import Link from 'components/Link'

But on docz, got a error (file not found)

 ERROR  Failed to compile with 8 errors17:02:37

These dependencies were not found:

* components/base in ./js/components/button/ButtonCircle.jsx, ./js/components/button/ButtonSquare.jsx
* components/icons in ./js/components/button/ButtonCircle.jsx, ./js/components/button/ButtonSquare.jsx
* components/link in ./js/components/button/Button.jsx

Is there a way to config root paths to find components on docz?

Unable to get propTypes or props from component instance

When I console.log(MyComponent.proptypes) in my normal development environment I able to see all the propTypes console out correctly. However, it console undefined when it import into .mdx same goes to console.log(MyComponent.props)). The only thing console out correctly is console.log(MyComponent.defaultProps), the console is in the MyComponent/index.js it self.

To Reproduce

  1. Create a new class MyComponent extends Component with propTypes
  2. put in a console.log(MyComponent.props) in render() function
  3. Run dev server and see the console
  4. Create .mdx file import MyComponent
  5. Run docz dev and see undefined in the console

Related question from stackoverflow

I not sure this is a docz bug or react bug, but it preventing me to use docz since I need to pass down the rest of the props to the button DOM by {...omit(this.props, Object.keys(Button.defaultProps))} and it throw Error

Uncaught TypeError: Cannot convert undefined or null to object

Enviroment

{
  "engines": {
    "node": "8.11.1",
    "npm": "5.7.1",
    "yarn": "1.6.0"
  }
}

tsx support

My project created by create-react-app-typescript. I tried to import .tsx component but got 'This relative module was not found' message. Is the usage incorrect or is it not yet supported?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.