You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 7, 2024. It is now read-only.
This guide is a work in progress to enable you to migrate your application from Contember v1.1 to v1.2.0 before the final release.
7
+
:::
8
+
9
+
1.2.0 is a major release of the framework. It contains some pretty exciting features, but also a few breaking changes to make way for the future. This guide will help you upgrade your application to 1.2.0 and take advantage of the new features.
10
+
11
+
## Bump versions of `@contember/*` packages and run `npm install`.
12
+
13
+
```diff title="package.json"
14
+
{
15
+
"scripts": {
16
+
- "contember": "docker-compose run contember-cli",
17
+
+ "contember": "docker-compose run --rm contember-cli",
18
+
...
19
+
},
20
+
"devDependencies": {
21
+
- "@contember/schema": "1.2.1",
22
+
+ "@contember/schema": "1.3.0-rc.1",
23
+
- "@contember/schema-definition": "1.2.1",
24
+
+ "@contember/schema-definition": "1.3.0-rc.1",
25
+
- "@contember/admin": "^1.0.0",
26
+
+ "@contember/admin": "^1.2.0-rc.14",
27
+
...
28
+
- "@types/react": "^17",
29
+
+ "@types/react": "^18",
30
+
+ "@types/react-dom": "^18",
31
+
- "react": "^17",
32
+
+ "react": "^18",
33
+
- "react-dom": "^17",
34
+
+ "react-dom": "^18",
35
+
- "typescript": "^4.5",
36
+
+ "typescript": "^5.0",
37
+
- "vite": "^2.7"
38
+
+ "vite": "^4"
39
+
}
40
+
}
41
+
```
42
+
43
+
## Add support for React 17 JSX transform
44
+
45
+
Use React 17+ `react-jsx` transform instead of `react` in `tsconfig.json`:
46
+
47
+
```diff title="tsconfig.json"
48
+
{
49
+
"compilerOptions": {
50
+
...
51
+
- "jsx": "react",
52
+
+ "jsx": "react-jsx",
53
+
...
54
+
```
55
+
56
+
Now you can remove all unnecessary `React` namespace imports from your codebase:
57
+
58
+
```diff
59
+
-import * as React from 'react'
60
+
```
61
+
62
+
## Add support for React 18
63
+
64
+
```diff title="admin/index.tsx"
65
+
@@ -1,6 +1,6 @@
66
+
-import * as React from 'react'
67
+
-import { ApplicationEntrypoint, Pages, runReactApp } from '@contember/admin'
68
+
+import { ApplicationEntrypoint, PageModule, Pages, runReactApp } from '@contember/admin'
With Contember you can change **theme** and **scheme** independently. Contember combine theme for content and controls with light and dark scheme resulting in many flexible combinations. By default, the content is themed with **default** theme and controls in **primary** theme.
16
15
@@ -20,16 +19,16 @@ With Contember you can change **theme** and **scheme** independently. Contember
20
19
## Color themes
21
20
22
21
**Contember supports 3 color palettes (themes) to suit your branding needs:**
<ThemePreviewheading="Light scheme with success theme for content and positive for primary button and content"scheme="light"theme="success"themeControls="positive" />
63
67
<ThemePreviewheading="Dark scheme with success theme for content and positive for primary button and content"scheme="dark"theme="success"themeControls="positive" />
@@ -71,82 +75,49 @@ To generate class names responsible for changin color theme use `toSchemeClass(c
71
75
<ThemePreviewheading="Dark scheme with danger themed primary button on primary themed content"scheme="dark"theme="primary"themeControls="danger"controls />
72
76
<ThemePreviewheading="System scheme with danger themed primary button on primary themed content"scheme="system"theme="primary"themeControls="danger"controls />
73
77
</Stack>
74
-
75
-
## Theming the Layout
76
-
77
-
With `Layout` component you are already able to set theme and scheme on 3 main parts of your admin application:
78
-
79
-
1. The whole app, including the side bar with navigation
80
-
2. Page content (applied by the `PageLayout` component)
81
-
3. Title bar of the page content (applied by the `PageLayout` component)
82
-
83
-
### Scheme props
84
-
85
-
Prop | Type | Description
86
-
--------------|----------|------------
87
-
`scheme` | [`Scheme`](#appendix-available-theme-and-scheme-values) | Sets the scheme of all layout parts
88
-
`pageScheme` | [`Scheme`](#appendix-available-theme-and-scheme-values) | Sets the page scheme of the page part of the layout
89
-
`titleScheme` | [`Scheme`](#appendix-available-theme-and-scheme-values) | Sets the scheme of the page title
90
-
91
-
### Theme props
92
-
93
-
You can fine-tune layout using only the props to target specific regions of the layout, also you can target the content of the controls independently. See the table for the list of affected regions by the props.
94
-
95
-
Prop | Type | Lyout content | Layout controls | Page content | Page controls | Page title content | Page title controls |
scheme="dark" // The full layout is in dark mode and ignore the system settings
121
-
// pageScheme="system" // Uncomment to allow page section to adapt to system mode
122
-
// titleScheme="dark" // Uncomment to set page title in dark mode and ignore the system settings
123
-
theme="default" // Both content and controls are colorless...
124
-
pageTheme="secondary" // ... however the page theme is in secondary theme...
125
-
titleTheme="secondary" // ... and the title theme is secondary too.
126
-
// themeContent="tertiary" // Uncomment to override theme prop of the content
127
-
// themeControls="secondary" // Uncomment to override theme prop of the control components
128
-
// pageThemeContent="success" // turns page contents green
129
-
// pageThemeControls="danger" // turns controls red
130
-
// titleThemeContent="tertiary" // turns page title contents violet
131
-
// titleThemeControls="primary" // // turns page title controls to primary blue
132
-
>
133
-
<LayoutPage title="Hello world!">
134
-
<Box>
135
-
<FieldContainer label="Your email">
136
-
<TextInput name="email" />
137
-
</FieldContainer>
138
-
<Spacer />
139
-
<Button distinction="primary">Continue</Button>
78
+
</StyleProvider>
79
+
80
+
## Theming interface
81
+
82
+
In Contember you need to use `ColorSchemeProvider` to set the color schema for its children. The `ColorSchemeProvider` accepts `scheme` prop which can be either `light`, `dark` or `system`.
83
+
84
+
Content and controls theme can be set using `contentThemeClassName` and `controlsThemeClassName` helper functions. These functions accept `theme` argument which can be either `primary`, `secondary`, `tertiary`, `success`, `warn` or `danger`.
<Buttondistinction="primary"intent={themeControls}>I am important!</Button>
110
+
<Buttondistinction="toned">Toned button</Button>
111
+
<Buttondisabled>Disabled</Button>
140
112
</Box>
141
-
</LayoutPage>
142
-
</Layout>`}
143
-
/>
113
+
</ColorSchemeProvider>
114
+
)
115
+
}
116
+
```
144
117
145
118
## Appendix: Available theme and scheme values
146
119
147
120
Type | Values
148
121
-----|--------
149
-
Scheme | `"system"`, `"light"`, `"light-above"`, `"light-below"`, `"dark"`, `"dark-above"` or `"dark-below"`
150
-
Intent | `"primary"`, `"secondary"`, `"tertiary"`, `"positive"`, `"success"`, `"warn"` or `"danger"`
151
-
152
-
_**Note:** Internally, Contember uses the `*-above` schema variants to make compoents stand out (lighter) and `*-below` schema variants to push them a litthe to the back (darker). We don't endorse nor discourage you to use these in your layouts._
0 commit comments