@agility/plenum-ui 1.3.50 → 2.0.0-rc10

package/stories/organisms/FormInputWithAddons/index.tsx

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

package/stories/organisms/TextInputSelect/InputSelect.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useState } from "react"
+import { default as cn } from "classnames"
+
+export type SelectOptions = {
+	label: string
+	value: string
+}
+export interface InputSelectProps {
+	align: "left" | "right"
+	/** Show the CTA without Background color and a border seperator */
+	inputOptions: SelectOptions[]
+	/** Onclick callback */
+	onSelectOption?(value: string): void
+	className?: string
+	isDisabled?: boolean
+}
+
+/** Comment */
+export const InputSelect: FC<InputSelectProps> = ({
+	inputOptions,
+	onSelectOption,
+	align = "right",
+	className,
+	isDisabled
+}: InputSelectProps): JSX.Element | null => {
+	const [selectedOption, setSelectedOption] = useState<string>(inputOptions[0].value)
+
+	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+		const targetValue = e.target.value
+		onSelectOption && onSelectOption(targetValue)
+		setSelectedOption(targetValue)
+	}
+
+	if (!inputOptions?.length) return null
+	return (
+		<select
+			className={cn(
+				"relative z-10 inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 pr-7 text-sm font-medium",
+				"focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500",
+				align === "right"
+					? "-ml-px rounded-r border-l-white text-gray-700"
+					: align === "left"
+					? "-mr-px rounded-l border-r-white text-gray-500 focus-within:z-10"
+					: "",
+				!onSelectOption ? "cursor-default" : "",
+				className
+			)}
+			onChange={handleChange}
+			value={selectedOption}
+			disabled={isDisabled}
+		>
+			{inputOptions.map((option) => (
+				<option key={option.value} value={option.value}>
+					{option.label}
+				</option>
+			))}
+		</select>
+	)
+}

