pixel-react 1.0.0

package/src/components/Typography/types.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export interface TypographyProps {
+  /**
+   * Font Weight
+   */
+  fontWeight?: 'regular' | 'medium' | 'semi-bold' | 'bold';
+
+  /**
+   * Font Size
+   */
+
+  fontSize?: number | string;
+
+  /**
+   * Line height
+   */
+
+  lineHeight?: string;
+
+  /**
+   * Color
+   */
+
+  color?: string;
+
+  /**
+   *  Text alignment
+   */
+  textAlign?: 'left' | 'right' | 'center' | 'justify';
+
+  /**
+   * For JSX elements
+   */
+  as?: keyof JSX.IntrinsicElements;
+  /**
+   * htmlFor attribute for element=label,
+   */
+  htmlFor?: string;
+  /**
+   * The content to display within the Typography component
+   */
+  children: React.ReactNode;
+  /**
+   * To add styles in Typography
+   */
+  className?: string;
+  /**
+   * To add letter spacing in Typography
+   */
+  letterSpacing?: string;
+  /**
+   * To add onClick function
+   */
+  onClick?: () => void;
+}

package/src/hooks/keyboardevents/useEscKeyEvent.tsx

@@ -0,0 +1,31 @@
+import {  useEffect } from 'react';
+
+function useEscapeKey(key: string) {
+
+  return (callBack: ()=>void)=>{
+ 
+  
+    const handleKeyDown: (event: KeyboardEvent) => void = (event) => {
+      if (event?.key === key) {
+        console.log('Handel called Closing modal');
+        callBack()
+      }
+    };
+    useEffect(() => {
+      window.addEventListener('keydown', handleKeyDown);
+  
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }, []);
+
+  }
+
+
+
+  
+
+ 
+}
+
+export default useEscapeKey;

package/src/hooks/useClickOutside.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+const useClickOutside = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void,
+  ignoreRefs: Array<React.RefObject<HTMLElement> | undefined> = []
+) => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        ref.current &&
+        !ref.current.contains(event.target as Node) &&
+        !ignoreRefs.some(
+          (ignoreRef) =>
+            ignoreRef?.current &&
+            ignoreRef.current.contains(event.target as Node)
+        )
+      ) {
+        callback();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, callback, ignoreRefs]);
+};
+
+export default useClickOutside;

package/src/hooks/useFileDropzone.tsx

