@xqmsg/ui-core 0.23.1-rc.1 → 0.23.1-rc.3

package/src/components/toolbar/components/navigation/components/button/right/index.tsx

@@ -1,27 +1,27 @@
-import React from 'react';
-import { Box } from '@chakra-ui/react';
-import { ReactComponent as RightArrow } from './right-arrow.svg';
-
-export interface RightArrowButtonProps {
-  onClick: () => void;
-  disabled: boolean;
-}
-
-/**
- * A functional React component utilized to render the `RightArrowButton` component
- */
-export const RightArrowButton: React.FC<RightArrowButtonProps> = ({
-  onClick,
-  disabled,
-}) => {
-  return (
-    <Box
-      onClick={() => {
-        if (!disabled) return onClick();
-      }}
-      cursor={disabled ? 'not-allowed' : 'pointer'}
-    >
-      <RightArrow stroke={disabled ? '#3C3C43' : 'black'} />
-    </Box>
-  );
-};
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { ReactComponent as RightArrow } from './right-arrow.svg';
+
+export interface RightArrowButtonProps {
+  onClick: () => void;
+  disabled: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `RightArrowButton` component
+ */
+export const RightArrowButton: React.FC<RightArrowButtonProps> = ({
+  onClick,
+  disabled,
+}) => {
+  return (
+    <Box
+      onClick={() => {
+        if (!disabled) return onClick();
+      }}
+      cursor={disabled ? 'not-allowed' : 'pointer'}
+    >
+      <RightArrow stroke={disabled ? '#3C3C43' : 'black'} />
+    </Box>
+  );
+};

package/src/components/toolbar/components/navigation/components/button/right/right-arrow.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.875 0.75L7.125 7L0.874999 13.25" stroke="current" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 0.75L7.125 7L0.874999 13.25" stroke="current" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/toolbar/components/navigation/index.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import { LeftArrowButton } from './components/button/left';
-import { RightArrowButton } from './components/button/right';
-
-export interface NavigationButtonsProps {
-  onBackClick?: () => void;
-  onForwardClick?: () => void;
-  backButtonDisabled?: boolean;
-  forwardButtonDisabled?: boolean;
-}
-
-/**
- * A functional React component utilized to render the `NavigationButtons` component
- */
-export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
-  onBackClick,
-  onForwardClick,
-  backButtonDisabled,
-  forwardButtonDisabled,
-}) => {
-  return (
-    <Flex width="fit-content" alignItems="center" mr="24px">
-      <Box transform="scaleX(-1)" mr="16px">
-        <LeftArrowButton
-          onClick={() => onBackClick && onBackClick()}
-          disabled={backButtonDisabled || false}
-        />
-      </Box>
-      <RightArrowButton
-        onClick={() => onForwardClick && onForwardClick()}
-        disabled={forwardButtonDisabled || false}
-      />
-    </Flex>
-  );
-};
+import React from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { LeftArrowButton } from './components/button/left';
+import { RightArrowButton } from './components/button/right';
+
+export interface NavigationButtonsProps {
+  onBackClick?: () => void;
+  onForwardClick?: () => void;
+  backButtonDisabled?: boolean;
+  forwardButtonDisabled?: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `NavigationButtons` component
+ */
+export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
+  onBackClick,
+  onForwardClick,
+  backButtonDisabled,
+  forwardButtonDisabled,
+}) => {
+  return (
+    <Flex width="fit-content" alignItems="center" mr="24px">
+      <Box transform="scaleX(-1)" mr="16px">
+        <LeftArrowButton
+          onClick={() => onBackClick && onBackClick()}
+          disabled={backButtonDisabled || false}
+        />
+      </Box>
+      <RightArrowButton
+        onClick={() => onForwardClick && onForwardClick()}
+        disabled={forwardButtonDisabled || false}
+      />
+    </Flex>
+  );
+};

package/src/components/toolbar/index.tsx

