Prism UI

Components and tools to help developers work more efficiently, and make applications more cohesive.

Applications

Docs

Launches the developer documentation app and builds/serves the storybook server.

Home

Provides a landing page and serves as a frontend path router and proxy via path rewrites.

Screenplay

E2E test framework utilizing the Screenplay pattern.

Libraries

Content

Static content assets, including fonts, images, and markdown pages.

Theme

Global theme styles and design tokens.

Presets (coming soon)

PostCSS, Tailwind, ESLint, Stylelint, Prettier, and Typescript presets.

Getting started

This project is built and run using Nx. Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. Check out the intro video to learn more about what Nx is about.

Launch the application in dev mode

To launch the dev server run yarn start or:

nx run-many -t serve -p docs home

To create a production bundle run yarn build.

To see all available targets to run for a project, run:

nx show project home

These targets are either inferred automatically or defined in the project.json or package.json files.

More about running tasks in the docs »

Add new projects

While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.

Use the plugin's generator to create new projects.

To generate a new application, use:

nx g @nx/next:app demo

To generate a new library, use:

nx g @nx/react:lib mylib

You can use nx list to get a list of installed plugins. Then, run nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.

Learn more about Nx plugins » | Browse the plugin registry »

Learn more about Nx on CI

Install Nx Console

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.

Install Nx Console »

Useful links

Learn more:

• Learn more about this workspace setup
• Learn about Nx on CI
• Releasing Packages with Nx release
• What are Nx plugins?

And join the Nx community:

• Discord
• Follow us on X or LinkedIn
• Our Youtube channel
• Our blog

TODO

Checkout dependency resolution warnings

YN0002: │ @apsphysics/prism-ui@workspace:. doesn't provide @typescript-eslint/parser (pc3b85), requested by @nx/eslint-plugin and other dependencies.

YN0002: │ @apsphysics/prism-ui@workspace:. doesn't provide playwright-core (pdfa7b), requested by @serenity-js/playwright.

YN0002: │ @apsphysics/prism-ui@workspace:. doesn't provide react-syntax-highlighter (pb6412), requested by @whitespace/storybook-addon-html.

YN0002: │ @apsphysics/prism-ui@workspace:. doesn't provide webpack (pd6de4), requested by swc-loader.