@xqmsg/ui-core 0.21.6 → 0.22.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.21.6",
+  "version": "0.22.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -50,63 +50,64 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/preset-env": "^7.19.0",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-url": "^8.0.1",
-    "@size-limit/preset-small-lib": "^8.0.1",
+    "@size-limit/preset-small-lib": "^8.2.4",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.5.10",
     "@storybook/addons": "^6.5.10",
     "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.10",
     "@svgr/rollup": "^6.5.1",
     "@svgr/webpack": "^6.3.1",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@types/react": "^18.2.1",
+    "@types/react-dom": "^18.2.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "babel-loader": "8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "generate-changelog": "^1.8.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rollup-plugin-cjs-es": "^1.1.0",
     "rollup-plugin-image-files": "^1.4.2",
     "rollup-plugin-svg": "^2.0.0",
-    "size-limit": "^8.0.1",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "size-limit": "^8.2.4",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
     "tsdx": "^0.14.1",
-    "tslib": "^2.4.0",
+    "tslib": "^2.5.0",
     "typescript": "^4.8.2",
-    "yalc": "^1.0.0-pre.53"
+    "yalc": "^1.0.0-pre.53",
+    "yarn-audit-fix": "^9.3.10"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.0",
+    "@chakra-ui/icons": "^2.0.19",
     "@chakra-ui/media-query": "^2.0.0",
-    "@chakra-ui/progress": "^2.0.0",
-    "@chakra-ui/react": "^2.3.6",
-    "@chakra-ui/storybook-addon": "^4.0.10",
-    "@chakra-ui/system": "^2.0.0",
+    "@chakra-ui/progress": "^2.1.6",
+    "@chakra-ui/react": "^2.6.1",
+    "@chakra-ui/storybook-addon": "^4.0.16",
+    "@chakra-ui/system": "^2.5.7",
     "@chakra-ui/theme": "^2.0.0",
-    "@chakra-ui/theme-tools": "^2.0.0",
-    "@chakra-ui/transition": "^2.0.0",
-    "@chakra-ui/utils": "^2.0.0",
-    "@emotion/react": "~11.9.0",
-    "@emotion/styled": "~11.6.0",
+    "@chakra-ui/theme-tools": "^2.0.16",
+    "@chakra-ui/transition": "^2.0.16",
+    "@chakra-ui/utils": "^2.0.14",
+    "@emotion/react": "~11.10.8",
+    "@emotion/styled": "~11.10.8",
     "@hookform/resolvers": "^2.9.7",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^0.27.2",
     "framer-motion": "6.3.0",
-    "react-hook-form": "^7.34.0",
-    "react-icons": "^4.4.0",
+    "react-hook-form": "^7.43.9",
+    "react-icons": "^4.8.0",
     "react-is": "^18.2.0",
     "react-router-dom": "^5.3.3",
