@verdaccio/ui-components 2.0.0-6-next.8 → 2.0.0-6-next.10

package/src/components/UpLinks/Uplinks.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { default as Uplinks } from '.';
 
 export default {
-  title: 'Uplinks',
+  title: 'Components/Detail/Uplinks',
 };
 
 export const UplinksAll: any = () => {

package/src/components/Versions/types.ts

@@ -1,7 +1,6 @@
 import { PackageMetaInterface } from '../../types/packageMeta';
 
 export interface DetailContextProps {
-  enableLoading: () => void;
   hasNotBeenFound: boolean;
   isLoading: boolean;
   packageMeta: PackageMetaInterface;
@@ -11,7 +10,6 @@ export interface DetailContextProps {
 }
 
 export interface VersionPageConsumerProps {
-  enableLoading: () => void;
   packageMeta: PackageMetaInterface;
   packageName: string;
   packageVersion?: string;

package/src/index.ts

@@ -42,6 +42,8 @@ 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';

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

@@ -1,29 +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';
 
-export default {
-  title: 'VersionLayout',
+const meta: Meta<typeof VersionLayout> = {
+  title: 'Layout/Version',
+  component: VersionLayout,
 };
 
-export const VersionLayoutStorybook: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
-    <Route exact={true} path="/-/web/detail/:package">
-      <VersionProvider>
-        <VersionLayout />
-      </VersionProvider>
-    </Route>
-  </MemoryRouter>
-);
+export default meta;
+type Story = StoryObj<typeof VersionLayout>;
 
-export const VersionLayoutJquery: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
-    <Route exact={true} path="/-/web/detail/:package">
-      <VersionProvider>
-        <VersionLayout />
-      </VersionProvider>
-    </Route>
-  </MemoryRouter>
-);
+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/providers/AppConfigurationProvider/AppConfigurationProvider.tsx

@@ -54,7 +54,6 @@ const AppConfigurationContext = createContext<ConfigProviderProps>(defaultValues
 const AppConfigurationProvider: FunctionComponent<{ children: React.ReactElement<any> }> = ({
   children,
 }) => {
-  // Read only
   const [configOptions] = useState<TemplateUIOptions>(getConfiguration());
 
   const value = useMemo(

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

@@ -1,3 +1,4 @@
+import { i18n } from 'i18next';
 import React, { FunctionComponent, createContext, useCallback, useContext, useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
 
@@ -24,7 +25,7 @@ const I18nTranslatorContext = createContext<TranslatorProviderProps>({
  */
 const TranslatorProvider: FunctionComponent<{
   children: React.ReactElement<any>;
-  i18n: any;
+  i18n: i18n;
   listLanguages: any;
   onMount: () => {};
 }> = ({ children, onMount, i18n, listLanguages }) => {

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

@@ -16,7 +16,7 @@ function CustomComponent() {
   const { packageMeta, packageName, packageVersion } = useVersion();
   return (
     <div>
-      <div>{packageMeta?.latest?.license}</div>
+      <div>{packageMeta?.latest?.license as string}</div>
       <div>{packageName}</div>
       <div>{packageVersion}</div>
     </div>

package/src/providers/VersionProvider/VersionProvider.tsx

@@ -15,7 +15,6 @@ function getRouterPackageName(packageName: string, scope?: string): string {
 }
 
 export interface DetailContextProps {
-  enableLoading: () => void;
   hasNotBeenFound: boolean;
   isLoading: boolean;
   packageMeta: PackageMetaInterface;
@@ -25,7 +24,6 @@ export interface DetailContextProps {
 }
 
 export interface VersionPageConsumerProps {
-  enableLoading: () => void;
   packageMeta: PackageMetaInterface;
   packageName: string;
   packageVersion?: string;

package/src/sections/Detail/Detail.stories.tsx

@@ -5,7 +5,7 @@ import { VersionProvider } from '../../providers';
 import Detail from './Detail';
 
 export default {
-  title: 'Detail',
+  title: 'Sections/Detail',
 };
 
 export const DetailStorybook: any = () => (

package/src/sections/Header/Header.stories.tsx

@@ -6,7 +6,7 @@ import { VersionProvider } from '../../providers';
 import Header from './Header';
 
 export default {
-  title: 'Header',
+  title: 'Sections/Header',
 };
 
 function CustomInfoDialog({ onCloseDialog, title, isOpen }) {

package/src/sections/Home/Home.stories.tsx

@@ -4,7 +4,7 @@ import { MemoryRouter, Route } from 'react-router';
 import Home from './Home';
 
 export default {
-  title: 'Home',
+  title: 'Sections/Home',
 };
 
 export const HomeDefault: any = () => (

package/src/sections/SideBar/Sidebar.stories.tsx

@@ -5,7 +5,7 @@ import { VersionProvider } from '../../providers';
 import DetailSidebar from './Sidebar';
 
 export default {
-  title: 'Sidebar',
+  title: 'Sections/Sidebar',
 };
 
 export const SidebarLatestPackage: any = () => (

package/src/sections/SideBar/Sidebar.test.tsx

@@ -43,7 +43,6 @@ const packageMeta = {
 // const detailContextValue = {
 //   packageName: 'foo',
 //   readMe: 'test',
-//   enableLoading: () => {},
 //   isLoading: false,
 //   hasNotBeenFound: false,
 //   packageMeta: ,

package/src/test/test-react-testing-library.tsx

@@ -6,6 +6,7 @@ import { Provider } from 'react-redux';
 
 import { ThemeProvider } from '../Theme';
 import AppConfigurationProvider from '../providers/AppConfigurationProvider';
+import PersistenceSettingProvider from '../providers/PersistenceSettingProvider';
 import { Store } from '../store/store';
 import i18nConfig from './i18n-config';
 
@@ -13,13 +14,15 @@ const renderWithStore = (ui: React.ReactElement<any>, store: Store) =>
   render(ui, {
     wrapper: ({ children }) => (
       <Provider store={store}>
-        <AppConfigurationProvider>
-          <StyledEngineProvider injectFirst={true}>
-            <ThemeProvider>
-              <I18nextProvider i18n={i18nConfig}>{children}</I18nextProvider>
-            </ThemeProvider>
-          </StyledEngineProvider>
-        </AppConfigurationProvider>
+        <PersistenceSettingProvider>
+          <AppConfigurationProvider>
+            <StyledEngineProvider injectFirst={true}>
+              <ThemeProvider>
+                <I18nextProvider i18n={i18nConfig}>{children}</I18nextProvider>
+              </ThemeProvider>
+            </StyledEngineProvider>
+          </AppConfigurationProvider>
+        </PersistenceSettingProvider>
       </Provider>
     ),
   });
@@ -27,11 +30,13 @@ const renderWithStore = (ui: React.ReactElement<any>, store: Store) =>
 const customRender = (node: React.ReactElement, ...options: any) => {
   return render(
     <AppConfigurationProvider>
-      <StyledEngineProvider injectFirst={true}>
-        <ThemeProvider>
-          <I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
-        </ThemeProvider>
-      </StyledEngineProvider>
+      <PersistenceSettingProvider>
+        <StyledEngineProvider injectFirst={true}>
+          <ThemeProvider>
+            <I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
+          </ThemeProvider>
+        </StyledEngineProvider>
+      </PersistenceSettingProvider>
     </AppConfigurationProvider>,
     ...options
   );

package/src/types/index.d.ts

@@ -0,0 +1,2 @@
+declare module 'unist';
+declare module 'hast';

package/src/types/packageMeta.ts

@@ -4,7 +4,7 @@ export type Latest = {
   author?: Author;
   deprecated?: string;
   name: string;
-  dist: {
+  dist?: {
     fileCount: number;
     unpackedSize: number;
     tarball?: string;
@@ -15,7 +15,7 @@ export type Latest = {
     pnpm?: string;
     yarn?: string;
   };
-  license?: Partial<LicenseInterface> | string;
+  license?: undefined | LicenseInterface | string;
   version: string;
   homepage?: string;
   bugs?: {
@@ -50,12 +50,12 @@ export interface Developer {
 
 interface Funding {
   type?: string;
-  url: string;
+  url?: string;
 }
 
-interface LicenseInterface {
-  type: string;
-  url: string;
+export interface LicenseInterface {
+  type?: string;
+  url?: string;
 }
 
 export interface DistTags {

package/src/utils/url.test.ts

@@ -16,6 +16,10 @@ describe('utils', () => {
     test('isEmail() - should return false if invalid', () => {
       expect(isEmail('')).toBeFalsy();
     });
+
+    test('git repo is valid', () => {
+      expect(isURL('git://github.com/verdaccio/ui.git')).toBeTruthy();
+    });
   });
 
   describe('extractFileName', () => {

package/src/utils/url.ts

@@ -3,7 +3,7 @@ import isURLValidator from 'validator/lib/isURL';
 
 export function isURL(url: string): boolean {
   return isURLValidator(url || '', {
-    protocols: ['http', 'https', 'git+https'],
+    protocols: ['http', 'https', 'git+https', 'git'],
     require_protocol: true,
     require_tld: false,
   });

package/tsconfig.build.json

@@ -13,6 +13,7 @@
     "jsx": "react"
   },
   "include": ["src/**/*", "./src/types/index.d.ts"],
+  "types": ["node", "jest", "@testing-library/jest-dom"],
   "typedocOptions": {
     "categoryOrder": ["Model", "Component", "Provider", "*"],
     "defaultCategory": "Component",

package/tsconfig.json

@@ -13,7 +13,6 @@
     "allowJs": true
   },
   "types": ["node", "jest", "@testing-library/jest-dom"],
-  "include": ["src/**/*", "./src/types/index.d.ts"],
   "references": [
     {
       "path": "../core/types"