@solice-metaverse/ui v0.0.16
Solice UI Component Library
These components will eventually grow to be Solice's one stop shop for anything frontend:
For Official Solice Branding specifics please see the following
- Sass
- TypeScript
- Storybook to help you create and show off your components
- Jest and React Testing Library enabling testing of the components
Development
Testing
npm run test
Building
npm run build
Storybook
To run a live-reload Storybook server on your local machine:
npm run storybook
To export your Storybook as static files:
npm run storybook:export
Publishing
Hosting via NPM
For now only i can publish to this scope... i think..
npm login
npm publish
The "prepublishOnly": "npm run build"
script in package.json
will execute before publish occurs, ensuring the build/
directory and the compiled component library exist.
Usage
Specific examples coming soon
Using Component Library SASS Variables
TODO: BELOW
Add the rollup-plugin-copy
NPM package and used it to copy the src/typography.scss
and variables.scss
into the build
directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.
For example, let's say you installed solice-component-library
into your project. To use the exported variables/mixins, in a SASS file you would do the following:
@import '~solice-component-library/build/typography';
.example-container {
@include heading;
color: $solice-white;
}
Additional Help
Dark Mode
Solice respects the user's dark mode operating system preferences and renders the component in the appropriate theme.
This is achieved by using the media query: @media (prefers-color-scheme: dark)
in combination with CSS variables. The colours that change depending on dark mode preference can be found in src/variables.scss
.
Read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more details.
Using Alternatives to Sass
The Rollup plugin rollup-plugin-postcss
supports Sass, Less and Stylus:
- For Stylus, install stylus:
yarn add stylus --dev
- For Less, install less:
yarn add less --dev
You can then remove node-sass
from your dependencies.
CSS Modules
If you want to use CSS Modules, update postcss
in rollup-config.js
to:
postcss({
modules: true
})
Styled Components
If you want to use styled-components
, the changes required are a bit more involved.
Component Code Splitting
Code splitting of your components is not supported by default.
import Button from '@solice/ui';
This can reduce the bundle size for projects using older (CJS) module formats.
TODO: BELOW
Supporting Image Imports
Add the following library to your component library @rollup/plugin-image:
npm i -D @rollup/plugin-image
Then add it to rollup-config.js
:
...
plugins:[
...,
image(),
...
]
...
You can then import and render images in your components like:
import logo from './rollup.png';
export const ImageComponent = () => (
<div>
<img src={logo} />
</div>
);
Supporting JSON Imports
Add the following library to your component library @rollup/plugin-json:
npm i -D @rollup/plugin-json
Then add it to rollup-config.js
:
...
plugins:[
...,
json(),
...
]
...
You can then import and use JSON as ES6 Modules:
import data from './some-data.json';
export const JsonDataComponent = () => <div>{data.description}</div>;
Checkout the official Rollup plugin list for additional helpful plugins.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago