diff --git a/.github/ISSUE_TEMPLATE/contributing.md b/.github/ISSUE_TEMPLATE/contributing.md new file mode 100644 index 00000000..c8aa9b00 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/contributing.md @@ -0,0 +1,40 @@ +--- +name: Contributing to the design system +about: Template for new common component for VA mobile app +title: 'Component: [Insert name of component here]' +labels: component-documentation, ux +assignees: +--- + +# Contributing to the design system +Adding a new component or updating an existing component + +## What +Give a brief description of the component or pattern you want to propose. + +## Purpose +What problem does this component or pattern solve for the user? + +## Usage +**Context or task**: Explain the scenario or user tasks where this component is, or could be, used. + +## Behavior +Describe the key interactions for this component, calling out any specific considerations for mobile. + +## Examples +Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production. + +## Accessibility +Include any accessibility considerations. + +## Guidance +What would you want to tell other teams about this component or pattern? + +## Research (optional) +Include any research you have already conducted, or plan to conduct, on this component or pattern. + +## Code (optional) +Include any existing code. + +## Next steps +After filling out the issue template, post in the Design System slack channel to alert the team that you have filled out an issue. The team will reach out to you with any questions, feedback, and next steps. \ No newline at end of file diff --git a/README.md b/README.md index 6afaae13..ebc384a0 100644 --- a/README.md +++ b/README.md @@ -1,47 +1,3 @@ -# VA Mobile Temporary +# VA Mobile Libraries -[Read documentation](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Intro) - - -## Versioning Policy -The VA Mobile Libraries use [semantic versioning](https://semver.org/) at a per package level. - ---- -**Guidance in this section to be retired at version 1.0.0** - -Despite technically being in production, the design system is still in early, rapidly iterative phases. With only the VA Health & Benefits app leveraging and close team contact, through at least Q1 2024 we plan to use a pre-launch versioning (major version 0) as follows: -- Version 0.1.0 will be a level set of the package highlighting it's in a workable state with baseline functionality that has been proven consumable by an outside project - - For components: Segmented Control ready to use - - For tokens: Baseline set of color tokens available - - For other packages: When the package has a core piece of functionality and is stably leveraged by an outside project -- Any/all breaking changes will be minor version increments with tickets created for the VA Flagship Mobile Team providing specific guidance of necessary adjustments -- Aside from breaking changes, semver is updated according to long term guidance below - -This policy will allow flexibility around anticipated growing pains that may entail more frequent breaking changes than more mature design systems. Once initial adoption challenges have been addressed and the packages have reached a degree of maturity in terms of content, version 1.0.0 will be published and follow the guidelines established below. - ---- - -The guidance around versioning for the VA Mobile Libraries shall be as follows: -- Major - - Breaking changes, large or small, that *may* require app-level changes to upgrade; examples: - - Non-backwards compatible update to an existing component property; e.g. renaming or restructuring how data is passed - - Removal of deprecated token(s)/component(s)/etc. - - Underlying dependency update introducing incompatibility; e.g. new version of `react-native` that breaks compatibility to app-level version - - In exceptional cases, may be incremented for a very significant package enhancement or totality of modest ones that comprise a bonafide "release" even without breaking changes - - Minor - - Substantive functionality enhancements that are fully backward compatible, examples: - - New token(s)/component(s)/etc. - - Enhancing a component with a new variant - - Patch - - Minor functionality enhancements that are fully backward compatible, examples: - - Adding a new property of minor impact - - Updating an existing component property with new values that have a minor impact - - Fixing internal bugs - - Alpha - - Internal design system team testing build denoted by a `-alpha.#` appended to the semver - - Should not be used in production - - Beta - - External team testing build denoted by a `-beta.#` appended to the semver - - Should not be used in production outside exceptional circumstances - -The Figma Design Library will also follow this versioning guidance except only reflecting major/minor levels. Patch changes are likely to result in no visual changes or the design was correct while minor technical tweaks were made. +See the [Design System section of the VA Mobile documentation site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Intro) for the most organized form of the documentation. The [engineering documentation](https://department-of-veterans-affairs.github.io/va-mobile-app/design/For%20engineers/overview) there also exists in this repo either in the `documentation` folder or as `README`'s tied to particular packages. diff --git a/documentation/README.md b/documentation/README.md new file mode 100644 index 00000000..78aec299 --- /dev/null +++ b/documentation/README.md @@ -0,0 +1 @@ +A folder for general design system documentation not specifically tied to a package. \ No newline at end of file diff --git a/documentation/contributing.md b/documentation/contributing.md new file mode 100644 index 00000000..5d02e296 --- /dev/null +++ b/documentation/contributing.md @@ -0,0 +1,23 @@ +# Contributing Code + +If your contribution entails adding an entirely new component or significant enhancement of an existing component, [please see the general guidance to contributing](https://department-of-veterans-affairs.github.io/va-mobile-app/design/About/Contributing%20to%20the%20design%20system/contributing-to-the-design-system). Given larger enhancements will entail designer input throughout the process, discussions will precede any need for code contributions which will be able to clarify expectations. + +If you are looking to contribute a bugfix or minor change you don't believe needs that process: +1. [Search our outstanding issues](https://github.com/department-of-veterans-affairs/va-mobile-library/issues) to determine if it's already on our radar or a new ticket needs to be created +2. Notify us in [our DSVA slack channel](https://dsva.slack.com/archives/C05HF9ULKJ4) to: + - Determine if we have a timeline to prioritize if a ticket already exists + - Open a conversation around your intent to contribute a small change +3. If the Slack conversation gives the go ahead to move forward, either assign yourself to the existing ticket or create the new ticket and assign it to yourself +4. If appropriate, update the Slack thread with the newly created ticket +5. Move ticket to in progress +6. See individual package documentation for how to get it running locally to code/test your changes + +Factors to keep in mind during coding for a smooth PR: +- Look over [our PR template](https://github.com/department-of-veterans-affairs/va-mobile-library/blob/main/.github/pull_request_template.md?plain=1) for awareness of write-up expectations +- Observe existing code structure and aim to minimize complexity and maintain consistency unless you feel it could be meaningfully improved--if so, consider using Slack to discuss more robust code restructure changes prior to making them +- If appropriate: + - Update/add unit tests + - Update/add code documentation + - Update/add storybook stories + - Create alpha testing package build(s) to test within your app it behaves as expected with your changes + - Note: alpha builds should never be used in production, if it is time critical it should be a beta build and be a very temporary fix until a proper version can be published \ No newline at end of file diff --git a/documentation/overview.md b/documentation/overview.md new file mode 100644 index 00000000..9a2f413d --- /dev/null +++ b/documentation/overview.md @@ -0,0 +1,49 @@ +# Overview + +Welcome to the engineering section of the VA Mobile Design System documentation! + +First things first: from an engineering perspective, what is the design system? + +Fundamentally, the design system is a collection of NPM packages that can be added to a project like any other. These packages are created to support making native mobile apps that adhere to VA design principles, provide an accessible user experience, and streamline app development by providing UI building blocks to maximize time for delivering features. + +Currently and on the roadmap for foreseeable future, the mobile design system components rely on React Native--the most popular mobile framework for complex, multiplatform native mobile apps. + +The VA Mobile Design System is in early stages and far from maturity; as such, feedback on experience using the packages and this documentation is very welcomed to continually improve the experience! The ideal avenue for feedback is our [DSVA Slack channel](https://dsva.slack.com/archives/C05HF9ULKJ4) (#va-mobile-app-shared-systems). + +Lastly, the [va-mobile-library repo](https://github.com/department-of-veterans-affairs/va-mobile-library) houses the VA Mobile Design System codebase and [our Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/) demonstrates them functionally. + +## Packages + +So, what is currently being offered? + +Our packages: +- assets + - Package containing static assets (e.g. fonts, SVG icons) for VA mobile apps + - Peer dependency (required) to components for appropriate function + - [Documentation](https://department-of-veterans-affairs.github.io/va-mobile-app/design/For%20engineers/assets) + - [NPM](https://www.npmjs.com/package/@department-of-veterans-affairs/mobile-assets) + - [Code](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/main/packages/assets) +- components + - Package containing the components of the design system + - [Documentation](https://department-of-veterans-affairs.github.io/va-mobile-app/design/For%20engineers/components) + - [NPM](https://www.npmjs.com/package/@department-of-veterans-affairs/mobile-component-library) + - [Code](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/main/packages/components) +- linting + - Package containing an eslint plugin to issue deprecation notices as part of linting + - [Documentation](https://department-of-veterans-affairs.github.io/va-mobile-app/design/For%20engineers/linting) + - [NPM](https://www.npmjs.com/package/@department-of-veterans-affairs/eslint-config-mobile) + - [Code](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/main/packages/linting) +- tokens + - Package containing atomic, tokenized building blocks used for components so any app can build screens or custom components adhering to the same underlying styling fundamentals + - [Documentation](https://department-of-veterans-affairs.github.io/va-mobile-app/design/For%20engineers/tokens) + - [NPM](https://www.npmjs.com/package/@department-of-veterans-affairs/mobile-tokens) + - [Code](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/main/packages/tokens) + +Each package's documentation page contains more specialized guidance both for consumers of the package as well as for contributing. + +All packages use [ISC licenses](https://en.wikipedia.org/wiki/ISC_license): +> Copyright 2023 Department of Veterans Affairs +> +> Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. +> +> THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. \ No newline at end of file diff --git a/documentation/testing.md b/documentation/testing.md new file mode 100644 index 00000000..0d2489f6 --- /dev/null +++ b/documentation/testing.md @@ -0,0 +1,32 @@ +# Testing + +## Testing component package integrations + +Before a new component, or new version of an old component, is released it should be tested inside an example environment that it will be consuming. For this purpose we can use the [VA Flagship app](https://github.com/department-of-veterans-affairs/va-mobile-app). We can do this both with automation and manual testing. + +### Automatically + +We will have automated checks run on the components where we can. For our main client, the VA Flagship app we currently have [a Github actions workflow](https://github.com/department-of-veterans-affairs/va-mobile-library/blob/main/.github/workflows/check-component-integrations.yml) that will run each time a pull request is merged into the `main` branch. This automated workflow will simulate the VA Flagship app using the latest component package and run any associated tests to ensure no unintentional breakage happens. The workflow can also be run manually from the [Check Component Integrations action](https://github.com/department-of-veterans-affairs/va-mobile-library/actions/workflows/check-component-integrations.yml). + +As more clients are added to the system, more tests will be added to the workflow. The tests themselves are managed by the client team and any app included (at this time) needs to be in a publicly accessible repository. + +Automated tests will be able to check each instance of the component, so it is also important to manually test component integrations where appropriate. + +### Manually + +The preferred method for manual testing is [to create an alpha build via the NPM publish workflow](https://github.com/department-of-veterans-affairs/va-mobile-library/actions/workflows/publish.yml) of the package from your branch and then update your project locally to leverage that alpha build to test. Note: alpha builds should never be used in production. + +There are a couple additional methods to manually check if a component works inside an app environment, but neither works as well as the preferred method and may not behave the same as a published package (e.g. changes may work using these methods that would _not_ work in a published NPM package): +
+Alternate Method 1 +The first option is to manually install the local component into the app you're testing in by running: yarn add file:../../va-mobile-library/packages/components (assumes va-mobile-app and va-mobile-library are siblings, if they are not, change the path). This method points directly to the component file you're testing. The downside here is that your watch command may not work, so you'll need to rebuild the app to see changes (or update the watch configuration). + +
+ +
+Alternate Method 2 +The second is to use local dependency linking through yarn commands. This creates a symlink to the local component from the app. There are some Metro config changes that need to happen for this to work and support is a little iffy at the moment, but it's certainly an option, although not highly recommended at this point. + +
+ +With all methods above, you can validate things have installed correctly looking up the `@department-of-veterans-affairs/mobile-component-library` folder within your package folder (e.g. `node_modules`) and validating the correct package version is present. You can then run all app-level tests on it (manual app use, unit, compiling, e2e). The level of testing needed will be defined by the size of the update that is being made. diff --git a/documentation/versioning.md b/documentation/versioning.md new file mode 100644 index 00000000..e5003994 --- /dev/null +++ b/documentation/versioning.md @@ -0,0 +1,42 @@ +# Versioning Policy +The VA Mobile Libraries use [semantic versioning](https://semver.org/) at a per package level. + +--- +**Guidance in this section to be retired at version 1.0.0** + +Despite technically being in production, the design system is still in early, rapidly iterative phases. With only the VA Health & Benefits app leveraging and close team contact, through at least Q1 2024 we plan to use a pre-launch versioning (major version 0) as follows: +- Version 0.1.0 will be a level set of the package highlighting it's in a workable state with baseline functionality that has been proven consumable by an outside project + - For components: Segmented Control ready to use + - For tokens: Baseline set of color tokens available + - For other packages: When the package has a core piece of functionality and is stably leveraged by an outside project +- Any/all breaking changes will be minor version increments with tickets created for the VA Flagship Mobile Team providing specific guidance of necessary adjustments +- Aside from breaking changes, semver is updated according to long term guidance below + +This policy will allow flexibility around anticipated growing pains that may entail more frequent breaking changes than more mature design systems. Once initial adoption challenges have been addressed and the packages have reached a degree of maturity in terms of content, version 1.0.0 will be published and follow the guidelines established below. + +--- + +The guidance around versioning for the VA Mobile Libraries shall be as follows: +- Major + - Breaking changes, large or small, that *may* require app-level changes to upgrade; examples: + - Non-backwards compatible update to an existing component property; e.g. renaming or restructuring how data is passed + - Removal of deprecated token(s)/component(s)/etc. + - Underlying dependency update introducing incompatibility; e.g. new version of `react-native` that breaks compatibility to app-level version + - In exceptional cases, may be incremented for a very significant package enhancement or totality of modest ones that comprise a bonafide "release" even without breaking changes + - Minor + - Substantive functionality enhancements that are fully backward compatible, examples: + - New token(s)/component(s)/etc. + - Enhancing a component with a new variant + - Patch + - Minor functionality enhancements that are fully backward compatible, examples: + - Adding a new property of minor impact + - Updating an existing component property with new values that have a minor impact + - Fixing internal bugs + - Beta + - External team testing build denoted by a `-beta.#` appended to the semver + - Should not be used in production outside exceptional circumstances + - Alpha + - Internal design system team testing build denoted by a `-alpha.#` appended to the semver + - Should not be used in production + +The Figma Design Library will also follow this versioning guidance except only reflecting major/minor levels. Patch changes are likely to result in no visual changes or the design was correct while minor technical tweaks were made. diff --git a/packages/assets/README.md b/packages/assets/README.md index e45f996e..61f5c968 100644 --- a/packages/assets/README.md +++ b/packages/assets/README.md @@ -1,4 +1,16 @@ -# VA Mobile Design Library Assets -This repository contains static assets such as fonts and SVG icons for use by VA mobile applications. It does not contain any code, so it is up to the consumer to import these assets into their app. +# VA Mobile Design System - Assets Package -The [components package](https://github.com/department-of-veterans-affairs/va-mobile-library) contains an Icon convenience component that makes leveraging both the assets package icons and custom ones easy. See code for the [Icon component](https://github.com/department-of-veterans-affairs/va-mobile-library/blob/main/packages/components/src/components/Icon/Icon.tsx). Additional documentation can be found in the [Design System section](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Intro) of VA Mobile docs. +The Assets package contains static assets such as fonts and SVG icons for use by VA mobile applications. + +## For consumers + +The Assets package is a peer dependency to the Components package so it is expected to be added separately via your package manager (e.g. yarn) alongside using components. It does not contain any code, so it is up to the consumer to configure the package to be leveraged by their app, [notably the fonts so they are available within your app](https://blog.logrocket.com/adding-custom-fonts-react-native/) for the components. + +The [components package](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/main/packages/components) contains [an Icon convenience component](https://github.com/department-of-veterans-affairs/va-mobile-library/blob/main/packages/components/src/components/Icon/Icon.tsx) that makes leveraging both the assets package icons and custom SVGs specific to your app easy; it is highly recommended to use for icon needs. + +## For contributors +Not much to say for contributors as this is just a collection of assets. + +Before contributing, consider if the contribution is necessary. This package is intended for shared assets. If your asset is only relevant to a specific app, then it should be handled within the app. Keep in mind the Icon convenience component can handle custom SVGs to help display an app-level icon without it being part of the assets package. + +As there is no code and nothing to be run, contributing is as simple as adding the asset [to the package via the GitHub web interface](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/main/packages/assets) using the add file/folder buttons and creating a PR. \ No newline at end of file diff --git a/packages/components/README.md b/packages/components/README.md index 387d1245..bcead8e9 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -1,12 +1,28 @@ -# VA Design System Mobile Component Library +# VA Mobile Design System - Components Package -## Getting Started +The Components package is the core of the VA Mobile Design System containing the components themselves. + +## For Consumers +The components package assumes you already have a functioning React Native app, whether using Expo or React Native CLI; see the [React Native documentation](https://reactnative.dev/docs/environment-setup) if you do not. + +Once you have a running app: +1. Add `@department-of-veterans-affairs/mobile-component-library` as a dependency with your package manager (e.g. yarn) +2. Add `@department-of-veterans-affairs/mobile-assets` as a dependency + - Note: beyond the assets package, `react`, `react-native`, and `react-native-gesture-handler` are also expected dependencies to run the components package +3. [Hook up the custom fonts](https://blog.logrocket.com/adding-custom-fonts-react-native/) in the assets package to your app +4. Import components from `@department-of-veterans-affairs/mobile-component-library` within .jsx/.tsx files and incorporate into the display logic similarly to how you would the built-in React Native components + +Note: The linting package is highly recommended so you'll automatically receive linting warnings for deprecation as the components package evolves; it should be set to the same version as the components package. + +Documentation about components available can be found via [the documentation site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Intro) as well as [our Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/). Questions and issues can be directed to [our DSVA Slack channel](https://dsva.slack.com/archives/C05HF9ULKJ4). + +## For Contributors ### Prerequisites 1. Install [Node.js](https://nodejs.org/en) 2. Install [NVM](https://github.com/nvm-sh/nvm) -3. Install [yarn 3.6.1](https://yarnpkg.com/getting-started/install) +3. Install [yarn 4.0.2](https://yarnpkg.com/getting-started/install) ### Installation @@ -58,3 +74,4 @@ yarn tokens:build | `storybook:generate` | Generates `.storybook/native/storybook.requires.js` which tells React Native where to find stores since it doesn't support dynamic imports | | `storybook:watch` | Watches for newly created stories and regenerates `storybook.requires.js` | | `storybook:web` | Builds and launches development server for web | +| `test` | Runs unit tests | diff --git a/packages/linting/README.md b/packages/linting/README.md index 14d7fc5f..9707407b 100644 --- a/packages/linting/README.md +++ b/packages/linting/README.md @@ -1,8 +1,23 @@ -# VA Design System Mobile ESLint Configuration +# VA Mobile Design System - Linting Package -This package contains an ESLint config for use by consumers of the [VA Design System Mobile Component Library](https://www.npmjs.com/package/@department-of-veterans-affairs/mobile-component-library) to automatically issue deprecation notices when outdated components are being used. +The Linting package contains an ESLint config for use by consumers of the [VA Design System Mobile Component Library](https://www.npmjs.com/package/@department-of-veterans-affairs/mobile-component-library) to automatically issue deprecation notices when outdated components are being used. -## Getting Started +## For consumers These steps assume you already have `eslint` installed for your project as a devDependency and configured correctly. 1. Add `@department-of-veterans-affairs/eslint-config-mobile` as a devDependency to your project + - Note: Your version should match your components package version to behave correctly 2. In your eslint config file, add to the `extends` attribute: `@department-of-veterans-affairs/mobile` + +Once configured, running linting on your project should emit warnings for using outdated components. + +If linting is part of your continuous integration checks and warnings cause failures, the following can be added to your CI linting script to suppress the warnings during CI: +``` +--rule 'deprecate/import: off' +``` + +## For contributors +Not much to say for contributors as this is just a set of linting rules. + +This package leverages the `eslint-plugin-deprecate` package to issue deprecation notices as part of linting. As there is no real code and nothing to be run, contributing is as simple as editing the linting rules [in the GitHub web interface](https://github.com/department-of-veterans-affairs/va-mobile-library/blob/main/packages/linting/index.js) and creating a PR. + +Versioning of this package should be aligned with the components package. \ No newline at end of file diff --git a/packages/tokens/README.md b/packages/tokens/README.md index aca61e74..86d21b33 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -1,10 +1,26 @@ -# VA Mobile Design Tokens +# VA Mobile Design System - Tokens Package -This repo contains the design tokens for the VA Mobile Design Library. It uses [Style Dictionary](https://amzn.github.io/style-dictionary/#/) as a build system to define our styles in JSON and export them to different formats. +The Tokens package contains the design tokens for the VA Mobile Design Library. It uses [Style Dictionary](https://amzn.github.io/style-dictionary/#/) as a build system to define our styles in JSON and export them to different formats. -## Commands +## For consumers +Direct consumption of the tokens package is optional, but recommended. The tokens package contains the same building blocks used to build the design system components which will more easily allow screen content and app-level custom components to follow design system conventions, helping maintain consistency in experience for users. It is also recommended to match the tokens package version to the version of tokens used by the components package you are leveraging, to ensure consistency. -| Command | Description | -| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| yarn tokens:build | Takes any JSON files in the `src/tokens` folder and transforms them according to the defined transformations in the `config.js` | -| yarn publish-package | Publishes the packages to npm | +To use the tokens, simply: +1. Add `@department-of-veterans-affairs/mobile-tokens` to your project via your package manager (e.g. yarn) +2. Add `import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens'` to files you wish to use them in + - DesignTokens is suggested naming, but can be changed to whatever desired + +## For contributors +Depending on what is being contributed, the recommendation for how to proceed differs. + +If you are contributing a simple addition or update of an existing token, the recommendation is to do so [in the GitHub web interface](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/main/packages/tokens/src/tokens) by updating the relevant src tokens file and [running an alpha publish against the branch for the package](https://github.com/department-of-veterans-affairs/va-mobile-library/actions/workflows/publish.yml) to affirm the `dist/` folder correctly forms up your updated/added token as expected in the [resulting NPM package](https://www.npmjs.com/package/@department-of-veterans-affairs/mobile-tokens?activeTab=versions). + +If you are contributing many tokens or need to adjust build processes, you should get set up locally. See the [directions in the components package documentation](https://department-of-veterans-affairs.github.io/va-mobile-app/design/For%20engineers/components) for doing so with minor modifications to that process of changing directory to the tokens package (`va-mobile-library/packages/tokens`) instead of components and not having the final running steps as the `tokens:build` command is essentially running the tokens as it generates the output folders based on the build/config setup and tokens in the `src/` folder. + +Note: the folder structure and file naming within the `src/` folder is relevant so follow the existing structure and direct questions to [the DSVA Slack channel](https://dsva.slack.com/archives/C05HF9ULKJ4). + +### Yarn Commands + +| Command | Description | +| -------------------- | ----------- | +| `tokens:build` | Takes any JSON files in the `src/tokens` folder and transforms them according to the defined transformations in the `config.js` |