@northlight/ui 1.4.1 → 1.4.2

package/dist/es/sandbox.d.mts

@@ -1,4 +1,5 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 
 type DefaultComponent = {
     default: ComponentType<any>;
@@ -12,10 +13,51 @@ interface MainPage extends Page {
     Icon: any;
     subItems?: Page[];
 }
+interface SearchBarComponentsBarProps {
+    routes: Page[];
+}
+interface RouteOption {
+    label: string;
+    value: string;
+}
+
+interface RoutingProps {
+    routes: MainPage[];
+    basename?: string;
+    fallback?: string;
+}
+declare const Routing: ({ routes, basename, fallback }: RoutingProps) => JSX.Element;
+
+type LazyPageProps = {
+    loader: () => Promise<DefaultComponent>;
+    children?: (component: ComponentType<any>, props: RouteComponentProps) => ReactNode;
+} & RouteComponentProps;
+declare const LazyPage: ({ loader, children, ...rest }: LazyPageProps) => JSX.Element;
+
+interface MenuItemProps {
+    path: string;
+    title: string;
+    Icon: any;
+}
+interface MainMenuProps {
+    menuItems: MenuItemProps[];
+}
+declare const MainMenu: ({ menuItems }: MainMenuProps) => JSX.Element;
+
+interface SubMenuItemProps {
+    path: string;
+    title: string;
+}
+interface SubMenuProps {
+    mainRoutes: MainPage[];
+}
+declare const SubMenu: ({ mainRoutes }: SubMenuProps) => JSX.Element;
+
+declare const SearchComponentsBar: ({ routes, }: SearchBarComponentsBarProps) => JSX.Element | null;
 
 interface SandboxProps {
     routes: MainPage[];
 }
 declare const Sandbox: ({ routes }: SandboxProps) => JSX.Element;
 
-export { Sandbox };
+export { DefaultComponent, LazyPage, LazyPageProps, MainMenu, MainMenuProps, MainPage, MenuItemProps, Page, RouteOption, Routing, Sandbox, SandboxProps, SearchBarComponentsBarProps, SearchComponentsBar, SubMenu, SubMenuItemProps };

package/dist/es/sandbox.mjs

@@ -1,10 +1,10 @@
-import React, { forwardRef as forwardRef$1, useImperativeHandle, useRef, useEffect, cloneElement, createContext, memo, useState, useMemo, useContext, Suspense } from 'react';
-import { Switch as Switch$3, Route, Redirect, NavLink, useLocation, useHistory, BrowserRouter, Link as Link$2 } from 'react-router-dom';
-import { ifElse, gt, always, identity, forEach, is, trim, keys, values, equals, last, map, prop, difference, times, merge, filter, test, toLower, head } from 'ramda';
+import React, { useMemo, Suspense, forwardRef as forwardRef$1, useImperativeHandle, useRef, useEffect, cloneElement, createContext, memo, useState, useContext } from 'react';
+import { Switch as Switch$2, Route, Redirect, NavLink, useLocation, useHistory, BrowserRouter, Link as Link$2 } from 'react-router-dom';
+import { forwardRef, useStyleConfig, Icon as Icon$2, Text, FormLabel as FormLabel$1, VisuallyHidden, Box, Button as Button$2, IconButton as IconButton$1, useMultiStyleConfig, chakra, Table, Thead, Tbody, Tr, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, HStack, Editable, InputGroup, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, InputRightElement, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalHeader, ModalBody, Stack, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, keyframes, useToken as useToken$1, extendTheme, ChakraProvider, Switch as Switch$3, useDisclosure, Card, Grid, Flex, Link as Link$1, FormControl } from '@chakra-ui/react';
 import { CheckDuo, SearchDuo, DotsMatrixSolid, XCloseSolid, EditDuo, ZoomInDuo, ArrowCircleRightDuo, NorthlightLogoXs } from '@northlight/icons';
-import { forwardRef, useStyleConfig, Icon as Icon$2, Text, FormLabel as FormLabel$1, VisuallyHidden, Box, Button as Button$2, IconButton as IconButton$1, useMultiStyleConfig, chakra, Table, Thead, Tbody, Tr, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, HStack, Editable, InputGroup, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, InputRightElement, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalHeader, ModalBody, Stack, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, keyframes, useToken as useToken$1, extendTheme, ChakraProvider, Switch as Switch$2, useDisclosure, Card, Grid, Flex, Link as Link$1, FormControl } from '@chakra-ui/react';
 import { useToken, useMultiStyleConfig as useMultiStyleConfig$1, chakra as chakra$1 } from '@chakra-ui/system';
 import { palette, WebappSkin as WebappSkin$1, typography, TottSkin as TottSkin$1, coreZIndex, coreSizing, coreSpacing, coreFontWeight, coreBoxShadow, coreFontSize, coreLineHeight, coreBorderRadius } from '@northlight/tokens';
+import { ifElse, gt, always, identity, forEach, is, trim, keys, values, equals, last, map, prop, difference, times, merge, filter, test, toLower, head } from 'ramda';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useFocusManager } from '@react-aria/focus';
 import '@react-aria/checkbox';
