fix: warnings and errors

Author: tenphi

.changeset/lucky-beans-crash.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix pressed state in primary type Button.

src/components/actions/Button/Button.stories.tsx

@@ -15,21 +15,22 @@ export default {
       defaultValue: undefined,
       control: { type: 'radio', options: [undefined, 'small', 'large'] },
     },
-    type: {
-      defaultValue: undefined,
-      control: {
-        type: 'radio',
-        options: [
-          undefined,
-          'secondary',
-          'primary',
-          'outline',
-          'clear',
-          'neutral',
-          'link',
-        ],
-      },
-    },
+    // @TODO: Migrate to new API
+    // type: {
+    //   defaultValue: undefined,
+    //   control: {
+    //     type: 'radio',
+    //     options: [
+    //       undefined,
+    //       'secondary',
+    //       'primary',
+    //       'outline',
+    //       'clear',
+    //       'neutral',
+    //       'link',
+    //     ],
+    //   },
+    // },
     theme: {
       defaultValue: undefined,
       control: { type: 'radio', options: [undefined, 'danger', 'special'] },

src/components/actions/Button/Button.tsx

@@ -118,8 +118,8 @@ const ButtonElement = tasty({
         '': '#clear',
 
         '[data-type="primary"]': '#purple',
-        '[data-type="primary"] & pressed': '#purple',
         '[data-type="primary"] & hovered': '#purple-text',
+        '[data-type="primary"] & pressed': '#purple',
 
         '[data-type="secondary"]': '#purple.10',
         '[data-type="secondary"] & hovered': '#purple.16',

src/components/fields/TextInputMapper/TextInputMapper.stories.tsx

@@ -2,7 +2,6 @@ import { StoryFn } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
-import { SubmitButton } from '../../actions';
 import { Form } from '../../form';
 import { TextInput } from '../TextInput/index';
 
@@ -39,7 +38,7 @@ const FormTemplate: StoryFn<CubeTextInputMapperProps> = ({ ...props }) => (
       {...props}
       onChange={(value) => console.log('! onChange', value)}
     />
-    <SubmitButton>Submit</SubmitButton>
+    <Form.Submit>Submit</Form.Submit>
   </Form>
 );
 
@@ -56,7 +55,7 @@ const FormTemplateSync: StoryFn<CubeTextInputMapperProps> = ({ ...props }) => (
       onChange={(value) => console.log('! onChange', value)}
     />
     <TextInput name="field.name" label="TextInput" />
-    <SubmitButton>Submit</SubmitButton>
+    <Form.Submit>Submit</Form.Submit>
   </Form>
 );
 

src/components/form/Form/ComplexForm.stories.tsx

@@ -4,7 +4,6 @@ import { userEvent, waitFor, within } from '@storybook/test';
 import { expect } from '@storybook/test';
 
 import {
-  Alert,
   Block,
   Checkbox,
   CheckboxGroup,
@@ -17,18 +16,17 @@ import {
   RangeSlider,
   Slider,
   Select,
-  SubmitButton,
-  SubmitError,
   Switch,
   DateInput,
   TextInput,
   NumberInput,
   parseAbsoluteDate,
   FileInput,
+  Space,
+  Button,
 } from '../../../index';
 // import { NumberInput } from '../NumberInput/NumberInput';
 import { baseProps } from '../../../stories/lists/baseProps';
-import { Button } from '../../actions/index';
 import { timeout } from '../../../utils/promise';
 
 export default {
@@ -69,8 +67,8 @@ export default {
 //       >
 //         <TextInput />
 //       </Field>
-//       <Submit>Submit</Submit>
-//       <SubmitError />
+//       <Form.Submit>Submit</Form.Submit>
+//       <Form.SubmitError />
 //     </Form>
 //   );
 // };
@@ -94,8 +92,8 @@ const CustomSubmitErrorTemplate: StoryFn<typeof Form> = (args) => {
       <Field name="text" label="Text input">
         <TextInput />
       </Field>
-      <SubmitButton>Submit</SubmitButton>
-      {form.submitError ? <Alert>{form.submitError as string}</Alert> : null}
+      <Form.Submit>Submit</Form.Submit>
+      <Form.SubmitError />
     </Form>
   );
 };
@@ -119,8 +117,8 @@ const SubmitErrorTemplate: StoryFn<typeof Form> = (args) => {
       <Field name="text" label="Text input">
         <TextInput />
       </Field>
-      <SubmitButton>Submit</SubmitButton>
-      <SubmitError />
+      <Form.Submit>Submit</Form.Submit>
+      <Form.SubmitError />
     </Form>
   );
 };
@@ -161,7 +159,10 @@ const AsyncValidationTemplate: StoryFn<typeof Form> = (args) => {
       >
         <TextInput />
       </Field>
-      <SubmitButton>Submit</SubmitButton>
+      <Space>
+        <Form.Submit>Submit</Form.Submit>
+        <Form.Reset>Reset</Form.Reset>
+      </Space>
     </Form>
   );
 };
@@ -269,7 +270,6 @@ const Template: StoryFn<typeof Form> = (args) => {
             },
           ]}
           necessityIndicator={'label'}
-          defaultValue="[email protected]"
           shouldUpdate={({ email }) => {
             return !!email;
           }}
@@ -353,7 +353,10 @@ const Template: StoryFn<typeof Form> = (args) => {
         >
           <RangeSlider minValue={0} maxValue={100} />
         </Field>
-        <SubmitButton>Submit</SubmitButton>
+        <Space>
+          <Form.Submit>Submit</Form.Submit>
+          <Form.Reset>Reset</Form.Reset>
+        </Space>
       </Form>
     </>
   );

src/components/form/Form/ResetButton/ResetButton.tsx

@@ -35,7 +35,16 @@ function ResetButton(
       type="primary"
       htmlType="reset"
       isDisabled={form?.isSubmitting || !form?.isTouched}
-      {...mergeProps({ onPress, isDisabled }, otherProps)}
+      {...mergeProps(
+        {
+          onPress,
+          isDisabled:
+            isDisabled != null
+              ? isDisabled
+              : form?.isSubmitting || !form?.isTouched,
+        },
+        otherProps,
+      )}
     />
   );
 }