@@ -0,0 +1,273 @@
+import { useState, useCallback } from 'react';
+import { getExtensionWithPeriod } from '../utils/getExtension/getExtension';
+import {
+  DropzoneOptions,
+  DropzoneState,
+  FileError,
+  FileRejection,
+  FileState,
+} from '../components/FileDropzone/types';
+import { checkEmpty } from '../utils/checkEmpty/checkEmpty';
+
+const useFileDropzone = (options: DropzoneOptions): DropzoneState => {
+  const {
+    accept,
+    multiple,
+    maxSize,
+    maxFiles,
+    onMaxFilesError,
+    onDrop,
+    maxSizeErrorMessage,
+    invalidFileMessage,
+    fileExistMessage,
+    validateMIMEType = false,
+  } = options;
+
+  const [files, setFiles] = useState<FileState>({ accepted: [], rejected: [] });
+  const [isDragActive, setIsDragActive] = useState(false);
+
+  const validateFileMIMEType = (
+    file: File,
+    extensionWithPeriod: string
+  ): boolean => {
+    if (accept.includes(file.type)) return true;
+
+    // these special types doesn't have MIME type, user can pass . extension and get it validated based on file name extension
+    const specialTypes = ['.ipa', '.yml', '.md', '.pem', '.properties'];
+    return (
+      specialTypes.includes(extensionWithPeriod) &&
+      accept.includes(extensionWithPeriod)
+    );
+  };
+
+  const validateFile = useCallback(
+    (file: File): FileError[] => {
+      const errors: FileError[] = [];
+
+      if (maxSize && file.size > maxSize) {
+        errors.push({
+          message: maxSizeErrorMessage
+            ? maxSizeErrorMessage
+            : 'File size exceeds the limit',
+          code: 'file-size-exceeded',
+        });
+      }
+
+      const extensionWithPeriod = getExtensionWithPeriod(file).toLowerCase();
+
+      if (validateMIMEType) {
+        if (!validateFileMIMEType(file, extensionWithPeriod)) {
+          errors.push({
+            message: invalidFileMessage
+              ? invalidFileMessage
+              : 'Unsupported File Format',
+            code: 'file-invalid-type',
+          });
+        }
+      } else if (accept && !accept.includes(extensionWithPeriod)) {
+        errors.push({
+          message: invalidFileMessage
+            ? invalidFileMessage
+            : 'Unsupported File Format',
+          code: 'file-invalid-type',
+        });
+      }
+
+      const fileExists = files.accepted.some(
+        (existingFile) =>
+          existingFile.name === file.name &&
+          getExtensionWithPeriod(existingFile) === getExtensionWithPeriod(file)
+      );
+
+      if (fileExists) {
+        errors.push({
+          message: fileExistMessage ? fileExistMessage : 'File already exists.',
+          code: 'file-exists',
+        });
+      }
+
+      return errors;
+    },
+    [
+      accept,
+      maxSize,
+      files,
+      maxSizeErrorMessage,
+      invalidFileMessage,
+      fileExistMessage,
+    ]
+  );
+
+  const replaceFile = useCallback(
+    (fileToReplace: File, newFile: File) => {
+      if (
+        fileToReplace.name === newFile.name &&
+        fileToReplace.size === newFile.size
+      ) {
+        return;
+      }
+      const errors = validateFile(newFile);
+
+      setFiles((prevFiles) => {
+        const updatedAccepted = prevFiles.accepted.filter(
+          (file) => file.name !== fileToReplace.name
+        );
+        const updatedRejected = prevFiles.rejected.filter(
+          (rejection) => rejection.file.name !== fileToReplace.name
+        );
+
+        return {
+          accepted: !checkEmpty(errors)
+            ? updatedAccepted
+            : [...updatedAccepted, newFile],
+          rejected: !checkEmpty(errors)
+            ? [...updatedRejected, { file: newFile, errors }]
+            : updatedRejected,
+        };
+      });
+    },
+    [validateFile]
+  );
+
+  const handleReplaceClick = useCallback(
+    (fileToReplace: File) => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = accept.join(',');
+      input.onchange = (event: Event) => {
+        const newFile = (event.target as HTMLInputElement)?.files?.[0];
+        if (newFile) {
+          replaceFile(fileToReplace, newFile);
+        }
+      };
+      input.click();
+    },
+    [accept, replaceFile]
+  );
+
+  const removeFile = useCallback((fileToRemove: File) => {
+    setFiles((prevFiles) => ({
+      accepted: prevFiles.accepted.filter((file) => file !== fileToRemove),
+      rejected: prevFiles.rejected.filter(
+        (rejection) => rejection.file !== fileToRemove
+      ),
+    }));
+  }, []);
+
+  const handleRemoveClick = useCallback(
+    (file: File) => {
+      removeFile(file);
+    },
+    [removeFile]
+  );
+
+  const handleDrop = useCallback(
+    (
+      event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>
+    ) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const droppedFiles =
+        'dataTransfer' in event
+          ? event.dataTransfer?.files
+          : event.target?.files;
+      if (!droppedFiles) return;
+
+      const droppedOrSelectedFiles = Array.from(droppedFiles);
+
+      if (maxFiles && droppedOrSelectedFiles.length > maxFiles) {
+        if (onMaxFilesError) onMaxFilesError();
+        return;
+      }
+
+      const accepted: File[] = [];
+      const rejected: FileRejection[] = [];
+
+      droppedOrSelectedFiles.forEach((file) => {
+        const errors = validateFile(file);
+        if (!checkEmpty(errors)) {
+          rejected.push({ file, errors });
+        } else {
+          accepted.push(file);
+        }
+      });
+
+      setFiles((prevFiles) => ({
+        accepted: [
+          ...prevFiles.accepted,
+          ...accepted.filter(
+            (newFile) =>
+              !prevFiles.accepted.some(
+                (file) =>
+                  file.name === newFile.name &&
+                  getExtensionWithPeriod(file) ===
+                    getExtensionWithPeriod(newFile)
+              )
+          ),
+        ],
+        rejected: [
+          ...prevFiles.rejected,
+          ...rejected.filter(
+            (newFile) =>
+              !prevFiles.rejected.some(
+                (file) =>
+                  file.file.name === newFile.file.name &&
+                  getExtensionWithPeriod(file.file) ===
+                    getExtensionWithPeriod(newFile.file)
+              )
+          ),
+        ],
+      }));
+
+      if ('dataTransfer' in event) {
+        event.dataTransfer?.clearData();
+      } else {
+        (event.target as HTMLInputElement).value = '';
+      }
+
+      if (onDrop) onDrop(accepted, rejected, event);
+    },
+    [maxFiles, validateFile, onMaxFilesError, onDrop]
+  );
+
+  const handleDragOver = useCallback((event: React.DragEvent<HTMLElement>) => {
+    event.preventDefault();
+    setIsDragActive(true);
+  }, []);
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragActive(false);
+  }, []);
+
+  const getRootProps = useCallback(
+    (): React.HTMLAttributes<HTMLElement> => ({
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+    }),
+    [handleDragOver, handleDragLeave, handleDrop, isDragActive]
+  );
+
+  const getInputProps = useCallback(
+    (): React.InputHTMLAttributes<HTMLInputElement> => ({
+      type: 'file',
+      onChange: handleDrop,
+      multiple,
+      accept: accept ? accept.join(',') : '',
+    }),
+    [handleDrop, multiple, accept]
+  );
+
+  return {
+    getRootProps,
+    getInputProps,
+    acceptedFiles: files.accepted,
+    rejectedFiles: files.rejected,
+    isDragActive,
+    handleRemoveClick,
+    handleReplaceClick,
+  };
+};
+
+export default useFileDropzone;

