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

package/package.json

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

package/src/components/button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Button, ButtonProps } from '.';
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 
 const meta: Meta<ButtonProps> = {
   title: 'Button example',
@@ -38,32 +38,97 @@ const meta: Meta<ButtonProps> = {
 export default meta;
 const Template: Story<ButtonProps> = args => (
   <Flex flexDir="column" height="150px" justifyContent="space-between">
-    <Button {...args} text="Primary Fixed" variant="primary" width="fixed" />
-    <Button
-      {...args}
-      text="Secondary Fixed"
-      variant="secondary"
-      width="fixed"
-    />
-    <Button {...args} text="Tertiary Fixed" variant="tertiary" width="fixed" />
-    <Button
-      {...args}
-      text="Primary Variable"
-      variant="primary"
-      width="variable"
-    />
-    <Button
-      {...args}
-      text="Secondary Variable"
-      variant="secondary"
-      width="variable"
-    />
-    <Button
-      {...args}
-      text="Tertiary Variable"
-      variant="tertiary"
-      width="variable"
-    />
+    <Box p={5}>
+      <Button {...args} text="Primary Fixed" variant="primary" width="fixed" />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Secondary Fixed"
+        variant="secondary"
+        width="fixed"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Tertiary Fixed"
+        variant="tertiary"
+        width="fixed"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Primary Variable"
+        variant="primary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Secondary Variable"
+        variant="secondary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Tertiary Variable"
+        variant="tertiary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Primary Variable Flat"
+        variant="flat-primary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Secondary Variable Flat"
+        variant="flat-secondary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Tertiary Variable Flat"
+        variant="flat-tertiary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Primary Fixed Flat"
+        variant="flat-primary"
+        width="fixed"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Secondary Fixed Flat"
+        variant="flat-secondary"
+        width="fixed"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Tertiary Fixed Flat"
+        variant="flat-tertiary"
+        width="fixed"
+      />
+    </Box>
   </Flex>
 );
 

package/src/components/form/FormTypes.ts

@@ -11,6 +11,8 @@ export interface FormInput {
   maxLength?: number;
   disabled?: boolean;
   defaultValue?: string;
+  variant?: string;
+  separators?: string[];
 }
 
 export type FormStructure<K extends string | number | symbol> = {

package/src/components/form/section/index.tsx

@@ -60,6 +60,7 @@ export function FormSection<
           ariaLabel,
           disabled,
           defaultValue,
+          variant,
         }: FormInput) => (
           <Input<U>
             key={name}
@@ -77,6 +78,7 @@ export function FormSection<
             setValue={form.setValue}
             setError={form.setError}
             clearErrors={form.clearErrors}
+            variant={variant ? variant : ''}
           />
         )
       )}

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

@@ -5,6 +5,7 @@ import { Input, InputProps } from '.';
 import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
+import { SelectNative } from '../select';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -108,9 +109,27 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         errorText={form.formState.errors['prop5']?.message}
         name="prop5"
       />
+      <Input
+        {...args}
+        inputType="multi-select"
+        variant="mobile"
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop5']?.message}
+        errorText={form.formState.errors['prop5']?.message}
+        name="prop5"
+      />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+      />
       <Input
         {...args}
         inputType="text"
+        variant="mobile"
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
       />
@@ -120,9 +139,27 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop2"
         onChange={e => form.setValue('prop2', e.target.value)}
       />
+      <Input
+        {...args}
+        inputType="textarea"
+        variant="mobile"
+        name="prop2"
+        onChange={e => form.setValue('prop2', e.target.value)}
+      />
+      <Input
+        {...args}
+        name="prop"
+        inputType="pilled-text"
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop']?.message}
+        errorText={form.formState.errors['prop']?.message}
+      />
       <Input
         {...args}
         name="prop"
+        variant="mobile"
         inputType="pilled-text"
         setValue={form.setValue}
         setError={form.setError}
@@ -135,10 +172,33 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         inputType="select"
         setValue={form.setValue}
         name="prop4"
+        defaultValue={'value1'}
+      />
+      <SelectNative
+        {...args}
+        setValue={form.setValue}
+        name="prop4"
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop']?.message}
+        errorText={form.formState.errors['prop']?.message}
+        disabled={false}
+        isRequired
+        control={form.control}
+        ariaLabel="expires in input"
+        defaultValue={'value1'}
+        variant="mobile"
+      />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="switch"
+        setValue={form.setValue}
       />
       <Input
         {...args}
         name="prop6"
+        variant="mobile"
         inputType="switch"
         setValue={form.setValue}
       />
@@ -148,6 +208,13 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         inputType="checkbox"
         setValue={form.setValue}
       />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="checkbox"
+        variant="mobile"
+        setValue={form.setValue}
+      />
     </Form>
   );
 };

package/src/components/input/StackedCheckbox/StackedCheckbox.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Checkbox, Text } from '@chakra-ui/react';
-import { SelectFieldProps } from '../InputTypes';
+import { InputFieldProps } from '../InputTypes';
 
-export interface StackedCheckboxProps extends SelectFieldProps {
+export interface StackedCheckboxProps extends InputFieldProps {
   label: string;
+  variant: string;
 }
 
 /**
@@ -12,7 +13,7 @@ export interface StackedCheckboxProps extends SelectFieldProps {
 const StackedCheckbox = React.forwardRef<
   HTMLInputElement,
   StackedCheckboxProps
->(({ value, label, onChange, disabled }, _ref) => {
+>(({ value, label, onChange, disabled, variant }, _ref) => {
   if (value === null) return null;
 
   return (
@@ -25,10 +26,17 @@ const StackedCheckbox = React.forwardRef<
       }}
       isChecked={Boolean(value)}
       disabled={disabled}
+      variant={variant}
     >
-      <Text fontSize="13px" alignSelf="center">
+      {/* solved like this because of bug in chakra
+      https://github.com/chakra-ui/chakra-ui/issues/7328 */}
+      <Text
+        fontSize={variant === 'mobile' ? '17px' : '13px'}
+        alignSelf="center"
+      >
         {label}
       </Text>
+      {/* {label} */}
     </Checkbox>
   );
 });

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

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