How to create a UI library that looks like the real ort* 💩
'cause dev's are not designers
Pablo Hiyano
Recipe
- RollUp.js
- npm
- React
- emotion.sh a gusto
Rollup.js
Who will help up to build the library
const presets = [
[
"@babel/env",
{
modules: false
}
],
["@babel/preset-react"],
["@emotion/babel-preset-css-prop"]
];
module.exports = { presets };
babel.config.js
import babel from "rollup-plugin-babel";
export default {
input: "src/main.js",
output: [
{
name: "disasterUI",
file: "dist/main.js",
format: "es"
}
],
external: ["react"],
plugins: [
babel({
exclude: "node_modules/**"
})
]
};
rollup.config.js
desde donde exportaremos nuestros componentes
nombre de nuestra libreria
a donde exportaremos nuestra libreria compilada
el formato en el que sera compilada la libreria
aca le decimos a rollup que es lo que no tiene que compilar, porque la libreria lo usara del lugar donde sea instalada
config de plugins
rollup -c -w-c para compilar
-w para watch
React
Where to use the library
npm link
mucho muy important
Step 1
npm linkIn our library folder
Step 2
npm link disaster-uiIn our app folder
Why?
ls -alF node_modules/
... inherits/
... ini/
... inquirer/
... internal-ip/
... intive-library@ -> ../../../../../../usr/local/lib/node_modules/disaster-ui
... invariant/
... invert-kv/
... ip/Keep in mind that could depend on node version
And everytime you need to `npm install` you will need to link again
unlink
npm unlink --no-save disaster-uiIn our app folder
Edges cases
- React inception
- Microfrontends?
Codeamos un desastre?
Avisos parroquiales
Gracias
disaster ui
By Pablo Hiyano
