pixel-react 1.10.15 → 1.10.16

package/src/components/Form/Form.stories.tsx

@@ -1,508 +0,0 @@
-import React, { useRef } from 'react';
-import Forms from './Forms';
-import Input from '../Input';
-import RadioGroup from '../RadioGroup';
-import Select from '../Select';
-import { Meta, StoryObj } from '@storybook/react';
-import Typography from '../Typography';
-import './Form.scss';
-import Checkbox from '../Checkbox';
-import TextArea from '../TextArea';
-import Drawer from '../Drawer';
-import { useState } from 'react';
-import { Container } from '../GridLayout/GridLayout';
-import Button from '../Button/Button';
-
-type FormValues = {
-  username: string;
-  email: string;
-  password: string;
-  gender: string;
-  language: string;
-  check: boolean;
-  description: string;
-};
-
-const meta: Meta<typeof Forms> = {
-  title: 'Components/Forms',
-  component: Forms,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Forms>;
-
-export const WithDefaultValues: Story = {
-  render: () => {
-    const [isDrawerOpen, setIsDrawerOpen] = useState(true);
-    const initialFormState: FormValues = {
-      username: '',
-      email: '',
-      password: '',
-      gender: '',
-      language: '',
-      check: false,
-      description: '',
-    };
-
-    const onSubmit = (data: FormValues) => {
-      alert('Form submitted with: ' + JSON.stringify(data));
-    };
-
-    const pageDrawerPrimaryButton = {
-      label: 'Select',
-      disabled: false,
-      size: 'medium',
-      type: 'submit' as 'submit',
-      form: 'element',
-    };
-
-    const pageDrawerSecondaryButton = {
-      label: 'Cancel',
-      variant: 'secondary',
-      size: 'medium',
-      disabled: false,
-    };
-
-    return (
-      <Drawer
-        overlay
-        isOpen={isDrawerOpen}
-        title="Select Page"
-        onClose={() => setIsDrawerOpen(false)}
-        primaryButtonProps={pageDrawerPrimaryButton}
-        secondaryButtonProps={pageDrawerSecondaryButton}
-      >
-        <Container fluid className="ff-forms-container">
-          <Forms<FormValues>
-            onSubmit={onSubmit}
-            id="element"
-            defaultValues={initialFormState}
-          >
-            {({
-              register,
-              formState: { errors },
-              setValue,
-              watch,
-              reset,
-              trigger,
-            }) => {
-              return (
-                <div className="ff-main">
-                  {/* Username Field */}
-                  <div>
-                    <Input
-                      type="text"
-                      label="Username"
-                      disabled={false}
-                      {...register('username', {
-                        required: {
-                          value: true,
-                          message: 'Username is required',
-                        },
-                        minLength: {
-                          value: 3,
-                          message: 'Username must be at least 3 characters',
-                        },
-                        maxLength: {
-                          value: 15,
-                          message: 'Username must not exceed 15 characters',
-                        },
-                      })}
-                      error={!!errors.username?.message}
-                      helperText={errors.username?.message}
-                      value={watch('username')}
-                      onChange={(e) =>
-                        setValue('username', e.target.value, {
-                          shouldValidate: true,
-                        })
-                      }
-                      onBlur={() => {
-                        trigger('username');
-                      }}
-                    />
-                  </div>
-
-                  {/* Email Field */}
-                  <div>
-                    <Input
-                      type="email"
-                      label="Email"
-                      disabled={false}
-                      {...register('email', {
-                        required: { value: true, message: 'Email is required' },
-                        pattern: {
-                          value: /^\S+@\S+\.\S+$/,
-                          message: 'Please enter a valid email',
-                        },
-                      })}
-                      error={!!errors.email?.message}
-                      helperText={errors.email?.message}
-                      value={watch('email')}
-                      onChange={(e) =>
-                        setValue('email', e.target.value, {
-                          shouldValidate: true,
-                        })
-                      }
-                      onBlur={() => {
-                        trigger('email');
-                      }}
-                    />
-                  </div>
-
-                  {/* Password Field */}
-                  <div>
-                    <Input
-                      label="Password"
-                      disabled={false}
-                      type="password"
-                      {...register('password', {
-                        required: {
-                          value: true,
-                          message: 'Password is required',
-                        },
-                        minLength: {
-                          value: 6,
-                          message: 'Password must be at least 6 characters',
-                        },
-                      })}
-                      error={!!errors.password?.message}
-                      helperText={errors.password?.message}
-                      value={watch('password')}
-                      onChange={(e) =>
-                        setValue('password', e.target.value, {
-                          shouldValidate: true,
-                        })
-                      }
-                      onBlur={() => {
-                        trigger('password');
-                      }}
-                    />
-                  </div>
-
-                  {/* Gender Field */}
-                  <div className="ff-radio">
-                    <Typography as="label">Gender</Typography>
-                    <RadioGroup
-                      options={[
-                        {
-                          label: 'Male',
-                          value: 'male',
-                        },
-                        {
-                          label: 'Female',
-                          value: 'female',
-                        },
-                        {
-                          label: 'Other',
-                          value: 'other',
-                        },
-                      ]}
-                      {...register('gender', {
-                        required: {
-                          value: true,
-                          message: 'select the Gender',
-                        },
-                      })}
-                      selectedValue={watch('gender')}
-                      onChange={(option) => {
-                        setValue('gender', option.value, {
-                          shouldValidate: true,
-                        });
-                      }}
-                    />
-                    {errors?.gender && (
-                      <Typography className="ff-error">
-                        {errors.gender.message}
-                      </Typography>
-                    )}
-                  </div>
-
-                  {/* Language Field */}
-                  <div className="ff-select">
-                    <Typography as="label">Programming Language</Typography>
-                    <Select
-                      optionZIndex={9999999}
-                      optionsList={[
-                        { label: 'Java', value: 'Java' },
-                        { label: 'Rust', value: 'Rust' },
-                        { label: 'Dart', value: 'Dart' },
-                      ]}
-                      selectedOption={{
-                        label: watch('language') || 'Select a language',
-                        value: watch('language') || '',
-                      }}
-                      {...register('language', {
-                        required: {
-                          value: true,
-                          message: 'language is required',
-                        },
-                      })}
-                      showLabel={false}
-                      errorMsg={errors.language?.message}
-                      onChange={(option) =>
-                        setValue('language', option.value, {
-                          shouldValidate: true,
-                        })
-                      }
-                      onBlur={() => {
-                        trigger('language');
-                      }}
-                    />
-                  </div>
-
-                  {/* TextArea Field */}
-                  <div className="ff-textarea">
-                    <TextArea
-                      label="Description"
-                      value={watch('description')}
-                      {...register('description', {
-                        required: 'Description is required',
-                        maxLength: {
-                          value: 30,
-                          message: 'Maximum length is 200 characters',
-                        },
-                      })}
-                      error={!!errors?.description?.message}
-                      onChange={(e) => {
-                        setValue('description', e.target.value, {
-                          shouldValidate: true,
-                        });
-                      }}
-                      onBlur={() => {
-                        trigger('description');
-                      }}
-                    />
-                  </div>
-                  {/* check box Field */}
-                  <div className="ff-check">
-                    <Checkbox
-                      label="terms condition"
-                      disabled={false}
-                      checked={watch('check')}
-                      {...register('check', {
-                        required: {
-                          value: true,
-                          message: 'Please select the checkbox',
-                        },
-                      })}
-                      onChange={(e) => {
-                        setValue('check', e.target.checked, {
-                          shouldValidate: true,
-                        });
-                      }}
-                    />
-                    {errors?.check && (
-                      <Typography className="ff-error">
-                        {errors.check.message}
-                      </Typography>
-                    )}
-                  </div>
-                  {/* Buttons */}
-                  <div className="ff-button-layout">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        reset(initialFormState);
-                      }}
-                    >
-                      Reset
-                    </button>
-                  </div>
-                </div>
-              );
-            }}
-          </Forms>
-        </Container>
-      </Drawer>
-    );
-  },
-};
-
-export const WithSubmissionOutside: Story = {
-  render: () => {
-    const [isDrawerOpen, setIsDrawerOpen] = useState(true);
-    type FormValues = {
-      username: string;
-      email: string;
-      password: string;
-      check: boolean;
-    };
-
-    const initialFormState: FormValues = {
-      username: '',
-      email: '',
-      password: '',
-      check: false,
-    };
-
-    const formRef = useRef<any>(null);
-
-    const handleSubmit = (data: FormValues) => {
-      alert('Form submitted with: ' + JSON.stringify(data));
-    };
-
-    const submitForm = () => {
-      formRef.current.submit();
-    };
-
-    const handleCreateAndContinue = () => {
-      formRef.current.submit();
-      formRef.current.reset();
-      formRef.current.clearErrors();
-    };
-
-    const handleReset = () => {
-      formRef.current.reset();
-      formRef.current.clearErrors();
-    };
-
-    const footerContent = (
-      <>
-        <Checkbox
-          label="Copy to shared"
-          disabled={false}
-          checked={formRef.current?.watch('check')}
-          {...formRef.current?.register('check', {
-            required: {
-              value: true,
-              message: 'Please select the checkbox',
-            },
-          })}
-          onChange={(e) => {
-            formRef.current?.setValue('check', e.target.checked, {
-              shouldValidate: true,
-            });
-          }}
-        />
-        <Button
-          variant="secondary"
-          onClick={() => setIsDrawerOpen(false)}
-          label="Cancel"
-        />
-        <Button variant="secondary" onClick={handleReset} label="Reset" />
-        <Button
-          variant="secondary"
-          onClick={handleCreateAndContinue}
-          label="Create and continue"
-        />
-        <Button variant="primary" onClick={submitForm} label="Submit" />
-      </>
-    );
-
-    return (
-      <div>
-        <Drawer
-          overlay
-          isOpen={isDrawerOpen}
-          title="Select Page"
-          onClose={() => setIsDrawerOpen(false)}
-          footerContent={footerContent}
-        >
-          <Forms
-            ref={formRef}
-            onSubmit={handleSubmit}
-            defaultValues={initialFormState}
-          >
-            {({
-              watch,
-              register,
-              setValue,
-              trigger,
-              formState: { errors },
-            }) => (
-              <div className="ff-form-container">
-                <div>
-                  <Input
-                    type="text"
-                    label="Username"
-                    value={watch('username')}
-                    {...register('username', {
-                      required: 'Username is required',
-                      minLength: {
-                        value: 3,
-                        message: 'Username must be at least 3 characters',
-                      },
-                    })}
-                    onChange={(e) =>
-                      setValue('username', e.target.value, {
-                        shouldValidate: true,
-                      })
-                    }
-                    onBlur={() => {
-                      trigger('username');
-                    }}
-                    error={!!errors.username}
-                    helperText={errors.username?.message}
-                  />
-                </div>
-
-                {/* Email Field */}
-                <div>
-                  <Input
-                    type="email"
-                    label="Email"
-                    value={watch('email')}
-                    {...register('email', {
-                      required: 'Email is required',
-                      pattern: {
-                        value: /^\S+@\S+\.\S+$/,
-                        message: 'Please enter a valid email',
-                      },
-                    })}
-                    onChange={(e) =>
-                      setValue('email', e.target.value, {
-                        shouldValidate: true,
-                      })
-                    }
-                    onBlur={() => {
-                      trigger('email');
-                    }}
-                    error={!!errors.email}
-                    helperText={errors.email?.message}
-                  />
-                </div>
-
-                {/* Password Field */}
-                <div>
-                  <Input
-                    label="Password"
-                    value={watch('password')}
-                    {...register('password', {
-                      required: 'Password is required',
-                      minLength: {
-                        value: 6,
-                        message: 'Password must be at least 6 characters',
-                      },
-                    })}
-                    onChange={(e) =>
-                      setValue('password', e.target.value, {
-                        shouldValidate: true,
-                      })
-                    }
-                    onBlur={() => {
-                      trigger('password');
-                    }}
-                    placeholder="Enter your password"
-                    type="password"
-                    error={!!errors.password}
-                    helperText={errors.password?.message}
-                  />
-                </div>
-              </div>
-            )}
-          </Forms>
-        </Drawer>
-
-        {/* Submit Button Outside the Form */}
-        <Button onClick={submitForm} variant="primary">
-          Submit Form
-        </Button>
-      </div>
-    );
-  },
-};
-
-export default meta;

