@kivid/native-components 1.0.0-alpha.2 → 1.0.0-alpha.21

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

@@ -1,112 +0,0 @@
-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/InputCheckbox/index.stories.tsx

@@ -1,133 +0,0 @@
-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/InputOTP/components/InformationStatus/types.ts

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

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

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

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

@@ -1,247 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { InputOTP } from "./index";
-import { useState } from "react";
-import { Text, View } from "react-native";
-import { InformationStatusEnum } from "./enums";
-
-const meta: Meta<typeof InputOTP> = {
-  title: "Components/InputOTP",
-  component: InputOTP,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    OTPInputsQuantity: {
-      control: { type: "number", min: 1, max: 10 },
-      description: "Number of input fields",
-      table: {
-        defaultValue: { summary: "6" },
-      },
-    },
-    status: {
-      control: { type: "select" },
-      options: Object.values(InformationStatusEnum),
-      description: "Status of the input",
-      table: {
-        defaultValue: { summary: InformationStatusEnum.DEFAULT },
-        type: { summary: Object.values(InformationStatusEnum).join(" | ") },
-      },
-    },
-    rounded: {
-      control: "boolean",
-      description: "Rounded corners",
-      table: {
-        defaultValue: { summary: "false" },
-      },
-    },
-    disabled: {
-      control: "boolean",
-      description: "Whether inputs are disabled",
-      table: {
-        defaultValue: { summary: "false" },
-      },
-    },
-    customInformation: {
-      control: "object",
-      description: "Custom information to display",
-      table: {
-        defaultValue: { summary: "null" },
-      },
-    },
-    onChange: {
-      action: "onChange",
-      description: "Callback when all inputs are filled",
-    },
-    onPressRetryToken: {
-      action: "onPressRetryToken",
-      description: "Callback when the retry button is pressed",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof InputOTP>;
-
-const Template = (args: React.ComponentProps<typeof InputOTP>) => {
-  const [value, setValue] = useState("");
-  return (
-    <View className="flex flex-col gap-300">
-      <InputOTP
-        {...args}
-        onChange={(val) => {
-          setValue(val);
-          args.onChange?.(val);
-        }}
-      />
-      {value && <Text>Entered value: {value}</Text>}
-    </View>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <Template {...args} />,
-  args: {
-    OTPInputsQuantity: 6,
-  },
-};
-
-export const Rounded: Story = {
-  render: (args) => <Template {...args} />,
-  args: {
-    rounded: true,
-  },
-};
-
-export const Disabled: Story = {
-  render: (args) => <Template {...args} />,
-  args: {
-    disabled: true,
-  },
-};
-
-export const WithCustomInformation: Story = {
-  render: (args) => (
-    <InputOTP
-      {...args}
-      customInformation={
-        <View>
-          <Text className="text-label_medium_700 text-blackberry-500">
-            O código realmente é esse?
-          </Text>
-          <Text className="text-label_medium_700 text-chia-900">
-            Tente novamente
-          </Text>
-        </View>
-      }
-    />
-  ),
-  args: {
-    status: InformationStatusEnum.ERROR,
-    disabled: true,
-  },
-};
-
-export const WithInformationStatusDefault: Story = {
-  render: (args) => <InputOTP {...args} />,
-};
-
-export const WithInformationStatusCooldown: Story = {
-  render: (args) => <InputOTP {...args} />,
-  args: {
-    disabled: true,
-    status: InformationStatusEnum.COOLDOWN,
-    onPressRetryToken: () => {
-      console.log("Resending...");
-    },
-  },
-};
-
-export const WithInformationStatusError: Story = {
-  render: (args) => <InputOTP {...args} />,
-  args: {
-    status: InformationStatusEnum.ERROR,
-    disabled: true,
-  },
-};
-
-export const WithInformationStatusLoading: Story = {
-  render: (args) => <InputOTP {...args} />,
-  args: {
-    disabled: true,
-    status: InformationStatusEnum.LOADING,
-  },
-};
-
-export const WithInformationStatusSuccess: Story = {
-  render: (args) => <InputOTP {...args} />,
-  args: {
-    disabled: true,
-    status: InformationStatusEnum.SUCCESS,
-  },
-};
-
-export const Interactive: Story = {
-  render: (args) => {
-    function generateRandomInterval(OTPInputsQuantity: number): string {
-      const result: string[] = [];
-      const digitsPerBlock = 1;
-
-      for (let count = 0; count < OTPInputsQuantity; count++) {
-        let inputDigit = "";
-        for (let j = 0; j < digitsPerBlock; j++) {
-          inputDigit += Math.floor(Math.random() * 10);
-        }
-        result.push(inputDigit);
-      }
-
-      return result.join("");
-    }
-
-    const mockDelay = (ms: number) =>
-      new Promise((resolve) => setTimeout(resolve, ms));
-
-    async function handleClick(inputValue: string) {
-      setStatus(InformationStatusEnum.LOADING);
-      try {
-        await mockDelay(3000);
-        if (inputValue === validToken) {
-          setStatus(InformationStatusEnum.SUCCESS);
-          return;
-        }
-        setStatus(InformationStatusEnum.ERROR);
-      } catch (error) {
-        console.error("Error during token validation:", error);
-        setStatus(InformationStatusEnum.ERROR);
-      }
-    }
-
-    const [status, setStatus] = useState<InformationStatusEnum>(
-      InformationStatusEnum.DEFAULT
-    );
-    const [validToken] = useState(() =>
-      generateRandomInterval(args.OTPInputsQuantity ?? 6)
-    );
-
-    const handleOTPChange = async (inputValue: string) => {
-      args.onChange?.(inputValue);
-
-      if (inputValue.length === (args.OTPInputsQuantity ?? 6)) {
-        setStatus(InformationStatusEnum.LOADING);
-
-        await mockDelay(3000);
-
-        if (inputValue === validToken) {
-          setStatus(InformationStatusEnum.SUCCESS);
-
-          return;
-        }
-
-        if (inputValue !== validToken) {
-          setStatus(InformationStatusEnum.ERROR);
-
-          return;
-        }
-
-        setStatus(InformationStatusEnum.DEFAULT);
-      }
-    };
-
-    return (
-      <>
-        <InputOTP
-          {...args}
-          onChange={handleOTPChange}
-          disabled={status === InformationStatusEnum.LOADING}
-          status={status}
-          onPressRetryToken={handleClick}
-        />
-
-        <View className="mt-900">
-          <Text>Token correto esperado: {validToken}</Text>
-          <Text>Status atual: {status}</Text>
-        </View>
-      </>
-    );
-  },
-};

package/src/components/InputOTP/index.tsx

@@ -1,177 +0,0 @@
-import { useRef, useState } from "react";
-import {
-  View,
-  TextInput,
-  NativeSyntheticEvent,
-  TextInputKeyPressEventData,
-  Platform,
-  TextInputFocusEventData,
-  TextInputChangeEventData,
-} from "react-native";
-import type { InputOTPProps } from "./types";
-import { merge } from "@kivid/tailwind-preset";
-import { InformationStatus } from "./components";
-import { InformationStatusEnum } from "./enums";
-
-export function InputOTP(props: InputOTPProps) {
-  const {
-    status = InformationStatusEnum.DEFAULT,
-    OTPInputsQuantity = 6,
-    customInformation,
-    rounded = false,
-    disabled = false,
-    onChange,
-    onPressRetryToken,
-  } = props;
-
-  const inputsRef = useRef<Array<TextInput | null>>([]);
-  const [inputValues, setInputValues] = useState<string[]>(
-    Array(OTPInputsQuantity).fill("")
-  );
-  const hasError = status === InformationStatusEnum.ERROR;
-
-  function handlePress() {
-    const values = [...inputValues];
-    const inputRefValuesJoined = values.join("");
-
-    if (inputRefValuesJoined.length === OTPInputsQuantity) {
-      onPressRetryToken?.(inputRefValuesJoined);
-    }
-  }
-
-  const handleChange = (
-    event: NativeSyntheticEvent<TextInputChangeEventData>,
-    index: number
-  ) => {
-    const text = event.nativeEvent.text;
-    const newValues = [...inputValues];
-
-    if (text.length > 1) {
-      const chars = text.split("");
-      let targetIndex = index;
-      chars.forEach((char) => {
-        if (targetIndex < OTPInputsQuantity) {
-          newValues[targetIndex] = char;
-          targetIndex++;
-        }
-      });
-      setInputValues(newValues);
-      onChange?.(newValues.join(""));
-
-      const nextEmptyIndex = newValues.findIndex((value) => !value);
-      if (nextEmptyIndex !== -1) {
-        inputsRef.current[nextEmptyIndex]?.focus();
-      } else {
-        inputsRef.current[OTPInputsQuantity - 1]?.focus();
-      }
-      return;
-    }
-
-    newValues[index] = text;
-    setInputValues(newValues);
-    onChange?.(newValues.join(""));
-
-    if (text && index < OTPInputsQuantity - 1) {
-      const nextEmptyIndex = newValues.findIndex((v, i) => i > index && !v);
-      if (nextEmptyIndex !== -1) {
-        inputsRef.current[nextEmptyIndex]?.focus();
-      }
-    }
-  };
-
-  const handleKeyDown = (
-    e: NativeSyntheticEvent<TextInputKeyPressEventData>,
-    index: number
-  ) => {
-    if (e.nativeEvent.key === "Backspace") {
-      const hasValueAhead = inputValues.slice(index + 1).some((value) => value);
-
-      if (hasValueAhead) {
-        const lastFilledIndex = [...inputValues]
-          .map((value, i) => (value ? i : -1))
-          .filter((i) => i !== -1)
-          .pop();
-
-        if (lastFilledIndex !== undefined) {
-          inputsRef.current[lastFilledIndex]?.focus();
-        }
-        return;
-      }
-
-      if (inputValues[index]) {
-        const newValues = [...inputValues];
-        newValues[index] = "";
-        setInputValues(newValues);
-      }
-      if (index > 0) {
-        inputsRef.current[index - 1]?.focus();
-      }
-    }
-  };
-
-  const handleFocus = (
-    event: NativeSyntheticEvent<TextInputFocusEventData>,
-    index: number
-  ) => {
-    const firstEmptyIndex = inputValues.findIndex((value) => !value);
-
-    if (firstEmptyIndex !== -1 && index > firstEmptyIndex) {
-      inputsRef.current[firstEmptyIndex]?.focus();
-      event.preventDefault();
-      return;
-    }
-
-    if (firstEmptyIndex === -1 && index < OTPInputsQuantity - 1) {
-      inputsRef.current[OTPInputsQuantity - 1]?.focus();
-      event.preventDefault();
-    }
-  };
-
-  function renderInformationStatus() {
-    if (customInformation) {
-      return <>{customInformation}</>;
-    }
-
-    return <InformationStatus status={status} onPress={handlePress} />;
-  }
-
-  const inputStyle = merge(
-    "w-1000 h-1100 text-center text-3 font-bold leading-3 border-100 bg-chia-100 placeholder-chia-400",
-    rounded ? "rounded-700" : "rounded-500",
-    disabled ? "opacity-50" : "",
-    hasError
-      ? "border-blackberry-500 text-blackberry-500"
-      : "border-chia-400 text-chia-900"
-  );
-
-  return (
-    <View className="flex flex-col items-center gap-600">
-      <View className="flex-row gap-300 max-w-[280px] items-center justify-between">
-        {Array.from({ length: OTPInputsQuantity }).map((_, i) => (
-          <TextInput
-            ref={(ref) => {
-              inputsRef.current[i] = ref;
-            }}
-            key={`otp-input-${i}`}
-            textContentType="oneTimeCode"
-            placeholder="_"
-            className={inputStyle}
-            autoComplete={
-              Platform.OS === "android" ? "sms-otp" : "one-time-code"
-            }
-            placeholderTextColor="#DEE7E7"
-            editable={!disabled}
-            value={inputValues[i]}
-            onChange={(e) => handleChange(e, i)}
-            onKeyPress={(e) => handleKeyDown(e, i)}
-            onFocus={(e) => handleFocus(e, i)}
-          />
-        ))}
-      </View>
-
-      {renderInformationStatus()}
-    </View>
-  );
-}
-
-export default InputOTP;

package/src/components/InputOTP/types.ts

@@ -1,12 +0,0 @@
-import type React from "react";
-import type { InformationStatusEnum } from "./enums";
-
-export interface InputOTPProps {
-  OTPInputsQuantity?: number;
-  rounded?: boolean;
-  disabled?: boolean;
-  status?: InformationStatusEnum;
-  customInformation?: React.ReactNode;
-  onChange: (value: string) => void;
-  onPressRetryToken?: (value: string) => void;
-}