pixel-react 1.0.5 → 1.0.7

package/src/components/DragAndDrop/DragAndDropList.tsx

@@ -0,0 +1,150 @@
+import { useState } from 'react';
+import DragAndDrop from './DragAndDrop';
+const {
+  DNDCore: {
+    DndContext,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    closestCorners,
+  },
+  DNDSortable: {
+    useSortable,
+    arrayMove,
+    sortableKeyboardCoordinates,
+    SortableContext,
+    verticalListSortingStrategy,
+  },
+  DNDUtilities: { CSS },
+} = DragAndDrop;
+import Typography from '../Typography';
+
+import './DragAndDropList.scss';
+
+interface TaskProps {
+  id: number;
+  title: string;
+}
+
+export const Task = ({ id, title }: TaskProps) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id });
+
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className="task"
+    >
+      <Typography as='h1' fontSize={16} className='task-title'>{title}</Typography>
+    </div>
+  );
+};
+
+interface ColumnProps {
+  id: string;
+  tasks: { id: number; title: string }[];
+}
+
+export const Column: React.FC<ColumnProps> = ({ tasks }) => {
+  return (
+    <div className="column">
+      <SortableContext items={tasks} strategy={verticalListSortingStrategy}>
+        {tasks.map((task) => (
+          <Task key={task.id} id={task.id} title={task.title} />
+        ))}
+      </SortableContext>
+    </div>
+  );
+};
+
+interface InputProps {
+  onSubmit: (input: string) => void;
+}
+
+export const Input: React.FC<InputProps> = ({ onSubmit }) => {
+  const [input, setInput] = useState('');
+
+  const handleSubmit = () => {
+    if (!input) return;
+
+    onSubmit(input);
+
+    setInput('');
+  };
+
+  return (
+    <div className="container">
+      <input
+        className="input"
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+      />
+      <button onClick={handleSubmit} className="button">
+        <Typography fontSize={14}>Add</Typography>
+      </button>
+    </div>
+  );
+};
+
+const DragAndDropList = () => {
+  const [tasks, setTasks] = useState([
+    { id: 1, title: 'Add tests to homepage' },
+    { id: 2, title: 'Fix styling in about section' },
+    { id: 3, title: 'Learn how to center a div' },
+  ]);
+
+  const addTask = (title: any) => {
+    setTasks((tasks) => [...tasks, { id: tasks.length + 1, title }]);
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const getTaskPos = (id: number): number =>
+    tasks.findIndex((task) => task.id === id);
+
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event;
+
+    if (active.id === over.id) return;
+
+    setTasks((tasks) => {
+      const originalPos = getTaskPos(active.id);
+      const newPos = getTaskPos(over.id);
+
+      return arrayMove(tasks, originalPos, newPos);
+    });
+  };
+
+  return (
+    <div className="drag-and-drop-list">
+      <Typography fontSize={32} fontWeight="semi-bold">
+        Drag and Drop test ✅
+      </Typography>
+      <Input onSubmit={addTask} />
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCorners}
+        onDragEnd={handleDragEnd}
+      >
+        <Column id="toDo" tasks={tasks} />
+      </DndContext>
+    </div>
+  );
+};
+
+export default DragAndDropList;

package/src/components/DragAndDrop/index.ts

@@ -0,0 +1 @@
+export * from './DragAndDrop';

package/src/components/Drawer/Drawer.scss

@@ -91,7 +91,6 @@
 
     .ff-drawer-body {
       background-color: var(--drawer-footer-bg);
-      padding: 8px;
       height: calc(100vh - 76px);
       overflow: hidden auto;
     }

package/src/components/Drawer/Drawer.tsx

@@ -3,11 +3,11 @@ import { DrawerProps } from './Types.js';
 import Button from '../Button/Button.js';
 import classNames from 'classnames';
 import './Drawer.scss';
-import { useEffect, useState } from 'react';
+import { FC, useContext, useEffect, useState } from 'react';
 import Icon from '../Icon';
 import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