package/src/hooks/usePortalPosition.tsx

@@ -0,0 +1,53 @@
+import { RefObject, useEffect } from 'react';
+
+export interface PortalPosition {
+  positionX: number;
+  positionY: number;
+  width: number;
+  fromBottom: number;
+}
+
+const portalPosition: PortalPosition = {
+  positionX: 0,
+  positionY: 0,
+  width: 0,
+  fromBottom: 0,
+};
+
+const calculatePosition = (portalRef: RefObject<HTMLElement>) => {
+  if (!portalRef?.current) {
+    return portalPosition;
+  }
+  const dropdownRect = portalRef.current.getBoundingClientRect();
+  const newPosition = {
+    positionX: dropdownRect.left + window.scrollX,
+    positionY: dropdownRect.top + window.scrollY,
+    width: portalRef.current.offsetWidth,
+    fromBottom: window.innerHeight - (dropdownRect.top + dropdownRect.height),
+  };
+  return newPosition;
+};
+
+const usePortalPosition = (
+  portalRef: RefObject<HTMLElement>,
+  isPortalOpen: Boolean
+) => {
+  useEffect(() => {
+    const handleUpdate = () => {
+      calculatePosition(portalRef);
+    };
+
+    if (isPortalOpen) {
+      window.addEventListener('resize', handleUpdate);
+      window.addEventListener('scroll', handleUpdate);
+    }
+    return () => {
+      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate);
+    };
+  }, [isPortalOpen]);
+
+  return calculatePosition;
+};
+
+export default usePortalPosition;

package/src/hooks/useTheme.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ThemeContextType } from '../components/ThemeProvider/types';
+import { ThemeContext } from '../components/ThemeProvider/ThemeProvider';
+
+const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+export default useTheme;

package/src/index.ts

