pixel-react 1.2.1 → 1.2.3

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

@@ -1,22 +1,35 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Form from './Form';
-import validationRules from './validation.json';
-import { FormValues } from './types';
+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';
 
-const meta: Meta<typeof Form> = {
-  title: 'Components/Form',
-  component: Form,
+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 Form>;
+type Story = StoryObj<typeof Forms>;
 
-export const WithControlledState: Story = {
+export const WithDefaultValues: Story = {
   render: () => {
     const initialFormState: FormValues = {
       username: '',
@@ -24,154 +37,248 @@ export const WithControlledState: Story = {
       password: '',
       gender: '',
       language: '',
+      check: false,
+      description: '',
     };
 
-    const [formData, setFormData] = useState<FormValues>(initialFormState);
-
-    const handleSubmit = (data: FormValues) => {
-      setFormData(data);
+    const onSubmit = (data: FormValues) => {
       alert('Form submitted with: ' + JSON.stringify(data));
     };
 
-    const handleReset = (
-      setValue: (field: keyof FormValues, value: any) => void
-    ) => {
-      Object.keys(initialFormState).forEach((field) => {
-        setValue(
-          field as keyof FormValues,
-          initialFormState[field as keyof FormValues]
-        );
-      });
-      setFormData(initialFormState);
-    };
-
     return (
-      <div className="ff-form-container">
-        <Form<FormValues> onSubmit={handleSubmit}>
-          {(
-            { register, errors, handleBlur, setValue } // Include setValue here
-          ) => (
-            <>
-              {['username', 'email', 'password'].map((field) => (
-                <div className="ff-form-group" key={field}>
-                  <Typography as="label">
-                    {field.charAt(0).toUpperCase() + field.slice(1)}
+      <Forms<FormValues> onSubmit={onSubmit} defaultValues={initialFormState}>
+        {({
+          register,
+          formState: { errors },
+          setValue,
+          watch,
+          reset,
+          trigger,
+        }) => {
+          return (
+            <div className="ff-main">
+              {/* Username Field */}
+              <div>
+                <Typography as="label">username</Typography>
+                <Input
+                  type="text"
+                  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>
+                <Typography as="label">Email</Typography>
+
+                <Input
+                  type="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>
+                <Typography as="label">Password</Typography>
+                <Input
+                  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>
-                  <input
-                    id={field}
-                    type={
-                      field === 'email'
-                        ? 'email'
-                        : field === 'password'
-                        ? 'password'
-                        : 'text'
-                    }
-                    {...register(field as keyof FormValues, {
-                      ...validationRules[field as keyof typeof validationRules],
-                      onChange: (e: any) => {
-                        const value = e.target.value;
-                        setFormData((prev) => ({
-                          ...prev,
-                          [field]: value,
-                        }));
-                        if (errors[field as keyof FormValues]?.message) {
-                          handleBlur(field as keyof FormValues);
-                        }
-                      },
-                    })}
-                    className={
-                      errors[field as keyof FormValues] ? 'ff-error' : ''
-                    }
-                    onBlur={() => handleBlur(field as keyof FormValues)}
-                  />
-                  {errors[field as keyof FormValues]?.message && (
-                    <span className="ff-error">
-                      {String(errors[field as keyof FormValues]?.message)}
-                    </span>
-                  )}
-                </div>
-              ))}
+                )}
+              </div>
 
-              {/* Gender Radio Input */}
-              <div className="ff-form-radio-group">
-              <Typography as="label"> Gender </Typography>
-                <div className='ff-radio-group-wrapper'>
-                {['Male', 'Female', 'Other'].map((gender) => (
-                  <div className="ff-radio-gender" key={gender}>
-                    <Typography as="label"> 
-                      <input
-                        type="radio"
-                        value={gender}
-                        {...register('gender', validationRules.gender)}
-                        checked={formData.gender === gender}
-                        onChange={() =>
-                          setFormData((prev) => ({ ...prev, gender }))
-                        }
-                        onBlur={() => handleBlur('gender')}
-                      />
-                      {gender}
-                    </Typography>
-                  </div>
-                ))}
-                {errors.gender?.message && (
-                  <span className="ff-error">
-                    {String(errors.gender.message)}
-                  </span>
+              {/* Language Field */}
+              <div className="ff-select">
+                <Typography as="label">Programming Language</Typography>
+                <Select
+                  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',
+                    },
+                  })}
+                  onChange={(option) =>
+                    setValue('language', option.value, { shouldValidate: true })
+                  }
+                />
+                {errors?.gender && (
+                  <Typography className="ff-error">
+                    {errors?.language?.message}
+                  </Typography>
                 )}
-                </div>
               </div>
 
-              {/* Language Select Dropdown */}
-              <div className="ff-form-group">
-                <Typography as='label'>Programming Language</Typography>
-                <select
-                  id="language"
-                  {...register('language', validationRules.language)}
-                  onBlur={() => handleBlur('language')}
-                  className={errors.language ? 'ff-error' : ''}
-                  value={formData.language}
+              {/* 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) => {
-                    const value = e.target.value;
-                    setFormData((prev) => ({
-                      ...prev,
-                      language: value,
-                    }));
-                    if (value) {
-                      setValue('language', value);
-                    }
+                    setValue('description', e.target.value, {
+                      shouldValidate: true,
+                    });
                   }}
-                >
-                  <option value="">Select a language</option>
-                  {['Java', 'Rust', 'Dart'].map((lang) => (
-                    <option key={lang} value={lang}>
-                      {lang}
-                    </option>
-                  ))}
-                </select>
-                {errors.language?.message && (
-                  <span className="ff-error">
-                    {String(errors.language.message)}
-                  </span>
+                  onBlur={() => {
+                    trigger('description');
+                  }}
+                />
+              </div>
+              {/* check box Field */}
+              <div className="ff-check">
+                <Checkbox
+                  label="terms condition"
+                  disabled={false}
+                  {...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="submit">Submit</button>
-                <button type="button" onClick={() => handleReset(setValue)}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    reset(initialFormState);
+                  }}
+                >
                   Reset
                 </button>
               </div>
-            </>
-          )}
-        </Form>
-
-        <pre>
-          <span>Payload Data:</span>
-        </pre>
-        <pre>{JSON.stringify(formData, null, 2)}</pre>
-      </div>
+            </div>
+          );
+        }}
+      </Forms>
     );
   },
 };
 
