@kivid/native-components 1.0.0-alpha.5 → 1.0.0-alpha.7

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;
-}

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

@@ -1,74 +0,0 @@
-import { type Meta, type StoryObj } from "@storybook/react-native";
-import { LoadingDots } from "./index";
-import { View } from "react-native";
-import { LoadingDotsVariant } from "./types";
-
-const meta = {
-  title: "Components/LoadingDots",
-  component: LoadingDots,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component: "A loading dots component with color variants.",
-      },
-    },
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["grape", "light", "dark"],
-      description: "The color variant of the dots",
-    },
-  },
-} satisfies Meta<typeof LoadingDots>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function renderLoadingDots({ variant }: { variant?: LoadingDotsVariant }) {
-  return (
-    <View style={{ width: 200, height: 200 }}>
-      <LoadingDots variant={variant} />
-    </View>
-  );
-}
-
-export const Default: Story = {
-  args: {
-    variant: "grape",
-  },
-
-  render: renderLoadingDots,
-};
-
-export const Grape: Story = {
-  args: {
-    variant: "grape",
-  },
-
-  render: renderLoadingDots,
-};
-
-export const Light: Story = {
-  args: {
-    variant: "light",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-
-  render: renderLoadingDots,
-};
-
-export const Dark: Story = {
-  args: {
-    variant: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-
-  render: renderLoadingDots,
-};

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

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { Seal } from ".";
-import { View } from "react-native";
-import { SealVariantEnum } from "./enums";
-
-const meta: Meta<typeof Seal> = {
-  title: "Components/Seal",
-  component: Seal,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: {
-        type: "select",
-      },
-      options: Object.values(SealVariantEnum),
-      description: "The variant of the seal",
-      table: {
-        type: { summary: Object.values(SealVariantEnum).join(" | ") },
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-      },
-      options: ["small", "medium"],
-      description: "The size of the seal",
-      table: {
-        type: { summary: "small | medium" },
-      },
-    },
-    inverted: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Seal>;
-
-export const Default: Story = {
-  args: {
-    variant: SealVariantEnum.ADD,
-    size: "medium",
-    inverted: false,
-  },
-};
-
-export const Add: Story = {
-  args: {
-    ...Default.args,
-    variant: SealVariantEnum.ADD,
-  },
-};
-
-export const Success: Story = {
-  args: {
-    ...Default.args,
-    variant: SealVariantEnum.SUCCESS,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...Default.args,
-    variant: SealVariantEnum.ERROR,
-  },
-};
-
-export const Alert: Story = {
-  args: {
-    ...Default.args,
-    variant: SealVariantEnum.ALERT,
-  },
-};
-
-export const Minus: Story = {
-  args: {
-    ...Default.args,
-    variant: SealVariantEnum.MINUS,
-  },
-};
-
-export const Left: Story = {
-  args: {
-    ...Default.args,
-    variant: SealVariantEnum.LEFT,
-  },
-};
-
-export const Right: Story = {
-  args: {
-    ...Default.args,
-    variant: SealVariantEnum.RIGHT,
-  },
-};
-
-const AllTemplate: Story = {
-  render: (args) => {
-    const variants = Object.values(SealVariantEnum);
-    return (
-      <View className="flex flex-col gap-300">
-        <View className="flex flex-row gap-300">
-          {variants.map((variant) => (
-            <Seal {...args} key={variant} variant={variant} />
-          ))}
-        </View>
-        <View className="flex flex-row gap-300 bg-slate-900 p-300">
-          {variants.map((variant) => (
-            <Seal {...args} key={variant} variant={variant} inverted />
-          ))}
-        </View>
-      </View>
-    );
-  },
-};
-
-export const All = {
-  ...AllTemplate,
-  args: {
-    ...Default.args,
-  },
-};