@xqmsg/ui-core 0.23.1-rc.0 → 0.23.1-rc.2

package/src/components/input/StackedTextarea/StackedTextarea.tsx

@@ -1,53 +1,55 @@
-import React from 'react';
-import { Flex, Textarea } from '@chakra-ui/react';
-import { TextareaFieldProps } from '../InputTypes';
-
-export interface StackedTextareaProps extends TextareaFieldProps {
-  isRequired?: boolean;
-  allowDefault?: boolean;
-  variant: string;
-}
-
-/**
- * A functional React component utilized to render the `StackedTextarea` component.
- */
-const StackedTextarea = React.forwardRef<
-  HTMLTextAreaElement,
-  StackedTextareaProps
->(({ isRequired, allowDefault, variant, ...props }, _ref) => {
-  if (variant === 'mobile') {
-    return (
-      <Flex>
-        {allowDefault}
-        <Textarea
-          ref={_ref}
-          {...props}
-          variant={variant}
-          fontSize="17px"
-          onKeyDown={e => {
-            if (e.key === 'Enter' && !allowDefault) {
-              e.stopPropagation();
-              e.preventDefault();
-            }
-          }}
-        />
-      </Flex>
-    );
-  }
-  return (
-    <Textarea
-      ref={_ref}
-      {...props}
-      variant={variant}
-      fontSize={variant === '' ? '13px' : '17px'}
-      onKeyDown={e => {
-        if (e.key === 'Enter' && !allowDefault) {
-          e.stopPropagation();
-          e.preventDefault();
-        }
-      }}
-    />
-  );
-});
-
-export default StackedTextarea;
+import React from 'react';
+import { Flex, Textarea } from '@chakra-ui/react';
+import { TextareaFieldProps } from '../InputTypes';
+
+export interface StackedTextareaProps extends TextareaFieldProps {
+  isRequired?: boolean;
+  allowDefault?: boolean;
+  variant: string;
+  label?: string;
+}
+
+/**
+ * A functional React component utilized to render the `StackedTextarea` component.
+ */
+const StackedTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  StackedTextareaProps
+>(({ isRequired, allowDefault, variant, label, ...props }, _ref) => {
+  const isMobile = variant === 'mobile';
+  if (isMobile) {
+    return (
+      <Flex>
+        <Textarea
+          ref={_ref}
+          {...props}
+          variant={variant}
+          fontSize="17px"
+          placeholder={label ?? ''}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && !allowDefault) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          }}
+        />
+      </Flex>
+    );
+  }
+  return (
+    <Textarea
+      ref={_ref}
+      {...props}
+      variant={variant}
+      fontSize="13px"
+      onKeyDown={e => {
+        if (e.key === 'Enter' && !allowDefault) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }}
+    />
+  );
+});
+
+export default StackedTextarea;

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

