@xqmsg/ui-core 0.24.1 → 0.24.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.1",
+  "version": "0.24.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/{table/Table.stories.tsx → SimpleTable/SimpleTable.stories.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Text } from '../text';
-import { Table, TableProps } from '.';
+import { SimpleTable, SimpleTableProps } from './SimpleTable';
 import { TableBody, TableHeaders } from './TableTypes';
 import { useArgs } from '@storybook/addons';
 
@@ -21,9 +21,9 @@ const tableBody: TableBody<typeof tableColumns> = [
   { AppliesToTypes: 'hi', bar: 'hey' },
 ];
 
-const meta: Meta<TableProps<typeof tableColumns>> = {
+const meta: Meta<SimpleTableProps<typeof tableColumns>> = {
   title: 'Table example',
-  component: Table,
+  component: SimpleTable,
   argTypes: {
     body: {
       description:
@@ -45,11 +45,14 @@ const meta: Meta<TableProps<typeof tableColumns>> = {
   },
 };
 export default meta;
-const Template: Story<TableProps<typeof tableColumns>> = args => {
+const Template: Story<SimpleTableProps<typeof tableColumns>> = args => {
   const [, updateArgs] = useArgs();
 
   return (
-    <Table {...args} loadMore={() => updateArgs({ ...args, loading: true })} />
+    <SimpleTable
+      {...args}
+      loadMore={() => updateArgs({ ...args, loading: true })}
+    />
   );
 };
 

package/src/components/{table/index.tsx → SimpleTable/SimpleTable.tsx}

@@ -20,7 +20,7 @@ import { TableLoadingRows } from './components/loading';
 import colors from '../../theme/foundations/colors';
 import { EmptyTable } from './empty';
 
-export interface TableProps<T extends ReadonlyTableColumns> {
+export interface SimpleTableProps<T extends ReadonlyTableColumns> {
   columns: TableColumns;
   headers?: TableHeaders<T>;
   body: TableBody<T>;
@@ -32,13 +32,13 @@ export interface TableProps<T extends ReadonlyTableColumns> {
 /**
  * A React component utilized to render the `Table` component
  */
-export function Table<T extends ReadonlyTableColumns>({
+export function SimpleTable<T extends ReadonlyTableColumns>({
   columns,
   headers,
   body,
   loading,
   loadMore,
-}: TableProps<T>) {
+}: SimpleTableProps<T>) {
   const columnsAsConst = generateTableColumnsAsConst(columns);
 
   return (

package/src/components/{table → SimpleTable}/components/text/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
-import colors from '../../../../../src/theme/foundations/colors';
+import colors from '../../../../theme/foundations/colors';
 
 export interface TableTextProps {
   primaryText: string;

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

@@ -1,14 +1,22 @@
 import React from 'react';
 import { Image } from '@chakra-ui/react';
 import path from './workspace.png';
+import { ReactComponent as WorkspaceIcon } from './workspace.svg';
 
 export interface WorkspaceProps {
   boxSize: number | string;
+  filled?: boolean;
 }
 
 /**
  * A functional React component utilized to render the `Workspace` icon component
  */
-export const Workspace: React.FC<WorkspaceProps> = ({ boxSize }) => {
+export const Workspace: React.FC<WorkspaceProps> = ({
+  boxSize,
+  filled = false,
+}) => {
+  if (filled) {
+    return <WorkspaceIcon boxSize={boxSize} />;
+  }
   return <Image src={path} boxSize={boxSize} />;
 };

package/src/components/icons/workspace/workspace.svg

@@ -0,0 +1,8 @@
+<svg width="56" height="51" viewBox="0 0 56 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 10.75C18 5.22715 22.4772 0.75 28 0.75C33.5228 0.75 38 5.22715 38 10.75C38 16.2728 33.5228 20.75 28 20.75C22.4772 20.75 18 16.2728 18 10.75Z" fill="#0082FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38 18.75C38 14.3317 41.5817 10.75 46 10.75C50.4183 10.75 54 14.3317 54 18.75C54 23.1683 50.4183 26.75 46 26.75C41.5817 26.75 38 23.1683 38 18.75Z" fill="#0082FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18.75C2 14.3317 5.58172 10.75 10 10.75C14.4183 10.75 18 14.3317 18 18.75C18 23.1683 14.4183 26.75 10 26.75C5.58172 26.75 2 23.1683 2 18.75Z" fill="#0082FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8263 33.0634C16.0209 28.0684 21.6223 24.75 28 24.75C34.3785 24.75 39.9805 28.0692 43.1749 33.0652C45.3833 36.5191 46.3387 40.6838 45.8906 44.7445C45.8205 45.379 45.4517 45.942 44.898 46.2598C39.9184 49.117 34.1469 50.75 28 50.75C21.8531 50.75 16.0816 49.117 11.102 46.2598C10.5482 45.942 10.1795 45.379 10.1094 44.7445C9.66116 40.6831 10.6171 36.5176 12.8263 33.0634Z" fill="#0082FF"/>
+<path d="M9.55275 30.7598C9.52064 30.8092 9.48872 30.8586 9.457 30.9082C6.88244 34.9337 5.70421 39.7278 6.0659 44.454C4.44445 44.2077 2.87119 43.8116 1.36114 43.2798L1.05459 43.1718C0.495356 42.9749 0.104606 42.467 0.0575759 41.876L0.031795 41.552C0.0107124 41.2871 0 41.0196 0 40.75C0 35.377 4.23745 30.9938 9.55275 30.7598Z" fill="#0082FF"/>
+<path d="M49.935 44.4539C50.2966 39.7287 49.119 34.9355 46.5454 30.9105C46.5132 30.8601 46.4808 30.8099 46.4482 30.7599C51.7631 30.9943 56 35.3774 56 40.75C56 41.0196 55.9893 41.2871 55.9682 41.552L55.9424 41.876C55.8954 42.467 55.5046 42.9749 54.9454 43.1718L54.6389 43.2798C53.1291 43.8115 51.5561 44.2076 49.935 44.4539Z" fill="#0082FF"/>
+</svg>

package/src/components/input/Input.stories.tsx

@@ -6,6 +6,19 @@ import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
 import { SelectNative } from '../select';
+import {
+  Box,
+  Flex,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  Tooltip,
+  Text,
+} from '@chakra-ui/react';
+import { Question } from '../icons';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -133,6 +146,25 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
       />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+        tooltipText={
+          <Box>
+            <Text fontSize={13}>Explanation!</Text>
+            <Text>Are you sure you want to have that milkshake?</Text>
+          </Box>
+        }
+      />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+        tooltipText="test text"
+      />
       <Input
         {...args}
         inputType="textarea"
@@ -174,6 +206,19 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop4"
         defaultValue={'value1'}
       />
+      <Input
+        {...args}
+        inputType="select"
+        setValue={form.setValue}
+        name="prop4"
+        defaultValue={'value1'}
+        tooltipText={
+          <Box>
+            <Text fontSize={13}>Explanation!</Text>
+            <Text>Are you sure you want to have that milkshake?</Text>
+          </Box>
+        }
+      />
       <SelectNative
         {...args}
         setValue={form.setValue}

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

@@ -1,11 +1,19 @@
 import React from 'react';
-import { Box, FormLabel, Tooltip } from '@chakra-ui/react';
+import {
+  Box,
+  FormLabel,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from '@chakra-ui/react';
 import colors from '../../../../../src/theme/foundations/colors';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import { QuestionIcon } from '@chakra-ui/icons';
 
 export interface LabelProps {
   label: string;
-  tooltipText?: string;
+  tooltipText?: string | React.ReactNode;
   isRequired?: boolean;
 }
 
@@ -26,9 +34,17 @@ export const Label: React.FC<LabelProps> = ({
         </Box>
       )}
       {!!tooltipText && (
-        <Tooltip label={tooltipText} placement="top">
-          <QuestionOutlineIcon boxSize="13px" ml="8px" />
-        </Tooltip>
+        <Popover trigger="hover" placement="top">
+          <PopoverTrigger>
+            <Box as="span">
+              <QuestionIcon boxSize="13px" ml={1} color={colors.fill.action} />
+            </Box>
+          </PopoverTrigger>
+          <PopoverContent>
+            <PopoverArrow />
+            <PopoverBody>{tooltipText}</PopoverBody>
+          </PopoverContent>
+        </Popover>
       )}
     </FormLabel>
   );

package/src/components/input/index.tsx

@@ -42,7 +42,7 @@ export interface InputProps<T extends FieldValues = FieldValues>
   control: Control<T, any>;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
-  tooltipText?: string;
+  tooltipText?: string | React.ReactNode;
   setValue: UseFormSetValue<T>;
   setError: UseFormSetError<T>;
   clearErrors: UseFormClearErrors<T>;

package/src/components/tabs/TabsWrapper.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Text } from '../text';
-import { Table, TableProps } from '../table';
-import { TableBody, TableHeaders } from '../table/TableTypes';
+import { SimpleTable, SimpleTableProps } from '../SimpleTable/SimpleTable';
+import { TableBody, TableHeaders } from '../SimpleTable/TableTypes';
 import { useMemo, useState } from '@storybook/addons';
 import { TabsWrapper, TabsWrapperProps } from '.';
 
@@ -48,7 +48,7 @@ enum Foo {
 }
 
 export default meta;
-const Template: Story<TableProps<typeof tableColumns>> = args => {
+const Template: Story<SimpleTableProps<typeof tableColumns>> = args => {
   const [index, setIndex] = useState(Foo.ALL);
 
   const body = useMemo(() => {
@@ -69,7 +69,7 @@ const Template: Story<TableProps<typeof tableColumns>> = args => {
       navIndex={index}
       setNavIndex={(index: number) => setIndex(index)}
     >
-      <Table
+      <SimpleTable
         {...args}
         body={body}
         borderTopRadius={false}

package/src/index.tsx

@@ -38,6 +38,9 @@ export * from './components/input';
 // Select
 export { SelectNative } from './components/select';
 
+// Label
+export * from './components/input/components/label';
+
 // Layout
 export * from './components/layout';
 
@@ -54,7 +57,7 @@ export * from './components/modal';
 export * from './components/navigation';
 
 // Table
-export * from './components/table';
+export { SimpleTable } from './components/SimpleTable/SimpleTable';
 
 // Table Nav
 export * from './components/tabs';

package/src/theme/components/popover.ts

@@ -0,0 +1,7 @@
+export default {
+  baseStyle: {
+    content: {
+      w: '100%',
+    },
+  },
+};

package/src/theme/customXQChakraTheme.ts

@@ -14,6 +14,7 @@ import FormLabel from './components/form-label';
 import Input from './components/input';
 import Link from './components/link';
 import Modal from './components/modal';
+import Popover from './components/popover';
 import Select from './components/select';
 import Switch from './components/switch';
 import Table from './components/table';
@@ -39,6 +40,7 @@ const customXQChakraTheme = extendTheme({
     Input,
     Link,
     Modal,
+    Popover,
     Select,
     Switch,
     Table,

package/dist/components/table/Table.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from '@storybook/react';
-import { TableProps } from '.';
-declare const tableColumns: string[];
-declare const meta: Meta<TableProps<typeof tableColumns>>;
-export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableProps<string[]>>;