Skip to content

Commit

Permalink
docs: update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheton
cheton committed Nov 23, 2024
1 parent 3696104 commit 3541cce
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 94 deletions.
8 changes: 3 additions & 5 deletions packages/react-docs/pages/components/color-style/index.page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,11 @@ To override default color style, you can create a color style object in accordan

```jsx disabled
import { Box, TonicProvider, colorStyle } from '@tonic-ui/react';
import { merge } from '@tonic-ui/utils';
import React from 'react';

const customColorStyle = {
...colorStyle,
const customColorStyle = merge(colorStyle, {
dark: {
...colorStyle.dark,
risk: {
high: 'red:50',
medium: 'yellow:50',
Expand All @@ -104,7 +103,6 @@ const customColorStyle = {
},
},
light: {
...colorStyle.light,
risk: {
high: 'red:60',
medium: 'yellow:50',
Expand All @@ -119,7 +117,7 @@ const customColorStyle = {
info: 'gray:50',
},
},
};
});

const App = () => (
<TonicProvider
Expand Down
111 changes: 54 additions & 57 deletions packages/react-docs/pages/getting-started/usage/index.page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,41 +13,40 @@ import React from 'react';
import {
Box,
TonicProvider,
colorStyle, // [optional] Required only for customizing color styles
createTheme,
theme, // [optional] Required only for customizing the theme
colorStyle, // The default color style object
createTheme, // The function for theme customization
theme, // The default theme configuration
} from '@tonic-ui/react';
import { useConst } from '@tonic-ui/react-hooks';

function App(props) {
const customTheme = useConst(() => createTheme(theme, {
components: {
// Set default props for specific components
//
// Example:
// ```
// 'ToastCloseButton': {
// defaultProps: {
// 'aria-label': 'Close toast',
// },
// },
// ```
},
config: {
// Enable CSS variables replacement
useCSSVariables: true,
},
}));
const customTheme = createTheme(theme, {
config: {
// Enable CSS variables replacement
useCSSVariables: true,
},
components: {
// Set default props for specific components
//
// Example:
// ```
// 'ToastCloseButton': {
// defaultProps: {
// 'aria-label': 'Close toast',
// },
// },
// ```
},
});

