- Install packages
pnpm install- Open Storybook
pnpm run storybook-
Create your personal access token. Your token has to have read:packages permission
-
Add .npmrc file in your project as follow
//npm.pkg.github.com/:_authToken=<YOUR_GITHUB_TOKEN>
@beeinventor:registry=https://npm.pkg.github.com
- Run
pnpm add @beeinventor/dasiot-react-component-lib- Add font into index.html <head> as below
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap"
/>- Setting Theme & Import Component
// index.tsx
import React from 'react';
import { ThemeProvider, CssBaseline, createTheme } from '@mui/material';
import {
theme as beeinventerTheme,
Button,
} from '@beeinventor/dasiot-react-component-lib';
const myTheme = createTheme({
...beeinventerTheme,
components: {
MuiCssBaseline: {
styleOverrides: {
body: {
backgroundColor: '#E5E5E5',
},
},
},
},
});
function App() {
return (
<div className="App">
<ThemeProvider theme={myTheme}>
<CssBaseline />
<Button variant="contained">Test</Button>
</ThemeProvider>
</div>
);
}
export default App;