@@ -32,8 +32,54 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import AvatarEditor from 'react-avatar-editor';
 import { randomColor } from '@chakra-ui/theme-tools';
 import 'react-input-mask';
-import { I18nManager, I18nContext } from '@shopify/react-i18n';
 import Fuse from 'fuse.js';
+import { I18nManager, I18nContext } from '@shopify/react-i18n';
+
+const LazyPage = ({ loader, children, ...rest }) => {
+  const Component = useMemo(() => React.lazy(loader), []);
+  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement("p", null, "Loading....") }, children ? children(Component, { ...rest }) : /* @__PURE__ */ React.createElement(Component, { ...rest }));
+};
+
+const normalizePath = ({
+  basename,
+  path
+}) => basename ? `${basename}${path}` : path;
+const Routing = ({ routes, basename, fallback }) => /* @__PURE__ */ React.createElement(Switch$2, null, routes.flatMap(({ path, component, subItems = [] }) => {
+  const routePath = normalizePath({ basename, path });
+  const mainRoute = /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      key: routePath,
+      exact: true,
+      path: routePath,
+      render: (props) => /* @__PURE__ */ React.createElement(
+        LazyPage,
+        {
+          ...props,
+          loader: component
+        }
+      )
+    }
+  );
+  const subRoutes = subItems.map(({ path: subPath, component: subComponent }) => {
+    const fullPath = `${path}${subPath}`;
+    return /* @__PURE__ */ React.createElement(
+      Route,
+      {
+        key: fullPath,
+        path: fullPath,
+        render: (props) => /* @__PURE__ */ React.createElement(
+          LazyPage,
+          {
+            ...props,
+            loader: subComponent
+          }
+        )
+      }
+    );
+  });
+  return [mainRoute, ...subRoutes];
+}), fallback && /* @__PURE__ */ React.createElement(Redirect, { to: fallback }));
 
 const Icon$1 = forwardRef(({
   as: As,
@@ -3292,7 +3338,7 @@ const Switch = ({
   size = "md",
   ...rest
 }) => /* @__PURE__ */ React.createElement(
-  Switch$2,
+  Switch$3,
   {
     size,
     id: name,
@@ -3314,137 +3360,6 @@ forwardRef((props, ref) => {
   );
 });
 
-const users = {
-  "obi-wan": {
-    name: "Obi-Wan Kenobi",
-    country: "Germany",
-    image: `
-      https://www.gamereactor.se/media/08/redaxresonerar_3470803.jpg
-    `,
-    preferences: {
-      locale: "de-DE",
-      currency: "EUR",
-      firstDayOfWeek: "monday"
-    }
-  },
-  anakin: {
-    name: "Anakin Skywalker",
-    country: "US",
-    image: `
-      https://thenerdstash.com/wp-content/uploads/2021/10/Hayden-Christensen-Anakin-Skywalker.jpg
-    `,
-    preferences: {
-      locale: "en-US",
-      currency: "USD",
-      firstDayOfWeek: "sunday"
-    }
-  },
-  han: {
-    name: "Han Solo",
-    country: "Sweden",
-    image: `
-      https://fictionhorizon.com/wp-content/uploads/2021/09/Han-Solo.jpg
-    `,
-    preferences: {
-      locale: "sv-SE",
-      currency: "SEK",
-      firstDayOfWeek: "sunday"
-    }
-  },
-  yoda: {
-    name: "Yoda",
-    country: "England",
-    image: `
-      https://markerasomolast.files.wordpress.com/2013/08/yoda.jpg
-    `,
-    preferences: {
-      locale: "en-GB",
-      currency: "GBP",
-      firstDayOfWeek: "monday"
-    }
-  }
-};
-const UserContext = createContext(null);
-const UserProvider = ({ children }) => {
-  const [user, setUser] = useState(users["obi-wan"]);
-  const contextValue = useMemo(() => ({
-    user,
-    setUser
-  }), [user]);
-  return /* @__PURE__ */ React.createElement(UserContext.Provider, { value: contextValue }, children);
-};
-const useUser = () => {
-  const context = useContext(UserContext);
-  if (!context) {
-    throw new Error("Cannot find <UserProvider> anywhere in your React tree");
-  }
-  return context;
-};
-
-const I18nProvider = ({ children }) => {
-  const { user } = useUser();
-  const i18nManager = useMemo(() => {
-    const { preferences: { locale, currency } } = user;
-    return new I18nManager({
-      locale,
-      currency
-    });
-  }, [user]);
-  return /* @__PURE__ */ React.createElement(I18nContext.Provider, { value: i18nManager }, children);
-};
-
-const CalendarProvider = ({ children }) => {
-  const { user: { preferences: { firstDayOfWeek = "monday" } } } = useUser();
-  const calendarLocale = firstDayOfWeek === "monday" ? "en-GB" : "en-US";
-  return /* @__PURE__ */ React.createElement(I18nProvider$1, { locale: calendarLocale }, children);
-};
-
-const LazyPage = ({ loader, children, ...rest }) => {
-  const Component = useMemo(() => React.lazy(loader), []);
-  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement("p", null, "Loading....") }, children ? children(Component, { ...rest }) : /* @__PURE__ */ React.createElement(Component, { ...rest }));
-};
-
-const normalizePath = ({
-  basename,
-  path
-}) => basename ? `${basename}${path}` : path;
-const Routing = ({ routes, basename, fallback }) => /* @__PURE__ */ React.createElement(Switch$3, null, routes.flatMap(({ path, component, subItems = [] }) => {
-  const routePath = normalizePath({ basename, path });
-  const mainRoute = /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      key: routePath,
-      exact: true,
-      path: routePath,
-      render: (props) => /* @__PURE__ */ React.createElement(
-        LazyPage,
-        {
-          ...props,
-          loader: component
-        }
-      )
-    }
-  );
-  const subRoutes = subItems.map(({ path: subPath, component: subComponent }) => {
-    const fullPath = `${path}${subPath}`;
-    return /* @__PURE__ */ React.createElement(
-      Route,
-      {
-        key: fullPath,
-        path: fullPath,
-        render: (props) => /* @__PURE__ */ React.createElement(
-          LazyPage,
-          {
-            ...props,
-            loader: subComponent
-          }
-        )
-      }
-    );
-  });
-  return [mainRoute, ...subRoutes];
-}), fallback && /* @__PURE__ */ React.createElement(Redirect, { to: fallback }));
-
 const MenuItem = ({ path, Icon: IconComponent, title }) => /* @__PURE__ */ React.createElement(
   HStack,
   {
@@ -3482,7 +3397,7 @@ const SubMenu = ({ mainRoutes }) => /* @__PURE__ */ React.createElement(
     bgColor: "background.default",
     sx: { "::-webkit-scrollbar": { display: "none" }, "::-webkit-scrollbar-thumb": { background: "blue.500" }, _hover: { "::-webkit-scrollbar": { display: "block" } } }
   },
-  /* @__PURE__ */ React.createElement(Switch$3, null, mainRoutes.map(({ path: mainPath, subItems = [] }) => /* @__PURE__ */ React.createElement(
+  /* @__PURE__ */ React.createElement(Switch$2, null, mainRoutes.map(({ path: mainPath, subItems = [] }) => /* @__PURE__ */ React.createElement(
     Route,
     {
       key: mainPath,
@@ -3630,6 +3545,91 @@ const SearchComponentsBar = ({
   ));
 };
 
+const users = {
+  "obi-wan": {
+    name: "Obi-Wan Kenobi",
+    country: "Germany",
+    image: `
+      https://www.gamereactor.se/media/08/redaxresonerar_3470803.jpg
+    `,
+    preferences: {
+      locale: "de-DE",
+      currency: "EUR",
+      firstDayOfWeek: "monday"
+    }
+  },
+  anakin: {
+    name: "Anakin Skywalker",
+    country: "US",
+    image: `
+      https://thenerdstash.com/wp-content/uploads/2021/10/Hayden-Christensen-Anakin-Skywalker.jpg
+    `,
+    preferences: {
+      locale: "en-US",
+      currency: "USD",
+      firstDayOfWeek: "sunday"
+    }
+  },
+  han: {
+    name: "Han Solo",
+    country: "Sweden",
+    image: `
+      https://fictionhorizon.com/wp-content/uploads/2021/09/Han-Solo.jpg
+    `,
+    preferences: {
+      locale: "sv-SE",
+      currency: "SEK",
+      firstDayOfWeek: "sunday"
+    }
+  },
+  yoda: {
+    name: "Yoda",
+    country: "England",
+    image: `
+      https://markerasomolast.files.wordpress.com/2013/08/yoda.jpg
+    `,
+    preferences: {
+      locale: "en-GB",
+      currency: "GBP",
+      firstDayOfWeek: "monday"
+    }
+  }
+};
+const UserContext = createContext(null);
+const UserProvider = ({ children }) => {
+  const [user, setUser] = useState(users["obi-wan"]);
+  const contextValue = useMemo(() => ({
+    user,
+    setUser
+  }), [user]);
+  return /* @__PURE__ */ React.createElement(UserContext.Provider, { value: contextValue }, children);
+};
+const useUser = () => {
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error("Cannot find <UserProvider> anywhere in your React tree");
+  }
+  return context;
+};
+
+const I18nProvider = ({ children }) => {
+  const { user } = useUser();
+  const i18nManager = useMemo(() => {
+    const { preferences: { locale, currency } } = user;
+    return new I18nManager({
+      locale,
+      currency
+    });
+  }, [user]);
+  return /* @__PURE__ */ React.createElement(I18nContext.Provider, { value: i18nManager }, children);
+};
+
+const CalendarProvider = ({ children }) => {
+  const { user: { preferences: { firstDayOfWeek = "monday" } } } = useUser();
+  const calendarLocale = firstDayOfWeek === "monday" ? "en-GB" : "en-US";
+  return /* @__PURE__ */ React.createElement(I18nProvider$1, { locale: calendarLocale }, children);
+};
+
 const Sandbox = ({ routes }) => {
   const [tott, setTott] = useState(false);
   return /* @__PURE__ */ React.createElement(MediatoolThemeProvider, { theme: tott ? tottTheme : void 0 }, /* @__PURE__ */ React.createElement(UserProvider, null, /* @__PURE__ */ React.createElement(CalendarProvider, null, /* @__PURE__ */ React.createElement(I18nProvider, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement(
@@ -3665,5 +3665,5 @@ const Sandbox = ({ routes }) => {
   ))))));
 };
 
-export { Sandbox };
+export { LazyPage, MainMenu, Routing, Sandbox, SearchComponentsBar, SubMenu };
 //# sourceMappingURL=sandbox.mjs.map