@agility/plenum-ui 2.0.0-rc9 → 2.0.0

package/README.md

@@ -1,9 +1,8 @@
-
 [![Agility Yellow Triangle Logo withe gray text reading Agility to the right of the triangle](https://cdn.agilitycms.com/content-manager/images/logos/agility-logo-storybook-350.png)](https://agilitycms.com/)
-# Agility Plenum UI Library 
 
-Welcome to Plenum, the definitive UI library for working within the [Agility CMS](https://www.agilitycms.com/) ecosystem. Built with [Next.js 13](https://nextjs.org/) and [Storybook 7.1](https://storybook.js.org/), Plenum is a comprehensive collection of components and patterns designed for building user interfaces in Agility CMS, as well as your own applications within the Agility CMS ecosystem.
+# Agility Plenum UI Library
 
+Welcome to Plenum, the definitive UI library for working within the [Agility CMS](https://www.agilitycms.com/) ecosystem. Built with [Next.js 13](https://nextjs.org/) and [Storybook 7.1](https://storybook.js.org/), Plenum is a comprehensive collection of components and patterns designed for building user interfaces in Agility CMS, as well as your own applications within the Agility CMS ecosystem.
 
 ## Building for the Agility Marketplace
 
@@ -13,21 +12,21 @@ Contributions to extend and improve this library are welcome! Feel free to fork
 
 ## Features
 
-- Comprehensive UI components library, designed for versatility and consistency.
-- Built with modern technologies like Next.js 13 and Storybook 7.1.
-- Includes automation scripts for efficient component creation.
-- Adopts Tailwind CSS for utility-first styling.
-- Easy to use, install, and integrate into your project.
-  
+-   Comprehensive UI components library, designed for versatility and consistency.
+-   Built with modern technologies like Next.js 13 and Storybook 7.1.
+-   Includes automation scripts for efficient component creation.
+-   Adopts Tailwind CSS for utility-first styling.
+-   Easy to use, install, and integrate into your project.
+
 ## Prerequisites
 
 Before you begin, ensure that Tailwind CSS is installed in your project. Follow the instructions here: [Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs)
 
-In your app entry point (i.e. \`_app.tsx\`), import the \`globals.css\` file from the previous step, and the \`tailwind.css\` file from Plenum:
+In your app entry point (i.e. \`\_app.tsx\`), import the \`globals.css\` file from the previous step, and the \`tailwind.css\` file from Plenum:
 
 ```jsx
-import "<RELATIVE_PATH>/globals.css";
-import "@agility/plenum-ui/dist/lib/tailwind.css";
+import "<RELATIVE_PATH>/globals.css"
+import "@agility/plenum-ui/dist/lib/tailwind.css"
 ```
 
 Make sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.
@@ -49,16 +48,15 @@ yarn add @agility/plenum-ui
 Import and use the Plenum components in your React components:
 
 ```jsx
-import { Component } from '@agility/plenum-ui';
-
-<Component {...{ComponentProps}} />
+import { Component } from "@agility/plenum-ui"
+;<Component {...{ ComponentProps }} />
 ```
 
 ## Scripts
 
 ### Development and Build Scripts
 
-Run your development server with Storybook:
+#### Run your development server with Storybook:
 
 ```bash
 npm run dev
@@ -66,7 +64,7 @@ npm run dev
 yarn dev
 ```
 
-Build your project:
+#### Build your project:
 
 ```bash
 npm run build
@@ -74,7 +72,44 @@ 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 +117,7 @@ npm run clean
 yarn clean
 ```
 
-Lint your project:
+#### Lint your project:
 
 ```bash
 npm run lint
@@ -90,7 +125,7 @@ npm run lint
 yarn lint
 ```
 
-Build Tailwind CSS:
+#### Build Tailwind CSS:
 
 ```bash
 npm run build:tw
@@ -100,7 +135,7 @@ yarn build:tw
 
 ### Storybook Scripts
 
-Build your Storybook:
+#### Build your Storybook:
 
 ```bash
 npm run build-storybook
@@ -108,7 +143,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 +151,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 +159,7 @@ npm run storybook:tw
 yarn storybook:tw
 ```
 
-Build specific parts of Storybook:
+#### Build specific parts of Storybook:
 
 ```bash
 # Build Storybook
@@ -138,7 +173,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
@@ -148,7 +183,6 @@ yarn build:tsc
 
 These scripts cover various tasks related to development, build processes, linting, and handling specific aspects like Storybook and Tailwind CSS. Make sure to run the appropriate script for the task you want to perform.
 
-
 ### Component Generation Script
 
 We have a Node.js script that automates the creation of new components for our Storybook library. This script generates a component directory, along with the necessary files like \`Component.tsx\`, \`Component.stories.tsx\`, and \`index.tsx\`.
@@ -163,14 +197,14 @@ node create-component.js ComponentName DestinationDirectory
 
 This command takes two arguments:
 
-- \`ComponentName\` - The name of the new component you want to create. This should be in PascalCase (for example, "MyComponent").
-- \`DestinationDirectory\` - The directory where the new component will be created. This should be relative to the 'stories' directory. (for example, "atoms" or "Molecules").
+-   \`ComponentName\` - The name of the new component you want to create. This should be in PascalCase (for example, "MyComponent").
+-   \`DestinationDirectory\` - The directory where the new component will be created. This should be relative to the 'stories' directory. (for example, "atoms" or "Molecules").
 
 The script will create a new directory with the given component name inside the specified destination directory (under the 'stories' directory). Then, it will generate three files in the new directory:
 
-- \`ComponentName.tsx\` - This is the component file. It contains a basic React functional component structure.
-- \`ComponentName.stories.tsx\` - This is the Storybook story file. It sets up a basic story for the new component.
-- \`index.tsx\` - This file simply exports the new component. It's used for cleaner imports.
+-   \`ComponentName.tsx\` - This is the component file. It contains a basic React functional component structure.
+-   \`ComponentName.stories.tsx\` - This is the Storybook story file. It sets up a basic story for the new component.
+-   \`index.tsx\` - This file simply exports the new component. It's used for cleaner imports.
 
 #### Example
 
@@ -196,3 +230,42 @@ Each of the generated files will contain basic boilerplate code that you can sta
 ##### Notes
 
 This script does prompt the user before overwriting existing directories, so you can run it with confidence. Always use PascalCase for component names, and ensure the destination directory exists or can be created. If you encounter any issues, you can create the component and its files manually
+
+## Advanced
+
+Old School Yarn Link Instructions :)
+
+```
+cd THIS_PACKAGE
+yarn link
+yarn install
+cd node_modules/react
+yarn link
+cd ../../node_modules/react-dom
+yarn link
+cd YOUR_PROJECT
+yarn link PACKAGE_YOU_DEBUG_LOCALLY
+yarn link react
+yarn link react-dom
+```
+
+Then, when you are done
+
+```
+cd YOUR_PROJECT
+yarn unlink "@agility/plenum-ui"
+yarn unlink react
+yarn link react-dom
+
+cd THIS_PACKAGE
+yarn unlink
+cd node_modules/react
+yarn unlink
+cd ../../node_modules/react-dom
+yarn unlink
+
+```
+
+```
+
+```

package/build.js

@@ -12,30 +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" })
 
+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"
+	],
+	format: "esm"
+}
+
 // Build script using esbuild
 esbuild
-	.build({
-		entryPoints: [path.resolve(__dirname, "stories/index.ts")],
-		bundle: true,
-		platform: "browser",
-		target: ["es6"],
-		//HACK outfile: "dist/index.js,"
-		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",
-			"react-dom",
-			"react-icons"
-		],
-		format: "esm"
-	})
-	.catch(() => process.exit(1))
+	.build(context)
+	.catch(() => process.exit(1))