@@ -1,55 +1,55 @@
-import React, { PropsWithChildren } from 'react';
-import { Flex } from '@chakra-ui/react';
-import { ToolbarBreadcrumbs } from './components/breadcrumbs';
-import { NavigationButtons } from './components/navigation';
-
-export type ToolbarLabelAndHandler = { label: string; handler: () => void };
-
-export interface ToolbarProps extends PropsWithChildren {
-  pageList: ToolbarLabelAndHandler[];
-  currentPage: string;
-  onBackClick?: () => void;
-  onForwardClick?: () => void;
-  backButtonDisabled?: boolean;
-  forwardButtonDisabled?: boolean;
-}
-
-/**
- * A functional React component utilized to render the `Toolbar` component
- */
-export const Toolbar: React.FC<ToolbarProps> = ({
-  children,
-  pageList,
-  forwardButtonDisabled,
-  backButtonDisabled,
-  currentPage,
-  onBackClick,
-  onForwardClick,
-}) => {
-  const hasNav = !!onBackClick && !!onForwardClick;
-
-  return (
-    <Flex flexDirection="column" borderBottom="0.5px solid #3C3C432E">
-      <Flex
-        height="52px"
-        px="32px"
-        alignItems="center"
-        justifyContent="space-between"
-        background="white"
-      >
-        <Flex>
-          {hasNav && (
-            <NavigationButtons
-              onBackClick={onBackClick}
-              onForwardClick={onForwardClick}
-              backButtonDisabled={backButtonDisabled}
-              forwardButtonDisabled={forwardButtonDisabled}
-            />
-          )}
-          <ToolbarBreadcrumbs pageList={pageList} currentPage={currentPage} />
-        </Flex>
-        <Flex alignItems="center">{children} </Flex>
-      </Flex>
-    </Flex>
-  );
-};
+import React, { PropsWithChildren } from 'react';
+import { Flex } from '@chakra-ui/react';
+import { ToolbarBreadcrumbs } from './components/breadcrumbs';
+import { NavigationButtons } from './components/navigation';
+
+export type ToolbarLabelAndHandler = { label: string; handler: () => void };
+
+export interface ToolbarProps extends PropsWithChildren {
+  pageList: ToolbarLabelAndHandler[];
+  currentPage: string;
+  onBackClick?: () => void;
+  onForwardClick?: () => void;
+  backButtonDisabled?: boolean;
+  forwardButtonDisabled?: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `Toolbar` component
+ */
+export const Toolbar: React.FC<ToolbarProps> = ({
+  children,
+  pageList,
+  forwardButtonDisabled,
+  backButtonDisabled,
+  currentPage,
+  onBackClick,
+  onForwardClick,
+}) => {
+  const hasNav = !!onBackClick && !!onForwardClick;
+
+  return (
+    <Flex flexDirection="column" borderBottom="0.5px solid #3C3C432E">
+      <Flex
+        height="52px"
+        px="32px"
+        alignItems="center"
+        justifyContent="space-between"
+        background="white"
+      >
+        <Flex>
+          {hasNav && (
+            <NavigationButtons
+              onBackClick={onBackClick}
+              onForwardClick={onForwardClick}
+              backButtonDisabled={backButtonDisabled}
+              forwardButtonDisabled={forwardButtonDisabled}
+            />
+          )}
+          <ToolbarBreadcrumbs pageList={pageList} currentPage={currentPage} />
+        </Flex>
+        <Flex alignItems="center">{children} </Flex>
+      </Flex>
+    </Flex>
+  );
+};

package/src/hooks/useDeepEffect.tsx

@@ -1,22 +1,22 @@
-import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
-import isEqual from 'lodash/isEqual';
-
-/**
- * Same as useEffect but does a deep comparison
- */
-export default function useDeepEffect(
-  func: EffectCallback,
-  dependencies: DependencyList
-) {
-  const dependenciesRef = useRef(dependencies);
-
-  useEffect(() => {
-    if (!isEqual(dependenciesRef.current, dependencies)) {
-      // Execute the function
-      func();
-
-      // Update the dependencies
-      dependenciesRef.current = dependencies;
-    }
-  }, [func, dependencies]);
-}
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+
+/**
+ * Same as useEffect but does a deep comparison
+ */
+export default function useDeepEffect(
+  func: EffectCallback,
+  dependencies: DependencyList
+) {
+  const dependenciesRef = useRef(dependencies);
+
+  useEffect(() => {
+    if (!isEqual(dependenciesRef.current, dependencies)) {
+      // Execute the function
+      func();
+
+      // Update the dependencies
+      dependenciesRef.current = dependencies;
+    }
+  }, [func, dependencies]);
+}

package/src/hooks/useDidMountEffect.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useRef } from 'react';
-
-const useDidMountEffect = (func: () => void, deps: unknown[]) => {
-  const didMount = useRef(false);
-
-  useEffect(() => {
-    if (didMount.current) func();
-    else didMount.current = true;
-    // eslint-disable-next-line
-  }, deps);
-};
-
-export default useDidMountEffect;
+import { useEffect, useRef } from 'react';
+
+const useDidMountEffect = (func: () => void, deps: unknown[]) => {
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (didMount.current) func();
+    else didMount.current = true;
+    // eslint-disable-next-line
+  }, deps);
+};
+
+export default useDidMountEffect;

package/src/hooks/useOnOutsideClick.tsx

