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

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

@@ -1,209 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { HighlightedText } from ".";
-
-const meta = {
-  title: "Components/HighlightedText",
-  component: HighlightedText,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    text: {
-      control: "text",
-    },
-    highlightText: {
-      control: "text",
-    },
-    variant: {
-      control: "select",
-      options: [
-        "label_small",
-        "label_medium",
-        "label_large",
-        "body_small",
-        "body_medium",
-        "body_large",
-        "title_small",
-        "title_medium",
-        "title_large",
-        "headline_small",
-        "headline_medium",
-        "headline_large",
-        "display_small",
-        "display_medium",
-        "display_large",
-      ],
-      description: "Typography variant for the base text",
-    },
-    weight: {
-      control: "select",
-      options: ["400", "500", "600", "700"],
-      description: "Typography weight for the base text",
-    },
-    className: {
-      control: "text",
-    },
-    reverse: {
-      control: "boolean",
-      description:
-        "If true, the highlighted text will be displayed before the regular text.",
-    },
-    highlightedTextProps: {
-      control: "object",
-      description:
-        "Props for the highlighted text Typography component (className, variant, weight)",
-    },
-  },
-} satisfies Meta<typeof HighlightedText>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    text: "This is a default text",
-  },
-};
-
-export const WithHighlight: Story = {
-  args: {
-    text: "This is text with",
-    highlightText: "highlighted content",
-  },
-};
-
-export const LabelVariant: Story = {
-  args: {
-    text: "Label text",
-    highlightText: "important",
-    variant: "label_medium",
-    weight: "400",
-    highlightedTextProps: {
-      variant: "label_medium",
-      weight: "700",
-    },
-  },
-};
-
-export const BodyVariant: Story = {
-  args: {
-    text: "Body text content",
-    highlightText: "highlighted part",
-    variant: "body_medium",
-    weight: "400",
-    highlightedTextProps: {
-      variant: "body_medium",
-      weight: "700",
-    },
-  },
-};
-
-export const TitleVariant: Story = {
-  args: {
-    text: "Title text content",
-    highlightText: "highlighted part",
-    variant: "title_medium",
-    weight: "400",
-    highlightedTextProps: {
-      variant: "title_medium",
-      weight: "700",
-    },
-  },
-};
-
-export const HeadingVariant: Story = {
-  args: {
-    text: "Heading text content",
-    highlightText: "highlighted part",
-    variant: "headline_medium",
-    weight: "400",
-    highlightedTextProps: {
-      variant: "headline_medium",
-      weight: "700",
-    },
-  },
-};
-
-export const DisplayVariant: Story = {
-  args: {
-    text: "Display text content",
-    highlightText: "highlighted part",
-    variant: "display_medium",
-    weight: "400",
-    highlightedTextProps: {
-      variant: "display_medium",
-      weight: "700",
-    },
-  },
-};
-
-export const WithCustomClasses: Story = {
-  args: {
-    text: "Styled text",
-    highlightText: "with custom styling",
-    variant: "body_medium",
-    weight: "400",
-    className: "text-tangerine-900",
-    highlightedTextProps: {
-      variant: "body_medium",
-      weight: "600",
-      className: "text-mango-900 underline",
-    },
-  },
-};
-
-export const ReverseHighlight: Story = {
-  args: {
-    text: "text with reverse highlight",
-    highlightText: "Highlighted first",
-    variant: "label_medium",
-    weight: "400",
-    reverse: true,
-    highlightedTextProps: {
-      variant: "label_medium",
-      weight: "700",
-    },
-  },
-};
-
-export const WeightVariations: Story = {
-  args: {
-    text: "Different weight for",
-    highlightText: "highlighted text",
-    variant: "body_medium",
-    weight: "400",
-    highlightedTextProps: {
-      variant: "body_medium",
-      weight: "600",
-    },
-  },
-};
-
-export const MixedStyling: Story = {
-  args: {
-    text: "Typography props with",
-    highlightText: "custom classes",
-    variant: "body_medium",
-    weight: "400",
-    className: "text-blue-600",
-    highlightedTextProps: {
-      variant: "title_small",
-      weight: "700",
-      className: "text-red-500 underline",
-    },
-  },
-};
-
-export const BaseTextVariations: Story = {
-  args: {
-    text: "Large title base text with",
-    highlightText: "small label highlight",
-    variant: "title_large",
-    weight: "600",
-    highlightedTextProps: {
-      variant: "label_small",
-      weight: "700",
-    },
-  },
-};

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>
-      </>
-    );
-  },
-};