-    "react-select": "^5.4.0",
+    "react-select": "^5.7.3",
     "yup": "^0.32.11"
   },
   "resolutions": {

package/src/components/card/Card.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Card, CardProps } from '.';
+import { Flex, Text } from '@chakra-ui/react';
+import { Button } from '../button';
+import { Task } from '../icons/task';
+
+const meta: Meta<CardProps> = {
+  title: 'Card example',
+  component: Card,
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'Title of the card',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<CardProps> = args => (
+  <Flex flexDir="column" height="450px" justifyContent="space-between">
+    <Card
+      {...args}
+      title="Connect a Service"
+      leftIcon={<Task boxSize="18px" />}
+    >
+      <>
+        Description paragraph ipsum dolor sit ame tconsectetur. At pelle nte
+        sque
+        <Text as="b"> eget hendrt felis.</Text>
+      </>
+      <>
+        Description paragraph ipsum dolor sit ame tconsectetur. At pelle nte
+        sque eget hendrt felis.
+      </>
+      <Button
+        text="Acti asdf asdfads fon"
+        ariaLabel="Action"
+        width="fixed"
+        variant="secondary"
+        onClick={() => {
+          console.log('button on click');
+        }}
+      />
+    </Card>
+  </Flex>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Card title',
+};

package/src/components/card/index.tsx

@@ -0,0 +1,78 @@
+import React, { Children, ReactNode } from 'react';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import colors from '../../theme/foundations/colors';
+import typography from '../../theme/foundations/typography';
+import { Button } from '../button';
+
+export interface CardProps {
+  title: string | ReactNode;
+  leftIcon?: JSX.Element;
+  children: ReactNode | null;
+  height?: string | number;
+}
+
+/**
+ * A functional React component utilized to render the `Card` component
+ */
+export const Card: React.FC<CardProps> = ({
+  title,
+  leftIcon,
+  children,
+  height = 'auto',
+}) => {
+  return (
+    <Box
+      bg={colors.fill.light.quaternary}
+      borderRadius="4px"
+      border={`.5px solid ${colors.border.default}`}
+      py="8px"
+      px="8px"
+      height={height}
+      overflowY="auto"
+      width="206px"
+      _notLast={{ marginBottom: '8px' }}
+    >
+      {title && (
+        <Flex
+          display="flex"
+          alignItems="center"
+          justifyContent="start"
+          textDecoration="none"
+          _hover={{ textDecoration: 'none' }}
+          mb="8px"
+        >
+          <Flex alignItems="center">
+            <Box mr="4px">{leftIcon}</Box>
+            <Text
+              color={colors.label.primary.light}
+              fontSize={typography.fontSizes.sm}
+              fontWeight={typography.fontWeights.medium}
+            >
+              {title}
+            </Text>
+          </Flex>
+        </Flex>
+      )}
+      {Children.map(children, child => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+        if (child.type !== Button) {
+          return (
+            <Text
+              as="div"
+              _notLast={{ marginBottom: '8px' }}
+              color={colors.label.primary.light}
+              fontSize={typography.fontSizes.xs}
+              fontWeight={typography.fontWeights.normal}
+            >
+              {child}
+            </Text>
+          );
+        } else {
+          return <Box mt="8px">{child}</Box>;
+        }
+      })}
+    </Box>
+  );
+};

package/src/components/icons/dropdown/dropdown.svg

@@ -1,3 +1,3 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C0.89543 12 -3.91405e-08 11.1046 -8.74228e-08 10L-4.37114e-07 2C-4.85396e-07 0.895431 0.89543 -3.91405e-08 2 -8.74228e-08L10 -4.37114e-07C11.1046 -4.85396e-07 12 0.89543 12 2L12 10C12 11.1046 11.1046 12 10 12L2 12ZM6 2.5C6.13261 2.5 6.25979 2.55268 6.35355 2.64645L7.85355 4.14645C8.04881 4.34171 8.04881 4.65829 7.85355 4.85355C7.65829 5.04882 7.34171 5.04882 7.14645 4.85355L6 3.70711L4.85355 4.85355C4.65829 5.04882 4.34171 5.04882 4.14645 4.85355C3.95118 4.65829 3.95118 4.34171 4.14645 4.14645L5.64645 2.64645C5.74021 2.55268 5.86739 2.5 6 2.5ZM5.64645 9.35355C5.74021 9.44732 5.86739 9.5 6 9.5C6.13261 9.5 6.25978 9.44732 6.35355 9.35355L7.85355 7.85355C8.04882 7.65829 8.04882 7.34171 7.85355 7.14645C7.65829 6.95118 7.34171 6.95118 7.14645 7.14645L6 8.29289L4.85355 7.14645C4.65829 6.95118 4.34171 6.95118 4.14645 7.14645C3.95118 7.34171 3.95118 7.65829 4.14645 7.85355L5.64645 9.35355Z" fill="#0082FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C0.89543 12 -3.91405e-08 11.1046 -8.74228e-08 10L-4.37114e-07 2C-4.85396e-07 0.895431 0.89543 -3.91405e-08 2 -8.74228e-08L10 -4.37114e-07C11.1046 -4.85396e-07 12 0.89543 12 2L12 10C12 11.1046 11.1046 12 10 12L2 12ZM6 2.5C6.13261 2.5 6.25979 2.55268 6.35355 2.64645L7.85355 4.14645C8.04881 4.34171 8.04881 4.65829 7.85355 4.85355C7.65829 5.04882 7.34171 5.04882 7.14645 4.85355L6 3.70711L4.85355 4.85355C4.65829 5.04882 4.34171 5.04882 4.14645 4.85355C3.95118 4.65829 3.95118 4.34171 4.14645 4.14645L5.64645 2.64645C5.74021 2.55268 5.86739 2.5 6 2.5ZM5.64645 9.35355C5.74021 9.44732 5.86739 9.5 6 9.5C6.13261 9.5 6.25978 9.44732 6.35355 9.35355L7.85355 7.85355C8.04882 7.65829 8.04882 7.34171 7.85355 7.14645C7.65829 6.95118 7.34171 6.95118 7.14645 7.14645L6 8.29289L4.85355 7.14645C4.65829 6.95118 4.34171 6.95118 4.14645 7.14645C3.95118 7.34171 3.95118 7.65829 4.14645 7.85355L5.64645 9.35355Z" fill="current"/>
 </svg>

