pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/NoteTextArea/NoteTextArea.tsx

@@ -0,0 +1,409 @@
+import React, { useEffect, useRef, useState } from "react";
+import { NoteTextAreaProps } from "./NoteTextAreaProps";
+import styled from "@emotion/styled";
+import { Spinner } from "@chakra-ui/react";
+import { CustomThemeProps } from "../../Theme/themeProps";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { Paperclip, X } from "lucide-react";
+
+const Container = styled.div<{ isActive: boolean }>`
+  border: ${({ isActive }) =>
+    isActive ? "1px solid #3182ce" : "1px solid #c0c6cc"};
+  border-radius: 5px;
+  box-shadow: ${({ isActive }) =>
+    isActive
+      ? "-1px 1px 8px 4px rgb(49 130 206 / 24%), 0px 2px 6px 0 rgb(49 130 206 / 19%)"
+      : "none"};
+`;
+
+const TextAreaContainer = styled.div<{ isActive: boolean }>`
+  width: 100%;
+  cursor: text;
+  padding: 12px 15px;
+  display: ${({ isActive }) => (isActive ? "block" : "none")};
+`;
+
+const PlaceholderText = styled.div<{ isActive: boolean }>`
+  color: #c0c6cc;
+  width: 100%;
+  cursor: text;
+  display: ${({ isActive }) => (isActive ? "block" : "none")};
+  padding: 12px 15px;
+`;
+
+const InputTitle = styled.input`
+  width: 100%;
+  height: auto;
+  border: none;
+  outline: none;
+  background: none;
+  color: black;
+  fontsize: 1rem;
+  fontweight: 500;
+  marginbottom: 2px;
+`;
+
+const NotesTextArea = styled.textarea<{ isActive: boolean; noteValue: string }>`
+  color: ${({ isActive, noteValue }) =>
+    isActive && noteValue ? "#000000" : "#c0c6cc"};
+  width: 100%;
+  height: auto;
+  border: none;
+  outline: none;
+  background: none;
+  fontweight: 300;
+`;
+
+const FileUploadLabel = styled.label`
+  cursor: pointer;
+`;
+
+const AddTitleButton = styled.div`
+  color: #616e88;
+  cursor: pointer;
+  fontsize: 0.8rem;
+`;
+
+const Button = styled.button<{
+  noteValue: string;
+  isSaveButton: boolean;
+  isLoading: boolean;
+  theme: CustomThemeProps;
+  disabled: boolean;
+}>`
+  border: none;
+  padding: 3px 15px;
+  text-align: center;
+  text-decoration: none;
+  background: ${({ isSaveButton, noteValue, isLoading, theme }) =>
+    isSaveButton
+      ? noteValue && !isLoading
+        ? theme.colors.primary[500]
+        : theme.colors.primary[500]
+      : "white"};
+  color: ${({ isSaveButton, isLoading }) =>
+    isSaveButton && !isLoading ? "white" : "white"};
+  font-size: 1rem;
+  margin-right: 5px;
+  border-radius: 5px;
+  opacity: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
+    isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1"};
+  cursor: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
+    isSaveButton && (!noteValue || isLoading || disabled)
+      ? "initial"
+      : "pointer"};
+  pointer-events: ${({ isLoading }) => (isLoading ? "none" : "auto")};
+`;
+
+const CancelButton = styled.button`
+  border: none;
+  color: #5e5c5c;
+  padding: 3px 15px;
+  text-align: center;
+  text-decoration: none;
+  background: white;
+  font-size: 1rem;
+  margin-right: 5px;
+  border-radius: 5px;
+`;
+
+const FileViewer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 300px;
+`;
+
+const FileEdit = styled(X)`
+  cursor: pointer;
+  color: #ff0000;
+`;
+
+const ErrorText = styled.div`
+  color: #ff0000;
+  font-size: 0.8rem;
+  margin-top: 8px;
+`;
+
+const countWords = (text: string) => {
+  return text.trim().split(/\s+/).length;
+};
+
+export default function NoteTextArea({
+  width = "100%",
+  handleSubmit,
+  handleCancel,
+  value,
+  title,
+  file,
+  isEditable = false,
+  saveButtonLoading,
+  maxFileSize = 1 * 1024 * 1024,
+  maxFilesSizeError = "Some files are too large. Maximum allowed size is",
+  maxNoteWordCount = 15,
+  onChange,
+  ref,
+}: NoteTextAreaProps) {
+  const theme = useCustomTheme();
+  const noteAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [isActive, setIsActive] = useState<boolean>(false);
+  const [noteValue, setNoteValue] = useState<string>("");
+  const [titleValue, setTitleValue] = useState<string>("");
+  const [titleShow, setTitleShow] = useState<boolean>(false);
+  const [files, setFiles] = useState<File[]>([]);
+  const [fileError, setFileError] = useState<string>("");
+  const [isSaveDisabled, setIsSaveDisabled] = useState(false);
+  useEffect(() => {
+    const titleWordCount = countWords(titleValue);
+    setIsSaveDisabled(titleWordCount > maxNoteWordCount);
+  }, [titleValue, maxNoteWordCount]);
+
+  useEffect(() => {
+    const noteWordCount = countWords(noteValue);
+    setIsSaveDisabled(noteWordCount > maxNoteWordCount);
+  }, [noteValue, maxNoteWordCount]);
+
+  useEffect(() => {
+    if (isEditable) {
+      setIsActive(true);
+      if (value) {
+        setNoteValue(value);
+      }
+      if (title) {
+        setTitleValue(title);
+        setTitleShow(true);
+      }
+      if (file) {
+        setFiles(file);
+      }
+    }
+  }, [value, title, file, isEditable]);
+
+  useEffect(() => {
+    if (!saveButtonLoading) {
+      setIsActive(false);
+      if (!isEditable) {
+        setNoteValue("");
+        setTitleValue("");
+        setTitleShow(false);
+        setFiles([]);
+      }
+    }
+    if (isEditable) {
+      setIsActive(true);
+    }
+  }, [saveButtonLoading, isEditable]);
+
+  const handleTextArea = () => {
+    setIsActive(true);
+    if (!isEditable) {
+      setNoteValue("");
+      setTitleValue("");
+      setTitleShow(false);
+      setFiles([]);
+    }
+  };
+  const handleCloseTextArea = () => {
+    setIsActive(false);
+    if (handleCancel) {
+      handleCancel(!isActive);
+    }
+    if (!isEditable) {
+      setNoteValue("");
+      setTitleValue("");
+      setTitleShow(false);
+      setFiles([]);
+    }
+    setFileError("");
+  };
+
+  const handleNoteChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setNoteValue(event.target.value);
+    onChange?.(event.target.value);
+    adjustHeight();
+  };
+
+  useEffect(() => {
+    if (isActive && noteAreaRef.current) {
+      noteAreaRef.current.focus();
+    }
+  }, [isActive]);
+
+  const adjustHeight = () => {
+    const textarea = noteAreaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+
+  const handleSetTitle = () => {
+    setTitleShow(true);
+  };
+
+  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.target.value.length === 0 && setTitleShow(false);
+    setTitleValue(event.target.value);
+  };
+
+  const formatBytes = (bytes: any, decimals = 2) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+  };
+
+  const shortenFileName = (name: string, maxLength = 20) => {
+    const extension = name.substring(name.lastIndexOf("."));
+    if (name.length <= maxLength) return name;
+    const nameWithoutExtension = name.replace(extension, "");
+    const start = nameWithoutExtension.substring(
+      0,
+      maxLength - extension.length - 3
+    );
+    return `${start}...${extension} `;
+  };
+
+  return (
+    <Container style={{ width }} isActive={isActive}>
+      <PlaceholderText isActive={!isActive} onClick={handleTextArea}>
+        <span>Add a note...</span>
+      </PlaceholderText>
+      <TextAreaContainer isActive={isActive}>
+        {titleShow && (
+          <InputTitle
+            value={titleValue}
+            onChange={handleTitleChange}
+            placeholder="Add a title..."
+            ref={ref}
+          />
+        )}
+        <NotesTextArea
+          ref={noteAreaRef}
+          isActive={isActive}
+          noteValue={noteValue}
+          value={noteValue}
+          onChange={handleNoteChange}
+          placeholder="Add a note..."
+        />
+      </TextAreaContainer>
+      {isActive && (
+        <>
+          <hr style={{ margin: 0 }} />
+          <div style={{ padding: "12px 15px" }}>
+            <div style={{ display: "flex", alignItems: "center" }}>
+              <FileUploadLabel htmlFor="file-upload">
+                <Paperclip size={17} />
+                <input
+                  id="file-upload"
+                  type="file"
+                  style={{ display: "none" }}
+                  onChange={(e) => {
+                    const newFiles = Array.from(e.target.files || []);
+                    const validFiles = newFiles.filter(
+                      (file) => file.size <= maxFileSize
+                    );
+                    const invalidFiles = newFiles.filter(
+                      (file) => file.size > maxFileSize
+                    );
+
+                    if (invalidFiles.length > 0) {
+                      setFileError(
+                        `${maxFilesSizeError} ${formatBytes(maxFileSize)}.`
+                      );
+                    } else {
+                      setFileError("");
+                    }
+
+                    if (validFiles.length > 0) {
+                      setFiles((prevFiles) => [...prevFiles, ...validFiles]);
+                    }
+                  }}
+                  multiple
+                  // onChange={(event) => {
+                  //   if (event.target.files && event.target.files.length > 0) {
+                  //     const filesArray = Array.from(event.target.files);
+                  //     const validFiles = filesArray.filter(
+                  //       (file) => file.size <= maxFileSize
+                  //     );
+                  //     setFiles([...files, ...validFiles]);
+                  //   }
+                  // }}
+                />
+              </FileUploadLabel>
+              {!titleShow && (
+                <>
+                  <div
+                    style={{
+                      height: "15px",
+                      width: "1px",
+                      backgroundColor: "#c0c6cc",
+                      marginRight: "5px",
+                      marginLeft: "5px",
+                    }}
+                  ></div>
+                  <AddTitleButton onClick={handleSetTitle}>
+                    Add a Title
+                  </AddTitleButton>
+                </>
+              )}
+              <div style={{ marginLeft: "auto" }}>
+                <CancelButton onClick={handleCloseTextArea}>
+                  Cancel
+                </CancelButton>
+                <Button
+                  isSaveButton={true}
+                  noteValue={noteValue}
+                  isLoading={saveButtonLoading}
+                  disabled={!noteValue || isSaveDisabled}
+                  theme={theme}
+                  onClick={() => {
+                    handleSubmit(noteValue, titleValue, files);
+                    // handleCloseTextArea();
+                  }}
+                >
+                  {saveButtonLoading && (
+                    <span style={{ marginRight: "6px" }}>
+                      <Spinner
+                        thickness="2px"
+                        speed="0.75s"
+                        emptyColor="gray.200"
+                        color="blue.500"
+                        size="xs"
+                      />
+                    </span>
+                  )}
+                  Save
+                </Button>
+              </div>
+            </div>
+            <div style={{ display: "flex", gap: "10px" }}>
+              <div>Note:</div>
+              <div>You can add up to {maxNoteWordCount} words only</div>
+            </div>
+            {fileError && <ErrorText>{fileError}</ErrorText>}{" "}
+            {/* Display file error */}
+            {files.length > 0 && (
+              <div>
+                {files.map((item, index) => (
+                  <FileViewer key={index}>
+                    <>
+                      <span>{shortenFileName(item.name)}</span>
+                      <span>{formatBytes(item.size)}</span>
+                    </>
+                    <FileEdit
+                      onClick={() =>
+                        setFiles(files.filter((fileItem) => fileItem !== item))
+                      }
+                    />
+                  </FileViewer>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </Container>
+  );
+}

package/src/Components/NoteTextArea/NoteTextAreaProps.tsx

@@ -0,0 +1,22 @@
+import { LegacyRef } from "react";
+
+export type NoteTextAreaProps = {
+  width: number | string;
+  handleSubmit: (
+    noteValue: string,
+    titleValue: string,
+    file: File[],
+    resetState: void
+  ) => void;
+  value?: string;
+  title?: string;
+  file?: File[];
+  isEditable?: boolean;
+  handleCancel?: (isActive: boolean) => void;
+  saveButtonLoading: boolean;
+  maxFileSize?: number;
+  maxFilesSizeError?: string;
+  maxNoteWordCount?: number;
+  onChange?: (value: string) => void;
+  ref?: LegacyRef<HTMLInputElement>;
+};

package/src/Components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,32 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import NumberInputs from './NumberInput';
+
+// export default {
+//   title: 'Components/NumberInputs/NumberInputs',
+//   component: NumberInputs,
+// } as Meta;
+
+// const Template: StoryFn = (args) => <NumberInputs {...args} />;
+
+// export const Default = Template.bind({});
+// Default.args = {
+//   defaultValue: 0,
+//   min: 0,
+//   max: 100,
+//   step: 1,
+//   precision: 0,
+//   clampValueOnBlur: true,
+//   keepWithinRange: true,
+//   size: 'md',
+//   maxW: 'full',
+//   allowMouseWheel: true,
+//   NumberIncrementStepperBg: 'blue.200',
+//   NumberIncrementStepperActive: { bg: 'blue.400' },
+//   NumberIncrementStepperChildren: '+',
+//   NumberDecrementStepperBg: 'blue.200',
+//   NumberDecrementStepperActive: { bg: 'blue.400' },
+//   NumberDecrementStepperChildren: '-',
+//   onChange: (value: number) => console.log(value),
+// };
+export {};

package/src/Components/NumberInput/NumberInput.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput as ChakraNumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from "@chakra-ui/react";
+import { NumberInputProps } from "./NumberInputProps";
+
+export default function NumberInput({
+  defaultValue,
+  min,
+  max,
+  precision,
+  step,
+  clampValueOnBlur,
+  keepWithinRange,
+  value,
+  onChange,
+  size,
+  maxW,
+  allowMouseWheel,
+  NumberIncrementStepperBg,
+  NumberIncrementStepperActive,
+  NumberIncrementStepperChildren,
+  NumberDecrementStepperBg,
+  NumberDecrementStepperChildren,
+  NumberDecrementStepperActive,
+}: NumberInputProps) {
+  return (
+    <ChakraNumberInput
+      defaultValue={defaultValue}
+      min={min}
+      max={max}
+      step={step}
+      precision={precision}
+      clampValueOnBlur={clampValueOnBlur}
+      keepWithinRange={keepWithinRange}
+      value={value}
+      onChange={onChange}
+      size={size}
+      maxW={maxW}
+      allowMouseWheel={allowMouseWheel}
+    >
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper
+          bg={NumberIncrementStepperBg}
+          _active={NumberIncrementStepperActive}
+        >
+          {NumberIncrementStepperChildren}
+        </NumberIncrementStepper>
+        <NumberDecrementStepper
+          bg={NumberDecrementStepperBg}
+          _active={NumberDecrementStepperActive}
+        >
+          {NumberDecrementStepperChildren}
+        </NumberDecrementStepper>
+      </NumberInputStepper>
+    </ChakraNumberInput>
+  );
+}

package/src/Components/NumberInput/NumberInputProps.tsx

@@ -0,0 +1,28 @@
+import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
+
+export type NumberInputProps = Pick<
+ chakraNumbetInpurProps,
+ | "defaultValue"
+ | "min"
+ | "max"
+ | "precision"
+ | "step"
+ | "clampValueOnBlur"
+ | "keepWithinRange"
+ | "value"
+ | "onChange"
+ |"size"
+ |"maxW"
+ |"allowMouseWheel"
+> & {
+    NumberIncrementStepperBg?:string,
+    NumberIncrementStepperActive?:ActiveStyle,
+    NumberIncrementStepperChildren?:string,
+    NumberDecrementStepperBg?:string,
+    NumberDecrementStepperChildren?:string,
+    NumberDecrementStepperActive?:ActiveStyle,
+};
+
+export type ActiveStyle = {
+    bg: string;
+  };

package/src/Components/PinInput/PinInput.stories.tsx

@@ -0,0 +1,41 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import PinInput from './PinInput';
+// import { ChakraPinInputProps } from './PinInputProps';
+
+// export default {
+//   title: 'Components/PinInput/PinInput',
+//   component: PinInput,
+// } as Meta;
+
+// const Template: StoryFn<ChakraPinInputProps> = (args) => <PinInput {...args} />;
+
+// export const Default = Template.bind({});
+// Default.args = {
+//   otp: false,
+//   mask: false,
+//   defaultValue: '',
+//   placeholder: '•',
+//   manageFocus: true,
+//   errorBorderColor: 'red.500',
+//   focusBorderColor: 'blue.500',
+//   onChange: (value: string) => console.log(value),
+//   onComplete: (value: string) => console.log(`Completed: ${value}`),
+//   type: 'alphanumeric',
+//   color: 'blue',
+//   variant: 'outline',
+//   pins: 3,
+// };
+
+// export const Masked = Template.bind({});
+// Masked.args = {
+//   ...Default.args,
+//   mask: true,
+// };
+
+// export const SixPins = Template.bind({});
+// SixPins.args = {
+//   ...Default.args,
+//   pins: 6,
+// };
+export {};

package/src/Components/PinInput/PinInput.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { HStack, PinInput, PinInputField, Text } from "@chakra-ui/react";
+import { ChakraPinInputProps } from "./PinInputProps";
+export default function PinInputs({
+  otp,
+  mask,
+  defaultValue,
+  placeholder,
+  manageFocus,
+  errorBorderColor,
+  focusBorderColor,
+  onChange,
+  onComplete,
+  type,
+  color,
+  variant,
+  pins = 3,
+  label,
+}: ChakraPinInputProps) {
+  return (
+    <>
+      {label && (
+        <Text fontWeight="bold" marginBottom={"8px"}>
+          {label}
+        </Text>
+      )}
+      <HStack>
+        <PinInput
+          otp={otp}
+          mask={mask}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          manageFocus={manageFocus}
+          errorBorderColor={errorBorderColor}
+          focusBorderColor={focusBorderColor}
+          onChange={onChange}
+          onComplete={onComplete}
+          type={type}
+          colorScheme={color}
+          variant={variant}
+        >
+          {Array.from({ length: pins }).map((_, index) => (
+            <PinInputField key={index} />
+          ))}
+        </PinInput>
+      </HStack>
+    </>
+  );
+}

package/src/Components/PinInput/PinInputProps.tsx

@@ -0,0 +1,33 @@
+import { PinInputProps } from "@chakra-ui/react";
+
+export type ChakraPinInputProps = Pick<
+  PinInputProps,
+  | "otp"
+  | "mask"
+  | "defaultValue"
+  | "placeholder"
+  | "manageFocus"
+  | "errorBorderColor"
+  | "focusBorderColor"
+  | "onChange"
+  | "onComplete"
+> & {
+  type?: "alphanumeric" | "number";
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "flushed" | "outline" | "filled" | "unstyled";
+  color?:
+  | "gray"
+  | "red"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "teal"
+  | "blue"
+  | "cyan"
+  | "purple"
+  | "pink"
+  | "whiteAlpha"
+  | "blackAlpha";
+  pins: number;
+  label?: string;
+};