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

package/src/components/SideBarTittle/SideBarTittle.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { default as SideBarTittle } from '.';
+
+const meta: Meta<typeof SideBarTittle> = {
+  title: 'Components/Sidebar/Title',
+  component: SideBarTittle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SideBarTittle>;
+
+export const Commonjs: Story = {
+  name: 'CommonJS package',
+  render: () => (
+    <SideBarTittle
+      isLatest={false}
+      moduleType="commonjs"
+      packageName="jquery"
+      time="2012-12-31T06:54:14.275Z"
+      version="1.0.0"
+    />
+  ),
+};
+
+export const ES6: Story = {
+  name: 'ES6 package',
+  render: () => (
+    <SideBarTittle
+      isLatest={true}
+      moduleType="module"
+      packageName="react"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};
+
+export const Description: Story = {
+  name: 'With description',
+  render: () => (
+    <SideBarTittle
+      description="Storybook's CLI - easiest method of adding storybook to your projects"
+      isLatest={true}
+      moduleType="module"
+      packageName="storybook"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};
+
+export const WithTypes: Story = {
+  name: 'With types declaration',
+  render: () => (
+    <SideBarTittle
+      description="Storybook's CLI - easiest method of adding storybook to your projects"
+      hasTypes={true}
+      isLatest={true}
+      moduleType="module"
+      packageName="storybook"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};

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/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/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,
   });