@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next.1

package/src/components/Versions/index.ts

@@ -0,0 +1 @@
+export { default } from './Versions';

package/src/components/Versions/styles.ts

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { default as MuiListItemText } from '@mui/material/ListItemText';
+
+import { Theme } from '../../Theme';
+
+export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  flex: '1 1 auto',
+  borderBottom: `1px dotted ${
+    theme?.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
+  } `,
+  whiteSpace: 'nowrap',
+  height: '0.5em',
+  margin: '0 16px',
+}));
+
+export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
+  flex: 'none',
+  opacity: 0.6,
+  color: theme?.palette.mode == 'light' ? theme?.palette.black : theme?.palette.white,
+}));

package/src/components/Versions/types.ts

@@ -0,0 +1,17 @@
+import { PackageMetaInterface } from '../../types/packageMeta';
+
+export interface DetailContextProps {
+  hasNotBeenFound: boolean;
+  isLoading: boolean;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export interface VersionPageConsumerProps {
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useLocalStorage } from './useLocalStorage';
+export { default as useOnClickOutside } from './useOnClickOutside';

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+
+/**
+* 
+*  @example
+    ```jsx
+    const [isDarkModeStorage, setIsDarkMode] = useLocalStorage('darkMode', isDarkModeDefault);
+   ```
+
+   based on https://usehooks.com/useLocalStorage/
+   @category Hooks
+ */
+const useLocalStorage = <V>(key: string, initialValue: V) => {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error: any) {
+      // If error also return initialValue
+      // eslint-disable-next-line no-console
+      console.error('An error occurred getting a sessionStorage key', error);
+      return initialValue;
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: V) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error: any) {
+      // eslint-disable-next-line no-console
+      console.error('An error occurred writing to sessionStorage', error);
+    }
+  };
+
+  return [storedValue, setValue];
+};
+
+export default useLocalStorage;

package/src/hooks/useOnClickOutside.ts

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+
+/**
+* 
+*  @example
+   based on https://usehooks.com/useOnClickOutside/
+   @category Hooks
+ */
+function useOnClickOutside<R extends HTMLElementTagNameMap[keyof HTMLElementTagNameMap]>(
+  ref: React.RefObject<R>,
+  handler: (event: MouseEvent | TouchEvent) => void
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}
+
+export default useOnClickOutside;

package/src/index.ts

@@ -0,0 +1,60 @@
+export { default as CopyClipboard, copyToClipBoardUtility } from './components/CopyClipboard';
+export * from './components/CopyClipboard';
+export { Link } from './components/Link';
+export { default as ActionBar } from './components/ActionBar';
+export { default as Author } from './components/Author';
+export { default as Dependencies } from './components/Dependencies';
+export { default as Deprecated } from './components/Deprecated';
+export { default as Developers } from './components/Developers';
+export { default as Distribution } from './components/Distribution';
+export { default as Engines } from './components/Engines';
+export { default as FundButton } from './components/FundButton';
+export { default as Heading } from './components/Heading';
+export * as Icons from './components/Icons';
+export { default as Install } from './components/Install';
+export { default as RawViewer } from './components/RawViewer';
+export { default as Readme } from './components/Readme';
+export { default as SideBarTitle } from './components/SideBarTittle';
+export { default as UpLinks } from './components/UpLinks';
+export { default as Versions } from './components/Versions';
+export { default as TextField } from './components/TextField';
+export { default as Label } from './components/Label';
+export { default as Logo } from './components/Logo';
+export { default as MenuItem } from './components/MenuItem';
+export { default as NotFound } from './components/NotFound';
+export { default as LoginDialog } from './components/LoginDialog';
+export { default as Search } from './components/Search';
+export { default as HeaderInfoDialog } from './components/HeaderInfoDialog';
+export { default as Loading } from './components/Loading';
+export { default as Package } from './components/Package';
+export { default as Help } from './components/Help';
+export { default as PackageList } from './components/PackageList';
+export { default as ErrorBoundary } from './components/ErrorBoundary';
+// sections
+export { default as SideBar } from './sections/SideBar';
+export { default as Detail } from './sections/Detail';
+export { default as Header } from './sections/Header';
+export { default as Home } from './sections/Home';
+export { default as Footer } from './sections/Footer';
+
+// layout
+export { VersionLayout } from './layouts/Version';
+
+// providers
+export { default as AppConfigurationProvider } from './providers/AppConfigurationProvider';
+export { default as PersistenceSettingProvider } from './providers/PersistenceSettingProvider';
+
+export * from './providers/AppConfigurationProvider';
+export { TranslatorProvider, useLanguage, LanguageItem } from './providers/TranslatorProvider';
+export * from './providers/TranslatorProvider';
+export { VersionProvider } from './providers/VersionProvider';
+export * from './providers/VersionProvider';
+
+// utils
+export * from './utils';
+export { loadable, Route } from './utils';
+// hooks
+export * from './hooks';
+// others
+export * from './Theme';
+export { store, api, RootState, Dispatch, LoginError, LoginBody, LoginResponse } from './store';