-
-const Drawer = ({
+import { ThemeContext } from '../ThemeProvider/ThemeProvider.js';
+const Drawer: FC<DrawerProps> = ({
   isOpen = true,
   children = 'Drawer content area',
   onClose = () => {},
@@ -57,9 +57,10 @@ const Drawer = ({
   };
 
   const drawerSize = isExpanded ? 'x-large' : size;
-
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
   return createPortal(
-    <div className="ff-drawer-container">
+    <div className={classNames('ff-drawer-container', currentTheme)}>
       {overlay && <div className="ff-overlay" />}
 
       <div
@@ -102,16 +103,7 @@ const Drawer = ({
               <div className="ff-drawer-title">{title}</div>
             </div>
             {_isCloseModalButtonVisible && (
-              <div>
-                <button onClick={onClose}>
-                  <Icon
-                    name="info"
-                    height={16}
-                    width={16}
-                    hoverEffect={false}
-                  />
-                </button>
-              </div>
+              <Icon name="close" hoverEffect={false} onClick={onClose} />
             )}
           </div>
         </div>

package/src/components/Icon/iconList.ts

@@ -29,23 +29,34 @@ import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
+import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
+import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
+import ClockIcon from '../../assets/icons/clock_icon.svg?react';
 import Edit from '../../assets/icons/edit_icon.svg?react';
 import ViewIcon from '../../assets/icons/view_icon.svg?react';
-import HideIcon from '../../assets/icons/hide_icon.svg?react';
 import ExportCollection from '../../assets/icons/export_collection_icon.svg?react';
 import RunIcon from '../../assets/icons/run_icon.svg?react';
+import AddVariable from '../../assets/icons/add_variable_icon.svg?react';
 
-import ActiveLicenseIcon from '../../assets/icons/active_license_icon.svg?react';
-import ExpiredLicenseIcon from '../../assets/icons/expired_license_icon.svg?react';
-import ExpiringSoonLicenseIcon from '../../assets/icons/expiringSoon_license_icon.svg?react';
+import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
 import ImpactListIcon from '../../assets/icons/impactList.svg?react';
+import InfoIcon from '../../assets/icons/info_icon.svg?react';
+import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
+import HideIcon from '../../assets/icons/hide_icon.svg?react';
+import CollapseIcon from '../../assets/icons/collapse-icon.svg?react';
+import ExpandIcon from '../../assets/icons/expand-icon.svg?react';
+import CopyIcon from '../../assets/icons/copy-icon.svg?react';
+import DownloadFile from '../../assets/icons/download-icon.svg?react';
+import RefreshIcon from '../../assets/icons/refresh-icon.svg?react';
+import LicenseInfo from '../../assets/icons/license_info.svg?react';
+import LicenseWarning from '../../assets/icons/license_warning.svg?react';
 //icons
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
 Components['warning'] = WarningIcon;
-Components['info'] = ToastInfoIcon;
+Components['toast_info'] = ToastInfoIcon;
 Components['error'] = ToastErrorIcon;
 Components['close'] = ToastCloseIcon;
 Components['more'] = MoreIcon;
@@ -71,16 +82,27 @@ Components['tick'] = Tick;
 Components['arrow_right'] = ArrowRight;
 Components['search'] = Search;
 Components['filter'] = Filter;
+Components['right_arrow_icon'] = RightArrow;
+Components['left_arrow_icon'] = LeftArrow;
+Components['clock_icon'] = ClockIcon;
 Components['edit'] = Edit;
 Components['view_icon'] = ViewIcon;
-Components['hide_icon'] = HideIcon;
 Components['export_collection'] = ExportCollection;
 Components['run_icon'] = RunIcon;
-Components['active_license_icon'] = ActiveLicenseIcon;
-Components['expired_license_icon'] = ExpiredLicenseIcon;
-Components['expiringSoon_license_icon'] = ExpiringSoonLicenseIcon;
+Components['license'] = LicenseIcon;
 Components['delete'] = DeleteIcon;
 Components['details'] = DetailsIcon;
 Components['impactList'] = ImpactListIcon;
+Components['add_variable'] = AddVariable;
+Components['info'] = InfoIcon;
+Components['calendar_icon'] = CalendarIcon;
+Components['hide_icon'] = HideIcon;
+Components['collapse_icon'] = CollapseIcon;
+Components['refresh_icon'] = RefreshIcon;
+Components['download_file'] = DownloadFile;
+Components['copy_icon'] = CopyIcon;
+Components['expand_icon'] = ExpandIcon;
+Components['license_info'] = LicenseInfo;
+Components['license_warning'] = LicenseWarning;
 
 export default Components;

package/src/components/{AddButton/AddButton.scss → IconButton/IconButton.scss}

@@ -15,7 +15,9 @@
   padding: 2px 8px 2px 2px;
   border: 1px solid transparent;
   .ff-icon-color {
-    color: var(--primary-icon-color);
+    path {
+      color: var(--primary-icon-color);
+    }
   }
   .icon-name {
     min-width: 33px;
@@ -32,7 +34,9 @@
       color: var(--secondary-icon-color);
     }
     .ff-icon-color {
-      color: var(--secondary-icon-color);
+      path {
+        color: var(--secondary-icon-color);
+      }
     }
   }
 }

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import IconButton from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof IconButton>;
+
+export const PrimaryIconButton: Story = {
+  render: () => {
+    const name = 'Project';
+    const icon = 'plus_icon';
+    const onClick = () => {};
+
+    return <IconButton label={name} iconName={icon} onClick={onClick} />;
+  },
+};
+
+export default meta;

package/src/components/{AddButton/AddButton.tsx → IconButton/IconButton.tsx}

@@ -1,25 +1,28 @@
 import React from 'react';
 import Icon from '../Icon';
-import './AddButton.scss';
+import './IconButton.scss';
 import classNames from 'classnames';
 import Typography from '../Typography';
-import { AddButtonProps } from './types';
+import { IconButtonProps } from './types';
 
-const AddButton: React.FC<AddButtonProps> = ({ name, onClick }) => {
+const IconButton: React.FC<IconButtonProps> = ({
+  label,
+  iconName = 'plus_icon',
+  onClick,
+}) => {
   return (
     <button onClick={onClick} className={classNames('ff-plus-icon')}>
       <Icon
         height={20}
         width={20}
-        name={'plus_icon'}
-        color=''
+        name={iconName}
         className={'ff-icon-color'}
       />
       <Typography as="div" textAlign="center" className="icon-name">
-        {name}
+        {label}
       </Typography>
     </button>
   );
 };
 
-export default AddButton;
+export default IconButton;

package/src/components/IconButton/index.ts

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

package/src/components/{AddButton → IconButton}/types.ts

@@ -1,4 +1,5 @@
-export interface AddButtonProps {
-  name: string;
+export interface IconButtonProps {
+  label: string;
+  iconName: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }

package/src/components/InputWithDropdown/InputWithDropdown.scss

@@ -14,7 +14,7 @@
     .ff-floating-label-input-container {
       .ff-floating-label {
         position: absolute;
-        z-index: 99;
+        z-index: 9;
         color: var(--input-default-border-color);
         top: 7px;
         left: 7px;

package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx

@@ -43,8 +43,7 @@ export const DisabledWithValue: Story = {
   args: {
     ...defaultArgs,
     variant: 'primary',
-    type: 'text',
-    value: 'Disabled',
+    value: 12345,
     disabled: true,
     required: true,
   },
@@ -52,7 +51,7 @@ export const DisabledWithValue: Story = {
 
 export const Controlled: Story = {
   render: () => {
-    const [value, setValue] = useState<string | number>('');
+    const [value, setValue] = useState<number>(0);
     const [error, setError] = useState<boolean>(false);
     const [helperText, setHelperText] = useState<string>('');
 
@@ -70,18 +69,18 @@ export const Controlled: Story = {
 
     const onDropdownChangeHandler = (option: Option) => {
       setSelectedOption(option);
-      setValue('0');
+      setValue(0);
     };
 
     const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.target.value;
+      const inputValue = parseInt(event.target.value);
       setValue(inputValue);
 
       if (event.target) {
-        if (inputValue.length <= 0) {
+        if (inputValue < 0 || checkEmpty(value)) {
           setError(true);
           setHelperText(`${event.target.name} is required`);
-        } else if (inputValue.length > 4) {
+        } else if (inputValue > 999) {
           setError(true);
           setHelperText(`${event.target.name} should be upto 999`);
         } else {
@@ -98,7 +97,6 @@ export const Controlled: Story = {
         label="ImplicitTime"
         placeholder={`Enter ImplicitTime here`}
         value={value}
-        type="number"
         required={true}
         error={error}
         helperText={helperText}
@@ -113,7 +111,7 @@ export const Controlled: Story = {
 
 export const InputWithStaticLabelWithoutOptions: Story = {
   render: () => {
-    const [value, setValue] = useState<string | number>('');
+    const [value, setValue] = useState<number>(0);
     const [error, setError] = useState<boolean>(false);
     const [helperText, setHelperText] = useState<string>('');
 
@@ -126,18 +124,18 @@ export const InputWithStaticLabelWithoutOptions: Story = {
 
     const onDropdownChangeHandler = (option: Option) => {
       setSelectedOption(option);
-      setValue('0');
+      setValue(0);
     };
 
     const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.target.value;
+      const inputValue = parseInt(event.target.value);
       setValue(inputValue);
 
       if (event.target) {
         if (checkEmpty(inputValue)) {
           setError(true);
           setHelperText(`${event.target.name} is required`);
-        } else if (parseInt(inputValue, 10) >= 366) {
+        } else if (inputValue >= 366) {
           setError(true);
           setHelperText(`${event.target.name} should be upto 365`);
         } else {
@@ -154,7 +152,6 @@ export const InputWithStaticLabelWithoutOptions: Story = {
         label="Duration"
         placeholder={`Enter Duration here`}
         value={value}
-        type="number"
         required={true}
         error={error}
         helperText={helperText}

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -8,7 +8,6 @@ const InputWithDropdown = ({
   name = '',
   label,
   value,
-  type,
   disabled = false,
   required = false,
   placeholder,
@@ -18,18 +17,20 @@ const InputWithDropdown = ({
   selectedOption,
   onDropdownChangeHandler = () => {},
   onInputChangeHandler,
+  onInputBlurHandler,
   optionsRequired = true,
 }: InputWithDropdownProps) => {
+  const isValueFilled = value !== undefined && value >= 0;
   return (
     <div
       className={classNames('ff-input-with-dropdown-container', {
-        'ff-input-with-dropdown-container--filled': !!value,
+        'ff-input-with-dropdown-container--filled': isValueFilled,
       })}
     >
       <fieldset
         className={classNames('ff-input-with-dropdown', {
-          'ff-input-with-dropdown--filled': !!value,
-          'ff-input-with-dropdown--no-hover': !!value,
+          'ff-input-with-dropdown--filled': isValueFilled,
+          'ff-input-with-dropdown--no-hover': isValueFilled,
           'ff-input-with-dropdown--disabled': !!disabled,
           'ff-input-with-dropdown--error': !!error,
         })}
@@ -39,8 +40,8 @@ const InputWithDropdown = ({
             as="label"
             htmlFor={name}
             className={classNames('ff-floating-label', {
-              'ff-floating-label--filled': !!value,
-              'ff-floating-label--no-hover': !!value,
+              'ff-floating-label--filled': isValueFilled,
+              'ff-floating-label--no-hover': isValueFilled,
               'ff-floating-label--error': !!error,
             })}
           >
@@ -49,15 +50,16 @@ const InputWithDropdown = ({
           </Typography>
           <input
             name={name}
-            type={type}
+            type="number"
             id={name}
             value={value}
             onChange={onInputChangeHandler}
+            onBlur={onInputBlurHandler}
             placeholder={placeholder}
             required={required}
             disabled={disabled}
             className={classNames('ff-floating-input', {
-              'ff-floating-input--filled': !!value,
+              'ff-floating-input--filled': isValueFilled,
               'ff-floating-input--disabled': !!disabled,
               'ff-floating-input--error': !!error,
             })}

package/src/components/InputWithDropdown/types.ts

@@ -19,17 +19,14 @@ export interface InputWithDropdownProps {
   /**
    * value | input field value
    */
-  value: string | number;
+  value?: number;
 
   /**
    * variants to set color/style of the input field
    */
   variant?: 'default' | 'primary';
 
-  /**
-   * type to set the input field type
-   */
-  type: 'text' | 'password' | 'number' | 'time';
+  
 
   /**
    * error | If true, error message will be displayed
@@ -82,9 +79,9 @@ export interface InputWithDropdownProps {
   onDropdownChangeHandler?: (option: Option) => void;
 
   /**
-   * onFocus action for input field
+   * onInputBlurHandler action for input field
    */
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onInputBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;
 
   /**
    * id to select the input field uniquely

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+import { useState } from 'react';
+import Button from '../Button';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Modal>;
+
+export const DefaultModalStory: Story = {
+  args: {
+    isOpen: true,
+    contentLabel: 'modal',
+    ariaHideApp: true,
+    isHeaderDisplayed: true,
+    headerContent: <h2>title</h2>,
+    children: <h2>Hello</h2>,
+    isFooterDisplayed:true,
+    footerContent: <Button variant="primary" label="continue" />,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [openModal, setModal] = useState(false);
+    return (
+      <>
+        <Button
+          variant="primary"
+          onClick={() => {
+            setModal(true);
+          }}
+        >
+          Show Modal
+        </Button>
+        {openModal && (
+          <Modal
+            overlayClassName="custom-overlay"
+            isOpen={openModal}
+            onClose={() => {
+              setModal(false);
+            }}
+            headerContent={<div>title</div>}
+            isHeaderDisplayed={true}
+            children={<div>Hello</div>}
+            ariaHideApp={true}
+            isFooterDisplayed={true}
+            footerContent={<Button variant="primary" label='continue'/>}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export default meta;