@@ -1,31 +1,31 @@
-import { RefObject, useEffect } from 'react';
-
-export function useOnClickOutside(ref: RefObject<any>, handler: () => void) {
-  useEffect(
-    () => {
-      const listener: EventListener = event => {
-        // Do nothing if clicking ref's element or descendent elements
-        if (!ref.current || ref.current.contains(event.target)) {
-          return;
-        }
-
-        handler();
-      };
-
-      document.addEventListener('mousedown', listener);
-      document.addEventListener('touchstart', listener);
-
-      return () => {
-        document.removeEventListener('mousedown', listener);
-        document.removeEventListener('touchstart', listener);
-      };
-    },
-    // Add ref and handler to effect dependencies
-    // It's worth noting that because passed in handler is a new ...
-    // ... function on every render that will cause this effect ...
-    // ... callback/cleanup to run every render. It's not a big deal ...
-    // ... but to optimize you can wrap handler in useCallback before ...
-    // ... passing it into this hook.
-    [ref, handler]
-  );
-}
+import { RefObject, useEffect } from 'react';
+
+export function useOnClickOutside(ref: RefObject<any>, handler: () => void) {
+  useEffect(
+    () => {
+      const listener: EventListener = event => {
+        // Do nothing if clicking ref's element or descendent elements
+        if (!ref.current || ref.current.contains(event.target)) {
+          return;
+        }
+
+        handler();
+      };
+
+      document.addEventListener('mousedown', listener);
+      document.addEventListener('touchstart', listener);
+
+      return () => {
+        document.removeEventListener('mousedown', listener);
+        document.removeEventListener('touchstart', listener);
+      };
+    },
+    // Add ref and handler to effect dependencies
+    // It's worth noting that because passed in handler is a new ...
+    // ... function on every render that will cause this effect ...
+    // ... callback/cleanup to run every render. It's not a big deal ...
+    // ... but to optimize you can wrap handler in useCallback before ...
+    // ... passing it into this hook.
+    [ref, handler]
+  );
+}

package/src/hooks/useToast.tsx

@@ -1,16 +1,16 @@
-import { ToastPosition, useToast as useChakraToast } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import { Toast, ToastProps } from '../components/toast';
-
-export const useToast = () => {
-  const toast = useChakraToast();
-
-  return useCallback(
-    (props: ToastProps & { position: ToastPosition }) =>
-      toast({
-        position: props.position,
-        render: () => <Toast {...props} />,
-      }),
-    [toast]
-  );
-};
+import { ToastPosition, useToast as useChakraToast } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+import { Toast, ToastProps } from '../components/toast';
+
+export const useToast = () => {
+  const toast = useChakraToast();
+
+  return useCallback(
+    (props: ToastProps & { position: ToastPosition }) =>
+      toast({
+        position: props.position,
+        render: () => <Toast {...props} />,
+      }),
+    [toast]
+  );
+};

package/src/index.tsx

@@ -1,78 +1,78 @@
-// Components
-// Action Row
-export * from './components/modal/components/action';
-
-// Banner
-export * from './components/banner';
-
-// Breadcrumbs
-export * from './components/breadcrumbs';
-
-// Button
-export * from './components/button';
-
-// Card
-export * from './components/card';
-
-// Google Button
-export * from './components/button/google';
-
-// Microsoft Button
-export * from './components/button/microsoft';
-
-// Loading Spinner
-export * from './components/button/spinner';
-
-// Form
-export * from './components/form';
-
-// Form Section
-export * from './components/form/section';
-
-// Icons
-export * from './components/icons';
-
-// Input
-export * from './components/input';
-
-// Select
-export { SelectNative } from './components/select';
-
-// Layout
-export * from './components/layout';
-
-// Link
-export { Link } from './components/link';
-
-// Loading
-export * from './components/loading';
-
-// Modal
-export * from './components/modal';
-
-// Navigation Menu
-export * from './components/navigation';
-
-// Table
-export * from './components/table';
-
-// Table Nav
-export * from './components/tabs';
-
-// Text
-export * from './components/text';
-
-// Theme Provider
-export * from './theme/provider';
-
-// Toolbar
-export * from './components/toolbar';
-
-// Hooks
-export * from './hooks/useToast';
-
-//Utils
-export * from './components/form/utils/formErrors';
-
-// Colors
-export * from './theme/foundations/colors';
+// Components
+// Action Row
+export * from './components/modal/components/action';
+
+// Banner
+export * from './components/banner';
+
+// Breadcrumbs
+export * from './components/breadcrumbs';
+
+// Button
+export * from './components/button';
+
+// Card
+export * from './components/card';
+
+// Google Button
+export * from './components/button/google';
+
+// Microsoft Button
+export * from './components/button/microsoft';
+
+// Loading Spinner
+export * from './components/button/spinner';
+
+// Form
+export * from './components/form';
+
+// Form Section
+export * from './components/form/section';
+
+// Icons
+export * from './components/icons';
+
+// Input
+export * from './components/input';
+
+// Select
+export { SelectNative } from './components/select';
+
+// Layout
+export * from './components/layout';
+
+// Link
+export { Link } from './components/link';
+
+// Loading
+export * from './components/loading';
+
+// Modal
+export * from './components/modal';
+
+// Navigation Menu
+export * from './components/navigation';
+
+// Table
+export * from './components/table';
+
+// Table Nav
+export * from './components/tabs';
+
+// Text
+export * from './components/text';
+
+// Theme Provider
+export * from './theme/provider';
+
+// Toolbar
+export * from './components/toolbar';
+
+// Hooks
+export * from './hooks/useToast';
+
+//Utils
+export * from './components/form/utils/formErrors';
+
+// Colors
+export * from './theme/foundations/colors';