@kivid/native-components 1.0.0-alpha.1

package/src/components/InformationStatus/index.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { InformationStatus } from "./index";
+import { InformationStatusOptionsEnum } from "./enums";
+import { View } from "react-native";
+
+const statusOptions = Object.values(InformationStatusOptionsEnum);
+const sizeOptions = ["small", "medium", "large"];
+
+const meta: Meta<typeof InformationStatus> = {
+  title: "Components/InformationStatus",
+  component: InformationStatus,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    status: {
+      control: { type: "select" },
+      options: statusOptions,
+      description: "Status of the information",
+      table: {
+        type: { summary: statusOptions.join(" | ") },
+      },
+    },
+    square: {
+      control: { type: "boolean" },
+      description: "Whether the status indicator is square-shaped",
+    },
+    size: {
+      control: { type: "select" },
+      options: sizeOptions,
+      description: "Size of the status indicator",
+      table: {
+        type: { summary: sizeOptions.join(" | ") },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Status: Story = {
+  args: {
+    status: InformationStatusOptionsEnum.SUCCESS,
+    size: "medium",
+  },
+};
+
+export const All: Story = {
+  render: (args) => {
+    return (
+      <View className="flex flex-col gap-500">
+        <View className="flex flex-row gap-400">
+          {statusOptions.map((status) => (
+            <InformationStatus key={status} status={status} size={"small"} />
+          ))}
+        </View>
+
+        <View className="flex flex-row gap-400">
+          {statusOptions.map((status) => (
+            <InformationStatus key={status} status={status} size={"medium"} />
+          ))}
+        </View>
+
+        <View className="flex flex-row gap-400">
+          {statusOptions.map((status) => (
+            <InformationStatus key={status} status={status} size={"large"} />
+          ))}
+        </View>
+
+        <View className="flex flex-row gap-400">
+          {statusOptions.map((status) => (
+            <InformationStatus
+              key={status}
+              status={status}
+              size={"small"}
+              square
+            />
+          ))}
+        </View>
+
+        <View className="flex flex-row gap-400">
+          {statusOptions.map((status) => (
+            <InformationStatus
+              key={status}
+              status={status}
+              size={"medium"}
+              square
+            />
+          ))}
+        </View>
+
+        <View className="flex flex-row gap-400">
+          {statusOptions.map((status) => (
+            <InformationStatus
+              key={status}
+              status={status}
+              size={"large"}
+              square
+            />
+          ))}
+        </View>
+      </View>
+    );
+  },
+
+  args: {
+    status: InformationStatusOptionsEnum.SUCCESS,
+    size: "medium",
+  },
+};

package/src/components/InformationStatus/index.tsx

@@ -0,0 +1,76 @@
+import {
+  GradientAdd,
+  GradientAlert,
+  GradientCheck,
+  GradientClose,
+} from "./components";
+import type { InformationStatusProps } from "./types";
+import { InformationStatusOptionsEnum } from "./enums";
+import { cva } from "class-variance-authority";
+import { merge } from "@butterfly/tailwind-preset";
+import { View } from "react-native";
+
+export function InformationStatus(props: InformationStatusProps) {
+  const { status, size = "medium", square = false, className, style } = props;
+
+  const mappedIconSize = {
+    small: 16,
+    medium: 24,
+    large: 32,
+  }[size];
+
+  const iconMap = {
+    [InformationStatusOptionsEnum.SUCCESS]: () => (
+      <GradientCheck size={mappedIconSize} color="#F2F7F7" />
+    ),
+    [InformationStatusOptionsEnum.ERROR]: () => (
+      <GradientClose size={mappedIconSize} color="#F2F7F7" />
+    ),
+    [InformationStatusOptionsEnum.WARNING]: () => (
+      <GradientAlert size={mappedIconSize} color="#F2F7F7" />
+    ),
+    [InformationStatusOptionsEnum.ADD]: () => (
+      <GradientAdd size={mappedIconSize} color="#F2F7F7" />
+    ),
+  };
+
+  const selectedVariants = cva(
+    ["flex items-center justify-center color-chia-200"],
+    {
+      variants: {
+        variant: {
+          add: "bg-grape-500",
+          success: "bg-pear-500",
+          error: "bg-blackberry-500",
+          warning: "bg-tangerine-500",
+        },
+        size: {
+          small: [`${square ? "w-900 h-900" : "w-1000 h-700"}`],
+          medium: [`${square ? "w-1000 h-1000" : "w-1200 h-800"}`],
+          large: [`${square ? "w-1100 h-1100" : "w-[80px] h-900"}`],
+        },
+        square: {
+          true: "rounded-700",
+          false: "rounded-500",
+        },
+      },
+    }
+  );
+
+  const Icon = iconMap[status];
+
+  const informationStatusStyle = merge(
+    selectedVariants({
+      variant: status,
+      size: size,
+      square: square,
+    }),
+    className
+  );
+
+  return (
+    <View className={informationStatusStyle} style={style}>
+      <Icon />
+    </View>
+  );
+}

package/src/components/InformationStatus/types.ts

@@ -0,0 +1,16 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { SvgProps } from "react-native-svg";
+import { InformationStatusOptionsEnum } from "./enums";
+
+export interface InformationStatusProps {
+  status: InformationStatusOptionsEnum;
+  size?: "small" | "medium" | "large";
+  square?: boolean;
+  className?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface InformationStatusIconProps extends SvgProps {
+  size?: number;
+  color?: string;
+}

package/src/components/InputCheckbox/assets/class-variants.ts

@@ -0,0 +1,90 @@
+import { cva } from "class-variance-authority";
+import { CheckboxVariantEnum } from "../enums";
+
+export const inputCheckboxVariants = cva(
+  "flex items-center justify-center w-[20px] h-[20px] rounded-500 border transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        [CheckboxVariantEnum.GRAPE]: [
+          "bg-chia-200 border-chia-400",
+          "disabled:bg-grape-300 disabled:border-grape-300",
+        ],
+        [CheckboxVariantEnum.JAVA]: [
+          "bg-chia-200 border-chia-400",
+          "disabled:bg-java-300 disabled:border-java-300",
+        ],
+        [CheckboxVariantEnum.PEAR]: [
+          "bg-chia-200 border-chia-400",
+          "disabled:bg-pear-300 disabled:border-pear-300",
+        ],
+        [CheckboxVariantEnum.TANGERINE]: [
+          "bg-chia-200 border-chia-400",
+          "disabled:bg-tangerine-300 disabled:border-tangerine-300",
+        ],
+        [CheckboxVariantEnum.CHIA]: [
+          "bg-chia-200 border-chia-400",
+          "disabled:bg-chia-300 disabled:border-chia-300",
+        ],
+        [CheckboxVariantEnum.PITAYA]: [
+          "bg-chia-200 border-chia-400",
+          "disabled:bg-pitaya-300 disabled:border-pitaya-300",
+        ],
+        [CheckboxVariantEnum.MANGO]: [
+          "bg-chia-200 border-chia-400",
+          "disabled:bg-mango-300 disabled:border-mango-300",
+        ],
+      },
+      isChecked: {
+        true: null,
+        false: "border-lychee-300 bg-lychee-200",
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "cursor-pointer",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: CheckboxVariantEnum.GRAPE,
+        isChecked: true,
+        class: "bg-grape-500 border-grape-500",
+      },
+      {
+        variant: CheckboxVariantEnum.JAVA,
+        isChecked: true,
+        class: "bg-java-500 border-java-500",
+      },
+      {
+        variant: CheckboxVariantEnum.PEAR,
+        isChecked: true,
+        class: "bg-pear-500 border-pear-500",
+      },
+      {
+        variant: CheckboxVariantEnum.TANGERINE,
+        isChecked: true,
+        class: "bg-tangerine-500 border-tangerine-500",
+      },
+      {
+        variant: CheckboxVariantEnum.CHIA,
+        isChecked: true,
+        class: "bg-chia-600 border-chia-600",
+      },
+      {
+        variant: CheckboxVariantEnum.PITAYA,
+        isChecked: true,
+        class: "bg-pitaya-500 border-pitaya-500",
+      },
+      {
+        variant: CheckboxVariantEnum.MANGO,
+        isChecked: true,
+        class: "bg-mango-500 border-mango-500",
+      },
+    ],
+    defaultVariants: {
+      variant: CheckboxVariantEnum.JAVA,
+      isChecked: false,
+      disabled: false,
+    },
+  }
+);

