pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Checkbox/CheckboxProps.tsx

@@ -1,42 +0,0 @@
-import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
-
-export type CheckboxProps = Pick<
-  ChakraButtonProps,
-  | "spacing"
-  | "isInvalid"
-  | "size"
-  | "iconColor"
-  | "iconSize"
-  | "isChecked"
-  | "isIndeterminate"
-  | "onChange"
-  | "isDisabled"
-  | "value"
-  | "defaultChecked"
-  | "sx"
-> & {
-  label?: string;
-  width?: string | number;
-  variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
-  color?:
-    | "gray"
-    | "red"
-    | "orange"
-    | "yellow"
-    | "green"
-    | "teal"
-    | "blue"
-    | "cyan"
-    | "purple"
-    | "pink"
-    | "whiteAlpha"
-    | "blackAlpha";
-  size?: "sm" | "md" | "lg";
-  isRequired?: boolean;
-  error?: boolean;
-  errorMessage?: string;
-  isInformation?: boolean;
-  informationMessage?: string;
-  id?: string;
-  helperText?: string;
-};

package/src/Components/Common/ErrorComponent.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-
-const ErrorComponent = ({ error, errorClassName }: { error: string, errorClassName?: string }) => {
-    return (
-        <p className={`mt-1 text-sm text-[#F2463A] flex items-center gap-1 ${errorClassName}`}>
-            <svg width="12" height="12" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="50" cy="50" r="50" fill="#EF4444" />
-                <rect x="46" y="40" width="8" height="30" rx="2" fill="white" />
-                <circle cx="50" cy="28" r="4" fill="white" />
-            </svg>
-            {error}
-        </p>
-    )
-}
-
-export default ErrorComponent;

package/src/Components/Common/ErrorMessage.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { Flex, Text, } from "@chakra-ui/react";
-import { Info } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-
-const ErrorMessage = ({ errorMessage }: { errorMessage?: string }) => {
-
-    const theme = useCustomTheme();
-    return (
-        <Flex
-            align="center"
-            color={theme.colors.red[500]}
-            fontSize="0.875rem"
-            role="alert"
-        >
-            <Info width={"0.875rem"} />
-            <Text ml={"0.188rem"}>{errorMessage ?? "Error"}</Text>
-        </Flex>
-    );
-};
-
-export default ErrorMessage;

package/src/Components/Common/FormLabel.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import { FormLabel, Box, Tooltip, Icon } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import { InfoIcon } from "lucide-react";
-
-export const TextLabel = ({
-  label,
-  id,
-  isRequired = false,
-  isInformation = false,
-  informationMessage = "",
-}: {
-  label: string;
-  id?: string;
-  isInformation?: boolean;
-  informationMessage?: string;
-  isRequired?: boolean;
-}) => {
-  const theme = useCustomTheme();
-
-  return (
-    <Box >
-      <FormLabel
-        htmlFor={id ?? label}
-        color={theme.colors.gray[600]}
-        fontWeight={400}
-        fontSize="0.875rem"
-      >
-        <Box as="span" display="inline-flex" alignItems="center" gap="0.35rem">
-          {label}
-          {isRequired && (<span style={{ color: theme.colors.semantic.error[500] }}>*</span>)}
-          {isInformation && informationMessage && (
-            <Tooltip
-              label={informationMessage}
-              hasArrow
-              placement="top"
-              bg={theme.colors.gray[600]}
-              color={theme.colors.white}
-              fontSize="0.75rem"
-            >
-              <Icon as={InfoIcon} color={theme.colors.gray[500]} boxSize={4} />
-            </Tooltip>
-          )}
-        </Box>
-      </FormLabel>
-    </Box>
-  );
-};

package/src/Components/Common/HelperText.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { FormHelperText } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-
-const HelperText = ({ helperText }: { helperText: string }) => {
-  const theme = useCustomTheme();
-  return (
-    <FormHelperText mt={1} fontSize={14} color={theme.colors.gray[500]}>
-      {helperText}
-    </FormHelperText>
-  );
-};
-
-export default HelperText;

package/src/Components/Common/Label.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-
-const Label = ({ label, labelClassName, isRequired }: { label: string, labelClassName?: string, isRequired?: boolean }) => {
-    return (
-        <label className={`block text-sm font-medium text-[#434853] mb-1 ${labelClassName}`} htmlFor={label}>
-            {label}
-            {isRequired && <span className="text-[#F2463A] ml-1">*</span>}
-        </label>
-    )
-}
-
-export default Label

package/src/Components/ContactForm/ContactForm.tsx

