Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



Design system and component library for America's Test Kitchen

Version published



Mise en place is a French term for having all your ingredients measured, cut, peeled, sliced, grated, etc, before you start cooking. In the same light, Mise UI is a design system and component library for America’s Test Kitchen.

The current state of the master branch can be viewed here:

To start the app:

Run yarn run storybook and wait for a browser window to open localhost:9009


Mise UI is a Storybook app built with React. Storybook is an isolated UI development environment for UI components. Stories are written in Component Story Format (CSF).

Visual review

To review work with others, push your branch to origin/staging. Netlify will build and deploy to The master branch is always viewable here:


Create a branch

git checkout -b create-avatar-list-component

Code and commit

git commit -am "Added AvatarList and stories"

Document your code

Add comments to your components which Storybook will use as documentation.

For example:

 * A list of Avatars, ellipsized to at most 3. Supports passing only a subset of the total user count.
export function AvatarList({ loading, users, userCount, size, ...props }) {

AvatarList.propTypes = {
   * Are we loading avatar data from the network?
  loading: PropTypes.bool,
   * A (sub)-list of the users whose avatars we have data for. Note: only 3 will be displayed.
  users: PropTypes.arrayOf(
      id: PropTypes.string.isRequired,
      name: PropTypes.string,
      avatarUrl: PropTypes.string,
   * The total number of users, if a subset is passed to `users`.
  userCount: PropTypes.number,
   * AvatarList comes in four sizes. In most cases, you’ll be fine with `medium`.
  size: PropTypes.oneOf(Object.keys(sizes)),

Commit the changes and push to GitHub

git commit -am "Improved AvatarList docs"
git push -u origin `create-avatar-list-component`

Create a PR

Create a Pull Request

The design system’s Storybook is automatically published each pull request to make review dead simple. Scroll down to the PR checks, at the bottom of the PR, to find a link to the deployed Storybook.

You should look for something like deploy/netlify - Deploy preview ready

The online Storybook is a universal reference point for the team. Share the link to AvatarList with other stakeholders to get feedback faster.

Verify changes via tests
  • Chromatic?
  • Snapshots?
  • Unit tests?

Once all your code is merged into the master branch, you are ready to begin the release process.

To make sure the Mise is versioned properly for release, please run yarn publish --tag latest from the master branch. It will tell you the current version of Mise and then prompt you to enter the new vesrion. You can update the major, minor, or patch.

Verify that the latest verison has been published on NPM.

Next, draft a new release and add a new tag in github.

You're now ready to use this new Mise version in other projects!

Previewing in jarvis, or other ATK repos with yalc

When developing and authoring multiple packages (private or public), you often find yourself in need of using the latest/WIP versions in other projects that you are working on in your local environment without publishing those packages to the remote registry.

See documentation for more info

Install yalc globally

yarn global add yalc

Now run publish, it will copy all the files that should be published in remote NPM registry. Don't forget to update the version number!

yalc publish

With yalc puclished in remote NPM registry, it's already visible to other repos. But if you want to continue the changes in mise-ui run the following

yarn watch

Then add the following to any other ATK repos that would want to see the changes. It will automatically see the changes and update in the application(It might take some seconds)

cd ../jarvis
yalc link @atk/mise-ui

Now just start the repo's development server and it's all set.

When you are done working on mise-ui changes, you might want to 'remove' jarvis.

cd ../jarvis
yalc remove @atk/mise-ui

DEPRECATED - Previewing in jarvis, or other ATK repos

If you are making changes in mise-ui and would like to preview those changes immediately in jarvis, you will need to link your local copy of mise-ui to your local jarvis.

The following commands assume your local repos are stored in /src, adjust the commands to suite the location you have selected on your computer.

-$ cd /src/mise-ui
-$ yarn link
-$ npm link ../jarvis/node_modules/react-instantsearch-dom
-$ npm link ../jarvis/node_modules/react
-$ npm link ../jarvis/node_modules/styled-components
-$ npm link ../jarvis/node_modules/styled-components-breakpoint
-$ cd ../jarvis
-$ yarn link @atk/mise-ui
-$ cd node_modules/styled-components
-$ npm link ../react

Note that two of the above commands use yarn and two use npm. The order of the npm commands is important. Make sure you link react-instantsearch-dom and then react. If you see 'Invalid Hook Call' errors, you might need to re-run these commands with the correct order.

The link commands create symlinks between your local mise-ui and jarvis so that the node_modules folder in jarvis points to your local mise-ui codebase. The npm link commands make it so that jarvis uses its local copies of the packages (react and react-instantsearch-dom) instead of using the versions in the mise-ui/node_modules folder.

Read Invalid Hook Call Warning for more details.

After each change that you make in mise-ui, you will need to compile your code since jarvis looks at the files in ./dist, not in ./src.

-$ yarn run build

You will also need to restart jarvis.

When you are done working on mise-ui changes, you might want to 'unlink' jarvis.

-$ cd /src/jarvis
-$ yarn unlink @atk/mise-ui
-$ yarn add @atk/mise-ui

Your jarvis branch should now be pointing to the lastest NPM version of atk/mise-ui.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


💡 ⚠️ 💻 📖

Harry Scheuerle

💡 💻 📖

Jason Aslakson

💻 💡 ⚠️

Kayseri Martinez

📖 💡 ⚠️ 💻

Tom Tornese

💡 💻 ⚠️ 📖

Tim Woodman

💻 📖 💡

Audrey Magwili



📖 💡 💻 ⚠️

Jenner Thomas

💡 ⚠️ 💻 📖

Jess David Bon

💻 📖 💡

Brad Waropay

📖 💡 ⚠️ 💻

This project follows the all-contributors specification. Contributions of any kind welcome!


Last updated on 08 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc