From 99978797432073a787a6fd322e7e5f03b718164a Mon Sep 17 00:00:00 2001 From: Juan Picado Date: Mon, 2 Jan 2023 20:13:45 +0100 Subject: [PATCH] feats: components UI for custom user interfaces (#3548) --- .changeset/orange-cows-pull.md | 27 + .eslintignore | 4 + .github/workflows/ui-components.yml | 74 + .gitignore | 10 +- .prettierignore | 1 + package.json | 9 +- packages/core/types/src/configuration.ts | 2 +- packages/plugins/ui-theme/jest/jest.config.js | 2 - packages/plugins/ui-theme/package.json | 12 +- .../plugins/ui-theme/src/App/App.test.tsx | 26 +- packages/plugins/ui-theme/src/App/App.tsx | 89 +- .../plugins/ui-theme/src/App/AppRoute.tsx | 37 +- .../src/App/Header/HeaderInfoDialog.tsx | 96 - .../ui-theme/src/App/Header/Support/index.ts | 3 - .../components/ActionBar/ActionBar.test.tsx | 125 - .../ui-theme/src/components/AppBar.tsx | 3 - .../Contributors}/Contributors.tsx | 0 .../generated_contributors_list.json | 0 .../src/components/Contributors/index.ts | 1 + .../src/components/CopyToClipBoard.tsx | 16 - .../src/components/FormHelperText.tsx | 3 - .../plugins/ui-theme/src/components/Input.tsx | 3 - .../plugins/ui-theme/src/components/Link.tsx | 40 - .../src/components/NotFound/styles.ts | 39 - .../plugins/ui-theme/src/components/Paper.tsx | 3 - .../Header => components}/Support/Support.tsx | 2 +- .../ui-theme/src/components/Support/index.ts | 1 + .../ui-theme/src/components/Tags/index.ts | 6 - .../ui-theme/src/components/Text/index.ts | 1 - .../ui-theme/src/components/Toolbar.tsx | 3 - .../src/{App/Header => components}/about.md | 0 .../src/{App/Header => components}/license.md | 0 .../src/design-tokens/ThemeContext.ts | 13 - .../src/design-tokens/ThemeProvider.tsx | 55 - .../ui-theme/src/design-tokens/useTheme.ts | 7 - packages/plugins/ui-theme/src/i18n/config.ts | 4 + .../load-dayjs-locale.ts | 0 packages/plugins/ui-theme/src/index.tsx | 15 +- .../plugins/ui-theme/src/pages/Front/Home.ts | 3 + .../src/pages/{home => Front}/index.ts | 0 .../Deprecated/Deprecated.test.tsx | 32 - .../DetailContainerContent.tsx | 40 - .../Versions/Versions.test.tsx | 58 - .../DetailContainer/Versions/Versions.tsx | 39 - .../__snapshots__/Versions.test.tsx.snap | 3 - .../pages/Version/DetailContainer/index.ts | 1 - .../DetailSidebar/DetailSidebar.test.tsx | 98 - .../Version/DetailSidebar/DetailSidebar.tsx | 73 - .../DetailSidebarFundButton.test.tsx | 109 - .../Version/DetailSidebar/Developers/index.ts | 1 - .../Version/DetailSidebar/Engines/Engines.tsx | 58 - .../DetailSidebar/Engines/img/node.png | Bin 27565 -> 0 bytes .../DetailSidebar/Install/Install.test.tsx | 62 - .../Repository/Repository.test.tsx | 76 - .../src/pages/Version/DetailSidebar/index.ts | 1 - .../src/pages/Version/Version.test.tsx | 67 - .../ui-theme/src/pages/Version/Version.tsx | 5 +- .../src/pages/Version/__partials__/data.json | 5984 -- .../ui-theme/src/pages/Version/context.ts | 10 - .../pages/Version/get-route-package-name.ts | 9 - .../ui-theme/src/pages/Version/index.ts | 3 - .../src/pages/home/PackageList/index.ts | 1 - packages/plugins/ui-theme/src/store/index.ts | 1 - .../plugins/ui-theme/src/utils/constants.ts | 5 - .../plugins/ui-theme/src/utils/file-size.ts | 13 - .../ui-theme/src/utils/i18nForTests.ts | 25 - .../plugins/ui-theme/src/utils/login.test.ts | 70 - packages/plugins/ui-theme/src/utils/login.ts | 44 - .../plugins/ui-theme/src/utils/storage.ts | 12 - .../src/utils/test-react-testing-library.tsx | 4 +- .../plugins/ui-theme/src/utils/windows.ts | 3 - .../plugins/ui-theme/tools/webpack.config.js | 1 - packages/plugins/ui-theme/tsconfig.build.json | 1 - packages/plugins/ui-theme/tsconfig.json | 1 - packages/ui-components/.babelrc | 3 +- packages/ui-components/.eslintrc | 100 + packages/ui-components/.storybook/main.js | 13 + .../.storybook/preview-head.html | 10 + packages/ui-components/.storybook/preview.js | 52 + .../ui-components/jest/api/home-packages.json | 40 + .../ui-components/jest/api/jquery-readme.js | 3 + .../jest/api/jquery-sidebar.json | 5908 ++ .../jest/api/search-verdaccio.json | 1192 + .../jest/api/storybook-readme.txt | 2 + .../jest/api/storybook-sidebar.json | 53782 ++++++++++++++++ .../ui-components/jest/api/storybook-v.json | 53782 ++++++++++++++++ packages/ui-components/jest/identity.js | 29 + packages/ui-components/jest/jest.config.js | 37 + .../ui-components/jest/jestEnvironment.js | 1 + .../ui-components/jest/server-handlers.ts | 57 + packages/ui-components/jest/server.d.ts | 2 + packages/ui-components/jest/server.ts | 6 + packages/ui-components/jest/setup-env.ts | 18 + packages/ui-components/jest/setup.ts | 31 + .../jest/unit/components/__mocks__/api.ts | 0 .../jest/unit/components/__mocks__/token.ts | 0 .../jest/unit/components/store/login.ts | 24 + .../jest/unit/components/store/logo.ts | 7 + .../jest/unit/components/store/package.ts | 174 + .../jest/unit/components/store/packageMeta.ts | 591 + .../ui-components/jest/unit/empty-string.ts | 1 + packages/ui-components/jest/unit/empty.ts | 1 + packages/ui-components/msw/browser.js | 5 + packages/ui-components/package.json | 74 +- .../ui-components/public/mockServiceWorker.js | 302 + .../src}/Text/Text.tsx | 1 + packages/ui-components/src/Text/index.ts | 1 + .../src/Theme}/ResetStyles.tsx | 2 +- .../src/Theme}/StyleBaseline.tsx | 0 .../ui-components/src/Theme/ThemeProvider.tsx | 45 + .../src/Theme}/colors.ts | 0 packages/ui-components/src/Theme/index.ts | 4 + .../src/Theme}/theme.ts | 5 +- .../src/__mocks__/react-markdown.tsx | 8 + .../src/__mocks__/remark-plugin.ts | 1 + .../ActionBar/ActionBar.stories.tsx | 50 + .../components/ActionBar/ActionBar.test.tsx | 85 + .../src/components/ActionBar/ActionBar.tsx | 16 +- .../components/ActionBar/ActionBarAction.tsx | 8 +- .../__snapshots__/ActionBar.test.tsx.snap | 25 +- .../src/components/ActionBar/index.ts | 0 .../src/components/Author/Author.stories.tsx | 53 + .../src/components/Author/Author.test.tsx | 12 +- .../src/components/Author/Author.tsx | 26 +- .../Author/__snapshots__/Author.test.tsx.snap | 388 +- .../src/components/Author/index.ts | 0 .../src/components/Author/styles.ts | 6 +- .../CopyClipboard/CopyToClipBoard.stories.tsx | 20 + .../CopyClipboard/CopyToClipBoard.tsx | 16 +- .../{ => components}/CopyClipboard/index.ts | 0 .../{ => components}/CopyClipboard/utils.ts | 0 .../Dependencies/Dependencies.stories.tsx | 58 + .../Dependencies/Dependencies.test.tsx | 22 +- .../components}/Dependencies/Dependencies.tsx | 16 +- .../src/components}/Dependencies/index.ts | 0 .../src/components}/Dependencies/styles.ts | 7 +- .../src/components}/Dependencies/types.ts | 0 .../Deprecated/Deprecated.stories.tsx | 9 + .../components/Deprecated/Deprecated.test.tsx | 26 + .../src/components}/Deprecated/Deprecated.tsx | 3 +- .../src/components}/Deprecated/index.ts | 0 .../Developers/Developers.stories.tsx | 60 + .../Developers/Developers.test.tsx | 27 +- .../src/components}/Developers/Developers.tsx | 24 +- .../src/components/Developers/Title.tsx} | 11 +- .../__snapshots__/Developers.test.tsx.snap | 8 +- .../Developers/get-unique-developer-values.ts | 2 +- .../src/components/Developers/index.ts | 1 + .../src/components}/Developers/styles.ts | 7 +- .../components/Distribution/Dist.stories.tsx | 24 + .../components/Distribution}/Dist.test.tsx | 12 +- .../src/components/Distribution}/Dist.tsx | 26 +- .../__snapshots__/Dist.test.tsx.snap | 614 +- .../src/components/Distribution/index.d.ts} | 0 .../src/components/Distribution/index.ts | 1 + .../src/components/Distribution}/styles.ts | 13 +- .../src/components/Distribution/utils.ts | 31 + .../components/Engines/Engines.stories.tsx | 71 + .../src/components}/Engines/Engines.test.tsx | 25 +- .../src/components/Engines/Engines.tsx | 68 + .../src/components}/Engines/index.ts | 0 .../src/components}/Engines/styles.ts | 7 +- .../ErrorBoundary/ErrorBoundary.tsx} | 0 .../src/components/ErrorBoundary/index.ts | 1 + .../FundButton/FundButton.stories.tsx | 25 + .../components/FundButton/FundButton.test.tsx | 84 + .../src/components/FundButton/FundButton.tsx} | 61 +- .../src/components/FundButton/index.ts | 1 + .../HeaderInfoDialog/HeaderInfoDialog.tsx | 82 + .../src/components/HeaderInfoDialog/index.ts | 1 + .../src/components/Heading}/Heading.tsx | 3 +- .../src/components/Heading/index.ts | 1 + .../src/components/Help/Help.stories.tsx | 9 + .../src/components}/Help/Help.test.tsx | 2 +- .../src/components}/Help/Help.tsx | 23 +- .../Help/__snapshots__/Help.test.tsx.snap | 106 +- .../src/components}/Help/index.ts | 0 .../src/components}/Help/styles.ts | 5 - .../src/components/Icons/.eslintrc | 0 .../components/Icons/DevsIcons/CommonJS.tsx | 2 +- .../components/Icons/DevsIcons/ES6Module.tsx | 2 +- .../src/components/Icons/DevsIcons/Git.tsx | 13 + .../src/components/Icons/DevsIcons/NodeJS.tsx | 13 + .../components/Icons/DevsIcons/TypeScript.tsx | 4 +- .../components/Icons/DevsIcons/commonjs.svg | 0 .../components/Icons/DevsIcons/es6modules.svg | 0 .../src/components/Icons/DevsIcons/git.svg | 4 + .../src/components/Icons/DevsIcons/index.ts} | 2 + .../src/components/Icons/DevsIcons/nodejs.svg | 6 + .../components/Icons/DevsIcons/typescript.svg | 0 .../src/components/Icons/Earth.tsx | 2 +- .../src/components/Icons/FileBinary.tsx | 2 +- .../src/components/Icons/Icons.stories.tsx | 37 + .../src/components/Icons/Law.tsx | 4 +- .../src/components/Icons/License.tsx | 2 +- .../src/components/Icons/Managers/Npm.tsx | 13 + .../src/components/Icons/Managers/Pnpm.tsx | 13 + .../src/components/Icons/Managers/Yarn.tsx | 13 + .../src/components/Icons/Managers/index.ts | 3 + .../src/components/Icons/Managers}/npm.svg | 0 .../src/components/Icons/Managers}/pnpm.svg | 0 .../src/components/Icons/Managers}/yarn.svg | 0 .../src/components/Icons}/SvgIcon.tsx | 1 + .../src/components/Icons/Time.tsx | 2 +- .../src/components/Icons/Version.tsx | 6 +- .../src/components/Icons/index.ts | 2 + .../components/Install/Install.stories.tsx | 34 + .../src/components/Install/Install.test.tsx | 84 + .../src/components}/Install/Install.tsx | 27 +- .../components}/Install/InstallListItem.tsx | 34 +- .../Install}/__partials__/data.json | 0 .../src/components/Install/img/npm.svg | 15 + .../src/components/Install/img/pnpm.svg | 1 + .../src/components/Install/img/yarn.svg | 1 + .../src/components}/Install/index.ts | 0 .../src/components/Label/Label.test.tsx | 2 +- .../src/components/Label/Label.tsx | 4 +- .../Label/__snapshots__/Label.test.tsx.snap | 0 .../src/components/Label/index.ts | 0 .../src/components/Link/Link.tsx | 32 + .../src/components/Link/index.ts | 1 + .../components/Loading/Loading.stories.tsx | 14 + .../src/components/Loading/Loading.test.tsx | 2 +- .../src/components/Loading/Loading.tsx | 2 +- .../Loading/Spinner/Spinner.test.tsx | 2 +- .../components/Loading/Spinner/Spinner.tsx | 3 +- .../__snapshots__/Spinner.test.tsx.snap | 0 .../src/components/Loading/Spinner/index.tsx | 0 .../__snapshots__/Loading.test.tsx.snap | 0 .../src/components/Loading/index.ts | 0 .../src/components/Loading/styles.ts | 3 +- .../LoginDialog/LoginDialog.stories.tsx | 20 + .../LoginDialog/LoginDialog.test.tsx | 11 +- .../components}/LoginDialog/LoginDialog.tsx | 5 +- .../LoginDialog/LoginDialogCloseButton.tsx | 3 +- .../LoginDialog/LoginDialogForm.tsx | 4 +- .../LoginDialog/LoginDialogFormError.tsx | 4 +- .../LoginDialog/LoginDialogHeader.tsx | 4 +- .../__snapshots__/LoginDialog.test.tsx.snap | 0 .../src/components}/LoginDialog/index.ts | 0 .../src/components/Logo/Logo.test.tsx | 2 +- .../src/components/Logo/Logo.tsx | 12 +- .../Logo/__snapshots__/Logo.test.tsx.snap | 0 .../Logo/img/logo-black-and-white.svg | 0 .../src/components/Logo/img/logo.svg | 0 .../src/components/Logo/index.ts | 0 .../src/components/MenuItem}/MenuItem.tsx | 0 .../src/components/MenuItem/index.ts | 1 + .../components/NoItems/NoItems.stories.tsx | 11 + .../src/components}/NoItems/NoItems.tsx | 6 +- .../src/components}/NoItems/Noitems.test.tsx | 2 +- .../__snapshots__/Noitems.test.tsx.snap | 0 .../src/components}/NoItems/index.ts | 0 .../src/components/NotFound/NotFound.tsx | 3 +- .../src/components/NotFound/Notfound.test.tsx | 2 +- .../__snapshots__/Notfound.test.tsx.snap | 6 +- .../src/components/NotFound/img/package.svg | 0 .../src/components/NotFound/index.ts | 0 .../src/components}/Package/Package.test.tsx | 6 +- .../src/components}/Package/Package.tsx | 40 +- .../src/components}/Package/Tag/Tag.test.tsx | 2 +- .../src/components}/Package/Tag/Tag.tsx | 0 .../Tag/__snapshots__/Tag.test.tsx.snap | 0 .../src/components}/Package/Tag/index.ts | 0 .../src/components}/Package/Tag/styles.ts | 0 .../src/components}/Package/index.ts | 0 .../src/components}/Package/styles.ts | 10 +- .../components}/PackageList/PackageList.tsx | 12 +- .../PackageList/Packagelist.test.tsx | 8 +- .../src/components/PackageList/index.ts | 1 + .../src/components/RawViewer/RawViewer.tsx | 20 +- .../src/components/RawViewer/index.ts | 0 .../src/components}/Readme/Readme.spec.tsx | 2 +- .../src/components}/Readme/Readme.tsx | 2 +- .../Readme/__snapshots__/Readme.spec.tsx.snap | 0 .../src/components}/Readme/index.ts | 0 .../src/components}/Readme/types.ts | 0 .../src/components}/Readme/utils.ts | 0 .../RegistryInfoDialog/RegistryInfoDialog.tsx | 0 .../components}/RegistryInfoDialog/index.ts | 0 .../components}/RegistryInfoDialog/styles.ts | 3 +- .../components}/RegistryInfoDialog/types.ts | 0 .../Repository/Repository.stories.tsx | 43 + .../components/Repository/Repository.test.tsx | 43 + .../src/components}/Repository/Repository.tsx | 34 +- .../Repository}/__partials__/data.json | 0 .../__snapshots__/Repository.test.tsx.snap | 0 .../src/components}/Repository/img/git.png | Bin .../src/components}/Repository/index.ts | 0 .../Search/AutoComplete/AutoComplete.tsx | 8 +- .../components}/Search/AutoComplete/index.ts | 0 .../Search/AutoComplete/styles.tsx | 4 +- .../src/components/Search/Search.stories.tsx | 30 + .../src/components}/Search/Search.test.tsx | 22 +- .../src/components}/Search/Search.tsx | 5 +- .../src/components}/Search/SearchItem.tsx | 0 .../Search/__snapshots__/Search.test.tsx.snap | 2 +- .../src/components}/Search/index.ts | 0 .../src/components}/Search/styles.ts | 4 +- .../SideBarTittle/SideBarTittle.tsx} | 12 +- .../src/components/SideBarTittle/index.ts | 1 + .../src/components/SideBarTittle/utils.ts | 12 + .../components/TextField/TextField.test.tsx | 2 +- .../src/components/TextField/TextField.tsx | 3 +- .../__snapshots__/TextField.test.tsx.snap | 0 .../src/components/TextField/index.ts | 0 .../src/components}/UpLinks/UpLinks.test.tsx | 15 +- .../src/components}/UpLinks/UpLinks.tsx | 12 +- .../components/UpLinks/Uplinks.stories.tsx | 47 + .../__snapshots__/UpLinks.test.tsx.snap | 8 +- .../src/components}/UpLinks/index.ts | 0 .../src/components}/UpLinks/styles.ts | 7 +- .../src/components/Versions/HistoryList.tsx} | 19 +- .../src/components/Versions/TagList.tsx} | 10 +- .../src/components/Versions/Versions.test.tsx | 39 + .../src/components/Versions/Versions.tsx | 40 + .../Versions}/__partials__/data.json | 0 .../src/components}/Versions/index.ts | 0 .../src/components}/Versions/styles.ts | 11 +- .../src/components/Versions/types.ts} | 2 +- packages/ui-components/src/hooks/index.ts | 2 + .../src/hooks/useLocalStorage.ts | 0 .../src/hooks/useOnClickOutside.ts | 2 +- packages/ui-components/src/index.ts | 60 +- .../src/layouts/Version/Version.stories.tsx | 29 + .../src/layouts/Version/Version.tsx} | 7 +- .../src/layouts/Version/index.ts | 1 + .../AppConfigurationProvider.tsx | 14 +- .../AppConfigurationProvider}/index.ts | 0 .../TranslatorProvider/TranslatorProvider.tsx | 49 + .../src/providers/TranslatorProvider/index.ts | 1 + .../VersionProvider/VersionProvider.tsx} | 39 +- .../src/providers/VersionProvider/index.ts | 1 + packages/ui-components/src/providers/index.ts | 3 + .../src/sections/Detail/ContainerContent.tsx | 46 + .../src/sections/Detail/Detail.stories.tsx | 29 + .../src/sections/Detail/Detail.test.tsx} | 4 +- .../src/sections/Detail/Detail.tsx} | 17 +- .../src/sections/Detail/ReadmeSection.tsx} | 2 +- .../src/sections/Detail/Tabs.tsx} | 4 +- .../__snapshots__/Detail.test.tsx.snap} | 8 +- .../src/sections/Detail/index.ts | 1 + .../src/sections}/Footer/Footer.test.tsx | 2 +- .../src/sections}/Footer/Footer.tsx | 11 +- .../Footer/__snapshots__/Footer.test.tsx.snap | 55 +- .../src/sections}/Footer/index.ts | 0 .../src/sections}/Footer/styles.ts | 3 +- .../src/sections/Header/Header.stories.tsx | 36 + .../src/sections}/Header/Header.test.tsx | 52 +- .../src/sections}/Header/Header.tsx | 24 +- .../src/sections}/Header/HeaderGreetings.tsx | 2 +- .../src/sections}/Header/HeaderLeft.tsx | 3 +- .../src/sections}/Header/HeaderMenu.tsx | 2 +- .../src/sections}/Header/HeaderRight.tsx | 15 +- .../sections}/Header/HeaderSettingsDialog.tsx | 3 +- .../src/sections}/Header/HeaderToolTip.tsx | 0 .../sections}/Header/HeaderToolTipIcon.tsx | 0 .../src/sections}/Header/LanguageSwitch.tsx | 40 +- .../RegistryInfoContent.test.tsx | 6 +- .../RegistryInfoContent.tsx | 43 +- .../Header/RegistryInfoContent/index.ts | 0 .../Header/RegistryInfoContent/styles.ts | 3 +- .../RegistryInfoDialog/RegistryInfoDialog.tsx | 31 + .../Header/RegistryInfoDialog/index.ts | 1 + .../Header/RegistryInfoDialog/styles.ts | 21 + .../Header/RegistryInfoDialog/types.ts | 8 + .../src/sections}/Header/index.ts | 0 .../src/sections}/Header/styles.ts | 8 +- .../src/sections/Home/Home.stories.tsx | 16 + .../src/sections/Home}/Home.tsx | 5 +- .../ui-components/src/sections/Home/index.ts | 1 + .../src/sections/SideBar/Sidebar.stories.tsx | 39 + .../src/sections/SideBar/Sidebar.test.tsx | 107 + .../src/sections/SideBar/Sidebar.tsx | 80 + .../src/sections/SideBar/index.ts | 1 + packages/ui-components/src/sections/index.ts | 2 + .../src/store}/api.test.ts | 0 .../API => ui-components/src/store}/api.ts | 1 - packages/ui-components/src/store/index.ts | 3 + .../src/store/models/configuration.ts | 13 +- .../src/store/models/download.ts | 2 +- .../src/store/models/index.ts | 0 .../src/store/models/login.ts | 6 +- .../src/store/models/manifest.ts | 8 +- .../src/store/models/packages.ts | 2 +- .../src/store/models/search.ts | 2 +- .../src/store}/storage.ts | 0 .../src/store/store.ts | 0 .../ui-components/src/test/i18n-config.ts | 19 + .../src/test/test-react-testing-library.tsx | 42 + packages/ui-components/src/types/index.d.ts | 19 + packages/ui-components/src/types/index.ts | 11 + .../ui-components/src/types/packageMeta.ts | 88 + packages/ui-components/src/utils/.eslintrc | 5 + .../src/utils/__partials__/packageMeta.ts | 591 + .../src/utils/cli-utils.test.ts | 0 .../src/utils/cli-utils.ts | 0 packages/ui-components/src/utils/index.ts | 10 + .../src}/utils/loadable.tsx | 0 packages/ui-components/src/utils/routes.ts | 7 + .../src/utils/url.test.ts | 0 .../src/utils/url.ts | 2 - .../src/utils/utils.test.ts} | 17 +- .../src/utils/utils.ts} | 16 +- packages/ui-components/tsconfig.build.json | 14 +- packages/ui-components/tsconfig.json | 21 +- pnpm-lock.yaml | 5060 +- scripts/contributors-update.ts | 2 +- tsconfig.base.json | 2 +- 409 files changed, 124796 insertions(+), 9391 deletions(-) create mode 100644 .changeset/orange-cows-pull.md create mode 100644 .github/workflows/ui-components.yml delete mode 100644 packages/plugins/ui-theme/src/App/Header/HeaderInfoDialog.tsx delete mode 100644 packages/plugins/ui-theme/src/App/Header/Support/index.ts delete mode 100644 packages/plugins/ui-theme/src/components/ActionBar/ActionBar.test.tsx delete mode 100644 packages/plugins/ui-theme/src/components/AppBar.tsx rename packages/plugins/ui-theme/src/{App/Header => components/Contributors}/Contributors.tsx (100%) rename packages/plugins/ui-theme/src/{App/Header => components/Contributors}/generated_contributors_list.json (100%) create mode 100644 packages/plugins/ui-theme/src/components/Contributors/index.ts delete mode 100644 packages/plugins/ui-theme/src/components/CopyToClipBoard.tsx delete mode 100644 packages/plugins/ui-theme/src/components/FormHelperText.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Input.tsx delete mode 100644 packages/plugins/ui-theme/src/components/Link.tsx delete mode 100644 packages/plugins/ui-theme/src/components/NotFound/styles.ts delete mode 100644 packages/plugins/ui-theme/src/components/Paper.tsx rename packages/plugins/ui-theme/src/{App/Header => components}/Support/Support.tsx (99%) create mode 100644 packages/plugins/ui-theme/src/components/Support/index.ts delete mode 100644 packages/plugins/ui-theme/src/components/Tags/index.ts delete mode 100644 packages/plugins/ui-theme/src/components/Text/index.ts delete mode 100644 packages/plugins/ui-theme/src/components/Toolbar.tsx rename packages/plugins/ui-theme/src/{App/Header => components}/about.md (100%) rename packages/plugins/ui-theme/src/{App/Header => components}/license.md (100%) delete mode 100644 packages/plugins/ui-theme/src/design-tokens/ThemeContext.ts delete mode 100644 packages/plugins/ui-theme/src/design-tokens/ThemeProvider.tsx delete mode 100644 packages/plugins/ui-theme/src/design-tokens/useTheme.ts rename packages/plugins/ui-theme/src/{design-tokens => i18n}/load-dayjs-locale.ts (100%) create mode 100644 packages/plugins/ui-theme/src/pages/Front/Home.ts rename packages/plugins/ui-theme/src/pages/{home => Front}/index.ts (100%) delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailContainer/Deprecated/Deprecated.test.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainerContent.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.test.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/__snapshots__/Versions.test.tsx.snap delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailContainer/index.ts delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.test.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarFundButton.test.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/index.ts delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/Engines.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/img/node.png delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/Install.test.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Repository/Repository.test.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/DetailSidebar/index.ts delete mode 100644 packages/plugins/ui-theme/src/pages/Version/Version.test.tsx delete mode 100644 packages/plugins/ui-theme/src/pages/Version/__partials__/data.json delete mode 100644 packages/plugins/ui-theme/src/pages/Version/context.ts delete mode 100644 packages/plugins/ui-theme/src/pages/Version/get-route-package-name.ts delete mode 100644 packages/plugins/ui-theme/src/pages/home/PackageList/index.ts delete mode 100644 packages/plugins/ui-theme/src/store/index.ts delete mode 100644 packages/plugins/ui-theme/src/utils/constants.ts delete mode 100644 packages/plugins/ui-theme/src/utils/file-size.ts delete mode 100644 packages/plugins/ui-theme/src/utils/i18nForTests.ts delete mode 100644 packages/plugins/ui-theme/src/utils/login.test.ts delete mode 100644 packages/plugins/ui-theme/src/utils/login.ts delete mode 100644 packages/plugins/ui-theme/src/utils/storage.ts delete mode 100644 packages/plugins/ui-theme/src/utils/windows.ts create mode 100644 packages/ui-components/.eslintrc create mode 100644 packages/ui-components/.storybook/main.js create mode 100644 packages/ui-components/.storybook/preview-head.html create mode 100644 packages/ui-components/.storybook/preview.js create mode 100644 packages/ui-components/jest/api/home-packages.json create mode 100644 packages/ui-components/jest/api/jquery-readme.js create mode 100644 packages/ui-components/jest/api/jquery-sidebar.json create mode 100644 packages/ui-components/jest/api/search-verdaccio.json create mode 100644 packages/ui-components/jest/api/storybook-readme.txt create mode 100644 packages/ui-components/jest/api/storybook-sidebar.json create mode 100644 packages/ui-components/jest/api/storybook-v.json create mode 100644 packages/ui-components/jest/identity.js create mode 100644 packages/ui-components/jest/jest.config.js create mode 100644 packages/ui-components/jest/jestEnvironment.js create mode 100644 packages/ui-components/jest/server-handlers.ts create mode 100644 packages/ui-components/jest/server.d.ts create mode 100644 packages/ui-components/jest/server.ts create mode 100644 packages/ui-components/jest/setup-env.ts create mode 100644 packages/ui-components/jest/setup.ts rename packages/{plugins/ui-theme => ui-components}/jest/unit/components/__mocks__/api.ts (100%) rename packages/{plugins/ui-theme => ui-components}/jest/unit/components/__mocks__/token.ts (100%) create mode 100644 packages/ui-components/jest/unit/components/store/login.ts create mode 100644 packages/ui-components/jest/unit/components/store/logo.ts create mode 100644 packages/ui-components/jest/unit/components/store/package.ts create mode 100644 packages/ui-components/jest/unit/components/store/packageMeta.ts create mode 100644 packages/ui-components/jest/unit/empty-string.ts create mode 100644 packages/ui-components/jest/unit/empty.ts create mode 100644 packages/ui-components/msw/browser.js create mode 100644 packages/ui-components/public/mockServiceWorker.js rename packages/{plugins/ui-theme/src/components => ui-components/src}/Text/Text.tsx (65%) create mode 100644 packages/ui-components/src/Text/index.ts rename packages/{plugins/ui-theme/src/design-tokens => ui-components/src/Theme}/ResetStyles.tsx (96%) rename packages/{plugins/ui-theme/src/design-tokens => ui-components/src/Theme}/StyleBaseline.tsx (100%) create mode 100644 packages/ui-components/src/Theme/ThemeProvider.tsx rename packages/{plugins/ui-theme/src/utils => ui-components/src/Theme}/colors.ts (100%) create mode 100644 packages/ui-components/src/Theme/index.ts rename packages/{plugins/ui-theme/src/design-tokens => ui-components/src/Theme}/theme.ts (96%) create mode 100644 packages/ui-components/src/__mocks__/react-markdown.tsx create mode 100644 packages/ui-components/src/__mocks__/remark-plugin.ts create mode 100644 packages/ui-components/src/components/ActionBar/ActionBar.stories.tsx create mode 100644 packages/ui-components/src/components/ActionBar/ActionBar.test.tsx rename packages/{plugins/ui-theme => ui-components}/src/components/ActionBar/ActionBar.tsx (78%) rename packages/{plugins/ui-theme => ui-components}/src/components/ActionBar/ActionBarAction.tsx (92%) rename packages/{plugins/ui-theme => ui-components}/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap (94%) rename packages/{plugins/ui-theme => ui-components}/src/components/ActionBar/index.ts (100%) create mode 100644 packages/ui-components/src/components/Author/Author.stories.tsx rename packages/{plugins/ui-theme => ui-components}/src/components/Author/Author.test.tsx (82%) rename packages/{plugins/ui-theme => ui-components}/src/components/Author/Author.tsx (66%) rename packages/{plugins/ui-theme => ui-components}/src/components/Author/__snapshots__/Author.test.tsx.snap (67%) rename packages/{plugins/ui-theme => ui-components}/src/components/Author/index.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Author/styles.ts (72%) create mode 100644 packages/ui-components/src/components/CopyClipboard/CopyToClipBoard.stories.tsx rename packages/ui-components/src/{ => components}/CopyClipboard/CopyToClipBoard.tsx (67%) rename packages/ui-components/src/{ => components}/CopyClipboard/index.ts (100%) rename packages/ui-components/src/{ => components}/CopyClipboard/utils.ts (100%) create mode 100644 packages/ui-components/src/components/Dependencies/Dependencies.stories.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Dependencies/Dependencies.test.tsx (72%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Dependencies/Dependencies.tsx (85%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Dependencies/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Dependencies/styles.ts (71%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Dependencies/types.ts (100%) create mode 100644 packages/ui-components/src/components/Deprecated/Deprecated.stories.tsx create mode 100644 packages/ui-components/src/components/Deprecated/Deprecated.test.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Deprecated/Deprecated.tsx (92%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Deprecated/index.ts (100%) create mode 100644 packages/ui-components/src/components/Developers/Developers.stories.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Developers/Developers.test.tsx (69%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Developers/Developers.tsx (76%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/DevelopersTitle.tsx => ui-components/src/components/Developers/Title.tsx} (70%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Developers/__snapshots__/Developers.test.tsx.snap (99%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Developers/get-unique-developer-values.ts (86%) create mode 100644 packages/ui-components/src/components/Developers/index.ts rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Developers/styles.ts (77%) create mode 100644 packages/ui-components/src/components/Distribution/Dist.stories.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Dist => ui-components/src/components/Distribution}/Dist.test.tsx (81%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Dist => ui-components/src/components/Distribution}/Dist.tsx (54%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Dist => ui-components/src/components/Distribution}/__snapshots__/Dist.test.tsx.snap (72%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/index.ts => ui-components/src/components/Distribution/index.d.ts} (100%) create mode 100644 packages/ui-components/src/components/Distribution/index.ts rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Dist => ui-components/src/components/Distribution}/styles.ts (58%) create mode 100644 packages/ui-components/src/components/Distribution/utils.ts create mode 100644 packages/ui-components/src/components/Engines/Engines.stories.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Engines/Engines.test.tsx (64%) create mode 100644 packages/ui-components/src/components/Engines/Engines.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Engines/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Engines/styles.ts (57%) rename packages/{plugins/ui-theme/src/App/AppError.tsx => ui-components/src/components/ErrorBoundary/ErrorBoundary.tsx} (100%) create mode 100644 packages/ui-components/src/components/ErrorBoundary/index.ts create mode 100644 packages/ui-components/src/components/FundButton/FundButton.stories.tsx create mode 100644 packages/ui-components/src/components/FundButton/FundButton.test.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarFundButton.tsx => ui-components/src/components/FundButton/FundButton.tsx} (66%) create mode 100644 packages/ui-components/src/components/FundButton/index.ts create mode 100644 packages/ui-components/src/components/HeaderInfoDialog/HeaderInfoDialog.tsx create mode 100644 packages/ui-components/src/components/HeaderInfoDialog/index.ts rename packages/{plugins/ui-theme/src/components => ui-components/src/components/Heading}/Heading.tsx (78%) create mode 100644 packages/ui-components/src/components/Heading/index.ts create mode 100644 packages/ui-components/src/components/Help/Help.stories.tsx rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Help/Help.test.tsx (78%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Help/Help.tsx (65%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Help/__snapshots__/Help.test.tsx.snap (82%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Help/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Help/styles.ts (52%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/.eslintrc (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/DevsIcons/CommonJS.tsx (88%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/DevsIcons/ES6Module.tsx (88%) create mode 100644 packages/ui-components/src/components/Icons/DevsIcons/Git.tsx create mode 100644 packages/ui-components/src/components/Icons/DevsIcons/NodeJS.tsx rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/DevsIcons/TypeScript.tsx (67%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/DevsIcons/commonjs.svg (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/DevsIcons/es6modules.svg (100%) create mode 100644 packages/ui-components/src/components/Icons/DevsIcons/git.svg rename packages/{plugins/ui-theme/src/components/Icons/DevsIcons/index.tsx => ui-components/src/components/Icons/DevsIcons/index.ts} (65%) create mode 100644 packages/ui-components/src/components/Icons/DevsIcons/nodejs.svg rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/DevsIcons/typescript.svg (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/Earth.tsx (98%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/FileBinary.tsx (93%) create mode 100644 packages/ui-components/src/components/Icons/Icons.stories.tsx rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/Law.tsx (94%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/License.tsx (98%) create mode 100644 packages/ui-components/src/components/Icons/Managers/Npm.tsx create mode 100644 packages/ui-components/src/components/Icons/Managers/Pnpm.tsx create mode 100644 packages/ui-components/src/components/Icons/Managers/Yarn.tsx create mode 100644 packages/ui-components/src/components/Icons/Managers/index.ts rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Install/img => ui-components/src/components/Icons/Managers}/npm.svg (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Install/img => ui-components/src/components/Icons/Managers}/pnpm.svg (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Install/img => ui-components/src/components/Icons/Managers}/yarn.svg (100%) rename packages/{plugins/ui-theme/src/components => ui-components/src/components/Icons}/SvgIcon.tsx (94%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/Time.tsx (93%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/Version.tsx (84%) rename packages/{plugins/ui-theme => ui-components}/src/components/Icons/index.ts (75%) create mode 100644 packages/ui-components/src/components/Install/Install.stories.tsx create mode 100644 packages/ui-components/src/components/Install/Install.test.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Install/Install.tsx (67%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Install/InstallListItem.tsx (66%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer/Versions => ui-components/src/components/Install}/__partials__/data.json (100%) create mode 100644 packages/ui-components/src/components/Install/img/npm.svg create mode 100644 packages/ui-components/src/components/Install/img/pnpm.svg create mode 100644 packages/ui-components/src/components/Install/img/yarn.svg rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Install/index.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Label/Label.test.tsx (81%) rename packages/{plugins/ui-theme => ui-components}/src/components/Label/Label.tsx (88%) rename packages/{plugins/ui-theme => ui-components}/src/components/Label/__snapshots__/Label.test.tsx.snap (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Label/index.ts (100%) create mode 100644 packages/ui-components/src/components/Link/Link.tsx create mode 100644 packages/ui-components/src/components/Link/index.ts create mode 100644 packages/ui-components/src/components/Loading/Loading.stories.tsx rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/Loading.test.tsx (79%) rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/Loading.tsx (90%) rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/Spinner/Spinner.test.tsx (77%) rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/Spinner/Spinner.tsx (93%) rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/Spinner/__snapshots__/Spinner.test.tsx.snap (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/Spinner/index.tsx (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/__snapshots__/Loading.test.tsx.snap (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/index.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Loading/styles.ts (88%) create mode 100644 packages/ui-components/src/components/LoginDialog/LoginDialog.stories.tsx rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/LoginDialog/LoginDialog.test.tsx (90%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/LoginDialog/LoginDialog.tsx (92%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/LoginDialog/LoginDialogCloseButton.tsx (93%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/LoginDialog/LoginDialogForm.tsx (94%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/LoginDialog/LoginDialogFormError.tsx (89%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/LoginDialog/LoginDialogHeader.tsx (92%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/LoginDialog/__snapshots__/LoginDialog.test.tsx.snap (100%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/LoginDialog/index.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Logo/Logo.test.tsx (78%) rename packages/{plugins/ui-theme => ui-components}/src/components/Logo/Logo.tsx (74%) rename packages/{plugins/ui-theme => ui-components}/src/components/Logo/__snapshots__/Logo.test.tsx.snap (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Logo/img/logo-black-and-white.svg (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Logo/img/logo.svg (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/Logo/index.ts (100%) rename packages/{plugins/ui-theme/src/components => ui-components/src/components/MenuItem}/MenuItem.tsx (100%) create mode 100644 packages/ui-components/src/components/MenuItem/index.ts create mode 100644 packages/ui-components/src/components/NoItems/NoItems.stories.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/NoItems/NoItems.tsx (61%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/NoItems/Noitems.test.tsx (82%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/NoItems/__snapshots__/Noitems.test.tsx.snap (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/NoItems/index.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/NotFound/NotFound.tsx (96%) rename packages/{plugins/ui-theme => ui-components}/src/components/NotFound/Notfound.test.tsx (90%) rename packages/{plugins/ui-theme => ui-components}/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap (97%) rename packages/{plugins/ui-theme => ui-components}/src/components/NotFound/img/package.svg (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/NotFound/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/Package.test.tsx (86%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/Package.tsx (87%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/Tag/Tag.test.tsx (81%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/Tag/Tag.tsx (100%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/Tag/__snapshots__/Tag.test.tsx.snap (100%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/Tag/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/Tag/styles.ts (100%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/home/PackageList => ui-components/src/components}/Package/styles.ts (88%) rename packages/{plugins/ui-theme/src/pages/home => ui-components/src/components}/PackageList/PackageList.tsx (88%) rename packages/{plugins/ui-theme/src/pages/home => ui-components/src/components}/PackageList/Packagelist.test.tsx (85%) create mode 100644 packages/ui-components/src/components/PackageList/index.ts rename packages/{plugins/ui-theme => ui-components}/src/components/RawViewer/RawViewer.tsx (82%) rename packages/{plugins/ui-theme => ui-components}/src/components/RawViewer/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Readme/Readme.spec.tsx (86%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Readme/Readme.tsx (92%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Readme/__snapshots__/Readme.spec.tsx.snap (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Readme/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Readme/types.ts (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Readme/utils.ts (100%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/RegistryInfoDialog/RegistryInfoDialog.tsx (100%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/RegistryInfoDialog/index.ts (100%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/RegistryInfoDialog/styles.ts (92%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/RegistryInfoDialog/types.ts (100%) create mode 100644 packages/ui-components/src/components/Repository/Repository.stories.tsx create mode 100644 packages/ui-components/src/components/Repository/Repository.test.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Repository/Repository.tsx (64%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Install => ui-components/src/components/Repository}/__partials__/data.json (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Repository/__snapshots__/Repository.test.tsx.snap (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Repository/img/git.png (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar => ui-components/src/components}/Repository/index.ts (100%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/AutoComplete/AutoComplete.tsx (91%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/AutoComplete/index.ts (100%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/AutoComplete/styles.tsx (88%) create mode 100644 packages/ui-components/src/components/Search/Search.stories.tsx rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/Search.test.tsx (89%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/Search.tsx (97%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/SearchItem.tsx (100%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/__snapshots__/Search.test.tsx.snap (99%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/index.ts (100%) rename packages/{plugins/ui-theme/src/App/Header => ui-components/src/components}/Search/styles.ts (89%) rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx => ui-components/src/components/SideBarTittle/SideBarTittle.tsx} (84%) create mode 100644 packages/ui-components/src/components/SideBarTittle/index.ts create mode 100644 packages/ui-components/src/components/SideBarTittle/utils.ts rename packages/{plugins/ui-theme => ui-components}/src/components/TextField/TextField.test.tsx (84%) rename packages/{plugins/ui-theme => ui-components}/src/components/TextField/TextField.tsx (92%) rename packages/{plugins/ui-theme => ui-components}/src/components/TextField/__snapshots__/TextField.test.tsx.snap (100%) rename packages/{plugins/ui-theme => ui-components}/src/components/TextField/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/UpLinks/UpLinks.test.tsx (70%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/UpLinks/UpLinks.tsx (69%) create mode 100644 packages/ui-components/src/components/UpLinks/Uplinks.stories.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/UpLinks/__snapshots__/UpLinks.test.tsx.snap (99%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/UpLinks/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/UpLinks/styles.ts (78%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx => ui-components/src/components/Versions/HistoryList.tsx} (55%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsTagList.tsx => ui-components/src/components/Versions/TagList.tsx} (72%) create mode 100644 packages/ui-components/src/components/Versions/Versions.test.tsx create mode 100644 packages/ui-components/src/components/Versions/Versions.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailSidebar/Repository => ui-components/src/components/Versions}/__partials__/data.json (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Versions/index.ts (100%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer => ui-components/src/components}/Versions/styles.ts (63%) rename packages/{plugins/ui-theme/src/pages/Version/version-config.ts => ui-components/src/components/Versions/types.ts} (85%) create mode 100644 packages/ui-components/src/hooks/index.ts rename packages/{plugins/ui-theme => ui-components}/src/hooks/useLocalStorage.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/hooks/useOnClickOutside.ts (96%) create mode 100644 packages/ui-components/src/layouts/Version/Version.stories.tsx rename packages/{plugins/ui-theme/src/pages/Version/VersionLayout.tsx => ui-components/src/layouts/Version/Version.tsx} (71%) create mode 100644 packages/ui-components/src/layouts/Version/index.ts rename packages/{plugins/ui-theme/src/providers/config => ui-components/src/providers/AppConfigurationProvider}/AppConfigurationProvider.tsx (82%) rename packages/{plugins/ui-theme/src/providers/config => ui-components/src/providers/AppConfigurationProvider}/index.ts (100%) create mode 100644 packages/ui-components/src/providers/TranslatorProvider/TranslatorProvider.tsx create mode 100644 packages/ui-components/src/providers/TranslatorProvider/index.ts rename packages/{plugins/ui-theme/src/pages/Version/VersionContextProvider.tsx => ui-components/src/providers/VersionProvider/VersionProvider.tsx} (53%) create mode 100644 packages/ui-components/src/providers/VersionProvider/index.ts create mode 100644 packages/ui-components/src/providers/index.ts create mode 100644 packages/ui-components/src/sections/Detail/ContainerContent.tsx create mode 100644 packages/ui-components/src/sections/Detail/Detail.stories.tsx rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainer.test.tsx => ui-components/src/sections/Detail/Detail.test.tsx} (68%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainer.tsx => ui-components/src/sections/Detail/Detail.tsx} (55%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainerContentReadme.tsx => ui-components/src/sections/Detail/ReadmeSection.tsx} (86%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainerTabs.tsx => ui-components/src/sections/Detail/Tabs.tsx} (94%) rename packages/{plugins/ui-theme/src/pages/Version/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap => ui-components/src/sections/Detail/__snapshots__/Detail.test.tsx.snap} (98%) create mode 100644 packages/ui-components/src/sections/Detail/index.ts rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Footer/Footer.test.tsx (86%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Footer/Footer.tsx (90%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Footer/__snapshots__/Footer.test.tsx.snap (95%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Footer/index.ts (100%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Footer/styles.ts (95%) create mode 100644 packages/ui-components/src/sections/Header/Header.stories.tsx rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/Header.test.tsx (81%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/Header.tsx (84%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/HeaderGreetings.tsx (89%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/HeaderLeft.tsx (87%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/HeaderMenu.tsx (96%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/HeaderRight.tsx (87%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/HeaderSettingsDialog.tsx (96%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/HeaderToolTip.tsx (100%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/HeaderToolTipIcon.tsx (100%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/LanguageSwitch.tsx (74%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/RegistryInfoContent/RegistryInfoContent.test.tsx (81%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/RegistryInfoContent/RegistryInfoContent.tsx (85%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/RegistryInfoContent/index.ts (100%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/RegistryInfoContent/styles.ts (84%) create mode 100644 packages/ui-components/src/sections/Header/RegistryInfoDialog/RegistryInfoDialog.tsx create mode 100644 packages/ui-components/src/sections/Header/RegistryInfoDialog/index.ts create mode 100644 packages/ui-components/src/sections/Header/RegistryInfoDialog/styles.ts create mode 100644 packages/ui-components/src/sections/Header/RegistryInfoDialog/types.ts rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/index.ts (100%) rename packages/{plugins/ui-theme/src/App => ui-components/src/sections}/Header/styles.ts (91%) create mode 100644 packages/ui-components/src/sections/Home/Home.stories.tsx rename packages/{plugins/ui-theme/src/pages/home => ui-components/src/sections/Home}/Home.tsx (79%) create mode 100644 packages/ui-components/src/sections/Home/index.ts create mode 100644 packages/ui-components/src/sections/SideBar/Sidebar.stories.tsx create mode 100644 packages/ui-components/src/sections/SideBar/Sidebar.test.tsx create mode 100644 packages/ui-components/src/sections/SideBar/Sidebar.tsx create mode 100644 packages/ui-components/src/sections/SideBar/index.ts create mode 100644 packages/ui-components/src/sections/index.ts rename packages/{plugins/ui-theme/src/providers/API => ui-components/src/store}/api.test.ts (100%) rename packages/{plugins/ui-theme/src/providers/API => ui-components/src/store}/api.ts (98%) create mode 100644 packages/ui-components/src/store/index.ts rename packages/{plugins/ui-theme => ui-components}/src/store/models/configuration.ts (70%) rename packages/{plugins/ui-theme => ui-components}/src/store/models/download.ts (95%) rename packages/{plugins/ui-theme => ui-components}/src/store/models/index.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/store/models/login.ts (94%) rename packages/{plugins/ui-theme => ui-components}/src/store/models/manifest.ts (91%) rename packages/{plugins/ui-theme => ui-components}/src/store/models/packages.ts (95%) rename packages/{plugins/ui-theme => ui-components}/src/store/models/search.ts (98%) rename packages/{plugins/ui-theme/src/providers/API => ui-components/src/store}/storage.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/store/store.ts (100%) create mode 100644 packages/ui-components/src/test/i18n-config.ts create mode 100644 packages/ui-components/src/test/test-react-testing-library.tsx create mode 100644 packages/ui-components/src/types/index.d.ts create mode 100644 packages/ui-components/src/types/index.ts create mode 100644 packages/ui-components/src/types/packageMeta.ts create mode 100644 packages/ui-components/src/utils/.eslintrc create mode 100644 packages/ui-components/src/utils/__partials__/packageMeta.ts rename packages/{plugins/ui-theme => ui-components}/src/utils/cli-utils.test.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/utils/cli-utils.ts (100%) create mode 100644 packages/ui-components/src/utils/index.ts rename packages/{plugins/ui-theme/src/App => ui-components/src}/utils/loadable.tsx (100%) create mode 100644 packages/ui-components/src/utils/routes.ts rename packages/{plugins/ui-theme => ui-components}/src/utils/url.test.ts (100%) rename packages/{plugins/ui-theme => ui-components}/src/utils/url.ts (98%) rename packages/{plugins/ui-theme/src/utils/package.test.ts => ui-components/src/utils/utils.test.ts} (90%) rename packages/{plugins/ui-theme/src/utils/package.ts => ui-components/src/utils/utils.ts} (88%) diff --git a/.changeset/orange-cows-pull.md b/.changeset/orange-cows-pull.md new file mode 100644 index 000000000..6799244a8 --- /dev/null +++ b/.changeset/orange-cows-pull.md @@ -0,0 +1,27 @@ +--- +'@verdaccio/types': major +'@verdaccio/ui-theme': major +'@verdaccio/ui-components': major +--- + +feat(web): components for custom user interfaces + +Provides a package that includes all components from the user interface, instead being embedded at the `@verdaccio/ui-theme` package. + +``` +npm i -D @verdaccio/ui-components +``` + +The package contains + +- Components +- Providers +- Redux Storage +- Layouts (precomposed layouts ready to use) +- Custom Material Theme + +The `@verdaccio/ui-theme` will consume this package and will use only those are need it. + +> Prerequisites are using Redux, Material-UI and Translations with `i18next`. + +Users could have their own Material UI theme and build custom layouts, adding new features without the need to modify the default project. diff --git a/.eslintignore b/.eslintignore index f090083b6..b9cd87714 100644 --- a/.eslintignore +++ b/.eslintignore @@ -14,3 +14,7 @@ test/functional/store/* docker-examples/**/lib/**/*.js test/cli/e2e-yarn4/bin/yarn-4.0.0-rc.14.cjs yarn.js +# storybook +packages/ui-components/storybook-static +dist.js +bundle.js diff --git a/.github/workflows/ui-components.yml b/.github/workflows/ui-components.yml new file mode 100644 index 000000000..0bdd9a734 --- /dev/null +++ b/.github/workflows/ui-components.yml @@ -0,0 +1,74 @@ +name: UI Components + +on: + pull_request: + paths: + - .github/workflows/ui-components.yml + - 'packages/ui-components/**' + - 'package.json' + - 'pnpm-workspace.yaml' + - 'pnpm-lock.yaml' + +permissions: + contents: read # to fetch code (actions/checkout) + +jobs: + deploy: + permissions: + contents: read # to fetch code (actions/checkout) + deployments: write + pull-requests: write # to comment on pull-requests + + runs-on: ubuntu-latest + env: + NODE_OPTIONS: --max_old_space_size=4096 + steps: + - uses: actions/checkout@755da8c3cf115ac066823e79a1e1788f8940201b # tag=v3 + + - name: Use Node + uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3 + with: + node-version-file: '.nvmrc' + + - name: Cache pnpm modules + uses: actions/cache@c1a5de879eb890d062a85ee0252d6036480b1fe2 # v3 + env: + cache-name: cache-pnpm-modules + with: + path: ~/.pnpm-store + key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}- + + - name: Install pnpm + run: | + corepack enable + corepack prepare --activate pnpm@6.32.15 + - name: Install + run: pnpm recursive install --frozen-lockfile + - name: Build storybook + run: pnpm ui:storybook:build + - name: Copy public content + # the msw.js worker is need it at the storybook-static folder in production + run: cp -R packages/ui-components/public/* packages/ui-components/storybook-static + - name: 🔥 Deploy Production UI Netlify + if: (github.event_name == 'push' && github.ref == 'refs/heads/master') || github.event_name == 'workflow_dispatch' + uses: verdaccio/action-netlify-deploy@1a53f098745bf78555d11b436f5ee3af87e6b566 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }} + netlify-site-id: ${{ secrets.NETLIFY_UI_SITE_ID }} + build-dir: './packages/ui-components/storybook-static' + - name: 🤖 Deploy Preview UI Components Netlify + if: github.repository == 'verdaccio/verdaccio' + uses: verdaccio/action-netlify-deploy@1a53f098745bf78555d11b436f5ee3af87e6b566 + id: netlify_preview_ui + with: + draft: true + comment-on-pull-request: true + github-deployment-is-production: false + github-deployment-is-transient: true + github-token: ${{ secrets.GITHUB_TOKEN }} + netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }} + netlify-site-id: ${{ secrets.NETLIFY_UI_SITE_ID }} + build-dir: './packages/ui-components/storybook-static' diff --git a/.gitignore b/.gitignore index 1685df997..1a65dedf8 100644 --- a/.gitignore +++ b/.gitignore @@ -41,13 +41,6 @@ packages/plugins/ui-theme/static # CI Pnpm cache .pnpm-store/ -# benchmark -api-results.json -hyper-results.json -hyper-results*.json -api-results*.json -.clinic/ - #docs website/docs/api/**/*.md website/docs/api/**/*.yml @@ -57,3 +50,6 @@ packages/**/docs # cypress e2e/ui/cypress/videos/**/* e2e/ui/cypress/screenshots/**/* + +# storybook +packages/ui-components/storybook-static diff --git a/.prettierignore b/.prettierignore index 6193ba8ad..f3714612e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -36,3 +36,4 @@ packages/plugins/ui-theme/static/ test/cli/e2e-yarn4/bin/yarn-4.0.0-rc.14.cjs yarn.js website/docs/api/* +packages/ui-components/storybook-static/* diff --git a/package.json b/package.json index 5205c8708..b58d3258c 100644 --- a/package.json +++ b/package.json @@ -45,12 +45,11 @@ "@crowdin/cli": "3.9.1", "@emotion/react": "11.10.5", "@emotion/styled": "11.10.5", - "@mui/material": "5.11.1", + "@testing-library/dom": "8.19.1", + "@testing-library/jest-dom": "5.16.5", + "@testing-library/react": "12.1.4", "react": "18.2.0", "react-dom": "18.2.0", - "@mui/icons-material": "5.11.0", - "@mui/styles": "5.11.1", - "@mui/system": "5.11.1", "@trivago/prettier-plugin-sort-imports": "3.4.0", "@types/async": "3.2.16", "@types/express": "4.17.15", @@ -150,6 +149,8 @@ "ci:publish": "changeset publish", "ts:ref": "update-ts-references --discardComments", "website": "pnpm build --filter ...@verdaccio/website", + "ui:storybook:build": "pnpm build-storybook --filter ...@verdaccio/ui-components", + "ui:storybook": "pnpm storybook --filter ...@verdaccio/ui-components", "translations": "local-crowdin-api translations", "crowdin:upload": "crowdin upload sources --auto-update --config ./crowdin.yaml", "crowdin:download": "crowdin download --verbose --config ./crowdin.yaml", diff --git a/packages/core/types/src/configuration.ts b/packages/core/types/src/configuration.ts index 3737a33d0..a6b0eb94d 100644 --- a/packages/core/types/src/configuration.ts +++ b/packages/core/types/src/configuration.ts @@ -126,7 +126,7 @@ export type TemplateUIOptions = { showDownloadTarball?: boolean; showRaw?: boolean; base: string; - primaryColor?: string; + primaryColor: string; version?: string; logoURI?: string; flags: FlagsConfig; diff --git a/packages/plugins/ui-theme/jest/jest.config.js b/packages/plugins/ui-theme/jest/jest.config.js index 6c52a4758..c3aba92b7 100644 --- a/packages/plugins/ui-theme/jest/jest.config.js +++ b/packages/plugins/ui-theme/jest/jest.config.js @@ -35,8 +35,6 @@ module.exports = Object.assign({}, config, { // note: this section has to be on sync with webpack configuration 'verdaccio-ui/components/(.*)': '/src/components/$1', 'verdaccio-ui/utils/(.*)': '/src/utils/$1', - 'verdaccio-ui/providers/(.*)': '/src/providers/$1', - 'verdaccio-ui/design-tokens/(.*)': '/src/design-tokens/$1', 'react-markdown': '/src/__mocks__/react-markdown.tsx', 'remark-*': '/src/__mocks__/remark-plugin.ts', }, diff --git a/packages/plugins/ui-theme/package.json b/packages/plugins/ui-theme/package.json index 9a61d15ad..a63b2dc78 100644 --- a/packages/plugins/ui-theme/package.json +++ b/packages/plugins/ui-theme/package.json @@ -12,16 +12,12 @@ }, "homepage": "https://verdaccio.org", "main": "index.js", - "peerDependencies": { + "devDependencies": { "@emotion/react": "11.10.5", "@emotion/styled": "11.10.5", - "@mui/material": "5.11.1", - "react": "18.2.0", - "react-dom": "18.2.0", "@mui/icons-material": "5.11.0", - "@mui/styles": "5.11.1" - }, - "devDependencies": { + "@mui/styles": "5.11.1", + "@mui/material": "5.11.1", "@emotion/babel-plugin": "11.10.5", "@emotion/css": "11.10.5", "@emotion/jest": "11.10.5", @@ -34,6 +30,7 @@ "@verdaccio/node-api": "workspace:6.0.0-6-next.52", "@verdaccio/ui-components": "workspace:2.0.0-alpha.0", "@verdaccio/types": "workspace:*", + "normalize.css": "8.0.1", "babel-loader": "8.3.0", "babel-plugin-dynamic-import-node": "2.3.3", "country-flag-icons": "1.5.5", @@ -53,7 +50,6 @@ "msw": "0.49.2", "mutationobserver-shim": "0.3.7", "node-mocks-http": "1.12.1", - "normalize.css": "8.0.1", "optimize-css-assets-webpack-plugin": "6.0.1", "ora": "5.4.1", "dompurify": "2.4.1", diff --git a/packages/plugins/ui-theme/src/App/App.test.tsx b/packages/plugins/ui-theme/src/App/App.test.tsx index 56ad51dec..fe8c8ac05 100644 --- a/packages/plugins/ui-theme/src/App/App.test.tsx +++ b/packages/plugins/ui-theme/src/App/App.test.tsx @@ -1,30 +1,9 @@ import React from 'react'; import { renderWithStore, screen } from 'verdaccio-ui/utils/test-react-testing-library'; -import { store } from '../store'; -import App from './App'; +import { store } from '@verdaccio/ui-components'; -jest.mock('verdaccio-ui/utils/storage', () => { - class LocalStorageMock { - private store: Record; - public constructor() { - this.store = {}; - } - public clear(): void { - this.store = {}; - } - public getItem(key: string): unknown { - return this.store[key] || null; - } - public setItem(key: string, value: string): void { - this.store[key] = value.toString(); - } - public removeItem(key: string): void { - delete this.store[key]; - } - } - return new LocalStorageMock(); -}); +import App from './App'; // force the windows to expand to display items // https://github.com/bvaughn/react-virtualized/issues/493#issuecomment-640084107 @@ -40,6 +19,7 @@ describe('', () => { }); test('should not display the Header component', () => { + // @ts-ignore window.__VERDACCIO_BASENAME_UI_OPTIONS = { showFooter: false, }; diff --git a/packages/plugins/ui-theme/src/App/App.tsx b/packages/plugins/ui-theme/src/App/App.tsx index 8f77e44b3..3eb4aab40 100644 --- a/packages/plugins/ui-theme/src/App/App.tsx +++ b/packages/plugins/ui-theme/src/App/App.tsx @@ -1,18 +1,33 @@ +/* eslint-disable react/jsx-pascal-case */ + /* eslint-disable react/jsx-max-depth */ import styled from '@emotion/styled'; import Box from '@mui/material/Box'; +import FlagsIcon from 'country-flag-icons/react/3x2'; import React, { StrictMode, Suspense, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import ReactMarkdown from 'react-markdown'; import { Router } from 'react-router-dom'; -import Loading from 'verdaccio-ui/components/Loading'; -import StyleBaseline from 'verdaccio-ui/design-tokens/StyleBaseline'; -import loadDayJSLocale from 'verdaccio-ui/design-tokens/load-dayjs-locale'; -import { Theme } from 'verdaccio-ui/design-tokens/theme'; -import { useConfig } from 'verdaccio-ui/providers/config'; +import remarkGfm from 'remark-gfm'; -import '../i18n/config'; +import { + Footer, + Header, + HeaderInfoDialog, + Loading, + Theme, + TranslatorProvider, + useConfig, +} from '@verdaccio/ui-components'; + +import Contributors from '../components/Contributors'; +import Support from '../components/Support'; +import about from '../components/about.md'; +import license from '../components/license.md'; +import i18n from '../i18n/config'; +import { listLanguages } from '../i18n/enabledLanguages'; +import loadDayJSLocale from '../i18n/load-dayjs-locale'; import AppRoute, { history } from './AppRoute'; -import Footer from './Footer'; -import Header from './Header'; const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({ backgroundColor: theme?.palette.background.default, @@ -27,6 +42,45 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({ }, })); +const Flags = styled('span')<{ theme?: Theme }>(() => ({ + width: '25px', +})); + +function CustomInfoDialog({ onCloseDialog, title, isOpen }) { + const { t } = useTranslation(); + return ( + + {about} + + + ), + }, + { element: {license} }, + { element: }, + ]} + tabs={[ + { label: t('about') }, + { label: t('dialog.license') }, + { + label: '', + icon: ( + + + + ), + }, + ]} + /> + ); +} + const App: React.FC = () => { const { configOptions } = useConfig(); @@ -35,20 +89,23 @@ const App: React.FC = () => { }, []); return ( - }> - - - <> + + }> + -
+
{configOptions.showFooter &&