package/src/components/InputCheckbox/enums/checkbox-variant.ts

@@ -0,0 +1,9 @@
+export enum CheckboxVariantEnum {
+  GRAPE = "grape",
+  JAVA = "java",
+  PEAR = "pear",
+  TANGERINE = "tangerine",
+  CHIA = "chia",
+  PITAYA = "pitaya",
+  MANGO = "mango",
+}

package/src/components/InputCheckbox/enums/index.ts

@@ -0,0 +1,2 @@
+export * from "./checkbox-variant";
+export * from "./select-variant";

package/src/components/InputCheckbox/enums/select-variant.ts

@@ -0,0 +1,4 @@
+export enum SelectVariantEnum {
+  SELECTED = "selected",
+  INDETERMINATE = "indeterminate",
+}

package/src/components/InputCheckbox/icons/CheckIcon/index.tsx

@@ -0,0 +1,23 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+
+export const CheckIcon = (props: SvgProps) => {
+  return (
+    <Svg
+      fill="#F2F7F7"
+      viewBox="0 0 10 2"
+      width={10}
+      height={2}
+      color="#F2F7F7"
+      {...props}
+    >
+      <Path
+        stroke="#F2F7F7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M0.833344 1.00008C0.833344 0.539844 1.20644 0.166748 1.66668 0.166748H8.33334C8.79358 0.166748 9.16668 0.539844 9.16668 1.00008C9.16668 1.46032 8.79358 1.83341 8.33334 1.83341H1.66668C1.20644 1.83341 0.833344 1.46032 0.833344 1.00008Z"
+      />
+    </Svg>
+  );
+};
+;

