pixel-react 1.0.0

package/src/components/FileDropzone/FileDropzone.tsx

@@ -0,0 +1,98 @@
+import useFileDropzone from '../../hooks/useFileDropzone';
+import { FileDropzoneProps } from './types';
+import './FileDropzone.scss';
+import Icon from '../Icon';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import { useMemo } from 'react';
+import Dropzone from './Dropzone';
+import FilePreview from './FilePreview';
+
+const FileDropzone: React.FC<FileDropzoneProps> = ({
+  icon = <Icon name="dropzone_icon" height={80} width={80} />,
+  primaryLabel = 'Drag & drop your file to upload',
+  secondaryLabel = 'Or',
+  buttonLabel = 'Choose File to upload',
+  accept = [],
+  multiple = false,
+  maxFiles,
+  maxSize,
+  onMaxFilesError,
+  maxSizeErrorMessage = '',
+  invalidFileMessage = '',
+  fileExistMessage = '',
+  validateMIMEType = false,
+}) => {
+  const {
+    getRootProps,
+    getInputProps,
+    acceptedFiles,
+    rejectedFiles,
+    isDragActive,
+    handleRemoveClick,
+    handleReplaceClick,
+  } = useFileDropzone({
+    accept,
+    multiple,
+    maxFiles,
+    maxSize,
+    onMaxFilesError,
+    maxSizeErrorMessage,
+    invalidFileMessage,
+    fileExistMessage,
+    validateMIMEType,
+    // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
+  });
+
+  const acceptedFilesList = useMemo(
+    () =>
+      acceptedFiles.map((file) => (
+        <FilePreview
+          key={file.name}
+          file={file}
+          onRemoveClick={handleRemoveClick}
+          onReplaceClick={handleReplaceClick}
+        />
+      )),
+    [acceptedFiles, handleRemoveClick, handleReplaceClick]
+  );
+
+  const rejectedFilesList = useMemo(
+    () =>
+      rejectedFiles.map((rejectedFile) => (
+        <FilePreview
+          key={rejectedFile.file.name}
+          file={rejectedFile.file}
+          error={rejectedFile.errors[0]?.message}
+          onRemoveClick={handleRemoveClick}
+          onReplaceClick={handleReplaceClick}
+        />
+      )),
+    [rejectedFiles, handleRemoveClick, handleReplaceClick]
+  );
+
+  return (
+    <div className="ff-file-dropzone-wrapper">
+      <Dropzone
+        icon={icon}
+        primaryLabel={primaryLabel}
+        secondaryLabel={secondaryLabel}
+        buttonLabel={buttonLabel}
+        getRootProps={getRootProps}
+        getInputProps={getInputProps}
+        isDragActive={isDragActive}
+      />
+
+      <div className={'ff-file-details-wrapper'}>
+        {!checkEmpty(acceptedFiles) && (
+          <div className="ff-file-details">{acceptedFilesList}</div>
+        )}
+
+        {!checkEmpty(rejectedFiles) && (
+          <div className="ff-file-details">{rejectedFilesList}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FileDropzone;

package/src/components/FileDropzone/FilePreview.tsx

@@ -0,0 +1,75 @@
+import './FileDropzone.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { FilePreviewProps } from './types';
+import Typography from '../Typography';
+
+const FilePreview: React.FC<FilePreviewProps> = ({
+  file,
+  error,
+  onRemoveClick,
+  onReplaceClick,
+}) => {
+  return (
+    <div key={file.name} className="ff-file-details__item">
+      <div className="ff-file-info">
+        <div className="ff-file-info__icon">
+          <Icon
+            name="file"
+            color={'var(--icons-default-color)'}
+            height={16}
+            width={16}
+          />
+        </div>
+        <div className="ff-file-info__name-wrapper">
+          <Tooltip title={file?.name}>
+            <Typography
+              lineHeight="18px"
+              fontWeight="semi-bold"
+              color={'var(--text-color)'}
+              className="ff-file-info__name-wrapper__name"
+            >
+              {file?.name}
+            </Typography>
+          </Tooltip>
+          {error && (
+            <Typography
+              fontSize={8}
+              color={'var(--error-light)'}
+              lineHeight="12px"
+              letterSpacing="0.5px"
+            >
+              {error}
+            </Typography>
+          )}
+        </div>
+      </div>
+      <div className="ff-file-actions">
+        <div className="ff-file-actions__icon-replace">
+          <Tooltip title="Replace">
+            <Icon
+              name="replace"
+              color={'var(--icons-default-color)'}
+              height={16}
+              width={16}
+              onClick={() => onReplaceClick(file)}
+            />
+          </Tooltip>
+        </div>
+        <div className="ff-file-actions__icon-remove">
+          <Tooltip title="Remove">
+            <Icon
+              name="remove"
+              height={16}
+              width={16}
+              color={'var(--default-icon-color)'}
+              onClick={() => onRemoveClick(file)}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilePreview;

package/src/components/FileDropzone/index.ts

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

package/src/components/FileDropzone/types.ts

@@ -0,0 +1,113 @@
+import { ReactNode } from 'react';
+
+export interface FileDropzoneProps {
+  /**
+   *  Icon to be displayed in the dropzone.
+   **/
+  icon?: ReactNode;
+  /**
+   *  Primary label to be shown in dropzone area
+   **/
+  primaryLabel?: string;
+  /**
+   *  Secondary label to be shown
+   **/
+  secondaryLabel?: string;
+  /**
+   *  Label to be shown in choose file/input button.
+   **/
+  buttonLabel?: string;
+  /**
+   *  . extension needs to be passed to allow the type of file to add or MIME type to be validate MIME type
+   **/
+  accept: string[];
+  /**
+   *  To allow multiple selection or drop of files.
+   **/
+  multiple?: boolean;
+  /**
+   *  Maximum files to be dropped or selected at once.
+   **/
+  maxFiles?: number;
+  /**
+   *  Maximum size of the file in numbers.
+   **/
+  maxSize?: number;
+  /**
+   *  Function with state to get the boolean value when the maxFiles is less than dropped files.
+   **/
+  onMaxFilesError?: () => void;
+  /**
+   *  To show error message if file size exceeds the max size
+   **/
+  maxSizeErrorMessage?: string;
+  /**
+   *  To show error message if file is not of accepted file type
+   **/
+  invalidFileMessage?: string;
+  /**
+   *  To show error message if file already exist with same name and type
+   **/
+  fileExistMessage?: string;
+  /**
+   *  To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
+   **/
+  validateMIMEType?: boolean;
+}
+export interface FileState {
+  accepted: File[];
+  rejected: FileRejection[];
+}
+export interface FileError {
+  message: string;
+  code: string;
+}
+
+export interface FileRejection {
+  file: File;
+  errors: FileError[];
+}
+
+export interface DropzoneOptions {
+  accept: string[];
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number | undefined;
+  onDrop?: (
+    acceptedFiles: File[],
+    rejectedFiles: FileRejection[],
+    event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  onMaxFilesError?: () => void;
+  maxSizeErrorMessage?: string;
+  invalidFileMessage?: string;
+  fileExistMessage?: string;
+  validateMIMEType?: boolean;
+}
+
+export interface DropzoneState {
+  getRootProps: () => React.HTMLAttributes<HTMLElement>;
+  getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+  acceptedFiles: File[];
+  rejectedFiles: FileRejection[];
+  isDragActive: boolean;
+  handleRemoveClick: (file: File) => void;
+  handleReplaceClick: (file: File) => void;
+}
+
+export interface DroppableProps {
+  icon: React.ReactNode;
+  primaryLabel: string;
+  secondaryLabel: string;
+  buttonLabel: string;
+  getRootProps: () => any;
+  getInputProps: () => any;
+  isDragActive: boolean;
+}
+
+export interface FilePreviewProps {
+  file: File;
+  error?: string;
+  onRemoveClick: (file: File) => void;
+  onReplaceClick: (file: File) => void;
+}

package/src/components/Form/Form.scss

@@ -0,0 +1,98 @@
+@use '../../assets/styles/fonts';
+
+.ff-form-container {
+  @extend .fontSm;
+  background-color: var(--hover-color);
+  border: 1px solid var(--arrows-button-border-color);
+  border-radius: 8px;
+  padding: 20px;
+  width: 400px;
+  margin: 0 auto;
+
+  .ff-form-group {
+    margin-bottom: 16px;
+
+    .ff-label {
+      display: block;
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+
+    input {
+      width: 94%;
+      padding: 10px;
+      border: 1px solid var(--arrows-button-border-color);
+      border-radius: 8px;
+      &:focus {
+        border-color: var(--brand-color);
+      }
+      &.ff-error {
+        border-color: var(--ff-error-light);
+      }
+    }
+    .ff-error {
+      color: var(--error-light);
+      margin-top: 4px;
+    }
+  }
+  .ff-form-group {
+    margin-bottom: 16px;
+    .ff-label {
+      display: block;
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+    input,
+    select {
+      width: 94%;
+      padding: 10px;
+      border: 1px solid var(--arrows-button-border-color);
+      border-radius: 8px;
+      &:focus {
+        border-color: var(--brand-color);
+      }
+      &.ff-error {
+        border-color: var(--ff-error-light); // Ensure red border color
+      }
+    }
+  }
+  
+  .ff-form-radio-group {
+    display: flex; 
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 16px;
+    .ff-radio-group-wrapper{
+      display: flex;
+    }
+    .ff-radio-gender {
+      display: flex;
+      flex-direction: column;
+      align-items: center; 
+
+      input[type="radio"] {
+        margin-right: 0.5rem;
+      }
+    }
+    .ff-error {
+      padding-left: 12px;
+      color: var(--error-light);
+      margin-top: 4px;
+    }
+  }
+  .ff-button-layout {
+    width: 99%;
+    display: flex;
+    gap: 12px;
+    margin-top: 24px;
+    button {
+      width: 50%;
+      background-color: var(--brand-color);
+      color: var(--primary-button-text-color);
+      border: none;
+      border-radius: 8px;
+      padding: 10px;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,177 @@
+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 Typography from '../Typography';
+
+const meta: Meta<typeof Form> = {
+  title: 'Components/Form',
+  component: Form,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Form>;
+
+export const WithControlledState: Story = {
+  render: () => {
+    const initialFormState: FormValues = {
+      username: '',
+      email: '',
+      password: '',
+      gender: '',
+      language: '',
+    };
+
+    const [formData, setFormData] = useState<FormValues>(initialFormState);
+
+    const handleSubmit = (data: FormValues) => {
+      setFormData(data);
+      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>
+              ))}
+
+              {/* 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>
+                )}
+                </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);
+                    }
+                  }}
+                >
+                  <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>
+                )}
+              </div>
+
+              <div className="ff-button-layout">
+                <button type="submit">Submit</button>
+                <button type="button" onClick={() => handleReset(setValue)}>
+                  Reset
+                </button>
+              </div>
+            </>
+          )}
+        </Form>
+
+        <pre>
+          <span>Payload Data:</span>
+        </pre>
+        <pre>{JSON.stringify(formData, null, 2)}</pre>
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/components/Form/Form.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  useForm,
+  UseFormProps,
+  SubmitHandler,
+  FieldValues,
+  FieldPath,
+  FieldErrors,
+} from 'react-hook-form';
+import './Form.scss';
+
+interface FormProps<T extends FieldValues> extends UseFormProps<T> {
+  onSubmit: SubmitHandler<T>;
+  children: (props: {
+    register: (name: FieldPath<T>, options?: any) => any;
+    errors: FieldErrors<T>;
+    handleBlur: (field: FieldPath<T>) => void;
+    getValues: () => T;
+    watch: (field?: FieldPath<T>) => any;
+    setValue: (field: FieldPath<T>, value: any, options?: object) => void;
+  }) => React.ReactNode;
+}
+
+const Form = <T extends FieldValues>({
+  onSubmit,
+  children,
+  ...rest
+}: FormProps<T>) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    trigger,
+    getValues,
+    watch,
+    setValue
+  } = useForm<T>(rest);
+
+  const handleBlur = async (field: FieldPath<T>) => {
+    await trigger(field);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {children({
+        register,
+        errors,
+        handleBlur,
+        getValues,
+        watch,
+        setValue,
+      })}
+    </form>
+  );
+};
+
+export default Form;

package/src/components/Form/index.ts

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

package/src/components/Form/types.ts

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

package/src/components/Form/validation.json

@@ -0,0 +1,29 @@
+{
+  "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"
+  }
+}