src/components/form/Form/SubmitButton/SubmitButton.tsx

@@ -32,7 +32,7 @@ function SubmitButton(
       type="primary"
       htmlType="submit"
       isLoading={form?.isSubmitting}
-      isDisabled={!form?.isInvalid || isDisabled}
+      isDisabled={isDisabled != null ? isDisabled : form?.isInvalid}
       {...otherProps}
     />
   );

src/components/form/Form/SubmitError.tsx

@@ -14,10 +14,7 @@ type SubmitErrorContextProps = {
   submitError?: unknown;
 };
 
-const SubmitError = function SubmitError(
-  props: CubeAlertProps,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+function SubmitError(props: CubeAlertProps, ref: ForwardedRef<HTMLDivElement>) {
   let { submitError } = useContext(FormContext) as SubmitErrorContextProps;
 
   if (!submitError) {
@@ -36,7 +33,7 @@ const SubmitError = function SubmitError(
       {submitError as ReactNode}
     </Alert>
   );
-};
+}
 
 /**
  * An alert that shows a form error message received from the onSubmit callback.

src/components/form/Form/index.ts

@@ -15,24 +15,21 @@ const Form = Object.assign(
     Reset: typeof ResetButton;
     useForm: typeof useForm;
   },
-  { Item: Field, useForm, SubmitButton, ResetButton, SubmitError },
+  {
+    Item: Field,
+    useForm,
+    Submit: SubmitButton,
+    Reset: ResetButton,
+    SubmitError,
+  },
 );
 
-export {
-  useFormProps,
-  Form,
-  Field,
-  useForm,
-  FormContext,
-  SubmitError,
-  SubmitButton,
-  ResetButton,
-};
-export { useFieldProps } from './use-field/index';
+export * from './SubmitError';
+export * from './SubmitButton';
+export * from './ResetButton';
+export * from './use-field';
+export { useFormProps, Form, Field, useForm, FormContext };
 export type { CubeFormProps } from './Form';
 export type { CubeFormInstance } from './use-form';
 export type { FieldTypes, Fields } from './types';
-export type { UseFieldParams, UseFieldPropsParams } from './use-field/index';
 export type { CubeAlertProps as CubeSubmitErrorProps };
-export type { CubeResetButtonProps } from './ResetButton';
-export type { CubeSubmitButtonProps } from './SubmitButton';

src/components/form/Form/submit-error.test.tsx

@@ -2,8 +2,7 @@ import userEvents from '@testing-library/user-event';
 import { waitFor, act } from '@testing-library/react';
 
 import { renderWithForm } from '../../../test/index';
-import { SubmitButton } from '../../form';
-import { TextInput } from '../../fields/TextInput';
+import { TextInput } from '../../fields';
 
 import { Form } from './index';
 
@@ -16,7 +15,7 @@ describe('<SubmitError />', () => {
       <>
         <TextInput name="test" label="Test" />
 
-        <SubmitButton>Submit</SubmitButton>
+        <Form.Submit>Submit</Form.Submit>
 
         <Form.SubmitError />
       </>,
@@ -53,7 +52,7 @@ describe('<SubmitError />', () => {
       <>
         <TextInput name="test" label="Test" />
 
-        <SubmitButton>Submit</SubmitButton>
+        <Form.Submit>Submit</Form.Submit>
 
         <Form.SubmitError />
       </>,
@@ -101,7 +100,7 @@ describe('<SubmitError />', () => {
       <>
         <TextInput name="test" label="Test" />
 
-        <SubmitButton>Submit</SubmitButton>
+        <Form.Submit>Submit</Form.Submit>
 
         <Form.SubmitError />
       </>,