package/src/components/InputCheckbox/icons/IndeterminateIcon/index.tsx

@@ -0,0 +1,23 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+
+export const IndeterminateIcon = (props: SvgProps) => {
+  return (
+    <Svg
+      fill="#F2F7F7"
+      viewBox="0 0 9 6"
+      width={9}
+      height={6}
+      color="#F2F7F7"
+      {...props}
+    >
+      <Path
+        stroke="#F2F7F7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.1025 0.590872C8.42045 0.923619 8.40847 1.45112 8.07572 1.76908L3.88967 5.76908C3.57149 6.07312 3.07174 6.07733 2.74848 5.77869L0.267856 3.48703C-0.0702016 3.17472 -0.0910764 2.6475 0.22123 2.30944C0.533537 1.97138 1.06076 1.95051 1.39882 2.26281L3.30432 4.02317L6.92429 0.564094C7.25704 0.246136 7.78454 0.258125 8.1025 0.590872Z"
+      />
+    </Svg>
+  );
+};
+;

package/src/components/InputCheckbox/icons/index.ts

@@ -0,0 +1,2 @@
+export { CheckIcon } from "./CheckIcon";
+export { IndeterminateIcon } from "./IndeterminateIcon";

package/src/components/InputCheckbox/index.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+
+import { InputCheckbox } from ".";
+import { CheckboxVariantEnum, SelectVariantEnum } from "./enums";
+import { useState } from "react";
+
+import { View } from "react-native";
+import { HighlightedText } from "../HighlightedText";
+
+const meta: Meta<typeof InputCheckbox> = {
+  title: "Components/InputCheckbox",
+  component: InputCheckbox,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    isChecked: {
+      control: "boolean",
+      description: "Controls whether the checkbox is checked",
+    },
+    onChange: {
+      action: "changed",
+      description: "Callback fired when checkbox state changes",
+    },
+    variant: {
+      control: "select",
+      options: Object.values(CheckboxVariantEnum),
+      description: "Visual variant of the checkbox",
+      table: {
+        type: { summary: Object.values(CheckboxVariantEnum).join(" | ") },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the checkbox is disabled",
+    },
+    selectType: {
+      control: "select",
+      options: Object.values(SelectVariantEnum),
+      description: "Type of selection indicator",
+      table: {
+        type: { summary: Object.values(SelectVariantEnum).join(" | ") },
+      },
+    },
+  },
+  args: {
+    isChecked: false,
+    disabled: false,
+    variant: CheckboxVariantEnum.JAVA,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputCheckbox>;
+
+export const Default: Story = {
+  args: {
+    isChecked: false,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => {
+    return (
+      <View>
+        {Object.values(CheckboxVariantEnum).map((variant) => (
+          <View
+            key={variant}
+            className="flex flex-row items-center gap-700 m-600"
+          >
+            <InputCheckbox
+              variant={variant}
+              isChecked={false}
+              onChange={() => {}}
+            />
+
+            <InputCheckbox variant={variant} isChecked onChange={() => {}} />
+
+            <InputCheckbox
+              variant={variant}
+              selectType={SelectVariantEnum.INDETERMINATE}
+              isChecked
+              onChange={() => {}}
+            />
+
+            <InputCheckbox
+              variant={variant}
+              isChecked
+              disabled
+              onChange={() => {}}
+            />
+
+            <InputCheckbox
+              variant={variant}
+              selectType={SelectVariantEnum.INDETERMINATE}
+              isChecked
+              disabled
+              onChange={() => {}}
+            />
+          </View>
+        ))}
+      </View>
+    );
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [isChecked, setIsChecked] = useState(args.isChecked || false);
+
+    return (
+      <View className="flex flex-col gap-300">
+        <InputCheckbox
+          {...args}
+          isChecked={isChecked}
+          onChange={(value) => {
+            setIsChecked(value);
+            args.onChange?.(value);
+          }}
+        />
+        <HighlightedText
+          text="Status:"
+          highlightText={isChecked ? "Checked" : "Unchecked"}
+          className="mt-500"
+        />
+      </View>
+    );
+  },
+  args: {
+    isChecked: false,
+    disabled: false,
+  },
+};

package/src/components/InputCheckbox/index.tsx

@@ -0,0 +1,53 @@
+import type { InputCheckboxProps } from "./types";
+import { CheckboxVariantEnum, SelectVariantEnum } from "./enums";
+import { inputCheckboxVariants } from "./assets/class-variants";
+import { TouchableOpacity, View } from "react-native";
+import { CheckIcon, IndeterminateIcon } from "./icons";
+
+export function InputCheckbox(props: InputCheckboxProps) {
+  const {
+    isChecked = false,
+    selectType = SelectVariantEnum.SELECTED,
+    variant = CheckboxVariantEnum.JAVA,
+    onChange,
+    disabled = false
+  } = props;
+
+  function handleChange() {
+    onChange(!isChecked);
+  }
+
+  function renderIcon() {
+    if (!isChecked) {
+      return null;
+    }
+
+    if (selectType === SelectVariantEnum.INDETERMINATE) {
+      return <CheckIcon />;
+    }
+
+    return <IndeterminateIcon />;
+  }
+
+  return (
+    <View className="relative inline-flex flex-row items-center">
+      <TouchableOpacity
+        onPress={handleChange}
+        disabled={disabled}
+        accessible
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: isChecked }}
+      >
+        <View
+          className={inputCheckboxVariants({
+            variant,
+            disabled,
+            isChecked
+          })}
+        >
+          {renderIcon()}
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/components/InputCheckbox/types.ts

@@ -0,0 +1,13 @@
+import type { CheckboxVariantEnum, SelectVariantEnum } from "./enums";
+
+export type CheckboxVariant = CheckboxVariantEnum;
+
+export type CheckboxSelectType = SelectVariantEnum;
+
+export interface InputCheckboxProps {
+  isChecked?: boolean;
+  selectType?: CheckboxSelectType;
+  variant?: CheckboxVariant;
+  disabled?: boolean;
+  onChange(value: boolean): void;
+}

package/src/components/InputOTP/components/InformationStatus/index.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useMemo } from "react";
+import type { InformationStatusProps } from "./types";
+
+import { merge } from "@butterfly/tailwind-preset";
+import Button from "../../../Button";
+import { HighlightedText } from "../../../HighlightedText";
+import LoadingDots from "../../../LoadingDots";
+import { Chip } from "../../../Chip";
+import { Text } from "react-native";
+import { ChipVariantEnum } from "../../../Chip/enums";
+import { SealVariantEnum } from "../../../Seal/enums";
+import { InformationStatusEnum } from "../../enums";
+
+export function InformationStatus(props: InformationStatusProps) {
+  const {
+    status = InformationStatusEnum.DEFAULT,
+    disabled = false,
+    onPress,
+  } = props;
+
+  const renderInformation = useMemo(() => {
+    const textStyle = merge("", disabled && "opacity-50");
+
+    if (status === InformationStatusEnum.DEFAULT) {
+      return (
+        <>
+          <Button
+            variant="outline"
+            corners="medium"
+            disabled={disabled}
+            onPress={onPress}
+            size="small"
+          >
+            Reenviar código
+          </Button>
+
+          <HighlightedText
+            highlightText="Pronto,"
+            text="você já pode reenviar o código."
+            reverse
+            className={textStyle}
+          />
+        </>
+      );
+    }
+
+    if (status === InformationStatusEnum.LOADING) {
+      return (
+        <>
+          <LoadingDots variant="dark" />
+          <HighlightedText
+            highlightText="Validando código,"
+            text="por favor aguarde."
+            reverse
+            className={textStyle}
+          />
+        </>
+      );
+    }
+
+    if (status === InformationStatusEnum.SUCCESS) {
+      return (
+        <>
+          <Chip
+            variant={ChipVariantEnum.OUTLINE}
+            sealVariant={SealVariantEnum.SUCCESS}
+            label="Confirmado"
+          />
+          <HighlightedText
+            highlightText="Código validado"
+            text="com sucesso."
+            reverse
+            className={textStyle}
+          />
+        </>
+      );
+    }
+
+    if (status === InformationStatusEnum.ERROR) {
+      return (
+        <>
+          <Button
+            variant="outline"
+            corners="medium"
+            disabled={disabled}
+            onPress={onPress}
+            size="small"
+          >
+            Reenviar código
+          </Button>
+
+          <Text className={disabled ? "opacity-50" : ""}>
+            O código não confere
+          </Text>
+        </>
+      );
+    }
+  }, [disabled, onPress, status]);
+
+  return <>{renderInformation}</>;
+}
+
+export default InformationStatus;

package/src/components/InputOTP/components/InformationStatus/types.ts

@@ -0,0 +1,6 @@
+import type { InformationStatusEnum } from "../../enums";
+export interface InformationStatusProps {
+  status: InformationStatusEnum;
+  disabled?: boolean;
+  onPress?: () => void;
+}

package/src/components/InputOTP/components/index.ts

@@ -0,0 +1 @@
+export * from "./InformationStatus";

package/src/components/InputOTP/enums/index.ts

@@ -0,0 +1 @@
+export * from "./information-status";