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

package/src/components/Versions/__partials__/deprecated-versions.json

@@ -0,0 +1,175 @@
+{
+  "versions": {
+    "0.0.1": {
+      "name": "@verdaccio/local-storage",
+      "version": "0.0.1",
+      "description": "local storage implementation",
+      "main": "lib/index.js",
+      "scripts": {
+        "test": "npm run lint && mocha --require babel-polyfill  --compilers js:babel-core/register ./test/**/*.spec.js",
+        "lint": "eslint .",
+        "flow": "flow",
+        "build": "babel src/ --out-dir lib/ --copy-files",
+        "cover": "cross-env NODE_ENV=test nyc npm t"
+      },
+      "dependencies": {
+        "@verdaccio/file-locking": "^0.0.3",
+        "@verdaccio/streams": "^0.0.2",
+        "async": "2.5.0",
+        "http-errors": "1.4.0",
+        "lodash": "4.17.4",
+        "mkdirp": "0.5.1"
+      },
+      "devDependencies": {
+        "@verdaccio/types": "0.0.2",
+        "babel-cli": "6.24.1",
+        "babel-core": "6.25.0",
+        "babel-eslint": "^7.2.3",
+        "babel-plugin-istanbul": "4.1.4",
+        "babel-polyfill": "6.23.0",
+        "babel-preset-es2015": "6.24.1",
+        "babel-preset-es2015-node4": "2.1.0",
+        "babel-preset-flow": "6.23.0",
+        "babel-plugin-transform-inline-imports-commonjs": "1.0.0",
+        "babel-plugin-array-includes": "2.0.3",
+        "babel-plugin-transform-runtime": "6.4.3",
+        "cross-env": "5.0.5",
+        "eslint": "4.4.1",
+        "eslint-config-google": "0.9.1",
+        "eslint-plugin-flowtype": "2.35.0",
+        "flow-bin": "0.52.0",
+        "mocha": "3.5.0",
+        "nyc": "11.1.0"
+      },
+      "nyc": {
+        "include": ["src/**/*.js"],
+        "all": true,
+        "cache": true,
+        "sourceMap": false,
+        "instrument": false,
+        "report-dir": "./tests-report",
+        "reporter": ["text", "html"]
+      },
+      "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+      },
+      "keywords": ["streams"],
+      "author": {
+        "name": "Juan Picado",
+        "email": "juanpicado19@gmail.com"
+      },
+      "private": false,
+      "license": "MIT",
+      "gitHead": "e7e4ea74f20331dfde0a7133a02b5b95d68696a9",
+      "_id": "@verdaccio/local-storage@0.0.1",
+      "_npmVersion": "5.3.0",
+      "_nodeVersion": "8.2.1",
+      "_npmUser": {
+        "name": "jotadeveloper",
+        "email": "juanpicado19@gmail.com"
+      },
+      "dist": {
+        "integrity": "sha512-J7qeK3r6jbaMOf4mBIqL1bAdb7Iwb+mC4ZaE9PUE2TctzXSkRRnk2M33zWGhZV0ziEPGAF40wC76wWex2GvXeA==",
+        "shasum": "9c71cbeeb922b35efc1b31949d0afa6aac97e9b6",
+        "tarball": "http://localhost:4872/@verdaccio%2flocal-storage/-/local-storage-0.0.1.tgz"
+      },
+      "maintainers": [
+        {
+          "name": "jotadeveloper",
+          "email": "juanpicado19@gmail.com"
+        }
+      ],
+      "_npmOperationalInternal": {
+        "host": "s3://npm-registry-packages",
+        "tmp": "tmp/local-storage-0.0.1.tgz_1502536792670_0.3513342353980988"
+      },
+      "directories": {}
+    },
+    "0.0.2": {
+      "deprecated": "this package is deprecated",
+      "name": "@verdaccio/local-storage",
+      "version": "0.0.2",
+      "description": "local storage implementation",
+      "main": "lib/index.js",
+      "scripts": {
+        "test": "npm run lint && mocha --require babel-polyfill  --compilers js:babel-core/register ./test/**/*.spec.js",
+        "lint": "eslint .",
+        "flow": "flow",
+        "build": "babel src/ --out-dir lib/ --copy-files",
+        "cover": "cross-env NODE_ENV=test nyc npm t"
+      },
+      "dependencies": {
+        "@verdaccio/file-locking": "^0.0.3",
+        "@verdaccio/streams": "^0.0.2",
+        "async": "2.5.0",
+        "http-errors": "1.4.0",
+        "lodash": "4.17.4",
+        "mkdirp": "0.5.1"
+      },
+      "devDependencies": {
+        "@verdaccio/types": "0.0.2",
+        "babel-cli": "6.24.1",
+        "babel-core": "6.25.0",
+        "babel-eslint": "^7.2.3",
+        "babel-plugin-istanbul": "4.1.4",
+        "babel-polyfill": "6.23.0",
+        "babel-preset-es2015": "6.24.1",
+        "babel-preset-es2015-node4": "2.1.0",
+        "babel-preset-flow": "6.23.0",
+        "babel-plugin-transform-inline-imports-commonjs": "1.0.0",
+        "babel-plugin-array-includes": "2.0.3",
+        "babel-plugin-transform-runtime": "6.4.3",
+        "cross-env": "5.0.5",
+        "eslint": "4.4.1",
+        "eslint-config-google": "0.9.1",
+        "eslint-plugin-flowtype": "2.35.0",
+        "flow-bin": "0.52.0",
+        "mocha": "3.5.0",
+        "nyc": "11.1.0"
+      },
+      "nyc": {
+        "include": ["src/**/*.js"],
+        "all": true,
+        "cache": true,
+        "sourceMap": false,
+        "instrument": false,
+        "report-dir": "./tests-report",
+        "reporter": ["text", "html"]
+      },
+      "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+      },
+      "keywords": ["streams"],
+      "author": {
+        "name": "Juan Picado",
+        "email": "juanpicado19@gmail.com"
+      },
+      "private": false,
+      "license": "MIT",
+      "gitHead": "626ea013ee810da9115550e0a60f44aa3d08e9a0",
+      "_id": "@verdaccio/local-storage@0.0.2",
+      "_npmVersion": "5.3.0",
+      "_nodeVersion": "8.2.1",
+      "_npmUser": {
+        "name": "jotadeveloper",
+        "email": "juanpicado19@gmail.com"
+      },
+      "dist": {
+        "integrity": "sha512-Su0cQpLAaBab3qekpcHO+J/JCfoznTuU0P7e5q9T7R2trGVobYXvsTiIB/usQNmDr2e+1N6iBhMst7Uy+231ag==",
+        "shasum": "fe79ad6f9ceb631857618038486f729098e7b31b",
+        "tarball": "http://localhost:4872/@verdaccio%2flocal-storage/-/local-storage-0.0.2.tgz"
+      },
+      "maintainers": [
+        {
+          "name": "jotadeveloper",
+          "email": "juanpicado19@gmail.com"
+        }
+      ],
+      "_npmOperationalInternal": {
+        "host": "s3://npm-registry-packages",
+        "tmp": "tmp/local-storage-0.0.2.tgz_1502611253150_0.21545960218645632"
+      },
+      "directories": {}
+    }
+  }
+}

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/SideBarTitle';
+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,74 @@
+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,
+    hideDeprecatedVersions: false,
+    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,59 @@
+import React, {
+  FunctionComponent,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import useLocalStorage from '../../hooks/useLocalStorage';
+
+type PersistenceSettingsProps = {
+  isGlobal?: boolean;
+  yarnModern: boolean;
+};
+
+const defaultValues: PersistenceSettingsProps = {
+  isGlobal: false,
+  yarnModern: 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();
+});