@tealink/ui

React UI components implementing global design system with Material UI

Demo

https://tealink-ui.netlify.app/

Install dependencies

Make sure the following dependencies are installed

  "dependencies": {
    "styled-components": "^5.1.0",
    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "react-router-dom": "^5.1.2"
  },

Install lib package

npm install --save @tealink/ui

Install ui-generator package

npm install --save-dev @tealink/ui-generators

Add Theme to app.js

import { ThemeProvider } from '@tealink/ui'
import theme from './defaultTheme'

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  )
}

Add Layout as child to BrowserRouter and provide content

import { SidebarBottomContent, SidebarTopContent } from './components';
import { Layout } from '@tealink/ui'

function Routes() {
  return (
    <BrowserRouter>
      <Layout
        sidebarBottomContent={<SidebarBottomContent />}
        sidebarTopContent={<SidebarTopContent />}
        logoPath={`${process.env.PUBLIC_URL}/assets/img/default/logo.svg`}
      >
        <Switch>
          ...
        </Switch>
      </Layout>
    </BrowserRouter>
  );
}

Use generators for code scaffolding!

Generators are defined in https://gitlab.eu-1.deranged.dk/tealink/ui-generators and is a great way to create files faster in a consistent manner.

npm run g c

Development & Example

Run the dev enviroment:

npm install
npm start

cd example
npm install
npm start

The example targets the library source files automatically without needing to publish to see changes

Publish

By versioning the library, it will automatically be pushed to your remote branch. The library is published automatically to npm when merged to master.

npm version patch