npm package: @mduke224/dls
Description: DesignOps Workflow Prototype
Author: argodesign
Latest version: 0.1.3

# Overview

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

-   [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
-   [React](https://reactjs.org/)
-   [Storybook](https://storybook.js.org/)
-   [NPM](https://docs.npmjs.com/packages-and-modules)
-   [Style Dictionary](https://amzn.github.io/style-dictionary/#/)

**DesignOps Workflow**

1. Install [Figma Tokens](https://www.figma.com/community/plugin/843461159747178978) Plugin
2. Open the plugin within Figma and click import <img width="1512" alt="figma-import-styles" src="https://user-images.githubusercontent.com/4331647/145901015-d59a8d63-f03f-49c7-b8ed-6c20eefeed83.png">
3. Click sync -> GitHub. See a project lead to help create a [GitHub personal access token](https://docs.tokens.studio/sync/github#3-generate-your-personal-access-token) and configure the git intergration. Once setup push your changes to gitHub. <img width="1512" alt="figma-sync" src="https://user-images.githubusercontent.com/4331647/145900952-96551e27-6dd9-4715-aa91-f72a36834dfb.png">
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](https://argodesign.github.io/designOps-workflow-prototype/index.html).

## Plugins & Utilities

-   [Ant Design Library](https://ant.design/components/overview/) (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](https://ant.design/docs/react/customize-theme-variable) progress and see if it becomes more robust