@moser-inc/moser-labs-react 6.8.1 → 7.0.1

package/README.md

@@ -5,7 +5,7 @@ React components for the Moser Labs suite of applications. Build on top of [Prim
 ## Installation
 
 ```bash
-npm i primereact @moser-inc/moser-labs-react
+npm i primereact @moser-inc/moser-labs-react @moser-inc/moser-labs-themes
 ```
 
 ## Usage
@@ -14,23 +14,21 @@ npm i primereact @moser-inc/moser-labs-react
 
 Wrap your application with the `LabsProvider` component to provide the app name, theme and favicon urls, and other potential configuration:
 
+Note: passing the preset is currently on required and used for `@moser-inc/moser-labs-custom-elements`, but it will be used in the future when updating to PrimeReact 11+, so it's recommended to be included from the start.
+
 ```tsx
 // App.tsx
 import { LabsProvider } from '@moser-inc/moser-labs-react';
+import Labs from '@moser-inc/moser-labs-themes/labs';
 
 const FAVICONS = {
   dark: 'favicon-dark.svg',
   light: 'favicon-light.svg',
 };
 
-const THEMES = {
-  dark: 'theme-dark.css',
-  light: 'theme-light.css',
-};
-
 const App = () => {
   return (
-    <LabsProvider appName="My App" favicons={FAVICONS} themes={THEMES}>
+    <LabsProvider preset={Labs} appName="My App" favicons={FAVICONS}>
       {/* Your app components */}
     </LabsProvider>
   );
@@ -39,14 +37,7 @@ const App = () => {
 
 ### Styles
 
-Either load all component styles in your entry point, which may include unused styles:
-
-```tsx
-// main.tsx
-import '@moser-inc/moser-labs-react/style.css';
-```
-
-Or when using UnoCSS with a bundler like Vite, configure your content sources to include labs components to load only the styles that are used:
+Use UnoCSS with a bundler like Vite, configure your content sources to include labs components to load only the styles that are used:
 
 ```ts
 // uno.config.ts