@ssa-ui-kit/core 0.0.8-alpha → 0.0.9-alpha

package/src/components/DropdownToggle/types.ts

@@ -1,22 +1,22 @@
-import React from 'react';
-import { Theme } from '@emotion/react';
-import { CommonProps } from '@global-types/emotion';
-
-export interface IDropdownToggleProps extends CommonProps {
-  onClick: (e: React.MouseEvent<HTMLElement>) => void;
-  onFocus: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
-  isOpen: boolean;
-  isMultiple?: boolean;
-  disabled?: boolean;
-  children?: React.ReactNode;
-  ariaLabelledby: string;
-  ariaControls: string;
-  colors?: Array<string | undefined>;
-  className?: string;
-  selectedCount?: number;
-}
-
-export interface MultipleStylesProps {
-  theme: Theme;
-  selectedCount?: number;
-}
+import React from 'react';
+import { Theme } from '@emotion/react';
+import { CommonProps } from '@global-types/emotion';
+
+export interface IDropdownToggleProps extends CommonProps {
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
+  onFocus: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
+  isOpen: boolean;
+  isMultiple?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  ariaLabelledby: string;
+  ariaControls: string;
+  colors?: Array<string | undefined>;
+  className?: string;
+  selectedCount?: number;
+}
+
+export interface MultipleStylesProps {
+  theme: Theme;
+  selectedCount?: number;
+}

package/src/components/Form/Form.stories.mdx

@@ -1,118 +1,118 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import Form from '@components/Form';
-import FormGroup from '@components/FormGroup';
-import Input from '@components/Input';
-
-<Meta title="Forms/About" />
-
-# The Form
-
-The Form components rely on the
-[React hook forms](https://react-hook-form.com/api).
-
-With that, the `register` is mandatory for the `TextField` to work.
-
-Ex.:
-
-```javascript
-const { register } = useForm<T>();
-...
-<TextField register={register} />
-```
-
-And for the errors we use the `useForm` hook:
-
-```javascript
-const { formState: { errors } } = useForm<T>();
-...
-<TextField register={register} errors={errors[field name]} />
-```
-
-The `TextField` component can render an input or textarea:
-
-input: `<TextField {...} />` textarea: `<TextField multirow {...} />`
-
-To handle the layout of the forms we have some structural components:
-
-`Form`, `FormGroup` and `FormAction`
-
-A Form example:
-
-```javascript
-// The useForm needs to know the inputs that we have
-type Inputs = {
-  name: string;
-  lastname: string;
-  address: string;
-};
-
-const Sample = () => {
-  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();
-
-  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
-
-  return (
-    <Form onSubmit={handleSubmit(onSubmit)}>
-
-      // block Inputs
-      <FormGroup>
-        <TextField
-          placeholder="Name" label="Name" name="name" register={register}
-          validationSchema={{
-            required: 'Required',
-          }} errors={errors?.name} />
-
-        <TextField
-          placeholder="Last name"
-          label="Last name"
-          name="lastname"
-          register={register}
-          validationSchema={{
-            required: 'Required',
-          }}
-          errors={errors?.lastname}
-          success
-          helperText={'Success'}
-        />
-      </FormGroup>
-
-      <FormGroup>
-        <TextField
-          placeholder="Address"
-          label="Address"
-          name="address"
-          register={register}
-          validationSchema={{
-            required: 'is required',
-            minLength: {
-              value: 3,
-              message: 'Please enter a minimum of 3 characters',
-            },
-          }}
-          errors={errors?.address}
-          helperText={'Basic text'}
-        />
-      </FormGroup>
-
-      <FormGroup>
-          <TextField
-            multirow
-            rows={10}
-            label="Textarea"
-            name="textarea"
-            register={register}
-            validationSchema={{
-              required: 'Required',
-            }}
-            helperText="some nice text"
-          />
-        </FormGroup>
-
-      <FormAction>
-        <button>Submit</button>
-      </FormAction>
-    </Form>
-);
-}
-```
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import Form from '@components/Form';
+import FormGroup from '@components/FormGroup';
+import Input from '@components/Input';
+
+<Meta title="Forms/About" />
+
+# The Form
+
+The Form components rely on the
+[React hook forms](https://react-hook-form.com/api).
+
+With that, the `register` is mandatory for the `TextField` to work.
+
+Ex.:
+
+```javascript
+const { register } = useForm<T>();
+...
+<TextField register={register} />
+```
+
+And for the errors we use the `useForm` hook:
+
+```javascript
+const { formState: { errors } } = useForm<T>();
+...
+<TextField register={register} errors={errors[field name]} />
+```
+
+The `TextField` component can render an input or textarea:
+
+input: `<TextField {...} />` textarea: `<TextField multirow {...} />`
+
+To handle the layout of the forms we have some structural components:
+
+`Form`, `FormGroup` and `FormAction`
+
+A Form example:
+
+```javascript
+// The useForm needs to know the inputs that we have
+type Inputs = {
+  name: string;
+  lastname: string;
+  address: string;
+};
+
+const Sample = () => {
+  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();
+
+  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+
+      // block Inputs
+      <FormGroup>
+        <TextField
+          placeholder="Name" label="Name" name="name" register={register}
+          validationSchema={{
+            required: 'Required',
+          }} errors={errors?.name} />
+
+        <TextField
+          placeholder="Last name"
+          label="Last name"
+          name="lastname"
+          register={register}
+          validationSchema={{
+            required: 'Required',
+          }}
+          errors={errors?.lastname}
+          success
+          helperText={'Success'}
+        />
+      </FormGroup>
+
+      <FormGroup>
+        <TextField
+          placeholder="Address"
+          label="Address"
+          name="address"
+          register={register}
+          validationSchema={{
+            required: 'is required',
+            minLength: {
+              value: 3,
+              message: 'Please enter a minimum of 3 characters',
+            },
+          }}
+          errors={errors?.address}
+          helperText={'Basic text'}
+        />
+      </FormGroup>
+
+      <FormGroup>
+          <TextField
+            multirow
+            rows={10}
+            label="Textarea"
+            name="textarea"
+            register={register}
+            validationSchema={{
+              required: 'Required',
+            }}
+            helperText="some nice text"
+          />
+        </FormGroup>
+
+      <FormAction>
+        <button>Submit</button>
+      </FormAction>
+    </Form>
+);
+}
+```