pixel-priya 0.0.1

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import FieldSet from './FieldSet';
+import Typography from '../Typography';
+
+const meta: Meta<typeof FieldSet> = {
+  title: 'Components/FieldSet',
+  component: FieldSet,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof FieldSet>;
+
+const defaultArgs = {
+  legendName: 'Default Legend',
+  height: '200px',
+  width: '300px',
+  children: <Typography>'Default content inside the FieldSet.'</Typography>,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const CustomDimensions: Story = {
+  args: {
+    ...defaultArgs,
+    height: '300px',
+    width: '400px',
+    legendName: 'Custom Dimensions',
+  },
+};
+
+export const WithNestedChildren: Story = {
+  args: {
+    ...defaultArgs,
+    legendName: 'Nested Content',
+    children: (
+      <div>
+        <p>This is some nested content inside the FieldSet.</p>
+        <button>Click Me</button>
+      </div>
+    ),
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [legend, setLegend] = useState('Controlled FieldSet');
+    const [content, setContent] = useState('Initial Content');
+
+    const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+      setLegend(event.target.value);
+
+    const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+      setContent(event.target.value);
+
+    return (
+      <>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            Legend:
+            <input
+              type="text"
+              value={legend}
+              onChange={handleLegendChange}
+              style={{ marginLeft: '0.5rem' }}
+            />
+          </label>
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            Content:
+            <input
+              type="text"
+              value={content}
+              onChange={handleContentChange}
+              style={{ marginLeft: '0.5rem' }}
+            />
+          </label>
+        </div>
+        <FieldSet legendName={legend} height="250px" width="350px">
+          {content}
+        </FieldSet>
+      </>
+    );
+  },
+};
+
+export const EmptyFieldSet: Story = {
+  args: {
+    legendName: 'Empty FieldSet',
+    height: '32px',
+    width: '317px',
+    children: null,
+  },
+};
+
+export default meta;

package/src/components/FieldSet/FieldSet.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import './FieldSet.scss';
+import { fieldSetProps } from './types';
+import Typography from '../Typography';
+const FieldSet: FC<fieldSetProps> = ({
+  legendName,
+  height,
+  width,
+  children,
+}) => {
+  return (
+    <div className="ff_fieldSet_container">
+      <fieldset className="ff_fieldSet" style={{ height, width }}>
+        <legend className="ff_legend_container">
+          <Typography
+            color="var(--license_header_text_color)"
+            fontSize={8}
+            lineHeight="12px"
+          >
+            {legendName}
+          </Typography>
+        </legend>
+        <div className="ff_children_container">{children}</div>
+      </fieldset>
+    </div>
+  );
+};
+
+export default FieldSet;

package/src/components/FieldSet/index.ts

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

package/src/components/FieldSet/types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface fieldSetProps {
+  legendName: string;
+  height: string;
+  width: string;
+  children: ReactNode | string;
+}

package/src/components/FileDropzone/Dropzone.tsx

@@ -0,0 +1,108 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+import './FileDropzone.scss';
+import { DroppableProps } from './types';
+import Button from '../Button';
+import Typography from '../Typography';
+import RadioGroup from '../RadioGroup';
+import RadioFilePreview from './RadioFilePreview';
+
+const Dropzone: FC<DroppableProps> = ({
+  icon,
+  primaryLabel,
+  secondaryLabel,
+  buttonLabel,
+  getRootProps,
+  getInputProps,
+  isDragActive = false,
+  height = 188,
+  isWebServiceFileDropZone = false,
+  selectedRadioOption,
+  radioOptions,
+  handleOptionChange,
+  selectedFile,
+  setSelectedFile,
+  handleRemoveFile,
+  isDisable,
+  setShowDrawer,
+}) => {
+  const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
+  return (
+    <div
+      {...getRootProps()}
+      className={classNames('ff-file-dropzone', {
+        'ff-file-dropzone--active': isDragActive,
+        'ff-file-dropzone--webservice-file': isWebServiceFile,
+        'ff-file-dropzone--webservice-container': isWebServiceFileDropZone,
+      })}
+      style={{ height: height }}
+    >
+      {isWebServiceFile ? (
+        <RadioFilePreview
+          selectedFile={selectedFile.name}
+          onFileRemoveClick={handleRemoveFile}
+          onFileReplaceClick={setSelectedFile}
+          setSelectedFile={setSelectedFile}
+          selectedRadioOption={selectedRadioOption}
+          setShowDrawer={setShowDrawer}
+        />
+      ) : (
+        <>
+          <div className="ff-file-dropzone-content__icon">{icon}</div>
+          <div className="ff-file-dropzone-content__labels">
+            <Typography
+              as="p"
+              fontWeight="semi-bold"
+              lineHeight="18px"
+              textAlign="center"
+              color={'var(--text-color)'}
+            >
+              {primaryLabel}
+            </Typography>
+            <Typography
+              as="p"
+              lineHeight="18px"
+              textAlign="center"
+              color={'var(--text-color)'}
+            >
+              {secondaryLabel}
+            </Typography>
+            {isWebServiceFileDropZone ? (
+              <div className="ff-radio-group-wrapper">
+                <Typography fontWeight="semi-bold">
+                  {' '}
+                  Choose file from{' '}
+                </Typography>
+                <RadioGroup
+                  name="radio_btn_file_dropzone"
+                  options={
+                    radioOptions ?? [
+                      { label: 'Default Label', value: 'default_value' },
+                    ]
+                  }
+                  selectedValue={selectedRadioOption?.value}
+                  onChange={handleOptionChange}
+                />
+              </div>
+            ) : (
+              <Button
+                variant="primary"
+                label={buttonLabel}
+                className='choose-file-btn'
+                disabled={isDisable}
+              >
+                <input
+                  {...(isDisable
+                    ? { style: { cursor: 'not-allowed' }, disabled: true }
+                    : getInputProps())}
+                />
+              </Button>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Dropzone;

package/src/components/FileDropzone/FileDropzone.scss

@@ -0,0 +1,181 @@
+@mixin column-flex-gap($gap: 0) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin center {
+  display: grid;
+  place-items: center;
+}
+
+@mixin icon-container($height: 24px, $width: 24px) {
+  height: $height;
+  width: $width;
+}
+
+.ff-file-dropzone-wrapper {
+  @include column-flex-gap(10px);
+  
+
+  .ff-file-dropzone {
+    padding: 16px 0;
+    border-radius: 8px;
+    background: var(--file-dropzone-default-color);
+    border: 1px dashed var(--brand-color);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 8px;
+    transition: background-color 0.2s ease;
+
+    .ff-radio-group-wrapper {
+      position: relative;
+      bottom: 8px;
+    }
+
+    &:hover,
+    &--active {
+      background-color: var(--file-dropzone-selected-color);
+    }
+    &--webservice-file {
+      @include center;
+    }
+    &--webservice-container {
+      @include center;
+      padding: 16px 0 40px 0;
+    }
+    &-content {
+      &__icon {
+        height: 80px;
+        width: 80px;
+        display: grid;
+        place-items: center;
+      }
+
+      &__labels {
+        .choose-file-btn {
+          margin: 0 auto;
+          position: relative;
+          font-weight: 600;
+          line-height: 15px;
+
+          input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+          }
+        }
+      }
+      &__webservice-file {
+        padding: 4px;
+      }
+    }
+  }
+
+  .ff-file-details-wrapper {
+    @include column-flex-gap(10px);
+    max-height: 300px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    padding: 2px;
+    ::-webkit-scrollbar {
+      width: 2px;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: thin;
+
+    .ff-file-details {
+      @include column-flex-gap(10px);
+
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px;
+        border-radius: 4px;
+        background-color: var(--file-details-bg);
+        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
+        overflow: hidden;
+
+        .ff-file-info {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          width: 87%;
+
+          .ff-file-info__icon {
+            @include center;
+            @include icon-container;
+          }
+
+          &__name-wrapper {
+            @include column-flex-gap(2px);
+            justify-content: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+
+            &__name {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              display: block;
+              color: var(--text-color);
+            }
+          }
+        }
+
+        .ff-file-actions {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          &__icon-replace,
+          &__icon-remove {
+            @include icon-container;
+            @include center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+.ff-webservice-file-wrapper {
+  display: flex;
+  gap: 8px;
+  .ff-webservice-file-name {
+    position: relative;
+    bottom: 2px;
+  }
+}
+.ff-input-ref {
+  display: none;
+}
+.ff-disable-file-dropzone-wrapper {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.footer_basic_button {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  @include flex-center;
+  justify-content: flex-end;
+  gap: 16px;
+  border-top: 1px solid var(--border-color);
+  padding: 4px 8px;
+  background-color: var(--primary-icon-color);
+}

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -0,0 +1,273 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import FileDropzone from './FileDropzone';
+import Toaster from '../Toast';
+import { useState } from 'react';
+import { RadioOption } from './types';
+import Drawer from '../Drawer/Drawer';
+import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
+import './FileDropzone.scss';
+import { DynamicObj } from '../CreateVariable/types';
+import Button from '../Button';
+
+const meta: Meta<typeof FileDropzone> = {
+  title: 'Components/FileDropzone',
+  component: FileDropzone,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof FileDropzone>;
+
+const defaultArgs = {
+  accept: ['.png'],
+  multiple: true,
+  maxFiles: 5,
+  maxSize: 5000000,
+  maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
+  invalidFileMessage: 'Invalid file format',
+  fileExistMessage: 'File already exist with same name and type',
+  width: 640,
+  height: 188,
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const withMIMEValidation: Story = {
+  args: {
+    ...defaultArgs,
+    accept: [
+      'image/png',
+      'image/jpeg',
+      'application/x-zip-compressed',
+      'application/zip',
+    ],
+    validateMIMEType: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [showToaster, setShowToaster] = useState<boolean>(false);
+    const [acceptedFiles, setAcceptedFiles] = useState([]);
+    const [rejectedFiles, setRejectedFiles] = useState([]);
+
+    const showMaxFilesError = () => {
+      setShowToaster(true);
+      setTimeout(() => {
+        setShowToaster(false);
+      }, 2000);
+    };
+
+    const getAcceptedFiles = (files) => {
+      setAcceptedFiles(files);
+    };
+
+    const getRejectedFiles = (files) => {
+      setRejectedFiles(files);
+    };
+
+    return (
+      <>
+        <FileDropzone
+          {...defaultArgs}
+          accept={[
+            'image/png',
+            'image/jpeg',
+            'application/x-zip-compressed',
+            'application/zip',
+          ]}
+          validateMIMEType={true}
+          onMaxFilesError={showMaxFilesError}
+          getAcceptedFiles={getAcceptedFiles}
+          getRejectedFiles={getRejectedFiles}
+          isApiResponseError
+        />
+        {showToaster && (
+          <Toaster
+            isOpen={showToaster}
+            variant="danger"
+            toastTitle="Error"
+            toastMessage={'Max 5 files can be uploaded'}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export const WithRadioButton: Story = {
+  render: () => {
+    const [showToaster, setShowToaster] = useState<boolean>(false);
+    const [showModal, setShowModal] = useState(false);
+
+    const [selectedRadioOption, setSelectedRadioOption] =
+      useState<RadioOption>();
+    const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
+      null
+    );
+    const [testDataSelectedFile, setTestDataSelectedFile] = useState<
+      DynamicObj | File | null
+    >(null);
+
+    const drawerArgs = {
+      primaryButtonProps: {
+        label: 'Create',
+        variant: 'primary',
+        disabled: false,
+        onClick: () => {},
+      },
+      secondaryButtonProps: {
+        label: 'Cancel',
+        variant: 'secondary',
+        disabled: false,
+        onClick: () => {},
+      },
+    };
+
+    const radioOptions: RadioOption[] = [
+      { value: 'Test Data', label: 'Test Data' },
+      { value: 'Local File', label: 'Local File' },
+    ];
+    const handleOptionChange = (option: RadioOption) => {
+      setSelectedRadioOption(option);
+      if (option.value === 'Test Data') {
+        setShowModal(true);
+      } else {
+        setShowModal(false);
+      }
+    };
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      
+      if (file) {
+        setSelectedFile(file);
+      }
+    };    
+
+    const handleRemoveFile = () => {
+      setSelectedFile(null);
+    };
+
+    const showMaxFilesError = () => {
+      setShowToaster(true);
+      setTimeout(() => {
+        setShowToaster(false);
+      }, 2000);
+    };
+
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+    ];
+
+    const handleSaveButton = () => {
+      setSelectedFile(testDataSelectedFile);
+      setShowModal(false);
+    };
+
+    return (
+      <>
+        <FileDropzone
+          {...defaultArgs}
+          accept={[
+            'image/png',
+            'image/jpeg',
+            'application/x-zip-compressed',
+            'application/zip',
+          ]}
+          validateMIMEType={true}
+          onMaxFilesError={showMaxFilesError}
+          isWebServiceFileDropZone
+          selectedRadioOption={selectedRadioOption}
+          radioOptions={radioOptions}
+          handleOptionChange={handleOptionChange}
+          setSelectedFile={setSelectedFile}
+          selectedFile={selectedFile}
+          handleFileChange={handleFileChange}
+          handleRemoveFile={handleRemoveFile}
+          setShowDrawer={setShowModal}
+        />
+        {showToaster && (
+          <Toaster
+            isOpen={showToaster}
+            variant="danger"
+            toastTitle="Error"
+            toastMessage={'Max 5 files can be uploaded'}
+          />
+        )}
+        {selectedRadioOption?.value === 'Test Data' && (
+          <Drawer
+            {...drawerArgs}
+            isOpen={showModal}
+            onClose={() => setShowModal(false)}
+            isFooterRequired={false}
+            _isExpanded={false}
+            size="small"
+            
+          >
+            <ConditionalDropdown
+              label="Select Path Using #"
+              placeholder="Enter # to search files"
+              isHash
+              dataFiles={testData}
+              dropdownWidth="auto"
+              setHashInputValue={setTestDataSelectedFile}
+            />
+            <div className="footer_basic_button">
+              <Button
+                type="button"
+                variant="secondary"
+                size="small"
+                onClick={() => setShowModal(false)}
+                label={'Cancel'}
+              />
+
+              <Button
+                type={'button'}
+                variant="primary"
+                size="small"
+                label={'Save'}
+                onClick={handleSaveButton}
+              />
+            </div>
+          </Drawer>
+        )}
+      </>
+    );
+  },
+};
+
+export default meta;