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

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/index.stories.tsx

@@ -1,256 +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";
-import { Typography } from "../Typography";
-
-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>
-          <Typography
-            variant="label_medium"
-            weight="700"
-            className="text-blackberry-500"
-          >
-            O código realmente é esse?
-          </Typography>
-          <Typography
-            variant="label_medium"
-            weight="700"
-            className="text-chia-900"
-          >
-            Tente novamente
-          </Typography>
-        </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/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,
-  },
-};