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

package/package.json

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

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

@@ -187,6 +187,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         control={form.control}
         ariaLabel="expires in input"
         defaultValue={'value1'}
+        variant="mobile"
       />
       <Input
         {...args}

package/src/components/input/StackedInput/StackedInput.tsx

@@ -8,6 +8,7 @@ export interface StackedInputProps extends InputFieldProps {
   leftElement?: React.ReactNode;
   rightElement?: React.ReactNode;
   variant?: string;
+  label?: string;
 }
 
 /**
@@ -23,21 +24,25 @@ const StackedInput = React.forwardRef<HTMLInputElement, StackedInputProps>(
       defaultValue,
       allowDefault,
       variant,
+      label,
       ...props
     },
     _ref
   ) => {
+    const isMobile = variant === 'mobile';
+    const placeholder = isMobile && label ? label : undefined;
     return (
       <InputGroup>
         {leftElement && leftElement}
-        {variant}
+        {label}
         <Input
+          {...props}
+          placeholder={placeholder}
           type={type}
           isRequired={isRequired}
-          {...props}
           ref={_ref}
           defaultValue={defaultValue}
-          fontSize={variant === 'mobile' ? '17px' : '13px'}
+          fontSize={isMobile ? '17px' : '13px'}
           variant={variant}
           onKeyDown={e => {
             if (e.key === 'Enter' && !allowDefault) {

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

@@ -19,6 +19,7 @@ export interface StackedPilledInputProps extends InputFieldProps {
   control: Control<FieldValues, any>;
   separators?: string[];
   variant?: string;
+  label?: string;
 }
 
 /**
@@ -37,6 +38,7 @@ const StackedPilledInput = React.forwardRef<
       disabled,
       separators = ['Enter', ' ', ',', ';', 'Tab'],
       variant,
+      label,
     },
     _ref
   ) => {
@@ -258,6 +260,22 @@ const StackedPilledInput = React.forwardRef<
           borderRadius={isMobile ? '0' : '4px'}
           alignItems="center"
           justifyContent="space-between"
+          style={
+            isMobile
+              ? {
+                  cursor: 'pointer',
+                  height: '48px',
+                  fontSize: '17px',
+                  lineHeight: '20px',
+                  fontWeight: 400,
+                  padding: '12px 16px 12px 0px',
+                  borderRadius: 0,
+                  border: '0.5px solid rgba(153, 153, 153, 0.1)',
+                  borderLeft: 'none',
+                  borderRight: 'none',
+                }
+              : undefined
+          }
           onClick={() => {
             if (isFocussed && tokenIndex !== null) {
               setTokenIndex(null);
@@ -349,7 +367,13 @@ const StackedPilledInput = React.forwardRef<
                   setIsFocussed(false);
                   return setTokenIndex(null);
                 }}
+                placeholder={
+                  isMobile && label && lastestFormValueToArray.length === 0
+                    ? (label as string)
+                    : ''
+                }
                 variant={variant}
+                style={isMobile ? { border: 'none' } : undefined}
               />
             </Flex>
           )}

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

@@ -6,6 +6,7 @@ export interface StackedTextareaProps extends TextareaFieldProps {
   isRequired?: boolean;
   allowDefault?: boolean;
   variant: string;
+  label?: string;
 }
 
 /**
@@ -14,16 +15,17 @@ export interface StackedTextareaProps extends TextareaFieldProps {
 const StackedTextarea = React.forwardRef<
   HTMLTextAreaElement,
   StackedTextareaProps
->(({ isRequired, allowDefault, variant, ...props }, _ref) => {
-  if (variant === 'mobile') {
+>(({ isRequired, allowDefault, variant, label, ...props }, _ref) => {
+  const isMobile = variant === 'mobile';
+  if (isMobile) {
     return (
       <Flex>
-        {allowDefault}
         <Textarea
           ref={_ref}
           {...props}
           variant={variant}
           fontSize="17px"
+          placeholder={label ?? ''}
           onKeyDown={e => {
             if (e.key === 'Enter' && !allowDefault) {
               e.stopPropagation();
@@ -39,7 +41,7 @@ const StackedTextarea = React.forwardRef<
       ref={_ref}
       {...props}
       variant={variant}
-      fontSize={variant === '' ? '13px' : '17px'}
+      fontSize="13px"
       onKeyDown={e => {
         if (e.key === 'Enter' && !allowDefault) {
           e.stopPropagation();

package/src/components/input/index.tsx

@@ -110,6 +110,7 @@ export function Input<T extends FieldValues>({
             value={value}
             allowDefault={allowDefault}
             variant={variant}
+            label={label as string}
           />
         );
       case 'radio':
@@ -165,6 +166,7 @@ export function Input<T extends FieldValues>({
             disabled={disabled}
             value={value}
             variant={variant}
+            label={label as string}
           />
         );
       case 'checkbox':
@@ -224,6 +226,7 @@ export function Input<T extends FieldValues>({
             control={control as Control<FieldValues, any>}
             maxLength={maxLength}
             variant={variant}
+            label={label}
           />
         );
       case 'switch':

package/src/components/select/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Box, Flex, Select } from '@chakra-ui/react';
+import React, { useEffect } from 'react';
+import { Select } from '@chakra-ui/react';
 import {
   FormControl,
   FormErrorMessage,
@@ -64,41 +64,37 @@ export const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>> = ({
   ...props
 }) => {
   // const [selectedOption, setSelectedOption] = useState(
-  //   options.find(option => option.value === value)?.label ?? ''
+  //   options ? options[0] ?? '' : ''
   // );
 
-  const [selectedOption, setSelectedOption] = useState(
-    options ? options[0] ?? '' : ''
-  );
-
-  //const [selectedOption, setSelectedOption] = useState(null);
-
-  // useEffect(() => {
-  //   if (defaultValue) {
-  //     setSelectedOption(defaultValue);
-  //   }
-  //   setSelectedOption(
-  //     (fullOptions || options).find(option => option.value === value)?.label ??
-  //       ''
-  //   );
-  // }, [fullOptions, value]);
+  const style = {
+    cursor: 'pointer',
+    color: 'var(--chakra-colors-blue-500)',
+    height: '48px',
+    fontSize: '17px',
+    lineHeight: '20px',
+    fontWeight: 400,
+    padding: '12px 16px 12px 0px',
+    borderRadius: 0,
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none',
+  };
 
   const handleOnSelectItem = (selectedValue: string) => {
-    console.log(selectedValue);
     const selectedOption = options?.find(
       ({ value: val }) => selectedValue === val
     );
-    console.log(selectedValue);
-    setValue(name as string, selectedValue);
+
     if (selectedOption) {
       if (onChange) {
         onChange(selectedOption.value);
       }
-      setSelectedOption(selectedOption);
       setValue(name as string, selectedOption.value);
+    } else {
+      setValue(name as string, selectedValue);
     }
   };
-  console.log(selectedOption);
 
   useEffect(() => {
     if (defaultValue) {
@@ -110,68 +106,28 @@ export const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>> = ({
     <Controller
       control={control}
       name={name}
-      // defaultValue={defaultValue as PathValue<T, Path<T>>}
       rules={{ required: isRequired }}
       /** @ts-ignore: issues with implicit */
       render={({ field: { onBlur, onChange: fieldOnChange, ref, value } }) => (
         <FormControl id={name} isInvalid={isInvalid} position="relative" py={0}>
-          {/* {label &&
-              !nonLabeledInputs.includes(inputType) &&
-              variant !== 'mobile' && (
-                <Label
-                  tooltipText={tooltipText}
-                  label={label}
-                  isRequired={isRequired}
-                />
-              )} */}
-          <Box //ref={dropdownRef}
-            position="relative"
+          <Select
+            {...props}
+            required={isRequired}
+            ref={ref}
+            value={value}
+            disabled={disabled ?? false}
+            onChange={e => handleOnSelectItem(e.target.value)}
+            style={style}
           >
-            <Flex
-              flexDirection="column"
-              //ref={dropdownRef}
-              //scrollMargin="15px"
-              border="0"
-              mt="3px"
-              //maxH="240px"
-              overflowY="auto"
-              width="fit-content"
-              minWidth="100%"
-              zIndex={100}
-              tabIndex={-2000}
-              borderTop="0.5px solid #9999991A"
-            >
-              <Select
-                {...props}
-                required={isRequired}
-                ref={ref}
-                //value={selectedOption?.value ?? value}
-                // textShadow={`0 0 0 ${colors.label.primary.light}`}
-                disabled={disabled ?? false}
-                onChange={e => handleOnSelectItem(e.target.value)}
-                // onKeyDown={handleOnKeyDown}
-                style={{
-                  cursor: 'pointer',
-                  color: 'var(--chakra-colors-blue-500)',
-                  height: '48px',
-                  fontSize: '17px',
-                  lineHeight: '20px',
-                  fontWeight: 400,
-                  padding: '12px 16px 12px 0px',
-                  borderRadius: 0,
-                }}
-              >
-                {options &&
-                  options.map(i => {
-                    return (
-                      <option value={i.value} key={i.sortValue}>
-                        {i.label}
-                      </option>
-                    );
-                  })}
-              </Select>
-            </Flex>
-          </Box>
+            {options &&
+              options.map(i => {
+                return (
+                  <option value={i.value} key={i.sortValue}>
+                    {i.label}
+                  </option>
+                );
+              })}
+          </Select>
           {isInvalid ? (
             <FormErrorMessage>{errorText}</FormErrorMessage>
           ) : (

package/src/theme/components/button.ts

@@ -90,7 +90,7 @@ const variantPrimaryFlat = () => {
     border: '0.5px',
     gap: '8px',
     height: '44px',
-    margin: '8px',
+    // margin: '8px',
     fontSize: '17px',
     fontWeight: '500',
     lineHeight: '24px',

package/src/theme/components/checkbox.ts

@@ -8,12 +8,15 @@ const {
 
 const roundedCheckbox = definePartsStyle({
   control: {
-    borderRadius: 50,
-    padding: 3,
+    //borderRadius: 50,
   },
   label: {
     fontSize: '17px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    padding: '12px 16px 12px 0px',
   },
+  height: '44px',
 });
 
 const variants = {

package/src/theme/components/input.ts

@@ -26,6 +26,9 @@ const baseStyle = {
       border: '2px solid',
       borderColor: colors.border.focus,
     },
+    _placeholder: {
+      color: colors.label.secondary.light,
+    },
   },
 };
 
@@ -33,13 +36,18 @@ const mobileInputs = {
   ...baseStyle,
   field: {
     fontSize: '17px',
-    border: 'none',
     py: '14px',
     px: '16px',
     cursor: 'pointer',
     lineHeight: '21px',
     fontWeight: 400,
     borderRadius: 0,
+    height: '48px',
+    padding: '12px 16px 12px 0px',
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderColor: 'rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none',
   },
 };
 

package/src/theme/components/textarea.ts

@@ -17,15 +17,16 @@ const mobileInputs = defineStyle({
   ...Input.variants.mobile.field,
   border: 'none',
   borderRadius: 0,
-  paddingY: '14px',
-  paddingX: '16px',
-  padding: '14px 16px',
+  paddingY: '16px',
+  paddingX: '0',
+  // padding: '16px 16px',
   cursor: 'pointer',
   lineHeight: '21px',
   fontWeight: 400,
   resize: 'none',
   overflowY: 'auto',
   fontSize: '17px',
+  minHeight: '208px',
 });
 
 const variants = { default: baseStyle, mobile: mobileInputs };