Module

@admin-bro/design-system

This package consist of all DesignSystem components from AdminBro so you can use all of them outside the admin-bro core.

Installation outside the AdminBro

yarn add styled-components @admin-bro/design-system

Optionally, if you use typescript, you might want to install types for styled-components

yarn add --dev @types/styled-components

Design System needs a theme so in order to use it you have to use ThemeProvider from styled-components like this:

import { ThemeProvider } from 'styled-components'

// theme is the default theme, which you can alter
import { theme, Button, Box, Icon } from '@admin-bro/design-system'

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box variant="grey">
        <Button><Icon icon="Add" />Click Me</Button>
        <Button variant='primary' ml="xl">I am important</Button>
      </Box>
    </ThemeProvider>
  );
}

export default App;

Changing theme

Design System provides you with the default theme. It contains all the parameters like paddings, colors, font sizes etc. For the list of all available parameters take a look at the Theme spec.

But nothing stands in a way for you to change the default theme. In order to do that you can use combineStyles method:

import { combineStyles } from '@admin-bro/design-system`

const myTheme = combineStyles({
  colors: {
    primary100: '#000'
  }
})

//....
<ThemeProvider theme={myTheme}>
//....

Changing particular components

Sometimes you might want to change the look and feel of a particular component - not the entire theme. You can achieve that with styled method:

import { Button } from '@admin-bro/design-system'
import styled from 'styled-components'

const MyRoundedButton = styled(Button)`
  border-radius: 10px;
`

and then you can use it like a normal button component:

<MyRoundedButton variant="primary">Rounded I am</MyRoundedButton>

Components

For the list off all the components and their documentation go to adminbro.com

Bundled packages

This npm package comes with the bundled versions as well. You can find them under:

  • node_modules/@admin-bro/design-system/bundle.development.js
  • node_modules/@admin-bro/design-system/bundle.production.js (minified)

(they can also be bundled by using bundle script: yarn bundle or NODE_ENV=production yarn bundle)

In order to use them you will have to host them (put to your 'public' folder) and then put them into the HEAD of your page:

<head>
<!-- ... -->
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.1.1/styled-components.js"></script>
<script crossorigin src="/bundle.development.js"></script>
<!-- ... -->
</head>

Contribute

If you find any UI errors - feel free to create a PR.

Storybook

Inside the repo there is a storybook folder containing all the stories. In order to run it go inside and:

yarn install
yarn storybook

View Source admin-bro-design-system/src/index.ts, line 2

Methods

# static combineStyles(newTheme) → {Theme}

Applies new styles to the default theme

Parameters:
Name Type Description
newTheme Partial.<Theme>

View Source admin-bro-design-system/src/utils/combine-styles.ts, line 31

Theme

# static formatDate(date) → {string}

Formats date to YYYY-MM-DD

Parameters:
Name Type Description
date Date

View Source admin-bro-design-system/src/utils/date-utils.ts, line 16

string

# static formatDateProperty(date, propertyType) → {string}

Based on the property type formats date to either YYYY-MM-DD HH:mm or YYYY-MM-DD

Parameters:
Name Type Description
date Date
propertyType PropertyType

View Source admin-bro-design-system/src/utils/date-utils.ts, line 41

string

# static formatDateTime(date) → {string}

Formats date to YYYY-MM-DD HH:mm

Parameters:
Name Type Description
date Date

View Source admin-bro-design-system/src/utils/date-utils.ts, line 32

string

# static formatTime(date) → {string}

Formats date to HH:mm

Parameters:
Name Type Description
date Date

View Source admin-bro-design-system/src/utils/date-utils.ts, line 24

string

# static pad(pad) → {sting}

adds leading 0 to the number when it is lower than 10

Parameters:
Name Type Description
pad number

number - i.e 8

View Source admin-bro-design-system/src/utils/date-utils.ts, line 8

formatted number: i.e. "08"

sting