From 3ffbdd8d17d48c7e0271f7d99d70fdb4553cd048 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tarik=20G=C3=BCrsoy?= Date: Wed, 24 Jan 2024 10:38:17 +0100 Subject: [PATCH] Move frontendcomponents into ui-core MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The new architecture has been implemented. Co-authored-by: Eduard Heimbuch Committed-by: Eduard Heimbuch Pushed-by: Tarik Gürsoy Committed-by: Tarik Gürsoy Pushed-by: Eduard Heimbuch Co-authored-by: Tarik Gürsoy Reviewed-by: Konstantin Schaper --- scm-ui/ui-buttons/.storybook/.babelrc | 4 - .../.storybook/RemoveThemesPlugin.js | 57 -- .../ui-buttons/.storybook/preview-head.html | 26 - scm-ui/ui-buttons/README.md | 3 - .../main.js => ui-buttons/index.ts} | 8 +- scm-ui/ui-buttons/package.json | 71 +- .../src/BackendErrorNotification.tsx | 4 + .../ui-components/src/ErrorNotification.tsx | 3 + scm-ui/ui-components/src/Image.tsx | 3 + scm-ui/ui-components/src/Loading.tsx | 4 + scm-ui/ui-components/src/Notification.tsx | 4 + .../src/__snapshots__/storyshots.test.ts.snap | 18 +- scm-ui/ui-components/src/devBuild.ts | 4 + scm-ui/ui-components/src/layout/Level.tsx | 4 + .../ui-components/src/layout/SubSubtitle.tsx | 4 + scm-ui/ui-components/src/layout/Subtitle.tsx | 4 + scm-ui/ui-components/src/layout/Title.tsx | 4 + scm-ui/ui-components/src/useGeneratedId.tsx | 9 +- scm-ui/ui-core/.storybook/.babelrc | 3 + .../.storybook/RemoveThemesPlugin.js | 4 +- .../.storybook/main.js | 1 + .../.storybook/preview-head.html | 1 - .../.storybook/preview.js | 0 .../.storybook/withApiProvider.js | 1 + .../docs/introduction.stories.mdx | 0 .../docs/usage.stories.mdx | 0 scm-ui/ui-core/package.json | 81 +++ .../src/base/buttons}/Button.stories.tsx | 0 .../src/base/buttons}/Button.test.stories.mdx | 0 .../src/base/buttons}/Button.tsx | 2 +- .../src => ui-core/src/base/buttons}/Icon.tsx | 0 .../src/base/buttons}/a11y.test.ts | 0 .../buttons/docs/introduction.stories.mdx | 64 ++ .../src/base/buttons/docs/usage.stories.mdx | 22 + .../src/base/buttons}/image-snapshot.test.ts | 0 .../src => ui-core/src/base/buttons}/index.ts | 0 .../src/base/forms}/AddListEntryForm.tsx | 2 +- .../src/base/forms}/ConfigurationForm.tsx | 2 +- .../src/base/forms}/Form.stories.tsx | 0 .../src => ui-core/src/base/forms}/Form.tsx | 5 +- .../src/base/forms}/FormPathContext.tsx | 0 .../src/base/forms}/FormRow.tsx | 0 .../src/base/forms}/ScmFormContext.tsx | 0 .../src/base/forms}/ScmFormListContext.tsx | 0 .../src/base/forms}/base/Control.tsx | 0 .../src/base/forms}/base/Field.tsx | 0 .../base/field-message/FieldMessage.tsx | 0 .../src/base/forms}/base/help/Help.tsx | 2 +- .../src/base/forms}/base/label/Label.tsx | 0 .../base/forms}/checkbox/Checkbox.stories.mdx | 0 .../src/base/forms}/checkbox/Checkbox.tsx | 2 +- .../base/forms}/checkbox/CheckboxField.tsx | 0 .../ControlledCheckboxField.stories.mdx | 0 .../checkbox/ControlledCheckboxField.tsx | 0 .../chip-input/ChipInputField.stories.tsx | 0 .../base/forms}/chip-input/ChipInputField.tsx | 10 +- .../chip-input/ControlledChipInputField.tsx | 0 .../base/forms}/combobox/Combobox.stories.tsx | 0 .../src/base/forms}/combobox/Combobox.tsx | 2 +- .../base/forms}/combobox/ComboboxField.tsx | 4 +- .../combobox/ControlledComboboxField.tsx | 0 .../forms}/headless-chip-input/ChipInput.tsx | 2 +- .../src => ui-core/src/base/forms}/helpers.ts | 0 .../src => ui-core/src/base/forms}/index.ts | 0 .../input/ControlledInputField.stories.mdx | 0 .../forms}/input/ControlledInputField.tsx | 0 ...trolledSecretConfirmationField.stories.mdx | 0 .../ControlledSecretConfirmationField.tsx | 0 .../src/base/forms}/input/Input.stories.mdx | 0 .../src/base/forms}/input/Input.tsx | 2 +- .../base/forms}/input/InputField.stories.mdx | 0 .../src/base/forms}/input/InputField.tsx | 4 +- .../base/forms}/input/Textarea.stories.mdx | 0 .../src/base/forms}/input/Textarea.tsx | 2 +- .../src/base/forms}/list/ControlledList.tsx | 2 +- .../ControlledRadioGroupField.tsx | 0 .../radio-button/RadioButton.stories.tsx | 0 .../base/forms}/radio-button/RadioButton.tsx | 4 +- .../radio-button/RadioButtonContext.tsx | 0 .../base/forms}/radio-button/RadioGroup.tsx | 0 .../forms}/radio-button/RadioGroupField.tsx | 0 .../src/base/forms}/resourceHooks.ts | 0 .../forms}/select/ControlledSelectField.tsx | 0 .../src/base/forms}/select/Select.tsx | 2 +- .../src/base/forms}/select/SelectField.tsx | 4 +- .../base/forms}/table/ControlledColumn.tsx | 0 .../src/base/forms}/table/ControlledTable.tsx | 4 +- .../src/base/forms}/variants.ts | 0 .../src/base/helpers/devbuild.ts} | 55 +- .../src/base/helpers/index.ts} | 14 +- scm-ui/ui-core/src/base/helpers/useAriaId.tsx | 31 + scm-ui/ui-core/src/base/index.ts | 34 + .../base/layout}/_helpers/with-classes.tsx | 0 .../layout}/card-list/CardList.stories.tsx | 4 +- .../src/base/layout}/card-list/CardList.tsx | 0 .../src/base/layout}/card/Card.stories.tsx | 4 +- .../src/base/layout}/card/Card.tsx | 0 .../src/base/layout}/card/CardDetail.tsx | 6 +- .../src/base/layout}/card/CardRow.tsx | 0 .../src/base/layout}/card/CardTitle.tsx | 0 .../collapsible/Collapsible.stories.tsx | 0 .../base/layout}/collapsible/Collapsible.tsx | 6 +- .../src => ui-core/src/base/layout}/index.ts | 0 .../src/base/layout}/tabs/TabTrigger.tsx | 0 .../src/base/layout}/tabs/Tabs.stories.tsx | 0 .../src/base/layout}/tabs/Tabs.tsx | 0 .../src/base/layout}/tabs/TabsContent.tsx | 0 .../src/base/layout}/tabs/TabsList.tsx | 0 .../templates/data-page/DataPage.stories.tsx | 7 +- .../templates/data-page/DataPageHeader.tsx | 6 +- scm-ui/ui-core/src/base/misc/Image.tsx | 32 + scm-ui/ui-core/src/base/misc/Level.tsx | 40 ++ scm-ui/ui-core/src/base/misc/Loading.tsx | 64 ++ scm-ui/ui-core/src/base/misc/SubSubtitle.tsx | 36 + scm-ui/ui-core/src/base/misc/Subtitle.tsx | 37 + .../src/base/misc/Title.tsx} | 69 +- scm-ui/ui-core/src/base/misc/index.ts | 30 + .../BackendErrorNotification.tsx | 160 +++++ .../base/notifications/ErrorNotification.tsx | 73 ++ .../src/base/notifications/Notification.tsx | 48 ++ .../ui-core/src/base/notifications/index.tsx | 27 + .../base/overlays}/dialog/Dialog.stories.tsx | 2 +- .../src/base/overlays}/dialog/Dialog.tsx | 4 +- .../src/base/overlays}/index.ts | 0 .../src/base/overlays}/menu/Menu.stories.tsx | 2 +- .../src/base/overlays}/menu/Menu.tsx | 0 .../src/base/overlays}/menu/MenuTrigger.tsx | 2 +- .../overlays}/popover/Popover.stories.tsx | 0 .../src/base/overlays}/popover/Popover.tsx | 0 .../overlays}/tooltip/Tooltip.examples.js | 0 .../overlays}/tooltip/Tooltip.stories.mdx | 0 .../src/base/overlays}/tooltip/Tooltip.tsx | 0 .../src/base/shortcuts}/index.ts | 0 .../shortcuts}/iterator/callbackIterator.ts | 0 .../iterator/keyboardIterator.test.tsx | 0 .../shortcuts}/iterator/keyboardIterator.tsx | 0 .../src/base/shortcuts}/usePauseShortcuts.ts | 0 .../src/base/shortcuts}/useShortcut.ts | 0 .../src/base/shortcuts}/useShortcutDocs.tsx | 0 .../base/text}/SplitAndReplace.stories.tsx | 0 .../src/base/text}/SplitAndReplace.tsx | 0 .../src => ui-core/src/base/text}/index.ts | 0 .../base/text}/textSplitAndReplace.test.ts | 0 .../src/base/text}/textSplitAndReplace.ts | 0 scm-ui/ui-core/src/index.ts | 25 + scm-ui/{ui-buttons => ui-core}/tsconfig.json | 1 - scm-ui/ui-extensions/src/ExtensionPoint.tsx | 5 +- scm-ui/ui-extensions/src/binder.ts | 12 +- scm-ui/ui-forms/.storybook/main.js | 92 --- scm-ui/ui-forms/.storybook/preview-head.html | 26 - scm-ui/ui-forms/.storybook/preview.js | 72 -- scm-ui/ui-forms/index.ts | 43 ++ scm-ui/ui-forms/package.json | 45 +- scm-ui/ui-layout/.storybook/.babelrc | 4 - .../.storybook/RemoveThemesPlugin.js | 57 -- scm-ui/ui-layout/.storybook/main.js | 89 --- scm-ui/ui-layout/.storybook/preview-head.html | 26 - scm-ui/ui-layout/index.ts | 25 + scm-ui/ui-layout/package.json | 41 +- scm-ui/ui-overlays/.storybook/.babelrc | 4 - .../.storybook/RemoveThemesPlugin.js | 57 -- scm-ui/ui-overlays/.storybook/main.js | 89 --- scm-ui/ui-overlays/index.ts | 25 + scm-ui/ui-overlays/package.json | 42 +- scm-ui/ui-shortcuts/index.ts | 33 + scm-ui/ui-shortcuts/package.json | 44 +- scm-ui/ui-text/.storybook/.babelrc | 4 - scm-ui/ui-text/index.ts | 25 + scm-ui/ui-text/package.json | 43 +- scm-ui/ui-webapp/package.json | 3 +- .../src/_modules/provided-modules.ts | 2 + .../components/form/InvalidateCaches.tsx | 2 +- .../components/form/InvalidateSearchIndex.tsx | 2 +- .../plugins/components/PluginActionModal.tsx | 2 +- .../plugins/components/ShowPendingModal.tsx | 2 +- .../ui-webapp/src/containers/OmniSearch.tsx | 2 +- scm-ui/ui-webapp/src/index.tsx | 2 +- .../branches/components/AheadBehindTag.tsx | 2 +- .../branches/components/BranchListItem.tsx | 2 +- .../src/repos/compare/CompareSelector.tsx | 2 +- .../src/repos/compare/RevisionTab.tsx | 2 +- .../overflowMenu/ContentActionMenu.tsx | 2 +- .../src/repos/tags/components/TagRow.tsx | 2 +- yarn.lock | 672 +++++------------- 184 files changed, 1356 insertions(+), 1535 deletions(-) delete mode 100644 scm-ui/ui-buttons/.storybook/.babelrc delete mode 100644 scm-ui/ui-buttons/.storybook/RemoveThemesPlugin.js delete mode 100644 scm-ui/ui-buttons/.storybook/preview-head.html delete mode 100644 scm-ui/ui-buttons/README.md rename scm-ui/{ui-text/.storybook/main.js => ui-buttons/index.ts} (89%) create mode 100644 scm-ui/ui-core/.storybook/.babelrc rename scm-ui/{ui-forms => ui-core}/.storybook/RemoveThemesPlugin.js (95%) rename scm-ui/{ui-buttons => ui-core}/.storybook/main.js (99%) rename scm-ui/{ui-overlays => ui-core}/.storybook/preview-head.html (99%) rename scm-ui/{ui-buttons => ui-core}/.storybook/preview.js (100%) rename scm-ui/{ui-buttons => ui-core}/.storybook/withApiProvider.js (99%) rename scm-ui/{ui-buttons => ui-core}/docs/introduction.stories.mdx (100%) rename scm-ui/{ui-buttons => ui-core}/docs/usage.stories.mdx (100%) create mode 100644 scm-ui/ui-core/package.json rename scm-ui/{ui-buttons/src => ui-core/src/base/buttons}/Button.stories.tsx (100%) rename scm-ui/{ui-buttons/src => ui-core/src/base/buttons}/Button.test.stories.mdx (100%) rename scm-ui/{ui-buttons/src => ui-core/src/base/buttons}/Button.tsx (98%) rename scm-ui/{ui-buttons/src => ui-core/src/base/buttons}/Icon.tsx (100%) rename scm-ui/{ui-buttons/src => ui-core/src/base/buttons}/a11y.test.ts (100%) create mode 100644 scm-ui/ui-core/src/base/buttons/docs/introduction.stories.mdx create mode 100644 scm-ui/ui-core/src/base/buttons/docs/usage.stories.mdx rename scm-ui/{ui-buttons/src => ui-core/src/base/buttons}/image-snapshot.test.ts (100%) rename scm-ui/{ui-buttons/src => ui-core/src/base/buttons}/index.ts (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/AddListEntryForm.tsx (98%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/ConfigurationForm.tsx (97%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/Form.stories.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/Form.tsx (98%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/FormPathContext.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/FormRow.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/ScmFormContext.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/ScmFormListContext.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/base/Control.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/base/Field.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/base/field-message/FieldMessage.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/base/help/Help.tsx (96%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/base/label/Label.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/checkbox/Checkbox.stories.mdx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/checkbox/Checkbox.tsx (97%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/checkbox/CheckboxField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/checkbox/ControlledCheckboxField.stories.mdx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/checkbox/ControlledCheckboxField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/chip-input/ChipInputField.stories.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/chip-input/ChipInputField.tsx (95%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/chip-input/ControlledChipInputField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/combobox/Combobox.stories.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/combobox/Combobox.tsx (98%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/combobox/ComboboxField.tsx (95%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/combobox/ControlledComboboxField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/headless-chip-input/ChipInput.tsx (99%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/helpers.ts (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/index.ts (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/ControlledInputField.stories.mdx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/ControlledInputField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/ControlledSecretConfirmationField.stories.mdx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/ControlledSecretConfirmationField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/Input.stories.mdx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/Input.tsx (95%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/InputField.stories.mdx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/InputField.tsx (95%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/Textarea.stories.mdx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/input/Textarea.tsx (96%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/list/ControlledList.tsx (98%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/radio-button/ControlledRadioGroupField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/radio-button/RadioButton.stories.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/radio-button/RadioButton.tsx (96%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/radio-button/RadioButtonContext.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/radio-button/RadioGroup.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/radio-button/RadioGroupField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/resourceHooks.ts (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/select/ControlledSelectField.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/select/Select.tsx (96%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/select/SelectField.tsx (95%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/table/ControlledColumn.tsx (100%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/table/ControlledTable.tsx (97%) rename scm-ui/{ui-forms/src => ui-core/src/base/forms}/variants.ts (100%) rename scm-ui/{ui-overlays/.storybook/preview.js => ui-core/src/base/helpers/devbuild.ts} (53%) rename scm-ui/{ui-text/.storybook/preview.js => ui-core/src/base/helpers/index.ts} (78%) create mode 100644 scm-ui/ui-core/src/base/helpers/useAriaId.tsx create mode 100644 scm-ui/ui-core/src/base/index.ts rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/_helpers/with-classes.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/card-list/CardList.stories.tsx (98%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/card-list/CardList.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/card/Card.stories.tsx (97%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/card/Card.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/card/CardDetail.tsx (97%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/card/CardRow.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/card/CardTitle.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/collapsible/Collapsible.stories.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/collapsible/Collapsible.tsx (95%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/index.ts (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/tabs/TabTrigger.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/tabs/Tabs.stories.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/tabs/Tabs.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/tabs/TabsContent.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/tabs/TabsList.tsx (100%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/templates/data-page/DataPage.stories.tsx (97%) rename scm-ui/{ui-layout/src => ui-core/src/base/layout}/templates/data-page/DataPageHeader.tsx (94%) create mode 100644 scm-ui/ui-core/src/base/misc/Image.tsx create mode 100644 scm-ui/ui-core/src/base/misc/Level.tsx create mode 100644 scm-ui/ui-core/src/base/misc/Loading.tsx create mode 100644 scm-ui/ui-core/src/base/misc/SubSubtitle.tsx create mode 100644 scm-ui/ui-core/src/base/misc/Subtitle.tsx rename scm-ui/{ui-layout/.storybook/preview.js => ui-core/src/base/misc/Title.tsx} (53%) create mode 100644 scm-ui/ui-core/src/base/misc/index.ts create mode 100644 scm-ui/ui-core/src/base/notifications/BackendErrorNotification.tsx create mode 100644 scm-ui/ui-core/src/base/notifications/ErrorNotification.tsx create mode 100644 scm-ui/ui-core/src/base/notifications/Notification.tsx create mode 100644 scm-ui/ui-core/src/base/notifications/index.tsx rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/dialog/Dialog.stories.tsx (97%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/dialog/Dialog.tsx (97%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/index.ts (100%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/menu/Menu.stories.tsx (98%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/menu/Menu.tsx (100%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/menu/MenuTrigger.tsx (97%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/popover/Popover.stories.tsx (100%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/popover/Popover.tsx (100%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/tooltip/Tooltip.examples.js (100%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/tooltip/Tooltip.stories.mdx (100%) rename scm-ui/{ui-overlays/src => ui-core/src/base/overlays}/tooltip/Tooltip.tsx (100%) rename scm-ui/{ui-shortcuts/src => ui-core/src/base/shortcuts}/index.ts (100%) rename scm-ui/{ui-shortcuts/src => ui-core/src/base/shortcuts}/iterator/callbackIterator.ts (100%) rename scm-ui/{ui-shortcuts/src => ui-core/src/base/shortcuts}/iterator/keyboardIterator.test.tsx (100%) rename scm-ui/{ui-shortcuts/src => ui-core/src/base/shortcuts}/iterator/keyboardIterator.tsx (100%) rename scm-ui/{ui-shortcuts/src => ui-core/src/base/shortcuts}/usePauseShortcuts.ts (100%) rename scm-ui/{ui-shortcuts/src => ui-core/src/base/shortcuts}/useShortcut.ts (100%) rename scm-ui/{ui-shortcuts/src => ui-core/src/base/shortcuts}/useShortcutDocs.tsx (100%) rename scm-ui/{ui-text/src => ui-core/src/base/text}/SplitAndReplace.stories.tsx (100%) rename scm-ui/{ui-text/src => ui-core/src/base/text}/SplitAndReplace.tsx (100%) rename scm-ui/{ui-text/src => ui-core/src/base/text}/index.ts (100%) rename scm-ui/{ui-text/src => ui-core/src/base/text}/textSplitAndReplace.test.ts (100%) rename scm-ui/{ui-text/src => ui-core/src/base/text}/textSplitAndReplace.ts (100%) create mode 100644 scm-ui/ui-core/src/index.ts rename scm-ui/{ui-buttons => ui-core}/tsconfig.json (85%) delete mode 100644 scm-ui/ui-forms/.storybook/main.js delete mode 100644 scm-ui/ui-forms/.storybook/preview-head.html delete mode 100644 scm-ui/ui-forms/.storybook/preview.js create mode 100644 scm-ui/ui-forms/index.ts delete mode 100644 scm-ui/ui-layout/.storybook/.babelrc delete mode 100644 scm-ui/ui-layout/.storybook/RemoveThemesPlugin.js delete mode 100644 scm-ui/ui-layout/.storybook/main.js delete mode 100644 scm-ui/ui-layout/.storybook/preview-head.html create mode 100644 scm-ui/ui-layout/index.ts delete mode 100644 scm-ui/ui-overlays/.storybook/.babelrc delete mode 100644 scm-ui/ui-overlays/.storybook/RemoveThemesPlugin.js delete mode 100644 scm-ui/ui-overlays/.storybook/main.js create mode 100644 scm-ui/ui-overlays/index.ts create mode 100644 scm-ui/ui-shortcuts/index.ts delete mode 100644 scm-ui/ui-text/.storybook/.babelrc create mode 100644 scm-ui/ui-text/index.ts diff --git a/scm-ui/ui-buttons/.storybook/.babelrc b/scm-ui/ui-buttons/.storybook/.babelrc deleted file mode 100644 index 2fa1f1e174..0000000000 --- a/scm-ui/ui-buttons/.storybook/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["@scm-manager/babel-preset"], - "plugins": ["@babel/plugin-syntax-dynamic-import"] -} diff --git a/scm-ui/ui-buttons/.storybook/RemoveThemesPlugin.js b/scm-ui/ui-buttons/.storybook/RemoveThemesPlugin.js deleted file mode 100644 index 9976554354..0000000000 --- a/scm-ui/ui-buttons/.storybook/RemoveThemesPlugin.js +++ /dev/null @@ -1,57 +0,0 @@ -/* - * MIT License - * - * Copyright (c) 2020-present Cloudogu GmbH and Contributors - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -const HtmlWebpackPlugin = require('html-webpack-plugin'); - -class RemoveThemesPlugin { - apply (compiler) { - compiler.hooks.compilation.tap('RemoveThemesPlugin', (compilation) => { - - HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync( - 'RemoveThemesPlugin', - (data, cb) => { - - // remove generated style-loader bundles from the page - // there should be a better way, which does not generate the bundles at all - // but for now it works - if (data.assets.js) { - data.assets.js = data.assets.js.filter(bundle => !bundle.startsWith("ui-theme-")) - .filter(bundle => !bundle.startsWith("runtime~ui-theme-")) - } - - // remove css links to avoid conflicts with the themes - // so we remove all and add our own via preview-head.html - if (data.assets.css) { - data.assets.css = data.assets.css.filter(css => !css.startsWith("ui-theme-")) - } - - // Tell webpack to move on - cb(null, data) - } - ) - }) - } -} - -module.exports = RemoveThemesPlugin diff --git a/scm-ui/ui-buttons/.storybook/preview-head.html b/scm-ui/ui-buttons/.storybook/preview-head.html deleted file mode 100644 index d1c34ac7ef..0000000000 --- a/scm-ui/ui-buttons/.storybook/preview-head.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - diff --git a/scm-ui/ui-buttons/README.md b/scm-ui/ui-buttons/README.md deleted file mode 100644 index 8be9d65a53..0000000000 --- a/scm-ui/ui-buttons/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## Bulma - -See Bulma element: https://bulma.io/documentation/elements/button diff --git a/scm-ui/ui-text/.storybook/main.js b/scm-ui/ui-buttons/index.ts similarity index 89% rename from scm-ui/ui-text/.storybook/main.js rename to scm-ui/ui-buttons/index.ts index 87d3241ed0..e727f1b8ff 100644 --- a/scm-ui/ui-text/.storybook/main.js +++ b/scm-ui/ui-buttons/index.ts @@ -22,10 +22,4 @@ * SOFTWARE. */ -module.exports = { - stories: ["../src/**/*.stories.@(ts|tsx)"], - framework: "@storybook/react", - core: { - builder: "webpack5", - }, -}; +export { Icon, Button, LinkButton, ExternalLinkButton, ExternalLink, ButtonVariants } from "@scm-manager/ui-core"; diff --git a/scm-ui/ui-buttons/package.json b/scm-ui/ui-buttons/package.json index 864b5407e9..952741d82e 100644 --- a/scm-ui/ui-buttons/package.json +++ b/scm-ui/ui-buttons/package.json @@ -2,77 +2,14 @@ "name": "@scm-manager/ui-buttons", "version": "3.0.0-SNAPSHOT", "private": false, - "main": "build/index.js", - "module": "build/index.mjs", - "types": "build/index.d.ts", - "files": [ - "build" - ], - "scripts": { - "build": "tsup ./src/index.ts -d build --format esm,cjs --dts", - "dev": "tsup ./src/index.ts -d build --format esm,cjs --dts --watch", - "lint": "eslint src", - "typecheck": "tsc", - "storybook": "start-storybook -p 6006 -s ../ui-webapp/public", - "build-storybook": "build-storybook", - "image-snapshots": "jest \"image-snapshot.test.ts\"", - "a11y-check": "jest \"a11y.test.ts\"", - "depcheck": "depcheck" - }, + "main": "index.ts", "peerDependencies": { - "react": "^17.0.1", - "react-dom": "^17.0.1", - "react-router-dom": "^5.3.1", - "classnames": "^2.2.6", - "@scm-manager/ui-components": "3.0.0-SNAPSHOT" + "@scm-manager/ui-core": "3.0.0-SNAPSHOT" }, "devDependencies": { "@scm-manager/prettier-config": "^2.11.1", - "@scm-manager/ui-api": "3.0.0-SNAPSHOT", "@scm-manager/eslint-config": "^2.17.0", - "@babel/core": "^7.17.8", - "@scm-manager/tsconfig": "^2.12.0", - "@storybook/addon-essentials": "^6.4.20", - "@storybook/addon-interactions": "^6.4.20", - "@storybook/addon-a11y": "^6.4.20", - "@storybook/addon-links": "^6.4.20", - "@storybook/builder-webpack5": "^6.4.20", - "@storybook/manager-webpack5": "^6.4.20", - "@storybook/react": "^6.4.20", - "@storybook/addon-storyshots-puppeteer": "^6.4.20", - "@storybook/addon-storyshots": "^6.4.20", - "@storybook/testing-library": "^0.0.9", - "jest-transform-css": "^4.0.1", - "puppeteer": "^15.5.0", - "storybook-addon-pseudo-states": "^1.15.1", - "storybook-react-router": "^1.0.8", - "@types/storybook-react-router": "^1.0.2", - "sass-loader": "^12.3.0", - "storybook-addon-themes": "^6.1.0", - "babel-loader": "^8.2.4", - "postcss": "^8.4.12", - "postcss-loader": "^6.2.1", - "webpack": "5", - "tsup": "^6.1.2", - "mini-css-extract-plugin": "^1.6.2", - "html-webpack-plugin": "^5.5.0", - "react-query": "^3.25.1", - "i18next": "^19.9.2", - "react-i18next": "11", - "i18next-fetch-backend": "^2.3.1", - "depcheck": "^1.4.3" - }, - "babel": { - "presets": [ - "@scm-manager/babel-preset" - ] - }, - "jest": { - "transform": { - "^.+\\.[tj]sx?$": "babel-jest", - "^.+\\.(css|less|scss)$": "jest-transform-css", - "^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx" - } + "@scm-manager/tsconfig": "^2.13.0" }, "prettier": "@scm-manager/prettier-config", "eslintConfig": { @@ -81,4 +18,4 @@ "publishConfig": { "access": "public" } -} \ No newline at end of file +} diff --git a/scm-ui/ui-components/src/BackendErrorNotification.tsx b/scm-ui/ui-components/src/BackendErrorNotification.tsx index 45e1a4797a..3b2952091d 100644 --- a/scm-ui/ui-components/src/BackendErrorNotification.tsx +++ b/scm-ui/ui-components/src/BackendErrorNotification.tsx @@ -30,6 +30,10 @@ type Props = Omit, "type" | "role"> & { error: BackendError; }; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ + const BackendErrorNotification: FC = ({ error, ...props }) => { const [t] = useTranslation("plugins"); diff --git a/scm-ui/ui-components/src/ErrorNotification.tsx b/scm-ui/ui-components/src/ErrorNotification.tsx index 6d18b34019..b01536f10b 100644 --- a/scm-ui/ui-components/src/ErrorNotification.tsx +++ b/scm-ui/ui-components/src/ErrorNotification.tsx @@ -50,6 +50,9 @@ const BasicErrorMessage: FC, "type" | " ); }; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ const ErrorNotification: FC = ({ error, ...props }) => { const [t] = useTranslation("commons"); if (error) { diff --git a/scm-ui/ui-components/src/Image.tsx b/scm-ui/ui-components/src/Image.tsx index 2e55624fc7..af1e0067ac 100644 --- a/scm-ui/ui-components/src/Image.tsx +++ b/scm-ui/ui-components/src/Image.tsx @@ -31,6 +31,9 @@ type Props = { className?: string; }; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ class Image extends React.Component { createImageSrc = () => { const { src } = this.props; diff --git a/scm-ui/ui-components/src/Loading.tsx b/scm-ui/ui-components/src/Loading.tsx index ec86c36f51..1d24005300 100644 --- a/scm-ui/ui-components/src/Loading.tsx +++ b/scm-ui/ui-components/src/Loading.tsx @@ -40,6 +40,10 @@ const FixedSizedImage = styled(Image)` height: 128px; `; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ + class Loading extends React.Component { render() { const { message, t } = this.props; diff --git a/scm-ui/ui-components/src/Notification.tsx b/scm-ui/ui-components/src/Notification.tsx index 9a97770ea8..b03dfb35c3 100644 --- a/scm-ui/ui-components/src/Notification.tsx +++ b/scm-ui/ui-components/src/Notification.tsx @@ -34,6 +34,10 @@ type Props = { role?: string; }; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ + const Notification: FC = ({ type = "info", onClose, className, children, role }) => { const renderCloseButton = () => { if (onClose) { diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 661171f18a..fbaef7432c 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -71110,7 +71110,7 @@ exports[`Storyshots Repositories/RepositoryEntry Archived 1`] = `
(window.scmStage || "").toUpperCase() !== "PRODUCTION"; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ + export const createAttributesForTesting = (testId?: string) => { if (!testId) { return undefined; diff --git a/scm-ui/ui-components/src/layout/Level.tsx b/scm-ui/ui-components/src/layout/Level.tsx index 9076114c1b..d9280bd650 100644 --- a/scm-ui/ui-components/src/layout/Level.tsx +++ b/scm-ui/ui-components/src/layout/Level.tsx @@ -31,6 +31,10 @@ type Props = { right?: ReactNode; }; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ + export default class Level extends React.Component { render() { const { className, left, children, right } = this.props; diff --git a/scm-ui/ui-components/src/layout/SubSubtitle.tsx b/scm-ui/ui-components/src/layout/SubSubtitle.tsx index ece0352106..48f5e09cf6 100644 --- a/scm-ui/ui-components/src/layout/SubSubtitle.tsx +++ b/scm-ui/ui-components/src/layout/SubSubtitle.tsx @@ -28,6 +28,10 @@ type Props = { className?: string; }; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ + class SubSubtitle extends React.Component { render() { const { className, children } = this.props; diff --git a/scm-ui/ui-components/src/layout/Subtitle.tsx b/scm-ui/ui-components/src/layout/Subtitle.tsx index cf6602dc52..3169cb06a0 100644 --- a/scm-ui/ui-components/src/layout/Subtitle.tsx +++ b/scm-ui/ui-components/src/layout/Subtitle.tsx @@ -29,6 +29,10 @@ type Props = { className?: string; }; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ + const Subtitle: FC = ({ subtitle, className, children }) => { if (subtitle) { return

{subtitle}

; diff --git a/scm-ui/ui-components/src/layout/Title.tsx b/scm-ui/ui-components/src/layout/Title.tsx index adf42d775c..1502f89715 100644 --- a/scm-ui/ui-components/src/layout/Title.tsx +++ b/scm-ui/ui-components/src/layout/Title.tsx @@ -31,6 +31,10 @@ type Props = { className?: string; }; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ + const Title: FC = ({ title, preventRefreshingPageTitle, customPageTitle, className, children }) => { useEffect(() => { if (!preventRefreshingPageTitle) { diff --git a/scm-ui/ui-components/src/useGeneratedId.tsx b/scm-ui/ui-components/src/useGeneratedId.tsx index 1ae7473e1b..cccd211d25 100644 --- a/scm-ui/ui-components/src/useGeneratedId.tsx +++ b/scm-ui/ui-components/src/useGeneratedId.tsx @@ -22,10 +22,11 @@ * SOFTWARE. */ -import { useMemo } from "react"; - -let counter = 0; +import { useAriaId } from "@scm-manager/ui-core"; +/** + * @deprecated Please import the identical module from "@scm-manager/ui-core" + */ export default function useGeneratedId(fallback?: string) { - return useMemo(() => fallback ?? `scm-id-${++counter}`, [fallback]); + return useAriaId(fallback); } diff --git a/scm-ui/ui-core/.storybook/.babelrc b/scm-ui/ui-core/.storybook/.babelrc new file mode 100644 index 0000000000..a138b1182a --- /dev/null +++ b/scm-ui/ui-core/.storybook/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@scm-manager/babel-preset"] +} diff --git a/scm-ui/ui-forms/.storybook/RemoveThemesPlugin.js b/scm-ui/ui-core/.storybook/RemoveThemesPlugin.js similarity index 95% rename from scm-ui/ui-forms/.storybook/RemoveThemesPlugin.js rename to scm-ui/ui-core/.storybook/RemoveThemesPlugin.js index 9976554354..13e07247d0 100644 --- a/scm-ui/ui-forms/.storybook/RemoveThemesPlugin.js +++ b/scm-ui/ui-core/.storybook/RemoveThemesPlugin.js @@ -31,13 +31,13 @@ class RemoveThemesPlugin { HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync( 'RemoveThemesPlugin', (data, cb) => { - + // remove generated style-loader bundles from the page // there should be a better way, which does not generate the bundles at all // but for now it works if (data.assets.js) { data.assets.js = data.assets.js.filter(bundle => !bundle.startsWith("ui-theme-")) - .filter(bundle => !bundle.startsWith("runtime~ui-theme-")) + .filter(bundle => !bundle.startsWith("runtime~ui-theme-")) } // remove css links to avoid conflicts with the themes diff --git a/scm-ui/ui-buttons/.storybook/main.js b/scm-ui/ui-core/.storybook/main.js similarity index 99% rename from scm-ui/ui-buttons/.storybook/main.js rename to scm-ui/ui-core/.storybook/main.js index f5e456bcaa..68c4366cb1 100644 --- a/scm-ui/ui-buttons/.storybook/main.js +++ b/scm-ui/ui-core/.storybook/main.js @@ -30,6 +30,7 @@ const ReactDOM = require("react-dom"); const root = path.resolve(".."); + const themedir = path.join(root, "ui-styles", "src"); ReactDOM.createPortal = (node) => node; diff --git a/scm-ui/ui-overlays/.storybook/preview-head.html b/scm-ui/ui-core/.storybook/preview-head.html similarity index 99% rename from scm-ui/ui-overlays/.storybook/preview-head.html rename to scm-ui/ui-core/.storybook/preview-head.html index d1c34ac7ef..107692c5ee 100644 --- a/scm-ui/ui-overlays/.storybook/preview-head.html +++ b/scm-ui/ui-core/.storybook/preview-head.html @@ -23,4 +23,3 @@ --> - diff --git a/scm-ui/ui-buttons/.storybook/preview.js b/scm-ui/ui-core/.storybook/preview.js similarity index 100% rename from scm-ui/ui-buttons/.storybook/preview.js rename to scm-ui/ui-core/.storybook/preview.js diff --git a/scm-ui/ui-buttons/.storybook/withApiProvider.js b/scm-ui/ui-core/.storybook/withApiProvider.js similarity index 99% rename from scm-ui/ui-buttons/.storybook/withApiProvider.js rename to scm-ui/ui-core/.storybook/withApiProvider.js index 8aa561d39c..4d799d292e 100644 --- a/scm-ui/ui-buttons/.storybook/withApiProvider.js +++ b/scm-ui/ui-core/.storybook/withApiProvider.js @@ -21,6 +21,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ + import * as React from "react"; import { ApiProvider } from "@scm-manager/ui-api"; diff --git a/scm-ui/ui-buttons/docs/introduction.stories.mdx b/scm-ui/ui-core/docs/introduction.stories.mdx similarity index 100% rename from scm-ui/ui-buttons/docs/introduction.stories.mdx rename to scm-ui/ui-core/docs/introduction.stories.mdx diff --git a/scm-ui/ui-buttons/docs/usage.stories.mdx b/scm-ui/ui-core/docs/usage.stories.mdx similarity index 100% rename from scm-ui/ui-buttons/docs/usage.stories.mdx rename to scm-ui/ui-core/docs/usage.stories.mdx diff --git a/scm-ui/ui-core/package.json b/scm-ui/ui-core/package.json new file mode 100644 index 0000000000..6aafb5ab4c --- /dev/null +++ b/scm-ui/ui-core/package.json @@ -0,0 +1,81 @@ +{ + "name": "@scm-manager/ui-core", + "version": "3.0.0-SNAPSHOT", + "main": "./src/index.ts", + "license": "MIT", + "scripts": { + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" + }, + "peerDependencies": { + "react": "^17.0.1", + "react-dom": "^17.0.1", + "react-router-dom": "^5.3.1", + "classnames": "^2.3.1", + "react-hook-form": "7", + "react-i18next": "11", + "react-query": "3", + "styled-components": "5" + }, + "dependencies": { + "@headlessui/react": "^1.7.15", + "@radix-ui/react-radio-group": "^1.1.3", + "@radix-ui/react-slot": "^1.0.1", + "@radix-ui/react-visually-hidden": "^1.0.3", + "@radix-ui/react-dialog": "1.0.4", + "@radix-ui/react-dropdown-menu": "2.0.5", + "@radix-ui/react-popover": "1.0.6", + "@radix-ui/react-tooltip": "1.0.2", + "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-collapsible": "^1.0.3", + "mousetrap": "1.6.5" + }, + "devDependencies": { + "@scm-manager/prettier-config": "^2.11.1", + "@scm-manager/eslint-config": "^2.17.0", + "@scm-manager/tsconfig": "^2.12.0", + "@scm-manager/babel-preset": "^2.13.1", + "@types/mousetrap": "1.6.5", + "@testing-library/react-hooks": "8.0.1", + "@testing-library/react": "12.1.5", + "@storybook/addon-actions": "^6.5.10", + "@storybook/addon-docs": "^6.5.14", + "@storybook/addon-essentials": "^6.5.10", + "@storybook/addon-interactions": "^6.5.10", + "@storybook/addon-links": "^6.5.10", + "@storybook/addon-a11y": "^6.5.10", + "storybook-addon-i18next": "^1.3.0", + "storybook-addon-pseudo-states": "^1.15.1", + "@storybook/builder-webpack5": "^6.5.10", + "@storybook/manager-webpack5": "^6.5.10", + "@storybook/react": "^6.5.10", + "@storybook/testing-library": "^0.0.13", + "@storybook/addon-storyshots-puppeteer": "^6.4.20", + "@storybook/addon-storyshots": "^6.4.20", + "storybook-addon-mock": "^3.2.0", + "storybook-addon-themes": "^6.1.0", + "storybook-react-router": "^1.0.8", + "mini-css-extract-plugin": "^1.6.2", + "html-webpack-plugin": "^5.5.0", + "webpack": "5", + "@babel/core": "^7.19.0", + "i18next": "^19.9.2", + "react-i18next": "11", + "i18next-fetch-backend": "^2.3.1", + "babel-loader": "^8.2.5", + "depcheck": "^1.4.3", + "jest-extended": "3.1.0" + }, + "prettier": "@scm-manager/prettier-config", + "eslintConfig": { + "extends": "@scm-manager/eslint-config" + }, + "publishConfig": { + "access": "public" + }, + "jest": { + "setupFilesAfterEnv": [ + "jest-extended/all" + ] + } +} diff --git a/scm-ui/ui-buttons/src/Button.stories.tsx b/scm-ui/ui-core/src/base/buttons/Button.stories.tsx similarity index 100% rename from scm-ui/ui-buttons/src/Button.stories.tsx rename to scm-ui/ui-core/src/base/buttons/Button.stories.tsx diff --git a/scm-ui/ui-buttons/src/Button.test.stories.mdx b/scm-ui/ui-core/src/base/buttons/Button.test.stories.mdx similarity index 100% rename from scm-ui/ui-buttons/src/Button.test.stories.mdx rename to scm-ui/ui-core/src/base/buttons/Button.test.stories.mdx diff --git a/scm-ui/ui-buttons/src/Button.tsx b/scm-ui/ui-core/src/base/buttons/Button.tsx similarity index 98% rename from scm-ui/ui-buttons/src/Button.tsx rename to scm-ui/ui-core/src/base/buttons/Button.tsx index 2ae0c17f1f..b66883f405 100644 --- a/scm-ui/ui-buttons/src/Button.tsx +++ b/scm-ui/ui-core/src/base/buttons/Button.tsx @@ -25,7 +25,7 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react"; import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from "react-router-dom"; import classNames from "classnames"; -import { createAttributesForTesting } from "@scm-manager/ui-components"; +import { createAttributesForTesting } from "../helpers"; /** * @beta diff --git a/scm-ui/ui-buttons/src/Icon.tsx b/scm-ui/ui-core/src/base/buttons/Icon.tsx similarity index 100% rename from scm-ui/ui-buttons/src/Icon.tsx rename to scm-ui/ui-core/src/base/buttons/Icon.tsx diff --git a/scm-ui/ui-buttons/src/a11y.test.ts b/scm-ui/ui-core/src/base/buttons/a11y.test.ts similarity index 100% rename from scm-ui/ui-buttons/src/a11y.test.ts rename to scm-ui/ui-core/src/base/buttons/a11y.test.ts diff --git a/scm-ui/ui-core/src/base/buttons/docs/introduction.stories.mdx b/scm-ui/ui-core/src/base/buttons/docs/introduction.stories.mdx new file mode 100644 index 0000000000..03a67c26cf --- /dev/null +++ b/scm-ui/ui-core/src/base/buttons/docs/introduction.stories.mdx @@ -0,0 +1,64 @@ +import { Meta } from "@storybook/addon-docs"; +import { Button } from "../"; + + + +# Buttons + +The `@scm-manager/ui-core` library provides [atoms](https://atomicdesign.bradfrost.com/chapter-2/#atoms) implemented +as minimal wrappers around native html elements styled to match the general SCM-Manager aesthetic. + +## Components + +There are three actionable components available. Styling is consistent amongst them and all have the required `variant` property. + +1. [Button](?path=/story/components--button) +2. [Link Button](?path=/story/components--link-button) +3. [External Link Button](?path=/story/components--external-link-button) + +## Usage + +Actionable components serve a dedicated purpose. It is therefore important to know when and how to use them. + +### Variants + +There are four variants available to each of the three button types, varying in importance. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmphasisButton VariantUsage Examples
Very HighDestructive actions
HighForm submit
NormalCancel action in dialog
LowCircumstantially relevant action on page with many actionable elements
+ +## Content + +Buttons exclusively contain text and no icons. Icons tend to be ambiguous and not always applicable which leads to inconsistent +and cluttered layouts. + +Button text should be short, concise and describe the action performed. diff --git a/scm-ui/ui-core/src/base/buttons/docs/usage.stories.mdx b/scm-ui/ui-core/src/base/buttons/docs/usage.stories.mdx new file mode 100644 index 0000000000..cf5d43c41c --- /dev/null +++ b/scm-ui/ui-core/src/base/buttons/docs/usage.stories.mdx @@ -0,0 +1,22 @@ +import { Meta, Story } from "@storybook/addon-docs"; +import { Button } from "../"; + + + +In confirmation dialogs, there are two actions.
+One to cancel the current process and one to confirm it.
+Aborting is always the secondary action, confirmation always the primary. +Focus is always on the cancelling action. + + +
+

Delete User

+

Do you really want to delete this user ?

+
+ + +
+
+ diff --git a/scm-ui/ui-buttons/src/image-snapshot.test.ts b/scm-ui/ui-core/src/base/buttons/image-snapshot.test.ts similarity index 100% rename from scm-ui/ui-buttons/src/image-snapshot.test.ts rename to scm-ui/ui-core/src/base/buttons/image-snapshot.test.ts diff --git a/scm-ui/ui-buttons/src/index.ts b/scm-ui/ui-core/src/base/buttons/index.ts similarity index 100% rename from scm-ui/ui-buttons/src/index.ts rename to scm-ui/ui-core/src/base/buttons/index.ts diff --git a/scm-ui/ui-forms/src/AddListEntryForm.tsx b/scm-ui/ui-core/src/base/forms/AddListEntryForm.tsx similarity index 98% rename from scm-ui/ui-forms/src/AddListEntryForm.tsx rename to scm-ui/ui-core/src/base/forms/AddListEntryForm.tsx index c4c130082f..3fe4b0c149 100644 --- a/scm-ui/ui-forms/src/AddListEntryForm.tsx +++ b/scm-ui/ui-core/src/base/forms/AddListEntryForm.tsx @@ -26,7 +26,7 @@ import React, { useCallback, useEffect } from "react"; import { ScmFormPathContextProvider, useScmFormPathContext } from "./FormPathContext"; import { ScmFormContextProvider, useScmFormContext } from "./ScmFormContext"; import { DeepPartial, UseFieldArrayReturn, useForm, UseFormReturn } from "react-hook-form"; -import { Button } from "@scm-manager/ui-buttons"; +import { Button } from "../buttons"; import { prefixWithoutIndices } from "./helpers"; import { useScmFormListContext } from "./ScmFormListContext"; import { useTranslation } from "react-i18next"; diff --git a/scm-ui/ui-forms/src/ConfigurationForm.tsx b/scm-ui/ui-core/src/base/forms/ConfigurationForm.tsx similarity index 97% rename from scm-ui/ui-forms/src/ConfigurationForm.tsx rename to scm-ui/ui-core/src/base/forms/ConfigurationForm.tsx index 09c8adecf6..829a6564db 100644 --- a/scm-ui/ui-forms/src/ConfigurationForm.tsx +++ b/scm-ui/ui-core/src/base/forms/ConfigurationForm.tsx @@ -23,7 +23,7 @@ */ import { useConfigLink } from "@scm-manager/ui-api"; -import { Loading } from "@scm-manager/ui-components"; +import { Loading } from "../misc"; import React, { ComponentProps } from "react"; import { HalRepresentation } from "@scm-manager/ui-types"; import Form from "./Form"; diff --git a/scm-ui/ui-forms/src/Form.stories.tsx b/scm-ui/ui-core/src/base/forms/Form.stories.tsx similarity index 100% rename from scm-ui/ui-forms/src/Form.stories.tsx rename to scm-ui/ui-core/src/base/forms/Form.stories.tsx diff --git a/scm-ui/ui-forms/src/Form.tsx b/scm-ui/ui-core/src/base/forms/Form.tsx similarity index 98% rename from scm-ui/ui-forms/src/Form.tsx rename to scm-ui/ui-core/src/base/forms/Form.tsx index e12c29a5ca..0fcc6c0648 100644 --- a/scm-ui/ui-forms/src/Form.tsx +++ b/scm-ui/ui-core/src/base/forms/Form.tsx @@ -24,10 +24,11 @@ import React, { FC, useCallback, useEffect, useState } from "react"; import { DeepPartial, SubmitHandler, useForm, UseFormReturn } from "react-hook-form"; -import { ErrorNotification, Level } from "@scm-manager/ui-components"; +import { ErrorNotification } from "../notifications"; +import { Level } from "../misc"; import { ScmFormContextProvider } from "./ScmFormContext"; import { useTranslation } from "react-i18next"; -import { Button } from "@scm-manager/ui-buttons"; +import { Button } from "../buttons"; import styled from "styled-components"; import { setValues } from "./helpers"; diff --git a/scm-ui/ui-forms/src/FormPathContext.tsx b/scm-ui/ui-core/src/base/forms/FormPathContext.tsx similarity index 100% rename from scm-ui/ui-forms/src/FormPathContext.tsx rename to scm-ui/ui-core/src/base/forms/FormPathContext.tsx diff --git a/scm-ui/ui-forms/src/FormRow.tsx b/scm-ui/ui-core/src/base/forms/FormRow.tsx similarity index 100% rename from scm-ui/ui-forms/src/FormRow.tsx rename to scm-ui/ui-core/src/base/forms/FormRow.tsx diff --git a/scm-ui/ui-forms/src/ScmFormContext.tsx b/scm-ui/ui-core/src/base/forms/ScmFormContext.tsx similarity index 100% rename from scm-ui/ui-forms/src/ScmFormContext.tsx rename to scm-ui/ui-core/src/base/forms/ScmFormContext.tsx diff --git a/scm-ui/ui-forms/src/ScmFormListContext.tsx b/scm-ui/ui-core/src/base/forms/ScmFormListContext.tsx similarity index 100% rename from scm-ui/ui-forms/src/ScmFormListContext.tsx rename to scm-ui/ui-core/src/base/forms/ScmFormListContext.tsx diff --git a/scm-ui/ui-forms/src/base/Control.tsx b/scm-ui/ui-core/src/base/forms/base/Control.tsx similarity index 100% rename from scm-ui/ui-forms/src/base/Control.tsx rename to scm-ui/ui-core/src/base/forms/base/Control.tsx diff --git a/scm-ui/ui-forms/src/base/Field.tsx b/scm-ui/ui-core/src/base/forms/base/Field.tsx similarity index 100% rename from scm-ui/ui-forms/src/base/Field.tsx rename to scm-ui/ui-core/src/base/forms/base/Field.tsx diff --git a/scm-ui/ui-forms/src/base/field-message/FieldMessage.tsx b/scm-ui/ui-core/src/base/forms/base/field-message/FieldMessage.tsx similarity index 100% rename from scm-ui/ui-forms/src/base/field-message/FieldMessage.tsx rename to scm-ui/ui-core/src/base/forms/base/field-message/FieldMessage.tsx diff --git a/scm-ui/ui-forms/src/base/help/Help.tsx b/scm-ui/ui-core/src/base/forms/base/help/Help.tsx similarity index 96% rename from scm-ui/ui-forms/src/base/help/Help.tsx rename to scm-ui/ui-core/src/base/forms/base/help/Help.tsx index 80b602cfdf..d41f58b6b8 100644 --- a/scm-ui/ui-forms/src/base/help/Help.tsx +++ b/scm-ui/ui-core/src/base/forms/base/help/Help.tsx @@ -23,7 +23,7 @@ */ import React from "react"; -import { Tooltip } from "@scm-manager/ui-overlays"; +import { Tooltip } from "../../../overlays"; type Props = { text?: string; className?: string }; const Help = ({ text, className }: Props) => ( diff --git a/scm-ui/ui-forms/src/base/label/Label.tsx b/scm-ui/ui-core/src/base/forms/base/label/Label.tsx similarity index 100% rename from scm-ui/ui-forms/src/base/label/Label.tsx rename to scm-ui/ui-core/src/base/forms/base/label/Label.tsx diff --git a/scm-ui/ui-forms/src/checkbox/Checkbox.stories.mdx b/scm-ui/ui-core/src/base/forms/checkbox/Checkbox.stories.mdx similarity index 100% rename from scm-ui/ui-forms/src/checkbox/Checkbox.stories.mdx rename to scm-ui/ui-core/src/base/forms/checkbox/Checkbox.stories.mdx diff --git a/scm-ui/ui-forms/src/checkbox/Checkbox.tsx b/scm-ui/ui-core/src/base/forms/checkbox/Checkbox.tsx similarity index 97% rename from scm-ui/ui-forms/src/checkbox/Checkbox.tsx rename to scm-ui/ui-core/src/base/forms/checkbox/Checkbox.tsx index bc6c361859..d01afc9803 100644 --- a/scm-ui/ui-forms/src/checkbox/Checkbox.tsx +++ b/scm-ui/ui-core/src/base/forms/checkbox/Checkbox.tsx @@ -23,7 +23,7 @@ */ import React, { InputHTMLAttributes } from "react"; -import { createAttributesForTesting } from "@scm-manager/ui-components"; +import { createAttributesForTesting } from "../../helpers"; import Help from "../base/help/Help"; import styled from "styled-components"; import classNames from "classnames"; diff --git a/scm-ui/ui-forms/src/checkbox/CheckboxField.tsx b/scm-ui/ui-core/src/base/forms/checkbox/CheckboxField.tsx similarity index 100% rename from scm-ui/ui-forms/src/checkbox/CheckboxField.tsx rename to scm-ui/ui-core/src/base/forms/checkbox/CheckboxField.tsx diff --git a/scm-ui/ui-forms/src/checkbox/ControlledCheckboxField.stories.mdx b/scm-ui/ui-core/src/base/forms/checkbox/ControlledCheckboxField.stories.mdx similarity index 100% rename from scm-ui/ui-forms/src/checkbox/ControlledCheckboxField.stories.mdx rename to scm-ui/ui-core/src/base/forms/checkbox/ControlledCheckboxField.stories.mdx diff --git a/scm-ui/ui-forms/src/checkbox/ControlledCheckboxField.tsx b/scm-ui/ui-core/src/base/forms/checkbox/ControlledCheckboxField.tsx similarity index 100% rename from scm-ui/ui-forms/src/checkbox/ControlledCheckboxField.tsx rename to scm-ui/ui-core/src/base/forms/checkbox/ControlledCheckboxField.tsx diff --git a/scm-ui/ui-forms/src/chip-input/ChipInputField.stories.tsx b/scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.stories.tsx similarity index 100% rename from scm-ui/ui-forms/src/chip-input/ChipInputField.stories.tsx rename to scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.stories.tsx diff --git a/scm-ui/ui-forms/src/chip-input/ChipInputField.tsx b/scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.tsx similarity index 95% rename from scm-ui/ui-forms/src/chip-input/ChipInputField.tsx rename to scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.tsx index 7668269c08..23ee53aea0 100644 --- a/scm-ui/ui-forms/src/chip-input/ChipInputField.tsx +++ b/scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.tsx @@ -22,8 +22,8 @@ * SOFTWARE. */ -import React, { KeyboardEventHandler, PropsWithRef, ReactElement, Ref, RefObject, useCallback } from "react"; -import { createAttributesForTesting, useGeneratedId } from "@scm-manager/ui-components"; +import React, { KeyboardEventHandler, PropsWithRef, ReactElement, Ref, useCallback } from "react"; +import { createAttributesForTesting, useAriaId } from "../../helpers"; import Field from "../base/Field"; import Label from "../base/label/Label"; import Help from "../base/help/Help"; @@ -114,9 +114,9 @@ const ChipInputField = function ChipInputField( (item) => (createDeleteText ? createDeleteText(item) : t("delete", { item })), [createDeleteText, t] ); - const inputId = useGeneratedId(id ?? testId); - const labelId = useGeneratedId(); - const inputDescriptionId = useGeneratedId(); + const inputId = useAriaId(id ?? testId); + const labelId = useAriaId(); + const inputDescriptionId = useAriaId(); const variant = error ? "danger" : undefined; return ( diff --git a/scm-ui/ui-forms/src/chip-input/ControlledChipInputField.tsx b/scm-ui/ui-core/src/base/forms/chip-input/ControlledChipInputField.tsx similarity index 100% rename from scm-ui/ui-forms/src/chip-input/ControlledChipInputField.tsx rename to scm-ui/ui-core/src/base/forms/chip-input/ControlledChipInputField.tsx diff --git a/scm-ui/ui-forms/src/combobox/Combobox.stories.tsx b/scm-ui/ui-core/src/base/forms/combobox/Combobox.stories.tsx similarity index 100% rename from scm-ui/ui-forms/src/combobox/Combobox.stories.tsx rename to scm-ui/ui-core/src/base/forms/combobox/Combobox.stories.tsx diff --git a/scm-ui/ui-forms/src/combobox/Combobox.tsx b/scm-ui/ui-core/src/base/forms/combobox/Combobox.tsx similarity index 98% rename from scm-ui/ui-forms/src/combobox/Combobox.tsx rename to scm-ui/ui-core/src/base/forms/combobox/Combobox.tsx index 688884c4d5..340dd06c0a 100644 --- a/scm-ui/ui-forms/src/combobox/Combobox.tsx +++ b/scm-ui/ui-core/src/base/forms/combobox/Combobox.tsx @@ -36,7 +36,7 @@ import { Combobox as HeadlessCombobox } from "@headlessui/react"; import classNames from "classnames"; import styled from "styled-components"; import { withForwardRef } from "../helpers"; -import { createAttributesForTesting } from "@scm-manager/ui-components"; +import { createAttributesForTesting } from "../../helpers"; import { Option } from "@scm-manager/ui-types"; const OptionsWrapper = styled(HeadlessCombobox.Options).attrs({ diff --git a/scm-ui/ui-forms/src/combobox/ComboboxField.tsx b/scm-ui/ui-core/src/base/forms/combobox/ComboboxField.tsx similarity index 95% rename from scm-ui/ui-forms/src/combobox/ComboboxField.tsx rename to scm-ui/ui-core/src/base/forms/combobox/ComboboxField.tsx index 479f019465..b48602f42a 100644 --- a/scm-ui/ui-forms/src/combobox/ComboboxField.tsx +++ b/scm-ui/ui-core/src/base/forms/combobox/ComboboxField.tsx @@ -26,7 +26,7 @@ import Field from "../base/Field"; import Label from "../base/label/Label"; import Help from "../base/help/Help"; import React from "react"; -import { useGeneratedId } from "@scm-manager/ui-components"; +import { useAriaId } from "../../helpers"; import { withForwardRef } from "../helpers"; import Combobox, { ComboboxProps } from "./Combobox"; import classNames from "classnames"; @@ -46,7 +46,7 @@ const ComboboxField = function ComboboxField( }: ComboboxProps & { label: string; helpText?: string; error?: string; isLoading?: boolean }, ref: React.ForwardedRef ) { - const labelId = useGeneratedId(); + const labelId = useAriaId(); return (