package/src/components/Form/Form.ts

@@ -1,2 +0,0 @@
-import * as Form from 'react-hook-form';
-export default Form;

package/src/components/Form/Forms.tsx

@@ -1,39 +0,0 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import Form from './Form';
-interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
-  id?: string;
-  onSubmit: Form.SubmitHandler<T>;
-  children: (
-    methods: ReturnType<typeof Form.useForm<T>> & {
-      Form: typeof Form;
-    }
-  ) => React.ReactNode;
-}
-
-const Forms = <T extends Form.FieldValues>(
-  { onSubmit, children, id, ...rest }: FormProps<T>,
-  ref: React.Ref<any>
-) => {
-  const methods = Form.useForm<T>(rest);
-  const { handleSubmit } = methods;
-  const extendedMethods = {
-    ...methods,
-    Form: Form,
-  };
-  useImperativeHandle(ref, () => ({
-    submit: handleSubmit(onSubmit),
-    ...extendedMethods,
-  }));
-
-  return (
-    <form id={id} onSubmit={handleSubmit(onSubmit)}>
-      {children(extendedMethods)}
-    </form>
-  );
-};
-
-const ForwardedForms = forwardRef(Forms) as <T extends Form.FieldValues>(
-  props: FormProps<T> & { ref?: React.Ref<any> }
-) => JSX.Element;
-
-export default ForwardedForms;

