@barso/ui
v0.6.3
Published
Barso UI
Readme
@barso/ui
A React component library.
Installation
To install the package, use:
npm i @barso/uiConfigure Next.js
In your next.config.js, add @primer/react and @barso/ui to transpilePackages:
// next.config.js
module.exports = {
transpilePackages: ['@primer/react', '@barso/ui'],
};Theme Setup
To configure theming, first import the global CSS file in your main application file:
// app/layout.js (App Router) or pages/_app.js (Pages Router)
import '@barso/ui/css';The library provides two properties for theme control:
colorMode: Sets a fixed theme, such as "dark" or "light", preventing automatic switching.defaultColorMode: Enables automatic switching based on the user’s preference (light/dark mode).
The usage of these properties depends on which Next.js router you are using:
App Router
In the App Router, wrap your app with PrimerRoot. This component creates the base structure for the <html>, so it also accepts the lang attribute. You can use either defaultColorMode (for automatic switching) or colorMode (for a fixed theme):
// app/layout.js
import { PrimerRoot } from '@barso/ui';
import '@barso/ui/css';
export default function Layout({ children }) {
return (
<PrimerRoot
lang="en"
defaultColorMode="dark" // Enables theme switching
// colorMode="dark" // Uses a fixed theme
>
{children}
</PrimerRoot>
);
}Pages Router
In Pages Router, you must add _document.js to ensure proper theme setup:
// pages/_document.js
export { Document as default } from '@barso/ui/document';In _app.js, you can use either AutoThemeProvider or ThemeProvider:
- If you want to use theme switching, wrap your app with
AutoThemeProviderand pass thedefaultColorModeproperty:
// pages/_app.js
import { AutoThemeProvider } from '@barso/ui';
import '@barso/ui/css';
export default function NextApp({ Component, pageProps }) {
return (
<AutoThemeProvider defaultColorMode="dark">
<Component {...pageProps} />
</AutoThemeProvider>
);
}- If you want to use a fixed theme, wrap your app with
ThemeProviderand pass thecolorModeproperty:
// pages/_app.js
import { ThemeProvider } from '@barso/ui';
import '@barso/ui/css';
export default function NextApp({ Component, pageProps }) {
return (
<ThemeProvider colorMode="dark">
<Component {...pageProps} />
</ThemeProvider>
);
}Note: Although
AutoThemeProvidersupports setting a fixed theme usingcolorMode, it is recommended to useThemeProviderinstead when a fixed theme is required. This ensures that the theme is applied immediately.
Configure Vitest
In vitest.config.js, set test.server.deps.inline to true:
// vitest.config.js
test.server.deps.inline: trueExamples
See examples in the examples directory.