pixel-react 1.2.0 → 1.2.2

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

@@ -1,22 +1,31 @@
-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';
 
-const meta: Meta<typeof Form> = {
-  title: 'Components/Form',
-  component: Form,
+type FormValues = {
+  username: string;
+  email: string;
+  password: string;
+  gender: string;
+  language: 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: '',
@@ -26,152 +35,177 @@ export const WithControlledState: Story = {
       language: '',
     };
 
-    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)}
-                  </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>
-              ))}
+      <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"
+                  {...register('username', {
+                    required: '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: false,
+                    })
+                  }
+                  onBlur={() => {
+                    trigger('username');
+                  }}
+                />
+              </div>
+
+              {/* Email Field */}
+              <div>
+                <Typography as="label">Email</Typography>
+
+                <Input
+                  type="email"
+                  {...register('email', {
+                    required: '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: false })
+                  }
+                  onBlur={() => {
+                    trigger('email');
+                  }}
+                />
+              </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>
+              {/* Password Field */}
+              <div>
+                <Typography as="label">Password</Typography>
+
+                <Input
+                  type="password"
+                  {...register('password', {
+                    required: '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>
+                <Typography as="label">Gender</Typography>
+
+                <RadioGroup
+                  options={[
+                    {
+                      label: 'Male',
+                      value: 'male',
+                    },
+                    {
+                      label: 'Female',
+                      value: 'female',
+                    },
+                    {
+                      label: 'Other',
+                      value: 'other',
+                    },
+                  ]}
+                  selectedValue={watch('gender')}
+                  onChange={(option) => {
+                    setValue('gender', option.value);
+                  }}
+                  name="gender"
+                />
+                {errors?.gender && (
+                  <span className="ff-error">{errors.gender.message}</span>
                 )}
-                </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}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    setFormData((prev) => ({
-                      ...prev,
-                      language: value,
-                    }));
-                    if (value) {
-                      setValue('language', value);
-                    }
+              {/* 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') || '',
                   }}
-                >
-                  <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>
+                  {...register('language', {
+                    required: 'Programming language is required',
+                  })}
+                  onChange={(option) =>
+                    setValue('language', option.value, { shouldValidate: true })
+                  }
+                />
+                {errors?.gender && (
+                  <span className="ff-error">{errors?.language?.message}</span>
                 )}
               </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/Icons.scss

@@ -3,6 +3,7 @@
   justify-content: center;
   align-items: center;
   padding: 4px;
+  box-sizing: content-box;
   &.ff-icon-dark {
     background-color: var(--brand-color);
     &.ff-icon-click {

package/src/components/Icon/iconList.ts

@@ -120,6 +120,10 @@ 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';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -238,5 +242,9 @@ Components['no_access_icon'] = NoAccessIcon;
 Components['full_access_icon'] = FullAccessIcon;
 Components['view_access_icon'] = ViewAccessIcon;
 Components['eye_closed'] = EyeClosed;
+Components['fireflink_platform_logo'] = FireflinkPlatform;
+Components['fireflink_finder_logo'] = FireflinkFinder;
+Components['client_profile'] = ClientProfile;
+Components['license_expired'] = LicenseExpired;
 
 export default Components;

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/InputWithDropdown/types.ts

@@ -74,7 +74,7 @@ export interface InputWithDropdownProps {
   /**
    * onChange handler for dropdown changes
    */
-  onDropdownChangeHandler?: (option: Option) => void;
+  onDropdownChangeHandler?: (option: any) => void;
 
   /**
    * onInputBlurHandler action for input field

package/src/components/LabelEditTextField/LabelEditTextField.scss

@@ -0,0 +1,85 @@
+@use '../../assets/styles/fonts' as *;
+
+.ff-label-edit-text-field {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  .ff-label-text-field {
+    display: flex;
+    gap: 10px;
+  }
+  .ff-label-text-field-with-dropdown,
+  .ff-label-text-field-without-dropdown {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .ff-label {
+    position: absolute;
+    top: 0;
+    left: 10px;
+    transform: translateY(-50%);
+    transition: all 0.2s ease;
+    color: var(--label-edit-text-label-color);
+    background: var(--label-edit-text-background-color);
+    padding: 0 4px;
+    @extend .font-size-8;
+  }
+  .ff-textfield-label {
+    @extend .ff-label;
+    top: 5px;
+  }
+
+  .display-text {
+    padding: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .ff-text-field,
+  .dropdown {
+    border: 1px solid var(--label-edit-text-label-color);
+    outline: none;
+    width: fit-content;
+    @extend .fontSm;
+  }
+  .ff-text-field {
+    padding: 0 4px;
+    border-radius: 4px;
+  }
+  .ff-text-dropdown-field {
+    flex: 2;
+    border: 1px solid var(--label-edit-text-label-color);
+    border-radius: 4px 0 0 4px;
+    border-right: none;
+    border-width: thin;
+    padding-left: 5px;
+    @extend .fontSm;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  .dropdown {
+    border-radius: 0 4px 4px 0;
+    flex: 1;
+    height: inherit;
+  }
+
+  .ff-icon-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    .confirm-icon,
+    .cancel-icon {
+      cursor: pointer;
+    }
+  }
+
+  .error-text {
+    margin: 0;
+    color: var(--label-edit-error-text);
+  }
+}

package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LabelEditTextField from './LabelEditTextField';
+import '../../assets/styles/_colors.scss';
+import './LabelEditTextField.scss';
+
+const meta: Meta<typeof LabelEditTextField> = {
+  title: 'Components/LabelEditTextField',
+  component: LabelEditTextField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof LabelEditTextField>;
+export const textField: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.log('Confirmed input value:', inputValue);
+    };
+    return (
+      <LabelEditTextField
+        label="Add Module"
+        text="Verify The Function Of Categories For" //it might be state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+        }}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+      />
+    );
+  },
+};
+export const textFieldWithOutLabel: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.log('Confirmed input value:', inputValue);
+    };
+    return (
+      <LabelEditTextField
+        text="Verify The Function Of Categories For" //it might be state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+        }}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+      />
+    );
+  },
+};
+export const textFieldWithDropdown: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.log(
+        'Confirmed input value and dropdown value:',
+        inputValue,
+        dropdownValue
+      );
+    };
+    return (
+      <LabelEditTextField
+        label="Add Module"
+        text="Verify The Function Of Categories For"
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+        }}
+        variant="textFieldWithDropdown"
+        dropdownData={[
+          { id: 1, value: 'web', label: 'Web & Mobile' },
+          { id: 2, value: 'desktop', label: 'Desktop' },
+        ]}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+      />
+    );
+  },
+};
+export const textFieldWithHighlight: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+
+      console.log(
+        'Confirmed input value and dropdown value:',
+        inputValue,
+        dropdownValue
+      );
+    };
+    return (
+      <LabelEditTextField
+        label="Add Module"
+        text="Verify The Function Of Categories For"
+        highlightText="The Function"
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+        }}
+        variant="textFieldWithDropdown"
+        dropdownData={[
+          { id: 1, value: 'web', label: 'Web & Mobile' },
+          { id: 2, value: 'desktop', label: 'Desktop' },
+        ]}
+        width="400px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+      />
+    );
+  },
+};
+
+export default meta;