@react-ui-org/react-ui 0.52.0 → 0.53.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CODEOWNERS +23 -0
- package/README.md +10 -7
- package/dist/react-ui.css +42 -0
- package/dist/react-ui.js +1 -0
- package/package.json +64 -77
- package/src/{lib/components → components}/Alert/Alert.jsx +1 -1
- package/src/{lib/components/Alert/README.mdx → components/Alert/README.md} +84 -100
- package/src/{lib/components → components}/Badge/Badge.jsx +1 -1
- package/src/{lib/components → components}/Badge/Badge.scss +1 -1
- package/src/components/Badge/README.md +103 -0
- package/src/{lib/components → components}/Button/Button.jsx +1 -1
- package/src/components/Button/README.md +580 -0
- package/src/{lib/components → components}/ButtonGroup/ButtonGroup.jsx +11 -9
- package/src/{lib/components/ButtonGroup/README.mdx → components/ButtonGroup/README.md} +128 -134
- package/src/{lib/components → components}/Card/Card.jsx +1 -1
- package/src/components/Card/README.md +314 -0
- package/src/{lib/components/CheckboxField/README.mdx → components/CheckboxField/README.md} +96 -108
- package/src/{lib/components/FileInputField/README.mdx → components/FileInputField/README.md} +83 -95
- package/src/{lib/components → components}/FormLayout/FormLayout.jsx +4 -4
- package/src/components/FormLayout/README.md +462 -0
- package/src/{lib/components → components}/Grid/Grid.jsx +2 -2
- package/src/components/Grid/README.md +281 -0
- package/src/{lib/components → components}/InputGroup/InputGroup.jsx +20 -19
- package/src/{lib/components → components}/InputGroup/InputGroup.scss +1 -6
- package/src/{lib/components/InputGroup/README.mdx → components/InputGroup/README.md} +145 -163
- package/src/{lib/components → components}/Modal/Modal.jsx +6 -6
- package/src/components/Modal/README.md +1090 -0
- package/src/components/Modal/_hooks/useModalScrollPrevention.js +37 -0
- package/src/{lib/components/Paper/README.mdx → components/Paper/README.md} +18 -30
- package/src/{lib/components/Popover/README.mdx → components/Popover/README.md} +102 -132
- package/src/{lib/components/Radio/README.mdx → components/Radio/README.md} +122 -134
- package/src/{lib/components → components}/Radio/Radio.jsx +11 -12
- package/src/{lib/components → components}/Radio/Radio.scss +1 -6
- package/src/components/ScrollView/README.md +503 -0
- package/src/{lib/components → components}/ScrollView/ScrollView.jsx +12 -3
- package/src/components/SelectField/README.md +681 -0
- package/src/components/Table/README.md +259 -0
- package/src/{lib/components → components}/Table/Table.jsx +4 -1
- package/src/{lib/components → components}/Table/_components/TableHeaderCell/TableHeaderCell.jsx +1 -1
- package/src/{lib/components/Tabs/README.mdx → components/Tabs/README.md} +117 -134
- package/src/{lib/components → components}/Tabs/TabsItem.jsx +3 -3
- package/src/components/Text/README.md +220 -0
- package/src/components/TextArea/README.md +359 -0
- package/src/{lib/components/TextField/README.mdx → components/TextField/README.md} +336 -342
- package/src/{lib/components/TextLink/README.mdx → components/TextLink/README.md} +19 -31
- package/src/{lib/components/Toggle/README.mdx → components/Toggle/README.md} +98 -110
- package/src/components/Toolbar/README.md +359 -0
- package/src/{lib/components → components}/Toolbar/_helpers/getAlignClassName.js +12 -4
- package/src/components/_helpers/getRootPriorityClassName.js +15 -0
- package/src/{lib/index.js → index.js} +6 -0
- package/src/{lib/provider → provider}/RUIProvider.jsx +17 -11
- package/src/{lib/styles → styles}/tools/_caret.scss +1 -1
- package/src/{lib/styles → styles}/tools/form-fields/_box-field-elements.scss +1 -1
- package/src/{lib/styles → styles}/tools/form-fields/_box-field-layout.scss +26 -14
- package/src/{lib/styles → styles}/tools/form-fields/_inline-field-elements.scss +2 -2
- package/src/{lib/theme.scss → theme.scss} +4 -3
- package/CONTRIBUTING.md +0 -137
- package/dist/lib.development.js +0 -3179
- package/dist/lib.js +0 -1
- package/public/racom.svg +0 -11
- package/src/lib/components/Badge/README.mdx +0 -126
- package/src/lib/components/Button/README.mdx +0 -581
- package/src/lib/components/Card/README.mdx +0 -326
- package/src/lib/components/FormLayout/README.mdx +0 -501
- package/src/lib/components/Grid/README.mdx +0 -299
- package/src/lib/components/Modal/README.mdx +0 -1360
- package/src/lib/components/Modal/_hooks/useModalScrollPrevention.js +0 -35
- package/src/lib/components/ScrollView/README.mdx +0 -521
- package/src/lib/components/SelectField/README.mdx +0 -693
- package/src/lib/components/Table/README.mdx +0 -275
- package/src/lib/components/Text/README.mdx +0 -241
- package/src/lib/components/TextArea/README.mdx +0 -366
- package/src/lib/components/Toolbar/README.mdx +0 -386
- package/src/{lib/components → components}/Alert/Alert.scss +0 -0
- package/src/{lib/components → components}/Alert/_settings.scss +0 -0
- package/src/{lib/components → components}/Alert/_theme.scss +0 -0
- package/src/{lib/components → components}/Alert/_tools.scss +0 -0
- package/src/{lib/components → components}/Alert/index.js +0 -0
- package/src/{lib/components → components}/Badge/index.js +0 -0
- package/src/{lib/components → components}/Button/Button.scss +0 -0
- package/src/{lib/components → components}/Button/_base.scss +0 -0
- package/src/{lib/components → components}/Button/_priorities.scss +0 -0
- package/src/{lib/components → components}/Button/_settings.scss +0 -0
- package/src/{lib/components → components}/Button/_theme.scss +0 -0
- package/src/{lib/components → components}/Button/_tools.scss +0 -0
- package/src/{lib/components → components}/Button/helpers/getRootLabelVisibilityClassName.js +0 -0
- package/src/{lib/components/_helpers → components/Button/helpers}/getRootPriorityClassName.js +0 -0
- package/src/{lib/components → components}/Button/index.js +0 -0
- package/src/{lib/components → components}/ButtonGroup/ButtonGroup.scss +0 -0
- package/src/{lib/components → components}/ButtonGroup/ButtonGroupContext.js +0 -0
- package/src/{lib/components → components}/ButtonGroup/_theme.scss +0 -0
- package/src/{lib/components → components}/ButtonGroup/index.js +0 -0
- package/src/{lib/components → components}/Card/Card.scss +0 -0
- package/src/{lib/components → components}/Card/CardBody.jsx +0 -0
- package/src/{lib/components → components}/Card/CardFooter.jsx +0 -0
- package/src/{lib/components → components}/Card/_theme.scss +0 -0
- package/src/{lib/components → components}/Card/_tools.scss +0 -0
- package/src/{lib/components → components}/Card/index.js +0 -0
- package/src/{lib/components → components}/CheckboxField/CheckboxField.jsx +0 -0
- package/src/{lib/components → components}/CheckboxField/CheckboxField.scss +0 -0
- package/src/{lib/components → components}/CheckboxField/index.js +0 -0
- package/src/{lib/components → components}/FileInputField/FileInputField.jsx +0 -0
- package/src/{lib/components → components}/FileInputField/FileInputField.scss +0 -0
- package/src/{lib/components → components}/FileInputField/index.js +0 -0
- package/src/{lib/components → components}/FormLayout/FormLayout.scss +0 -0
- package/src/{lib/components → components}/FormLayout/FormLayoutContext.js +0 -0
- package/src/{lib/components → components}/FormLayout/FormLayoutCustomField.jsx +4 -4
- package/src/{lib/components → components}/FormLayout/FormLayoutCustomField.scss +0 -0
- package/src/{lib/components → components}/FormLayout/_theme.scss +0 -0
- package/src/{lib/components → components}/FormLayout/index.js +0 -0
- package/src/{lib/components → components}/Grid/Grid.scss +0 -0
- package/src/{lib/components → components}/Grid/GridSpan.jsx +0 -0
- package/src/{lib/components → components}/Grid/_helpers/generateResponsiveCustomProperties.js +0 -0
- package/src/{lib/components → components}/Grid/_settings.scss +0 -0
- package/src/{lib/components → components}/Grid/_tools.scss +0 -0
- package/src/{lib/components → components}/Grid/index.js +0 -0
- package/src/{lib/components → components}/InputGroup/InputGroupContext.js +0 -0
- package/src/{lib/components → components}/InputGroup/_theme.scss +0 -0
- package/src/{lib/components → components}/InputGroup/index.js +0 -0
- package/src/{lib/components → components}/Modal/Modal.scss +0 -0
- package/src/{lib/components → components}/Modal/ModalBody.jsx +0 -0
- package/src/{lib/components → components}/Modal/ModalBody.scss +0 -0
- package/src/{lib/components → components}/Modal/ModalCloseButton.jsx +1 -1
- package/src/{lib/components → components}/Modal/ModalCloseButton.scss +0 -0
- package/src/{lib/components → components}/Modal/ModalContent.jsx +0 -0
- package/src/{lib/components → components}/Modal/ModalContent.scss +0 -0
- package/src/{lib/components → components}/Modal/ModalFooter.jsx +0 -0
- package/src/{lib/components → components}/Modal/ModalFooter.scss +0 -0
- package/src/{lib/components → components}/Modal/ModalHeader.jsx +0 -0
- package/src/{lib/components → components}/Modal/ModalHeader.scss +0 -0
- package/src/{lib/components → components}/Modal/ModalTitle.jsx +0 -0
- package/src/{lib/components → components}/Modal/ModalTitle.scss +0 -0
- package/src/{lib/components → components}/Modal/_helpers/getJustifyClassName.js +0 -0
- package/src/{lib/components → components}/Modal/_helpers/getPositionClassName.js +0 -0
- package/src/{lib/components → components}/Modal/_helpers/getScrollingClassName.js +0 -0
- package/src/{lib/components → components}/Modal/_helpers/getSizeClassName.js +0 -0
- package/src/{lib/components → components}/Modal/_hooks/useModalFocus.js +0 -0
- package/src/{lib/components → components}/Modal/_settings.scss +0 -0
- package/src/{lib/components → components}/Modal/_theme.scss +0 -0
- package/src/{lib/components → components}/Modal/index.js +0 -0
- package/src/{lib/components → components}/Paper/Paper.jsx +0 -0
- package/src/{lib/components → components}/Paper/Paper.scss +0 -0
- package/src/{lib/components → components}/Paper/_theme.scss +0 -0
- package/src/{lib/components → components}/Paper/index.js +0 -0
- package/src/{lib/components → components}/Popover/Popover.jsx +0 -0
- package/src/{lib/components → components}/Popover/Popover.scss +0 -0
- package/src/{lib/components → components}/Popover/PopoverWrapper.jsx +0 -0
- package/src/{lib/components → components}/Popover/PopoverWrapper.scss +0 -0
- package/src/{lib/components → components}/Popover/_helpers/getRootAlignmentClassName.js +0 -0
- package/src/{lib/components → components}/Popover/_helpers/getRootSideClassName.js +0 -0
- package/src/{lib/components → components}/Popover/_theme.scss +0 -0
- package/src/{lib/components → components}/Popover/index.js +0 -0
- package/src/{lib/components → components}/Radio/index.js +0 -0
- package/src/{lib/components → components}/ScrollView/ScrollView.scss +0 -0
- package/src/{lib/components → components}/ScrollView/_helpers/getElementsPositionDifference.js +0 -0
- package/src/{lib/components → components}/ScrollView/_hooks/useLoadResizeHook.js +0 -0
- package/src/{lib/components → components}/ScrollView/_hooks/useScrollPositionHook.js +0 -0
- package/src/{lib/components → components}/ScrollView/index.js +0 -0
- package/src/{lib/components → components}/SelectField/SelectField.jsx +0 -0
- package/src/{lib/components → components}/SelectField/SelectField.scss +0 -0
- package/src/{lib/components → components}/SelectField/_components/Option/Option.jsx +0 -0
- package/src/{lib/components → components}/SelectField/_components/Option/index.js +0 -0
- package/src/{lib/components → components}/SelectField/index.js +0 -0
- package/src/{lib/components → components}/Table/Table.scss +0 -0
- package/src/{lib/components → components}/Table/_components/TableBodyCell/TableBodyCell.jsx +0 -0
- package/src/{lib/components → components}/Table/_components/TableBodyCell/index.js +0 -0
- package/src/{lib/components → components}/Table/_components/TableCell.scss +0 -0
- package/src/{lib/components → components}/Table/_components/TableHeaderCell/index.js +0 -0
- package/src/{lib/components → components}/Table/_settings.scss +0 -0
- package/src/{lib/components → components}/Table/index.js +0 -0
- package/src/{lib/components → components}/Tabs/Tabs.jsx +0 -0
- package/src/{lib/components → components}/Tabs/Tabs.scss +0 -0
- package/src/{lib/components → components}/Tabs/TabsItem.scss +0 -0
- package/src/{lib/components → components}/Tabs/_theme.scss +0 -0
- package/src/{lib/components → components}/Tabs/index.js +0 -0
- package/src/{lib/components → components}/Text/Text.jsx +0 -0
- package/src/{lib/components → components}/Text/Text.scss +0 -0
- package/src/{lib/components → components}/Text/_helpers/getRootClampClassName.js +0 -0
- package/src/{lib/components → components}/Text/_helpers/getRootHyphensClassName.js +0 -0
- package/src/{lib/components → components}/Text/_helpers/getRootWordWrappingClassName.js +0 -0
- package/src/{lib/components → components}/Text/index.js +0 -0
- package/src/{lib/components → components}/TextArea/TextArea.jsx +0 -0
- package/src/{lib/components → components}/TextArea/TextArea.scss +0 -0
- package/src/{lib/components → components}/TextArea/index.js +0 -0
- package/src/{lib/components → components}/TextField/TextField.jsx +0 -0
- package/src/{lib/components → components}/TextField/TextField.scss +0 -0
- package/src/{lib/components → components}/TextField/index.js +0 -0
- package/src/{lib/components → components}/TextLink/TextLink.jsx +1 -1
- /package/src/{lib/components → components}/TextLink/TextLink.scss +0 -0
- /package/src/{lib/components → components}/TextLink/_theme.scss +0 -0
- /package/src/{lib/components → components}/TextLink/index.js +0 -0
- /package/src/{lib/components → components}/Toggle/Toggle.jsx +0 -0
- /package/src/{lib/components → components}/Toggle/Toggle.scss +0 -0
- /package/src/{lib/components → components}/Toggle/index.js +0 -0
- /package/src/{lib/components → components}/Toolbar/Toolbar.jsx +0 -0
- /package/src/{lib/components → components}/Toolbar/Toolbar.scss +0 -0
- /package/src/{lib/components → components}/Toolbar/ToolbarGroup.jsx +0 -0
- /package/src/{lib/components → components}/Toolbar/ToolbarItem.jsx +0 -0
- /package/src/{lib/components → components}/Toolbar/_helpers/getJustifyClassName.js +0 -0
- /package/src/{lib/components → components}/Toolbar/_theme.scss +0 -0
- /package/src/{lib/components → components}/Toolbar/index.js +0 -0
- /package/src/{lib/components → components}/_helpers/getRootColorClassName.js +0 -0
- /package/src/{lib/components → components}/_helpers/getRootSizeClassName.js +0 -0
- /package/src/{lib/components → components}/_helpers/getRootValidationStateClassName.js +0 -0
- /package/src/{lib/components → components}/_helpers/isChildrenEmpty.js +0 -0
- /package/src/{lib/components → components}/_helpers/resolveContextOrProp.js +0 -0
- /package/src/{lib/components → components}/_helpers/transferProps.js +0 -0
- /package/src/{lib/foundation.scss → foundation.scss} +0 -0
- /package/src/{lib/helpers.scss → helpers.scss} +0 -0
- /package/src/{lib/provider → provider}/RUIContext.jsx +0 -0
- /package/src/{lib/provider → provider}/index.js +0 -0
- /package/src/{lib/provider → provider}/withGlobalProps.jsx +0 -0
- /package/src/{lib/styles → styles}/_utilities.scss +0 -0
- /package/src/{lib/styles → styles}/elements/_code.scss +0 -0
- /package/src/{lib/styles → styles}/elements/_links.scss +0 -0
- /package/src/{lib/styles → styles}/elements/_lists.scss +0 -0
- /package/src/{lib/styles → styles}/elements/_page.scss +0 -0
- /package/src/{lib/styles → styles}/elements/_rulers.scss +0 -0
- /package/src/{lib/styles → styles}/elements/_small.scss +0 -0
- /package/src/{lib/styles → styles}/generic/_box-sizing.scss +0 -0
- /package/src/{lib/styles → styles}/generic/_focus.scss +0 -0
- /package/src/{lib/styles → styles}/generic/_forms.scss +0 -0
- /package/src/{lib/styles → styles}/generic/_reset.scss +0 -0
- /package/src/{lib/styles → styles}/generic/_shared.scss +0 -0
- /package/src/{lib/styles → styles}/helpers/_animation.scss +0 -0
- /package/src/{lib/styles → styles}/settings/_animations.scss +0 -0
- /package/src/{lib/styles → styles}/settings/_breakpoints.scss +0 -0
- /package/src/{lib/styles → styles}/settings/_escaped-characters.scss +0 -0
- /package/src/{lib/styles → styles}/settings/_form-fields.scss +0 -0
- /package/src/{lib/styles → styles}/settings/_forms.scss +0 -0
- /package/src/{lib/styles → styles}/settings/_utilities.scss +0 -0
- /package/src/{lib/styles → styles}/settings/_z-indexes.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_accessibility.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_borders.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_code.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_form-fields.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_links.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_lists.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_page.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_spacing.scss +0 -0
- /package/src/{lib/styles → styles}/theme/_typography.scss +0 -0
- /package/src/{lib/styles → styles}/theme-constants/_breakpoints.scss +0 -0
- /package/src/{lib/styles → styles}/theme-constants/_colors.scss +0 -0
- /package/src/{lib/styles → styles}/theme-constants/_svg.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_accessibility.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_breakpoint.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_colors.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_reset.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_scrollbar.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_spacing.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_string.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_svg.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_transition.scss +0 -0
- /package/src/{lib/styles → styles}/tools/_utilities.scss +0 -0
- /package/src/{lib/styles → styles}/tools/form-fields/_box-field-sizes.scss +0 -0
- /package/src/{lib/styles → styles}/tools/form-fields/_foundation.scss +0 -0
- /package/src/{lib/styles → styles}/tools/form-fields/_inline-field-layout.scss +0 -0
- /package/src/{lib/styles → styles}/tools/form-fields/_variants.scss +0 -0
- /package/src/{lib/translations → translations}/en.js +0 -0
- /package/src/{lib/utils → utils}/classNames.js +0 -0
package/CONTRIBUTING.md
DELETED
@@ -1,137 +0,0 @@
|
|
1
|
-
---
|
2
|
-
name: General Guidelines
|
3
|
-
route: /contribute/guidelines
|
4
|
-
menu: Contribute
|
5
|
-
---
|
6
|
-
|
7
|
-
# Contributing
|
8
|
-
|
9
|
-
In the first place, thank you for your interest in contributing! 🙏
|
10
|
-
|
11
|
-
## Development
|
12
|
-
|
13
|
-
To build the project:
|
14
|
-
|
15
|
-
1. Install local npm packages: `npm install`
|
16
|
-
2. Run the build: `npm run build`
|
17
|
-
|
18
|
-
To run the dev server:
|
19
|
-
|
20
|
-
1. Install local npm packages: `npm install`
|
21
|
-
2. Run the dev server (usually on `http://localhost:3000`): `npm start`
|
22
|
-
|
23
|
-
## Git Workflow
|
24
|
-
|
25
|
-
In order for the automation to work in the best possible way (we use GitHub
|
26
|
-
Actions), please follow these guidelines:
|
27
|
-
|
28
|
-
1. **One pull request per subject.** Don't combine unrelated changes in a single
|
29
|
-
PR unless they are really subtle details such as fix of a typo.
|
30
|
-
|
31
|
-
2. **Only PRs into `master` branch are listed in changelog.** PRs into other
|
32
|
-
branches are not picked up by release automation.
|
33
|
-
|
34
|
-
3. **Name your branches according to nature of change.** Choose one of:
|
35
|
-
|
36
|
-
- `bc/*` for breaking changes
|
37
|
-
- `feature/*` for features
|
38
|
-
- `bugfix/*` for bugfixes
|
39
|
-
- `refactoring/*` for refactoring of the library
|
40
|
-
- `docs/*` or `documentation/*` for changes in docs
|
41
|
-
- `maintenance/*` for maintenance (builds, dependencies, automation, etc.)
|
42
|
-
- `release/*` for [releases](/contribute/releasing) (administrators only)
|
43
|
-
|
44
|
-
4. **Write clear, helpful and descriptive commit messages.**
|
45
|
-
|
46
|
-
1. **Use imperative and write in English,** e.g. _Update dependencies_ or
|
47
|
-
_Claim support for controlled components only_.
|
48
|
-
2. **If an issue exists for your changes, append the issue number** in
|
49
|
-
parentheses to the end of the commit message, e.g. _Update dependencies
|
50
|
-
(#261)_.
|
51
|
-
3. Optionally use Markdown code blocks to emphasize, e.g.
|
52
|
-
_Create `ScrollView` component (#53)_.
|
53
|
-
|
54
|
-
5. **Write clear, helpful and descriptive PR names.**
|
55
|
-
|
56
|
-
1. **All rules for commit messages apply** also for PR names.
|
57
|
-
2. **Always check that PR name meets the requirements** above because **PR
|
58
|
-
names are used in changelog**. GitHub automatically truncates long PR
|
59
|
-
names and picks up branch name for multi-commit PRs, so it's necessary to
|
60
|
-
make sure the PR name is what we want to have in the changelog.
|
61
|
-
3. **If an issue exists for your changes, append this text to PR
|
62
|
-
description** (the topmost comment in the PR) in order for the issue to be
|
63
|
-
closed automatically once the PR is merged: `Closes #<ISSUE NUMBER>`. You
|
64
|
-
will know the issue is linked correctly when it appears in the _Linked
|
65
|
-
issues_ section of the PR. (Having the issue mentioned in commit message
|
66
|
-
and/or PR name does _not_ have this effect.)
|
67
|
-
4. **If there is no issue for your changes, please add your PR to `The
|
68
|
-
Board`** GitHub project in the _Projects_ section of the PR. The correct
|
69
|
-
board column will be selected automatically. This helps us keep track of
|
70
|
-
what is in development.
|
71
|
-
|
72
|
-
Pull requests are labelled automatically. You can add more labels to better
|
73
|
-
qualify the nature of the change — in such case, it will be included in all
|
74
|
-
corresponding changelog groups. Or use the `skip changelog` label to exclude a
|
75
|
-
pull request from the changelog.
|
76
|
-
|
77
|
-
## Package Linking
|
78
|
-
|
79
|
-
The best way for development of React UI is to link `react-ui` into your
|
80
|
-
application with `npm link` so you can see it in action.
|
81
|
-
|
82
|
-
1. In React UI repository, run `npm link`
|
83
|
-
2. In your application, run `npm link @react-ui-org/react-ui`
|
84
|
-
|
85
|
-
To prevent
|
86
|
-
[Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react)
|
87
|
-
when React UI is linked, add the following code to your app's Webpack config:
|
88
|
-
|
89
|
-
```js
|
90
|
-
const path = require('path');
|
91
|
-
|
92
|
-
module.exports = {
|
93
|
-
resolve: {
|
94
|
-
alias: {
|
95
|
-
react: path.resolve('./node_modules/react'),
|
96
|
-
'react-dom': path.resolve('./node_modules/react-dom'),
|
97
|
-
},
|
98
|
-
},
|
99
|
-
};
|
100
|
-
```
|
101
|
-
|
102
|
-
## General Guidelines
|
103
|
-
|
104
|
-
To keep React UI consistent and predictable the following guidelines should be observed:
|
105
|
-
|
106
|
-
1. If component accepts the `children` prop it should be either required or the element
|
107
|
-
should return `null` when no children are provided.
|
108
|
-
|
109
|
-
## Documenting
|
110
|
-
|
111
|
-
We use [Docz](https://docz.site) (powered by [Gatsby](https://www.gatsbyjs.com))
|
112
|
-
as the documentation platform. The documentation itself is written in
|
113
|
-
[MDX](https://mdxjs.com) format — a human-readable blend of the popular Markdown
|
114
|
-
and JSX syntax.
|
115
|
-
|
116
|
-
Run `npm start` to run the docs in development mode, and open
|
117
|
-
`http://localhost:3000` in your browser to see the docs in live-reload mode.
|
118
|
-
|
119
|
-
A few things to note:
|
120
|
-
|
121
|
-
- In order to get component props parsed and rendered by Docz, it's crucial to
|
122
|
-
**import the component into an MDX file right from its source file** — parsing
|
123
|
-
a re-exported component (typically via `index.js`) isn't currently supported.
|
124
|
-
|
125
|
-
- If you don't want Gatsby to collect **anonymous statistics**, you may want to
|
126
|
-
disable [Gatsby telemetry](https://www.gatsbyjs.com/docs/telemetry/) by
|
127
|
-
running `npx gatsby telemetry --disable`.
|
128
|
-
|
129
|
-
- If you see the Not found page after having **changed the configuration of Docz
|
130
|
-
or Gatsby in the live-reload mode,** you may either restart the Docz
|
131
|
-
development server (`ctrl + c` and `npm start`), or try to edit an MDX file
|
132
|
-
which makes the Docz rebuild, too.
|
133
|
-
|
134
|
-
- To **make your authoring experience better,** we recommend to make sure your
|
135
|
-
IDE understands the MDX syntax and is able to help you wrap lines in MD and
|
136
|
-
MDX files automatically (Jetbrains IDE's and VSCode support both features
|
137
|
-
out-of-the-box or through a plugin).
|