DEV Community: Carlos Castro

Finding your motivation working in tech

Carlos Castro — Mon, 06 Jul 2020 19:22:53 +0000

This post was triggered after a conversation I had with a friend; In this conversation we were talking about their goals and upon struggling a bit I asked: “What’s your motivation to work in tech?”. It might have been very direct, but after a few minutes of brainstorm we came to some good conclusions and I thought of writing about this.

What is motivation?

Google defines it as: “the general desire or willingness of someone to do something”. I think this definition lands very well with me since in my tech career as a software engineer, motivation has been my flag to keep on writing good code, having interesting technical discussions, mentoring others and in general having a good attitude about my career.

For me, some of the motivations to work for tech were:

The money: Because you have less stress if you can easily put food in your table and take care of your dependents. Plus the once in a while “treat yourself” that comes easy with it.
The flexibility: I knew long before coming to work in tech how the work culture was very flexible; Work at your own pace, no one cares about 9-5, just deliver things. I wanted some of that and to be able to spend more time with my family.
The universality: The ability of being an international individual and be able to work almost everywhere in the world and in virtually every industry.

These are EASY motivations; These are the motivations that probably everyone that works in tech have seen at some point. Unfortunately having all of the above does not automatically translate of you being happy in tech; Sometimes even with all these perks you don’t find yourself motivated about your job. I’m not saying completely non-performant at your job but it’s that feeling where you are not doing the best job you know you can do.

I’ve felt like that many times and I can attribute that feeling to certain specific situations. Instead of looking at the negatives, let me elaborate on some positive actions you can do to find some motivation:

Find the work you want to do

Have you felt you can’t get that project or idea out of your head and you rush to keep on thinking/working on it? Well, that seems like something YOU like to do! It’s like Christmas morning where you are so excited that you can’t sleep and want to wake up as soon as possible to open the gifts. I’ve found myself feeling this for certain projects or an idea I want to develop and those things are often the best work I’ve produced.

Certainly, in real life you can’t always get only the work you want to do. Sometimes you will get work that you find boring; Not in line with your thinking and with the label: “it has to be done”. I think you should put up with it temporarily, get it done and have a plan to go work in the things you love. Aim for working on what you love 70-80% of your time and have a buffer of 30%-20% for “Running the Business”.

Find the right leaders / managers

Leadership / Management does ultimately affect your overall happiness at work. Unless you are working for yourself, in a big company you will have someone you ultimately report to. I know you don’t always have the means to choose your leaders/managers but if you can, try to find people that will listen to you and understand your motivation; People that can treat you like a human and not like another cog in the machine.

Bonus points if this person is someone you admire or you have seen a good track record from them. Once you get someone like this, really having a leader/manager is a different dynamic than the normal management style where you are just handed tasks to do on a sprint. It’s more of a discussion on what are the things you want to do for the team / organization and how are you going to be achieving those. Management like this motivates you, walks with you when you need to and sprints when there’s an opportunity; They will highlight your work and it will be a nice thing. Hang onto this type of management as long as you can.

Quick wins

I am a person that learns by “Action and Reaction”; Maybe this is why I became a UI Engineer; I like to see things drawn in the screen and I want to see them fast. I’ve found myself struggling to keep motivation when I go purely theoretical, when I feel I don’t deliver value quickly and I don’t see a means to an end. I think it’s just human nature to strive for some advancement and some sort of signal that we are going on the right direction.

When you get a large piece of work try to split it or if you are in charge of a project try to deliver something quick that you can iterate on; more often than not you will receive good feedback based on “something” rather than “nothing”. You can build from there.

Define clear objectives and results

This goes in hand with the previous point where you will achieve something quick and you will see a reaction of your actions; Fight the ambiguity of things, fight it hard. Letting something be too ambiguous will lead to multiple paths and you either having to explore all of them or you doing nothing because of lack of direction.

Define what you can and want to do in order to get general consensus and get started. This in turn will result in some sort of vision of what you are doing which will help you as a north star and light at the end of the tunnel so you can keep motivated.

Motivate others

