pixel-react 1.2.1 → 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/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/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/ModulesChip/ModuleChip.scss

@@ -0,0 +1,20 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-expandable-chip-menu {
+  width: 75px;
+  height: 32px;
+  border: 0.5px solid;
+  border-radius: 16px;
+  color: var(--brand-color);
+  cursor: pointer;
+  @include mixins.center-content();
+  .ff-label-chip {
+    &--active {
+      color: var(--ff-header-text-color);
+    }
+  }
+  &--active {
+    background: var(--brand-color);
+  }
+}

package/src/components/ModulesChip/ModuleChip.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ModuleChip from './ModuleChip';
+import { useState } from 'react';
+
+const meta: Meta<typeof ModuleChip> = {
+  title: 'Components/ModuleChip',
+  component: ModuleChip,
+  parameters: {
+    layout: 'center',
+  },
+  argTypes: {
+    isActive: Boolean,
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof ModuleChip>;
+
+const defaultArgs = {
+  label: 'Modules',
+  isActive: false,
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [selectedMenu, setSelectedMenu] = useState<boolean>(true);
+    const handleChipClick = () => {
+      setSelectedMenu(!selectedMenu);
+    };
+
+    return (
+      <ModuleChip
+        {...defaultArgs}
+        isActive={selectedMenu}
+        onClick={handleChipClick}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/ModulesChip/ModuleChip.tsx

@@ -0,0 +1,31 @@
+import './ModuleChip.scss';
+import classNames from 'classnames';
+import { ModuleChipProps } from './types';
+import Typography from '../Typography';
+
+const ModuleChip: React.FC<ModuleChipProps> = ({
+  label = '',
+  isActive = true,
+  onClick = () => {},
+}) => {
+  return (
+    <div
+      className={classNames('ff-expandable-chip-menu', {
+        'ff-expandable-chip-menu--active': isActive,
+      })}
+      onClick={onClick}
+    >
+      <div
+        className={classNames(`ff-label-chip `, {
+          'ff-label-chip--active': isActive,
+        })}
+      >
+        <Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">
+          {label}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default ModuleChip;

package/src/components/ModulesChip/index.ts

@@ -0,0 +1 @@
+export { default } from './ModuleChip';

package/src/components/ModulesChip/types.ts

@@ -0,0 +1,14 @@
+export interface ModuleChipProps {
+  /**
+   * mandatory | label for the ModuleChip component
+   */
+  label: string;
+  /**
+   * mandatory | isActive for the ModuleChip component
+   */
+  isActive: boolean;
+  /**
+   * mandatory | onClick for the ModuleChip component
+   */
+  onClick: () => void;
+}

package/src/components/MultiSelect/Dropdown.tsx

@@ -5,6 +5,7 @@ import './Dropdown.scss';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
 import Button from '../Button';
+import Typography from '../Typography';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -82,7 +83,11 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 onClick={() => handleOptionChange(info, !info.isChecked)}
               >
                 <input type="checkbox" checked={info.isChecked} readOnly />
-                <span className="dropdown-option-label">{info.label}</span>
+                <Typography
+                  as="span"
+                  className="dropdown-option-label"
+                  children={info.label}
+                />
               </div>
             ))
           )}

package/src/components/MultiSelect/MultiSelect.scss

@@ -38,16 +38,16 @@
   cursor: pointer;
   position: relative;
   border: 1px solid var(--default-icon-color);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--drawer-footer-bg);
   min-width: 150px;
   width: 100%;
   height: 32px;
   .ff-multiselect {
     position: relative;
-    padding: 6px;
+    padding: 3px;
     border: none;
-    border-radius: 8px;
+    border-radius: 4px;
     @include flex-center;
     &__main {
       display: flex;
@@ -61,6 +61,8 @@
 
       .active-default-label {
         @extend .font-size-8;
+        font-size: 8px !important;
+        height: 8px;
         @include label-styles;
         background-color: var(--multi-select-label-bg);
         line-height: 12px;
@@ -87,6 +89,9 @@
             @extend .fontXs;
             line-height: 14px;
             color: var(--tooltip-bg-color);
+            &.pr-2 {
+              padding: 5px 2px;
+            }
           }
           .ff-multiselect-chip-close-icon {
             cursor: pointer;
@@ -108,13 +113,15 @@
             }
           }
         }
-        .ff-multiselect-more-chip{
-          width: 1.2rem;
-          @extend .fontSm;
-          font-weight: 600;
-          line-height: 16px;
-          color: var(--brand-color);
-        }
+      }
+      .ff-multiselect-more-chip {
+        display: flex;
+        align-items: center;
+        width: 1.2rem;
+        @extend .fontSm;
+        font-weight: 600;
+        line-height: 16px;
+        color: var(--brand-color);
       }
     }
     &__toggle {