function App(props) {
return (
<TonicProvider
colorMode={{
defaultValue: 'dark', // One of: 'dark', 'light'
}}
colorStyle={{
defaultValue: colorStyle, // Custom color style
defaultValue: colorStyle, // optional
}}
theme={customTheme}
theme={customTheme} // optional
useCSSBaseline={true} // If `true`, apply CSS reset and base styles
>
<Box {...props} />
Expand All @@ -72,37 +71,36 @@ import {
useColorMode,
useTheme,
} from '@tonic-ui/react';
import { useConst } from '@tonic-ui/react-hooks';

function App(props) {
const customTheme = useConst(() => createTheme(theme, {
components: {
// Set default props for specific components
//
// Example:
// ```
// 'ToastCloseButton': {
// defaultProps: {
// 'aria-label': 'Close toast',
// },
// },
// ```
},
config: {
// Enable CSS variables replacement
useCSSVariables: true,
},
}));
const customTheme = createTheme(theme, {
config: {
// Enable CSS variables replacement
useCSSVariables: true,
},
components: {
// Set default props for specific components
//
// Example:
// ```
// 'ToastCloseButton': {
// defaultProps: {
// 'aria-label': 'Close toast',
// },
// },
// ```
},
});

function App(props) {
return (
<TonicProvider
colorMode={{
defaultValue: 'dark', // One of: 'dark', 'light'
}}
colorStyle={{
defaultValue: colorStyle, // Custom color style
defaultValue: colorStyle, // optional
}}
theme={customTheme}
theme={customTheme} // optional
useCSSBaseline={true} // If `true`, apply CSS reset and base styles
>
<ToastManager
Expand Down Expand Up @@ -217,13 +215,11 @@ Tonic UI supports converting theme tokens defined in the theme to CSS variables.

```jsx
<TonicProvider
theme={{
...theme,
theme={merge(theme, {
config: {
...theme?.config,
useCSSVariables: true,
},
}}
})}
/>
```

Expand Down Expand Up @@ -259,12 +255,11 @@ To override default color style, you can create a color style object according t

```js
import { colorStyle } from '@tonic-ui/react';
import { merge } from '@tonic-ui/utils';

// Let's say you want to define color style for your components
const customColorStyle = {
...colorStyle,
const customColorStyle = merge(colorStyle, {
dark: {
...colorStyle.dark,
risk: {
high: 'red:50',
medium: 'yellow:50',
Expand All @@ -280,7 +275,6 @@ const customColorStyle = {
},
},
light: {
...colorStyle.light,
risk: {
high: 'red:60',
medium: 'yellow:50',
Expand All @@ -295,7 +289,7 @@ const customColorStyle = {
info: 'gray:50',
},
},
};
});
```

#### 2. Setting up the provider
Expand Down Expand Up @@ -332,7 +326,10 @@ Optionally, you can extend the theme object to override the defaults with custom
Override the theme object and pass it to the `<ThemeProvider>` component.
```js
import { createTheme, theme } from '@tonic-ui/react';
import {
createTheme,
theme,
} from '@tonic-ui/react';

// Let's say you want to add more colors
const customTheme = createTheme(theme, {
Expand Down
18 changes: 6 additions & 12 deletions packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,10 @@ To use previously defined `severity` and `chart` colors, you need to pass a cust
```jsx disabled
import React from 'react';
import { Box, TonicProvider, colorStyle } from '@tonic-ui/react';
import { merge } from '@tonic-ui/utils';

const customColorStyle = {
...colorStyle,
const customColorStyle = merge(colorStyle, {
dark: {
...colorStyle.dark,

// deprecated
severity: {
critical: 'magenta:60',
Expand Down Expand Up @@ -77,8 +75,6 @@ const customColorStyle = {
},
},
light: {
...colorStyle.light,

// deprecated
severity: {
critical: 'magenta:60',
Expand Down Expand Up @@ -109,7 +105,7 @@ const customColorStyle = {
},
},
},
};
});

const App = (props) => (
<TonicProvider
Expand All @@ -128,12 +124,11 @@ Here is the recommended configuration for utilizing the `risk` and `severity` co

```js
import { colorStyle } from '@tonic-ui/react';
import { merge } from '@tonic-ui/utils';

// Let's say you want to define color style for your components
const customColorStyle = {
...colorStyle,
const customColorStyle = merge(colorStyle, {
dark: {
...colorStyle.dark,
risk: {
high: 'red:50',
medium: 'yellow:50',
Expand All @@ -149,7 +144,6 @@ const customColorStyle = {
},
},
light: {
...colorStyle.light,
risk: {
high: 'red:60',
medium: 'yellow:50',
Expand All @@ -164,7 +158,7 @@ const customColorStyle = {
info: 'gray:50',
},
},
};
});
```

### Date Pickers
Expand Down
39 changes: 19 additions & 20 deletions packages/react-docs/sandbox/create-react-app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import {
useColorStyle,
useTheme,
} from '@tonic-ui/react';
import { useConst } from '@tonic-ui/react-hooks';
import { merge } from '@tonic-ui/utils';
import * as React from 'react';
import ReactDOM from 'react-dom/client';
Expand Down Expand Up @@ -75,26 +74,26 @@ const customColorStyle = merge(colorStyle, {
},
});
const Root = (props) => {
const customTheme = useConst(() => createTheme(theme, {
components: {
// Set default props for specific components
//
// Example:
// \`\`\`
// 'ToastCloseButton': {
// defaultProps: {
// 'aria-label': 'Close toast',
// },
// },
// \`\`\`
},
config: {
// Enable CSS variables replacement
useCSSVariables: true,
},
}));
const customTheme = createTheme(theme, {
config: {
// Enable CSS variables replacement
useCSSVariables: true,
},
components: {
// Set default props for specific components
//
// Example:
// \`\`\`
// 'ToastCloseButton': {
// defaultProps: {
// 'aria-label': 'Close toast',
// },
// },
// \`\`\`
},
});
const Root = (props) => {
return (
<TonicProvider
colorMode={{
Expand Down

0 comments on commit 3541cce

Please sign in to comment.