@agility/plenum-ui 2.0.0-rc2 → 2.0.0-rc21

package/stories/organisms/TextInputSelect/TextInputSelect.tsx

@@ -0,0 +1,186 @@
+import React, { FC, useEffect, useId, useRef, useState } from "react"
+import { default as cn } from "classnames"
+
+import { InputSelect } from "./InputSelect"
+import { AcceptedInputTypes, InputField } from "@/stories/molecules"
+import InputCounter from "@/stories/molecules/inputs/InputCounter"
+
+export type SelectOptions = {
+	label: string
+	value: string
+}
+
+export interface ITextInputSelectProps {
+	/** Input type*/
+	type: AcceptedInputTypes
+	/** Input ID */
+	id?: string
+	/** Input Name */
+	name?: string
+	/** Label for the input */
+	label?: string
+	/** placeholder for the input */
+	placeholder?: string
+	/** Force the focus state on the input */
+	isFocused?: boolean
+	/** Error state */
+	isError?: boolean
+	/** If field is required */
+	isRequired?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Set default value */
+	defaultValue?: string
+	/** Set value */
+	value: string
+	/** Message shown under the text field */
+	message?: string
+	/** Input character counter */
+	isShowCounter?: boolean
+	/** Max length of input character  */
+	maxLength?: number
+	/** Select input location  */
+	selectLocation?: "left" | "right"
+	/** Prefix  */
+	prefix?: string
+	/** List of options to show on the select field  */
+	inputOptions?: SelectOptions[]
+	/** Callback on base input */
+	onChange?(value: string): void
+	/** Callback on input select field */
+	onSelectOption?(value: string): void
+}
+
+const TextInputSelect: FC<ITextInputSelectProps> = ({
+	label,
+	isFocused,
+	isError,
+	id,
+	name,
+	isRequired,
+	type,
+	defaultValue,
+	isDisabled,
+	message,
+	isShowCounter,
+	maxLength,
+	placeholder,
+	inputOptions,
+	selectLocation = "right",
+	prefix,
+	onChange,
+	onSelectOption,
+	value: externalValue
+}: ITextInputSelectProps) => {
+	const [isFocus, setIsFocus] = useState<boolean>(Boolean(isFocused))
+	const [value, setValue] = useState<string>(defaultValue || "")
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	const uniqueID = useId()
+	if (!id) id = `select-${uniqueID}`
+	if (!name) name = id
+
+	useEffect(() => {
+		setValue(externalValue)
+	}, [externalValue])
+
+	// set force focus
+	useEffect(() => {
+		const input = inputRef.current
+		if (!input || isFocus === undefined || isFocused === undefined || isDisabled) return
+		if (isFocus || isFocused) {
+			input.focus()
+		} else {
+			input.blur()
+		}
+	}, [isFocus, isFocused])
+
+	// set label as active if default value is set
+	useEffect(() => {
+		const input = inputRef.current
+		if (!input || defaultValue === undefined || defaultValue === "") return
+	}, [defaultValue])
+
+	const handleInputFocus = (): void => {
+		setIsFocus(true)
+		// add other focus effects here
+	}
+
+	const handleInputBlur = (): void => {
+		setIsFocus(false)
+		// add other focus effects here
+	}
+	const labelStyles = cn("block inline-block font-medium transition-all text-sm text-gray-700 mb-1", {
+		"text-red-500 bg-white": isError
+	})
+
+	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
+
+	return (
+		<div>
+			{label && (
+				<label htmlFor={id} className={labelStyles}>
+					{label}
+					{isRequired && <span className="text-red-500"> *</span>}
+				</label>
+			)}
+			<div className="flex">
+				{inputOptions?.length && selectLocation === "left" && (
+					<InputSelect
+						inputOptions={inputOptions}
+						align="left"
+						onSelectOption={onSelectOption}
+						className={cn(isError ? "border-red-500" : "")}
+						isDisabled={isDisabled}
+					/>
+				)}
+				<div className="relative flex-grow focus-within:z-20">
+					{prefix && (
+						<div className="pointer-events-none pr-10 absolute inset-y-0 left-0 flex items-center pl-3">
+							<span className="text-gray-500 sm:text-sm">{prefix}</span>
+						</div>
+					)}
+					<InputField
+						onFocus={handleInputFocus}
+						onBlur={handleInputBlur}
+						handleChange={(v) => onChange && onChange(v)}
+						ref={inputRef}
+						type={type}
+						name={name}
+						id={id}
+						className={cn(
+							"w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5",
+							"focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm",
+							selectLocation === "right" ? `rounded-l` : `rounded-r`,
+							isError ? "border-red-500" : "",
+							prefix ? `pl-7` : ""
+						)}
+						isDisabled={isDisabled}
+						defaultValue={defaultValue}
+						value={value}
+						maxLength={maxLength}
+						placeholder={placeholder}
+					/>
+				</div>
+				{inputOptions?.length && selectLocation === "right" && (
+					<InputSelect
+						inputOptions={inputOptions}
+						align={"right"}
+						onSelectOption={onSelectOption}
+						isDisabled={isDisabled}
+						className={cn(isError ? "border-red-500" : "")}
+					/>
+				)}
+			</div>
+			<div className="flex flex-row space-x-3">
+				<div className="grow">{message && <span className={discriptionStyles}>{message}</span>}</div>
+				{isShowCounter && (
+					<div className="shrink-0">
+						<InputCounter current={Number(value?.length)} limit={maxLength} />
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
+export default TextInputSelect

package/stories/organisms/TextInputSelect/index.tsx

@@ -0,0 +1,3 @@
+import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect"
+export type { ITextInputSelectProps }
+export default TextInputSelect

package/stories/organisms/index.ts

@@ -1,16 +1,27 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput"
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
 import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown"
-import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "./DropdownComponent"
+import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent"
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder"
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons"
+import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect"
 
 export type {
 	IAnimatedLabelInputProps,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
-	IFormInputWithAddonsProps
+	IFormInputWithAddonsProps,
+	ITextInputSelectProps
+}
+export {
+	AnimatedLabelInput,
+	AnimatedLabelTextArea,
+	ButtonDropdown,
+	Dropdown,
+	EmptySectionPlaceholder,
+	FormInputWithAddons,
+	TextInputSelect
 }
-export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons }

package/tsconfig.lib.json

@@ -3,17 +3,24 @@
 		"declaration": true,
 		"declarationDir": "./dist/types",
 		"outDir": "./dist",
-		"module": "esnext",
+		"module": "ESNext",
 		"rootDir": "./",
-		"target": "es2021",
+		"target": "ESNext",
 		"esModuleInterop": true,
 		"moduleResolution": "node",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": ["./*"]
+			"@/*": [
+				"./*"
+			]
 		},
 		"jsx": "react-jsx"
 	},
-	"include": ["stories/**/*.ts", "utils/**/*.ts"],
-	"exclude": ["node_modules"]
-}
+	"include": [
+		"stories/**/*.ts",
+		"utils/**/*.ts"
+	],
+	"exclude": [
+		"node_modules"
+	]
+}

package/watch.js

@@ -0,0 +1,50 @@
+require('dotenv').config()
+const path = require('path')
+const esbuild = require("esbuild")
+
+const context = {
+	logLevel: "info",
+	entryPoints: [path.resolve(__dirname, "stories/index.ts")],
+	bundle: true,
+	platform: "browser",
+	target: ["esnext"],
+	minify: true,
+	pure: ["React.createElement"],
+	jsx: 'transform',
+	loader: { '.js': 'jsx' },
+	outdir: path.resolve(__dirname, "dist"),
+	sourcemap: true,
+	external: [
+		"react",
+		"react-dom",
+		"@floating-ui/react",
+		"@headlessui/react",
+		"@headlessui/tailwindcss",
+		"@heroicons/react",
+		"@tabler/icons",
+		"@tabler/icons-react",
+		"classnames",
+		"react-icons",
+		"@storybook/react",
+		"@storybook/addon-designs",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions",
+		"@storybook/addon-links",
+		"@storybook/blocks",
+		"@storybook/manager-api",
+		"@storybook/nextjs",
+		"@storybook/react",
+		"@storybook/testing-library",
+		"@storybook/theming",
+		"storybook"
+	],
+	format: "esm"
+}
+
+async function watch() {
+	const ctx = await esbuild.context(context)
+	ctx.watch()
+	console.log(`Watching....`)
+}
+
+watch()

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/stories/layouts/CardLayout/CardLayout.stories.tsx

@@ -1,18 +0,0 @@
-
-import type { Meta, StoryObj } from "@storybook/react"
-import CardLayout, { ICardLayoutProps } from "./CardLayout"
-
-const meta: Meta<typeof CardLayout> = {
-  title: "Design System/layouts/CardLayout",
-  component: CardLayout,
-  tags: ["autodocs"],
-  argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof CardLayout>
-export const DefaultCardLayoutStory: Story = {
-	args: {
-		
-	}
-}

package/stories/layouts/CardLayout/CardLayout.tsx

@@ -1,22 +0,0 @@
-
-import React from  "react"
-import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
-
-export interface ICardLayoutProps {}
-
-const CardLayout: React.FC<ICardLayoutProps> = ({}) => {
-  return (
-   <EmptySectionPlaceholder
-			{...{
-				icon: {
-					icon: "IconCode"
-				},
-				mutedText: "Coming Soon! 🚧",
-				primaryMessage: "We're working on this component. Be sure to check back soon!",
-				actions: []
-			}}
-		/>
-  )
-};
-
-export default CardLayout;

package/stories/layouts/CardLayout/index.tsx

@@ -1,3 +0,0 @@
-
-export { default } from './CardLayout';
-export * from './CardLayout';

package/stories/layouts/ModalLayout/ModalLayout.stories.tsx

@@ -1,18 +0,0 @@
-
-import type { Meta, StoryObj } from "@storybook/react"
-import ModalLayout, { IModalLayoutProps } from "./ModalLayout"
-
-const meta: Meta<typeof ModalLayout> = {
-  title: "Design System/layouts/ModalLayout",
-  component: ModalLayout,
-  tags: ["autodocs"],
-  argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof ModalLayout>
-export const DefaultModalLayoutStory: Story = {
-	args: {
-		
-	}
-}

package/stories/layouts/ModalLayout/ModalLayout.tsx

@@ -1,22 +0,0 @@
-
-import React from  "react"
-import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
-
-export interface IModalLayoutProps {}
-
-const ModalLayout: React.FC<IModalLayoutProps> = ({}) => {
-  return (
-   <EmptySectionPlaceholder
-			{...{
-				icon: {
-					icon: "IconCode"
-				},
-				mutedText: "Coming Soon! 🚧",
-				primaryMessage: "We're working on this component. Be sure to check back soon!",
-				actions: []
-			}}
-		/>
-  )
-};
-
-export default ModalLayout;

package/stories/layouts/ModalLayout/index.tsx

@@ -1,3 +0,0 @@
-
-export { default } from './ModalLayout';
-export * from './ModalLayout';