docs/Develop.mdx - master - austin_s/react-interview-components

docs/Develop.mdx
59 строк2 KB
spanic
Adds Empty component, fixes displaying actions for Offer
11 фев 2025, 01:35
11 фев 2025, 01:35f058c28
import {Meta} from '@storybook/blocks';

<Meta title="Docs/Develop" />

## Development mode

`yarn start` runs CRA in development mode with hot reloading. Open http://localhost:3000 to see your code live.

## Build library

`yarn build:lib` bundles library code to `lib` folder in the root of project.

## `src` directory structure

Development takes place inside `src` directory. There are two subdirectories inside:

- `lib` is where your library code should live, this code will be bundled with rollup and published to NPM. Imports from `environment` directory are forbidden, eslint will throw an error. Exports from `src/lib/index.js` will be included in the library.
- `environment` is where your development code lives (CSS frameworks, demo code, mocks etc). Contents will not be bundled inside library. `src/index.js` defines what CRA will render in browser during development.

```bash
|-- environment # development code
|   └── App
|       |-- App.js
|       |-- App.module.css # CSS module
|       |-- App.spec.js # test file
|       |-- __snapshots__
|       |   └── App.spec.js.snap # test snapshot
|       └── index.js
|-- index.js # entry point for CRA
|-- lib # library code
|   |-- Component
|   |   |-- Component.js # Component will be exposed as a part of library
|   |   |-- Component.module.css # CSS module
|   |   |-- Component.spec.js # test file
|   |   |-- __snapshots__
|   |   |   └── Component.spec.js.snap # test snapshot
|   |   └── index.js
|   └── index.js # entry point for rollup build
└── setupTests.js
```

## TypeScript

Use the following TypeScript docgen configuration in `main.js` to show props with types from parent interfaces (based on https://github.com/storybookjs/storybook/issues/12129#issuecomment-1316875959):

```js
reactDocgenTypescriptOptions: {
  tsconfigPath: '../tsconfig.json',
  propFilter: prop => {
    const res =
      /antd/.test(prop.parent?.fileName) ||
      !/node_modules/.test(prop.parent?.fileName);
    return prop.parent ? res : true;
  },
  shouldExtractLiteralValuesFromEnum: true,
  savePropValueAsString: true,
  shouldRemoveUndefinedFromOptional: true,
},
```