This is more of a meta advice but If you find your motivation and you are happy at your work, share this motivation with others. You can be as subtle or direct as you want but try to encourage others; Sometimes people just need a little nudge in the right direction to do great things, I want you to be the instrument to do that. This is my case with me writing articles and starting a podcast with a friend; Always wanted to do it but I had doubts, there were words of encouragement and some good 1:1’s that made me do the jump and well, here I am… hopefully motivating you as well.

Writing your first React UI Library - Part 4: Ship It! (V1)

Carlos Castro — Tue, 16 Jun 2020 20:53:51 +0000

This is the fourth post on a series on how to make your own UI React Library.

What are we going to do?

Map our compiled Javascript for older and newer clients in our package.json.
Change a little bit the configuration of storybook and our builder to support compiling from the source.
Publishing with Lerna!

Shipping it!

By now you should have almost everything ready to ship it:

Running npm run build at the root should make a build of all your components with cjs and esm formats output in a dist folder.
Running npm run storybook should start your dev kitchen sync.
CSS Modules are working in storybook and you can see the css on the compiled files as well.

Mapping our compiled files in package.json

We have two types of clients for our UI Library:

1) People that just want an it just works™ by just importing our components and forgetting about them; They will get our compiled components + css which won't clash with their styles for the most.

2) People deemed as power users which have their own bundling system and they want to generate their classes on their build process.

For this we'll modify the package.json in all our distributable packages to:

phoenix/package.json

  "main": "dist/phoenix.cjs.js",
  "module": "dist/phoenix.esm.js",
  "src": "lib/phoenix.js",

phoenix-button/package.json

  "main": "dist/phoenix-button.cjs.js",
  "module": "dist/phoenix-button.esm.js",
  "src": "lib/phoenix-button.js",

phoenix-text/package.json

  "main": "dist/phoenix-text.cjs.js",
  "module": "dist/phoenix-text.esm.js",
  "src": "lib/phoenix-text.js",

Modern bundlers like Webpack or Rollup will use module entry when using imports/exports on an ES6 environment and main when we are using require.

We want those to be resolved from the compiled version in case our clients don't have CSS Modules on their app and they just want to use our components.

Notice We added a src attribute, this is basically a pointer to the real source that we want our power users to use.

Before we can proceed, we also need to add the dist folder to the files we are publishing to NPM; This can be done by adding the folder name into the files array in each package.json. For example this is the modification in the phoenix package.

phoenix/package.json

  "files": [
    "dist",
    "lib"
  ],

Do the same for phoenix-button and phoenix-text packages.

Fix Storybook setup

The problem now, is that when running storybook it will grab the code pointing to module since this is the default webpack configuration behavior.

See here: https://webpack.js.org/configuration/resolve/#resolvemainfields

We don't want that since our kitchen sink should always point to latest src so we can try new things without having to run build on every change;

Let's change that:

.storybook/main.js

module.exports = {
  stories: ['../packages/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config) => {
    // remove default css rule from storybook
    config.module.rules = config.module.rules.filter((f) => f.test.toString() !== '/\\.css$/');

    // push our custom easy one
    config.module.rules.push({
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            // Key config
            modules: true,
          },
        },
      ],
    });
    // This is where we change the order of resolution of main fields
    config.resolve.mainFields = ['src', 'module', 'main'];

    // Return the altered config
    return config;
  },
};

With the above we are telling the storybook webpack to first grab src and if it doesn't find it, then fallback to the other options. This is the same configuration we are going to ask our power users to use when compiling the components on their own.

Fix the builder setup

We also need to modify our phoenix-builder to grab the code from src instead of main as we had before.

phoenix-builder/lib/phoenix-builder.js

#!/usr/bin/env node
const rollup = require('rollup');
const path = require('path');
const resolve = require('@rollup/plugin-node-resolve').default;
const babel = require('@rollup/plugin-babel').default;
const postcss = require('rollup-plugin-postcss');

const currentWorkingPath = process.cwd();
// Little refactor from where we get the code
const { src, name } = require(path.join(currentWorkingPath, 'package.json'));

// build input path using the src
const inputPath = path.join(currentWorkingPath, src);

// Little hack to just get the file name
const fileName = name.replace('@cddev/', '');

