This package consists of all DesignSystem components from AdminJS so you can use all of them outside the adminjs core.

Installation outside the AdminJS

yarn add styled-components @adminjs/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 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, Reset } from '@adminjs/design-system'
function App() {
return (
<ThemeProvider theme={theme}>
<Reset />
<Box variant="grey">
<Button><Icon icon="Add" />Click Me</Button>
<Button variant='primary' ml="xl">I am important</Button>
</Box>
</ThemeProvider>
);
}
export default App;

Reset resets all the default browser styles.

Changing the theme

The 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. To do that you can use the combineStyles method:

import { combineStyles } from '@adminjs/design-system`
const myTheme = combineStyles({
colors: {
primary100: '#000'
}
})
//....
<ThemeProvider theme={myTheme}>
//....

Global style and the font

The main font for the design system is "Roboto". The Default version in OS might not have all the font-weights. That is why you should import it in your head:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"></link>

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 the styled method:

import { Button } from '@adminjs/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

All the components were placed in the sidebar. They are divided to Atoms, Molecules and Organisms.

Bundled packages

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

node_modules/@adminjs/design-system/bundle.development.js
node_modules/@adminjs/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/react@16/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 repository, there is a storybook folder containing all the stories. To run it go inside and:

yarn install
yarn storybook

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

Members

# static constant contentCSS

Gives you the default styles for all "content" elements like:

ul, li, h1-h5 etc.

Example

import styled from 'styled-components'
import { contentCSS } from '@adminjs/design-system'

const myComponent = styled`
  ${contentCSS};
`

View Source adminjs-design-system/src/utils/content-styles.ts, line 22

# static constant reset

Resets css styles which can be applied to element created by styled-component

Example

import { reset } from '@adminjs/design-system'

const myContentComponent = styled`
  ${reset};
`

View Source adminjs-design-system/src/utils/reset.styles.ts, line 19

# static constant Reset

Resets css component which should be applied to the top of the html

Example

import { Reset } from '@adminjs/design-system'

<ThemeProvider theme={theme}>
  <Reset />
  <Box>
    { ... }
  </Box>
</ThemeProvider>

View Source adminjs-design-system/src/utils/reset.styles.ts, line 91

Methods

# static combineStyles(newTheme) → {Theme}

Applies new styles to the default theme

Example

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

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

Parameters:

Name	Type	Description
`newTheme`	`Partial.<Theme>`

View Source adminjs-design-system/src/utils/combine-styles.ts, line 43

Returns:

Type: Theme

# static cssClass(className, regularClassopt)

Generates class name for given component. It is used by AdminJS core to append namespaced

classes.

example

import { cssClass } from '@adminjs/design-system'

cssClass('Icon', 'my-regular-class-name')
// returns: 'adminjs_Icon my-regular-class-name'

Parameters:

Name	Type	Attributes	Description
`className`	`string` \| `Array.<string>`
`regularClass`	`string`	<optional>

View Source adminjs-design-system/src/utils/css-class.ts, line 22

# static formatDate(date) → {string}

Formats date to YYYY-MM-DD

Parameters:

Name	Type	Description
`date`	`Date`

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

Returns:

Type: 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 adminjs-design-system/src/utils/date-utils.ts, line 41

Returns:

Type: string

# static formatDateTime(date) → {string}

Formats date to YYYY-MM-DD HH:mm

Parameters:

Name	Type	Description
`date`	`Date`

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

Returns:

Type: string

# static formatTime(date) → {string}

Formats date to HH:mm

Parameters:

Name	Type	Description
`date`	`Date`

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

Returns:

Type: string

# static humanFileSize(size, unitopt) → {string}

Changes size in bytes to string. If unit is not provided - tries to find the best match.

Parameters:

Name	Type	Attributes	Description
`size`	`number`
`unit`	`'B'` \| `'KB'` \| `'MB'` \| `'GB'` \| `'TB'`	<optional>

View Source adminjs-design-system/src/utils/human-file-size.ts, line 12

Returns:

Type: 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 adminjs-design-system/src/utils/date-utils.ts, line 8

Returns:

formatted number: i.e. "08"

Type: sting