@@ -1,111 +1,111 @@
-import React, { RefObject, useMemo } from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import colors from '../../../../../src/theme/foundations/colors';
-import { FieldOption, FieldOptions } from '../../InputTypes';
-
-export interface DropdownProps {
-  onSelectItem: (option: FieldOption) => void;
-  options: FieldOptions;
-  dropdownRef: RefObject<HTMLDivElement>;
-  position: 'top' | 'bottom';
-  optionIndex?: number | null;
-}
-
-/**
- * A functional React component utilized to render the `Dropdown` component
- */
-export const Dropdown: React.FC<DropdownProps> = ({
-  onSelectItem,
-  options,
-  dropdownRef,
-  position,
-  optionIndex,
-}) => {
-  const DropdownContent = useMemo(() => {
-    return options.map((option, idx) => (
-      <Box key={idx} width="100%" role="combobox">
-        {option.value === 'section_header' &&
-          options[idx + 1] &&
-          options[idx + 1].value !== 'section_header' && (
-            <Box
-              color={colors.label.secondary.light}
-              fontSize="13px"
-              width="100%"
-              fontWeight="bold"
-              px="8px"
-              bg="inherit"
-              whiteSpace="nowrap"
-            >
-              {idx > 0 && (
-                <Box
-                  width="100%"
-                  my="3px"
-                  borderTop="2px solid"
-                  borderColor={colors.border.default}
-                />
-              )}
-              {option.label}
-            </Box>
-          )}
-        {option.value !== 'section_header' && (
-          <Box
-            cursor="pointer"
-            borderRadius="inherit"
-            onClick={() => onSelectItem(option)}
-            key={option.value}
-            fontSize="13px"
-            px="8px"
-            py="4px"
-            width="100%"
-            color={
-              optionIndex === idx
-                ? colors.label.primary.dark
-                : colors.label.primary.light
-            }
-            _hover={{
-              color: colors.label.primary.dark,
-              bg: colors.fill.action,
-              borderRadius: '4px',
-              width: '100%',
-            }}
-            bg={optionIndex === idx ? colors.fill.action : 'inherit'}
-            whiteSpace="nowrap"
-            id={option.value}
-          >
-            {option.label}
-          </Box>
-        )}
-      </Box>
-    ));
-  }, [onSelectItem, optionIndex, options]);
-
-  if (!options) return null;
-
-  return (
-    <Flex
-      flexDirection="column"
-      ref={dropdownRef}
-      scrollMargin="15px"
-      bg={colors.fill.light.quaternary}
-      backdropFilter="auto"
-      backdropBlur="64px"
-      borderRadius="4px"
-      border="0.25px solid"
-      borderColor={colors.fill.light.tertiary}
-      mt="3px"
-      maxH="240px"
-      overflowY="auto"
-      px="8px"
-      py="4px"
-      position="absolute"
-      top={position === 'top' ? 26 : undefined}
-      bottom={position === 'bottom' ? 30 : undefined}
-      width="fit-content"
-      minWidth="100%"
-      zIndex={100}
-      tabIndex={-2000}
-    >
-      {DropdownContent}
-    </Flex>
-  );
-};
+import React, { RefObject, useMemo } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import colors from '../../../../../src/theme/foundations/colors';
+import { FieldOption, FieldOptions } from '../../InputTypes';
+
+export interface DropdownProps {
+  onSelectItem: (option: FieldOption) => void;
+  options: FieldOptions;
+  dropdownRef: RefObject<HTMLDivElement>;
+  position: 'top' | 'bottom';
+  optionIndex?: number | null;
+}
+
+/**
+ * A functional React component utilized to render the `Dropdown` component
+ */
+export const Dropdown: React.FC<DropdownProps> = ({
+  onSelectItem,
+  options,
+  dropdownRef,
+  position,
+  optionIndex,
+}) => {
+  const DropdownContent = useMemo(() => {
+    return options.map((option, idx) => (
+      <Box key={idx} width="100%" role="combobox">
+        {option.value === 'section_header' &&
+          options[idx + 1] &&
+          options[idx + 1].value !== 'section_header' && (
+            <Box
+              color={colors.label.secondary.light}
+              fontSize="13px"
+              width="100%"
+              fontWeight="bold"
+              px="8px"
+              bg="inherit"
+              whiteSpace="nowrap"
+            >
+              {idx > 0 && (
+                <Box
+                  width="100%"
+                  my="3px"
+                  borderTop="2px solid"
+                  borderColor={colors.border.default}
+                />
+              )}
+              {option.label}
+            </Box>
+          )}
+        {option.value !== 'section_header' && (
+          <Box
+            cursor="pointer"
+            borderRadius="inherit"
+            onClick={() => onSelectItem(option)}
+            key={option.value}
+            fontSize="13px"
+            px="8px"
+            py="4px"
+            width="100%"
+            color={
+              optionIndex === idx
+                ? colors.label.primary.dark
+                : colors.label.primary.light
+            }
+            _hover={{
+              color: colors.label.primary.dark,
+              bg: colors.fill.action,
+              borderRadius: '4px',
+              width: '100%',
+            }}
+            bg={optionIndex === idx ? colors.fill.action : 'inherit'}
+            whiteSpace="nowrap"
+            id={option.value}
+          >
+            {option.label}
+          </Box>
+        )}
+      </Box>
+    ));
+  }, [onSelectItem, optionIndex, options]);
+
+  if (!options) return null;
+
+  return (
+    <Flex
+      flexDirection="column"
+      ref={dropdownRef}
+      scrollMargin="15px"
+      bg={colors.fill.light.quaternary}
+      backdropFilter="auto"
+      backdropBlur="64px"
+      borderRadius="4px"
+      border="0.25px solid"
+      borderColor={colors.fill.light.tertiary}
+      mt="3px"
+      maxH="240px"
+      overflowY="auto"
+      px="8px"
+      py="4px"
+      position="absolute"
+      top={position === 'top' ? 26 : undefined}
+      bottom={position === 'bottom' ? 30 : undefined}
+      width="fit-content"
+      minWidth="100%"
+      zIndex={100}
+      tabIndex={-2000}
+    >
+      {DropdownContent}
+    </Flex>
+  );
+};

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