package/src/components/Form/index.ts

@@ -1 +0,0 @@
-export * from './Form';

package/src/components/Form/types.ts

@@ -1 +0,0 @@
-export type FormValues = Record<string, any>;

package/src/components/Form/validation.json

@@ -1,29 +0,0 @@
-{
-  "username": {
-    "required": "Username is required",
-    "minLength": {
-      "value": 3,
-      "message": "Username must be at least 3 characters"
-    }
-  },
-  "email": {
-    "required": "Email is required",
-    "pattern": {
-      "value": "^\\S+@\\S+\\.\\S+$",
-      "message": "Please enter a valid email"
-    }
-  },
-  "password": {
-    "required": "Password is required",
-    "minLength": {
-      "value": 6,
-      "message": "Password must be at least 6 characters"
-    }
-  },
-  "gender": {
-    "required": "Gender is required"
-  },
-  "language": {
-    "required": "Language is required"
-  }
-}

package/src/components/GridLayout/GridLayout.stories.tsx

@@ -1,90 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Container, Row, Col } from './GridLayout';
-import './GridLayoutStory.scss';
-
-const meta: Meta<typeof Container> = {
-  title: 'Components/GridLayout',
-  component: Container,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type ContainerStory = StoryObj<typeof Container>;
-
-const defaultContainerArgs = {
-  fluid: false,
-  gap: '20px',
-};
-
-export const Grid: ContainerStory = {
-  args: {
-    ...defaultContainerArgs,
-  },
-  render: (args) => (
-    <>
-      <Container {...args}>
-        <Row>
-          <Col size={4}>
-            <div className="one">Column 1</div>
-          </Col>
-          <Col size={4}>
-            <div className="two">Column 2</div>
-          </Col>
-          <Col size={4}>
-            <div className="three">Column 3</div>
-          </Col>
-        </Row>
-        <Row>
-          <Col size={6}>
-            <div className="four">Column 4</div>
-          </Col>
-          <Col size={6}>
-            <div className="five">Column 5</div>
-          </Col>
-        </Row>
-      </Container>
-    </>
-  ),
-};
-export const Grid2: ContainerStory = {
-  args: {
-    ...defaultContainerArgs,
-  },
-  render: (args) => (
-    <>
-      <Container {...args}>
-        <Row gap="20px">
-          <Col size={3}>
-            <div className="one">Column 1 (size 3)</div>
-          </Col>
-          <Col size={6}>
-            <div className="two">Column 2 (size 6)</div>
-          </Col>
-          <Col size={3}>
-            <div className="three">Column 3 (size 3)</div>
-          </Col>
-        </Row>
-        <Row gap="10px">
-          <Col size={4}>
-            <div className="four">Column 4 (size 4)</div>
-          </Col>
-          <Col size={4}>
-            <div className="five">Column 5 (size 4)</div>
-          </Col>
-          <Col size={4}>
-            <div className="one">Column 6 (size 4)</div>
-          </Col>
-        </Row>
-        <Row gap="15px">
-          <Col size={12}>
-            <div className="two">Full-width column (size 12)</div>
-          </Col>
-        </Row>
-      </Container>
-    </>
-  ),
-};
-
-export default meta;