// see below for details on the options
const inputOptions = {
  input: inputPath,
  external: ['react'],
  plugins: [
    resolve(),
    postcss({
      // Key configuration
      modules: true,
    }),
    babel({
      presets: ['@babel/preset-env', '@babel/preset-react'],
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
    }),
  ],
};
const outputOptions = [
  {
    file: `dist/${fileName}.cjs.js`,
    format: 'cjs',
  },
  {
    file: `dist/${fileName}.esm.js`,
    format: 'esm',
  },
];

async function build() {
  // create bundle
  const bundle = await rollup.rollup(inputOptions);
  // loop through the options and write individual bundles
  outputOptions.forEach(async (options) => {
    await bundle.write(options);
  });
}

build();

We are now ready to publish

Run

lerna publish

This will open a prompt in your terminal to select the version you want to publish.

We started in version 0.0.0 and since this is our first release, let's select Major. This will present a message on what it's going to happen:

Changes:
 - @cddev/phoenix-builder: 0.0.0 => 1.0.0
 - @cddev/phoenix-button: 0.0.0 => 1.0.0
 - @cddev/phoenix-text: 0.0.0 => 1.0.0
 - @cddev/phoenix: 0.0.0 => 1.0.0

Run it!

If everything goes well, you should see:

Successfully published:
 - @cddev/phoenix-builder@1.0.0
 - @cddev/phoenix-button@1.0.0
 - @cddev/phoenix-text@1.0.0
 - @cddev/phoenix@1.0.0
lerna success published 4 packages

Congrats! Your library has been published

How can your clients consume it?

The beauty of this setup is that your clients can either consume the main package phoenix which will get them all the components or each component separately. Here are some examples:

Consuming as a whole

npm i --save-dev @cddev/phoenix

And then later in your JS

import { Button, Text } from '@cddev/phoenix';

render() {
  return (
    <>
      <Button>Woo</Button>
      <Text>Waa</Text>
    </>
  );
}

Consuming one package only

npm i --save-dev @cddev/phoenix-button

And then later in your JS

import { Button } from '@cddev/phoenix-button';

render() {
  return (
    <Button>Woo</Button>
  );
}

Conclusion

With this setup you should be able to add more packages, release them independently and hopefully have a small pipeline in terms of UI Development.

In future parts we will explore adding tooling such as eslint, stylelint, prettier to have a consistent codebase and prevent small bugs; We are also going to put in place a testing infrastructure using jest and react testing library.

For now I leave you with a phrase so you can keep learning on your own: "In case of doubt, push on just a little further and then keep on pushing."

Resources

Github Repository with all code: https://github.com/davixyz/phoenix
Demo storybook: https://davixyz.github.io/phoenix
Github: https://github.com/davixyz
Twitter: https://twitter.com/carloscastrodev

Writing your first React UI Library - Part 3: CSS Modules

Carlos Castro — Tue, 16 Jun 2020 20:53:42 +0000

This is the third post on a series on how to make your own UI React Library.

What are we going to do?

Add support for CSS Modules compilation to our builder.
Add support for CSS Modules in Storybook.
Enhance the styles of our UI Components similar to what you would do on a Design System.

CSS Modules

CSS Modules are great because it lets you consume css in your components that can be locally scoped with auto-generated classes, this is great to prevent collision between classes.

Let's start adding rollup-plugin-postcss

lerna add rollup-plugin-postcss --scope=@cddev/phoenix-builder

Now it's just a matter of importing the plugin and using it on the input configuration with modules: true option.

phoenix-builder/lib/phoenix-builder.js

// At the top after other imports
const postcss = require('rollup-plugin-postcss');

// Adding a new plugin with `modules: true`
const inputOptions = {
  // ... other options
  plugins: [
    postcss({
      // Key configuration
      modules: true,
    }),
    // ... after other options
  ],
};

Let's add some css in our phoenix-button to test this feature.

First create a styles.css next to the phoenix-button.js

phoenix-button/lib/styles.css

.Button {
  background-color: red;
}

After this you should be able to import it in your the button and use it

phoenix-button/lib/phoenix-button.js

import React from 'react';
import styles from './styles.css';
const Button = ({ children }) => <button className={styles.Button}>{children}</button>;
export { Button };

You can see above that in order to use the css modules you import the styles and then access the class like styles.Button as if the class became a property of styles object.

