mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 02:11:07 +08:00
Merge branch 'next' into pr/Rikpat/9292
# Conflicts: # lib/components/package.json
This commit is contained in:
Norbert de Langen
commit
baffa1fe8f
@ -3,7 +3,9 @@ import { execSync } from 'child_process';
|
||||
|
||||
execSync('npm install lodash');
|
||||
|
||||
const { flatten, intersection, isEmpty } = require('lodash');
|
||||
const flatten = require('lodash/flatten');
|
||||
const intersection = require('lodash/intersection');
|
||||
const isEmpty = require('lodash/isEmpty');
|
||||
|
||||
const pkg = require('../../package.json'); // eslint-disable-line import/newline-after-import
|
||||
const prLogConfig = pkg['pr-log'];
|
||||
|
||||
37
.eslintrc.js
37
.eslintrc.js
@ -1,46 +1,11 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@storybook/eslint-config-storybook'],
|
||||
rules: {
|
||||
'import/extensions': [
|
||||
'error',
|
||||
'never',
|
||||
{ ignorePackages: true, md: 'always', svg: 'always', json: 'always', tag: 'always' },
|
||||
],
|
||||
'import/no-unresolved': ['error', { ignore: ['@storybook'] }],
|
||||
'react/state-in-constructor': 'off',
|
||||
'react/static-property-placement': 'off',
|
||||
'react/jsx-props-no-spreading': 'off',
|
||||
'react/jsx-fragments': 'off',
|
||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||
'@typescript-eslint/no-object-literal-type-assertion': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'react/sort-comp': [
|
||||
'error',
|
||||
{
|
||||
order: [
|
||||
'staticLifecycle',
|
||||
'static-methods',
|
||||
'instance-variables',
|
||||
'lifecycle',
|
||||
'/^on.+$/',
|
||||
'/^(get|set)(?!(DerivedStateFromProps|SnapshotBeforeUpdate$)).+$/',
|
||||
'instance-methods',
|
||||
'instance-variables',
|
||||
'everything-else',
|
||||
'render',
|
||||
],
|
||||
groups: {
|
||||
staticLifecycle: ['displayName', 'propTypes', 'defaultProps', 'getDerivedStateFromProps'],
|
||||
},
|
||||
},
|
||||
],
|
||||
'max-classes-per-file': 'off',
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: [
|
||||
'**/__tests__/**',
|
||||
'**/__testfixtures__/**',
|
||||
'**/*.test.*',
|
||||
'**/*.stories.*',
|
||||
'**/storyshots/**/stories/**',
|
||||
|
||||
@ -1 +0,0 @@
|
||||
.yarn
|
||||
1632
CHANGELOG.md
1632
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@ -236,14 +236,14 @@ To avoid that now you have to manually pass asyncStorage to React Native Storybo
|
||||
|
||||
Solution:
|
||||
|
||||
- Use `require('@react-native-community/async-storage').AsyncStorage` for React Native v0.59 and above.
|
||||
- Use `require('@react-native-community/async-storage').default` for React Native v0.59 and above.
|
||||
- Use `require('react-native').AsyncStorage` for React Native v0.58 or below.
|
||||
- Use `null` to disable Async Storage completely.
|
||||
|
||||
```javascript
|
||||
getStorybookUI({
|
||||
...
|
||||
asyncStorage: require('@react-native-community/async-storage').AsyncStorage || require('react-native').AsyncStorage || null
|
||||
asyncStorage: require('@react-native-community/async-storage').default || require('react-native').AsyncStorage || null
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
88
ROADMAP.md
88
ROADMAP.md
@ -1,88 +0,0 @@
|
||||
# Roadmap
|
||||
|
||||
## Table of contents
|
||||
|
||||
* [New features](#new-features)
|
||||
+ [Responsive + multi-device viewports preview.](#responsive--multi-device-viewports-preview)
|
||||
+ [Automatic story detection](#automatic-story-detection)
|
||||
+ [Theme ability and override core UI components](#theme-ability-and-override-core-ui-components)
|
||||
+ [Add a playground addon](#add-a-playground-addon)
|
||||
+ [See multiple (or all) stories in 1 preview.](#see-multiple--or-all--stories-in-1-preview)
|
||||
* [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
|
||||
+ [Aurelia](#aurelia)
|
||||
* [Breaking changes](#breaking-changes)
|
||||
+ [Addon API](#addon-api)
|
||||
+ [API for adding stories](#api-for-adding-stories)
|
||||
* [Documentation](#documentation)
|
||||
+ [Better design](#better-design)
|
||||
+ [Record videos and write blog post on how to use, tweak & develop storybook](#record-videos-and-write-blog-post-on-how-to-use--tweak---develop-storybook)
|
||||
|
||||
## New features
|
||||
|
||||
Doing these will be backwards compatible.
|
||||
|
||||
### Responsive + multi-device viewports preview.
|
||||
|
||||
If you're smart about it you can already view the preview on multiple devices and windows. It's an iframe after-all.
|
||||
But story selection and addon-settings are not synced.
|
||||
We want to make this much much simpler and a core feature of storybook.
|
||||
|
||||
### Automatic story detection
|
||||
|
||||
Some tools are doing automatic file detection, jest for example.
|
||||
We think such a feature is highly needed. A lot of users are already hacking this themselves using webpack specific features.
|
||||
|
||||
### Themeability and override core UI components
|
||||
|
||||
Storybook is often used inside product companies and agencies. We want to help them have a sense of quality and immersion.
|
||||
We're interested in full customizability of our UI, though addons and options.
|
||||
|
||||
### Add a playground addon
|
||||
|
||||
Many other styleguide-type projects have what's called a playground, where developers can change the code rendering the component inside the app.
|
||||
Storybook has a very tight connection with your editor, and it has a knobs addon.
|
||||
But we still see value in an addon that will allow the workflow of a playground.
|
||||
|
||||
### See multiple (or all) stories in 1 preview.
|
||||
|
||||
Storybook's philosophy is about describing small bits in a variety of states.
|
||||
However, some components are best understood when viewed in multiple varieties in 1 view.
|
||||
It's quite common to see users write a single story, with wrapper components and multiple instances of the component the story is about.
|
||||
We plan to add a second mode to storybook that will allow you to see all stories in 1 preview.
|
||||
That way you can write your stories how they are best, and preview them how you like.
|
||||
|
||||
## Supporting other frameworks and libraries
|
||||
|
||||
We believe in the power of react, and think it's the right choice for a lot of projects.
|
||||
But it's up to you and your team to decide your stack.
|
||||
Unfortunately, if you choose anything not from the list of [supported frameworks](README.md#supported-frameworks) you can not use storybook.
|
||||
|
||||
We want you to be able to use storybook with the framework / library of your choice.
|
||||
|
||||
### Aurelia
|
||||
|
||||
We're reaching out to the Aurelia maintainers to cooperate on this.
|
||||
|
||||
## Breaking changes
|
||||
|
||||
### Addon API
|
||||
|
||||
Our addon api is limited and will eventually have to be improved to accommodate better more optimized and modern addons.
|
||||
|
||||
### API for adding stories
|
||||
|
||||
Currently, it's getting hard to set up a story that has data/options for multiple addons.
|
||||
We want to support this but will likely mean we will have to change the `add` method's API.
|
||||
|
||||
## Documentation
|
||||
|
||||
### Better design
|
||||
|
||||
We have a new logo, so the next step is an overhaul of our documentation site.
|
||||
|
||||
### Record videos and write blog posts on how to use, tweak & develop storybook
|
||||
|
||||
- writing addons,
|
||||
- choosing the right addons.
|
||||
- how to start developing on our codebase.
|
||||
- how to use storybook itself and the CLI.
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.0.0-alpha.12",
|
||||
"version": "6.0.0-alpha.13",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -32,13 +32,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-alpha.12",
|
||||
"@storybook/api": "6.0.0-alpha.12",
|
||||
"@storybook/client-api": "6.0.0-alpha.12",
|
||||
"@storybook/client-logger": "6.0.0-alpha.12",
|
||||
"@storybook/components": "6.0.0-alpha.12",
|
||||
"@storybook/core-events": "6.0.0-alpha.12",
|
||||
"@storybook/theming": "6.0.0-alpha.12",
|
||||
"@storybook/addons": "6.0.0-alpha.13",
|
||||
"@storybook/api": "6.0.0-alpha.13",
|
||||
"@storybook/client-api": "6.0.0-alpha.13",
|
||||
"@storybook/client-logger": "6.0.0-alpha.13",
|
||||
"@storybook/components": "6.0.0-alpha.13",
|
||||
"@storybook/core-events": "6.0.0-alpha.13",
|
||||
"@storybook/theming": "6.0.0-alpha.13",
|
||||
"axe-core": "^3.3.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.0.0-alpha.12",
|
||||
"version": "6.0.0-alpha.13",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,12 +27,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-alpha.12",
|
||||
"@storybook/api": "6.0.0-alpha.12",
|
||||
"@storybook/client-api": "6.0.0-alpha.12",
|
||||
"@storybook/components": "6.0.0-alpha.12",
|
||||
"@storybook/core-events": "6.0.0-alpha.12",
|
||||
"@storybook/theming": "6.0.0-alpha.12",
|
||||
"@storybook/addons": "6.0.0-alpha.13",
|
||||
"@storybook/api": "6.0.0-alpha.13",
|
||||
"@storybook/client-api": "6.0.0-alpha.13",
|
||||
"@storybook/components": "6.0.0-alpha.13",
|
||||
"@storybook/core-events": "6.0.0-alpha.13",
|
||||
"@storybook/theming": "6.0.0-alpha.13",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.0.0-alpha.12",
|
||||
"version": "6.0.0-alpha.13",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,12 +31,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-alpha.12",
|
||||
"@storybook/api": "6.0.0-alpha.12",
|
||||
"@storybook/client-logger": "6.0.0-alpha.12",
|
||||
"@storybook/components": "6.0.0-alpha.12",
|
||||
"@storybook/core-events": "6.0.0-alpha.12",
|
||||
"@storybook/theming": "6.0.0-alpha.12",
|
||||
"@storybook/addons": "6.0.0-alpha.13",
|
||||
"@storybook/api": "6.0.0-alpha.13",
|
||||
"@storybook/client-logger": "6.0.0-alpha.13",
|
||||
"@storybook/components": "6.0.0-alpha.13",
|
||||
"@storybook/core-events": "6.0.0-alpha.13",
|
||||
"@storybook/theming": "6.0.0-alpha.13",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "6.0.0-alpha.12",
|
||||
"version": "6.0.0-alpha.13",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-alpha.12",
|
||||
"@storybook/addons": "6.0.0-alpha.13",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "6.0.0-alpha.12",
|
||||
"version": "6.0.0-alpha.13",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"preact",
|
||||
@ -27,10 +27,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-alpha.12",
|
||||
"@storybook/api": "6.0.0-alpha.12",
|
||||
"@storybook/components": "6.0.0-alpha.12",
|
||||
"@storybook/core-events": "6.0.0-alpha.12",
|
||||
"@storybook/addons": "6.0.0-alpha.13",
|
||||
"@storybook/api": "6.0.0-alpha.13",
|
||||
"@storybook/components": "6.0.0-alpha.13",
|
||||
"@storybook/core-events": "6.0.0-alpha.13",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "6.0.0-alpha.12",
|
||||
"version": "6.0.0-alpha.13",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,11 +31,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-alpha.12",
|
||||
"@storybook/api": "6.0.0-alpha.12",
|
||||
"@storybook/components": "6.0.0-alpha.12",
|
||||
"@storybook/core-events": "6.0.0-alpha.12",
|
||||
"@storybook/theming": "6.0.0-alpha.12",
|
||||
"@storybook/addons": "6.0.0-alpha.13",
|
||||
"@storybook/api": "6.0.0-alpha.13",
|
||||
"@storybook/components": "6.0.0-alpha.13",
|
||||
"@storybook/core-events": "6.0.0-alpha.13",
|
||||
"@storybook/theming": "6.0.0-alpha.13",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "6.0.0-alpha.12",
|
||||
"version": "6.0.0-alpha.13",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -33,12 +33,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-alpha.12",
|
||||
"@storybook/api": "6.0.0-alpha.12",
|
||||
"@storybook/client-logger": "6.0.0-alpha.12",
|
||||
"@storybook/components": "6.0.0-alpha.12",
|
||||
"@storybook/core-events": "6.0.0-alpha.12",
|
||||
"@storybook/theming": "6.0.0-alpha.12",
|
||||
"@storybook/addons": "6.0.0-alpha.13",
|
||||
"@storybook/api": "6.0.0-alpha.13",
|
||||
"@storybook/client-logger": "6.0.0-alpha.13",
|
||||
"@storybook/components": "6.0.0-alpha.13",
|
||||
"@storybook/core-events": "6.0.0-alpha.13",
|
||||
"@storybook/theming": "6.0.0-alpha.13",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
BIN
addons/docs/docs/media/props-tables-hero.png
Normal file
BIN
addons/docs/docs/media/props-tables-hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
97
addons/docs/docs/props-tables.md
Normal file
97
addons/docs/docs/props-tables.md
Normal file
@ -0,0 +1,97 @@
|
||||
<center>
|
||||
<img src="./media/props-tables-hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
<h1>Storybook Docs Props Tables</h1>
|
||||
|
||||
Storybook Docs automatically generates props tables for components in supported frameworks. This document is a consolidated summary of prop tables, provides instructions for reporting bugs, and list known limitations for each framework.
|
||||
|
||||
- [Usage](#usage)
|
||||
- [Reporting a bug](#reporting-a-bug)
|
||||
- [Known limitations](#known-limitations)
|
||||
- [React](#react)
|
||||
- [Vue](#vue)
|
||||
- [Angular](#angular)
|
||||
- [Web components](#web-components)
|
||||
- [Ember](#ember)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Usage
|
||||
|
||||
For framework-specific setup instructions, see the framework's README: [React](../../react/README.md), [Vue](../../vue/README.md), [Angular](../../angular/README.md), [Web Components](../../web-components/README.md), [Ember](../../ember/README.md).
|
||||
|
||||
To use the props table in [DocsPage](./docspage.md), simply export a component property on your stories metadata:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
export default {
|
||||
title: 'MyComponent',
|
||||
component: MyComponent,
|
||||
};
|
||||
// stories etc...
|
||||
```
|
||||
|
||||
To use the props table in [MDX](./mdx.md), use the `Props` block:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.mdx
|
||||
import { Props } from '@storybook/addon-docs/blocks';
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
# My Component!
|
||||
|
||||
<Props of={MyComponent} />
|
||||
```
|
||||
|
||||
## Reporting a bug
|
||||
|
||||
Extracting component properties from source is a tricky problem with thousands of corner cases. We've designed this package and its tests to accurately isolate problems, since the cause could either be in this package or (likely) one of the packages it depends on.
|
||||
|
||||
If you're seeing a problem with your prop table, here's what to do.
|
||||
|
||||
First, look to see if there's already a test case that corresponds to your situation. If there is, it should be documented in the [Known Limitations](#known-limitations) section above. There should also be one or more corresponding test fixtures contained in this package. For example, if you are using React, look under the directory `./src/frameworks/react/__testfixtures__`.
|
||||
|
||||
If your problem is not already represented here, do the following:
|
||||
|
||||
1. Create a **MINIMAL** repro for your problem. Each case should be just a few lines of code.
|
||||
2. Place it in the appropriate directory `./src/frameworks/<framework>/__testfixtures__/`, e.g. `./src/frameworks/react/__testfixtures__/XXXX-some-description`, where `XXXX` is the corresponding github issue.
|
||||
3. Run the tests for your `<framework>`, e.g. `yarn jest --testPathPattern=react-properties.test.ts --watch`
|
||||
4. Inspect the output files for your test case.
|
||||
5. Add the example to the appropriate stories file, e.g. `react-properties.stories.ts` for `react`, for a visual repro
|
||||
|
||||
If the problem appears to be an issue with this library, file an issue and include a PR that includes your repro.
|
||||
|
||||
If the problem appears to be an issue with the sub-package, please file an issue on the appropriate sub-package, document the limitation in [Known Limitations](#known-limitations) below, link to that issue, and submit a PR including the updated documentation and fixtures/snapshots.
|
||||
|
||||
## Known limitations
|
||||
|
||||
This package relies on a variety of sub-packages to extract property information from components. Many of the bugs in this package correspond to bugs in a sub-package. Since we don't maintain the sub-packages, the best we can do for now is (1) document these limitations, (2) provide clean reproductions to the sub-package, (3) optionally provide PRs to those packages to fix the problems.
|
||||
|
||||
### React
|
||||
|
||||
SB Docs for React uses `babel-plugin-react-docgen`/`react-docgen` for both JS PropTypes prop tables and, as of 6.0, TypeScript-driven props tables.
|
||||
|
||||
### Vue
|
||||
|
||||
SB Docs for Vue uses `vue-docgen-loader`/`vue-docgen-api` for SFC and JSX components.
|
||||
|
||||
### Angular
|
||||
|
||||
SB Docs for Angular uses `compodoc` for prop table information.
|
||||
|
||||
### Web components
|
||||
|
||||
SB Docs for Web-components uses `custom-elements.json` for prop table information.
|
||||
|
||||
### Ember
|
||||
|
||||
SB Docs for Ember uses `yui-doc` for prop table information.
|
||||
|
||||
## More resources
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
|
||||
- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
|
||||
- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.0.0-alpha.12",
|
||||
"version": "6.0.0-alpha.13",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,14 +45,14 @@
|
||||
"@mdx-js/loader": "^1.5.1",
|
||||
"@mdx-js/mdx": "^1.5.1",
|
||||
"@mdx-js/react": "^1.5.1",
|
||||
"@storybook/addons": "6.0.0-alpha.12",
|
||||
"@storybook/api": "6.0.0-alpha.12",
|
||||
"@storybook/components": "6.0.0-alpha.12",
|
||||
"@storybook/core-events": "6.0.0-alpha.12",
|
||||
"@storybook/addons": "6.0.0-alpha.13",
|
||||
"@storybook/api": "6.0.0-alpha.13",
|
||||
"@storybook/components": "6.0.0-alpha.13",
|
||||
"@storybook/core-events": "6.0.0-alpha.13",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/postinstall": "6.0.0-alpha.12",
|
||||
"@storybook/source-loader": "6.0.0-alpha.12",
|
||||
"@storybook/theming": "6.0.0-alpha.12",
|
||||
"@storybook/postinstall": "6.0.0-alpha.13",
|
||||
"@storybook/source-loader": "6.0.0-alpha.13",
|
||||
"@storybook/theming": "6.0.0-alpha.13",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -69,16 +69,25 @@
|
||||
"remark-slug": "^5.1.2",
|
||||
"ts-dedent": "^1.1.1",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"vue-docgen-api": "^4.1.0",
|
||||
"vue-docgen-loader": "^1.3.0-beta.0"
|
||||
"vue-docgen-api": "^4.7.0",
|
||||
"vue-docgen-loader": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "6.0.0-alpha.13",
|
||||
"@storybook/web-components": "6.0.0-alpha.13",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.3",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/prop-types": "^15.5.9",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"jest-specific-snapshot": "^2.0.0"
|
||||
"babel-plugin-react-docgen": "^4.1.0",
|
||||
"cross-spawn": "^7.0.1",
|
||||
"jest-specific-snapshot": "^2.0.0",
|
||||
"lit-html": "^1.0.0",
|
||||
"require-from-string": "^2.0.2",
|
||||
"styled-components": "^5.0.1",
|
||||
"tmp": "^0.1.0",
|
||||
"web-component-analyzer": "^1.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,185 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable no-console */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
Output,
|
||||
ViewChild,
|
||||
HostListener,
|
||||
HostBinding,
|
||||
ElementRef,
|
||||
} from '@angular/core';
|
||||
|
||||
export const exportedConstant = 'An exported constant';
|
||||
|
||||
export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
|
||||
|
||||
export interface ISomeInterface {
|
||||
one: string;
|
||||
two: boolean;
|
||||
three: any[];
|
||||
}
|
||||
|
||||
/**
|
||||
* This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
|
||||
*
|
||||
* It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
|
||||
* like **bold**, _italic_, and `inline code`.
|
||||
*
|
||||
* > How you like dem apples?! It's never been easier to document all your components.
|
||||
*
|
||||
* @string Hello world
|
||||
* @link [Example](http://example.com)
|
||||
* @code `ThingThing`
|
||||
* @html <span class="badge">aaa</span>
|
||||
*/
|
||||
@Component({
|
||||
selector: 'doc-button',
|
||||
})
|
||||
export class InputComponent<T> {
|
||||
@ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
|
||||
|
||||
/** Appearance style of the button. */
|
||||
@Input()
|
||||
public appearance: 'primary' | 'secondary' = 'secondary';
|
||||
|
||||
/** Sets the button to a disabled state. */
|
||||
@Input()
|
||||
public isDisabled = false;
|
||||
|
||||
/**
|
||||
* The inner text of the button.
|
||||
*
|
||||
* @required
|
||||
*/
|
||||
@Input()
|
||||
public label: string;
|
||||
|
||||
/** Size of the button. */
|
||||
@Input()
|
||||
public size?: ButtonSize = 'medium';
|
||||
|
||||
/**
|
||||
* Some input you shouldn't use.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@Input()
|
||||
public somethingYouShouldNotUse = false;
|
||||
|
||||
/**
|
||||
* Handler to be called when the button is clicked by a user.
|
||||
*
|
||||
* Will also block the emission of the event if `isDisabled` is true.
|
||||
*/
|
||||
@Output()
|
||||
public onClick = new EventEmitter<Event>();
|
||||
|
||||
/**
|
||||
* This is an internal method that we don't want to document and have added the `ignore` annoation to.
|
||||
*
|
||||
* @ignore
|
||||
*/
|
||||
public handleClick(event: Event) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (!this.isDisabled) {
|
||||
this.onClick.emit(event);
|
||||
}
|
||||
}
|
||||
|
||||
private _inputValue = 'some value';
|
||||
|
||||
/** Setter for `inputValue` that is also an `@Input`. */
|
||||
@Input()
|
||||
public set inputValue(value: string) {
|
||||
this._inputValue = value;
|
||||
}
|
||||
|
||||
/** Getter for `inputValue`. */
|
||||
public get inputValue() {
|
||||
return this._inputValue;
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event.target'])
|
||||
onClickListener(btn) {
|
||||
console.log('button', btn);
|
||||
}
|
||||
|
||||
@HostBinding('class.focused') focus = false;
|
||||
|
||||
/**
|
||||
* Returns all the CSS classes for the button.
|
||||
*
|
||||
* @ignore
|
||||
*/
|
||||
public get classes(): string[] {
|
||||
return [this.appearance, this.size].filter(_class => !!_class).map(_class => `btn-${_class}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
public ignoredProperty = 'Ignore me';
|
||||
|
||||
/** Public value. */
|
||||
public internalProperty = 'Public hello';
|
||||
|
||||
/** Private value. */
|
||||
private _value = 'Private hello';
|
||||
|
||||
/** Set the private value. */
|
||||
public set value(value: string | number) {
|
||||
this._value = `${value}`;
|
||||
}
|
||||
|
||||
/** Get the private value. */
|
||||
public get value(): string | number {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
/**
|
||||
* An internal calculation method which adds `x` and `y` together.
|
||||
*
|
||||
* @param x Some number you'd like to use.
|
||||
* @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
|
||||
*/
|
||||
public calc(x: number, y: string | number): number {
|
||||
return x + parseInt(`${y}`, 10);
|
||||
}
|
||||
|
||||
/** A public method using an interface. */
|
||||
public publicMethod(things: ISomeInterface) {
|
||||
console.log(things);
|
||||
}
|
||||
|
||||
/**
|
||||
* A protected method.
|
||||
*
|
||||
* @param id Some `id`.
|
||||
*/
|
||||
protected protectedMethod(id?: number) {
|
||||
console.log(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* A private method.
|
||||
*
|
||||
* @param password Some `password`.
|
||||
*/
|
||||
private privateMethod(password: string) {
|
||||
console.log(password);
|
||||
}
|
||||
|
||||
@Input('showKeyAlias')
|
||||
public showKey: keyof T;
|
||||
|
||||
@Input()
|
||||
public set item(item: T[]) {
|
||||
this.processedItem = item;
|
||||
}
|
||||
|
||||
public processedItem: T[];
|
||||
}
|
||||
@ -0,0 +1,230 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`angular component properties doc-button 1`] = `
|
||||
Object {
|
||||
"sections": Object {
|
||||
"inputs": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'secondary'",
|
||||
},
|
||||
"description": "<p>Appearance style of the button. </p>
|
||||
",
|
||||
"name": "appearance",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "\\"primary\\" | \\"secondary\\"",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
|
||||
",
|
||||
"name": "inputValue",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "false",
|
||||
},
|
||||
"description": "<p>Sets the button to a disabled state. </p>
|
||||
",
|
||||
"name": "isDisabled",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "item",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "[]",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": "<p>The inner text of the button.</p>
|
||||
",
|
||||
"name": "label",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "showKeyAlias",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'medium'",
|
||||
},
|
||||
"description": "<p>Size of the button. </p>
|
||||
",
|
||||
"name": "size",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "ButtonSize",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "false",
|
||||
},
|
||||
"description": "<p>Some input you shouldn't use.</p>
|
||||
",
|
||||
"name": "somethingYouShouldNotUse",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"methods": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "",
|
||||
},
|
||||
"description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
|
||||
",
|
||||
"name": "calc",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"summary": "(x: number, y: string | number) => number",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "",
|
||||
},
|
||||
"description": "<p>A private method.</p>
|
||||
",
|
||||
"name": "privateMethod",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"summary": "(password: string) => void",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "",
|
||||
},
|
||||
"description": "<p>A protected method.</p>
|
||||
",
|
||||
"name": "protectedMethod",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"summary": "(id?: number) => void",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "",
|
||||
},
|
||||
"description": "<p>A public method using an interface. </p>
|
||||
",
|
||||
"name": "publicMethod",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"summary": "(things: ISomeInterface) => void",
|
||||
},
|
||||
},
|
||||
],
|
||||
"outputs": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "new EventEmitter<Event>()",
|
||||
},
|
||||
"description": "<p>Handler to be called when the button is clicked by a user.</p>
|
||||
<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
|
||||
",
|
||||
"name": "onClick",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "EventEmitter",
|
||||
},
|
||||
},
|
||||
],
|
||||
"properties": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'some value'",
|
||||
},
|
||||
"description": "",
|
||||
"name": "_inputValue",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'Private hello'",
|
||||
},
|
||||
"description": "<p>Private value. </p>
|
||||
",
|
||||
"name": "_value",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'Public hello'",
|
||||
},
|
||||
"description": "<p>Public value. </p>
|
||||
",
|
||||
"name": "internalProperty",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": "",
|
||||
"name": "processedItem",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "T[]",
|
||||
},
|
||||
},
|
||||
],
|
||||
"view child": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": "",
|
||||
"name": "buttonRef",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"summary": "ElementRef",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "."
|
||||
},
|
||||
"include": ["./*.ts"]
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import 'jest-specific-snapshot';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import tmp from 'tmp';
|
||||
import { sync as spawnSync } from 'cross-spawn';
|
||||
|
||||
import { findComponentByName, extractPropsFromData } from './compodoc';
|
||||
|
||||
// File hierarchy: __testfixtures__ / some-test-case / input.*
|
||||
const inputRegExp = /^input\..*$/;
|
||||
|
||||
const runCompodoc = (inputPath: string) => {
|
||||
const testDir = path.dirname(inputPath);
|
||||
const { name: tmpDir, removeCallback } = tmp.dirSync();
|
||||
|
||||
// FIXME: for now, this requires a tsconfig.json for each test case. Tried generating
|
||||
// one dynamically in tmpDir, but compodoc doesn't handle absolute paths properly
|
||||
// (and screwed around with relative paths as well, but couldn't get it working)
|
||||
spawnSync('compodoc', ['-p', `${testDir}/tsconfig.json`, '-e', 'json', '-d', tmpDir], {
|
||||
stdio: 'inherit',
|
||||
});
|
||||
const output = fs.readFileSync(`${tmpDir}/documentation.json`, 'utf8');
|
||||
removeCallback();
|
||||
return output;
|
||||
};
|
||||
|
||||
describe('angular component properties', () => {
|
||||
const fixturesDir = path.join(__dirname, '__testfixtures__');
|
||||
fs.readdirSync(fixturesDir, { withFileTypes: true }).forEach(testEntry => {
|
||||
if (testEntry.isDirectory()) {
|
||||
const testDir = path.join(fixturesDir, testEntry.name);
|
||||
const testFile = fs.readdirSync(testDir).find(fileName => inputRegExp.test(fileName));
|
||||
if (testFile) {
|
||||
it(testEntry.name, () => {
|
||||
const inputPath = path.join(testDir, testFile);
|
||||
|
||||
// snapshot the output of compodoc
|
||||
const compodocOutput = runCompodoc(inputPath);
|
||||
const compodocJson = JSON.parse(compodocOutput);
|
||||
expect(compodocJson).toMatchSpecificSnapshot(path.join(testDir, 'compodoc.snapshot'));
|
||||
|
||||
// snapshot the output of addon-docs angular-properties
|
||||
const componentData = findComponentByName('InputComponent', compodocJson);
|
||||
const properties = extractPropsFromData(componentData);
|
||||
expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot'));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -71,6 +71,10 @@ const mapItemToSection = (key: string, item: Method | Property): string => {
|
||||
}
|
||||
};
|
||||
|
||||
export const findComponentByName = (name: string, compodocJson: CompodocJson) =>
|
||||
compodocJson.components.find((c: Component) => c.name === name) ||
|
||||
compodocJson.directives.find((c: Directive) => c.name === name);
|
||||
|
||||
const getComponentData = (component: Component | Directive) => {
|
||||
if (!component) {
|
||||
return null;
|
||||
@ -79,10 +83,7 @@ const getComponentData = (component: Component | Directive) => {
|
||||
const compodocJson = getCompdocJson();
|
||||
checkValidCompodocJson(compodocJson);
|
||||
const { name } = component;
|
||||
return (
|
||||
compodocJson.components.find((c: Component) => c.name === name) ||
|
||||
compodocJson.directives.find((c: Directive) => c.name === name)
|
||||
);
|
||||
return findComponentByName(name, compodocJson);
|
||||
};
|
||||
|
||||
const displaySignature = (item: Method): string => {
|
||||
@ -92,12 +93,7 @@ const displaySignature = (item: Method): string => {
|
||||
return `(${args.join(', ')}) => ${item.returnType}`;
|
||||
};
|
||||
|
||||
export const extractProps = (component: Component | Directive) => {
|
||||
const componentData = getComponentData(component);
|
||||
if (!componentData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
export const extractPropsFromData = (componentData: Directive) => {
|
||||
const sectionToItems: Sections = {};
|
||||
const compodocClasses = ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass'];
|
||||
type COMPODOC_CLASS = 'propertiesClass' | 'methodsClass' | 'inputsClass' | 'outputsClass';
|
||||
@ -143,6 +139,11 @@ export const extractProps = (component: Component | Directive) => {
|
||||
return isEmpty(sections) ? null : { sections };
|
||||
};
|
||||
|
||||
export const extractProps = (component: Component | Directive) => {
|
||||
const componentData = getComponentData(component);
|
||||
return componentData && extractPropsFromData(componentData);
|
||||
};
|
||||
|
||||
export const extractComponentDescription = (component: Component | Directive) => {
|
||||
const componentData = getComponentData(component);
|
||||
if (!componentData) {
|
||||
|
||||
@ -0,0 +1,102 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8140-js-prop-types-oneof 1`] = `
|
||||
"/* eslint-disable react/no-unused-prop-types */
|
||||
|
||||
/* eslint-disable react/require-default-props */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Alert = props => React.createElement(React.Fragment, null, JSON.stringify(props));
|
||||
|
||||
Alert.defaultProps = {
|
||||
mode: 'static',
|
||||
type: 'warning'
|
||||
};
|
||||
Alert.propTypes = {
|
||||
mode: PropTypes.oneOf(['static', 'timed']),
|
||||
type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']),
|
||||
message: PropTypes.string.isRequired,
|
||||
|
||||
/**
|
||||
* No background or border if static alert
|
||||
*/
|
||||
blank: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* Allows icon override, accepts material icon name
|
||||
*/
|
||||
icon: PropTypes.string
|
||||
};
|
||||
export const component = Alert;
|
||||
Alert.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Alert\\",
|
||||
\\"props\\": {
|
||||
\\"mode\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'static'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"enum\\",
|
||||
\\"value\\": [{
|
||||
\\"value\\": \\"'static'\\",
|
||||
\\"computed\\": false
|
||||
}, {
|
||||
\\"value\\": \\"'timed'\\",
|
||||
\\"computed\\": false
|
||||
}]
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"type\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'warning'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"enum\\",
|
||||
\\"value\\": [{
|
||||
\\"value\\": \\"'success'\\",
|
||||
\\"computed\\": false
|
||||
}, {
|
||||
\\"value\\": \\"'warning'\\",
|
||||
\\"computed\\": false
|
||||
}, {
|
||||
\\"value\\": \\"'error'\\",
|
||||
\\"computed\\": false
|
||||
}, {
|
||||
\\"value\\": \\"'primary'\\",
|
||||
\\"computed\\": false
|
||||
}]
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"message\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"required\\": true,
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"blank\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"bool\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"No background or border if static alert\\"
|
||||
},
|
||||
\\"icon\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"Allows icon override, accepts material icon name\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,27 @@
|
||||
/* eslint-disable react/no-unused-prop-types */
|
||||
/* eslint-disable react/require-default-props */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Alert = props => <>{JSON.stringify(props)}</>;
|
||||
|
||||
Alert.defaultProps = {
|
||||
mode: 'static',
|
||||
type: 'warning',
|
||||
};
|
||||
|
||||
Alert.propTypes = {
|
||||
mode: PropTypes.oneOf(['static', 'timed']),
|
||||
type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']),
|
||||
message: PropTypes.string.isRequired,
|
||||
/**
|
||||
* No background or border if static alert
|
||||
*/
|
||||
blank: PropTypes.bool,
|
||||
/**
|
||||
* Allows icon override, accepts material icon name
|
||||
*/
|
||||
icon: PropTypes.string,
|
||||
};
|
||||
|
||||
export const component = Alert;
|
||||
@ -0,0 +1,64 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8140-js-prop-types-oneof 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'static'",
|
||||
},
|
||||
"description": "",
|
||||
"name": "mode",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'static' | 'timed'",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'warning'",
|
||||
},
|
||||
"description": "",
|
||||
"name": "type",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'success' | 'warning' | 'error' | 'primary'",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "",
|
||||
"name": "message",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "No background or border if static alert",
|
||||
"name": "blank",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "bool",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "Allows icon override, accepts material icon name",
|
||||
"name": "icon",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,22 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8143-ts-imported-types 1`] = `
|
||||
"import React from 'react';
|
||||
export const FooComponent = foo => React.createElement(React.Fragment, null, JSON.stringify(foo));
|
||||
export const component = FooComponent;
|
||||
FooComponent.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"FooComponent\\",
|
||||
\\"props\\": {
|
||||
\\"bar\\": {
|
||||
\\"required\\": true,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"Foo['bar']\\",
|
||||
\\"raw\\": \\"Foo['bar']\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import { Foo } from './types';
|
||||
|
||||
interface FooProps {
|
||||
bar: Foo['bar'];
|
||||
}
|
||||
|
||||
export const FooComponent = (foo: FooProps) => <>{JSON.stringify(foo)}</>;
|
||||
|
||||
export const component = FooComponent;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8143-ts-imported-types 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "0",
|
||||
},
|
||||
"description": "",
|
||||
"name": "bar",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "Foo['bar']",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,3 @@
|
||||
export interface Foo {
|
||||
bar: number;
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8143-ts-react-fc-generics 1`] = `
|
||||
"import React from 'react';
|
||||
export const Text = ({
|
||||
padding = '0',
|
||||
margin
|
||||
}) => React.createElement(React.Fragment, null, \\"Text\\");
|
||||
export const component = Text;
|
||||
Text.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Text\\",
|
||||
\\"props\\": {
|
||||
\\"padding\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'0'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
padding: string;
|
||||
margin: number;
|
||||
}
|
||||
|
||||
export const Text: React.FC<Props> = ({ padding = '0', margin }) => <>Text</>;
|
||||
|
||||
export const component = Text;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8143-ts-react-fc-generics 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'0'",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "padding",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,24 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8279-js-styled-docgen 1`] = `
|
||||
"import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
/**
|
||||
* Use \`A\` to provide a regular link
|
||||
*/
|
||||
|
||||
const A = styled('a')({
|
||||
margin: '8px 0',
|
||||
outline: 'none'
|
||||
});
|
||||
A.displayName = 'Link';
|
||||
A.defaultProps = {
|
||||
children: 'This is a link'
|
||||
};
|
||||
A.propTypes = {
|
||||
/** That should be the clickable element */
|
||||
children: PropTypes.node.isRequired
|
||||
};
|
||||
export default A;
|
||||
export const component = A;"
|
||||
`;
|
||||
@ -0,0 +1,23 @@
|
||||
import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* Use `A` to provide a regular link
|
||||
*/
|
||||
const A = styled('a')({
|
||||
margin: '8px 0',
|
||||
outline: 'none',
|
||||
});
|
||||
|
||||
A.displayName = 'Link';
|
||||
A.defaultProps = {
|
||||
children: 'This is a link',
|
||||
};
|
||||
|
||||
A.propTypes = {
|
||||
/** That should be the clickable element */
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
export default A;
|
||||
|
||||
export const component = A;
|
||||
@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8279-js-styled-docgen 1`] = `
|
||||
Object {
|
||||
"rows": Array [],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,41 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8428-js-static-prop-types 1`] = `
|
||||
"function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
/* eslint-disable react/no-unused-prop-types */
|
||||
|
||||
/* eslint-disable react/require-default-props */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types'; // eslint-disable-next-line react/prefer-stateless-function
|
||||
|
||||
export default class Test extends React.Component {
|
||||
render() {
|
||||
return React.createElement(\\"div\\", null, \\"test\\");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
_defineProperty(Test, \\"propTypes\\", {
|
||||
/**
|
||||
* Please work...
|
||||
*/
|
||||
test: PropTypes.string
|
||||
});
|
||||
|
||||
export const component = Test;
|
||||
Test.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Test\\",
|
||||
\\"props\\": {
|
||||
\\"test\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"Please work...\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,20 @@
|
||||
/* eslint-disable react/no-unused-prop-types */
|
||||
/* eslint-disable react/require-default-props */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
export default class Test extends React.Component {
|
||||
static propTypes = {
|
||||
/**
|
||||
* Please work...
|
||||
*/
|
||||
test: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
return <div>test</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export const component = Test;
|
||||
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8428-js-static-prop-types 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "Please work...",
|
||||
"name": "test",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,33 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8663-js-styled-components 1`] = `
|
||||
"import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
const Box = styled.div\`
|
||||
background-color: \${props => props.bg};
|
||||
\`;
|
||||
Box.propTypes = {
|
||||
bg: PropTypes.string
|
||||
};
|
||||
export const MyBox = props => React.createElement(Box, props);
|
||||
MyBox.propTypes = {
|
||||
// eslint-disable-next-line react/require-default-props
|
||||
bg: PropTypes.string
|
||||
};
|
||||
export const component = MyBox;
|
||||
MyBox.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"MyBox\\",
|
||||
\\"props\\": {
|
||||
\\"bg\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Box = styled.div`
|
||||
background-color: ${props => props.bg};
|
||||
`;
|
||||
|
||||
Box.propTypes = {
|
||||
bg: PropTypes.string,
|
||||
};
|
||||
|
||||
export const MyBox = props => <Box {...props} />;
|
||||
|
||||
MyBox.propTypes = {
|
||||
// eslint-disable-next-line react/require-default-props
|
||||
bg: PropTypes.string,
|
||||
};
|
||||
|
||||
export const component = MyBox;
|
||||
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8663-js-styled-components 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "",
|
||||
"name": "bg",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,49 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8740-ts-multi-props 1`] = `
|
||||
"import React from 'react';
|
||||
export const Header = ({
|
||||
size = 'a',
|
||||
children
|
||||
}) => React.createElement(\\"div\\", {
|
||||
className: size
|
||||
}, children);
|
||||
export const Paragraph = ({
|
||||
size,
|
||||
children
|
||||
}) => React.createElement(\\"div\\", {
|
||||
className: size
|
||||
}, children);
|
||||
Paragraph.defaultProps = {
|
||||
size: 'md'
|
||||
};
|
||||
export const component = Header;
|
||||
Header.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Header\\",
|
||||
\\"props\\": {
|
||||
\\"size\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'a'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false
|
||||
}
|
||||
}
|
||||
};
|
||||
Paragraph.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Paragraph\\",
|
||||
\\"props\\": {
|
||||
\\"size\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'md'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
export interface ElemAProps {
|
||||
size?: 'a' | 'b' | 'c' | 'd';
|
||||
}
|
||||
|
||||
export const Header: React.SFC<ElemAProps> = ({ size = 'a', children }) => (
|
||||
<div className={size}>{children}</div>
|
||||
);
|
||||
|
||||
export interface ElemBProps {
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}
|
||||
|
||||
export const Paragraph: React.SFC<ElemBProps> = ({ size, children }) => (
|
||||
<div className={size}>{children}</div>
|
||||
);
|
||||
|
||||
Paragraph.defaultProps = { size: 'md' };
|
||||
|
||||
export const component = Header;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8740-ts-multi-props 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'a'",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "size",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,36 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
|
||||
"import React, { forwardRef } from 'react';
|
||||
const Button = forwardRef(({
|
||||
disabled = false,
|
||||
variant = 'small',
|
||||
children
|
||||
}, ref) => // eslint-disable-next-line react/button-has-type
|
||||
React.createElement(\\"button\\", {
|
||||
disabled: disabled,
|
||||
ref: ref
|
||||
}, children, \\" \\", variant));
|
||||
Button.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"props\\": {
|
||||
\\"disabled\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"false\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false
|
||||
},
|
||||
\\"variant\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'small'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false
|
||||
}
|
||||
}
|
||||
};
|
||||
export default Button;
|
||||
export const component = Button;"
|
||||
`;
|
||||
@ -0,0 +1,25 @@
|
||||
import React, { forwardRef } from 'react';
|
||||
|
||||
interface ButtonProps {
|
||||
/**
|
||||
* Sets the button size.
|
||||
*/
|
||||
variant?: 'small' | 'large';
|
||||
/**
|
||||
* Disables the button.
|
||||
*/
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ disabled = false, variant = 'small', children }, ref) => (
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
<button disabled={disabled} ref={ref}>
|
||||
{children} {variant}
|
||||
</button>
|
||||
)
|
||||
);
|
||||
|
||||
export default Button;
|
||||
|
||||
export const component = Button;
|
||||
@ -0,0 +1,34 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "disabled",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'small'",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "variant",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,89 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9023-js-hoc 1`] = `
|
||||
"/* eslint-disable react/forbid-prop-types */
|
||||
|
||||
/* eslint-disable react/require-default-props */
|
||||
|
||||
/* eslint-disable react/no-unused-prop-types */
|
||||
|
||||
/* eslint-disable react/prefer-stateless-function */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const withStyles = themeFn => Comp => Comp;
|
||||
|
||||
class Alert extends React.Component {
|
||||
render() {
|
||||
return React.createElement(React.Fragment, null, \\"Alert\\");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Alert.propTypes = {
|
||||
variant: PropTypes.string,
|
||||
dismissible: PropTypes.bool,
|
||||
icon: PropTypes.elementType,
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
Alert.defaultProps = {
|
||||
variant: 'primary',
|
||||
dismissible: false
|
||||
};
|
||||
const StyledAlert = withStyles(theme => ({
|
||||
alert: props => ({
|
||||
backgroundColor: theme.palette[props.variant].main
|
||||
}),
|
||||
message: {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
icon: {
|
||||
marginRight: theme.spacing(2)
|
||||
}
|
||||
}))(Alert);
|
||||
export const component = StyledAlert;
|
||||
Alert.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Alert\\",
|
||||
\\"props\\": {
|
||||
\\"variant\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'primary'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"dismissible\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"false\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"bool\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"icon\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"elementType\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"classes\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"object\\"
|
||||
},
|
||||
\\"required\\": true,
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,39 @@
|
||||
/* eslint-disable react/forbid-prop-types */
|
||||
/* eslint-disable react/require-default-props */
|
||||
/* eslint-disable react/no-unused-prop-types */
|
||||
/* eslint-disable react/prefer-stateless-function */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const withStyles = themeFn => Comp => Comp;
|
||||
|
||||
class Alert extends React.Component {
|
||||
render() {
|
||||
return <>Alert</>;
|
||||
}
|
||||
}
|
||||
Alert.propTypes = {
|
||||
variant: PropTypes.string,
|
||||
dismissible: PropTypes.bool,
|
||||
icon: PropTypes.elementType,
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
Alert.defaultProps = {
|
||||
variant: 'primary',
|
||||
dismissible: false,
|
||||
};
|
||||
|
||||
const StyledAlert = withStyles(theme => ({
|
||||
alert: props => ({
|
||||
backgroundColor: theme.palette[props.variant].main,
|
||||
}),
|
||||
message: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
icon: {
|
||||
marginRight: theme.spacing(2),
|
||||
},
|
||||
}))(Alert);
|
||||
|
||||
export const component = StyledAlert;
|
||||
@ -0,0 +1,54 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9023-js-hoc 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'primary'",
|
||||
},
|
||||
"description": "",
|
||||
"name": "variant",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"description": "",
|
||||
"name": "dismissible",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "bool",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "",
|
||||
"name": "icon",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "elementType",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "",
|
||||
"name": "classes",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "object",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,47 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9399-js-proptypes-shape 1`] = `
|
||||
"import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
export const Credits = ({
|
||||
areas
|
||||
}) => React.createElement(React.Fragment, null, JSON.stringify(areas)); // https://github.com/storybookjs/storybook/issues/9399
|
||||
|
||||
Credits.propTypes = {
|
||||
areas: PropTypes.arrayOf(PropTypes.shape({
|
||||
position: PropTypes.string.isRequired,
|
||||
names: PropTypes.arrayOf(PropTypes.string).isRequired
|
||||
})).isRequired
|
||||
};
|
||||
export const component = Credits;
|
||||
Credits.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Credits\\",
|
||||
\\"props\\": {
|
||||
\\"areas\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"arrayOf\\",
|
||||
\\"value\\": {
|
||||
\\"name\\": \\"shape\\",
|
||||
\\"value\\": {
|
||||
\\"position\\": {
|
||||
\\"name\\": \\"string\\",
|
||||
\\"required\\": true
|
||||
},
|
||||
\\"names\\": {
|
||||
\\"name\\": \\"arrayOf\\",
|
||||
\\"value\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"required\\": true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
\\"required\\": true,
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export const Credits = ({ areas }) => <>{JSON.stringify(areas)}</>;
|
||||
|
||||
// https://github.com/storybookjs/storybook/issues/9399
|
||||
Credits.propTypes = {
|
||||
areas: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
position: PropTypes.string.isRequired,
|
||||
names: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
})
|
||||
).isRequired,
|
||||
};
|
||||
|
||||
export const component = Credits;
|
||||
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9399-js-proptypes-shape 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "",
|
||||
"name": "areas",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": "[object]",
|
||||
"summary": "object[]",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,33 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9465-ts-type-props 1`] = `
|
||||
"import React from 'react';
|
||||
|
||||
const Component = ({
|
||||
disabled = false,
|
||||
children
|
||||
}) => // eslint-disable-next-line react/button-has-type
|
||||
React.createElement(\\"button\\", {
|
||||
disabled: disabled
|
||||
}, children);
|
||||
|
||||
export const component = Component;
|
||||
Component.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Component\\",
|
||||
\\"props\\": {
|
||||
\\"disabled\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"false\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"boolean\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const Component = ({ disabled = false, children }: Props) => (
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
<button disabled={disabled}>{children}</button>
|
||||
);
|
||||
|
||||
export const component = Component;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9465-ts-type-props 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"description": "",
|
||||
"name": "disabled",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,59 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9493-ts-display-name 1`] = `
|
||||
"import styled from '@emotion/styled';
|
||||
import React from 'react';
|
||||
const Wrapper = styled('div')(({
|
||||
theme
|
||||
}) => ({
|
||||
backgroundColor: 'tomato',
|
||||
color: 'white',
|
||||
padding: 10
|
||||
}));
|
||||
|
||||
/**
|
||||
* This message should show up in the Docs panel if everything works fine.
|
||||
*/
|
||||
export const EmpireAlert = ({
|
||||
title = 'Code Yellow',
|
||||
message
|
||||
}) => React.createElement(Wrapper, null, React.createElement(\\"h1\\", null, title), React.createElement(\\"p\\", null, message));
|
||||
EmpireAlert.displayName = 'SomeOtherDisplayName';
|
||||
export const component = EmpireAlert;
|
||||
EmpireAlert.__docgenInfo = {
|
||||
\\"description\\": \\"This message should show up in the Docs panel if everything works fine.\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"SomeOtherDisplayName\\",
|
||||
\\"props\\": {
|
||||
\\"title\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'Code Yellow'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"union\\",
|
||||
\\"raw\\": \\"'Code Red' | 'Code Yellow' | 'Code Green'\\",
|
||||
\\"elements\\": [{
|
||||
\\"name\\": \\"literal\\",
|
||||
\\"value\\": \\"'Code Red'\\"
|
||||
}, {
|
||||
\\"name\\": \\"literal\\",
|
||||
\\"value\\": \\"'Code Yellow'\\"
|
||||
}, {
|
||||
\\"name\\": \\"literal\\",
|
||||
\\"value\\": \\"'Code Green'\\"
|
||||
}]
|
||||
},
|
||||
\\"description\\": \\"A title that brings attention to the alert.\\"
|
||||
},
|
||||
\\"message\\": {
|
||||
\\"required\\": true,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"description\\": \\"A message alerting about Empire activities.\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,37 @@
|
||||
import styled from '@emotion/styled';
|
||||
import React from 'react';
|
||||
|
||||
const Wrapper = styled('div')<{}>(({ theme }) => ({
|
||||
backgroundColor: 'tomato',
|
||||
color: 'white',
|
||||
padding: 10,
|
||||
}));
|
||||
|
||||
type AlertCode = 'Code Red' | 'Code Yellow' | 'Code Green';
|
||||
|
||||
export interface EmpireAlertProps {
|
||||
/**
|
||||
* A title that brings attention to the alert.
|
||||
*/
|
||||
title: AlertCode;
|
||||
/**
|
||||
* A message alerting about Empire activities.
|
||||
*/
|
||||
message: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* This message should show up in the Docs panel if everything works fine.
|
||||
*/
|
||||
export const EmpireAlert: React.FC<EmpireAlertProps> = ({
|
||||
title = 'Code Yellow',
|
||||
message,
|
||||
}: EmpireAlertProps) => (
|
||||
<Wrapper>
|
||||
<h1>{title}</h1>
|
||||
<p>{message}</p>
|
||||
</Wrapper>
|
||||
);
|
||||
EmpireAlert.displayName = 'SomeOtherDisplayName';
|
||||
|
||||
export const component = EmpireAlert;
|
||||
@ -0,0 +1,34 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9493-ts-display-name 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'Code Yellow'",
|
||||
},
|
||||
"description": "A title that brings attention to the alert.",
|
||||
"name": "title",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "union",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "1",
|
||||
},
|
||||
"description": "A message alerting about Empire activities.",
|
||||
"name": "message",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,33 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9556-ts-react-default-exports 1`] = `
|
||||
"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
|
||||
/* eslint-disable react/button-has-type */
|
||||
import React from 'react';
|
||||
export const Button = ({
|
||||
isDisabled = false,
|
||||
...props
|
||||
}) => React.createElement(\\"button\\", _extends({
|
||||
disabled: isDisabled
|
||||
}, props));
|
||||
export const component = Button;
|
||||
Button.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Button\\",
|
||||
\\"props\\": {
|
||||
\\"isDisabled\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"false\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"boolean\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,12 @@
|
||||
/* eslint-disable react/button-has-type */
|
||||
import React from 'react';
|
||||
|
||||
export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
isDisabled?: boolean;
|
||||
}
|
||||
|
||||
export const Button: React.FC<Props> = ({ isDisabled = false, ...props }: Props) => (
|
||||
<button disabled={isDisabled} {...props} />
|
||||
);
|
||||
|
||||
export const component = Button;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9556-ts-react-default-exports 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"description": "",
|
||||
"name": "isDisabled",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,40 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9575-ts-camel-case 1`] = `
|
||||
"import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
const iconButton = function IconButton(props) {
|
||||
return React.createElement(\\"div\\", {
|
||||
className: \\"icon-button\\"
|
||||
}, \\"icon-button\\");
|
||||
};
|
||||
|
||||
iconButton.propTypes = {
|
||||
// eslint-disable-next-line react/no-unused-prop-types
|
||||
color: PropTypes.string
|
||||
};
|
||||
iconButton.defaultProps = {
|
||||
color: 'primary'
|
||||
};
|
||||
iconButton.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"iconButton\\",
|
||||
\\"props\\": {
|
||||
\\"color\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'primary'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};
|
||||
export default iconButton;
|
||||
export const component = iconButton;"
|
||||
`;
|
||||
@ -0,0 +1,25 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { FC } from 'react';
|
||||
|
||||
export interface IProps {
|
||||
/**
|
||||
* button color
|
||||
*/
|
||||
color?: string;
|
||||
}
|
||||
|
||||
const iconButton: FC<IProps> = function IconButton(props) {
|
||||
return <div className="icon-button">icon-button</div>;
|
||||
};
|
||||
|
||||
iconButton.propTypes = {
|
||||
// eslint-disable-next-line react/no-unused-prop-types
|
||||
color: PropTypes.string,
|
||||
};
|
||||
|
||||
iconButton.defaultProps = {
|
||||
color: 'primary',
|
||||
};
|
||||
|
||||
export default iconButton;
|
||||
export const component = iconButton;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9575-ts-camel-case 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'primary'",
|
||||
},
|
||||
"description": "",
|
||||
"name": "color",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,44 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9586-js-react-memo 1`] = `
|
||||
"import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
function Button({
|
||||
label,
|
||||
onClick
|
||||
}) {
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
return React.createElement(\\"button\\", {
|
||||
onClick: onClick
|
||||
}, label);
|
||||
}
|
||||
|
||||
Button.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func.isRequired
|
||||
};
|
||||
const MemoButton = React.memo(Button);
|
||||
export const component = MemoButton;
|
||||
Button.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Button\\",
|
||||
\\"props\\": {
|
||||
\\"label\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"required\\": true,
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"onClick\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"func\\"
|
||||
},
|
||||
\\"required\\": true,
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
function Button({ label, onClick }) {
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
return <button onClick={onClick}>{label}</button>;
|
||||
}
|
||||
|
||||
Button.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const MemoButton = React.memo(Button);
|
||||
export const component = MemoButton;
|
||||
@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9586-js-react-memo 1`] = `
|
||||
Object {
|
||||
"rows": Array [],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,3 @@
|
||||
export type BarProps = {
|
||||
foo?: string;
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9591-ts-import-types 1`] = `
|
||||
"import React from 'react';
|
||||
|
||||
const Other = props => React.createElement(\\"span\\", props, \\"Other\\");
|
||||
|
||||
export const component = Other;
|
||||
Other.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Other\\",
|
||||
\\"props\\": {
|
||||
\\"other\\": {
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"number\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import { BarProps } from './Bar';
|
||||
|
||||
type OtherProps = BarProps & {
|
||||
other?: number;
|
||||
};
|
||||
|
||||
const Other = (props: OtherProps) => <span {...props}>Other</span>;
|
||||
|
||||
export const component = Other;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9591-ts-import-types 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "0",
|
||||
},
|
||||
"description": "",
|
||||
"name": "other",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "number",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,33 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9592-ts-styled-props 1`] = `
|
||||
"import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
const StyledHello = styled.div\`
|
||||
color: red;
|
||||
\`;
|
||||
|
||||
const Hello = ({
|
||||
title
|
||||
}) => {
|
||||
return React.createElement(StyledHello, {
|
||||
className: \\"hello\\"
|
||||
}, \\"Hello Component \\", title);
|
||||
};
|
||||
|
||||
export const component = Hello;
|
||||
Hello.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Hello\\",
|
||||
\\"props\\": {
|
||||
\\"title\\": {
|
||||
\\"required\\": true,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface HelloProps {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const StyledHello = styled.div`
|
||||
color: red;
|
||||
`;
|
||||
|
||||
const Hello = ({ title }: HelloProps) => {
|
||||
return <StyledHello className="hello">Hello Component {title}</StyledHello>;
|
||||
};
|
||||
|
||||
export const component = Hello;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9592-ts-styled-props 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "0",
|
||||
},
|
||||
"description": "",
|
||||
"name": "title",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,24 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9626-js-default-values 1`] = `
|
||||
"import React from 'react'; // eslint-disable-next-line react/prop-types
|
||||
|
||||
export const Tag = ({
|
||||
title = 'Beta'
|
||||
}) => React.createElement(\\"div\\", null, title);
|
||||
export const component = Tag;
|
||||
Tag.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Tag\\",
|
||||
\\"props\\": {
|
||||
\\"title\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'Beta'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
export const Tag = ({ title = 'Beta' }) => <div>{title}</div>;
|
||||
export const component = Tag;
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9626-js-default-values 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'Beta'",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "title",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,40 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = `
|
||||
"/* eslint-disable react/require-default-props */
|
||||
|
||||
/* eslint-disable react/no-unused-prop-types */
|
||||
|
||||
/* eslint-disable react/forbid-prop-types */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const CCTable = props => React.createElement(React.Fragment, null, JSON.stringify(props));
|
||||
|
||||
CCTable.propTypes = {
|
||||
heads: PropTypes.array.isRequired,
|
||||
onAddClick: PropTypes.func
|
||||
};
|
||||
export const component = CCTable;
|
||||
CCTable.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"CCTable\\",
|
||||
\\"props\\": {
|
||||
\\"heads\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"array\\"
|
||||
},
|
||||
\\"required\\": true,
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"onAddClick\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"func\\"
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,13 @@
|
||||
/* eslint-disable react/require-default-props */
|
||||
/* eslint-disable react/no-unused-prop-types */
|
||||
/* eslint-disable react/forbid-prop-types */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const CCTable = props => <>{JSON.stringify(props)}</>;
|
||||
CCTable.propTypes = {
|
||||
heads: PropTypes.array.isRequired,
|
||||
onAddClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export const component = CCTable;
|
||||
@ -0,0 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "",
|
||||
"name": "heads",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "array",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "",
|
||||
"name": "onAddClick",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "func",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,47 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9721-ts-deprecated-jsdoc 1`] = `
|
||||
"import React from 'react';
|
||||
|
||||
const Foo = props => React.createElement(React.Fragment, null, JSON.stringify(props));
|
||||
|
||||
export const component = Foo;
|
||||
Foo.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Foo\\",
|
||||
\\"props\\": {
|
||||
\\"width\\": {
|
||||
\\"required\\": true,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"number\\"
|
||||
},
|
||||
\\"description\\": \\"@deprecated Do not use! Use \`size\` instead!\\\\n\\\\nWidth of foo\\"
|
||||
},
|
||||
\\"size\\": {
|
||||
\\"required\\": true,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"signature\\",
|
||||
\\"type\\": \\"object\\",
|
||||
\\"raw\\": \\"{ width: number; height: number }\\",
|
||||
\\"signature\\": {
|
||||
\\"properties\\": [{
|
||||
\\"key\\": \\"width\\",
|
||||
\\"value\\": {
|
||||
\\"name\\": \\"number\\",
|
||||
\\"required\\": true
|
||||
}
|
||||
}, {
|
||||
\\"key\\": \\"height\\",
|
||||
\\"value\\": {
|
||||
\\"name\\": \\"number\\",
|
||||
\\"required\\": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
\\"description\\": \\"The size (replaces width)\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
interface FooProps {
|
||||
/**
|
||||
* @deprecated Do not use! Use `size` instead!
|
||||
*
|
||||
* Width of foo
|
||||
*/
|
||||
width: number;
|
||||
/**
|
||||
* The size (replaces width)
|
||||
*/
|
||||
size: { width: number; height: number };
|
||||
}
|
||||
|
||||
const Foo: React.FC<FooProps> = (props: FooProps) => <>{JSON.stringify(props)}</>;
|
||||
|
||||
export const component = Foo;
|
||||
@ -0,0 +1,34 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9721-ts-deprecated-jsdoc 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "0",
|
||||
},
|
||||
"description": "",
|
||||
"name": "width",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "number",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "1",
|
||||
},
|
||||
"description": "The size (replaces width)",
|
||||
"name": "size",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "signature",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,43 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9764-ts-extend-props 1`] = `
|
||||
"import React from 'react';
|
||||
|
||||
const Radio = props => React.createElement(React.Fragment, null, JSON.stringify(props));
|
||||
|
||||
export const component = Radio;
|
||||
Radio.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Radio\\",
|
||||
\\"props\\": {
|
||||
\\"value\\": {
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"union\\",
|
||||
\\"raw\\": \\"string | number\\",
|
||||
\\"elements\\": [{
|
||||
\\"name\\": \\"string\\"
|
||||
}, {
|
||||
\\"name\\": \\"number\\"
|
||||
}]
|
||||
},
|
||||
\\"description\\": \\"The input content value\\"
|
||||
},
|
||||
\\"defaultChecked\\": {
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"boolean\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"checked\\": {
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"boolean\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
interface InputProps {
|
||||
/**
|
||||
* The input content value
|
||||
*/
|
||||
value?: string | number;
|
||||
}
|
||||
|
||||
interface RadioProps extends InputProps {
|
||||
defaultChecked?: boolean;
|
||||
checked?: boolean;
|
||||
}
|
||||
|
||||
const Radio: React.FC<RadioProps> = (props: RadioProps) => <>{JSON.stringify(props)}</>;
|
||||
|
||||
export const component = Radio;
|
||||
@ -0,0 +1,47 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9764-ts-extend-props 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "0",
|
||||
},
|
||||
"description": "The input content value",
|
||||
"name": "value",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "union",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "1",
|
||||
},
|
||||
"description": "",
|
||||
"name": "defaultChecked",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "2",
|
||||
},
|
||||
"description": "",
|
||||
"name": "checked",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,54 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9827-ts-default-values 1`] = `
|
||||
"import React from 'react';
|
||||
|
||||
const Hello = ({
|
||||
title
|
||||
}) => {
|
||||
return React.createElement(\\"div\\", {
|
||||
className: \\"hello\\"
|
||||
}, \\"Hello Component \\", title);
|
||||
};
|
||||
|
||||
Hello.defaultProps = {
|
||||
title: 'this is the default :)'
|
||||
};
|
||||
export const component = Hello;
|
||||
Hello.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Hello\\",
|
||||
\\"props\\": {
|
||||
\\"title\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"'this is the default :)'\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"string\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"foo\\": {
|
||||
\\"required\\": true,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"boolean\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
},
|
||||
\\"bar\\": {
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"Array\\",
|
||||
\\"elements\\": [{
|
||||
\\"name\\": \\"string\\"
|
||||
}],
|
||||
\\"raw\\": \\"string[]\\"
|
||||
},
|
||||
\\"description\\": \\"\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
export interface HelloProps {
|
||||
title: string;
|
||||
foo: boolean;
|
||||
bar?: string[];
|
||||
}
|
||||
|
||||
const Hello = ({ title }: HelloProps) => {
|
||||
return <div className="hello">Hello Component {title}</div>;
|
||||
};
|
||||
|
||||
Hello.defaultProps = {
|
||||
title: 'this is the default :)',
|
||||
};
|
||||
|
||||
export const component = Hello;
|
||||
@ -0,0 +1,47 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9827-ts-default-values 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'this is the default :)'",
|
||||
},
|
||||
"description": "",
|
||||
"name": "title",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "1",
|
||||
},
|
||||
"description": "",
|
||||
"name": "foo",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "2",
|
||||
},
|
||||
"description": "",
|
||||
"name": "bar",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "Array",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9832-ts-enum-export 1`] = `
|
||||
"import React from 'react';
|
||||
export let EnumWithExtraProps;
|
||||
|
||||
(function (EnumWithExtraProps) {
|
||||
EnumWithExtraProps[\\"key1\\"] = \\"key1\\";
|
||||
EnumWithExtraProps[\\"key2\\"] = \\"key2\\";
|
||||
})(EnumWithExtraProps || (EnumWithExtraProps = {}));
|
||||
|
||||
export const component = () => React.createElement(\\"div\\", null, \\"hello\\");
|
||||
component.__docgenInfo = {
|
||||
\\"description\\": \\"\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"component\\"
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
export enum EnumWithExtraProps {
|
||||
key1 = 'key1',
|
||||
key2 = 'key2',
|
||||
}
|
||||
|
||||
export const component = () => <div>hello</div>;
|
||||
@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9832-ts-enum-export 1`] = `
|
||||
Object {
|
||||
"rows": Array [],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,45 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties js-class-component 1`] = `
|
||||
"/* eslint-disable react/prefer-stateless-function */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
/**
|
||||
* Component description
|
||||
*/
|
||||
|
||||
class ErrorBox extends React.Component {
|
||||
render() {
|
||||
const {
|
||||
children
|
||||
} = this.props;
|
||||
return React.createElement(\\"div\\", {
|
||||
className: \\"error-box\\"
|
||||
}, children);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ErrorBox.propTypes = {
|
||||
/**
|
||||
* PropTypes description
|
||||
*/
|
||||
children: PropTypes.node.isRequired
|
||||
};
|
||||
ErrorBox.__docgenInfo = {
|
||||
\\"description\\": \\"Component description\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"ErrorBox\\",
|
||||
\\"props\\": {
|
||||
\\"children\\": {
|
||||
\\"type\\": {
|
||||
\\"name\\": \\"node\\"
|
||||
},
|
||||
\\"required\\": true,
|
||||
\\"description\\": \\"PropTypes description\\"
|
||||
}
|
||||
}
|
||||
};
|
||||
export default ErrorBox;
|
||||
export const component = ErrorBox;"
|
||||
`;
|
||||
@ -0,0 +1,24 @@
|
||||
/* eslint-disable react/prefer-stateless-function */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* Component description
|
||||
*/
|
||||
class ErrorBox extends React.Component {
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
|
||||
return <div className="error-box">{children}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
ErrorBox.propTypes = {
|
||||
/**
|
||||
* PropTypes description
|
||||
*/
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default ErrorBox;
|
||||
export const component = ErrorBox;
|
||||
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties js-class-component 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": null,
|
||||
"description": "PropTypes description",
|
||||
"name": "children",
|
||||
"required": true,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "node",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,64 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties ts-function-component 1`] = `
|
||||
"import React from 'react';
|
||||
|
||||
/**
|
||||
* The world's most _basic_ button
|
||||
*/
|
||||
export const Button = ({
|
||||
onClick
|
||||
}) => React.createElement(\\"button\\", {
|
||||
onClick: onClick,
|
||||
type: \\"button\\"
|
||||
}, \\"hello\\");
|
||||
Button.defaultProps = {
|
||||
primary: true,
|
||||
secondary: false
|
||||
};
|
||||
export const component = Button;
|
||||
Button.__docgenInfo = {
|
||||
\\"description\\": \\"The world's most _basic_ button\\",
|
||||
\\"methods\\": [],
|
||||
\\"displayName\\": \\"Button\\",
|
||||
\\"props\\": {
|
||||
\\"primary\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"true\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"boolean\\"
|
||||
},
|
||||
\\"description\\": \\"Is primary?\\"
|
||||
},
|
||||
\\"secondary\\": {
|
||||
\\"defaultValue\\": {
|
||||
\\"value\\": \\"false\\",
|
||||
\\"computed\\": false
|
||||
},
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"boolean\\"
|
||||
},
|
||||
\\"description\\": \\"default is false\\"
|
||||
},
|
||||
\\"onClick\\": {
|
||||
\\"required\\": false,
|
||||
\\"tsType\\": {
|
||||
\\"name\\": \\"signature\\",
|
||||
\\"type\\": \\"function\\",
|
||||
\\"raw\\": \\"() => void\\",
|
||||
\\"signature\\": {
|
||||
\\"arguments\\": [],
|
||||
\\"return\\": {
|
||||
\\"name\\": \\"void\\"
|
||||
}
|
||||
}
|
||||
},
|
||||
\\"description\\": \\"Simple click handler\\"
|
||||
}
|
||||
}
|
||||
};"
|
||||
`;
|
||||
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ButtonProps {
|
||||
/**
|
||||
* Simple click handler
|
||||
*/
|
||||
onClick?: () => void;
|
||||
|
||||
/**
|
||||
* Is primary?
|
||||
*/
|
||||
primary?: boolean;
|
||||
|
||||
/**
|
||||
* default is false
|
||||
*/
|
||||
secondary?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* The world's most _basic_ button
|
||||
*/
|
||||
export const Button: React.FC<ButtonProps> = ({ onClick }: ButtonProps) => (
|
||||
<button onClick={onClick} type="button">
|
||||
hello
|
||||
</button>
|
||||
);
|
||||
|
||||
Button.defaultProps = {
|
||||
primary: true,
|
||||
secondary: false,
|
||||
};
|
||||
|
||||
export const component = Button;
|
||||
@ -0,0 +1,47 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties ts-function-component 1`] = `
|
||||
Object {
|
||||
"rows": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "true",
|
||||
},
|
||||
"description": "Is primary?",
|
||||
"name": "primary",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"description": "default is false",
|
||||
"name": "secondary",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "2",
|
||||
},
|
||||
"description": "Simple click handler",
|
||||
"name": "onClick",
|
||||
"required": false,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "signature",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
`;
|
||||
@ -209,8 +209,8 @@ function generateShape(type: DocgenPropType, extractedProp: ExtractedProp): Type
|
||||
return createTypeDef({
|
||||
name: PropTypesType.SHAPE,
|
||||
short: OBJECT_CAPTION,
|
||||
compact: depth === 1 ? prettyObject(ast, true) : null,
|
||||
full: prettyObject(ast),
|
||||
compact: depth === 1 && ast ? prettyObject(ast, true) : null,
|
||||
full: ast ? prettyObject(ast) : null,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user