{"id":23380602,"url":"https://github.com/agility/agility-plenum-ui","last_synced_at":"2025-04-10T22:42:51.116Z","repository":{"id":37969373,"uuid":"404408933","full_name":"agility/agility-plenum-ui","owner":"agility","description":"Plenum UI - the Agility design system","archived":false,"fork":false,"pushed_at":"2025-02-12T18:30:46.000Z","size":3078,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T19:39:39.597Z","etag":null,"topics":["agility","cms","react","storybook"],"latest_commit_sha":null,"homepage":"https://plenum-ui.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agility.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-08T15:55:45.000Z","updated_at":"2025-02-12T18:30:51.000Z","dependencies_parsed_at":"2024-02-16T22:57:49.790Z","dependency_job_id":"16647c52-63e9-4051-bcdd-50e6aff1a47e","html_url":"https://github.com/agility/agility-plenum-ui","commit_stats":{"total_commits":228,"total_committers":6,"mean_commits":38.0,"dds":0.3464912280701754,"last_synced_commit":"215c1711bcb829d5a888863245906a2184a642d4"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagility-plenum-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagility-plenum-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagility-plenum-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagility-plenum-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agility","download_url":"https://codeload.github.com/agility/agility-plenum-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248312208,"owners_count":21082638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agility","cms","react","storybook"],"created_at":"2024-12-21T20:17:02.065Z","updated_at":"2025-04-10T22:42:51.092Z","avatar_url":"https://github.com/agility.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![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/)\n\n# Agility Plenum UI Library\n\nWelcome 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.\n\n## Building for the Agility Marketplace\n\nThe 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.\n\nContributions to extend and improve this library are welcome! Feel free to fork the repository and submit pull requests.\n\n## Features\n\n-   Comprehensive UI components library, designed for versatility and consistency.\n-   Built with modern technologies like Next.js 13 and Storybook 7.1.\n-   Includes automation scripts for efficient component creation.\n-   Adopts Tailwind CSS for utility-first styling.\n-   Easy to use, install, and integrate into your project.\n\n## Prerequisites\n\nBefore 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)\n\nIn your app entry point (i.e. \\`\\_app.tsx\\`), import the \\`globals.css\\` file from the previous step, and the \\`tailwind.css\\` file from Plenum:\n\n```jsx\nimport \"\u003cRELATIVE_PATH\u003e/globals.css\"\nimport \"@agility/plenum-ui/dist/lib/tailwind.css\"\n```\n\nMake sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.\n\n## Installation\n\nYou can install the Plenum library using npm or yarn:\n\n```bash\n# Using npm:\nnpm install @agility/plenum-ui\n\n# Using yarn:\nyarn add @agility/plenum-ui\n```\n\n## Usage\n\nImport and use the Plenum components in your React components:\n\n```jsx\nimport { Component } from \"@agility/plenum-ui\"\n;\u003cComponent {...{ ComponentProps }} /\u003e\n```\n\n## Scripts\n\n### Development and Build Scripts\n\n#### Run your development server with Storybook:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\n#### Build your project:\n\n```bash\nnpm run build\n# or\nyarn build\n```\n\n### Build your project locally and watch for changes\n\nThis will create symlinks for the current project and its necessary dependencies, so that it can be connected to other projects.\nIt will also start the watch server, so it will automatically rebuild on any local changes.\n\n```\nyarn start:local\n```\n\n#### Use yarn link to locally test the library in another project:\n\nIn the Plenum project directory after having run a build, run:\n\n```bash\nyarn link.\n```\n\nYou should see the following in your terminal:\n\n```bash\nyarn link v1.22.10\nsuccess Registered \"@agility/plenum-ui\".\n```\n\nYou can now run\n\n```bash\nyarn link \"@agility/plenum-ui\"\n```\n\nin the projects where you want to consume this package and it will be used instead. It should output a message like\n\n```bash\nyarn link v1.22.10\nsuccess Using linked package for \"@agility/plenum-ui\".\n```\n\n#### Clean the \\`dist\\` directory:\n\n```bash\nnpm run clean\n# or\nyarn clean\n```\n\n#### Lint your project:\n\n```bash\nnpm run lint\n# or\nyarn lint\n```\n\n#### Build Tailwind CSS:\n\n```bash\nnpm run build:tw\n# or\nyarn build:tw\n```\n\n### Storybook Scripts\n\n#### Build your Storybook:\n\n```bash\nnpm run build-storybook\n# or\nyarn build-storybook\n```\n\n#### Run your Storybook in development mode:\n\n```bash\nnpm run storybook:dev\n# or\nyarn storybook:dev\n```\n\n#### Generate Tailwind CSS for Storybook and watch for changes:\n\n```bash\nnpm run storybook:tw\n# or\nyarn storybook:tw\n```\n\n#### Build specific parts of Storybook:\n\n```bash\n# Build Storybook\nnpm run sb-build:storybook\n# or\nyarn sb-build:storybook\n\n# Build Tailwind CSS for Storybook\nnpm run sb-build:tw\n# or\nyarn sb-build:tw\n```\n\n#### Compile TypeScript files using custom build script:\n\n```bash\nnpm run build:tsc\n# or\nyarn build:tsc\n```\n\nThese 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.\n\n### Component Generation Script\n\nWe 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\\`.\n\n#### How to use the script\n\nTo use the script, you should have Node.js installed. From the terminal, you can create a new component by running the following command:\n\n```bash\nnode create-component.js ComponentName DestinationDirectory\n```\n\nThis command takes two arguments:\n\n-   \\`ComponentName\\` - The name of the new component you want to create. This should be in PascalCase (for example, \"MyComponent\").\n-   \\`DestinationDirectory\\` - The directory where the new component will be created. This should be relative to the 'stories' directory. (for example, \"atoms\" or \"Molecules\").\n\nThe 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:\n\n-   \\`ComponentName.tsx\\` - This is the component file. It contains a basic React functional component structure.\n-   \\`ComponentName.stories.tsx\\` - This is the Storybook story file. It sets up a basic story for the new component.\n-   \\`index.tsx\\` - This file simply exports the new component. It's used for cleaner imports.\n\n#### Example\n\nTo create a new component named \"Button\" in the \"atoms\" directory, you would run:\n\n```bash\nnode create-component.js Button atoms\n```\n\nThis would create a directory structure like:\n\n```\n- stories\n  - atoms\n    - Button\n      - Button.tsx\n      - Button.stories.tsx\n      - index.tsx\n```\n\nEach of the generated files will contain basic boilerplate code that you can start with.\n\n##### Notes\n\nThis 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\n\n## Advanced\n\nOld School Yarn Link Instructions :)\n\n```\ncd THIS_PACKAGE\nyarn link\nyarn install\ncd node_modules/react\nyarn link\ncd ../../node_modules/react-dom\nyarn link\ncd YOUR_PROJECT\nyarn link PACKAGE_YOU_DEBUG_LOCALLY\nyarn link react\nyarn link react-dom\n```\n\nThen, when you are done\n\n```\ncd YOUR_PROJECT\nyarn unlink \"@agility/plenum-ui\"\nyarn unlink react\nyarn link react-dom\n\ncd THIS_PACKAGE\nyarn unlink\ncd node_modules/react\nyarn unlink\ncd ../../node_modules/react-dom\nyarn unlink\n\n```\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagility-plenum-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagility%2Fagility-plenum-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagility-plenum-ui/lists"}