@nerdfish/utils
v3.0.0
Published
<div align="center"> <h1>Nerdfishui</h1>
Readme
Introducing Nerdfishui - a custom component library built with React and TailwindCSS to help streamline proof of concept development and provide visually pleasing and functional components. Nerdfishui is the perfect tool for developers who want to quickly create stunning and user-friendly interfaces.
It's an opinionated library, so you might not agree with all the design, but you can add your own styles to the components.
It's mainly radix-ui primitives with some custom styling, with strong inspiration from https://ui.shadcn.com
Usage
Install
To install the component-library run the following within your project directory.
npm install @nerdfish/react @nerdfish/utils postcss tailwindcss @tailwindcss/postcssConfiguration
//postcss.config.mjs
export { default } from '@nerdfish/react/postcss.config.mjs'Then you need a global css file which you import at the root of the project
//styles.css
@import '@nerdfish/react/styles/global.css';
@source "../../node_modules/@nerdfish/react"; // path to nerdfishuiPortals
To make portalled components always appear on top of the entire page, add the following div element to your application layout root:
<body>
<div className="isolate">{children}</div>
</body>Useful Commands
pnpm build- Build all packages, including the docspnpm dev- Run all packages locally and preview the docspnpm checks- Lint all packagespnpm changeset- Generate a changesetpnpm clean- Clean up allnode_modulesanddistfolders (runs each package's clean script)
Docs
The docs are built with NextJS and
MDX. The docs are located in the apps/docs folder.
To run the docs locally, run pnpm dev from the root of the project. This will
run the dev script defined in the root package.json:
pnpm devVersioning & Publishing Packages
This example uses Changesets to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediately.
You'll need to create an NPM_TOKEN and GITHUB_TOKEN and add it to your
GitHub repository settings to enable access to npm. It's also worth installing
the Changesets bot on your repository.
Generating the Changelog
To generate your changelog, run pnpm changeset locally:
- Which packages would you like to include? – This shows which packages and
changed and which have remained the same. By default, no packages are
included. Press
spaceto select the packages you want to include in thechangeset. - Which packages should have a major bump? – Press
spaceto select the packages you want to bump versions for. - If doing the first major version, confirm you want to release.
- Write a summary for the changes.
- Confirm the changeset looks as expected.
- A new Markdown file will be created in the
changesetfolder with the summary and a list of the packages included.
Releasing
When you push your code to GitHub, the
GitHub Action will run the release
script defined in the root package.json:
turbo run build --ignore=docs^... && changeset publish