From 784b10c9834c6304ea57bc55dafebbeb5c88b1e2 Mon Sep 17 00:00:00 2001 From: lfernando Date: Sun, 20 Oct 2024 14:21:57 -0600 Subject: [PATCH 1/4] added publish config --- libs/m3/package.json | 5 ++++- package.json | 6 ++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/libs/m3/package.json b/libs/m3/package.json index 035cfe7..327284d 100644 --- a/libs/m3/package.json +++ b/libs/m3/package.json @@ -1,6 +1,6 @@ { "name": "@react-m3/m3", - "version": "0.0.1", + "version": "0.0.0-pre-alpha1", "main": "./index.js", "types": "./index.d.ts", "exports": { @@ -8,5 +8,8 @@ "import": "./index.mjs", "require": "./index.js" } + }, + "publishConfig": { + "access": "public" } } diff --git a/package.json b/package.json index c0a5032..f8b7d6b 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,11 @@ "build:m3": "npx nx build m3", "test:m3": "npx nx test m3", - "lint:m3": "npx nx lint m3" + "lint:m3": "npx nx lint m3", + + "publish": "npm publish --access public" }, - "private": true, + "private": false, "dependencies": { "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", From 5c5062f0310b226b37cf13389a48191817e0009c Mon Sep 17 00:00:00 2001 From: lfernando Date: Sun, 20 Oct 2024 14:31:15 -0600 Subject: [PATCH 2/4] updated README.md --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d6e40fb..47020d0 100644 --- a/README.md +++ b/README.md @@ -2,5 +2,10 @@ > This project is an extension from the original repository created by [ZakAlbert](https://github.com/ZakAlbert) -This project has an npm library for [Material 3](https://m3.material.io/) theme, so you can add to your project and play-around this theme +This project has an [npm library](https://www.npmjs.com/package/@react-m3/m3) for [Material 3](https://m3.material.io/) theme, so you can add to your project and play-around this theme created on the top of `@mui/material`. + + +```shell +npm i @react-m3/m3 +``` From 61c2a79a1a96e1240c1c0bb1e2f9fcdccc5a041e Mon Sep 17 00:00:00 2001 From: lfernando Date: Sun, 20 Oct 2024 14:45:58 -0600 Subject: [PATCH 3/4] updated common version --- libs/m3/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/m3/package.json b/libs/m3/package.json index 327284d..ba4b02c 100644 --- a/libs/m3/package.json +++ b/libs/m3/package.json @@ -1,6 +1,6 @@ { "name": "@react-m3/m3", - "version": "0.0.0-pre-alpha1", + "version": "0.0.0-pre-alpha.1", "main": "./index.js", "types": "./index.d.ts", "exports": { From 86fbec606b1d25c47944a5473778802786cfae32 Mon Sep 17 00:00:00 2001 From: lfernando Date: Sun, 20 Oct 2024 16:32:21 -0600 Subject: [PATCH 4/4] updates read me --- README.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 47020d0..d252e7c 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,37 @@ This project has an [npm library](https://www.npmjs.com/package/@react-m3/m3) for [Material 3](https://m3.material.io/) theme, so you can add to your project and play-around this theme created on the top of `@mui/material`. - ```shell npm i @react-m3/m3 ``` + +## Apply this custom theme in your project + +```typescript jsx +import { useMemo } from 'react'; +import { CssBaseline, ThemeProvider } from '@mui/material'; +import { getPalette, getTheme } from '@react-m3/m3'; + +const color = "#6750a4"; + +export const MyCustomTheme = () => { + + const m3Theme = useMemo(() => { + const palette = getPalette(color); + return getTheme('light', palette); + }, [color]); + + return ( + + + {/* Call your app component here */} + + + ); +} +``` + +> [!NOTE] +> Open the next [StackBlitz Example.](https://stackblitz.com/edit/react-m3-theme?file=src%2FApp.tsx) + +