diff --git a/.changeset/orange-flowers-cover.md b/.changeset/orange-flowers-cover.md new file mode 100644 index 000000000..3e91c4b93 --- /dev/null +++ b/.changeset/orange-flowers-cover.md @@ -0,0 +1,43 @@ +--- +'@verdaccio/config': minor +'@verdaccio/types': minor +'@verdaccio/ui-theme': minor +--- + +feat: rework web header for mobile, add new settings and raw manifest button + +### New set of variables to hide features + +Add set of new variables that allow hide different parts of the UI, buttons, footer or download tarballs. _All are +enabled by default_. + +```yaml +# login: true <-- already exist but worth the reminder +# showInfo: true +# showSettings: true +# In combination with darkMode you can force specific theme +# showThemeSwitch: true +# showFooter: true +# showSearch: true +# showDownloadTarball: true +``` + +> If you disable `showThemeSwitch` and force `darkMode: true` the local storage settings would be +> ignored and force all themes to the one in the configuration file. + +Future could be extended to + +### Raw button to display manifest package + +A new experimental feature (enabled by default), button named RAW to be able navigate on the package manifest directly on the ui, kudos to [react-json-view](https://www.npmjs.com/package/react-json-view) that allows an easy integration, not configurable yet until get more feedback. + +```yaml +showRaw: true +``` + +#### Rework header buttons + +- The header has been rework, the mobile was not looking broken. +- Removed info button in the header and moved to a dialog +- Info dialog now contains more information about the project, license and the aid content for Ukrania now is inside of the info modal. +- Separate settings and info to avoid collapse too much info (for mobile still need some work) diff --git a/packages/config/src/conf/default.yaml b/packages/config/src/conf/default.yaml index 3e3a1e9b8..2b05e0503 100644 --- a/packages/config/src/conf/default.yaml +++ b/packages/config/src/conf/default.yaml @@ -20,6 +20,16 @@ web: # convert your UI to the dark side # darkMode: true # html_cache: true + # by default all features are displayed + # login: true + # showInfo: true + # showSettings: true + # In combination with darkMode you can force specific theme + # showThemeSwitch: true + # showFooter: true + # showSearch: true + # showRaw: true + # showDownloadTarball: true # HTML tags injected after manifest # scriptsBodyAfter: # - '' diff --git a/packages/config/src/conf/docker.yaml b/packages/config/src/conf/docker.yaml index 50efdde78..1de6b9b7f 100644 --- a/packages/config/src/conf/docker.yaml +++ b/packages/config/src/conf/docker.yaml @@ -26,6 +26,16 @@ web: # convert your UI to the dark side # darkMode: true # html_cache: true + # by default all features are displayed + # login: true + # showInfo: true + # showSettings: true + # In combination with darkMode you can force specific theme + # showThemeSwitch: true + # showFooter: true + # showSearch: true + # showRaw: true + # showDownloadTarball: true # HTML tags injected after manifest # scriptsBodyAfter: # - '' diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts index b76d45d78..ba301a746 100644 --- a/packages/core/types/index.d.ts +++ b/packages/core/types/index.d.ts @@ -43,6 +43,13 @@ declare module '@verdaccio/types' { // deprecated basename?: string; scope?: string; + showInfo?: boolean; + showSettings?: boolean; + showSearch?: boolean; + showFooter?: boolean; + showThemeSwitch?: boolean; + showDownloadTarball?: boolean; + showRaw?: boolean; base: string; primaryColor?: string; version?: string; diff --git a/packages/plugins/ui-theme/jest/jest.config.js b/packages/plugins/ui-theme/jest/jest.config.js index 266e64124..b891bca15 100644 --- a/packages/plugins/ui-theme/jest/jest.config.js +++ b/packages/plugins/ui-theme/jest/jest.config.js @@ -30,6 +30,7 @@ module.exports = Object.assign({}, config, { '\\.(png)$': '/jest/identity.js', '\\.(svg)$': '/jest/unit/empty.ts', '\\.(jpg)$': '/jest/unit/empty.ts', + '\\.(md)$': '/jest/unit/empty-string.ts', 'github-markdown-css': '/jest/identity.js', // note: this section has to be on sync with webpack configuration 'verdaccio-ui/components/(.*)': '/src/components/$1', diff --git a/packages/plugins/ui-theme/jest/unit/empty-string.ts b/packages/plugins/ui-theme/jest/unit/empty-string.ts new file mode 100644 index 000000000..43cd68370 --- /dev/null +++ b/packages/plugins/ui-theme/jest/unit/empty-string.ts @@ -0,0 +1 @@ +export default 'empty string module'; diff --git a/packages/plugins/ui-theme/package.json b/packages/plugins/ui-theme/package.json index 933ef6288..6c36cb893 100644 --- a/packages/plugins/ui-theme/package.json +++ b/packages/plugins/ui-theme/package.json @@ -57,6 +57,7 @@ "node-mocks-http": "1.11.0", "normalize.css": "8.0.1", "react-markdown": "8.0.0", + "react-json-view": "1.21.3", "remark-gfm": "3.0.1", "optimize-css-assets-webpack-plugin": "6.0.1", "ora": "5.4.1", @@ -71,6 +72,7 @@ "react-redux": "7.2.6", "redux": "4.1.2", "rimraf": "3.0.2", + "raw-loader": "4.0.2", "msw": "0.36.5", "style-loader": "3.3.1", "stylelint": "14.6.0", diff --git a/packages/plugins/ui-theme/src/App/App.test.tsx b/packages/plugins/ui-theme/src/App/App.test.tsx index ab27f5b66..04872b6d3 100644 --- a/packages/plugins/ui-theme/src/App/App.test.tsx +++ b/packages/plugins/ui-theme/src/App/App.test.tsx @@ -118,4 +118,19 @@ describe('', () => { expect(store.getState().packages.response).toHaveLength(1); }, 10000); }); + + describe('footer', () => { + test('should display the Header component', () => { + renderWithStore(, store); + expect(screen.getByTestId('footer')).toBeInTheDocument(); + }); + + test('should not display the Header component', () => { + window.__VERDACCIO_BASENAME_UI_OPTIONS = { + showFooter: false, + }; + renderWithStore(, store); + expect(screen.queryByTestId('footer')).toBeFalsy(); + }); + }); }); diff --git a/packages/plugins/ui-theme/src/App/App.tsx b/packages/plugins/ui-theme/src/App/App.tsx index 0ed5c5360..8c7326072 100644 --- a/packages/plugins/ui-theme/src/App/App.tsx +++ b/packages/plugins/ui-theme/src/App/App.tsx @@ -7,6 +7,7 @@ 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 '../i18n/config'; import AppRoute, { history } from './AppRoute'; @@ -27,10 +28,11 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({ })); const App: React.FC = () => { + const { configOptions } = useConfig(); + useEffect(() => { loadDayJSLocale(); }, []); - return ( }> @@ -42,7 +44,7 @@ const App: React.FC = () => { -