Running npm run build should compile the component as before but adding some new code to inject the css.

Add support for CSS Modules in storybook

We can't proceed without looking at what we are doing in terms of styles and by just importing css on the components and then on storybook it won't work, so we need to add support for css-modules on storybook.

Luckily we have almost everything setup so we just need to do a small override on the storybook webpack configuration in

.storybook/main.js:

module.exports = {
  stories: ['../packages/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config) => {
    // remove default css rule from storybook
    config.module.rules = config.module.rules.filter((f) => f.test.toString() !== '/\\.css$/');

    // push our custom easy one
    config.module.rules.push({
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            // Key config
            modules: true,
          },
        },
      ],
    });

    // Return the altered config
    return config;
  },
};

Voila!

Now you can npm run storybook and you should see your first react component using CSS Modules

Enhancing the Button Component

This guide won't be almost finished without adding some fanciness; In this case, we're going to borrow some styles and Design System from https://www.coinbase.com/, because why not.

From their homepage we can see they have mainly two buttons: one green and one with a white outline, let's create the css for those.

phoenix-button/lib/styles.css

.Button {
  background-color: #05b169;
  border-radius: 0.25rem;
  border: 1px solid #05b169;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  transition: all 100ms ease-in-out;
  width: auto;
  outline: none;
}

.Button:hover,
.Button:focus {
  background-color: #00a55e;
  border-color: #00a55e;
}

.ButtonSecondary {
  background: transparent;
  border-color: #fff;
}

.ButtonSecondary:hover,
.ButtonSecondary:focus {
  background: #fff;
  border-color: #fff;
  color: #000;
}

Now for the code in the button:

phoenix-button/lib/phoenix-button.js

import React from 'react';
import cx from 'clsx';
import styles from './styles.css';

const Button = ({ children, className, variant, ...rest }) => {
  const classes = cx(
    styles.Button,
    {
      [styles.ButtonSecondary]: variant === 'secondary',
    },
    className
  );
  return (
    <button {...rest} className={classes}>
      {children}
    </button>
  );
};

export { Button };

And then enhancing our stories like this:

phoenix-button/docs/phoenix-button.stories.js

import React from 'react';
import { Button } from '../lib/phoenix-button';

export default { title: 'Button' };

export const primary = () => <Button>Hello Button</Button>;

export const secondary = () => (
  <div style={{ background: '#1652f0', padding: 12 }}>
    <Button variant="secondary">Hello Button</Button>
  </div>
);

Now you should be able to see some variants of your fancy button

Enhancing the Text Component

We are just going to grab a couple of their sizes in their stack and not use their proprietary font.

phoenix-text/lib/styles.css

.Text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

.Hero {
  font-size: 3rem;
  font-weight: 800;
  line-height: 3.25rem;
}

.Heading {
  font-size: 2.5rem;
  font-weight: 500;
}

phoenix-text/lib/phoenix-text.js

import React from 'react';
import cx from 'clsx';
import styles from './styles.css';

const Text = ({ children, className, as = 'p', variant, ...rest }) => {
  const textVariant = styles[variant] || 'Body';
  console.log(textVariant);
  const classes = cx(
    styles.Text,
    {
      [textVariant]: variant,
    },
    className
  );
  return React.createElement(
    as,
    {
      ...rest,
      className: classes,
    },
    children
  );
};

export { Text };

phoenix-text/lib/phoenix-text.stories.js

import React from 'react';
import { Text } from '../lib/phoenix-text';

export default { title: 'Text' };

export const Body = () => <Text>Body Text</Text>;
export const Hero = () => <Text variant="Hero">Hero Text</Text>;
export const Heading = () => <Text variant="Heading">Heading Text</Text>;

Conclusion

You know have CSS Modules support both for your compiled code as well as your storybook; With this it will be a little bit more difficult to have collisions on the auto generated classes and you can even go one step further and provide the source code so your clients compile the code and generate the classes and styles themselves.

Resources

Code: https://github.com/davixyz/phoenix/tree/part3
Github: https://github.com/davixyz
Twitter: https://twitter.com/carloscastrodev

Writing your first React UI Library - Part 2: Storybook

Carlos Castro — Tue, 16 Jun 2020 20:53:31 +0000

