@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/Input/Input.stories.tsx

@@ -1,512 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Input, InputTypes } from ".";
-import Text from "../Text/Text";
-import { minCharactersRegex } from "../../utils/inputValidation";
-import { withMemo } from "../../userHoc";
-import { arePropsEqual } from "./InputMemoTypes";
-import FormButton from "../FormButton/FormButton";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-const MemoizedInput = withMemo(Input, arePropsEqual);
-
-export default {
-	title: "Components/Input",
-	component: MemoizedInput,
-	argTypes: {
-		validateInput: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-			description: "The function that validates the input.",
-		},
-		hasValidation: {
-			control: "none",
-			description: "Whether the input has validation styles turned on.",
-		},
-		errorMessage: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-			description: "The error message if the input validation fails.",
-		},
-		regex: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-			description: "The regex used to validate the input.",
-		},
-		inputType: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-			description: "The type of input.",
-		},
-		inputWidth: {
-			control: "none",
-			description: "The width of the input.",
-		},
-		inputTextSize: {
-			control: "none",
-			description: "The size of the text in the input.",
-		},
-		hasPlaceholder: {
-			control: "none",
-			description: "Whether the input has a placeholder.",
-		},
-		placeholder: {
-			control: "none",
-			description: "The text that appears in the input field.",
-		},
-		hasLeftIcon: {
-			control: "none",
-			description: "If the input has an icon on the left.",
-		},
-		leftIcon: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-			description: "If the input has an icon on the left.",
-		},
-		hasRightIcon: {
-			control: "none",
-			description: "If the input has an icon on the right.",
-		},
-		rightIcon: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-			description: "If the input has an icon on the left.",
-		},
-		iconColor: {
-			control: "none",
-			description: "The color of the icons.",
-		},
-		iconBackgroundColor: {
-			control: "none",
-			description: "The background color of the icons.",
-		},
-		inputShape: {
-			control: "none",
-			description: "The shape of the input.",
-		},
-		borderColor: {
-			control: "none",
-			description: "The border color of the input.",
-		},
-		successBorder: {
-			control: "none",
-			description: "The border color when the input validation results in success.",
-		},
-		errorBorder: {
-			control: "none",
-			description: "The border color when the input validation results in error.",
-		},
-		backgroundColor: {
-			control: "none",
-			description: "The background color of the input.",
-		},
-		hasButton: {
-			control: "none",
-			description: "If the input has a button.",
-		},
-		button: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-			description: "The button that is displayed on the input.",
-		},
-		onClick: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-		},
-		label: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-		},
-		labelVisible: {
-			control: "none",
-			description: "If the input label is visible to all or just screen readers.",
-		},
-		labelPlacement: {
-			control: "none",
-			description: "Where the label is placed in relation to the input field.",
-		},
-		value: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-		},
-		inputName: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-		},
-		onChange: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-		},
-		onButtonClick: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-		},
-		additionalClasses: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-		},
-	},
-	tags: ["autodocs"],
-	parameters: {
-		layout: "centered",
-	},
-} as Meta;
-
-const Template: StoryFn<InputTypes> = (args) => <MemoizedInput {...args} />;
-
-export const NoIcons = Template.bind({});
-NoIcons.args = {
-	inputType: "search",
-	inputName: "search",
-	hasValidation: false,
-	hasPlaceholder: true,
-	placeholder: "Search",
-	labelVisible: false,
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Search"
-			tag="h2"
-			additionalClasses="mb-0 pb-0 pr-2"
-		/>
-	),
-	hasLeftIcon: false,
-	hasRightIcon: false,
-	leftIcon: getFontAwesomeIcon("search"),
-	rightIcon: getFontAwesomeIcon("arrow-right"),
-	hasButton: true,
-	button: (
-		<FormButton
-			text=""
-			size="lg"
-			as="button"
-			hoverBackground="hover:bg-green-500"
-			backgroundColor="bg-green-500"
-			icon={getFontAwesomeIcon("search")}
-			fontColor="text-white"
-			additionalClasses="items-center px-2 h-full"
-			borderColor="border-none"
-			hoverFontColor="hover:text-black"
-			shape="rounded"
-			onClick={() => alert("Button clicked!")}
-		/>
-	),
-	inputTextSize: "text-md",
-	inputWidth: "w-96",
-	inputShape: "rounded",
-	backgroundColor: "bg-white",
-	borderColor: "border-green-500",
-};
-
-export const LeftIcon = Template.bind({});
-LeftIcon.args = {
-	inputType: "text",
-	inputName: "search",
-	hasValidation: false,
-	inputWidth: "w-96",
-	inputShape: "rounded",
-	backgroundColor: "bg-white",
-	borderColor: "border-green-500",
-	hasPlaceholder: true,
-	placeholder: "Search",
-	labelVisible: false,
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Search:"
-			tag="h2"
-			additionalClasses="mb-0 pb-0 pr-2"
-		/>
-	),
-	hasLeftIcon: true,
-	leftIcon: getFontAwesomeIcon("search"),
-	iconBackgroundColor: "none",
-	hasRightIcon: false,
-	iconColor: "text-green-500",
-	hasButton: false,
-};
-
-export const RightIcon = Template.bind({});
-RightIcon.args = {
-	inputType: "text",
-	inputName: "search",
-	hasValidation: false,
-	inputWidth: "w-96",
-	inputShape: "rounded",
-	backgroundColor: "bg-gray-500",
-	borderColor: "border-green-500",
-	hasPlaceholder: true,
-	placeholder: "Search",
-	labelVisible: false,
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Search:"
-			tag="h2"
-			additionalClasses="mb-0 pb-0 pr-2"
-		/>
-	),
-	hasLeftIcon: false,
-	hasRightIcon: true,
-	rightIcon: getFontAwesomeIcon("arrow-right"),
-	iconBackgroundColor: "none",
-	hasButton: false,
-};
-
-export const DualIcons = Template.bind({});
-DualIcons.args = {
-	inputType: "text",
-	inputName: "search",
-	hasValidation: false,
-	inputWidth: "w-[40rem]",
-	inputShape: "rounded",
-	backgroundColor: "bg-white",
-	borderColor: "border-green-500",
-	placeholder: "Search",
-	hasButton: false,
-	labelVisible: false,
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Search:"
-			tag="h2"
-			additionalClasses="mb-0 pb-0 pr-2"
-		/>
-	),
-	hasRightIcon: true,
-	hasLeftIcon: true,
-	rightIcon: getFontAwesomeIcon("arrow-right"),
-	leftIcon: getFontAwesomeIcon("search"),
-	iconBackgroundColor: "none",
-};
-
-export const ButtonWithValidation = Template.bind({});
-ButtonWithValidation.args = {
-	inputType: "search",
-	inputName: "search",
-	hasValidation: true,
-	regex: minCharactersRegex,
-	errorMessage: "Input must be at least three characters",
-	inputWidth: "w-[40rem]",
-	inputShape: "rounded",
-	backgroundColor: "bg-white",
-	borderColor: "border-green-500",
-	errorBorder: "border-red-500",
-	successBorder: "border-green-500",
-	placeholder: "Enter input here...",
-	labelVisible: false,
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Search:"
-			tag="h2"
-			additionalClasses="mb-0 pb-0 pr-2"
-		/>
-	),
-	hasRightIcon: false,
-	hasLeftIcon: false,
-	hasButton: true,
-	button: (
-		<FormButton
-			text=""
-			size="lg"
-			as="button"
-			hoverBackground="hover:bg-green-500"
-			backgroundColor="bg-green-500"
-			icon={getFontAwesomeIcon("search")}
-			fontColor="text-white"
-			additionalClasses="items-center px-2 h-full"
-			borderColor="border-none"
-			hoverFontColor="hover:text-black"
-			shape="rounded"
-			onClick={() => alert("Button clicked!")}
-		/>
-	),
-};
-
-export const ButtonWithLeftIcon = Template.bind({});
-ButtonWithLeftIcon.args = {
-	inputType: "text",
-	inputName: "search",
-	hasValidation: false,
-	inputWidth: "w-[40rem]",
-	inputShape: "rounded",
-	backgroundColor: "bg-white",
-	borderColor: "border-green-500",
-	placeholder: "Search",
-	labelVisible: false,
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Search:"
-			tag="h2"
-			additionalClasses="mb-0 pb-2 pl-2"
-		/>
-	),
-	hasRightIcon: false,
-	hasLeftIcon: true,
-	leftIcon: getFontAwesomeIcon("search"),
-	iconBackgroundColor: "none",
-	hasButton: true,
-	button: (
-		<FormButton
-			text=""
-			size="lg"
-			as="button"
-			hoverBackground="hover:bg-green-500"
-			backgroundColor="bg-green-500"
-			icon={getFontAwesomeIcon("search")}
-			fontColor="text-white"
-			additionalClasses="items-center px-2 h-full"
-			borderColor="border-none"
-			hoverFontColor="hover:text-black"
-			shape="rounded"
-			onClick={() => alert("Button clicked!")}
-		/>
-	),
-};
-
-export const DateInput = Template.bind({});
-DateInput.args = {
-	inputType: "date",
-	inputName: "birthday",
-	hasValidation: true,
-	inputWidth: "w-48",
-	inputShape: "rounded",
-	backgroundColor: "bg-white",
-	borderColor: "border-green-500",
-	hasPlaceholder: false,
-	labelVisible: true,
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Date of Birth:"
-			tag="h2"
-			additionalClasses="mb-0 pb-1 pl-2"
-		/>
-	),
-	hasRightIcon: false,
-	hasLeftIcon: false,
-	hasButton: false,
-};
-
-export const EmailInput = Template.bind({});
-EmailInput.args = {
-	inputType: "email",
-	inputName: "email",
-	hasValidation: false,
-	inputWidth: "w-72",
-	inputShape: "rounded",
-	backgroundColor: "bg-white",
-	borderColor: "border-green-500",
-	hasPlaceholder: false,
-	labelVisible: true,
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Email:"
-			tag="h2"
-			additionalClasses="mb-0 pb-1 pl-2"
-		/>
-	),
-	hasRightIcon: false,
-	hasLeftIcon: true,
-	leftIcon: getFontAwesomeIcon("envelope"),
-	hasButton: false,
-};
-
-export const NumberInput = Template.bind({});
-NumberInput.args = {
-	inputType: "number",
-	inputName: "number",
-	hasValidation: false,
-	inputWidth: "w-36",
-	inputShape: "rounded",
-	backgroundColor: "bg-white",
-	borderColor: "border-green-500",
-	hasPlaceholder: false,
-	labelVisible: true,
-	labelPlacement: "left",
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Enter Your Age:"
-			tag="h2"
-			additionalClasses="mb-0 pb-0 pr-3"
-		/>
-	),
-	hasRightIcon: false,
-	hasLeftIcon: false,
-	hasButton: false,
-};
-
-export const RangeInput = Template.bind({});
-RangeInput.args = {
-	inputType: "range",
-	inputName: "number",
-	hasValidation: false,
-	inputWidth: "w-36",
-	backgroundColor: "bg-white",
-	borderColor: "border-none",
-	hasPlaceholder: false,
-	labelVisible: true,
-	labelPlacement: "left",
-	label: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Select:"
-			tag="h2"
-			additionalClasses="mb-0 pb-0 pr-4"
-		/>
-	),
-	hasRightIcon: false,
-	hasLeftIcon: false,
-	hasButton: false,
-};