package/stories/organisms/TextInputSelect/TextInputSelect.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import TextInputSelect from "."
+
+const meta: Meta<typeof TextInputSelect> = {
+	title: "Design System/organisms/TextInputSelect",
+	component: TextInputSelect,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof TextInputSelect>
+export const DefaultTextInputSelectStory: Story = {
+	args: {
+		isFocused: false,
+		isError: false,
+		id: "input",
+		name: "input",
+		defaultValue: "",
+		isRequired: false,
+		isDisabled: false,
+		isShowCounter: false,
+		label: "Currency",
+		placeholder: "420.69",
+		type: "currency",
+		inputOptions: [
+			{ label: "USD", value: "USD" },
+			{ label: "CAD", value: "CAD" },
+			{ label: "EUR", value: "EUR" }
+		],
+		prefix: "$"
+	}
+}

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

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

package/tailwind.config.js

@@ -1,11 +1,42 @@
-// eslint-disable-next-line
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-	mode: 'jit',
-	content: ['./src/**/*.{js,ts,jsx,tsx}', './.storybook/*.{js,ts,jsx,tsx}'],
-	darkMode: false, // or 'media' or 'class'
+	mode: "development",
+
+	content: [
+		"./app/**/*.{js,ts,jsx,tsx}",
+		"./pages/**/*.{js,ts,jsx,tsx}",
+		"./components/**/*/.{js,ts,jsx,tsx}",
+		"./stories/**/*.{js,ts,jsx,tsx}",
+		"./.storybook/*.{js,ts,jsx,tsx}"
+	],
+	safelist: [
+		"text-xs",
+		"text-sm",
+		"text-base",
+		"text-lg",
+		"text-xl",
+		"text-2xl",
+		"text-3xl",
+		"text-4xl",
+		"text-5xl",
+		"text-6xl",
+		"font-thin",
+		"font-extralight",
+		"font-light",
+		"font-normal",
+		"font-medium",
+		"font-semibold",
+		"font-bold",
+		"font-extrabold",
+		"font-black",
+		{
+			pattern:
+				/^(bg|text|border(-(t|r|b|l))?)-((gray)|(red)|(orange)|(yellow)|(blue)|(light-blue)|(cyan)|(green)|(purple)|(teal)|(violet)|(pink)|(rose))-(50|100|200|300|400|500|600|700|800|900)|(mx|my|m|px|py|p)-\d.$/
+		}
+	],
 	theme: {
 		fontFamily: {
-			muli: ['Muli', 'sans-serif']
+			mulish: ["Mulish", "sans-serif"]
 		},
 		extend: {
 			gridTemplateColumns: {
@@ -17,47 +48,145 @@ module.exports = {
 				header: "max-content 1fr 1fr"
 			},
 			colors: {
-				'purple-50': '#EEE6FB',
-				'purple-100': '#DECCF6',
-				'purple-200': '#CDB3F2',
-				'purple-300': '#BC99EE',
-				'purple-400': '#9B66E5',
-				'purple-500': '#7933DD',
-				'purple-600': '#692CD8',
-				'purple-700': '#5800D4',
-				'purple-800': '#4F00BF',
-				'purple-900': '#4600AA',
-
+				"gray-50": "#F9FAFB",
+				"gray-100": "#F3F4F6",
+				"gray-200": "#E5E7EB",
+				"gray-300": "#D1D5DB",
+				"gray-400": "#9CA3AF",
 				"gray-500": "#6B7280",
+				"gray-600": "#4B5563",
 				"gray-700": "#374151",
+				"gray-800": "#1F2937",
 				"gray-900": "#111827",
 
-				"green-50": "#ECFDF5",
-				"green-100": "#D1FAE5",
-				"green-200": "#A7F3D0",
-				"green-300": "#6EE7B7",
-				"green-400": "#34D399",
-				"green-500": "#10B981",
-				"green-600": "#059669",
-				"green-700": "#047857",
-				"green-800": "#065F46",
-				"green-900": "#064E3B",
+				"red-50": "#FEF2F2",
+				"red-100": "#FEE2E2",
+				"red-200": "#FECACA",
+				"red-300": "#FCA5A5",
+				"red-400": "#F87171",
+				"red-500": "#EF4444",
+				"red-600": "#DC2626",
+				"red-700": "#B91C1C",
+				"red-800": "#991B1B",
+				"red-900": "#7F1D1D",
+
+				"orange-50": "#FFF7ED",
+				"orange-100": "#FFEDD5",
+				"orange-200": "#FED7AA",
+				"orange-300": "#FDBA74",
+				"orange-400": "#FB923C",
+				"orange-500": "#F97316",
+				"orange-600": "#EA580C",
+				"orange-700": "#C2410C",
+				"orange-800": "#9A3412",
+				"orange-900": "#7C2D12",
 
+				"yellow-50": "#FFFAEA",
 				"yellow-100": "#FFF5D4",
-				"yellow-400": "#FFDB69",
+				"yellow-200": "#FFEAA9",
+				"yellow-300": "#FFE07E",
+				"yellow-400": "#FFD553",
+				"yellow-500": "#FFCB28",
+				"yellow-600": "#E6B724",
+				"yellow-700": "#B38E1C",
+				"yellow-800": "#997A18",
+				"yellow-900": "#806614",
+
+				"teal-50": "#F0FDFA",
+				"teal-100": "#CCFBF1",
+				"teal-200": "#99F6E4",
+				"teal-300": "#5EEAD4",
+				"teal-400": "#2DD4BF",
+				"teal-500": "#14B8A6",
+				"teal-600": "#0D9488",
+				"teal-700": "#0F766E",
+				"teal-800": "#115E59",
+				"teal-900": "#134E4A",
+
+				"cyan-50": "#CFFAFE",
+				"cyan-100": "#A5F3FC",
+				"cyan-200": "#67E8F9",
+				"cyan-300": "#22D3EE",
+				"cyan-400": "#ECFEFF",
+				"cyan-500": "#06B6D4",
+				"cyan-600": "#0891B2",
+				"cyan-700": "#0E7490",
+				"cyan-800": "#155E75",
+				"cyan-900": "#164E63",
+
+				"light-blue-50": "#E0F2FE",
+				"light-blue-100": "#BAE6FD",
+				"light-blue-200": "#7DD3FC",
+				"light-blue-300": "#38BDF8",
+				"light-blue-400": "#F0F9FF",
+				"light-blue-500": "#0EA5E9",
+				"light-blue-600": "#0284C7",
+				"light-blue-700": "#0369A1",
+				"light-blue-800": "#075985",
+				"light-blue-900": "#0C4A6E",
 
-				"pink-100": "#fce7f3",
-				"pink-400": "#f472b6"
+				"blue-50": "#DBEAFE",
+				"blue-100": "#BFDBFE",
+				"blue-200": "#93C5FD",
+				"blue-300": "#60A5FA",
+				"blue-400": "#EFF6FF",
+				"blue-500": "#3B82F6",
+				"blue-600": "#2563EB",
+				"blue-700": "#1D4ED8",
+				"blue-800": "#1E40AF",
+				"blue-900": "#1E3A8A",
+
+				"purple-50": "#EEE6FB",
+				"purple-100": "#DECCF6",
+				"purple-200": "#CDB3F2",
+				"purple-300": "#BC99EE",
+				"purple-400": "#9B66E5",
+				"purple-500": "#7933DD",
+				"purple-600": "#691AD8",
+				"purple-700": "#5800D4",
+				"purple-800": "#4F00BF",
+				"purple-900": "#4600AA",
+
+				"violet-50": "#EDE9FE",
+				"violet-100": "#DDD6FE",
+				"violet-200": "#C4B5FD",
+				"violet-300": "#A78BFA",
+				"violet-400": "#F5F3FF",
+				"violet-500": "#8B5CF6",
+				"violet-600": "#7C3AED",
+				"violet-700": "#6D28D9",
+				"violet-800": "#5B21B6",
+				"violet-900": "#4C1D95",
+
+				"pink-50": "#FCE7F3",
+				"pink-100": "#FCE7F3",
+				"pink-200": "#FBCFE8",
+				"pink-400": "#F472B6",
+				"pink-500": "#EC4899",
+				"pink-600": "#DB2777",
+				"pink-700": "#BE185D",
+				"pink-800": "#9D174D",
+				"pink-900": "#831843",
+
+				"rose-50": "#FFE4E6",
+				"rose-100": "#FECDD3",
+				"rose-200": "#FDA4AF",
+				"rose-300": "#FB7185",
+				"rose-400": "#FFF1F2",
+				"rose-500": "#F43F5E",
+				"rose-600": "#E11D48",
+				"rose-700": "#BE123C",
+				"rose-800": "#9F1239",
+				"rose-900": "#881337"
 			},
 			fontWeight: {
 				medium: 600
 			}
 		}
 	},
-	variants: {
-		extend: {
-			display: ["group-hover"]
-		}
-	},
-	plugins: [require('@tailwindcss/forms')]
-};
+	plugins: [
+		require("@tailwindcss/forms"),
+		require("@tailwindcss/typography"),
+		require("@headlessui/tailwindcss")
+	]
+}

