@agility/plenum-ui 1.3.50 → 2.0.0-rc10

package/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
+}

package/.prettierrc

@@ -1,13 +1,13 @@
 {
-    "singleQuote": false,
-    "printWidth": 80,
-    "editor.formatOnSave": true,
-    "proseWrap": "preserve",
-    "tabWidth": 4,
-    "requireConfig": false,
-    "useTabs": true,
-    "trailingComma": "none",
-    "bracketSpacing": true,
-    "jsxBracketSameLine": false,
-    "semi": false
-}
+  "singleQuote": false,
+  "printWidth": 120,
+  "editor.formatOnSave": true,
+  "proseWrap": "preserve",
+  "tabWidth": 4,
+  "requireConfig": false,
+  "useTabs": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "semi": false
+}

package/.storybook/Layout.jsx

@@ -1,9 +1,12 @@
-import React from 'react';
-import '../lib/tailwind.css';
-import '../src/font.css';
+import React from "react"
+import "../lib/tailwind.css"
 
 const Layout = ({ children }) => {
-    return <div className="p5 min-w-[320px] font-muli">{children}</div>;
-};
+  return (
+		<div className="p5 min-w-[320px] font-mulish">
+			<div className="flex items-center justify-center">{children}</div>
+		</div>
+  )
+}
 
-export default Layout;
+export default Layout

package/.storybook/head.tsx

@@ -0,0 +1,4 @@
+;<link
+	href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
+	rel="stylesheet"
+></link>

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+const path = require("path")
+module.exports = {
+	stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions",
+		"@storybook/addon-designs"
+	],
+	framework: {
+		name: "@storybook/nextjs",
+		options: {}
+	},
+	staticDirs: ["../public"],
+	docs: {
+		autodocs: "tag"
+	}
+}

package/.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="shortcut icon" href="https://static.agilitycms.com/favicon/purple/128.png">

package/.storybook/manager.ts

@@ -0,0 +1,25 @@
+// .storybook/manager.js
+
+import { addons } from "@storybook/manager-api"
+import plenumTheme from "./plenumTheme"
+
+addons.setConfig({
+	isFullscreen: false,
+	showNav: true,
+	showPanel: true,
+	panelPosition: "bottom",
+	enableShortcuts: true,
+	showToolbar: true,
+	theme: plenumTheme,
+	sidebar: {
+		showRoots: false,
+		collapsedRoots: ["other", "plenum"]
+	},
+	toolbar: {
+		title: { hidden: false },
+		zoom: { hidden: false },
+		eject: { hidden: false },
+		copy: { hidden: false },
+		fullscreen: { hidden: false }
+	}
+})

package/.storybook/plenumTheme.ts

@@ -0,0 +1,8 @@
+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-head.html

@@ -0,0 +1,4 @@
+<!-- ./storybook/preview-head.html -->
+<link href="/tailwind.css" rel="stylesheet" />
+
+	

package/.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import { Preview } from "@storybook/react"
+import Layout from "./Layout"
+import React from "react"
+
+const preview: Preview = {
+	parameters: {
+		options: {
+			storySort: {
+				order: ["atoms", "molecules", "organisms"]
+			}
+		},
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/
+			}
+		}
+	},
+	decorators: [
+		(Story) => (
+			<Layout>
+				<Story />
+			</Layout>
+		)
+	]
+}
+export default preview

package/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

package/.yarnrc.yml

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

package/README.md