package/src/components/Input/Input.test.tsx

@@ -1,89 +0,0 @@
-import "../../../dist/main.css";
-import { render, screen } from "@testing-library/react";
-import { describe, test, expect, beforeEach } from "vitest";
-import Input from "./Input";
-import Text from "../Text/Text";
-import FormButton from "../FormButton/FormButton";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-describe("<Input /> with all props", () => {
-	beforeEach(() => {
-		render(
-			<Input
-				hasValidation={false}
-				// LABEL
-				label={
-					<Text
-						size="text-md"
-						color="text-black"
-						fontFamily="font-serif"
-						text="Search for items"
-						tag="h2"
-						additionalClasses="mb-0 pb-2 pl-2"
-					/>
-				}
-				labelVisible={true}
-				labelPlacement="left"
-				// INPUT DETAILS
-				inputName="search"
-				inputType="text"
-				// PLACEHOLDER
-				hasPlaceholder={true}
-				placeholder="Search for items"
-				// ICONS
-				hasLeftIcon={false}
-				hasRightIcon={false}
-				iconColor="black"
-				// INPUT STYLES
-				inputTextSize="medium"
-				inputShape="cornered"
-				borderColor="green"
-				backgroundColor="none"
-				inputWidth="w-96"
-				// BUTTON
-				hasButton={true}
-				button={
-					<FormButton
-						text="Submit"
-						as="button"
-						hoverBackground="green"
-						backgroundColor="green"
-						icon={getFontAwesomeIcon("arrow-right")}
-						fontColor="white"
-						additionalClasses="items-center px-4"
-						borderColor="green"
-						hoverFontColor="black"
-						shape="cornered"
-					/>
-				}
-			/>
-		);
-	});
-
-	test("renders Input component", () => {
-		expect(screen.getByTestId("input-container")).toBeInTheDocument();
-		expect(screen.getByTestId("input-element")).toBeInTheDocument();
-	});
-
-	test("renders correct Input label", () => {
-		expect(screen.getByTestId("input-label")).toBeInTheDocument();
-		expect(screen.getByTestId("input-label")).toHaveTextContent(
-			"Search for items"
-		);
-	});
-
-	test("renders correct button", () => {
-		expect(screen.getByTestId("submit-button")).toBeInTheDocument();
-		expect(screen.getByTestId("submit-button")).toHaveTextContent("Submit");
-	});
-
-	test("contains correct placeholder text", () => {
-		const input = screen.getByTestId("input-element");
-		expect(input).toHaveAttribute("placeholder", "Search for items");
-	});
-
-	test("renders correct border color class", () => {
-		const inputElement = screen.getByTestId("input-element");
-		expect(inputElement).toHaveClass("border-teal-500");
-	});
-});