package/tsconfig.json

@@ -1,23 +1,29 @@
 {
-    "compilerOptions": {
-        "target": "es5",
-        "outDir": "lib",
-        "lib": ["dom", "dom.iterable", "esnext", "es6"],
-        "declaration": true,
-        "declarationDir": "lib",
-        "allowJs": true,
-        "skipLibCheck": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react"
-    },
-    "include": ["src"],
-    "exclude": ["node_modules", "lib"]
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

package/tsconfig.lib.json

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

package/utils/types.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export type ClassNameWithAutocomplete = React.ComponentPropsWithoutRef<"div">["className"];

package/utils/types.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from "react"
+import React from "react"
+export type ClassNameWithAutocomplete = React.ComponentPropsWithoutRef<"div">["className"] 

package/utils/useId.d.ts

@@ -0,0 +1 @@
+export declare const useId: () => string;

package/utils/useId.tsx

@@ -0,0 +1,16 @@
+import { useLayoutEffect, useState } from "react"
+
+let id = 0
+function generateId() {
+	return ++id
+}
+
+export const useId = () => {
+	const [id, setId] = useState(generateId)
+
+	useLayoutEffect(() => {
+		if (id === null) setId(generateId())
+	}, [id])
+
+	return id != null ? "" + id : undefined
+}

package/.babelrc

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "node": "current"
-        }
-      }
-    ],
-    ["@babel/preset-react"],
-    ["@babel/preset-typescript"]
-  ]
-}

package/.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-end_of_line = lf

package/.eslintrc

@@ -1,13 +0,0 @@
-{
-    "root": true,
-    "parser": "@typescript-eslint/parser",
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/eslint-recommended",
-      "plugin:@typescript-eslint/recommended",
-      "prettier"
-    ]
-  }