-export default meta;
+export default meta;

package/src/components/Form/Form.ts

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

package/src/components/Form/Forms.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Form from './Form';
+
+interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
+  onSubmit: Form.SubmitHandler<T>;
+  children: (methods: ReturnType<typeof Form.useForm<T>>) => React.ReactNode;
+}
+
+const Forms = <T extends Form.FieldValues>({
+  onSubmit,
+  children,
+  ...rest
+}: FormProps<T>) => {
+  const methods = Form.useForm<T>(rest);
+
+  const { handleSubmit } = methods;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {children(methods)}
+    </form>
+  );
+};
+
+export default Forms;

package/src/components/Form/index.ts

@@ -1 +1 @@
-export {default} from './Form';
+export * from './Form';

package/src/components/Icon/iconList.ts

@@ -114,12 +114,23 @@ import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
 import UpdateIcon from '../../assets/icons/update_icon.svg?react';
 import AddFile from '../../assets/icons/add_file.svg?react';
 import EyeClosed from '../../assets/icons/eye_closed.svg?react';
+import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
+import VariableIcon from '../../assets/icons/variable_icon.svg?react';
+import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
 
 import CloneIcon from '../../assets/icons/clone_icon.svg?react';
 import MoveIcon from '../../assets/icons/move_icon.svg?react';
 import Jira from '../../assets/icons/jira.svg?react';
 import HistoryIcon from '../../assets//icons/history_icon.svg?react';
 import LinkedDefects from '../../assets//icons/linked_defects.svg?react';
+import FireflinkPlatform from '../../assets//icons/fireflink_platform.svg?react';
+import FireflinkFinder from '../../assets//icons/fireflink_finder_logo.svg?react';
+import ClientProfile from '../../assets//icons/client_profile.svg?react';
+import LicenseExpired from '../../assets//icons/license_expired.svg?react';
+import AddTestCaseIcon from '../../assets/icons/add_testcase.svg?react';
+import AutomationTestCaseIcon from '../../assets/icons/automation_testcase.svg?react';
+import ManualTestCaseIcon from '../../assets/icons/manual_testcase.svg?react';
+import BackIcon from '../../assets/icons/back_icon.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -238,5 +249,17 @@ Components['no_access_icon'] = NoAccessIcon;
 Components['full_access_icon'] = FullAccessIcon;
 Components['view_access_icon'] = ViewAccessIcon;
 Components['eye_closed'] = EyeClosed;
+Components['attachment_icon'] = AttachmentIcon;
+Components['variable_icon'] = VariableIcon;
+Components['authorization_icon'] = AuthorizationIcon;
+
+Components['fireflink_platform_logo'] = FireflinkPlatform;
+Components['fireflink_finder_logo'] = FireflinkFinder;
+Components['client_profile'] = ClientProfile;
+Components['license_expired'] = LicenseExpired;
+Components['add_testcase'] = AddTestCaseIcon;
+Components['automation_testcase'] = AutomationTestCaseIcon;
+Components['manual_testcass'] = ManualTestCaseIcon;
+Components['back_icon'] = BackIcon;
 
 export default Components;