@@ -0,0 +1,91 @@
+import Button from './components/Button';
+import Drawer from './components/Drawer';
+import Icon from './components/Icon';
+import Accordion from './components/Accordion';
+import MultiSelect from './components/MultiSelect';
+import Toaster from './components/Toast/Toast';
+import { Container, Row, Col } from './components/GridLayout/GridLayout';
+import Toggle from './components/Toggle';
+import Chip from './components/Chip';
+import Tooltip from './components/Tooltip';
+import Input from './components/Input';
+import RadialChart from './components/Charts/RadialChart';
+import ExpandableMenu from './components/ExpandableMenu';
+import Select from './components/Select/Select';
+import TextArea from './components/TextArea';
+
+import MenuOption from './components/MenuOption';
+import Table from './components/Table';
+
+import AddResourceButton from './components/AddResourceButton';
+import DonutChart from './components/Charts/DonutChart';
+import FileDropzone from './components/FileDropzone';
+import LazyLoad from './components/LazyLoad/LazyLoad';
+import ThemeProvider from './components/ThemeProvider';
+import Typography from './components/Typography';
+import useTheme from './hooks/useTheme';
+import Form from './components/Form';
+
+
+import InputWithDropdown from './components/InputWithDropdown';
+import RadioButton from './components/RadioButton';
+import RadioGroup from './components/RadioGroup';
+import MiniModal from './components/MiniModal';
+import TableTree from './components/TableTree';
+import Tabs from './components/Tabs';
+import HighlightText from './components/HighlightText';
+import Checkbox from './components/Checkbox';
+import Search from './components/Search'
+
+// Utils imports
+import { checkEmpty } from './utils/checkEmpty/checkEmpty';
+import {
+  getExtension,
+  getExtensionWithPeriod,
+} from './utils/getExtension/getExtension';
+
+export {
+  Button,
+  Tooltip,
+  Icon,
+  Accordion,
+  MultiSelect,
+  Toaster,
+  Toggle,
+  Chip,
+  Drawer,
+  Input,
+  RadialChart,
+  ExpandableMenu,
+  Select,
+  TextArea,
+  MenuOption,
+  AddResourceButton,
+  DonutChart,
+  FileDropzone,
+  LazyLoad,
+  ThemeProvider,
+  Typography,
+  useTheme,
+  InputWithDropdown,
+  Table,
+
+  RadioButton,
+  RadioGroup,
+  Form,
+
+  MiniModal,
+  Container,
+  Row,
+  Col,
+  HighlightText,
+  TableTree,
+  Tabs,
+  Checkbox,
+  Search,
+
+  // utils exports
+  checkEmpty,
+  getExtension,
+  getExtensionWithPeriod,
+};

package/src/utils/TableCell/TableCell.ts

@@ -0,0 +1,16 @@
+export const prepareData = (dataObj: any, columnObj: any) => {
+  let cellData = dataObj[columnObj.accessor];
+  if (columnObj.cell) {
+    return columnObj.cell({
+      value: cellData,
+      row: dataObj,
+      column: columnObj.accessor,
+    });
+  } else if (columnObj.accessor) {
+    return cellData;
+  } else if (cellData && typeof cellData !== 'object') {
+    return cellData;
+  } else {
+    return '--';
+  }
+};

package/src/utils/checkEmpty/checkEmpty.stories.tsx

@@ -0,0 +1,34 @@
+import { checkEmpty } from './checkEmpty';
+
+export default {
+  title: 'Utils/isEmptyValue',
+  component: checkEmpty,
+};
+
+export const Default = () => {
+  const testCases = [
+    { value: null, expected: true },
+    { value: undefined, expected: true },
+    { value: '', expected: true },
+    { value: [], expected: true },
+    { value: {}, expected: true },
+    { value: 0, expected: true },
+    { value: 'Hello', expected: false },
+    { value: [1, 2, 3], expected: false },
+    { value: { key: 'value' }, expected: false },
+  ];
+
+  return (
+    <div>
+      <h1>
+        <u>checkEmpty(value)</u> - true / false
+      </h1>
+      {testCases.map((test, index) => (
+        <div key={index}>
+          checkEmpty( {JSON.stringify(test.value)} ) -
+          {checkEmpty(test.value) ? 'True' : 'False'}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/utils/checkEmpty/checkEmpty.ts

@@ -0,0 +1,10 @@
+type valueType = any;
+
+export const checkEmpty = (value: valueType) => {
+  if (!value) {
+    return true;
+  } else if (typeof value === 'object') {
+    if (Array.isArray(value)) return value.length === 0;
+    else return Object.keys(value).length === 0;
+  } else return false;
+};