@mduke224/dls v0.1.3

Overview

This repository contains the font-end component library template for argodesign's future designOps workflow.

• Web Components
• React
• Storybook
• NPM
• Style Dictionary

DesignOps Workflow

1. Install Figma Tokens Plugin
2. Open the plugin within Figma and click import
3. Click sync -> GitHub. See a project lead to help create a GitHub personal access token and configure the git intergration. Once setup push your changes to gitHub.
4. Review and merge the open Pull request and let CI builld the latest scss files or export the latest token json and place in design-tokens/tokens and execute npm run build:styleDictionary.
5. Locally run npm run storybook to view the latest build or view the public build.

Plugins & Utilities

• Ant Design Library (optional)

Requirements

• Node 16.x LTS
• NPM

Folder Structure:

• generators - scaffolds out either a react based component or a web component
• design-tokens - houses Figma design tokens and style dictionary build process/configuration
• src/components - all components
• src/assets - images, fonts, favicon
• src/styles - global styles (globals, includes)

Task Management

• npm run build
  • Builds production component library
• npm run build:development
  • Builds dev version of component library and keeps watch of filesystem for changes
• npm run build:styleDictionary
  • Transforms Figma Tokens' output to scss
• npm run storybook
  • Loads storybook
• npm run lint
  • Runs eslint and stylelint needs to be updated
• npm run test
  • Runs unit tests + snapshots
• npm run publish
  • Runs build and then publishes module to npm

Setup

npm i
npm run storybook

Code Generator

We are leveraging hygen and an npm script to scaffold out new components for us. All generators are located within _templates/generate.

Generate A New Component

• To generate a react component, at the project root run: npm run generate -- react-component --name component-name-here
• To generate a web component, at the project root run: npm run generate -- web-component --name component-name-here

Branching & Deployments

When your feature|hotfix|bugfix is complete, open a new PR against develop. Please run npm run test && npm run lint before opening the PR as it will get run as a CI check and prohibit the merging of your code until all tests and lint rules pass.

• All features should go in a new branch named /feature/ticket#-feature-name
• All bugs should go in a new branch named /bugfix/ticket#-bug-name
• All hotfixes should go in a new branch named /hotfix/ticket#-hotfix-name

When your PR is open a senior engineer or technical director must perform a passing code review in order to merge in your changes. A reviewer should approve the changes and notify the engineer who created the PR that it is ready to be merged. All PR's should be squashed and merged to keep our version control hisory clean versus a standard merge commit.

Storybook Live Preview

Upon deploying changes successfully to the develop branch a publically accessbile storybook preview will be built. You may visit this url https://argodesign.github.io/designOps-workflow-prototype/index.html at anytime to view the latest version of the component librbary.

How To Utilze The Component Library

1. In the root of your web application run npm i @mduke224/dls
2. In your global css file import the global style, if you are using scss add @use "@mduke224/dls/dist";
3. In your application import the compnent of your choosing import { Breaker } from '@mduke224/dls'; and then use <Breaker text="Hello DLS" />

If the DLS leverges React components you must import react and react-dom in your application as the librabry does not get compiled into the final output.

To Do's:

• Create action to auto convert design tokens
• Move package to argodesign's organization and make it private
• Review figma tokens plugin's output and style dictionary. Fix typography so that it can be outputted as scss placeholders and determine how to split the transpilation operation into multiple output partials (colors, typography, etc)
• Keep tabs on antd's dynamic themeing progress and see if it becomes more robust