This is the second post on a series on how to make your own UI React Library.

What are we going to do?

Add storybook support for our project.
Add a couple of stories using our components.
Wire up some task for static documentation generation and pushing it to GitHub pages as a demo.

Storybook

Storybook is a great tool to document and test our react components, it's super easy to get started and it can serve as a kitchen sink to experiment with our components.

We are going to run the storybook cli to get the project started using --type react since our library is made in React.

npx -p @storybook/cli sb init --type react

After this you should see your folder structure like this:

We are going to co-locate the stories along with the components, let's get rid of that stories folder.

rm -rf stories/

Now let's open .storybook/main.js and edit the pattern matches stories so Storybook can look for stories within our packages.

.storybook/main.js

module.exports = {
  stories: ['../packages/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

Writing our first story

Let's write our first story for phoenix-button!

I recommend you create a docs folder so you can collocate any related documentation for the component.

Create a file phoenix-button.stories.js inside docs as shown in the picture below:

phoenix-button/docs/phoenix-button.stories.js

import React from 'react';
// We want to always get from source
import { Button } from '../lib/phoenix-button';

export default { title: 'Button' };

export const primary = () => <Button>Hello Button</Button>;

Let's do the same for phoenix-text

phoenix-text/docs/phoenix-text.stories.js

import React from 'react';
// We want to always get from source
import { Text } from '../lib/phoenix-text';

export default { title: 'Text' };

export const small = () => <Text>Hello Text</Text>;

After this run your storybook and you should see your two components rendered on storybook!!!🎉🎉🎉

npm run storybook

The display

Making a demo site in Github

We want to have a demo site for our testing and also to share with our clients, fortunately Github has a feature called Github pages which can help us with this.

If you already started this tutorial from a fresh repository in your GitHub you can skip the next few paragraphs, but if you didn't...

Follow this guide to create a new repository in http://github.com

https://help.github.com/en/github/getting-started-with-github/create-a-repo

# Let's initialize the repo
git init
# Add the remote pointing to your origin
git remote add origin <your-origin>
# create a gitignore to untrack the node_modules
echo "node_modules" > .gitignore
# add all files
git add .
# commit
git commit -m "feat: add initial structure for UI Library"
# push
git push -u origin master

gh-pages to the rescue

To push our site to Github Pages we are going to use a small npm module called gh-pages.

https://www.npmjs.com/package/gh-pages

Let's install it in our project

npm i --save-dev gh-pages

Now we need to create a script to do this; We are going to name it deploy.

deploy should build storybook first and then run gh-pages over the folder created; By default storybook creates a storybook-static folder when built which we can use.

  "scripts": {
    "build": "lerna run build",
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "deploy": "npm run build-storybook && gh-pages -d storybook-static"
  },

After this once you run

npm run deploy

This should build storybook and push it to gh-pages. In your repository settings in Github you can find the url to the demo site that looks like this:

https://davixyz.github.io/phoenix-part2

Conclusion

We bootstrapped our documentation/kitchen sink site to test our react components; Storybook makes it very easy to get started; We can see our documentation locally but we also want to share it with our external clients so for that we created a mechanism to deploy the static build of storybook.

Resources

Code: https://github.com/davixyz/phoenix/tree/part2
Github: https://github.com/davixyz
Twitter: https://twitter.com/carloscastrodev

Writing your first React UI Library - Part 1: Lerna

Carlos Castro — Tue, 16 Jun 2020 20:53:19 +0000

This is the first post on a series on how to make your own UI React Library.

What are we going to do?

Setup a new project using Lerna for multiple packages.
Bootstrap all the skeleton project with all the packages we will need.
Add necessary dependencies to packages.
Wire our own centralized builder.

It might feel sometimes like we are battling with a multi-headed dragon but bare with me as it will pay dividends and the end!

Pre-requisites

Node v10+
NPM v6+

Lerna

This tool is amazing to manage Javascript libraries with multiple packages, the general idea is that each UI Component in your library will be a completely separate and independent package that can be installed on a project. We are parting ways with a monolithic library where all the code is in a single package in favor of splitting so our clients can install only what they want™

Recommendation is to install it globally since we are going to use few commands from it:



npm i -g lerna

Create Initial project



# example name that I like
mkdir phoenix
cd phoenix

# Initialize empty package.json
npm init -y

# Initialize Lerna
lerna init

Example generated folder structure

lerna.json

This is the central lerna configuration for the packages. You can read more about the Lerna configuration here: https://github.com/lerna/lerna#lernajson

Default values



{
  "packages": ["packages/*"],
  "version": "0.0.0"
}

We are going to modify to this



{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "hoist": true,
  "stream": true,
  "bootstrap": {
    "npmClientArgs": ["--no-package-lock"]
  }
}

hoist: Makes all dependencies on packages to be lifted up to the root so we de-dupe.
stream: Prints all the inner package logs when run.
npmClientArgs: Prevents generating package-lock.json on all these packages.

packages/

This folder will host all the code of the packages we are going to release.

Let's add some components!

npm scopes

We want to publish these packages to npm and we want to avoid conflicts with others; For this, we will create a scope. Scopes are great to namespace closely related packages or as a form of veracity, for example @babel/core, scope in this case is @babel. For this example we will set the scope to: @cddev.

Read more of scopes here: https://docs.npmjs.com/about-scopes

Important Notes

The scope @cddev is the one I used for this guide so it will be already taken, go ahead and create a new one; one that represents your passions and interests in life :)
Before using a scope, save yourself a headache and create the org in npm first: https://www.npmjs.com/org/create

Creating packages

Any UI Library is nothing without components so let's create a few packages using Lerna. We will create 4 packages for this guide:

@cddev/phoenix: This will hold all the packages together in case someone wants to do a single import.
@cddev/phoenix-button: A button component.
@cddev/phoenix-text: A Text Component.
@cddev/phoenix-builder: A Builder of all components, centralizes rollup, babel, post-css, etc.

Note
we are going to use the default Lerna folder structure on this tutorial.




# Using --yes to skip prompts
lerna create @cddev/phoenix --yes
lerna create @cddev/phoenix-button --yes
lerna create @cddev/phoenix-text --yes
lerna create @cddev/phoenix-builder --yes

Wiring the React components with Lerna

We want build relationships <3 within our components, for example the main phoenix package will import all other packages and export them; We also want to add necessary dependencies to all packages to get started. Let's do it.



# Add phoenix-button dependency into phoenix
lerna add @cddev/phoenix-button --scope=@cddev/phoenix

# Add phoenix-text dependency into phoenix
lerna add @cddev/phoenix-text --scope=@cddev/phoenix

# We are going to use React for the two UI components, let's add it as dev dependency first for local testing
lerna add react --dev --scope '{@cddev/phoenix-button,@cddev/phoenix-text}'

# And as a peer dependency using major 16 version for consuming applications
lerna add react@16.x --peer --scope '{@cddev/phoenix-button,@cddev/phoenix-text}'

# We are also going to use an utility to toggle classes as needed on the components called "clsx"
lerna add clsx --scope '{@cddev/phoenix-button,@cddev/phoenix-text}'

With this you should now be able to see some changes across multiple package.json setting pointers among the packages so you can reference them.

Let's write some test React code to export from the UI Components

phoenix-button/lib/phoenix-button.js



import React from 'react';
const Button = ({ children }) => <button>{children}</button>;
export { Button };

phoenix-text/lib/phoenix-text.js



import React from 'react';
const Text = ({ children }) => <p>{children}</p>;
export { Text };

phoenix/lib/phoenix.js



import { Button } from '@cddev/phoenix-button';
import { Text } from '@cddev/phoenix-text';
export { Button, Text };

The Builder

We could go ahead and publish these packages as they are in ES6 but some older clients might not understand this modern Javascript especially because we are using JSX. This needs to be compiled to a format that can be understood by older clients and for that we are going to use a bundler.

Rollup is a good options since it has a minimal API and their docs are great to get started.
https://rollupjs.org/guide/en/

To build these components, wouldn't it be neat to use it like this?



"scripts": {
  "build": "phoenix-builder"
}

In this case the builder will be aware of everything passed to it given the context of where we call it.

For this we are going to be creating a command line executable in node.
https://developer.okta.com/blog/2019/06/18/command-line-app-with-nodejs

Let's modify our @cddev/phoenix-builder/package.json to let node know we are exposing an executable out of this package. In this case the executable is gonna be phoenix-builder.

phoenix-builder/package.json



"bin": {
  "phoenix-builder": "./lib/phoenix-builder.js"
},

Next, we need to make changes into phoenix-builder.js with a dummy command to test things out:

phoenix-builder/lib/phoenix-builder.js



#!/usr/bin/env node
console.log('Woo');

Finally, make the JS executable



chmod +x packages/phoenix-builder/lib/phoenix-builder.js

We should be able to wire the phoenix-builder to our individual components so we have the builder centralized with it's own configuration and be able to run for each component.



lerna add @cddev/phoenix-builder --dev --scope '{@cddev/phoenix,@cddev/phoenix-button,@cddev/phoenix-text}'

And then modify all these packages with a new build script
For example, phoenix-button/package.json



"scripts": {
  "build": "phoenix-builder",
  "test": "echo \"Error: run tests from root\" && exit 1"
},

Next, we should be able to do a test run by doing:



lerna run build

You should be able to successfully see the three Woo messages in the console signaling us that it worked.

Troubleshooting
If you get an error phoenix-builder: command not found make sure you are exporting the bin command in phoenix-builder package.json

To make the running of the script easier, at the root level let's modify our scripts in our package.json and add:
root/package.json



"scripts": {
 "build":  "lerna run build"
}

With this, we can run at the root npm run build and it should do the same without having to call lerna every time.

Compile the JS with Rollup

Now that we have the builder wired up we can start adding Rollup and all other dependencies we need to compile our code!

Unfortunately Lerna doesn't support adding multiple packages in one command... sigh.



lerna add rollup --scope=@cddev/phoenix-builder
lerna add @babel/core --scope=@cddev/phoenix-builder
lerna add @babel/preset-env --scope=@cddev/phoenix-builder
lerna add @babel/preset-react --scope=@cddev/phoenix-builder
lerna add @rollup/plugin-babel --scope=@cddev/phoenix-builder
lerna add @rollup/plugin-node-resolve --scope=@cddev/phoenix-builder

You should now have all the necessary dependencies to write the phoenix-builder.js

We are going to use the Javascript API in rollup and produce 2 bundles:

CommonJS (CJS) for older clients.
ECMAScript Modules (ESM) for newer clients.

Let's start by modifying phoenix-builder.js with the following code:

phoenix-builder/lib/phoenix-builder.js



#!/usr/bin/env node
const rollup = require('rollup');
const path = require('path');
const resolve = require('@rollup/plugin-node-resolve').default;
const babel = require('@rollup/plugin-babel').default;

const currentWorkingPath = process.cwd();
const { main, name } = require(path.join(currentWorkingPath, 'package.json'));

const inputPath = path.join(currentWorkingPath, main);

// Little workaround to get package name without scope
const fileName = name.replace('@cddev/', '');

// see below for details on the options
const inputOptions = {
  input: inputPath,
  external: ['react'],
  plugins: [
    resolve(),
    babel({
      presets: ['@babel/preset-env', '@babel/preset-react'],
      babelHelpers: 'bundled',
    }),
  ],
};

const outputOptions = [
  {
    file: `dist/${fileName}.cjs.js`,
    format: 'cjs',
  },
  {
    file: `dist/${fileName}.esm.js`,
    format: 'esm',
  },
];

async function build() {
  // create bundle
  const bundle = await rollup.rollup(inputOptions);
  // loop through the options and write individual bundles
  outputOptions.forEach(async (options) => {
    await bundle.write(options);
  });
}

build();

Now you can run:



npm run build

And you should be able to see compiled version of our components!
Hurray!!🎉🎉🎉🎉

Example of compiled code in dist folder on each UI Component package

Conclusion

By now you should have a small library with 2 UI React components; One single library that imports them and a centralized builder. This is the skeleton of the overall UI Library. In the next parts we will work on adding Kitchen Sink/Documentation tooling, CSS Modules support and the final touches to be able to distribute our library.

Resources

Code: https://github.com/davixyz/phoenix/tree/part1
Github: https://github.com/davixyz
Twitter: https://twitter.com/carloscastrodev