This is our initial 1ui
component library. This will eventually become a published package, but right now we're developing it and running it from within the monorepo structure. We're importing this into our apps
such as Portal while we're building.
Once you've cloned the intuition-ts
monorepo you can run 1ui from the monorepo root. Install all packages from the monorepo root by running pnpm install
.
Once you add components to the component library you'll need to run pnpm --filter 1ui build
before they'll be ready for importing. The build is powered by Vite, so this is typically a quick process.
Once 1ui
successfully builds, you can import components into apps directly from the 1ui package:
import { Button, Label, Input } from '@0xintuition/1ui';
These components are fully type safe and have the styles/variants/etc. injected.
To create a new component in 1ui run the command pnpm 1ui:component:create
and follow the prompts.
We leverage the Shadcn/ui stack whenever possible:
- Shadcn/ui: Shadcn/ui Documentation
- Tailwind: Tailwind Documentation
- Radix: Radix Documentation
This package also contains a Storybook instance that is using the Vite builder.
Storybook runs on port 6006. You're able to run Storybook and Portal at the same time since they're on unique ports.
You can run Storybook with pnpm run --filter 1ui ui
. This opens a window with your default browser.
You can also run Storybook without opening in your default browser with pnpm run --filter 1ui ui --ci
-- this is helpful if you already have a tab open.
We follow semantic versioning (SemVer):
-
pnpm version:patch
- Bug fixes (0.0.X) -
pnpm version:minor
- New features (0.X.0) -
pnpm version:major
- Breaking changes (X.0.0) -
pnpm version:beta
- Pre-release versions (X.X.X-beta.0)
- Bump the version:
# For bug fixes
pnpm version:patch
# For new features
pnpm version:minor
# For breaking changes
pnpm version:major
# For beta releases
pnpm version:beta
- Verify package contents:
pnpm publish-dry
- Publish the package:
# For stable releases
pnpm publish-latest
# For beta/development releases
pnpm publish-next
- Always run
publish-dry
before publishing to verify package contents - Use
--tag next
for development/beta versions - Use
--tag latest
for production versions - The package will be published to npm as
@0xintuition/1ui
To test changes without publishing to npm, you can use the local registry (Verdaccio). This is useful for testing changes in other apps within the monorepo or in external projects.
Setup: Copy
.npmrc.example
from the root to.npmrc
to configure the local registry.
- Start the local registry:
pnpm nx local-registry
- Make changes to the package and build:
cd packages/1ui
pnpm build
- Publish to local registry:
npm publish --registry http://localhost:4873
- In your test app (e.g., apps/template), update the package version:
{
"dependencies": {
"@0xintuition/1ui": "^x.x.x" // Use the version you just published
}
}
- Install the updated package:
pnpm install
If you need to test in a project outside the monorepo:
# Create and set up test project
mkdir ~/1ui-test
cd ~/1ui-test
pnpm init
# Install dependencies
pnpm add @0xintuition/1ui --registry http://localhost:4873
pnpm add react react-dom @types/react typescript
# Create a test file (test.tsx)
echo 'import React from "react";
import { Button } from "@0xintuition/1ui";
export default function Test() {
return <Button>Test Button</Button>;
}' > test.tsx
# Verify types work
pnpm tsc test.tsx --noEmit
- The local registry persists packages in
tmp/local-registry/storage
- Clear storage by stopping and restarting the registry
- First-time publishing requires creating a user (any username/password works)
- The registry runs on port 4873 by default