@@ -1,35 +1,35 @@
-import React from 'react';
-import { Box, FormLabel, Tooltip } from '@chakra-ui/react';
-import colors from '../../../../../src/theme/foundations/colors';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
-
-export interface LabelProps {
-  label: string;
-  tooltipText?: string;
-  isRequired?: boolean;
-}
-
-/**
- * A functional React component utilized to render the `Label` component
- */
-export const Label: React.FC<LabelProps> = ({
-  tooltipText,
-  isRequired,
-  label,
-}) => {
-  return (
-    <FormLabel display="flex" ml="0">
-      {label}
-      {isRequired && (
-        <Box ml={1} color={colors.label.error}>
-          *
-        </Box>
-      )}
-      {!!tooltipText && (
-        <Tooltip label={tooltipText} placement="top">
-          <QuestionOutlineIcon boxSize="13px" ml="8px" />
-        </Tooltip>
-      )}
-    </FormLabel>
-  );
-};
+import React from 'react';
+import { Box, FormLabel, Tooltip } from '@chakra-ui/react';
+import colors from '../../../../../src/theme/foundations/colors';
+import { QuestionOutlineIcon } from '@chakra-ui/icons';
+
+export interface LabelProps {
+  label: string;
+  tooltipText?: string;
+  isRequired?: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `Label` component
+ */
+export const Label: React.FC<LabelProps> = ({
+  tooltipText,
+  isRequired,
+  label,
+}) => {
+  return (
+    <FormLabel display="flex" ml="0">
+      {label}
+      {isRequired && (
+        <Box ml={1} color={colors.label.error}>
+          *
+        </Box>
+      )}
+      {!!tooltipText && (
+        <Tooltip label={tooltipText} placement="top">
+          <QuestionOutlineIcon boxSize="13px" ml="8px" />
+        </Tooltip>
+      )}
+    </FormLabel>
+  );
+};

package/src/components/input/components/token/Token.stories.tsx

@@ -1,25 +1,25 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { Box } from '@chakra-ui/react';
-import Token, { TokenProps } from '.';
-
-const meta: Meta<TokenProps> = {
-  title: 'Token example',
-  component: Token,
-  argTypes: {},
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-const Template: Story<TokenProps> = args => (
-  <Box width="fit-content">
-    <Token {...args} onDelete={() => null} />
-  </Box>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Label',
-};
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import Token, { TokenProps } from '.';
+
+const meta: Meta<TokenProps> = {
+  title: 'Token example',
+  component: Token,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+const Template: Story<TokenProps> = args => (
+  <Box width="fit-content">
+    <Token {...args} onDelete={() => null} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Label',
+};

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

@@ -1,45 +1,45 @@
-import { Flex, Text } from '@chakra-ui/react';
-import { truncate } from 'lodash';
-import React from 'react';
-import { Close } from '../../../icons/close';
-import colors from '../../../../../src/theme/foundations/colors';
-
-export interface TokenProps {
-  label: any;
-  onDelete: any;
-  isMobile?: boolean;
-}
-
-// For v1 we are truncating the label at 15 characters to avoid overflow
-const Token: React.FC<TokenProps> = ({ label, onDelete, isMobile = false }) => {
-  return (
-    <Flex
-      key={label}
-      borderRadius={'full'}
-      backgroundColor="#7676801F"
-      alignItems="center"
-      width="fit-content"
-      w="auto"
-      h={isMobile ? '18px' : '16px'}
-      pl="6px"
-      pr="2px"
-      py="2px"
-      position="relative"
-    >
-      <Text
-        whiteSpace="nowrap"
-        color={colors.label.primary.light}
-        fontSize={isMobile ? '17px' : '13px'}
-        pr="4px"
-      >
-        {truncate(label.trim(), {
-          length: 15,
-          omission: '...',
-        })}
-      </Text>
-      <Close boxSize={isMobile ? '17px' : '11px'} onClick={onDelete} />
-    </Flex>
-  );
-};
-
-export default Token;
+import { Flex, Text } from '@chakra-ui/react';
+import { truncate } from 'lodash';
+import React from 'react';
+import { Close } from '../../../icons/close';
+import colors from '../../../../../src/theme/foundations/colors';
+
+export interface TokenProps {
+  label: any;
+  onDelete: any;
+  isMobile?: boolean;
+}
+
+// For v1 we are truncating the label at 15 characters to avoid overflow
+const Token: React.FC<TokenProps> = ({ label, onDelete, isMobile = false }) => {
+  return (
+    <Flex
+      key={label}
+      borderRadius={'full'}
+      backgroundColor="#7676801F"
+      alignItems="center"
+      width="fit-content"
+      w="auto"
+      h={isMobile ? '18px' : '16px'}
+      pl="6px"
+      pr="2px"
+      py="2px"
+      position="relative"
+    >
+      <Text
+        whiteSpace="nowrap"
+        color={colors.label.primary.light}
+        fontSize={isMobile ? '17px' : '13px'}
+        pr="4px"
+      >
+        {truncate(label.trim(), {
+          length: 15,
+          omission: '...',
+        })}
+      </Text>
+      <Close boxSize={isMobile ? '17px' : '11px'} onClick={onDelete} />
+    </Flex>
+  );
+};
+
+export default Token;