@@ -1,86 +1,198 @@
-# Agility CMS Component Library for React
+
+[![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.
+
+
+## Building for the Agility Marketplace
+
+The Plenum library is designed to encourage and facilitate building applications for the Agility CMS Marketplace. Use the rich selection of components and patterns to build consistent, robust, and user-friendly applications for the Agility ecosystem.
+
+Contributions to extend and improve this library are welcome! Feel free to fork the repository and submit pull requests.
 
 ## Features
 
-- Button | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-button)
-- Combobox | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-combobox--all-variations)
-- Dropdown | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-dropdown--default)
-- Switch | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-atoms--switch-component)
-- TextInput | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-textinput--all-variations)
-- TextInputAddon | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-textinputaddon--all-variations)
-- TextInputSelect | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-textinputselect--all-variations)
-- Radio | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-radio--all-variations)
-- Checkbox | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-checkbox--all-variations)
-- Textarea | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-textarea--all-variations)
-- Select | [view](https://plenum-ui.vercel.app/?path=/story/plenum-ui-components-select--all-variations)
+- 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:
 
-## Prerequistes
+```jsx
+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.
+
+## Installation
 
-Follow the instructions to install Tailwind CSS into the project: [Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs)
+You can install the Plenum library using npm or yarn:
 
-Import Plenum's tailwind.css and the global.css from the previous step into the
-app entrypoint (i.e. `_app.tsx`).
+```bash
+# Using npm:
+npm install @agility/plenum-ui
 
+# Using yarn:
+yarn add @agility/plenum-ui
 ```
-import "<RELATIVE_PATH>/globals.css";
-import "@agility/plenum-ui/lib/tailwind.css";
+
+## Usage
+
+Import and use the Plenum components in your React components:
+
+```jsx
+import { Component } from '@agility/plenum-ui';
+
+<Component {...{ComponentProps}} />
 ```
 
-_Any additional styles should be added before these two import statements to prevent overwriting the Plenum styling_
+## Scripts
 
-## Installing
+### Development and Build Scripts
 
-Using npm:
+Run your development server with Storybook:
 
 ```bash
-$ npm install @agility/plenum-ui
+npm run dev
+# or
+yarn dev
 ```
 
-Using yarn:
+Build your project:
 
 ```bash
-$ yarn add @agility/plenum-ui
+npm run build
+# or
+yarn build
 ```
 
+Clean the \`dist\` directory:
 
-## Usage
+```bash
+npm run clean
+# or
+yarn clean
+```
+
+Lint your project:
+
+```bash
+npm run lint
+# or
+yarn lint
+```
+
+Build Tailwind CSS:
+
+```bash
+npm run build:tw
+# or
+yarn build:tw
+```
+
+### Storybook Scripts
+
+Build your Storybook:
 
-```js
-import { Button } from '@agility/plenum-ui';
+```bash
+npm run build-storybook
+# or
+yarn build-storybook
+```
+
+Run your Storybook in development mode:
+
+```bash
+npm run storybook:dev
+# or
+yarn storybook:dev
+```
+
+Generate Tailwind CSS for Storybook and watch for changes:
+
+```bash
+npm run storybook:tw
+# or
+yarn storybook:tw
+```
+
+Build specific parts of Storybook:
+
+```bash
+# Build Storybook
+npm run sb-build:storybook
+# or
+yarn sb-build:storybook
+
+# Build Tailwind CSS for Storybook
+npm run sb-build:tw
+# or
+yarn sb-build:tw
+```
 
-<Button label='Primary' type='primary' size='base' icon='BellIcon'>
+Compile TypeScript files using custom build script:
+
+```bash
+npm run build:tsc
+# or
+yarn build:tsc
 ```
 
-## Advanced
-If you wish to use yarn link with this project to debug locally:
+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\`.
+
+#### How to use the script
+
+To use the script, you should have Node.js installed. From the terminal, you can create a new component by running the following command:
+
+```bash
+node create-component.js ComponentName DestinationDirectory
 ```
-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
+
+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").
+
+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.
+
+#### Example
+
+To create a new component named "Button" in the "atoms" directory, you would run:
+
+```bash
+node create-component.js Button atoms
 ```
 
-Then, when you are done
+This would create a directory structure like:
 
 ```
-cd YOUR_PROJECT
-yarn unlink "@agility/plenum-ui"
-yarn unlink react
-yarn link react-dom
+- stories
+  - atoms
+    - Button
+      - Button.tsx
+      - Button.stories.tsx
+      - index.tsx
+```
+
+Each of the generated files will contain basic boilerplate code that you can start with.
 
-cd THIS_PACKAGE
-yarn unlink
-cd node_modules/react
-yarn unlink
-cd ../../node_modules/react-dom
-yarn unlink
+##### 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

package/app/globals.css

@@ -0,0 +1,99 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer {
+	* {
+		/* set the default outline color on focus */
+		outline-color: #7933dd;
+
+	}
+
+	/*
+	vertical splitter on the InnerContainer component
+
+	.reflex-container.vertical > .reflex-splitter {
+		border-right: 1px solid #f9fafb;
+		border-left: 1px solid #f9fafb;
+		z-index: 2 !important;
+	}
+
+	.reflex-container.vertical > .reflex-splitter:hover {
+		border-right: 1px solid #eee;
+		border-left: 1px solid #eee;
+	}
+
+	.reflex-container.vertical > .reflex-splitter:active {
+		border-right: 1px solid #ddd;
+		border-left: 1px solid #ddd;
+	} */
+
+
+	/*
+	scroll bar overrides
+	*/
+	.scroll-black {
+		scrollbar-width: thin; /* "auto" or "thin" */
+		scrollbar-color: #aaa; /* scroll thumb and track */
+	}
+
+	.scroll-black::-webkit-scrollbar {
+		width: 6px; /* width of the entire scrollbar */
+		height: 6px;
+	}
+
+	.scroll-black::-webkit-scrollbar-track {
+		background: 0; /* color of the tracking area */
+	}
+	.scroll-black::-webkit-scrollbar-thumb {
+		background-color: #aaa; /* color of the scroll thumb */
+		border-radius: 20px; /* roundness of the scroll thumb */
+	}
+
+	.scroll-transparent {
+		scrollbar-width: thin; /* "auto" or "thin" */
+		scrollbar-color: #00000000; /* scroll thumb and track */
+	}
+
+	.scroll-transparent::-webkit-scrollbar {
+		width: 6px; /* width of the entire scrollbar */
+		height: 6px;
+	}
+
+	.scroll-transparent::-webkit-scrollbar-track {
+		background: 0; /* color of the tracking area */
+	}
+	.scroll-transparent::-webkit-scrollbar-thumb {
+		background-color: #00000000; /* color of the scroll thumb */
+		border-radius: 20px; /* roundness of the scroll thumb */
+	}
+
+	.scroll-none {
+		scrollbar-width: none; /* "auto" or "thin" */
+		scrollbar-color: #00000000; /* scroll thumb and track */
+	}
+
+	.scroll-none::-webkit-scrollbar {
+		width: 0; /* width of the entire scrollbar */
+		height: 0;
+	}
+
+	.scroll-none::-webkit-scrollbar-track {
+		background: 0; /* color of the tracking area */
+	}
+
+	/* .scroll-none::-webkit-scrollbar-thumb {
+	} */
+
+	.scrollbar-gutter {
+		scrollbar-gutter: stable;
+	}
+
+	.content-graph g text {
+		font-weight: bold;
+		font-size: 13px !important;
+	}
+
+
+
+
+}

package/app/head.tsx

@@ -0,0 +1,59 @@
+export default function Head() {
+  return (
+		<>
+			<title>Create Next App</title>
+			<meta content="width=device-width, initial-scale=1" name="viewport" />
+			<meta name="description" content="Generated by create next app" />
+
+			<link rel="apple-touch-startup-image" href="https://static.agilitycms.com/favicon/purple/128.png" />
+
+			<link
+				rel="apple-touch-icon-precomposed"
+				sizes="64x64"
+				href="https://static.agilitycms.com/favicon/purple/64.png"
+			/>
+			<link
+				rel="apple-touch-icon-precomposed"
+				sizes="128x128"
+				href="https://static.agilitycms.com/favicon/purple/128.png"
+			/>
+			<link
+				rel="apple-touch-icon-precomposed"
+				sizes="256x256"
+				href="https://static.agilitycms.com/favicon/purple/256.png"
+			/>
+			<link
+				rel="apple-touch-icon-precomposed"
+				sizes="512x512"
+				href="https://static.agilitycms.com/favicon/purple/512.png"
+			/>
+
+			<link
+				rel="icon"
+				type="image/png"
+				href="https://static.agilitycms.com/favicon/purple/32.png"
+				sizes="32x32"
+			/>
+			<link
+				rel="icon"
+				type="image/png"
+				href="https://static.agilitycms.com/favicon/purple/64.png"
+				sizes="64x64"
+			/>
+			<link
+				rel="icon"
+				type="image/png"
+				href="https://static.agilitycms.com/favicon/favicon-128x128.png"
+				sizes="128x128"
+			/>
+			<link
+				rel="icon"
+				type="image/png"
+				href="https://static.agilitycms.com/favicon/favicon-256x256.png"
+				sizes="256x256"
+			/>
+
+			<meta name="application-name" content="Agility" />
+		</>
+  )
+}

package/app/layout.tsx

@@ -0,0 +1,28 @@
+import { Mulish } from "@next/font/google"
+import "./globals.css"
+
+const mulishFont = Mulish({
+	variable: "--mulish",
+	weight: ["200", "300", "400", "500", "600", "700", "800", "900", "1000"],
+	display: "swap",
+	style: ["normal", "italic"],
+	subsets: ["latin"],
+	fallback: ["Helvetica", "Arial", "sans-serif"]
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${mulishFont.variable}`}>
+      {/*
+        <head /> will contain the components returned by the nearest parent
+        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
+      */}
+      <head />
+      <body>{children}</body>
+    </html>
+  )
+}

package/app/page.tsx

@@ -0,0 +1,7 @@
+import { Inter } from "@next/font/google"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export default function Home() {
+  return <main className={""}></main>
+}

package/build.js

@@ -0,0 +1,41 @@
+const { execSync } = require("child_process")
+const esbuild = require("esbuild")
+const path = require("path")
+const { Generator } = require('npm-dts');
+
+new Generator({
+	entry: path.resolve(__dirname, "stories/index.ts"),
+	output: path.resolve(__dirname, 'dist/index.d.ts'),
+	tsc: "--emitDeclarationOnly --project tsconfig.lib.json"
+}).generate();
+
+// 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({
+		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))