@xqmsg/ui-core 0.23.2 → 0.24.0

package/src/components/text/Text.stories.tsx

@@ -1,59 +1,59 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Text, TextProps } from '.';
-import textTheme from '../../theme/components/text';
-import typography from '../../theme/foundations/typography';
-
-const meta: Meta<TextProps> = {
-  title: 'Text example',
-  component: Text,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description:
-        'The text to be rendered to the screen - can also contain other React components',
-    },
-    variant: {
-      control: 'select',
-      options: Object.keys(textTheme.variants),
-      description: 'The `variant` of the `Text` component',
-    },
-    fontSize: {
-      control: 'select',
-      options: Object.values(typography.fontSizes),
-      description: 'The `fontSize` of the `Text` component',
-    },
-    fontWeight: {
-      control: 'select',
-      options: Object.values(typography.fontWeights),
-      description: 'The `fontWeight` of the `Text` component',
-    },
-    letterSpacing: {
-      control: 'select',
-      options: Object.values(typography.letterSpacings),
-      description: 'The `letterSpacing` of the `Text` component',
-    },
-    lineHeight: {
-      control: 'select',
-      options: Object.values(typography.lineHeights),
-      description: 'The `lineHeight` of the `Text` component',
-    },
-    color: {
-      control: { type: 'text' },
-      description: 'The `color` of the text',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<TextProps> = args => <Text {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  children: 'Lorem Ipsum',
-  variant: 'header',
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Text, TextProps } from '.';
+import textTheme from '../../theme/components/text';
+import typography from '../../theme/foundations/typography';
+
+const meta: Meta<TextProps> = {
+  title: 'Text example',
+  component: Text,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description:
+        'The text to be rendered to the screen - can also contain other React components',
+    },
+    variant: {
+      control: 'select',
+      options: Object.keys(textTheme.variants),
+      description: 'The `variant` of the `Text` component',
+    },
+    fontSize: {
+      control: 'select',
+      options: Object.values(typography.fontSizes),
+      description: 'The `fontSize` of the `Text` component',
+    },
+    fontWeight: {
+      control: 'select',
+      options: Object.values(typography.fontWeights),
+      description: 'The `fontWeight` of the `Text` component',
+    },
+    letterSpacing: {
+      control: 'select',
+      options: Object.values(typography.letterSpacings),
+      description: 'The `letterSpacing` of the `Text` component',
+    },
+    lineHeight: {
+      control: 'select',
+      options: Object.values(typography.lineHeights),
+      description: 'The `lineHeight` of the `Text` component',
+    },
+    color: {
+      control: { type: 'text' },
+      description: 'The `color` of the text',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<TextProps> = args => <Text {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Lorem Ipsum',
+  variant: 'header',
+};

package/src/components/text/index.tsx

@@ -1,16 +1,16 @@
-import React, { PropsWithChildren } from 'react';
-import { Text as ChakraText } from '@chakra-ui/react';
-import textTheme from '../../theme/components/text';
-
-export interface TextProps extends PropsWithChildren {
-  variant: keyof typeof textTheme.variants;
-}
-
-/**
- * A functional React component utilized to render the `Text` component. The component is mainly
- * controlled by by the `variant` prop which determines `fontSize`, `fontWeight`, etc.
- * Also extends `TypographyProps`.
- */
-export const Text: React.FC<TextProps> = ({ variant, children }) => {
-  return <ChakraText variant={variant}>{children}</ChakraText>;
-};
+import React, { PropsWithChildren } from 'react';
+import { Text as ChakraText } from '@chakra-ui/react';
+import textTheme from '../../theme/components/text';
+
+export type TextProps = PropsWithChildren & {
+  variant: keyof typeof textTheme.variants;
+};
+
+/**
+ * A functional React component utilized to render the `Text` component. The component is mainly
+ * controlled by by the `variant` prop which determines `fontSize`, `fontWeight`, etc.
+ * Also extends `TypographyProps`.
+ */
+export const Text: React.FC<TextProps> = ({ variant, children }) => {
+  return <ChakraText variant={variant}>{children}</ChakraText>;
+};

package/src/components/toast/Toast.stories.tsx

@@ -1,52 +1,52 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Toast, ToastProps } from '.';
-import alertTheme from '../../theme/components/alert';
-import { Box } from '@chakra-ui/react';
-
-const meta: Meta<ToastProps> = {
-  title: 'Toast example',
-  component: Toast,
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: Object.keys(alertTheme.variants),
-      description: 'The `variant` of the `Toast` component',
-    },
-    message: {
-      description: 'The `message` of the `Toast` component',
-    },
-    buttonText: {
-      description: "The `buttonText` of the `Toast` component's action button",
-    },
-    onClick: {
-      description:
-        "The `onClick` handler of the `Toast` component's action button",
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<ToastProps> = args => (
-  <>
-    <Box mb="20px">
-      <Toast {...args} variant="positive" message="Positive message." />
-    </Box>
-    <Box mb="20px">
-      <Toast {...args} variant="warning" message="Warning message." />
-    </Box>
-    <Box mb="20px">
-      <Toast {...args} variant="error" message="Error message." />
-    </Box>
-    <Box mb="20px">
-      <Toast {...args} variant="neutral" message="Neutral message." />
-    </Box>
-  </>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  buttonText: 'Action',
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Toast, ToastProps } from '.';
+import alertTheme from '../../theme/components/alert';
+import { Box } from '@chakra-ui/react';
+
+const meta: Meta<ToastProps> = {
+  title: 'Toast example',
+  component: Toast,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(alertTheme.variants),
+      description: 'The `variant` of the `Toast` component',
+    },
+    message: {
+      description: 'The `message` of the `Toast` component',
+    },
+    buttonText: {
+      description: "The `buttonText` of the `Toast` component's action button",
+    },
+    onClick: {
+      description:
+        "The `onClick` handler of the `Toast` component's action button",
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<ToastProps> = args => (
+  <>
+    <Box mb="20px">
+      <Toast {...args} variant="positive" message="Positive message." />
+    </Box>
+    <Box mb="20px">
+      <Toast {...args} variant="warning" message="Warning message." />
+    </Box>
+    <Box mb="20px">
+      <Toast {...args} variant="error" message="Error message." />
+    </Box>
+    <Box mb="20px">
+      <Toast {...args} variant="neutral" message="Neutral message." />
+    </Box>
+  </>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  buttonText: 'Action',
+};

package/src/components/toast/index.tsx

@@ -1,78 +1,78 @@
-import React, { ReactNode, useMemo } from 'react';
-import { Box, Button, Flex, Text } from '@chakra-ui/react';
-import { Error } from '../icons/error';
-import { Neutral } from '../icons/neutral';
-import { Positive } from '../icons/positive';
-import { Warning } from '../icons/warning';
-import colors from '../../theme/foundations/colors';
-
-export type ToastVariant = 'positive' | 'warning' | 'error' | 'neutral';
-
-export interface ToastProps {
-  variant: ToastVariant;
-  message: ReactNode;
-  buttonText?: string;
-  onClick?: () => void;
-}
-
-/**
- * A functional React component utilized to render the `Toast` component
- */
-export const Toast: React.FC<ToastProps> = ({
-  variant,
-  message,
-  buttonText,
-  onClick,
-}) => {
-  const Icon = useMemo(() => {
-    switch (variant) {
-      case 'error':
-        return <Error boxSize="16px" />;
-      case 'neutral':
-        return <Neutral boxSize="16px" color="white" />;
-      case 'positive':
-        return <Positive boxSize="16px" />;
-      case 'warning':
-        return <Warning boxSize="16px" />;
-      default:
-        return null;
-    }
-  }, [variant]);
-
-  return (
-    <Flex
-      alignItems="center"
-      width="fit-content"
-      height="32px"
-      p="8px"
-      bg="#151515D9"
-      borderColor="#9999991A"
-      borderRadius="8px"
-    >
-      <Box pr="8px">{Icon}</Box>
-      <Text pr="16px" fontSize="13px" color={colors.label.primary.dark}>
-        {message}
-      </Text>
-      {onClick && buttonText && (
-        <Flex ml="auto" justifyContent="flex-end">
-          <Button
-            color={colors.fill.action}
-            style={{
-              background: 'transparent',
-              border: 'transparent',
-              boxShadow: 'none',
-            }}
-            _hover={{
-              bg: 'transparent',
-              border: 'transparent',
-              boxShadow: 'none',
-            }}
-            onClick={onClick}
-          >
-            {buttonText}
-          </Button>
-        </Flex>
-      )}
-    </Flex>
-  );
-};
+import React, { ReactNode, useMemo } from 'react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { Error } from '../icons/error';
+import { Neutral } from '../icons/neutral';
+import { Positive } from '../icons/positive';
+import { Warning } from '../icons/warning';
+import colors from '../../theme/foundations/colors';
+
+export type ToastVariant = 'positive' | 'warning' | 'error' | 'neutral';
+
+export interface ToastProps {
+  variant: ToastVariant;
+  message: ReactNode;
+  buttonText?: string;
+  onClick?: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `Toast` component
+ */
+export const Toast: React.FC<ToastProps> = ({
+  variant,
+  message,
+  buttonText,
+  onClick,
+}) => {
+  const Icon = useMemo(() => {
+    switch (variant) {
+      case 'error':
+        return <Error boxSize="16px" />;
+      case 'neutral':
+        return <Neutral boxSize="16px" color="white" />;
+      case 'positive':
+        return <Positive boxSize="16px" />;
+      case 'warning':
+        return <Warning boxSize="16px" />;
+      default:
+        return null;
+    }
+  }, [variant]);
+
+  return (
+    <Flex
+      alignItems="center"
+      width="fit-content"
+      height="32px"
+      p="8px"
+      bg="#151515D9"
+      borderColor="#9999991A"
+      borderRadius="8px"
+    >
+      <Box pr="8px">{Icon}</Box>
+      <Text pr="16px" fontSize="13px" color={colors.label.primary.dark}>
+        {message}
+      </Text>
+      {onClick && buttonText && (
+        <Flex ml="auto" justifyContent="flex-end">
+          <Button
+            color={colors.fill.action}
+            style={{
+              background: 'transparent',
+              border: 'transparent',
+              boxShadow: 'none',
+            }}
+            _hover={{
+              bg: 'transparent',
+              border: 'transparent',
+              boxShadow: 'none',
+            }}
+            onClick={onClick}
+          >
+            {buttonText}
+          </Button>
+        </Flex>
+      )}
+    </Flex>
+  );
+};

package/src/components/toolbar/Toolbar.stories.tsx

@@ -1,59 +1,59 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Box } from '@chakra-ui/react';
-import { Toolbar, ToolbarProps } from '.';
-import { useState } from '@storybook/addons';
-import { Button } from '../button';
-
-const meta: Meta<ToolbarProps> = {
-  title: 'Toolbar example',
-  component: Toolbar,
-  argTypes: {},
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<ToolbarProps> = args => {
-  const [currentPage, setCurrentPage] = useState('howdy');
-  const [searchValue, setSearchValue] = useState('');
-  const pageList = [
-    { label: 'hi', handler: () => setCurrentPage('hi') },
-    { label: 'hey', handler: () => setCurrentPage('hey') },
-    { label: 'hello', handler: () => setCurrentPage('hello') },
-    { label: 'howdy', handler: () => setCurrentPage('howdy') },
-  ];
-
-  const sortOptions = [
-    { label: 'Sort by', value: 'section_header', sortValue: 0 },
-    { label: 'Name', value: 'name', sortValue: 1 },
-    { label: 'Type', value: 'type', sortValue: 2 },
-    { label: 'Date Last Opened', value: 'date_last_opened', sortValue: 3 },
-    { label: 'Date Added', value: 'date_added', sortValue: 4 },
-    { label: 'Date Modified', value: 'date_modified', sortValue: 5 },
-    { label: 'Date Created', value: 'date_created', sortValue: 5 },
-    { label: 'Size', value: 'size', sortValue: 5 },
-  ];
-
-  return (
-    <Box>
-      <Toolbar
-        {...args}
-        pageList={pageList}
-        currentPage={currentPage}
-        backButtonDisabled={false}
-      >
-        <Button
-          variant="secondary"
-          text="Sign Out"
-          width="variable"
-          ariaLabel="button"
-        />
-      </Toolbar>
-    </Box>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Box } from '@chakra-ui/react';
+import { Toolbar, ToolbarProps } from '.';
+import { useState } from '@storybook/addons';
+import { Button } from '../button';
+
+const meta: Meta<ToolbarProps> = {
+  title: 'Toolbar example',
+  component: Toolbar,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<ToolbarProps> = args => {
+  const [currentPage, setCurrentPage] = useState('howdy');
+  const [searchValue, setSearchValue] = useState('');
+  const pageList = [
+    { label: 'hi', handler: () => setCurrentPage('hi') },
+    { label: 'hey', handler: () => setCurrentPage('hey') },
+    { label: 'hello', handler: () => setCurrentPage('hello') },
+    { label: 'howdy', handler: () => setCurrentPage('howdy') },
+  ];
+
+  const sortOptions = [
+    { label: 'Sort by', value: 'section_header', sortValue: 0 },
+    { label: 'Name', value: 'name', sortValue: 1 },
+    { label: 'Type', value: 'type', sortValue: 2 },
+    { label: 'Date Last Opened', value: 'date_last_opened', sortValue: 3 },
+    { label: 'Date Added', value: 'date_added', sortValue: 4 },
+    { label: 'Date Modified', value: 'date_modified', sortValue: 5 },
+    { label: 'Date Created', value: 'date_created', sortValue: 5 },
+    { label: 'Size', value: 'size', sortValue: 5 },
+  ];
+
+  return (
+    <Box>
+      <Toolbar
+        {...args}
+        pageList={pageList}
+        currentPage={currentPage}
+        backButtonDisabled={false}
+      >
+        <Button
+          variant="secondary"
+          text="Sign Out"
+          width="variable"
+          ariaLabel="button"
+        />
+      </Toolbar>
+    </Box>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/toolbar/components/actions/add/index.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-import { Box } from '@chakra-ui/react';
-import { FolderAddOutline } from 'src/components/icons';
-
-export interface AddProps {
-  onClick: () => void;
-}
-
-/**
- * A functional React component utilized to render the `Add` component
- */
-export const Add: React.FC<AddProps> = ({ onClick }) => {
-  return (
-    <Box mx="8px" cursor="pointer" onClick={onClick}>
-      <FolderAddOutline boxSize="16px" />
-    </Box>
-  );
-};
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { FolderAddOutline } from 'src/components/icons';
+
+export interface AddProps {
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `Add` component
+ */
+export const Add: React.FC<AddProps> = ({ onClick }) => {
+  return (
+    <Box mx="8px" cursor="pointer" onClick={onClick}>
+      <FolderAddOutline boxSize="16px" />
+    </Box>
+  );
+};

package/src/components/toolbar/components/actions/search/index.tsx

@@ -1,38 +1,38 @@
-import React from 'react';
-import { Box, useMediaQuery } from '@chakra-ui/react';
-import { Search as SearchIcon } from '../../../../icons';
-import StackedInput from '../../../..//input/StackedInput/StackedInput';
-
-export interface SearchProps {
-  searchValue: string;
-  onClick: () => void;
-  onChange: (value: string) => void;
-}
-
-/**
- * A functional React component utilized to render the `Search` component
- */
-export const Search: React.FC<SearchProps> = ({
-  searchValue,
-  onClick,
-  onChange,
-}) => {
-  const [breakpoint600] = useMediaQuery('(max-width: 600px)');
-
-  return (
-    <Box>
-      {breakpoint600 ? (
-        <Box cursor="pointer" onClick={onClick}>
-          <SearchIcon boxSize="16px" />
-        </Box>
-      ) : (
-        <StackedInput
-          placeholder="Search..."
-          name="search"
-          value={searchValue}
-          onChange={e => onChange(e.target.value)}
-        />
-      )}
-    </Box>
-  );
-};
+import React from 'react';
+import { Box, useMediaQuery } from '@chakra-ui/react';
+import { Search as SearchIcon } from '../../../../icons';
+import StackedInput from '../../../..//input/StackedInput/StackedInput';
+
+export interface SearchProps {
+  searchValue: string;
+  onClick: () => void;
+  onChange: (value: string) => void;
+}
+
+/**
+ * A functional React component utilized to render the `Search` component
+ */
+export const Search: React.FC<SearchProps> = ({
+  searchValue,
+  onClick,
+  onChange,
+}) => {
+  const [breakpoint600] = useMediaQuery('(max-width: 600px)');
+
+  return (
+    <Box>
+      {breakpoint600 ? (
+        <Box cursor="pointer" onClick={onClick}>
+          <SearchIcon boxSize="16px" />
+        </Box>
+      ) : (
+        <StackedInput
+          placeholder="Search..."
+          name="search"
+          value={searchValue}
+          onChange={e => onChange(e.target.value)}
+        />
+      )}
+    </Box>
+  );
+};