PHPackages judicialcouncil/jcc\_storybook - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. judicialcouncil/jcc\_storybook ActiveDrupal-theme[Utility & Helpers](/categories/utility) judicialcouncil/jcc\_storybook ============================== JCC Storybook is a Storybook driven base theme for Drupal. 0.57.83(1mo ago)4197.8k↑70.6%1[14 PRs](https://github.com/JudicialCouncilOfCalifornia/jcc_storybook/pulls)GPL-2.0-or-laterJavaScriptCI passing Since Jan 5Pushed 1mo ago3 watchersCompare [ Source](https://github.com/JudicialCouncilOfCalifornia/jcc_storybook)[ Packagist](https://packagist.org/packages/judicialcouncil/jcc_storybook)[ Docs](https://jcc-storybook.netlify.app/?path=/docs/documentation-intro--default)[ RSS](/packages/judicialcouncil-jcc-storybook/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (4)Versions (570)Used By (0) JCC Storybook! ============== [](#jcc-storybook) JCC Storybook is a component library and a base theme for Drupal built by the Judicial Council of California. This library uses algorithmic/intrinsic layout techniques and 13 "[Layout Primitives](https://every-layout.dev/rudiments/)", instead of media queries and breakpoints, to compose complex layouts. It allows content to expand or contract according to its needs, and still adapts to infinite screen sizes. Layout Primitives are composed into Atomic Components, that are used to build templates and pages. For more details about the methodologies used in this component library see: [https://judicialcouncilofcalifornia.github.io/jcc\_storybook/master/docs/?path=/docs/documentation-intro--default](https://judicialcouncilofcalifornia.github.io/jcc_storybook/master/docs/?path=/docs/documentation-intro--default) External References: - - - Installation ------------ [](#installation) ### Requirements [](#requirements) 1. [Components module](https://drupal.org/project/components) ### Use [](#use) - Install with composer to your drupal project. - `composer require judicialcouncil/jcc_storybook` - Enable the base theme in drupal via the UI or with drush: - `drush en jcc_storybook` - Create a new theme with the following line in your `info.yml` file: `base theme: jcc_storybook` - Include twig templates into your theme via `@atoms/button.twig`, etc. COMING SOON Pattern Library Development --------------------------- [](#pattern-library-development) **For development of the pattern library only. Not required to use this as a base theme.** ### Requirements [](#requirements-1) - Node 18 to run preview site - Node 16 to export scheme & lib for production use ### Installation [](#installation-1) - Clone this repo and cd to the directory - `nvm use`: to use the specified version of Node. (If using nvm to manage node. You may need to install the appropriate version.) - `npm install`: to install the required development packages. - `npm run storybook`: to start storybook. It will open a new browser window. ### Creating Components [](#creating-components) There is a package installed to help make development easier, by generating component scaffolds for you. The package is called [Plop JS](https://plopjs.com). You don't need to learn or configure it. Just create new components by running it and following the prompts. - `npm run plop` - Enter a component name. i.e. `Card` - Select a component type. i.e. `Molecules` The new component will appear at `src/stories/Molecules/Card` For more information about how to develop components for this library, see the "Documentation" section on the sidebar of Storybook. Icons ----- [](#icons) Must use Node 16. - Update `src/assets/icons` directory. - Update `src/assest/icons.json`. - `npm run sprite`: Builds icons.svg sprite. Exporting Scheme & Lib and releasing for Production ------------------------------------------------------- [](#exporting-scheme--lib-and-releasing-for-production) Must use Node 16. - `npm run scheme`: Generates theme scheme. - `npm run lib`: Processes CSS and JavaScript for production use. - Update `History.md` to specify production version for Composer use. - Tag the release with `git tag X.XX.XX` which should auto-deploy the artifact to [https://packagist.org/packages/judicialcouncil/jcc\_storybook](https://packagist.org/packages/judicialcouncil/jcc_storybook). You might need to `git push origin tag X.XX.XX` if the artifact does not appear. Projects using JCC Storybook ---------------------------- [](#projects-using-jcc-storybook) - Courts - Appellate - Language Access - Language Toolkit - Storefront Links ----- [](#links) - Project Page: [https://judicialcouncilofcalifornia.github.io/jcc\_storybook/master/docs/?path=/docs/documentation-intro--default](https://judicialcouncilofcalifornia.github.io/jcc_storybook/master/docs/?path=/docs/documentation-intro--default) - Documentation: [https://judicialcouncilofcalifornia.github.io/jcc\_storybook/master/docs/?path=/docs/documentation-intro--default](https://judicialcouncilofcalifornia.github.io/jcc_storybook/master/docs/?path=/docs/documentation-intro--default) - Support: License ------- [](#license) ### Health Score 53 — FairBetter than 97% of packages Maintenance89 Actively maintained with recent releases Popularity38 Limited adoption so far Community19 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~4 days Total 261 Last Release 55d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/0a878ec244783c4786aafadcd0b9bbc12ce280b5b0ef8a0c4b7e4e698eed89c3?d=identicon)[sleepingmonk](/maintainers/sleepingmonk) ![](https://www.gravatar.com/avatar/0b7ed2b0071c5e4d420fdf05d2bfd23eee3f86745c403da76930c5d360c18b92?d=identicon)[judicialcouncil](/maintainers/judicialcouncil) ![](https://avatars.githubusercontent.com/u/46764557?v=4)[Mel Wong](/maintainers/melwong-jcc)[@melwong-jcc](https://github.com/melwong-jcc) --- Top Contributors [![paboden](https://avatars.githubusercontent.com/u/3878820?v=4)](https://github.com/paboden "paboden (661 commits)")[![sleepingmonk](https://avatars.githubusercontent.com/u/6646958?v=4)](https://github.com/sleepingmonk "sleepingmonk (264 commits)")[![melwong-jcc](https://avatars.githubusercontent.com/u/46764557?v=4)](https://github.com/melwong-jcc "melwong-jcc (185 commits)")[![baptisten](https://avatars.githubusercontent.com/u/3468713?v=4)](https://github.com/baptisten "baptisten (137 commits)")[![archanajcc](https://avatars.githubusercontent.com/u/122403081?v=4)](https://github.com/archanajcc "archanajcc (115 commits)")[![SMohammed1T](https://avatars.githubusercontent.com/u/121072170?v=4)](https://github.com/SMohammed1T "SMohammed1T (9 commits)")[![ivanbueno-jcc](https://avatars.githubusercontent.com/u/56043671?v=4)](https://github.com/ivanbueno-jcc "ivanbueno-jcc (9 commits)")[![alexwu-jcc](https://avatars.githubusercontent.com/u/169102919?v=4)](https://github.com/alexwu-jcc "alexwu-jcc (5 commits)")[![Ravi-jud](https://avatars.githubusercontent.com/u/132409882?v=4)](https://github.com/Ravi-jud "Ravi-jud (4 commits)") ### Embed Badge ![Health badge](/badges/judicialcouncil-jcc-storybook/health.svg) ``` [![Health](https://phpackages.com/badges/judicialcouncil-jcc-storybook/health.svg)](https://phpackages.com/packages/judicialcouncil-jcc-storybook) ``` ### Alternatives [farmos/farmos A web-based farm record keeping application. 1.2k6.7k1](/packages/farmos-farmos)[emulsify-ds/emulsify-drupal The official Drupal base theme for Emulsify that generates custom themes with Storybook development + Webpack Build 96539.1k2](/packages/emulsify-ds-emulsify-drupal) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)