@agility/plenum-ui 2.0.0-rc47 → 2.0.0-rc49

package/stories/molecules/inputs/checkbox/Checkbox.stories.ts

@@ -1,23 +1,23 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import Checkbox from "./Checkbox"
-const meta: Meta<typeof Checkbox> = {
-	title: "Design System/Molecules/Inputs/Checkbox",
-	component: Checkbox,
-	tags: []
-}
-type Story = StoryObj<typeof Checkbox>
-export const DefaultCheckbox: Story = {
-	args: {
-		label: "Checkbox Label",
-		id: "checkboxId",
-		isDisabled: false,
-		isChecked: false,
-		isRequired: false,
-		isError: false,
-		message: "",
-		onChange: (value: string) => {
-
-		}
-	}
-}
-export default meta
+import type { Meta, StoryObj } from "@storybook/react"
+import Checkbox from "./Checkbox"
+const meta: Meta<typeof Checkbox> = {
+	title: "Design System/Molecules/Inputs/Checkbox",
+	component: Checkbox,
+	tags: []
+}
+type Story = StoryObj<typeof Checkbox>
+export const DefaultCheckbox: Story = {
+	args: {
+		label: "Checkbox Label",
+		id: "checkboxId",
+		isDisabled: false,
+		isChecked: false,
+		isRequired: false,
+		isError: false,
+		message: "",
+		onChange: (value: string) => {
+
+		}
+	}
+}
+export default meta

package/stories/molecules/inputs/checkbox/Checkbox.tsx

@@ -1,98 +1,98 @@
-import React, { FC } from "react"
-import { default as cn } from "classnames"
-import InputLabel from "@/stories/molecules/inputs/InputLabel"
-import { useId } from "@/utils/useId"
-
-export interface ICheckboxProps {
-	/** Checkbox label */
-	label: string
-	/** Checkbox ID */
-	id?: string
-	/** Disabled state */
-	isDisabled?: boolean
-	/** value */
-	value?: string
-	/** Check state */
-	isChecked?: boolean
-	/** If field is required */
-	isRequired?: boolean
-	/** Error state */
-	isError?: boolean
-	/** Message or description */
-	message?: string
-	/** Callback on input change */
-	onChange?(value: string, isChecked: boolean): void
-	/** Has a border around the checkbox and label */
-	hasBorder?: boolean
-	/** any arbitrary classNames to add to the wrapper */
-	className?: string
-}
-
-/** Comment */
-const Checkbox: FC<ICheckboxProps> = ({
-	label,
-	id,
-	isDisabled,
-	isChecked,
-	isRequired,
-	isError,
-	message,
-	value,
-	onChange,
-	hasBorder,
-	className,
-	...props
-}: ICheckboxProps) => {
-	const uniqueID = useId()
-	if (!id) id = `cb-${uniqueID}`
-
-	const checkboxStyles = cn(
-		"rounded-sm border-gray-300 text-sm font-normal leading-5 text-purple-600 focus:ring-purple-600",
-		{ "border-red-500 shadow-none": isError }
-	)
-	const wrapperStyles = cn(
-		"relative flex items-center min-h-[38px]",
-		{ "opacity-50": isDisabled },
-		{ "rounded-sm border border-1 px-3 border-gray-200": hasBorder },
-		{ "py-3": hasBorder && message },
-		className
-	)
-
-	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const targetValue = e.target.value
-		const targetChecked = e.target.checked
-		typeof onChange === "function" && onChange(targetValue, targetChecked)
-	}
-
-	return (
-		<div className={wrapperStyles}>
-			<div className="flex items-center">
-				<input
-					id={id}
-					aria-describedby={`${id}-description`}
-					name={id}
-					value={value}
-					type="checkbox"
-					className={checkboxStyles}
-					disabled={isDisabled}
-					checked={isChecked}
-					onChange={(e) => {
-						handleChange(e)
-					}}
-					{...props}
-				/>
-			</div>
-			<div className="ml-3 text-sm ">
-				<label htmlFor={id} className="font-medium text-gray-700">
-					<InputLabel label={label} isRequired={isRequired} id={id} />
-				</label>
-				{message && (
-					<p id={`${id}-description`} className="text-gray-500">
-						{message}
-					</p>
-				)}
-			</div>
-		</div>
-	)
-}
-export default Checkbox
+import React, { FC } from "react"
+import { default as cn } from "classnames"
+import InputLabel from "@/stories/molecules/inputs/InputLabel"
+import { useId } from "@/utils/useId"
+
+export interface ICheckboxProps {
+	/** Checkbox label */
+	label: string
+	/** Checkbox ID */
+	id?: string
+	/** Disabled state */
+	isDisabled?: boolean
+	/** value */
+	value?: string
+	/** Check state */
+	isChecked?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Error state */
+	isError?: boolean
+	/** Message or description */
+	message?: string
+	/** Callback on input change */
+	onChange?(value: string, isChecked: boolean): void
+	/** Has a border around the checkbox and label */
+	hasBorder?: boolean
+	/** any arbitrary classNames to add to the wrapper */
+	className?: string
+}
+
+/** Comment */
+const Checkbox: FC<ICheckboxProps> = ({
+	label,
+	id,
+	isDisabled,
+	isChecked,
+	isRequired,
+	isError,
+	message,
+	value,
+	onChange,
+	hasBorder,
+	className,
+	...props
+}: ICheckboxProps) => {
+	const uniqueID = useId()
+	if (!id) id = `cb-${uniqueID}`
+
+	const checkboxStyles = cn(
+		"rounded-sm border-gray-300 text-sm font-normal leading-5 text-purple-600 focus:ring-purple-600",
+		{ "border-red-500 shadow-none": isError }
+	)
+	const wrapperStyles = cn(
+		"relative flex items-center min-h-[38px]",
+		{ "opacity-50": isDisabled },
+		{ "rounded-sm border border-1 px-3 border-gray-200": hasBorder },
+		{ "py-3": hasBorder && message },
+		className
+	)
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const targetValue = e.target.value
+		const targetChecked = e.target.checked
+		typeof onChange === "function" && onChange(targetValue, targetChecked)
+	}
+
+	return (
+		<div className={wrapperStyles}>
+			<div className="flex items-center">
+				<input
+					id={id}
+					aria-describedby={`${id}-description`}
+					name={id}
+					value={value}
+					type="checkbox"
+					className={checkboxStyles}
+					disabled={isDisabled}
+					checked={isChecked}
+					onChange={(e) => {
+						handleChange(e)
+					}}
+					{...props}
+				/>
+			</div>
+			<div className="ml-3 text-sm ">
+				<label htmlFor={id} className="font-medium text-gray-700">
+					<InputLabel label={label} isRequired={isRequired} id={id} />
+				</label>
+				{message && (
+					<p id={`${id}-description`} className="text-gray-500">
+						{message}
+					</p>
+				)}
+			</div>
+		</div>
+	)
+}
+export default Checkbox

