Publish and Deploy NPM package in Azure Artifacts, Storybook configuration and Figma integration.

In Shape we created an integrated Design System and UI Library to be used within all company. It allows faster implementation of Front-End projects and enables Shapers to help each other on different Squads without a big learning curve.

This article presents a tutorial on how to create the UI Lib, integrate with Figma and publish it in Azure Artifacts.

UI Lib Creation and Storybook Configuration

1. Create a react-app repository:

npx create-react-app shape-ui --template typescript

*I’m using TypeScript, but it also works for Vanilla JavaScript.

** Here I named the repository “shape-ui”, but put the appropriate name for your project.

2. Enter on the project folder:

cd/shape-ui

3. For this example, I installed Material-UI but feel free to install any style libraries like Ant-Design, Bootstrap, Bulma, etc.:

npm install @material-ui/core @material-ui/icons

*Additional info: https://material-ui.com/pt/getting-started/installation/

4. Install Storybook:

npx sb init

Additional info: https://storybook.js.org/docs/riot/get-started/install

When opening the repository, we can see that it already comes with some examples of stories (left side of the image), components and a file with documentation, but I like to create a different folder structure (right side of the image) with a folder for each component, containing the code, storie and documentation:

3. Code example for a Button component with Material-UI:

4. Sample stories code:

3. To run the project type:

npm run storybook

When you’re done, you can access the Storybook by default at this address:

http://localhost:6006/

Now just add more components and populate the Storybook.

Figma Integration

After the steps above, if your design team uses Figma, you can integrate it with Storybook.

1. Go to the component design in Figma and click on “Share” at the top right of the screen:

2. Now click on “Copy Link” in on the lower left side of the modal that opened:

3. Install the Storybook addon on your project:

npm install - save-dev storybook-addon-designs

4. Register the addon in your .storybook/main.js file:

// .storybook/main.js 
module.exports = { 
   addons: [
      ‘storybook-addon-designs’,
   ]
}

5. Open your stories file (in many cases, it’s named *.stories.js) and import the addon:

import { withDesign } from "storybook-addon-designs";

6. Add this parameter to export default:

decorators: [withDesign],

7. Add a story parameter named design and paste the copied URL to the “url” field:

ButtonPrimary.parameters = {
  design: {
    type: "figma",
    url: "Paste the copied URL here",
  },
};

*On ButtonPrimary, put the name of your component.

The final Button Stories file should look like this:

Now you can see the Figma design integrated in the Storybook Page:

*Additional info: https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma

Azure Deploy to Artifacts

To deploy to Azure Artifacts so your whole company can easily install the UI lib on their projects, first you need to export your components.

Prepare your project:

1. Import and export all the created components in the index.tsx file on the “src” folder, it should look like this:

2. Now install rollup, babel and sass:

npm install babel-core babel-loader babel-runtime rollup rollup-plugin-sass rollup-plugin-typescript2 node-sass sass sass-loader

3. Create a rollup.config.js file and add to the root of your project:

Now, on Azure DevOps create a feed on the same organization and project as the UI lib repository:

1. Click on “Create Feed” at the top part of the page:

2. Give it a name and click on “Create”:

3. Click on “Connect to Feed”:

4. Select “npm”:

5. Follow the instructions on the screen:

6. Add a “.npmrc” to your project, in the same directory as your “package.json”:

registry= *Get the unique specific registry that appear on the page above
                        
always-auth=true

7. Then, run vsts-npm-auth to get an Azure Artifacts token added to your user-level .npmrc file:

vsts-npm-auth -config .npmrc

8. To restore packages, run this command in your project directory:

npm install

9. To publish packages, run this command in your project directory:

npm publish

The lib should appear on Artifacts:

10. Now all Squads can install the package on their project folder:

npm install @example/uilib 

*Use the name you gave to the lib.

11. Import and add the components needed for each project. Example:

In the next steps, we’ll talk about how to publish the Storybook to a bucket on Azure so that the entire team has access to documentation.

Thank you!

🔹Luciane Nagay Martins - Software Developer - Shape | LinkedIn

Shape | LinkedIn

Shape