@virtualcapital/utogi-ui-library v2.2.0
Utogi UI Library
To Install
npm install @virtualcapital/utogi-ui-library
or yarn add @virtualcapital/utogi-ui-library
To Use
Currently there are two ways to use this library depending of your needs and configuration:
- Basic: You import from the main module the components and include the css yourself (No treeshaking by default, no variables override)
- Advanced: You import from the lib folder the components you need, this is the more versatile way but need some extra configuration (See Advanced Setup section)
Basic
This configuration will allow you to start fast but with one drawback, by default will include all components (no treeshaking) and will use the default variables.
import React from "react";
import { Button } from "@virtualcapital/utogi-ui-library";
export default () => <Button color="primary">My Button</Button>;
Advanced
This configuration is recommended if you answer yes to one of the following questions:
- I'm worried about the final size of my bundle?
- I need to override the default variables?
In your main scss/sass file you will need to include the generic css classes use, please ensure you do this on your main scss file (App.scss fox example) and do not add this inside the _variables
file (see below)
You can start using the library like this
import React from "react";
import Button from "@virtualcapital/utogi-ui-library/dist/components/button";
export default () => <Button color="primary">My Button</Button>;
Before you use this configuration you need to setup a _variables.sass
file somewhere in your project (I recommend inside your src
folder). This file will allow you to override variables if need it like:
$primary: #c3c3c3
Note Use this file only for variables, do not include any css rule in it because that rule will be duplicated every time you include a component from this library.
Depending of your project configuration you will need to setup your framework to use this file:
Raw Webpack
Configure your webpack to handle sass files.
Inside the resolve directive setup your webpack to use modules from the folder where you put the _variables.sass
file
{
// ...
resolve: {
modules: ['node_modules', 'src'],
// ...
}
}
CRA
Install node-sass to enable the sass compiles on your project.
After that update your scripts in the package.json
to add the folder to your path
"scripts": {
"start": "NODE_PATH=./src react-scripts start",
"build": "NODE_PATH=./src react-scripts build",
"test": "NODE_PATH=./src react-scripts test",
...
}
where ./src
is the folder where you put your _variables.sass
Gatsby
Follow the instructions to enable Sass compiling in project, and configure the sass plugin to include the path where you put the _variables.sass
file, for example:
plugins: [
{
resolve: `gatsby-plugin-sass`,
options: {
includePaths: ["./src"],
},
}
...
]
Next.js
Follow the instructions to enable sass in the project. You will also need to configure the transpiled modules plugin next-plugin-transpile-modules
so install it npm i --save-dev next-plugin-transpile-modules
.
Now on your next.config.js
configure your sass to include the directory where you put your _variables.sass
file and add @virtualcapital/utogi-ui-library
to the transpiled modules
const withSass = require("@zeit/next-sass");
const withTM = require("next-plugin-transpile-modules");
module.exports = withTM(
withSass({
transpileModules: ["@virtualcapital/utogi-ui-library"],
sassLoaderOptions: {
includePaths: ["./src"]
}
})
);
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
3 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago