@agility/plenum-ui 1.3.50 → 2.0.0-rc2

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -0,0 +1,140 @@
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
+import React, { useLayoutEffect, useRef, useState } from "react"
+import { default as cn } from "classnames"
+import InputField, { IInputFieldProps, AcceptedInputTypes } from "@/stories/molecules/inputs/InputField"
+
+export interface IFormInputWithAddonsProps extends Omit<IInputFieldProps, "type"> {
+	leadIcon?: IDynamicIconProps
+	leadLabel?: string
+	trailIcon?: IDynamicIconProps
+	trailLabel?: string
+	iconOutlined?: boolean
+	/** @param addonOffset An extra buffer zone in pixels between the trailing/leading icon or label and search input -- Default is 24 */
+	addonOffset?: number
+	topLabel?: string
+	labelClass?: string
+	containerClassName?: string
+	description?: string
+	leadIconClassNames?: string
+	customIconClass?: string
+	type: AcceptedInputTypes
+}
+
+const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
+	handleChange,
+	value,
+	name,
+	id,
+	placeholder,
+	className,
+	containerClassName,
+	leadIcon,
+	leadLabel,
+	trailIcon,
+	trailLabel,
+	topLabel,
+	labelClass,
+	isDisabled,
+	isReadonly,
+	isError,
+	addonOffset = 24,
+	iconOutlined = false,
+	description,
+	leadIconClassNames,
+	customIconClass,
+	type,
+	...rest
+}) => {
+	// #region logic to determine the width of the lead and or trailing labels in order to offset the input padding by the appropriate amount.
+	const leadLabelRef = useRef<HTMLLabelElement>(null)
+	const trailLabelRef = useRef<HTMLLabelElement>(null)
+	const [leadLabelWidth, setLeadLabelWidth] = useState<number>(0)
+	const [trailLabelWidth, setTrailLabelWidth] = useState<number>(0)
+	useLayoutEffect(() => {
+		setLeadLabelWidth(leadLabelRef.current?.clientWidth || 0)
+		setTrailLabelWidth(trailLabelRef.current?.clientWidth || 0)
+	}, [])
+	// #endregion
+
+	return (
+		<div className={cn("group flex flex-col", containerClassName)}>
+			{!leadLabel && !trailLabel && topLabel && (
+				<label htmlFor={id} className={cn("flex items-center text-sm font-medium text-gray-600", labelClass)}>
+					{topLabel}
+				</label>
+			)}
+			{description && <div className="mb-2 text-sm text-gray-500">{description}</div>}
+			<div className="relative flex-grow">
+				{(leadLabel || leadIcon) && (
+					<label
+						ref={leadLabelRef}
+						htmlFor={id}
+						className={cn(
+							"absolute top-0 bottom-0 left-3 flex items-center justify-center text-sm text-gray-500",
+							labelClass
+						)}
+					>
+						{leadIcon && (
+							<span>
+								<DynamicIcon
+									{...{
+										...leadIcon,
+										className: cn("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
+										outline: iconOutlined
+									}}
+								/>
+							</span>
+						)}
+						{leadLabel && leadLabel}
+					</label>
+				)}
+				<InputField
+					{...{
+						...rest,
+						handleChange,
+						value,
+						id,
+						name,
+						type,
+						autoComplete: "off",
+						disabled: isDisabled,
+						placeholder: placeholder || "",
+						isReadonly,
+						isError,
+						className,
+						// add padding to accomodate inner labels and icons
+						style: {
+							paddingRight: `${trailLabelWidth + addonOffset}px`,
+							paddingLeft: `${leadLabelWidth + addonOffset}px`
+						}
+					}}
+				/>
+				{(trailLabel || trailIcon) && (
+					<label
+						ref={trailLabelRef}
+						htmlFor={id}
+						className={cn(
+							"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
+							labelClass
+						)}
+					>
+						{trailIcon && (
+							<span>
+								<DynamicIcon
+									{...{
+										...trailIcon,
+										className: cn("h-5 w-5 text-gray-400", customIconClass),
+										outline: iconOutlined
+									}}
+								/>
+							</span>
+						)}
+						{trailLabel && trailLabel}
+					</label>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default FormInputWithAddons

package/stories/organisms/FormInputWithAddons/index.tsx

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

package/stories/organisms/index.ts

@@ -0,0 +1,16 @@
+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"
+
+export type {
+	IAnimatedLabelInputProps,
+	IButtonDropdownProps,
+	IDropdownClassnames,
+	IDropdownProps,
+	IEmptySectionPlaceholderProps,
+	IItemProp,
+	IFormInputWithAddonsProps
+}
+export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons }

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"
-    ]
-  }

package/.github/workflows/test.yml

@@ -1,27 +0,0 @@
-# This workflow will do a clean install of node dependencies run tests across different on of node 12.x
-
-name: Component test CI
-
-on:
-  pull_request:
-    types:
-      - opened
-    branches:
-      - 'main'
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install
-    - run: npm test
-

package/.storybook/main.js

@@ -1,17 +0,0 @@
-module.exports = {
-    stories: ['../src/**/*.stories.tsx'],
-    addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/addon-a11y',
-        'storybook-addon-mock/register',
-        {
-            name: '@storybook/addon-postcss',
-            options: {
-                postcssLoaderOptions: {
-                    implementation: require('postcss')
-                }
-            }
-        }
-    ]
-};

package/.storybook/manager.js

@@ -1,6 +0,0 @@
-import { addons } from '@storybook/addons';
-import plenumTheme from './plenumTheme';
-
-addons.setConfig({
-  theme: plenumTheme,
-});

package/.storybook/plenumTheme.js

@@ -1,8 +0,0 @@
-import { create } from '@storybook/theming';
-
-export default create({
-    base: 'light',
-    brandTitle: 'Agility Plenum UI',
-    brandUrl: 'https://plenum-ui.vercel.app/',
-    brandImage: 'https://cdn.agilitycms.com/content-manager/images/logos/agility-logo-storybook-350.png'
-});

package/.storybook/preview.js

@@ -1,44 +0,0 @@
-
-import React from 'react';
-import { addDecorator } from '@storybook/react';
-//import { withInfo } from '@storybook/addon-info';
-
-import Layout from './Layout';
-
-addDecorator(storyFn => <Layout>{storyFn()}</Layout>);
-// addDecorator(withInfo({
-//   inline: true,
-//   propTablesExclude: [Layout]
-// }));
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  layout: 'centered',
-  backgrounds: {
-    default: 'agility white',
-    values: [
-      {
-        name: 'agility white',
-        value: '#ffffff',
-      },
-      {
-        name: 'agility yellow',
-        value: '#FFCB28',
-      },
-      {
-        name: 'agility purple',
-        value: '#4600A8',
-      },
-      {
-        name: 'agility dark blue',
-        value: '#2A3846',
-      },
-    ],
-  },
-}

package/_templates/component/new/component.ejs.t

@@ -1,18 +0,0 @@
----
-to: src/components/<%= h.capitalize(name) %>/<%= h.capitalize(name) %>.tsx
----
-import React, { FC } from 'react';
-import { default as cn } from 'classnames';
-
-export interface <%= h.capitalize(name) %>Props {
-    /** Prop comment */
-    prop: string;
-}
-
-/** Comment */
-export const <%= h.capitalize(name) %>: FC<<%= h.capitalize(name) %>Props> = ({prop}: <%= h.capitalize(name) %>Props) => {
-
-    return (
-        <div><%= h.capitalize(name) %> component {prop}</div>
-    );
-};