package/src/components/Icon/types.ts

@@ -7,5 +7,5 @@ export interface IconProps {
   onClick?: (data?: any) => void;
   hoverEffect?: boolean;
   disabled?: boolean;
-  variant?: "dark" | "light";
+  variant?: 'dark' | 'light';
 }

package/src/components/IconButton/IconButton.scss

@@ -33,7 +33,7 @@
     border: 1px solid var(--secondary-icon-color);
     background-color: var(--hover-color);
     .icon-name {
-      font-weight: 600;
+      font-weight: 400;
       color: var(--secondary-icon-color);
       @include mixins.center-content();
     }

package/src/components/MenuOption/types.ts

@@ -105,17 +105,18 @@ interface MenuOptionProps {
    */
   dropdownPlacement?: string | 'top' | 'left' | 'right' | 'down';
 
-  /**
-   * Callback function triggered when the icon is clicked.
-   * @type {function}
+   /**
+   * The variant of the menu option, either 'dark' or 'light'.
+   * @type {'dark' | 'light'}
+   * @default 'light'
    * @optional
    */
 
   variant?: 'dark' | 'light';
+ 
   /**
-   * The variant of the menu option, either 'dark' or 'light'.
-   * @type {'dark' | 'light'}
-   * @default 'light'
+   * Callback function triggered when the icon is clicked.
+   * @type {function}
    * @optional
    */
 

package/src/components/MiniModal/MiniModal.scss

@@ -168,3 +168,8 @@
 .ff-mini-modal-gap-10 {
   gap: 10px;
 }
+.ff-mini-edit-model-icon {
+  color: var(--ff-mini-modal-box-shadow);
+  border: 2px solid var(--ff-mini-modal-box-shadow);
+  border-radius: 4px;
+}

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -4,6 +4,7 @@ import MiniModal from './MiniModal';
 import Button from '../Button/Button';
 import './MiniModal.scss';
 import Typography from '../Typography';
+import Icon from '../Icon';
 
 const meta: Meta<typeof MiniModal> = {
   title: 'Components/MiniModal',
@@ -595,5 +596,99 @@ export const CustomModalWithWrapper = () => {
     </div>
   );
 };
+export const normalModalFollowedByIcon = () => {
+  const iconRef1 = useRef<HTMLButtonElement>(null);
+  const iconRef2 = useRef<HTMLButtonElement>(null);
+  const iconRef3 = useRef<HTMLButtonElement>(null);
+  const { currentModal, openModal } = useModal();
+
+  return (
+    <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
+      <Icon
+        className="ff-mini-edit-model-icon"
+        width={16}
+        height={16}
+        onClick={() => openModal(1)}
+        ref={iconRef1}
+        name="user_profile"
+      />
+
+      {currentModal === 1 && (
+        <MiniModal
+          anchorRef={iconRef1}
+          modalProperties={{ width: 168, height: 108 }}
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the first modal.
+              </Typography>
+            </>
+          }
+          isIconModel={true}
+          isAnimated={true}
+          firstAnchorRef={iconRef1}
+          anchorLeftDistanceForWrapper={0}
+          extraTopSpace={{ normalModal: 5 }}
+        />
+      )}
+
+      <Icon
+        className="ff-mini-edit-model-icon"
+        width={16}
+        height={16}
+        onClick={() => openModal(2)}
+        ref={iconRef2}
+        name="user_profile"
+      />
+
+      {currentModal === 2 && (
+        <MiniModal
+          anchorRef={iconRef2}
+          modalProperties={{ width: 193, height: 128 }}
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the Second modal.
+              </Typography>
+            </>
+          }
+          isIconModel={true}
+          isAnimated={true}
+          firstAnchorRef={iconRef2}
+          anchorLeftDistanceForWrapper={20}
+          extraTopSpace={{ normalModal: 15 }}
+        />
+      )}
+
+      <Icon
+        className="ff-mini-edit-model-icon"
+        width={16}
+        height={16}
+        onClick={() => openModal(3)}
+        ref={iconRef3}
+        name="user_profile"
+      />
+
+      {currentModal === 3 && (
+        <MiniModal
+          anchorRef={iconRef3}
+          modalProperties={{ width: 168, height: 108 }}
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal.
+              </Typography>
+            </>
+          }
+          isIconModel={true}
+          isAnimated={true}
+          firstAnchorRef={iconRef3}
+          anchorLeftDistanceForWrapper={10}
+          extraTopSpace={{ normalModal: 10 }}
+        />
+      )}
+    </div>
+  );
+};
 
 export default meta;