@agility/plenum-ui 2.0.0-rc17 → 2.0.0-rc19

package/README.md

@@ -58,7 +58,8 @@ import { Component } from '@agility/plenum-ui';
 
 ### Development and Build Scripts
 
-Run your development server with Storybook:
+
+#### Run your development server with Storybook:
 
 ```bash
 npm run dev
@@ -66,7 +67,7 @@ npm run dev
 yarn dev
 ```
 
-Build your project:
+#### Build your project:
 
 ```bash
 npm run build
@@ -74,7 +75,36 @@ npm run build
 yarn build
 ```
 
-Clean the \`dist\` directory:
+### Build your project locally and watch for changes
+This will create symlinks for the current project and its necessary dependencies, so that it can be connected to other projects.
+It will also start the watch server, so it will automatically rebuild on any local changes.
+
+```
+yarn start:local
+```
+
+#### Use yarn link to locally test the library in another project:
+
+In the Plenum project directory after having run a build, run:
+ ```bash 
+yarn link.
+```
+You should see the following in your terminal: 
+```bash
+yarn link v1.22.10 
+success Registered "@agility/plenum-ui".
+```
+You can now run 
+```bash 
+yarn link "@agility/plenum-ui"
+```
+in the projects where you want to consume this package and it will be used instead. It should output a message like 
+```bash
+yarn link v1.22.10
+success Using linked package for "@agility/plenum-ui".
+```
+
+#### Clean the \`dist\` directory:
 
 ```bash
 npm run clean
@@ -82,7 +112,7 @@ npm run clean
 yarn clean
 ```
 
-Lint your project:
+#### Lint your project:
 
 ```bash
 npm run lint
@@ -90,7 +120,7 @@ npm run lint
 yarn lint
 ```
 
-Build Tailwind CSS:
+#### Build Tailwind CSS:
 
 ```bash
 npm run build:tw
@@ -100,7 +130,7 @@ yarn build:tw
 
 ### Storybook Scripts
 
-Build your Storybook:
+#### Build your Storybook:
 
 ```bash
 npm run build-storybook
@@ -108,7 +138,7 @@ npm run build-storybook
 yarn build-storybook
 ```
 
-Run your Storybook in development mode:
+#### Run your Storybook in development mode:
 
 ```bash
 npm run storybook:dev
@@ -116,7 +146,7 @@ npm run storybook:dev
 yarn storybook:dev
 ```
 
-Generate Tailwind CSS for Storybook and watch for changes:
+#### Generate Tailwind CSS for Storybook and watch for changes:
 
 ```bash
 npm run storybook:tw
@@ -124,7 +154,7 @@ npm run storybook:tw
 yarn storybook:tw
 ```
 
-Build specific parts of Storybook:
+#### Build specific parts of Storybook:
 
 ```bash
 # Build Storybook
@@ -138,7 +168,7 @@ npm run sb-build:tw
 yarn sb-build:tw
 ```
 
-Compile TypeScript files using custom build script:
+#### Compile TypeScript files using custom build script:
 
 ```bash
 npm run build:tsc

package/build.js

@@ -12,34 +12,35 @@ new Generator({
 // Run TypeScript to generate type declarations using the new tsconfig.lib.json
 execSync("tsc --emitDeclarationOnly --project tsconfig.lib.json", { stdio: "inherit" })
 
-// Build script using esbuild
-esbuild
-	.build({
-		logLevel: "info",
-		entryPoints: [path.resolve(__dirname, "stories/index.ts")],
+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' },
+	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"
+	],
+	format: "esm"
+}
 
-		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"
-		],
-		format: "esm"
-	})
-	.catch(() => process.exit(1))
+// Build script using esbuild
+esbuild
+	.build(context)
+	.catch(() => process.exit(1))

package/dist/index.d.ts

@@ -772,13 +772,17 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/select/index' {
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea' {
   import React from "react";
+  interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+      display: string;
+      htmlFor?: string;
+  }
   export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
       /** Input ID */
       id?: string;
       /** Input Name */
       name?: string;
       /** Label for the input */
-      label?: string;
+      label?: ILabelProps;
       /** Error state */
       isError?: boolean;
       /** If field is required */
@@ -945,6 +949,7 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownC
       activeItemClassname?: ClassNameWithAutocomplete;
       buttonClassname?: ClassNameWithAutocomplete;
       iconClassname?: ClassNameWithAutocomplete;
+      iconSpacingClassname?: ClassNameWithAutocomplete;
       placement?: Placement;
       offsetOptions?: Partial<{
           mainAxis: number;
@@ -959,6 +964,7 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownC
       activeItemClassname: string;
       buttonClassname: string;
       iconClassname: string;
+      iconSpacingClassname: string;
   };
   /** Comment */
   const Dropdown: React.FC<IDropdownProps>;