@xqmsg/ui-core 0.26.0 → 0.26.2

package/package.json

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

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

@@ -113,10 +113,10 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
   return (
     <Form formHandler={formHandler}>
       <Input
-        label="Pilled Text Input - scroll mode"
+        label={args.label + ' - Pilled Text -  scroll mode'}
         name="recipients"
         inputType="pilled-text"
-        placeholder="Enter email address..."
+        placeholder={args.placeholder ?? 'Enter email address...'}
         isInvalid={!!form.formState.errors['prop5']?.message}
         errorText={form.formState.errors['prop5']?.message}
         control={form.control}
@@ -129,10 +129,10 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         overflowMode="scroll"
       />
       <Input
-        label="Pilled Text - wrap mode"
+        label={args.label + ' - Pilled Text - wrap mod'}
         name="recipients"
         inputType="pilled-text"
-        placeholder="Enter email address..."
+        placeholder={args.placeholder ?? 'Enter email address...'}
         isInvalid={!!form.formState.errors['prop5']?.message}
         errorText={form.formState.errors['prop5']?.message}
         control={form.control}
@@ -147,6 +147,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="multi-select"
+        label={args.label + ' - multi-select'}
         setValue={form.setValue}
         setError={form.setError}
         clearErrors={form.clearErrors}
@@ -156,6 +157,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       />
       <Input
         {...args}
+        label={args.label + ' - multi-select'}
         inputType="multi-select"
         variant="mobile"
         setValue={form.setValue}
@@ -168,6 +170,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       />
       <Input
         {...args}
+        label={args.label + ' - text'}
         inputType="text"
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
@@ -175,6 +178,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="text"
+        label={args.label + ' - text - variant mobile'}
         variant="mobile"
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
@@ -182,6 +186,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="text"
+        label={args.label + ' - text - tooltip as react node'}
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
         tooltipText={
@@ -194,6 +199,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="text"
+        label={args.label + ' - text - tooltip as string'}
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
         tooltipText="test text"
@@ -201,12 +207,14 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="textarea"
+        label={args.label + ' - textarea'}
         name="prop2"
         onChange={e => form.setValue('prop2', e.target.value)}
       />
       <Input
         {...args}
         inputType="textarea"
+        label={args.label + ' - textarea - variant mobile'}
         variant="mobile"
         name="prop2"
         onChange={e => form.setValue('prop2', e.target.value)}
@@ -215,6 +223,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         {...args}
         name="prop"
         inputType="pilled-text"
+        label={args.label + ' - Pilled Text'}
         setValue={form.setValue}
         setError={form.setError}
         clearErrors={form.clearErrors}
@@ -226,6 +235,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop"
         variant="mobile"
         inputType="pilled-text"
+        label={args.label + ' - Pilled Text - variant mobile'}
         setValue={form.setValue}
         setError={form.setError}
         clearErrors={form.clearErrors}
@@ -235,6 +245,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="select"
+        label={args.label + ' - select'}
         setValue={form.setValue}
         name="prop4"
         defaultValue={'value1'}
@@ -242,6 +253,8 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="select"
+        label={args.label + ' - select - variant mobile'}
+        variant="mobile"
         setValue={form.setValue}
         name="prop4"
         defaultValue={'value1'}
@@ -250,6 +263,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="select"
+        label={args.label + ' - select - tooltip as react node'}
         setValue={form.setValue}
         name="prop4"
         defaultValue={'value1'}
@@ -263,6 +277,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       />
       <SelectNative
         {...args}
+        label={args.label + ' - select native'}
         setValue={form.setValue}
         name="prop4"
         setError={form.setError}
@@ -280,6 +295,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         {...args}
         name="prop6"
         inputType="switch"
+        label={args.label + ' - switch'}
         setValue={form.setValue}
       />
       <Input
@@ -287,6 +303,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop6"
         variant="mobile"
         inputType="switch"
+        label={args.label + ' - switch - variant mobile'}
         setValue={form.setValue}
       />
       <Input
@@ -299,6 +316,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         {...args}
         name="prop6"
         inputType="checkbox"
+        label={args.label + ' - checkbox - variant mobile'}
         variant="mobile"
         setValue={form.setValue}
       />

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

@@ -35,7 +35,7 @@ const StackedInput = React.forwardRef<HTMLInputElement, StackedInputProps>(
         {label}
         <Input
           {...props}
-          placeholder={placeholder}
+          placeholder={props.placeholder ?? placeholder}
           type={type}
           isRequired={isRequired}
           ref={_ref}

package/src/theme/foundations/breakpoints.ts

@@ -1,18 +1,13 @@
-import {
-  createBreakpoints,
-  BaseBreakpointConfig,
-} from '@chakra-ui/theme-tools';
+import { BaseBreakpointConfig } from '@chakra-ui/theme-tools';
 
 /**
  * Breakpoints for responsive design
  */
-const breakpointValues: BaseBreakpointConfig = {
+const breakpoints: BaseBreakpointConfig = {
   sm: '30em',
   md: '48em',
   lg: '62em',
   xl: '80em',
 };
 
-const breakpoints = createBreakpoints(breakpointValues);
-
 export default breakpoints;