Mark Sinclair
52ced9d3ad
https://github.com/jantimon/favicons-webpack-plugin/issues/288 indicates that generating from an SVG sometimes freezes at 92%. This behaviour is seen on Windows wallet builds in CI.
99 lines
3.5 KiB
Markdown
99 lines
3.5 KiB
Markdown
# Example with React + Typescript + Webpack 5 + MUI
|
|
|
|
An example of using default Webpack and Typescript settings with React and MUI, including theming.
|
|
|
|
You can use this example as a seed for a new project.
|
|
|
|
Remember to build the dependency packages from the root of this repo by running:
|
|
|
|
```
|
|
yarn
|
|
yarn build
|
|
```
|
|
|
|
If you need to make changes to the dependency packages, you can run `yarn watch` in that package to watch for chagnes and build them. This project will pick up the changes in the built package and hot-reload / recompile.
|
|
|
|
## Features
|
|
|
|
### Yarn workspaces
|
|
|
|
Packages from `ts-packages` are shared using Yarn workspaces. Make sure you add you new project to [package.json](../../package.json) to use the shared packages.
|
|
|
|
> ⚠️ **Warning**: Yarn workspaces will share all dependencies between projects and works by falling back to parent directories until a `node_modules` directory is found. So be careful when messing around with `node_modules` and resolution, because unexpected things could happen - for example, if you do not run `yarn` from the root and you have a `node_modules` in a directory that is a parent of the directory where you checkout out this repository, that `node_modules` will be used for resolving packages 🙀.
|
|
|
|
### Typescript
|
|
|
|
Shared Typescript config is in [tsconfig.json](./tsconfig.json), with specific production settings in [tsconfig.prod.json](./tsconfig.prod.json) that:
|
|
|
|
- exclude Storybook stories and Jest tests
|
|
- do not output typing `*.d.ts` files
|
|
|
|
### Webpack
|
|
|
|
Inherit config for Webpack 5 with additional tweaks including:
|
|
|
|
- favicon generation from [favicon asset files](../../assets/favicon/favicon.png)
|
|
- asset handling (svg, png, fonts, css, etc)
|
|
- minification
|
|
|
|
The development settings include:
|
|
|
|
- `ts-loader` for quick transpilation
|
|
- threaded type checking using `tsc`
|
|
- hot reloading using `react-refresh`
|
|
|
|
### Storybook
|
|
|
|
Storybook is available in [@nymproject/react](../react-components/src/stories/Introduction.stories.mdx) and can be run using `yarn storybook`.
|
|
|
|
### MUI and theming
|
|
|
|
The [Nym theme](../mui-theme/src/theme/theme.ts) provides a theme provider that you can add as follows:
|
|
|
|
```typescript jsx
|
|
export const App: React.FC = () => (
|
|
<AppContextProvider>
|
|
<AppTheme>
|
|
<Content />
|
|
</AppTheme>
|
|
</AppContextProvider>
|
|
);
|
|
|
|
export const AppTheme: React.FC = ({ children }) => {
|
|
const { mode } = useAppContext();
|
|
|
|
return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
|
|
};
|
|
|
|
export const Content: React.FC = () => {
|
|
...
|
|
}
|
|
```
|
|
|
|
And augment typings for the Theme by adding [mui-theme.d.ts](./src/theme/mui-theme.d.ts):
|
|
|
|
```typescript
|
|
import { Theme, ThemeOptions, Palette, PaletteOptions } from '@mui/material/styles';
|
|
import { NymTheme, NymPaletteWithExtensions, NymPaletteWithExtensionsOptions } from '@nymproject/mui-theme';
|
|
|
|
declare module '@mui/material/styles' {
|
|
interface Theme extends NymTheme {}
|
|
interface ThemeOptions extends Partial<NymTheme> {}
|
|
interface Palette extends NymPaletteWithExtensions {}
|
|
interface PaletteOptions extends NymPaletteWithExtensionsOptions {}
|
|
}
|
|
```
|
|
|
|
Adding the above, means that any component now has the correct typings, for example, below the Nym palette interface is available for all MUI `Theme` instances with code completion for VSCode and IntelliJ:
|
|
|
|
```typescript jsx
|
|
import { Typography } from '@mui/material';
|
|
|
|
...
|
|
|
|
<Typography sx={{ color: (theme) => theme.palette.nym.networkExplorer.mixnodes.status.active }}>
|
|
The quick brown fox jumps over the white fence
|
|
</Typography>
|
|
|
|
```
|