@xqmsg/ui-core 0.23.2 → 0.24.0

package/src/components/modal/components/action/index.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import { Box, Button } from '@chakra-ui/react';
-
-export interface ActionRowProps {
-  primaryText: string;
-  primaryOnClick: () => void;
-  primaryDisabled: boolean;
-  secondaryText: string;
-  secondaryOnClick: () => void;
-}
-
-/**
- * A functional React component utilized to render the `ActionRow` component
- */
-export const ActionRow: React.FC<ActionRowProps> = ({
-  primaryDisabled,
-  primaryOnClick,
-  primaryText,
-  secondaryOnClick,
-  secondaryText,
-}) => {
-  return (
-    <Box>
-      <Button
-        variant="secondary"
-        color="black"
-        onClick={secondaryOnClick}
-        mr="8px"
-      >
-        {secondaryText}
-      </Button>
-      <Button onClick={primaryOnClick} disabled={primaryDisabled}>
-        {primaryText}
-      </Button>
-    </Box>
-  );
-};
+import React from 'react';
+import { Box, Button } from '@chakra-ui/react';
+
+export interface ActionRowProps {
+  primaryText: string;
+  primaryOnClick: () => void;
+  primaryDisabled: boolean;
+  secondaryText: string;
+  secondaryOnClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `ActionRow` component
+ */
+export const ActionRow: React.FC<ActionRowProps> = ({
+  primaryDisabled,
+  primaryOnClick,
+  primaryText,
+  secondaryOnClick,
+  secondaryText,
+}) => {
+  return (
+    <Box>
+      <Button
+        variant="secondary"
+        color="black"
+        onClick={secondaryOnClick}
+        mr="8px"
+      >
+        {secondaryText}
+      </Button>
+      <Button onClick={primaryOnClick} disabled={primaryDisabled}>
+        {primaryText}
+      </Button>
+    </Box>
+  );
+};

package/src/components/modal/index.tsx

@@ -1,41 +1,41 @@
-import React, { ReactNode } from 'react';
-import {
-  Modal as ChakraModal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Box,
-} from '@chakra-ui/react';
-
-export interface ModalProps {
-  title?: string;
-  body?: ReactNode;
-  footer?: ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-/**
- * A functional React component utilized to render the `Modal` component
- */
-export const Modal: React.FC<ModalProps> = ({
-  title,
-  body,
-  footer,
-  isOpen,
-  onClose,
-}) => {
-  return (
-    <ChakraModal isOpen={isOpen} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>{title}</ModalHeader>
-        <ModalBody>{body}</ModalBody>
-        <Box borderBottom="1px solid #D9D9D9" />
-        <ModalFooter>{footer}</ModalFooter>
-      </ModalContent>
-    </ChakraModal>
-  );
-};
+import React, { ReactNode } from 'react';
+import {
+  Modal as ChakraModal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Box,
+} from '@chakra-ui/react';
+
+export interface ModalProps {
+  title?: string;
+  body?: ReactNode;
+  footer?: ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `Modal` component
+ */
+export const Modal: React.FC<ModalProps> = ({
+  title,
+  body,
+  footer,
+  isOpen,
+  onClose,
+}) => {
+  return (
+    <ChakraModal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{title}</ModalHeader>
+        <ModalBody>{body}</ModalBody>
+        <Box borderBottom="1px solid #D9D9D9" />
+        <ModalFooter>{footer}</ModalFooter>
+      </ModalContent>
+    </ChakraModal>
+  );
+};

package/src/components/navigation/NavigationMenu.stories.tsx

@@ -1,85 +1,85 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { NavigationMenu, NavigationMenuProps } from '.';
-import {
-  Clock,
-  GoogleDrive,
-  Group,
-  Home,
-  Link,
-  MicrosoftOneDrive,
-  Settings,
-  Trash,
-} from '../icons';
-import { Box } from '@chakra-ui/react';
-
-const meta: Meta<NavigationMenuProps> = {
-  title: 'Navigation Menu example',
-  component: NavigationMenu,
-  argTypes: {},
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<NavigationMenuProps> = args => (
-  <Box bg="white" height="100%">
-    <NavigationMenu {...args} />
-  </Box>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  defaultSelectedMenuItem: 'Settings',
-  groupedMenuItems: [
-    {
-      groupSortValue: 0,
-      groupMenuItems: [
-        {
-          leftIcon: <Settings boxSize="18px" />,
-          label: 'Settings',
-        },
-        {
-          leftIcon: <Settings boxSize="18px" />,
-          label: 'Services',
-          rightIcon: <Link boxSize="18px" />,
-        },
-      ],
-    },
-    {
-      groupSortValue: 1,
-      groupHeader: 'Files',
-      groupMenuItems: [
-        {
-          leftIcon: <Home boxSize="18px" />,
-          label: 'All Files',
-        },
-        {
-          leftIcon: <Clock boxSize="18px" />,
-          label: 'Recent',
-        },
-        {
-          leftIcon: <Group boxSize="18px" />,
-          label: 'Shared With Me',
-        },
-        {
-          leftIcon: <Trash boxSize="18px" />,
-          label: 'Deleted',
-        },
-      ],
-    },
-    {
-      groupSortValue: 2,
-      groupMenuItems: [
-        {
-          leftIcon: <MicrosoftOneDrive boxSize="18px" />,
-          label: 'Microsoft One Drive',
-        },
-        {
-          leftIcon: <GoogleDrive boxSize="18px" />,
-          label: 'Google Drive',
-        },
-      ],
-    },
-  ],
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { NavigationMenu, NavigationMenuProps } from '.';
+import {
+  Clock,
+  GoogleDrive,
+  Group,
+  Home,
+  Link,
+  MicrosoftOneDrive,
+  Settings,
+  Trash,
+} from '../icons';
+import { Box } from '@chakra-ui/react';
+
+const meta: Meta<NavigationMenuProps> = {
+  title: 'Navigation Menu example',
+  component: NavigationMenu,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<NavigationMenuProps> = args => (
+  <Box bg="white" height="100%">
+    <NavigationMenu {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  defaultSelectedMenuItem: 'Settings',
+  groupedMenuItems: [
+    {
+      groupSortValue: 0,
+      groupMenuItems: [
+        {
+          leftIcon: <Settings boxSize="18px" />,
+          label: 'Settings',
+        },
+        {
+          leftIcon: <Settings boxSize="18px" />,
+          label: 'Services',
+          rightIcon: <Link boxSize="18px" />,
+        },
+      ],
+    },
+    {
+      groupSortValue: 1,
+      groupHeader: 'Files',
+      groupMenuItems: [
+        {
+          leftIcon: <Home boxSize="18px" />,
+          label: 'All Files',
+        },
+        {
+          leftIcon: <Clock boxSize="18px" />,
+          label: 'Recent',
+        },
+        {
+          leftIcon: <Group boxSize="18px" />,
+          label: 'Shared With Me',
+        },
+        {
+          leftIcon: <Trash boxSize="18px" />,
+          label: 'Deleted',
+        },
+      ],
+    },
+    {
+      groupSortValue: 2,
+      groupMenuItems: [
+        {
+          leftIcon: <MicrosoftOneDrive boxSize="18px" />,
+          label: 'Microsoft One Drive',
+        },
+        {
+          leftIcon: <GoogleDrive boxSize="18px" />,
+          label: 'Google Drive',
+        },
+      ],
+    },
+  ],
+};

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

@@ -1,27 +1,27 @@
-import React from 'react';
-import { Flex } from '@chakra-ui/react';
-import colors from '../../../../theme/foundations/colors';
-
-export interface NavigationMenuHeaderProps {
-  label: string;
-}
-
-/**
- * A functional React component utilized to render the `NavigationMenuHeader` component
- */
-
-export const NavigationMenuHeader: React.FC<NavigationMenuHeaderProps> = ({
-  label,
-}) => {
-  return (
-    <Flex
-      alignItems="center"
-      height="26px"
-      width="204px"
-      fontSize="12px"
-      color={colors.label.secondary.light}
-    >
-      {label}
-    </Flex>
-  );
-};
+import React from 'react';
+import { Flex } from '@chakra-ui/react';
+import colors from '../../../../theme/foundations/colors';
+
+export interface NavigationMenuHeaderProps {
+  label: string;
+}
+
+/**
+ * A functional React component utilized to render the `NavigationMenuHeader` component
+ */
+
+export const NavigationMenuHeader: React.FC<NavigationMenuHeaderProps> = ({
+  label,
+}) => {
+  return (
+    <Flex
+      alignItems="center"
+      height="26px"
+      width="204px"
+      fontSize="12px"
+      color={colors.label.secondary.light}
+    >
+      {label}
+    </Flex>
+  );
+};

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

@@ -1,76 +1,76 @@
-import React from 'react';
-import { Box, Flex, Link } from '@chakra-ui/react';
-import { Link as RouterLink } from 'react-router-dom';
-import colors from '../../../../theme/foundations/colors';
-
-export interface NavigationMenuItemProps {
-  leftIcon: JSX.Element;
-  label: string;
-  to?: string;
-  href?: string;
-  isSelected: boolean;
-  onClick: () => void;
-  rightIcon?: JSX.Element;
-  isExternal?: boolean;
-}
-
-/**
- * A functional React component utilized to render the `NavigationMenuItem` component
- */
-export const NavigationMenuItem: React.FC<NavigationMenuItemProps> = ({
-  label,
-  leftIcon,
-  href,
-  to,
-  rightIcon,
-  isExternal,
-  isSelected,
-  onClick,
-}) => {
-  let additionalProps = {};
-
-  let reactRouterLinkProps = {};
-
-  if (to) {
-    reactRouterLinkProps = {
-      to,
-      as: RouterLink,
-    };
-  }
-
-  if (isExternal) {
-    additionalProps = {
-      ...additionalProps,
-      referrerPolicy: 'no-referrer',
-      target: '_blank',
-      href,
-      isExternal: true,
-    };
-  }
-
-  return (
-    <Link
-      {...reactRouterLinkProps}
-      {...additionalProps}
-      onClick={onClick}
-      display="flex"
-      alignItems="center"
-      justifyContent="space-between"
-      py="5px"
-      px="4px"
-      height="26px"
-      width="204px"
-      color={colors.label.primary}
-      bg={isSelected ? colors.fill.light.quaternary : 'transparent'}
-      borderRadius="4px"
-      fontSize="13px"
-      textDecoration="none"
-      _hover={{ textDecoration: 'none' }}
-    >
-      <Flex alignItems="center">
-        <Box mr="4px">{leftIcon}</Box> {label}
-      </Flex>
-      {rightIcon}
-    </Link>
-  );
-};
+import React from 'react';
+import { Box, Flex, Link } from '@chakra-ui/react';
+import { Link as RouterLink } from 'react-router-dom';
+import colors from '../../../../theme/foundations/colors';
+
+export interface NavigationMenuItemProps {
+  leftIcon: JSX.Element;
+  label: string;
+  to?: string;
+  href?: string;
+  isSelected: boolean;
+  onClick: () => void;
+  rightIcon?: JSX.Element;
+  isExternal?: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `NavigationMenuItem` component
+ */
+export const NavigationMenuItem: React.FC<NavigationMenuItemProps> = ({
+  label,
+  leftIcon,
+  href,
+  to,
+  rightIcon,
+  isExternal,
+  isSelected,
+  onClick,
+}) => {
+  let additionalProps = {};
+
+  let reactRouterLinkProps = {};
+
+  if (to) {
+    reactRouterLinkProps = {
+      to,
+      as: RouterLink,
+    };
+  }
+
+  if (isExternal) {
+    additionalProps = {
+      ...additionalProps,
+      referrerPolicy: 'no-referrer',
+      target: '_blank',
+      href,
+      isExternal: true,
+    };
+  }
+
+  return (
+    <Link
+      {...reactRouterLinkProps}
+      {...additionalProps}
+      onClick={onClick}
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      py="5px"
+      px="4px"
+      height="26px"
+      width="204px"
+      color={colors.label.primary}
+      bg={isSelected ? colors.fill.light.quaternary : 'transparent'}
+      borderRadius="4px"
+      fontSize="13px"
+      textDecoration="none"
+      _hover={{ textDecoration: 'none' }}
+    >
+      <Flex alignItems="center">
+        <Box mr="4px">{leftIcon}</Box> {label}
+      </Flex>
+      {rightIcon}
+    </Link>
+  );
+};