package/src/layouts/Version/Version.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+
+import { VersionProvider } from '../../providers';
+import VersionLayout from './Version';
+
+const meta: Meta<typeof VersionLayout> = {
+  title: 'Layout/Version',
+  component: VersionLayout,
+};
+
+export default meta;
+type Story = StoryObj<typeof VersionLayout>;
+
+export const Primary: Story = {
+  name: 'Storybook',
+  render: () => {
+    return (
+      <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+        <Route exact={true} path="/-/web/detail/:package">
+          <VersionProvider>
+            <VersionLayout />
+          </VersionProvider>
+        </Route>
+      </MemoryRouter>
+    );
+  },
+};
+
+export const jQuery: Story = {
+  name: 'jQuery',
+  render: () => {
+    return (
+      <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
+        <Route exact={true} path="/-/web/detail/:package">
+          <VersionProvider>
+            <VersionLayout />
+          </VersionProvider>
+        </Route>
+      </MemoryRouter>
+    );
+  },
+};

package/src/layouts/Version/Version.tsx

@@ -0,0 +1,19 @@
+import Grid from '@mui/material/Grid';
+import React from 'react';
+
+import { Detail, SideBar } from '../../sections';
+
+const VersionLayout: React.FC = () => {
+  return (
+    <Grid className={'container content'} container={true} data-testid="version-layout" spacing={0}>
+      <Grid item={true} md={8} xs={12}>
+        <Detail />
+      </Grid>
+      <Grid item={true} md={4} xs={12}>
+        <SideBar />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default VersionLayout;

package/src/layouts/Version/index.ts

@@ -0,0 +1 @@
+export { default as VersionLayout } from './Version';

package/src/providers/AppConfigurationProvider/AppConfigurationProvider.tsx

@@ -0,0 +1,73 @@
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+import merge from 'lodash/merge';
+import React, { FunctionComponent, createContext, useContext, useMemo, useState } from 'react';
+
+import { TemplateUIOptions } from '@verdaccio/types';
+
+import { PRIMARY_COLOR } from '../../Theme/colors';
+
+type ConfigProviderProps = {
+  configOptions: TemplateUIOptions;
+};
+
+const defaultValues: ConfigProviderProps = {
+  configOptions: {
+    // note: dark mode set as undefined by design
+    primaryColor: PRIMARY_COLOR,
+    pkgManagers: ['yarn', 'pnpm', 'npm'],
+    scope: '',
+    base: '',
+    flags: {},
+    login: true,
+    url_prefix: '',
+    showInfo: true,
+    showSettings: true,
+    showThemeSwitch: true,
+    showFooter: true,
+    showSearch: true,
+    showRaw: true,
+    showDownloadTarball: true,
+    title: 'Verdaccio',
+  },
+};
+
+function getConfiguration() {
+  const uiConfiguration = merge(
+    defaultValues.configOptions,
+    window?.__VERDACCIO_BASENAME_UI_OPTIONS
+  );
+
+  if (window?.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers) {
+    uiConfiguration.pkgManagers = window?.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers;
+  }
+
+  if (isNil(uiConfiguration.primaryColor) || isEmpty(uiConfiguration.primaryColor)) {
+    uiConfiguration.primaryColor = PRIMARY_COLOR;
+  }
+
+  return uiConfiguration;
+}
+
+const AppConfigurationContext = createContext<ConfigProviderProps>(defaultValues);
+
+const AppConfigurationProvider: FunctionComponent<{ children: React.ReactElement<any> }> = ({
+  children,
+}) => {
+  const [configOptions] = useState<TemplateUIOptions>(getConfiguration());
+
+  const value = useMemo(
+    () => ({
+      configOptions,
+    }),
+    [configOptions]
+  );
+
+  return (
+    <AppConfigurationContext.Provider value={value}>{children}</AppConfigurationContext.Provider>
+  );
+};
+
+export default AppConfigurationProvider;
+
+export const useConfig = () => useContext(AppConfigurationContext);

package/src/providers/AppConfigurationProvider/index.ts

@@ -0,0 +1 @@
+export { default, useConfig } from './AppConfigurationProvider';

package/src/providers/PersistenceSettingProvider/PersistenceSettingProvider.tsx

@@ -0,0 +1,57 @@
+import React, {
+  FunctionComponent,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import useLocalStorage from '../../hooks/useLocalStorage';
+
+type PersistenceSettingsProps = {
+  isGlobal?: boolean;
+};
+
+const defaultValues: PersistenceSettingsProps = {
+  isGlobal: false,
+};
+
+const PersistenceSettingContext = createContext<any>(defaultValues);
+
+const PersistenceSettingProvider: FunctionComponent<{ children: React.ReactElement<any> }> = ({
+  children,
+}) => {
+  // get the initial state from the local storage
+  const [settings, setSettings] = useLocalStorage(`settings-ui-verdaccio`, {});
+
+  const [localSettings, setLocalSettings] = useState<PersistenceSettingsProps>(
+    settings ? settings : {}
+  );
+
+  const updateSettings = useCallback(
+    (newSettings: React.SetStateAction<PersistenceSettingsProps>) => {
+      setLocalSettings(newSettings);
+      setSettings(newSettings);
+    },
+    [setSettings]
+  );
+
+  const value = useMemo(
+    () => ({
+      localSettings: localSettings ? localSettings : {},
+      updateSettings,
+    }),
+    [localSettings, updateSettings]
+  );
+
+  return (
+    <PersistenceSettingContext.Provider value={value}>
+      {children}
+    </PersistenceSettingContext.Provider>
+  );
+};
+
+export default PersistenceSettingProvider;
+
+export const useSettings = () => useContext(PersistenceSettingContext);

package/src/providers/PersistenceSettingProvider/index.ts

@@ -0,0 +1 @@
+export { default, useSettings } from './PersistenceSettingProvider';

package/src/providers/TranslatorProvider/TranslatorProvider.spec.tsx

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/react';
+import i18n from 'i18next';
+import React from 'react';
+import { initReactI18next } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+
+import TranslatorProvider, { useLanguage } from './TranslatorProvider';
+
+i18n.use(initReactI18next).init({
+  lng: 'en-US',
+  fallbackLng: 'en-US',
+  whitelist: ['en-US'],
+  load: 'currentOnly',
+  react: {
+    useSuspense: false,
+  },
+  resources: {
+    'en-US': {
+      translation: {
+        'copy-to-clipboard': 'Copy to clipboard',
+        'author-anonymous': 'Anonymous',
+        'author-unknown': 'Unknown',
+      },
+    },
+  },
+  debug: false,
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+const RandomComponent = () => {
+  const { language } = useLanguage();
+  const { t } = useTranslation();
+  return (
+    <div>
+      <div>{language}</div>
+      <div>{t('copy-to-clipboard')}</div>
+    </div>
+  );
+};
+
+test('should provide translation', () => {
+  const mount = jest.fn();
+  const { getByText } = render(
+    <TranslatorProvider i18n={i18n} listLanguages={[]} onMount={mount}>
+      <RandomComponent />
+    </TranslatorProvider>
+  );
+  expect(getByText('en-US')).toBeInTheDocument();
+  expect(getByText('Copy to clipboard')).toBeInTheDocument();
+});

package/src/providers/TranslatorProvider/TranslatorProvider.tsx

@@ -0,0 +1,54 @@
+import { i18n } from 'i18next';
+import React, { FunctionComponent, createContext, useCallback, useContext, useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+
+import useLocalStorage from '../../hooks/useLocalStorage';
+
+export type TranslatorProviderProps = {
+  setLanguage: (lng: string) => void;
+  language: string;
+  listLanguages: LanguageItem[];
+};
+
+export type LanguageItem = { lng: string; icon: any; menuKey: string };
+
+const I18nTranslatorContext = createContext<TranslatorProviderProps>({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setLanguage: (_lng: string) => {},
+  language: 'en-US',
+  listLanguages: [],
+});
+
+/**
+ * Translator provider
+ * @category Provider
+ */
+const TranslatorProvider: FunctionComponent<{
+  children: React.ReactElement<any>;
+  i18n: i18n;
+  listLanguages: any;
+  onMount: () => {};
+}> = ({ children, onMount, i18n, listLanguages }) => {
+  const currentLanguage = i18n.languages?.[0];
+  const [language, setLanguage] = useLocalStorage<string>('language', currentLanguage);
+  const changeLanguage = useCallback(async () => {
+    await i18n.changeLanguage(language);
+  }, [i18n, language]);
+
+  useEffect(() => {
+    changeLanguage();
+    onMount();
+  }, [language, onMount, changeLanguage]);
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <I18nTranslatorContext.Provider value={{ setLanguage, language, listLanguages }}>
+        {children}
+      </I18nTranslatorContext.Provider>
+    </I18nextProvider>
+  );
+};
+
+export default TranslatorProvider;
+
+export const useLanguage = () => useContext(I18nTranslatorContext);

package/src/providers/TranslatorProvider/index.ts

@@ -0,0 +1 @@
+export { default as TranslatorProvider, useLanguage, LanguageItem } from './TranslatorProvider';

package/src/providers/VersionProvider/README.md

@@ -0,0 +1,22 @@
+# `VersionProvider`
+
+Use the hook `useVersion()` to get an object with:
+
+- packageMeta
+- packageName
+- packageVersion
+
+The provider must be
+
+```jsx
+function CustomComponent() {
+  const { packageMeta, packageName, packageVersion } = useVersion();
+  return <div />;
+}
+
+<Route path={Routes.PACKAGE}>
+  <VersionProvider>
+    <CustomComponent />
+  </VersionProvider>
+</Route>;
+```

package/src/providers/VersionProvider/VersionProvider.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+import { Route } from 'react-router-dom';
+
+import { Route as Routes, store } from '../../';
+import {
+  act,
+  cleanup,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
+import VersionProvider, { useVersion } from './VersionProvider';
+
+function CustomComponent() {
+  const { packageMeta, packageName, packageVersion } = useVersion();
+  return (
+    <div>
+      <div>{packageMeta?.latest?.license as string}</div>
+      <div>{packageName}</div>
+      <div>{packageVersion}</div>
+    </div>
+  );
+}
+
+/* eslint-disable react/jsx-no-bind*/
+describe('<Header /> component with logged in state', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should load data from the provider', async () => {
+    await act(async () => {
+      renderWithStore(
+        <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+          <Route path={Routes.PACKAGE}>
+            <VersionProvider>
+              <CustomComponent />
+            </VersionProvider>
+          </Route>
+        </MemoryRouter>,
+        store
+      );
+    });
+    await waitFor(() => screen.getByText('storybook'));
+    expect(screen.getByText('storybook')).toBeInTheDocument();
+    expect(screen.getByText('MIT')).toBeInTheDocument();
+  });
+});

package/src/providers/VersionProvider/VersionProvider.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { createContext, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { Dispatch, RootState } from '../../store/store';
+import { PackageMetaInterface } from '../../types/packageMeta';
+
+function getRouterPackageName(packageName: string, scope?: string): string {
+  if (scope) {
+    return `@${scope}/${packageName}`;
+  }
+
+  return packageName;
+}
+
+export interface DetailContextProps {
+  hasNotBeenFound: boolean;
+  isLoading: boolean;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export interface VersionPageConsumerProps {
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export const DetailContext = createContext<Partial<DetailContextProps>>({});
+
+interface Params {
+  scope?: string;
+  package: string;
+  version?: string;
+}
+
+/**
+* 
+*  @example
+    Once a component has been wrapped with `VersionProvider`, use the hook `useVersion()` to get an object with:
+    ```jsx
+    function CustomComponent() {
+      const { packageMeta, packageName, packageVersion } = useVersion();
+      return <div />;
+    }
+
+    <Route path={Routes.PACKAGE}>
+      <VersionProvider>
+        <CustomComponent />
+      </VersionProvider>
+    </Route>;
+    ```
+    On mount, the provider will fetch data from the store for specific package or version provided via router.
+   @category Provider
+ */
+const VersionProvider: React.FC<{ children: any }> = ({ children }) => {
+  const { version: packageVersion, package: pkgName, scope } = useParams<Params>();
+  // @ts-ignore
+  const { manifest, readme, packageName, hasNotBeenFound } = useSelector(
+    (state: RootState) => state.manifest
+  );
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+  const dispatch = useDispatch<Dispatch>();
+  useEffect(() => {
+    const packageName = getRouterPackageName(pkgName, scope);
+
+    dispatch.manifest.getManifest({ packageName, packageVersion });
+  }, [dispatch, packageVersion, pkgName, scope]);
+
+  return (
+    <DetailContext.Provider
+      value={{
+        packageMeta: manifest,
+        packageVersion,
+        readMe: readme,
+        packageName,
+        isLoading,
+        hasNotBeenFound,
+      }}
+    >
+      {children}
+    </DetailContext.Provider>
+  );
+};
+
+export default VersionProvider;
+
+export const useVersion = () => useContext(DetailContext);

package/src/providers/VersionProvider/index.ts

@@ -0,0 +1 @@
+export { default as VersionProvider, useVersion } from './VersionProvider';

package/src/providers/index.ts

@@ -0,0 +1,3 @@
+export * from './AppConfigurationProvider';
+export * from './VersionProvider';
+export * from './TranslatorProvider';