package/src/components/icons/dropdown/index.tsx

@@ -3,11 +3,14 @@ import { ReactComponent as DropdownIcon } from './dropdown.svg';
 
 export interface DropdownProps {
   boxSize: number | string;
+  disabled?: boolean;
 }
 
 /**
  * A functional React component utilized to render the `Dropdown` icon component
  */
-export const Dropdown: React.FC<DropdownProps> = ({ boxSize }) => {
-  return <DropdownIcon boxSize={boxSize} />;
+export const Dropdown: React.FC<DropdownProps> = ({ boxSize, disabled }) => {
+  return (
+    <DropdownIcon boxSize={boxSize} fill={disabled ? '#3C3C4399' : '#0082FF'} />
+  );
 };

package/src/components/icons/folder/fill/folder-fill-gradient.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 102.4 89.6">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-1, .cls-2 {
+        fill-opacity: .8;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="67.42" y1="97.14" x2="14.33" y2="13.53" gradientTransform="translate(0 91.6) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff81e2"/>
+      <stop offset="1" stop-color="#0082ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="87.33" y1="84.5" x2="34.24" y2=".89" gradientTransform="translate(0 91.6) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff81e2"/>
+      <stop offset="1" stop-color="#0082ff"/>
+    </linearGradient>
+  </defs>
+  <path class="cls-3" d="m11.2,0C5.01,0,0,5.01,0,11.2v20.87c3.23-2.07,7.08-3.27,11.2-3.27h80c4.12,0,7.97,1.2,11.2,3.27v-8.07c0-6.19-5.01-11.2-11.2-11.2h-30.95c-.42,0-.83-.17-1.13-.47l-9.05-9.05c-2.1-2.1-4.95-3.28-7.92-3.28H11.2Z"/>
+  <path class="cls-2" d="m11.2,0C5.01,0,0,5.01,0,11.2v20.87c3.23-2.07,7.08-3.27,11.2-3.27h80c4.12,0,7.97,1.2,11.2,3.27v-8.07c0-6.19-5.01-11.2-11.2-11.2h-30.95c-.42,0-.83-.17-1.13-.47l-9.05-9.05c-2.1-2.1-4.95-3.28-7.92-3.28H11.2Z"/>
+  <path class="cls-3" d="m11.2,38.4c-6.19,0-11.2,5.01-11.2,11.2v28.8c0,6.19,5.01,11.2,11.2,11.2h80c6.19,0,11.2-5.01,11.2-11.2v-28.8c0-6.19-5.01-11.2-11.2-11.2H11.2Z"/>
+  <path class="cls-1" d="m11.2,38.4c-6.19,0-11.2,5.01-11.2,11.2v28.8c0,6.19,5.01,11.2,11.2,11.2h80c6.19,0,11.2-5.01,11.2-11.2v-28.8c0-6.19-5.01-11.2-11.2-11.2H11.2Z"/>
+</svg>

package/src/components/icons/folder/fill/index.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import { ReactComponent as FolderFillIcon } from './folder-fill.svg';
+import { ReactComponent as FolderFillGradientIcon } from './folder-fill-gradient.svg';
 
 export interface FolderFillProps {
   boxSize: number | string;
+  gradient?: boolean;
 }
 
 /**
  * A functional React component utilized to render the `FolderFill` icon component
  */
-export const FolderFill: React.FC<FolderFillProps> = ({ boxSize }) => {
+export const FolderFill: React.FC<FolderFillProps> = ({
+  boxSize,
+  gradient = false,
+}) => {
+  if (gradient) {
+    return <FolderFillGradientIcon width={boxSize} height={boxSize} />;
+  }
   return <FolderFillIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/index.tsx

@@ -34,7 +34,11 @@ import { Question } from './question';
 import { Video } from './video';
 import { Page } from './page';
 import { Workspace } from './workspace';
+import { Task } from './task';
 
+export interface IconProps {
+  boxSize: string;
+}
 export {
   Checkmark,
   ChevronDown,
@@ -72,4 +76,5 @@ export {
   Video,
   Warning,
   Workspace,
+  Task,
 };

package/src/components/icons/task/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ReactComponent as TaskIcon } from './task.svg';
+import { IconProps } from '..';
+
+/**
+ * A functional React component utilized to render the `Task` icon component
+ */
+export const Task: React.FC<IconProps> = ({ boxSize }) => {
+  return <TaskIcon boxSize={boxSize} />;
+};

package/src/components/icons/task/task.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="8" fill="#FFB300"/>
+<rect width="16" height="16" rx="8" fill="url(#paint0_linear_2027_23020)" fill-opacity="0.16"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8421 9.59139C12.412 9.28926 12.8002 8.68997 12.8002 8.00001C12.8002 7.31005 12.412 6.71077 11.8421 6.40864C12.0315 5.79203 11.8822 5.09376 11.3943 4.60589C10.9064 4.11801 10.2082 3.96874 9.59156 4.15809C9.28944 3.5882 8.69015 3.20001 8.0002 3.20001C7.31024 3.20001 6.71094 3.58821 6.40882 4.1581C5.79221 3.96877 5.09396 4.11803 4.60608 4.60591C4.11821 5.09378 3.96894 5.79203 4.15828 6.40864C3.58839 6.71077 3.2002 7.31006 3.2002 8.00001C3.2002 8.68997 3.58839 9.28926 4.15828 9.59138C3.96894 10.208 4.1182 10.9063 4.60608 11.3941C5.09396 11.882 5.79221 12.0313 6.40882 11.8419C6.71095 12.4118 7.31024 12.8 8.0002 12.8C8.69016 12.8 9.28945 12.4118 9.59157 11.8419C10.2082 12.0313 10.9064 11.882 11.3943 11.3941C11.8822 10.9062 12.0314 10.208 11.8421 9.59139ZM10.3141 6.91469C10.4603 6.7137 10.4159 6.43226 10.2149 6.28608C10.0139 6.1399 9.73244 6.18434 9.58626 6.38534L7.49601 9.25943L6.36839 8.13181C6.19266 7.95608 5.90773 7.95608 5.732 8.13181C5.55626 8.30755 5.55626 8.59247 5.732 8.76821L7.232 10.2682C7.32506 10.3613 7.45419 10.4089 7.5854 10.3986C7.7166 10.3883 7.83672 10.3211 7.91413 10.2147L10.3141 6.91469Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2027_23020" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/input/StackedMultiSelect/index.tsx

@@ -261,7 +261,7 @@ const StackedMultiSelect = React.forwardRef<
       <Flex
         fontSize="13px"
         h="26px"
-        border={isFocussed ? '2px solid' : '1px solid'}
+        border={isFocussed ? '2px solid' : '.5px solid'}
         borderColor={isFocussed ? colors.border.focus : colors.border.default}
         py="5px"
         pl="8px"
@@ -330,7 +330,7 @@ const StackedMultiSelect = React.forwardRef<
           _focus={{ boxShadow: 'none !important' }}
         />
         <Flex mr="4px" justifyContent="center" alignItems="center">
-          <DropdownIcon boxSize="16px" />
+          <DropdownIcon boxSize="16px" disabled={disabled} />
         </Flex>
       </Flex>
       {isFocussed && (

package/src/components/input/StackedPilledInput/index.tsx

@@ -217,7 +217,7 @@ const StackedPilledInput = React.forwardRef<
     <Box position="relative">
       <Flex
         fontSize="13px"
-        border={isFocussed ? '2px solid' : '1px solid'}
+        border={isFocussed ? '2px solid' : '.5px solid'}
         borderColor={isFocussed ? colors.border.focus : colors.border.default}
         pl="8px"
         borderRadius="4px"
@@ -288,34 +288,36 @@ const StackedPilledInput = React.forwardRef<
             </Text>
           ) : null}
         </Flex>
-        <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
-          <Input
-            onKeyDown={onHandleKeyDown}
-            type="text"
-            padding={0}
-            alignContent="flex-start"
-            float="right"
-            border="none"
-            height="auto"
-            color={tokenIndex !== null ? 'transparent' : colors.label.primary}
-            _focus={{ boxShadow: 'none !important' }}
-            value={localValue}
-            onChange={e =>
-              tokenIndex === null &&
-              setLocalValue(
-                e.target.value.trim().replace(',', '').length
-                  ? e.target.value
-                  : ''
-              )
-            }
-            ref={inputRef}
-            onFocus={() => setIsFocussed(true)}
-            onBlur={() => {
-              setIsFocussed(false);
-              return setTokenIndex(null);
-            }}
-          />
-        </Flex>
+        {!disabled && (
+          <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
+            <Input
+              onKeyDown={onHandleKeyDown}
+              type="text"
+              padding={0}
+              alignContent="flex-start"
+              float="right"
+              border="none"
+              height="auto"
+              color={tokenIndex !== null ? 'transparent' : colors.label.primary}
+              _focus={{ boxShadow: 'none !important' }}
+              value={localValue}
+              onChange={e =>
+                tokenIndex === null &&
+                setLocalValue(
+                  e.target.value.trim().replace(',', '').length
+                    ? e.target.value
+                    : ''
+                )
+              }
+              ref={inputRef}
+              onFocus={() => setIsFocussed(true)}
+              onBlur={() => {
+                setIsFocussed(false);
+                return setTokenIndex(null);
+              }}
+            />
+          </Flex>
+        )}
       </Flex>
     </Box>
   );

package/src/components/input/StackedSelect/index.tsx

@@ -212,7 +212,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             cursor={disabled ? 'not-allowed' : 'pointer'}
             onClick={() => !disabled && setIsFocussed(!isFocussed)}
           >
-            <DropdownIcon boxSize="16px" />
+            <DropdownIcon boxSize="16px" disabled={disabled} />
           </InputRightElement>
         </InputGroup>
         {isFocussed && (

package/src/index.tsx

@@ -11,6 +11,9 @@ export * from './components/breadcrumbs';
 // Button
 export * from './components/button';
 
+// Card
+export * from './components/card';
+
 // Google Button
 export * from './components/button/google';
 

package/src/theme/components/input.ts

@@ -11,7 +11,7 @@ const baseStyle = {
     },
     py: '5px',
     px: '8px',
-    border: '1px solid',
+    border: '.5px solid',
     borderColor: colors.border.default,
     _disabled: {
       opacity: 1,

package/src/theme/foundations/colors.ts

@@ -72,7 +72,8 @@ const label = {
 
 const border = {
   focus: '#3A6CD980',
-  default: '#9999991A',
+  default: '#D9D9D9',
+  light: '#99999919A',
 };
 
 const blur = {