@roll-network/design-system
v7.0.0
Published
Shared components for Roll applications
Downloads
121
Maintainers
Readme
@roll-network/design-system
Install
yarn add @roll-network/design-system
npx install-peerdeps @roll-network/design-system
Setup
Web
The web version of the package works out of the box.
Native
The package is ready for react-native
with a minimum amount of changes. You have to add an alias to your react-native application & it'll work smoothly.
// babel.config.js
module.exports = {
plugins: [
[
"module-resolver",
{
alias: {
"@roll-network/design-system": "@roll-network/design-system/dist/native/esm"
}
}
]
]
}
Usage
Wrap the root of your application with the theme provider.
import { TryrollProvider } from '@roll-network/design-system'
const App = ({ children }) => {
return (
<TryrollProvider>
{children}
</TryrollProvider>
)
}
Enjoy using the well-typed package available for ESM & CJS. 🥳
import { Text, useTheme } from '@roll-network/design-system'
const MyComponent = () => {
const theme = useTheme();
return (
<Text style={{ color: theme.text.primary }}>
@roll-network/design-system is awesome!
</Text>
)
}
Fonts
The font-families used in this design system are available at @roll-network/design-system/dist/fonts
. Add a CSS file with the following content to import fonts to your web app:
/* V2 */
@font-face {
font-family: 'Manrope-Regular';
src: local('Manrope-Regular'),
url('@roll-network/design-system/dist/fonts/Manrope-Regular.ttf');
}
@font-face {
font-family: 'Manrope-Medium';
src: local('Manrope-Medium'),
url('@roll-network/design-system/dist/fonts/Manrope-Medium.ttf');
}
@font-face {
font-family: 'Manrope-SemiBold';
src: local('Manrope-SemiBold'),
url('@roll-network/design-system/dist/fonts/Manrope-SemiBold.ttf');
}
@font-face {
font-family: 'Manrope-Bold';
src: local('Manrope-Bold'),
url('@roll-network/design-system/dist/fonts/Manrope-Bold.ttf');
}
@font-face {
font-family: 'RobotoMono-Medium';
src: local('RobotoMono-Medium'),
url('@roll-network/design-system/dist/fonts/RobotoMono-Medium.ttf');
}
/* V1 */
@font-face {
src: local('OpenSans-Regular'),
url('@roll-network/design-system/dist/fonts/OpenSans-Regular.ttf');
font-family: 'OpenSans-Regular';
}
@font-face {
src: local('OpenSans-Bold'),
url('@roll-network/design-system/dist/fonts/OpenSans-Bold.ttf');
font-family: 'OpenSans-Bold';
}
@font-face {
src: local('OpenSans-BoldItalic'),
url('@roll-network/design-system/dist/fonts/OpenSans-BoldItalic.ttf');
font-family: 'OpenSans-BoldItalic';
}
@font-face {
src: local('OpenSans-ExtraBold'),
url('@roll-network/design-system/dist/fonts/OpenSans-ExtraBold.ttf');
font-family: 'OpenSans-ExtraBold';
}
@font-face {
src: local('OpenSans-ExtraBoldItalic'),
url('@roll-network/design-system/dist/fonts/OpenSans-ExtraBoldItalic.ttf');
font-family: 'OpenSans-ExtraBoldItalic';
}
@font-face {
src: local('OpenSans-Italic'),
url('@roll-network/design-system/dist/fonts/OpenSans-Italic.ttf');
font-family: 'OpenSans-Italic';
}
@font-face {
src: local('OpenSans-Light'),
url('@roll-network/design-system/dist/fonts/OpenSans-Light.ttf');
font-family: 'OpenSans-Light';
}
@font-face {
src: local('OpenSans-LightItalic'),
url('@roll-network/design-system/dist/fonts/OpenSans-LightItalic.ttf');
font-family: 'OpenSans-LightItalic';
}
@font-face {
src: local('OpenSans-SemiBold'),
url('@roll-network/design-system/dist/fonts/OpenSans-SemiBold.ttf');
font-family: 'OpenSans-SemiBold';
}
@font-face {
src: local('OpenSans-SemiBoldItalic'),
url('@roll-network/design-system/dist/fonts/OpenSans-SemiBoldItalic.ttf');
font-family: 'OpenSans-SemiBoldItalic';
}
@font-face {
src: local('SourceCodePro-Regular'),
url('@roll-network/design-system/dist/fonts/SourceCodePro-Regular.ttf');
font-family: 'SourceCodePro-Regular';
}
Or use react-native-assets
with the following config to import fonts into your native app:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./node_modules/@roll-network/design-system/dist/fonts'],
}
Development
Web
Use Storybook to test your changes locally.
yarn start
Native
You can use React Native Storybook to test changes locally. You'll need to add your story to
- Add your story to storybook.requires.js.
- Run
yarn start:native
- Run
yarn ios
for iOS development. - Run
yarn android
for Android development.
Troubleshooting
Modal
If you face an issue (specifically on Web) when rendering a Modal, ensure that your application doesn't run in StrictMode. Otherwise, native-base
(the lib backing our design system up) will break. (https://github.com/adobe/react-spectrum/issues/3515#issuecomment-1246872872)