pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/NoteTextArea/NoteTextArea.tsx

@@ -1,409 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,32 +0,0 @@
-// 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

@@ -1,63 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,41 +0,0 @@
-// 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

@@ -1,49 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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;
-};