@@ -1,250 +0,0 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Button,
-  Heading,
-  Text,
-  VStack,
-  SimpleGrid,
-  FormControl,
-  FormErrorMessage,
-  Textarea,
-  Text as ChakraText,
-  Alert,
-} from "@chakra-ui/react";
-import TextInput from "../Input/TextInput";
-import { ContactFormProps } from "./ContactFormProps";
-import { CircleCheck, CircleX } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-
-const ContactForm = ({
-  apiKey,
-  customFields,
-  getCustomValues,
-  isDisabled = false,
-  organizationId,
-  customerId,
-}: ContactFormProps) => {
-  const { colors } = useCustomTheme();
-  const [formData, setFormData] = useState<{
-    firstName: string;
-    lastName: string;
-    email: string;
-    phone: string;
-    enquiry: string;
-  }>({
-    firstName: "",
-    lastName: "",
-    email: "",
-    phone: "",
-    enquiry: "",
-  });
-
-  const [response, setResponse] = useState<{
-    title: string;
-    isSuccess: boolean;
-  }>({
-    title: "",
-    isSuccess: false,
-  });
-
-  const [errors, setErrors] = useState<
-    Partial<Record<keyof typeof formData, string>>
-  >({});
-
-  const handleChange = <T,>(field: keyof typeof formData, value: T) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    setErrors((prev) => ({ ...prev, [field]: "" }));
-  };
-
-  const validate = () => {
-    const newErrors: typeof errors = {};
-
-    if (!formData.firstName.trim())
-      newErrors.firstName = "First name is required";
-
-    // if (!formData.email.trim()) {
-    //   newErrors.email = "Email is required";
-    // } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-    //   newErrors.email = "Invalid email format";
-    // }
-
-    if (!formData.phone.trim()) {
-      newErrors.phone = "Phone is required";
-    } else if (!/^\d{7,15}$/.test(formData.phone)) {
-      newErrors.phone = "Phone must be 7–15 digits";
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (isDisabled) return;
-    if (!validate()) return;
-
-    if (!apiKey) {
-      setResponse({
-        title: "API key missing",
-        isSuccess: false,
-      });
-      return;
-    }
-
-    const customValues = getCustomValues?.() ?? {};
-
-    const payload = {
-      name: formData?.firstName + " " + formData?.lastName,
-      firstName: formData?.firstName,
-      lastName: formData?.lastName,
-      email: formData.email,
-      phone: formData.phone,
-      message: formData.enquiry,
-      ...customValues,
-      customerId,
-      organizationId,
-    };
-
-    try {
-      const response = await fetch(apiKey, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(payload),
-      });
-
-      const result = await response.json();
-
-      if (!response.ok) throw new Error(result.message || "Submission failed");
-
-      // onSubmit(formData);
-      setFormData({
-        firstName: "",
-        lastName: "",
-        email: "",
-        phone: "",
-        enquiry: "",
-      });
-
-      setResponse({
-        title: "Message Sent Successfully",
-        isSuccess: true,
-      });
-    } catch (error: any) {
-      setResponse({
-        title: "Failed to send message",
-        isSuccess: false,
-      });
-    }
-  };
-
-  return (
-    <Box
-      maxW="lg"
-      mx="auto"
-      p={8}
-      borderRadius="2xl"
-      boxShadow="lg"
-      bg={colors?.background?.[300]}
-    >
-      {response.title ? (
-        <Alert
-          status={response?.isSuccess ? "success" : "error"}
-          fontWeight={"bold"}
-          variant="solid"
-          mb={1}
-        >
-          {response?.isSuccess ? <CircleCheck /> : <CircleX />} &nbsp;{" "}
-          {response.title}
-        </Alert>
-      ) : null}
-
-      <Heading textAlign="center" size="lg" mb={2}>
-        Contact Us
-      </Heading>
-      <Text textAlign="center" mb={6} color="gray.500">
-        Fill in the form below to reach out to us.
-      </Text>
-
-      <Box as="form" onSubmit={handleSubmit}>
-        <VStack spacing={4}>
-          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} w="100%">
-            <FormControl isInvalid={!!errors.firstName} isRequired>
-              <TextInput
-                label="First Name"
-                placeholder="Enter first name"
-                value={formData.firstName}
-                onChange={(e) => handleChange("firstName", e.target.value)}
-                isRequired
-              />
-              <FormErrorMessage>{errors.firstName}</FormErrorMessage>
-            </FormControl>
-
-            <FormControl>
-              <TextInput
-                label="Last Name"
-                placeholder="Enter last name"
-                value={formData.lastName}
-                onChange={(e) => handleChange("lastName", e.target.value)}
-              />
-            </FormControl>
-          </SimpleGrid>
-
-          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} w="100%">
-            <FormControl isInvalid={!!errors.phone} isRequired>
-              <TextInput
-                label="Phone"
-                placeholder="Enter phone number"
-                value={formData.phone}
-                onChange={(e) => handleChange("phone", e.target.value)}
-                isRequired
-              />
-              <FormErrorMessage>{errors.phone}</FormErrorMessage>
-            </FormControl>
-            <FormControl isInvalid={!!errors.email}>
-              <TextInput
-                label="Email"
-                placeholder="Enter email"
-                value={formData.email}
-                onChange={(e) => handleChange("email", e.target.value)}
-                // isRequired
-              />
-              <FormErrorMessage>{errors.email}</FormErrorMessage>
-            </FormControl>
-          </SimpleGrid>
-
-          {/* Custom fields from parent */}
-          {customFields}
-
-          {/* Enquiry */}
-          <FormControl w="100%">
-            <ChakraText fontSize="sm" mb={1}>
-              Enquiry
-            </ChakraText>
-            <Textarea
-              placeholder="Enter your enquiry"
-              rows={5}
-              value={formData.enquiry}
-              onChange={(e) => handleChange("enquiry", e.target.value)}
-            />
-          </FormControl>
-
-          <Button
-            type="submit"
-            disabled={isDisabled}
-            colorScheme="blue"
-            w="full"
-            mt={2}
-          >
-            Send Message
-          </Button>
-        </VStack>
-      </Box>
-    </Box>
-  );
-};
-
-export default ContactForm;

package/src/Components/ContactForm/ContactFormProps.tsx

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-
-export interface ContactFormProps {
-  apiKey?: string;
-  customerId: string | number;
-  organizationId: string | number;
-  isDisabled?: boolean;
-  customFields?: ReactNode;
-  getCustomValues?: () => Record<string, any>;
-}