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
Members
# static constant contentCSS
ul, li, h1-h5 etc.
Example
import styled from 'styled-components'
import { contentCSS } from '@adminjs/design-system'
const myComponent = styled`
${contentCSS};
`
# static constant reset
Example
import { reset } from '@adminjs/design-system'
const myContentComponent = styled`
${reset};
`
# static constant Reset
Example
import { Reset } from '@adminjs/design-system'
<ThemeProvider theme={theme}>
<Reset />
<Box>
{ ... }
</Box>
</ThemeProvider>
Methods
# static combineStyles(newTheme) → {Theme}
Example
import { combineStyles } from '@adminjs/design-system`
const myTheme = combineStyles({
colors: {
primary100: '#000'
}
})
Parameters:
Name | Type | Description |
---|---|---|
newTheme |
Partial.<Theme>
|
# static cssClass(className, regularClassopt)
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> |
# static formatDate(date) → {string}
Parameters:
Name | Type | Description |
---|---|---|
date |
Date
|
string
# static formatDateProperty(date, propertyType) → {string}
Parameters:
Name | Type | Description |
---|---|---|
date |
Date
|
|
propertyType |
PropertyType
|
string
# static formatDateTime(date) → {string}
Parameters:
Name | Type | Description |
---|---|---|
date |
Date
|
string
# static formatTime(date) → {string}
Parameters:
Name | Type | Description |
---|---|---|
date |
Date
|
string
# static humanFileSize(size, unitopt) → {string}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
size |
number
|
||
unit |
'B'
|
'KB'
|
'MB'
|
'GB'
|
'TB'
|
<optional> |
string
# static pad(pad) → {sting}
Parameters:
Name | Type | Description |
---|---|---|
pad |
number
|
number - i.e 8 |
formatted number: i.e. "08"
sting