package/stories/molecules/inputs/checkbox/index.ts

@@ -1,3 +1,3 @@
-import Checkbox, { ICheckboxProps } from "./Checkbox"
-export type { ICheckboxProps }
-export default Checkbox
+import Checkbox, { ICheckboxProps } from "./Checkbox"
+export type { ICheckboxProps }
+export default Checkbox

package/stories/molecules/inputs/combobox/ComboBox.stories.ts

@@ -1,41 +1,41 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import Combobox from "./ComboBox"
-
-const meta: Meta<typeof Combobox> = {
-	title: "Design System/Molecules/Inputs/Combobox",
-	component: Combobox,
-	tags: ["autodocs"]
-}
-type Story = StoryObj<typeof Combobox>
-interface ComboItem {
-	[value: string]: string
-}
-
-const comboboxlist: ComboItem[] = [
-	{ value: "Leslie Alexander" },
-	{ value: "Alishba Molloy" },
-	{ value: "Raya Oconnell" },
-	{ value: "Danica Sweet" },
-	{ value: "Ralph Brook" },
-	{ value: "Tamar Tapia" },
-	{ value: "Cara Avila" },
-	{ value: "Jayson Cisneros" },
-	{ value: "Tracey Reader" },
-	{ value: "Rahima Fritz" },
-	{ value: "Vera Pritchard" }
-]
-export const DefaultComboBox: Story = {
-	args: {
-		label: "",
-		items: comboboxlist,
-		displayProperty: "value",
-		keyProperty: "value",
-		placeholder: "Select",
-		id: "combobox",
-		isRequired: false,
-		isError: false,
-		isDisabled: false,
-		nullable: false
-	}
-}
-export default meta
+import type { Meta, StoryObj } from "@storybook/react"
+import Combobox from "./ComboBox"
+
+const meta: Meta<typeof Combobox> = {
+	title: "Design System/Molecules/Inputs/Combobox",
+	component: Combobox,
+	tags: ["autodocs"]
+}
+type Story = StoryObj<typeof Combobox>
+interface ComboItem {
+	[value: string]: string
+}
+
+const comboboxlist: ComboItem[] = [
+	{ value: "Leslie Alexander" },
+	{ value: "Alishba Molloy" },
+	{ value: "Raya Oconnell" },
+	{ value: "Danica Sweet" },
+	{ value: "Ralph Brook" },
+	{ value: "Tamar Tapia" },
+	{ value: "Cara Avila" },
+	{ value: "Jayson Cisneros" },
+	{ value: "Tracey Reader" },
+	{ value: "Rahima Fritz" },
+	{ value: "Vera Pritchard" }
+]
+export const DefaultComboBox: Story = {
+	args: {
+		label: "",
+		items: comboboxlist,
+		displayProperty: "value",
+		keyProperty: "value",
+		placeholder: "Select",
+		id: "combobox",
+		isRequired: false,
+		isError: false,
+		isDisabled: false,
+		nullable: false
+	}
+}
+export default meta