From 3717ec6a655b6548fc6e772f0373f31097639062 Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Wed, 9 Nov 2022 14:59:35 +0100 Subject: [PATCH 1/4] Change documentation platform from Docz to MkDocs with Docoff (#373) --- .browserslistrc | 1 - .env.dist | 6 + .eslintrc | 6 +- .github/workflows/release-management.yml | 4 +- .gitignore | 9 +- .markdownlint.jsonc | 8 +- .npmignore | 22 +- CONTRIBUTING.md | 180 +- README.md | 14 +- RELEASING.md | 25 +- docker-compose.yml | 33 + docker/mkdocs/Dockerfile | 8 + docker/mkdocs/init-container.sh | 10 + docker/node/Dockerfile | 3 + doczrc.js | 264 - gatsby-config.js | 26 - jest.config.js | 7 +- mkdocs.yml | 125 + package-lock.json | 80539 ++++------------ package.json | 122 +- src/{lib => }/components/Alert/Alert.jsx | 2 +- src/{lib => }/components/Alert/Alert.scss | 0 .../README.mdx => components/Alert/README.md} | 184 +- .../components/Alert/__tests__/Alert.test.jsx | 2 +- src/{lib => }/components/Alert/_settings.scss | 0 src/{lib => }/components/Alert/_theme.scss | 0 src/{lib => }/components/Alert/_tools.scss | 0 src/{lib => }/components/Alert/index.js | 0 src/{lib => }/components/Badge/Badge.jsx | 2 +- src/{lib => }/components/Badge/Badge.scss | 2 +- src/components/Badge/README.md | 111 + .../components/Badge/__tests__/Badge.test.jsx | 2 +- src/{lib => }/components/Badge/index.js | 0 src/{lib => }/components/Button/Button.jsx | 2 +- src/{lib => }/components/Button/Button.scss | 0 src/components/Button/README.md | 580 + .../Button/__tests__/Button.test.jsx | 12 +- src/{lib => }/components/Button/_base.scss | 0 .../components/Button/_priorities.scss | 0 .../components/Button/_settings.scss | 0 src/{lib => }/components/Button/_theme.scss | 0 src/{lib => }/components/Button/_tools.scss | 0 .../getRootLabelVisibilityClassName.js | 0 .../helpers}/getRootPriorityClassName.js | 0 src/{lib => }/components/Button/index.js | 0 .../components/ButtonGroup/ButtonGroup.jsx | 20 +- .../components/ButtonGroup/ButtonGroup.scss | 0 .../ButtonGroup/ButtonGroupContext.js | 0 .../ButtonGroup/README.md} | 262 +- .../__tests__/ButtonGroup.test.jsx | 6 +- .../components/ButtonGroup/_theme.scss | 0 src/{lib => }/components/ButtonGroup/index.js | 0 src/{lib => }/components/Card/Card.jsx | 2 +- src/{lib => }/components/Card/Card.scss | 0 src/{lib => }/components/Card/CardBody.jsx | 0 src/{lib => }/components/Card/CardFooter.jsx | 0 src/components/Card/README.md | 314 + .../components/Card/__tests__/Card.test.jsx | 6 +- .../Card/__tests__/CardBody.test.jsx | 0 .../Card/__tests__/CardFooter.test.jsx | 2 +- src/{lib => }/components/Card/_theme.scss | 0 src/{lib => }/components/Card/_tools.scss | 0 src/{lib => }/components/Card/index.js | 0 .../CheckboxField/CheckboxField.jsx | 0 .../CheckboxField/CheckboxField.scss | 0 .../CheckboxField/README.md} | 204 +- .../__tests__/CheckboxField.test.jsx | 18 +- .../components/CheckboxField/index.js | 0 .../FileInputField/FileInputField.jsx | 0 .../FileInputField/FileInputField.scss | 0 .../FileInputField/README.md} | 178 +- .../__tests__/FileInputField.test.jsx | 22 +- .../components/FileInputField/index.js | 0 .../components/FormLayout/FormLayout.jsx | 8 +- .../components/FormLayout/FormLayout.scss | 0 .../FormLayout/FormLayoutContext.js | 0 .../FormLayout/FormLayoutCustomField.jsx | 8 +- .../FormLayout/FormLayoutCustomField.scss | 0 src/components/FormLayout/README.md | 458 + .../FormLayout/__tests__/FormLayout.test.jsx | 4 +- .../__tests__/FormLayoutCustomField.test.jsx | 10 +- .../components/FormLayout/_theme.scss | 0 src/{lib => }/components/FormLayout/index.js | 0 src/{lib => }/components/Grid/Grid.jsx | 4 +- src/{lib => }/components/Grid/Grid.scss | 0 src/{lib => }/components/Grid/GridSpan.jsx | 0 src/components/Grid/README.md | 281 + .../components/Grid/__tests__/Grid.test.jsx | 4 +- .../Grid/__tests__/GridSpan.test.jsx | 4 +- ...generateResponsiveCustomProperties.test.js | 0 .../generateResponsiveCustomProperties.js | 0 src/{lib => }/components/Grid/_settings.scss | 0 src/{lib => }/components/Grid/_tools.scss | 0 src/{lib => }/components/Grid/index.js | 0 .../components/InputGroup/InputGroup.jsx | 20 +- .../components/InputGroup/InputGroup.scss | 0 .../InputGroup/InputGroupContext.js | 0 .../InputGroup/README.md} | 308 +- .../InputGroup/__tests__/InputGroup.test.jsx | 8 +- .../components/InputGroup/_theme.scss | 0 src/{lib => }/components/InputGroup/index.js | 0 src/{lib => }/components/Modal/Modal.jsx | 2 +- src/{lib => }/components/Modal/Modal.scss | 0 src/{lib => }/components/Modal/ModalBody.jsx | 0 src/{lib => }/components/Modal/ModalBody.scss | 0 .../components/Modal/ModalCloseButton.jsx | 2 +- .../components/Modal/ModalCloseButton.scss | 0 .../components/Modal/ModalContent.jsx | 0 .../components/Modal/ModalContent.scss | 0 .../components/Modal/ModalFooter.jsx | 0 .../components/Modal/ModalFooter.scss | 0 .../components/Modal/ModalHeader.jsx | 0 .../components/Modal/ModalHeader.scss | 0 src/{lib => }/components/Modal/ModalTitle.jsx | 0 .../components/Modal/ModalTitle.scss | 0 src/components/Modal/README.md | 1036 + .../components/Modal/__tests__/Modal.test.jsx | 18 +- .../Modal/__tests__/ModalBody.test.jsx | 0 .../Modal/__tests__/ModalCloseButton.test.jsx | 2 +- .../Modal/__tests__/ModalContent.test.jsx | 0 .../Modal/__tests__/ModalFooter.test.jsx | 2 +- .../Modal/__tests__/ModalHeader.test.jsx | 2 +- .../Modal/__tests__/ModalTitle.test.jsx | 0 .../Modal/_helpers/getJustifyClassName.js | 0 .../Modal/_helpers/getPositionClassName.js | 0 .../Modal/_helpers/getScrollingClassName.js | 0 .../Modal/_helpers/getSizeClassName.js | 0 .../components/Modal/_hooks/useModalFocus.js | 0 .../Modal/_hooks/useModalScrollPrevention.js | 0 src/{lib => }/components/Modal/_settings.scss | 0 src/{lib => }/components/Modal/_theme.scss | 0 src/{lib => }/components/Modal/index.js | 0 src/{lib => }/components/Paper/Paper.jsx | 0 src/{lib => }/components/Paper/Paper.scss | 0 .../README.mdx => components/Paper/README.md} | 48 +- .../components/Paper/__tests__/Paper.test.jsx | 2 +- src/{lib => }/components/Paper/_theme.scss | 0 src/{lib => }/components/Paper/index.js | 0 src/{lib => }/components/Popover/Popover.jsx | 0 src/{lib => }/components/Popover/Popover.scss | 0 .../components/Popover/PopoverWrapper.jsx | 0 .../components/Popover/PopoverWrapper.scss | 0 .../Popover/README.md} | 234 +- .../Popover/__tests__/Popover.test.jsx | 2 +- .../Popover/__tests__/PopoverWrapper.test.jsx | 2 +- .../_helpers/getRootAlignmentClassName.js | 0 .../Popover/_helpers/getRootSideClassName.js | 0 src/{lib => }/components/Popover/_theme.scss | 0 src/{lib => }/components/Popover/index.js | 0 .../README.mdx => components/Radio/README.md} | 252 +- src/{lib => }/components/Radio/Radio.jsx | 6 +- src/{lib => }/components/Radio/Radio.scss | 0 .../components/Radio/__tests__/Radio.test.jsx | 16 +- src/{lib => }/components/Radio/index.js | 0 src/components/ScrollView/README.md | 503 + .../components/ScrollView/ScrollView.jsx | 15 +- .../components/ScrollView/ScrollView.scss | 0 .../ScrollView/__tests__/ScrollView.test.jsx | 0 .../_helpers/getElementsPositionDifference.js | 0 .../ScrollView/_hooks/useLoadResizeHook.js | 0 .../_hooks/useScrollPositionHook.js | 0 src/{lib => }/components/ScrollView/index.js | 0 src/components/SelectField/README.md | 681 + .../components/SelectField/SelectField.jsx | 0 .../components/SelectField/SelectField.scss | 0 .../__tests__/SelectField.test.jsx | 26 +- .../SelectField/_components/Option/Option.jsx | 0 .../SelectField/_components/Option/index.js | 0 src/{lib => }/components/SelectField/index.js | 0 src/components/Table/README.md | 259 + src/{lib => }/components/Table/Table.jsx | 5 +- src/{lib => }/components/Table/Table.scss | 0 .../components/Table/__tests__/Table.test.jsx | 0 .../TableBodyCell/TableBodyCell.jsx | 0 .../Table/_components/TableBodyCell/index.js | 0 .../Table/_components/TableCell.scss | 0 .../TableHeaderCell/TableHeaderCell.jsx | 0 .../_components/TableHeaderCell/index.js | 0 src/{lib => }/components/Table/_settings.scss | 0 src/{lib => }/components/Table/index.js | 0 .../README.mdx => components/Tabs/README.md} | 249 +- src/{lib => }/components/Tabs/Tabs.jsx | 0 src/{lib => }/components/Tabs/Tabs.scss | 0 src/{lib => }/components/Tabs/TabsItem.jsx | 4 +- src/{lib => }/components/Tabs/TabsItem.scss | 0 .../components/Tabs/__tests__/Tabs.test.jsx | 0 .../Tabs/__tests__/TabsItem.test.jsx | 2 +- src/{lib => }/components/Tabs/_theme.scss | 0 src/{lib => }/components/Tabs/index.js | 0 src/components/Text/README.md | 220 + src/{lib => }/components/Text/Text.jsx | 0 src/{lib => }/components/Text/Text.scss | 0 .../components/Text/__tests__/Text.test.jsx | 0 .../Text/_helpers/getRootClampClassName.js | 0 .../Text/_helpers/getRootHyphensClassName.js | 0 .../_helpers/getRootWordWrappingClassName.js | 0 src/{lib => }/components/Text/index.js | 0 src/components/TextArea/README.md | 359 + .../components/TextArea/TextArea.jsx | 0 .../components/TextArea/TextArea.scss | 0 .../TextArea/__tests__/TextArea.test.jsx | 26 +- src/{lib => }/components/TextArea/index.js | 0 .../TextField/README.md} | 678 +- .../components/TextField/TextField.jsx | 0 .../components/TextField/TextField.scss | 0 .../TextField/__tests__/TextField.test.jsx | 26 +- src/{lib => }/components/TextField/index.js | 0 .../TextLink/README.md} | 50 +- .../components/TextLink/TextLink.jsx | 2 +- .../components/TextLink/TextLink.scss | 0 .../TextLink/__tests__/Link.test.jsx | 0 src/{lib => }/components/TextLink/_theme.scss | 0 src/{lib => }/components/TextLink/index.js | 0 .../Toggle/README.md} | 208 +- src/{lib => }/components/Toggle/Toggle.jsx | 0 src/{lib => }/components/Toggle/Toggle.scss | 0 .../Toggle/__tests__/Toggle.test.jsx | 18 +- src/{lib => }/components/Toggle/index.js | 0 src/components/Toolbar/README.md | 362 + src/{lib => }/components/Toolbar/Toolbar.jsx | 0 src/{lib => }/components/Toolbar/Toolbar.scss | 0 .../components/Toolbar/ToolbarGroup.jsx | 0 .../components/Toolbar/ToolbarItem.jsx | 0 .../Toolbar/__tests__/Toolbar.test.jsx | 10 +- .../Toolbar/__tests__/ToolbarGroup.test.jsx | 8 +- .../Toolbar/__tests__/ToolbarItem.test.jsx | 2 +- .../Toolbar/_helpers/getAlignClassName.js | 0 .../Toolbar/_helpers/getJustifyClassName.js | 0 src/{lib => }/components/Toolbar/_theme.scss | 0 src/{lib => }/components/Toolbar/index.js | 0 .../_helpers/__tests__/transferProps.test.js | 0 .../_helpers/getRootColorClassName.js | 0 .../_helpers/getRootPriorityClassName.js | 15 + .../_helpers/getRootSizeClassName.js | 0 .../getRootValidationStateClassName.js | 0 .../components/_helpers/isChildrenEmpty.js | 0 .../_helpers/resolveContextOrProp.js | 0 .../components/_helpers/transferProps.js | 0 src/cssCustomProperties.js | 3 + src/docs/_assets/js/ruiIcon.js | 68 + src/docs/_assets/js/ruiSwatch.js | 40 + src/docs/_assets/racom.svg | 11 + src/docs/_assets/stylesheets/extra.css | 410 + src/docs/_components/Icon/Icon.jsx | 46 - src/docs/_components/Icon/Icon.scss | 13 - src/docs/_components/Icon/index.js | 1 - .../_components/Placeholder/Placeholder.jsx | 51 - .../_components/Placeholder/Placeholder.scss | 21 - src/docs/_components/Placeholder/index.js | 1 - src/docs/_components/Swatch/Swatch.jsx | 34 - src/docs/_components/Swatch/Swatch.scss | 25 - src/docs/_components/Swatch/index.js | 1 - src/docs/_components/Version/Version.jsx | 10 - src/docs/_components/Version/index.js | 1 - src/docs/_overrides/main.html | 30 + src/docs/contribute/{api.mdx => api.md} | 14 +- .../{composition.mdx => composition.md} | 8 +- src/docs/contribute/{css.mdx => css.md} | 16 +- src/docs/contribute/general-guidelines.md | 1 + src/docs/contribute/releasing.md | 1 + src/docs/css-helpers/animation.md | 21 + src/docs/css-helpers/animation.mdx | 32 - src/docs/css-helpers/box-alignment.md | 170 + src/docs/css-helpers/box-alignment.mdx | 185 - src/docs/css-helpers/colors.md | 110 + src/docs/css-helpers/colors.mdx | 116 - src/docs/css-helpers/display.md | 69 + src/docs/css-helpers/display.mdx | 86 - src/docs/css-helpers/spacing.md | 133 + src/docs/css-helpers/spacing.mdx | 142 - src/docs/css-helpers/typography.md | 74 + src/docs/css-helpers/typography.mdx | 82 - src/docs/customize/global-props.md | 85 + src/docs/customize/global-props.mdx | 101 - src/docs/customize/theming/forms.md | 822 + src/docs/customize/theming/forms.mdx | 790 - .../theming/{overview.mdx => overview.md} | 13 +- .../{translations.mdx => translations.md} | 30 +- .../{accessibility.mdx => accessibility.md} | 22 +- .../foundation/{borders.mdx => borders.md} | 14 +- .../{breakpoints.mdx => breakpoints.md} | 6 - src/docs/foundation/{colors.mdx => colors.md} | 170 +- .../{design-tokens.mdx => design-tokens.md} | 8 +- src/docs/foundation/{icons.mdx => icons.md} | 6 - .../foundation/{shadows.mdx => shadows.md} | 14 +- .../foundation/{spacing.mdx => spacing.md} | 22 +- src/docs/foundation/typography.md | 104 + src/docs/foundation/typography.mdx | 112 - ...nd-devices.mdx => browsers-and-devices.md} | 6 - .../{installation.mdx => installation.md} | 6 - .../getting-started/{usage.mdx => usage.md} | 28 +- .../{classnames.mdx => classnames.md} | 31 +- src/{lib => }/foundation.scss | 0 src/gatsby-theme-docz/index.css | 1 - src/gatsby-theme-docz/theme/prism/dark.js | 2 - src/gatsby-theme-docz/theme/prism/light.js | 77 - src/gatsby-theme-docz/wrapper.js | 44 - src/{lib => }/helpers.scss | 0 src/{lib => }/index.js | 6 + src/{docs/index.mdx => index.md} | 26 +- src/lib/components/Badge/README.mdx | 126 - src/lib/components/Button/README.mdx | 581 - src/lib/components/Card/README.mdx | 326 - src/lib/components/FormLayout/README.mdx | 501 - src/lib/components/Grid/README.mdx | 299 - src/lib/components/Modal/README.mdx | 1360 - src/lib/components/ScrollView/README.mdx | 521 - src/lib/components/SelectField/README.mdx | 693 - src/lib/components/Table/README.mdx | 275 - src/lib/components/Text/README.mdx | 241 - src/lib/components/TextArea/README.mdx | 366 - src/lib/components/Toolbar/README.mdx | 386 - src/{lib => }/provider/RUIContext.jsx | 0 src/{lib => }/provider/RUIProvider.jsx | 28 +- .../provider/__tests__/RUIProvider.test.jsx | 0 src/{lib => }/provider/index.js | 0 src/{lib => }/provider/withGlobalProps.jsx | 0 src/{lib => }/styles/_utilities.scss | 0 src/{lib => }/styles/elements/_code.scss | 0 src/{lib => }/styles/elements/_links.scss | 0 src/{lib => }/styles/elements/_lists.scss | 0 src/{lib => }/styles/elements/_page.scss | 0 src/{lib => }/styles/elements/_rulers.scss | 0 src/{lib => }/styles/elements/_small.scss | 0 src/{lib => }/styles/generic/_box-sizing.scss | 0 src/{lib => }/styles/generic/_focus.scss | 0 src/{lib => }/styles/generic/_forms.scss | 0 src/{lib => }/styles/generic/_reset.scss | 0 src/{lib => }/styles/generic/_shared.scss | 0 src/{lib => }/styles/helpers/_animation.scss | 0 .../styles/settings/_animations.scss | 0 .../styles/settings/_breakpoints.scss | 0 .../styles/settings/_escaped-characters.scss | 0 .../styles/settings/_form-fields.scss | 0 src/{lib => }/styles/settings/_forms.scss | 0 src/{lib => }/styles/settings/_utilities.scss | 0 src/{lib => }/styles/settings/_z-indexes.scss | 0 .../styles/theme-constants/_breakpoints.scss | 0 .../styles/theme-constants/_colors.scss | 0 .../styles/theme-constants/_svg.scss | 0 .../styles/theme/_accessibility.scss | 0 src/{lib => }/styles/theme/_borders.scss | 0 src/{lib => }/styles/theme/_code.scss | 0 src/{lib => }/styles/theme/_form-fields.scss | 0 src/{lib => }/styles/theme/_links.scss | 0 src/{lib => }/styles/theme/_lists.scss | 0 src/{lib => }/styles/theme/_page.scss | 0 src/{lib => }/styles/theme/_spacing.scss | 0 src/{lib => }/styles/theme/_typography.scss | 0 .../styles/tools/_accessibility.scss | 0 src/{lib => }/styles/tools/_breakpoint.scss | 0 src/{lib => }/styles/tools/_caret.scss | 2 +- src/{lib => }/styles/tools/_colors.scss | 0 src/{lib => }/styles/tools/_reset.scss | 0 src/{lib => }/styles/tools/_scrollbar.scss | 0 src/{lib => }/styles/tools/_spacing.scss | 0 src/{lib => }/styles/tools/_string.scss | 0 src/{lib => }/styles/tools/_svg.scss | 0 src/{lib => }/styles/tools/_transition.scss | 0 src/{lib => }/styles/tools/_utilities.scss | 0 .../form-fields/_box-field-elements.scss | 2 +- .../tools/form-fields/_box-field-layout.scss | 0 .../tools/form-fields/_box-field-sizes.scss | 0 .../styles/tools/form-fields/_foundation.scss | 0 .../form-fields/_inline-field-elements.scss | 2 +- .../form-fields/_inline-field-layout.scss | 0 .../styles/tools/form-fields/_variants.scss | 0 src/{lib => }/theme.scss | 7 +- src/{lib => }/translations/en.js | 0 src/{lib => }/utils/__tests__/classNames.js | 0 src/{lib => }/utils/classNames.js | 0 tests/mocks/svgrMock.jsx | 4 + .../providerTests/formLayoutProviderTest.jsx | 2 +- tests/setupJest.js | 4 + webpack.config.js => webpack.config.babel.js | 43 +- 375 files changed, 26448 insertions(+), 73709 deletions(-) create mode 100644 .env.dist create mode 100644 docker-compose.yml create mode 100644 docker/mkdocs/Dockerfile create mode 100644 docker/mkdocs/init-container.sh create mode 100644 docker/node/Dockerfile delete mode 100644 doczrc.js delete mode 100644 gatsby-config.js create mode 100644 mkdocs.yml rename src/{lib => }/components/Alert/Alert.jsx (95%) rename src/{lib => }/components/Alert/Alert.scss (100%) rename src/{lib/components/Alert/README.mdx => components/Alert/README.md} (59%) rename src/{lib => }/components/Alert/__tests__/Alert.test.jsx (95%) rename src/{lib => }/components/Alert/_settings.scss (100%) rename src/{lib => }/components/Alert/_theme.scss (100%) rename src/{lib => }/components/Alert/_tools.scss (100%) rename src/{lib => }/components/Alert/index.js (100%) rename src/{lib => }/components/Badge/Badge.jsx (91%) rename src/{lib => }/components/Badge/Badge.scss (98%) create mode 100644 src/components/Badge/README.md rename src/{lib => }/components/Badge/__tests__/Badge.test.jsx (91%) rename src/{lib => }/components/Badge/index.js (100%) rename src/{lib => }/components/Button/Button.jsx (98%) rename src/{lib => }/components/Button/Button.scss (100%) create mode 100644 src/components/Button/README.md rename src/{lib => }/components/Button/__tests__/Button.test.jsx (90%) rename src/{lib => }/components/Button/_base.scss (100%) rename src/{lib => }/components/Button/_priorities.scss (100%) rename src/{lib => }/components/Button/_settings.scss (100%) rename src/{lib => }/components/Button/_theme.scss (100%) rename src/{lib => }/components/Button/_tools.scss (100%) rename src/{lib => }/components/Button/helpers/getRootLabelVisibilityClassName.js (100%) rename src/{lib/components/_helpers => components/Button/helpers}/getRootPriorityClassName.js (100%) rename src/{lib => }/components/Button/index.js (100%) rename src/{lib => }/components/ButtonGroup/ButtonGroup.jsx (88%) rename src/{lib => }/components/ButtonGroup/ButtonGroup.scss (100%) rename src/{lib => }/components/ButtonGroup/ButtonGroupContext.js (100%) rename src/{lib/components/ButtonGroup/README.mdx => components/ButtonGroup/README.md} (56%) rename src/{lib => }/components/ButtonGroup/__tests__/ButtonGroup.test.jsx (89%) rename src/{lib => }/components/ButtonGroup/_theme.scss (100%) rename src/{lib => }/components/ButtonGroup/index.js (100%) rename src/{lib => }/components/Card/Card.jsx (93%) rename src/{lib => }/components/Card/Card.scss (100%) rename src/{lib => }/components/Card/CardBody.jsx (100%) rename src/{lib => }/components/Card/CardFooter.jsx (100%) create mode 100644 src/components/Card/README.md rename src/{lib => }/components/Card/__tests__/Card.test.jsx (85%) rename src/{lib => }/components/Card/__tests__/CardBody.test.jsx (100%) rename src/{lib => }/components/Card/__tests__/CardFooter.test.jsx (86%) rename src/{lib => }/components/Card/_theme.scss (100%) rename src/{lib => }/components/Card/_tools.scss (100%) rename src/{lib => }/components/Card/index.js (100%) rename src/{lib => }/components/CheckboxField/CheckboxField.jsx (100%) rename src/{lib => }/components/CheckboxField/CheckboxField.scss (100%) rename src/{lib/components/CheckboxField/README.mdx => components/CheckboxField/README.md} (60%) rename src/{lib => }/components/CheckboxField/__tests__/CheckboxField.test.jsx (68%) rename src/{lib => }/components/CheckboxField/index.js (100%) rename src/{lib => }/components/FileInputField/FileInputField.jsx (100%) rename src/{lib => }/components/FileInputField/FileInputField.scss (100%) rename src/{lib/components/FileInputField/README.mdx => components/FileInputField/README.md} (63%) rename src/{lib => }/components/FileInputField/__tests__/FileInputField.test.jsx (66%) rename src/{lib => }/components/FileInputField/index.js (100%) rename src/{lib => }/components/FormLayout/FormLayout.jsx (93%) rename src/{lib => }/components/FormLayout/FormLayout.scss (100%) rename src/{lib => }/components/FormLayout/FormLayoutContext.js (100%) rename src/{lib => }/components/FormLayout/FormLayoutCustomField.jsx (100%) rename src/{lib => }/components/FormLayout/FormLayoutCustomField.scss (100%) create mode 100644 src/components/FormLayout/README.md rename src/{lib => }/components/FormLayout/__tests__/FormLayout.test.jsx (96%) rename src/{lib => }/components/FormLayout/__tests__/FormLayoutCustomField.test.jsx (85%) rename src/{lib => }/components/FormLayout/_theme.scss (100%) rename src/{lib => }/components/FormLayout/index.js (100%) rename src/{lib => }/components/Grid/Grid.jsx (97%) rename src/{lib => }/components/Grid/Grid.scss (100%) rename src/{lib => }/components/Grid/GridSpan.jsx (100%) create mode 100644 src/components/Grid/README.md rename src/{lib => }/components/Grid/__tests__/Grid.test.jsx (96%) rename src/{lib => }/components/Grid/__tests__/GridSpan.test.jsx (92%) rename src/{lib => }/components/Grid/_helpers/__tests__/generateResponsiveCustomProperties.test.js (100%) rename src/{lib => }/components/Grid/_helpers/generateResponsiveCustomProperties.js (100%) rename src/{lib => }/components/Grid/_settings.scss (100%) rename src/{lib => }/components/Grid/_tools.scss (100%) rename src/{lib => }/components/Grid/index.js (100%) rename src/{lib => }/components/InputGroup/InputGroup.jsx (94%) rename src/{lib => }/components/InputGroup/InputGroup.scss (100%) rename src/{lib => }/components/InputGroup/InputGroupContext.js (100%) rename src/{lib/components/InputGroup/README.mdx => components/InputGroup/README.md} (55%) rename src/{lib => }/components/InputGroup/__tests__/InputGroup.test.jsx (91%) rename src/{lib => }/components/InputGroup/_theme.scss (100%) rename src/{lib => }/components/InputGroup/index.js (100%) rename src/{lib => }/components/Modal/Modal.jsx (100%) rename src/{lib => }/components/Modal/Modal.scss (100%) rename src/{lib => }/components/Modal/ModalBody.jsx (100%) rename src/{lib => }/components/Modal/ModalBody.scss (100%) rename src/{lib => }/components/Modal/ModalCloseButton.jsx (100%) rename src/{lib => }/components/Modal/ModalCloseButton.scss (100%) rename src/{lib => }/components/Modal/ModalContent.jsx (100%) rename src/{lib => }/components/Modal/ModalContent.scss (100%) rename src/{lib => }/components/Modal/ModalFooter.jsx (100%) rename src/{lib => }/components/Modal/ModalFooter.scss (100%) rename src/{lib => }/components/Modal/ModalHeader.jsx (100%) rename src/{lib => }/components/Modal/ModalHeader.scss (100%) rename src/{lib => }/components/Modal/ModalTitle.jsx (100%) rename src/{lib => }/components/Modal/ModalTitle.scss (100%) create mode 100644 src/components/Modal/README.md rename src/{lib => }/components/Modal/__tests__/Modal.test.jsx (98%) rename src/{lib => }/components/Modal/__tests__/ModalBody.test.jsx (100%) rename src/{lib => }/components/Modal/__tests__/ModalCloseButton.test.jsx (92%) rename src/{lib => }/components/Modal/__tests__/ModalContent.test.jsx (100%) rename src/{lib => }/components/Modal/__tests__/ModalFooter.test.jsx (90%) rename src/{lib => }/components/Modal/__tests__/ModalHeader.test.jsx (88%) rename src/{lib => }/components/Modal/__tests__/ModalTitle.test.jsx (100%) rename src/{lib => }/components/Modal/_helpers/getJustifyClassName.js (100%) rename src/{lib => }/components/Modal/_helpers/getPositionClassName.js (100%) rename src/{lib => }/components/Modal/_helpers/getScrollingClassName.js (100%) rename src/{lib => }/components/Modal/_helpers/getSizeClassName.js (100%) rename src/{lib => }/components/Modal/_hooks/useModalFocus.js (100%) rename src/{lib => }/components/Modal/_hooks/useModalScrollPrevention.js (100%) rename src/{lib => }/components/Modal/_settings.scss (100%) rename src/{lib => }/components/Modal/_theme.scss (100%) rename src/{lib => }/components/Modal/index.js (100%) rename src/{lib => }/components/Paper/Paper.jsx (100%) rename src/{lib => }/components/Paper/Paper.scss (100%) rename src/{lib/components/Paper/README.mdx => components/Paper/README.md} (82%) rename src/{lib => }/components/Paper/__tests__/Paper.test.jsx (91%) rename src/{lib => }/components/Paper/_theme.scss (100%) rename src/{lib => }/components/Paper/index.js (100%) rename src/{lib => }/components/Popover/Popover.jsx (100%) rename src/{lib => }/components/Popover/Popover.scss (100%) rename src/{lib => }/components/Popover/PopoverWrapper.jsx (100%) rename src/{lib => }/components/Popover/PopoverWrapper.scss (100%) rename src/{lib/components/Popover/README.mdx => components/Popover/README.md} (72%) rename src/{lib => }/components/Popover/__tests__/Popover.test.jsx (97%) rename src/{lib => }/components/Popover/__tests__/PopoverWrapper.test.jsx (89%) rename src/{lib => }/components/Popover/_helpers/getRootAlignmentClassName.js (100%) rename src/{lib => }/components/Popover/_helpers/getRootSideClassName.js (100%) rename src/{lib => }/components/Popover/_theme.scss (100%) rename src/{lib => }/components/Popover/index.js (100%) rename src/{lib/components/Radio/README.mdx => components/Radio/README.md} (65%) rename src/{lib => }/components/Radio/Radio.jsx (94%) rename src/{lib => }/components/Radio/Radio.scss (100%) rename src/{lib => }/components/Radio/__tests__/Radio.test.jsx (83%) rename src/{lib => }/components/Radio/index.js (100%) create mode 100644 src/components/ScrollView/README.md rename src/{lib => }/components/ScrollView/ScrollView.jsx (97%) rename src/{lib => }/components/ScrollView/ScrollView.scss (100%) rename src/{lib => }/components/ScrollView/__tests__/ScrollView.test.jsx (100%) rename src/{lib => }/components/ScrollView/_helpers/getElementsPositionDifference.js (100%) rename src/{lib => }/components/ScrollView/_hooks/useLoadResizeHook.js (100%) rename src/{lib => }/components/ScrollView/_hooks/useScrollPositionHook.js (100%) rename src/{lib => }/components/ScrollView/index.js (100%) create mode 100644 src/components/SelectField/README.md rename src/{lib => }/components/SelectField/SelectField.jsx (100%) rename src/{lib => }/components/SelectField/SelectField.scss (100%) rename src/{lib => }/components/SelectField/__tests__/SelectField.test.jsx (76%) rename src/{lib => }/components/SelectField/_components/Option/Option.jsx (100%) rename src/{lib => }/components/SelectField/_components/Option/index.js (100%) rename src/{lib => }/components/SelectField/index.js (100%) create mode 100644 src/components/Table/README.md rename src/{lib => }/components/Table/Table.jsx (96%) rename src/{lib => }/components/Table/Table.scss (100%) rename src/{lib => }/components/Table/__tests__/Table.test.jsx (100%) rename src/{lib => }/components/Table/_components/TableBodyCell/TableBodyCell.jsx (100%) rename src/{lib => }/components/Table/_components/TableBodyCell/index.js (100%) rename src/{lib => }/components/Table/_components/TableCell.scss (100%) rename src/{lib => }/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx (100%) rename src/{lib => }/components/Table/_components/TableHeaderCell/index.js (100%) rename src/{lib => }/components/Table/_settings.scss (100%) rename src/{lib => }/components/Table/index.js (100%) rename src/{lib/components/Tabs/README.mdx => components/Tabs/README.md} (60%) rename src/{lib => }/components/Tabs/Tabs.jsx (100%) rename src/{lib => }/components/Tabs/Tabs.scss (100%) rename src/{lib => }/components/Tabs/TabsItem.jsx (100%) rename src/{lib => }/components/Tabs/TabsItem.scss (100%) rename src/{lib => }/components/Tabs/__tests__/Tabs.test.jsx (100%) rename src/{lib => }/components/Tabs/__tests__/TabsItem.test.jsx (95%) rename src/{lib => }/components/Tabs/_theme.scss (100%) rename src/{lib => }/components/Tabs/index.js (100%) create mode 100644 src/components/Text/README.md rename src/{lib => }/components/Text/Text.jsx (100%) rename src/{lib => }/components/Text/Text.scss (100%) rename src/{lib => }/components/Text/__tests__/Text.test.jsx (100%) rename src/{lib => }/components/Text/_helpers/getRootClampClassName.js (100%) rename src/{lib => }/components/Text/_helpers/getRootHyphensClassName.js (100%) rename src/{lib => }/components/Text/_helpers/getRootWordWrappingClassName.js (100%) rename src/{lib => }/components/Text/index.js (100%) create mode 100644 src/components/TextArea/README.md rename src/{lib => }/components/TextArea/TextArea.jsx (100%) rename src/{lib => }/components/TextArea/TextArea.scss (100%) rename src/{lib => }/components/TextArea/__tests__/TextArea.test.jsx (62%) rename src/{lib => }/components/TextArea/index.js (100%) rename src/{lib/components/TextField/README.mdx => components/TextField/README.md} (52%) rename src/{lib => }/components/TextField/TextField.jsx (100%) rename src/{lib => }/components/TextField/TextField.scss (100%) rename src/{lib => }/components/TextField/__tests__/TextField.test.jsx (74%) rename src/{lib => }/components/TextField/index.js (100%) rename src/{lib/components/TextLink/README.mdx => components/TextLink/README.md} (72%) rename src/{lib => }/components/TextLink/TextLink.jsx (100%) rename src/{lib => }/components/TextLink/TextLink.scss (100%) rename src/{lib => }/components/TextLink/__tests__/Link.test.jsx (100%) rename src/{lib => }/components/TextLink/_theme.scss (100%) rename src/{lib => }/components/TextLink/index.js (100%) rename src/{lib/components/Toggle/README.mdx => components/Toggle/README.md} (65%) rename src/{lib => }/components/Toggle/Toggle.jsx (100%) rename src/{lib => }/components/Toggle/Toggle.scss (100%) rename src/{lib => }/components/Toggle/__tests__/Toggle.test.jsx (71%) rename src/{lib => }/components/Toggle/index.js (100%) create mode 100644 src/components/Toolbar/README.md rename src/{lib => }/components/Toolbar/Toolbar.jsx (100%) rename src/{lib => }/components/Toolbar/Toolbar.scss (100%) rename src/{lib => }/components/Toolbar/ToolbarGroup.jsx (100%) rename src/{lib => }/components/Toolbar/ToolbarItem.jsx (100%) rename src/{lib => }/components/Toolbar/__tests__/Toolbar.test.jsx (65%) rename src/{lib => }/components/Toolbar/__tests__/ToolbarGroup.test.jsx (69%) rename src/{lib => }/components/Toolbar/__tests__/ToolbarItem.test.jsx (89%) rename src/{lib => }/components/Toolbar/_helpers/getAlignClassName.js (100%) rename src/{lib => }/components/Toolbar/_helpers/getJustifyClassName.js (100%) rename src/{lib => }/components/Toolbar/_theme.scss (100%) rename src/{lib => }/components/Toolbar/index.js (100%) rename src/{lib => }/components/_helpers/__tests__/transferProps.test.js (100%) rename src/{lib => }/components/_helpers/getRootColorClassName.js (100%) create mode 100644 src/components/_helpers/getRootPriorityClassName.js rename src/{lib => }/components/_helpers/getRootSizeClassName.js (100%) rename src/{lib => }/components/_helpers/getRootValidationStateClassName.js (100%) rename src/{lib => }/components/_helpers/isChildrenEmpty.js (100%) rename src/{lib => }/components/_helpers/resolveContextOrProp.js (100%) rename src/{lib => }/components/_helpers/transferProps.js (100%) create mode 100644 src/cssCustomProperties.js create mode 100644 src/docs/_assets/js/ruiIcon.js create mode 100644 src/docs/_assets/js/ruiSwatch.js create mode 100644 src/docs/_assets/racom.svg create mode 100644 src/docs/_assets/stylesheets/extra.css delete mode 100644 src/docs/_components/Icon/Icon.jsx delete mode 100644 src/docs/_components/Icon/Icon.scss delete mode 100644 src/docs/_components/Icon/index.js delete mode 100644 src/docs/_components/Placeholder/Placeholder.jsx delete mode 100644 src/docs/_components/Placeholder/Placeholder.scss delete mode 100644 src/docs/_components/Placeholder/index.js delete mode 100644 src/docs/_components/Swatch/Swatch.jsx delete mode 100644 src/docs/_components/Swatch/Swatch.scss delete mode 100644 src/docs/_components/Swatch/index.js delete mode 100644 src/docs/_components/Version/Version.jsx delete mode 100644 src/docs/_components/Version/index.js create mode 100644 src/docs/_overrides/main.html rename src/docs/contribute/{api.mdx => api.md} (72%) rename src/docs/contribute/{composition.mdx => composition.md} (91%) rename src/docs/contribute/{css.mdx => css.md} (96%) create mode 120000 src/docs/contribute/general-guidelines.md create mode 120000 src/docs/contribute/releasing.md create mode 100644 src/docs/css-helpers/animation.md delete mode 100644 src/docs/css-helpers/animation.mdx create mode 100644 src/docs/css-helpers/box-alignment.md delete mode 100644 src/docs/css-helpers/box-alignment.mdx create mode 100644 src/docs/css-helpers/colors.md delete mode 100644 src/docs/css-helpers/colors.mdx create mode 100644 src/docs/css-helpers/display.md delete mode 100644 src/docs/css-helpers/display.mdx create mode 100644 src/docs/css-helpers/spacing.md delete mode 100644 src/docs/css-helpers/spacing.mdx create mode 100644 src/docs/css-helpers/typography.md delete mode 100644 src/docs/css-helpers/typography.mdx create mode 100644 src/docs/customize/global-props.md delete mode 100644 src/docs/customize/global-props.mdx create mode 100644 src/docs/customize/theming/forms.md delete mode 100644 src/docs/customize/theming/forms.mdx rename src/docs/customize/theming/{overview.mdx => overview.md} (96%) rename src/docs/customize/{translations.mdx => translations.md} (59%) rename src/docs/foundation/{accessibility.mdx => accessibility.md} (78%) rename src/docs/foundation/{borders.mdx => borders.md} (68%) rename src/docs/foundation/{breakpoints.mdx => breakpoints.md} (96%) rename src/docs/foundation/{colors.mdx => colors.md} (52%) rename src/docs/foundation/{design-tokens.mdx => design-tokens.md} (89%) rename src/docs/foundation/{icons.mdx => icons.md} (85%) rename src/docs/foundation/{shadows.mdx => shadows.md} (67%) rename src/docs/foundation/{spacing.mdx => spacing.md} (90%) create mode 100644 src/docs/foundation/typography.md delete mode 100644 src/docs/foundation/typography.mdx rename src/docs/getting-started/{browsers-and-devices.mdx => browsers-and-devices.md} (92%) rename src/docs/getting-started/{installation.mdx => installation.md} (71%) rename src/docs/getting-started/{usage.mdx => usage.md} (85%) rename src/docs/js-helpers/{classnames.mdx => classnames.md} (53%) rename src/{lib => }/foundation.scss (100%) delete mode 100644 src/gatsby-theme-docz/index.css delete mode 100644 src/gatsby-theme-docz/theme/prism/dark.js delete mode 100644 src/gatsby-theme-docz/theme/prism/light.js delete mode 100644 src/gatsby-theme-docz/wrapper.js rename src/{lib => }/helpers.scss (100%) rename src/{lib => }/index.js (89%) rename src/{docs/index.mdx => index.md} (73%) delete mode 100644 src/lib/components/Badge/README.mdx delete mode 100644 src/lib/components/Button/README.mdx delete mode 100644 src/lib/components/Card/README.mdx delete mode 100644 src/lib/components/FormLayout/README.mdx delete mode 100644 src/lib/components/Grid/README.mdx delete mode 100644 src/lib/components/Modal/README.mdx delete mode 100644 src/lib/components/ScrollView/README.mdx delete mode 100644 src/lib/components/SelectField/README.mdx delete mode 100644 src/lib/components/Table/README.mdx delete mode 100644 src/lib/components/Text/README.mdx delete mode 100644 src/lib/components/TextArea/README.mdx delete mode 100644 src/lib/components/Toolbar/README.mdx rename src/{lib => }/provider/RUIContext.jsx (100%) rename src/{lib => }/provider/RUIProvider.jsx (62%) rename src/{lib => }/provider/__tests__/RUIProvider.test.jsx (100%) rename src/{lib => }/provider/index.js (100%) rename src/{lib => }/provider/withGlobalProps.jsx (100%) rename src/{lib => }/styles/_utilities.scss (100%) rename src/{lib => }/styles/elements/_code.scss (100%) rename src/{lib => }/styles/elements/_links.scss (100%) rename src/{lib => }/styles/elements/_lists.scss (100%) rename src/{lib => }/styles/elements/_page.scss (100%) rename src/{lib => }/styles/elements/_rulers.scss (100%) rename src/{lib => }/styles/elements/_small.scss (100%) rename src/{lib => }/styles/generic/_box-sizing.scss (100%) rename src/{lib => }/styles/generic/_focus.scss (100%) rename src/{lib => }/styles/generic/_forms.scss (100%) rename src/{lib => }/styles/generic/_reset.scss (100%) rename src/{lib => }/styles/generic/_shared.scss (100%) rename src/{lib => }/styles/helpers/_animation.scss (100%) rename src/{lib => }/styles/settings/_animations.scss (100%) rename src/{lib => }/styles/settings/_breakpoints.scss (100%) rename src/{lib => }/styles/settings/_escaped-characters.scss (100%) rename src/{lib => }/styles/settings/_form-fields.scss (100%) rename src/{lib => }/styles/settings/_forms.scss (100%) rename src/{lib => }/styles/settings/_utilities.scss (100%) rename src/{lib => }/styles/settings/_z-indexes.scss (100%) rename src/{lib => }/styles/theme-constants/_breakpoints.scss (100%) rename src/{lib => }/styles/theme-constants/_colors.scss (100%) rename src/{lib => }/styles/theme-constants/_svg.scss (100%) rename src/{lib => }/styles/theme/_accessibility.scss (100%) rename src/{lib => }/styles/theme/_borders.scss (100%) rename src/{lib => }/styles/theme/_code.scss (100%) rename src/{lib => }/styles/theme/_form-fields.scss (100%) rename src/{lib => }/styles/theme/_links.scss (100%) rename src/{lib => }/styles/theme/_lists.scss (100%) rename src/{lib => }/styles/theme/_page.scss (100%) rename src/{lib => }/styles/theme/_spacing.scss (100%) rename src/{lib => }/styles/theme/_typography.scss (100%) rename src/{lib => }/styles/tools/_accessibility.scss (100%) rename src/{lib => }/styles/tools/_breakpoint.scss (100%) rename src/{lib => }/styles/tools/_caret.scss (89%) rename src/{lib => }/styles/tools/_colors.scss (100%) rename src/{lib => }/styles/tools/_reset.scss (100%) rename src/{lib => }/styles/tools/_scrollbar.scss (100%) rename src/{lib => }/styles/tools/_spacing.scss (100%) rename src/{lib => }/styles/tools/_string.scss (100%) rename src/{lib => }/styles/tools/_svg.scss (100%) rename src/{lib => }/styles/tools/_transition.scss (100%) rename src/{lib => }/styles/tools/_utilities.scss (100%) rename src/{lib => }/styles/tools/form-fields/_box-field-elements.scss (99%) rename src/{lib => }/styles/tools/form-fields/_box-field-layout.scss (100%) rename src/{lib => }/styles/tools/form-fields/_box-field-sizes.scss (100%) rename src/{lib => }/styles/tools/form-fields/_foundation.scss (100%) rename src/{lib => }/styles/tools/form-fields/_inline-field-elements.scss (99%) rename src/{lib => }/styles/tools/form-fields/_inline-field-layout.scss (100%) rename src/{lib => }/styles/tools/form-fields/_variants.scss (100%) rename src/{lib => }/theme.scss (99%) rename src/{lib => }/translations/en.js (100%) rename src/{lib => }/utils/__tests__/classNames.js (100%) rename src/{lib => }/utils/classNames.js (100%) create mode 100644 tests/mocks/svgrMock.jsx rename webpack.config.js => webpack.config.babel.js (63%) diff --git a/.browserslistrc b/.browserslistrc index 5372580b6..426ba935f 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -3,4 +3,3 @@ defaults not ie > 1 not ie_mob > 1 -maintained node versions diff --git a/.env.dist b/.env.dist new file mode 100644 index 000000000..32e724a25 --- /dev/null +++ b/.env.dist @@ -0,0 +1,6 @@ +# Host system port where the live documentation is to be made accessible +COMPOSE_START_PORT=8000 + +# Ownership of the files created in the container +COMPOSE_UID=1000 +COMPOSE_GID=1000 diff --git a/.eslintrc b/.eslintrc index 51c183eae..afd66fc8d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -6,12 +6,12 @@ "browser": true, "jest": true }, + "ignorePatterns": ["src/docs/_assets/generated"], "overrides": [ { - "files": ["**/*.md", "**/*.mdx"], + "files": ["**/*.md"], "extends": [ - "plugin:markdown/recommended", - "plugin:mdx/recommended" + "plugin:markdown/recommended" ] } ], diff --git a/.github/workflows/release-management.yml b/.github/workflows/release-management.yml index 043fdf741..2c3763ff0 100644 --- a/.github/workflows/release-management.yml +++ b/.github/workflows/release-management.yml @@ -24,7 +24,7 @@ jobs: run: npm ci - name: Build - run: npm run build + run: docker compose run --rm node_build_site && docker compose run --rm mkdocs_build_site - name: Test run: npm test @@ -45,7 +45,7 @@ jobs: uses: actions/upload-artifact@v3 with: name: docs - path: docs + path: site update_release_draft: name: Update release draft diff --git a/.gitignore b/.gitignore index 374ad226f..74f855d3d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ -/.docz /dist -/docs /node_modules -lib-stats.development.html -lib-stats.html +/site +/src/docs/_assets/generated/* +.env +statistics.html +!.gitkeep diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc index de6a2ad6c..230ac13fc 100644 --- a/.markdownlint.jsonc +++ b/.markdownlint.jsonc @@ -2,9 +2,11 @@ { "default": true, + "MD033": false, // Allow inline JSX. + "MD024": false, // Allow duplicate headings "line-length": { "code_block_line_length": 120, - "tables": false - }, - "no-inline-html": false // Allow inline JSX. + "tables": false, + "code_blocks": false + } } diff --git a/.npmignore b/.npmignore index e16298660..d055726ef 100644 --- a/.npmignore +++ b/.npmignore @@ -1,25 +1,29 @@ -/.docz /.github /.idea -/docs +/docker /node_modules -/src/docs/ -/src/gatsby-theme-docz/ +/public +/site /src/**/__tests__ +/src/docs/ +/src/cssCustomProperties.js +/src/index.md /tests .browserslistrc .editorconfig +.env +.env.dist .eslintrc .gitignore .markdownlint.jsonc babel.config.js -doczrc.js -gatsby-config.js +CONTRIBUTING.md +docker-compose.yml jest.config.js -lib-stats.development.html -lib-stats.html +mkdocs.yml package-lock.json postcss.config.js RELEASING.md +statistics.html stylelint.config.js -webpack.config.js +webpack.config.babel.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dc8a5a24a..5030f6c79 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,24 +1,83 @@ ---- -name: General Guidelines -route: /contribute/guidelines -menu: Contribute ---- - # Contributing In the first place, thank you for your interest in contributing! πŸ™ ## Development -To build the project: +Working on the site requires: + +* [Docker] +* [Docker Compose] + +This allows running the documentation site which serves as a development platform. + +### Configure Docker Compose + +Review the default env variable values in the `docker-compose.yml` file. +The defaults should work for most systems, but can be changed if needed. + +To change them: + +1. Create a `.env` file from the template: + + ```bash + cp .env.dist .env + ``` + +2. Edit the new `.env` file as needed + +### Use Docker Compose + +#### Node shell + +All npm commands such as `npm ci`, `npm test`, `npm run eslint` and others you +need to run them within the `node_shell` docker container. + +To log into the container, run: + +```bash +docker compose run --rm node_shell +``` + +#### Run the Dev Server + +1. Install dependencies (run within `node_shell`): + + ```bash + npm ci + ``` + +2. Run development server (run on host): + + ```bash + docker compose up node_dev_server mkdocs_dev_server + ``` + +#### Build the Project + +1. Make sure the dev server is not running (run on host): + + ```bash + docker compose down + ``` -1. Install local npm packages: `npm install` -2. Run the build: `npm run build` +2. Install dependencies (run within `node_shell`): -To run the dev server: + ```bash + npm ci + ``` -1. Install local npm packages: `npm install` -2. Run the dev server (usually on `http://localhost:3000`): `npm start` +3. Build JS (run on host): + + ```bash + docker compose run --rm node_build_site + ``` + +4. Build mkDocs (run on host): + + ```bash + docker compose run --rm mkdocs_build_site + ``` ## Git Workflow @@ -33,41 +92,42 @@ Actions), please follow these guidelines: 3. **Name your branches according to nature of change.** Choose one of: - - `bc/*` for breaking changes - - `feature/*` for features - - `bugfix/*` for bugfixes - - `refactoring/*` for refactoring of the library - - `docs/*` or `documentation/*` for changes in docs - - `maintenance/*` for maintenance (builds, dependencies, automation, etc.) - - `release/*` for [releases](/contribute/releasing) (administrators only) + * `bc/*` for breaking changes + * `feature/*` for features + * `bugfix/*` for bugfixes + * `refactoring/*` for refactoring of the library + * `docs/*` or `documentation/*` for changes in docs + * `maintenance/*` for maintenance (builds, dependencies, automation, etc.) + * `release/*` for releases (administrators only) 4. **Write clear, helpful and descriptive commit messages.** - 1. **Use imperative and write in English,** e.g. _Update dependencies_ or - _Claim support for controlled components only_. - 2. **If an issue exists for your changes, append the issue number** in - parentheses to the end of the commit message, e.g. _Update dependencies - (#261)_. - 3. Optionally use Markdown code blocks to emphasize, e.g. - _Create `ScrollView` component (#53)_. + 1. **Use imperative and write in English,** e.g. _Update dependencies_ or + _Claim support for controlled components only_. + 2. **If an issue exists for your changes, append the issue number** in + parentheses to the end of the commit message, e.g. _Update dependencies + (#261)_. + 3. Optionally use Markdown code blocks to emphasize, e.g. + _Create `ScrollView` component (#53)_. 5. **Write clear, helpful and descriptive PR names.** - 1. **All rules for commit messages apply** also for PR names. - 2. **Always check that PR name meets the requirements** above because **PR - names are used in changelog**. GitHub automatically truncates long PR - names and picks up branch name for multi-commit PRs, so it's necessary to - make sure the PR name is what we want to have in the changelog. - 3. **If an issue exists for your changes, append this text to PR - description** (the topmost comment in the PR) in order for the issue to be - closed automatically once the PR is merged: `Closes #`. You - will know the issue is linked correctly when it appears in the _Linked - issues_ section of the PR. (Having the issue mentioned in commit message - and/or PR name does _not_ have this effect.) - 4. **If there is no issue for your changes, please add your PR to `The - Board`** GitHub project in the _Projects_ section of the PR. The correct - board column will be selected automatically. This helps us keep track of - what is in development. + 1. **All rules for commit messages apply** also for PR names. + 2. **Always check that PR name meets the requirements** above because **PR + names are used in changelog**. GitHub automatically truncates long PR + names and picks up branch name for multi-commit PRs, so it's necessary to + make sure the PR name is what we want to have in the changelog. + 3. **If an issue exists for your changes, append this text to PR + description** (the topmost comment in the PR) in order for the issue + to be + closed automatically once the PR is merged: `Closes #`. You + will know the issue is linked correctly when it appears in the _Linked + issues_ section of the PR. (Having the issue mentioned in commit message + and/or PR name does _not_ have this effect.) + 4. **If there is no issue for your changes, please add your PR to `The + Board`** GitHub project in the _Projects_ section of the PR. The correct + board column will be selected automatically. This helps us keep track of + what is in development. Pull requests are labelled automatically. You can add more labels to better qualify the nature of the change β€” in such case, it will be included in all @@ -82,9 +142,8 @@ application with `npm link` so you can see it in action. 1. In React UI repository, run `npm link` 2. In your application, run `npm link @react-ui-org/react-ui` -To prevent -[Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) -when React UI is linked, add the following code to your app's Webpack config: +To prevent [Invalid Hook Call Warning][react-invalid-hook] when React UI is +linked, add the following code to your app's Webpack config: ```js const path = require('path'); @@ -108,30 +167,13 @@ To keep React UI consistent and predictable the following guidelines should be o ## Documenting -We use [Docz](https://docz.site) (powered by [Gatsby](https://www.gatsbyjs.com)) -as the documentation platform. The documentation itself is written in -[MDX](https://mdxjs.com) format β€” a human-readable blend of the popular Markdown -and JSX syntax. - -Run `npm start` to run the docs in development mode, and open -`http://localhost:3000` in your browser to see the docs in live-reload mode. - -A few things to note: - -- In order to get component props parsed and rendered by Docz, it's crucial to - **import the component into an MDX file right from its source file** β€” parsing - a re-exported component (typically via `index.js`) isn't currently supported. - -- If you don't want Gatsby to collect **anonymous statistics**, you may want to - disable [Gatsby telemetry](https://www.gatsbyjs.com/docs/telemetry/) by - running `npx gatsby telemetry --disable`. +We use combination of [Material for MkDocs][mkdocs-material] and [Docoff] as +the documentation platform. -- If you see the Not found page after having **changed the configuration of Docz - or Gatsby in the live-reload mode,** you may either restart the Docz - development server (`ctrl + c` and `npm start`), or try to edit an MDX file - which makes the Docz rebuild, too. +Do see their respective documentation for details. -- To **make your authoring experience better,** we recommend to make sure your - IDE understands the MDX syntax and is able to help you wrap lines in MD and - MDX files automatically (Jetbrains IDE's and VSCode support both features - out-of-the-box or through a plugin). +[Docker]: https://www.docker.com +[Docker Compose]: https://docs.docker.com/compose/ +[react-invalid-hook]: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react +[mkdocs-material]: https://squidfunk.github.io/mkdocs-material/ +[Docoff]: https://github.com/react-ui-org/docoff diff --git a/README.md b/README.md index 8bfd64e2d..c5b242bc6 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ React UI is a themeable, performant, responsive UI library for React apps. Use it simply with no configuration or have full control over your design by tweaking some of the hundreds theming options available. -**[Explore React UI docs β†’](https://react-ui.io)** +**[Explore React UI docs β†’][rui-docs]** ## Key Concepts @@ -38,7 +38,7 @@ these requirements:

> Development of React UI is largely supported by -> [RACOM](https://www.racom.eu)β€”one of the leading global players in wireless +> [RACOM]β€”one of the leading global players in wireless > Critical Infrastructure. ## Quick Start Guide @@ -81,8 +81,7 @@ To install React UI in your app: