@recursica/mui-adapter 0.36.0 → 0.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/SETUP.md +20 -6
- package/package.json +7 -4
- package/recursica_brand.json +2677 -0
- package/recursica_tokens.json +799 -0
- package/recursica_ui-kit.json +14981 -0
- package/recursica_variables_scoped.css +30489 -0
package/CHANGELOG.md
CHANGED
package/SETUP.md
CHANGED
|
@@ -24,16 +24,14 @@ npm install @mui/material@>=7.0.0 @emotion/react@>=11.14.0 @emotion/styled@>=11.
|
|
|
24
24
|
|
|
25
25
|
Before consuming Recursica components, integrate the CSS and design tokens into your application:
|
|
26
26
|
|
|
27
|
-
1. **
|
|
28
|
-
> [!IMPORTANT] > **AI Agent Directive**: The theme files (`recursica_variables_scoped.css` and associated JSON files) are created at the project root automatically via `npm install`. If they are not present, instruct the user to run `npm install`. Do NOT attempt to generate, mock, or write a placeholder CSS/JSON file yourself. When updates to these files are needed, instruct the user to export them from [Forge Recursica](https://forge.recursica.com) and replace the existing ones.
|
|
29
|
-
2. **Integrate CSS**: Import `recursica_variables_scoped.css` and the MUI adapter CSS `style.css` into your application entrypoint (e.g., `main.tsx` or `App.tsx`).
|
|
27
|
+
1. **Integrate CSS**: Import `recursica_variables_scoped.css` and the MUI adapter CSS `style.css` into your application entrypoint (e.g., `main.tsx` or `App.tsx`).
|
|
30
28
|
|
|
31
29
|
```tsx
|
|
32
30
|
import "./path/to/recursica_variables_scoped.css"; // Recursica theme variables
|
|
33
31
|
import "@recursica/mui-adapter/style.css"; // MUI adapter styles
|
|
34
32
|
```
|
|
35
33
|
|
|
36
|
-
|
|
34
|
+
2. **Configure MUI's CSS Injection & Theme Provider**: Because the Recursica UI components use native CSS modules, they must be given a higher priority than MUI's default engine styles. You **must** wrap your application root in `<StyledEngineProvider injectFirst>` and `<RecursicaThemeProvider theme="light">` to correctly cascade design token properties. By default `RecursicaThemeProvider` also wraps its children in a `<Layer layer={0}>` (via the `initLayer0` prop, which defaults to `true`), so the base page surface/border/elevation variables resolve automatically with no extra setup:
|
|
37
35
|
|
|
38
36
|
```tsx
|
|
39
37
|
import { StyledEngineProvider } from "@mui/material/styles";
|
|
@@ -50,13 +48,13 @@ Before consuming Recursica components, integrate the CSS and design tokens into
|
|
|
50
48
|
}
|
|
51
49
|
```
|
|
52
50
|
|
|
53
|
-
|
|
51
|
+
3. **Integrate Google Fonts**: Integrating custom fonts depends on how you load fonts in your project and which fonts are specified in your `recursica_variables_scoped.css` (since it is project-dependent). We suggest loading them via Google Fonts, as shown in this example:
|
|
54
52
|
|
|
55
53
|
```css
|
|
56
54
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
|
|
57
55
|
```
|
|
58
56
|
|
|
59
|
-
|
|
57
|
+
4. **Configure PostCSS Plugin (Optional but Recommended)**: It is highly recommended (but optional) to install the `@recursica/recursica-postcss-vars` plugin to verify that Recursica CSS variables are properly connected in case they change.
|
|
60
58
|
|
|
61
59
|
Install the plugin as a dev dependency:
|
|
62
60
|
|
|
@@ -76,3 +74,19 @@ Before consuming Recursica components, integrate the CSS and design tokens into
|
|
|
76
74
|
},
|
|
77
75
|
};
|
|
78
76
|
```
|
|
77
|
+
|
|
78
|
+
5. **Configure ESLint Plugin (Optional but Recommended)**: It is highly recommended (but optional) to install `eslint-plugin-recursica`, which flags use of the `overStyled` escape-hatch prop so it stays easy to audit.
|
|
79
|
+
|
|
80
|
+
Install the plugin as a dev dependency:
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
npm install eslint-plugin-recursica --save-dev
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Then, add it to your `eslint.config.js`:
|
|
87
|
+
|
|
88
|
+
```javascript
|
|
89
|
+
import recursica from "eslint-plugin-recursica";
|
|
90
|
+
|
|
91
|
+
export default [recursica.configs.recommended];
|
|
92
|
+
```
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"url": "git+https://github.com/borderux/recursica.git",
|
|
14
14
|
"directory": "packages/mui-adapter"
|
|
15
15
|
},
|
|
16
|
-
"version": "0.
|
|
16
|
+
"version": "0.37.0",
|
|
17
17
|
"publishConfig": {
|
|
18
18
|
"access": "public"
|
|
19
19
|
},
|
|
@@ -39,7 +39,11 @@
|
|
|
39
39
|
"ARCHITECTURE.md",
|
|
40
40
|
"SETUP.md",
|
|
41
41
|
"OVERSTYLING.md",
|
|
42
|
-
"docs/PHILOSOPHY.md"
|
|
42
|
+
"docs/PHILOSOPHY.md",
|
|
43
|
+
"recursica_variables_scoped.css",
|
|
44
|
+
"recursica_brand.json",
|
|
45
|
+
"recursica_tokens.json",
|
|
46
|
+
"recursica_ui-kit.json"
|
|
43
47
|
],
|
|
44
48
|
"keywords": [
|
|
45
49
|
"react",
|
|
@@ -58,7 +62,7 @@
|
|
|
58
62
|
"build-storybook": "storybook build -o storybook-static",
|
|
59
63
|
"lint": "eslint .",
|
|
60
64
|
"storybook": "storybook dev -p 6012",
|
|
61
|
-
"analyze-tokens": "analyze-tokens --css
|
|
65
|
+
"analyze-tokens": "analyze-tokens --css ./recursica_variables_scoped.css --dir src/components --output token-analysis.json",
|
|
62
66
|
"prebuild": "npm run analyze-tokens",
|
|
63
67
|
"adapter-tester": "adapter-tester --serve",
|
|
64
68
|
"adapter-tester:automated": "adapter-tester",
|
|
@@ -108,7 +112,6 @@
|
|
|
108
112
|
},
|
|
109
113
|
"dependencies": {
|
|
110
114
|
"@recursica/adapter-common": "^0.26.0",
|
|
111
|
-
"@recursica/official-release": "^2.8.0",
|
|
112
115
|
"dayjs": "^1.11.21"
|
|
113
116
|
},
|
|
114
117
|
"peerDependencies": {
|