intuit / design-systems-cli

A CLI toolbox for creating design systems.

Home Page:https://intuit.github.io/design-systems-cli/#/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Playroom snippets aren't built starting at v1.7.0

orther opened this issue · comments

Describe the bug

No snippets are loaded in Playroom.

I believe this is due to snippet files not being built in the build step after PR #219 (this line specifically: c7b6cb7#diff-bc07f02d36ef2d7ade1a2f1ee1935aa6R13)

To Reproduce

In a project updated to ds-cli version >=1.7.0 with at least one component snippet:

  1. Clean dist dirs: yarn clean --no-modules
  2. Build components: yarn build
  3. Run playroom: yarn playroom
  4. Notice that there aren't any snippets available

Expected behavior

Snippets are loaded and available in Playroom.

To get snippets working:

  1. Manually edit the node_modules/@design-systems/build/dist/command.js file to not ignore the snippet files:
    // ...
    export const defaults = {
      watch: false,
      inputDirectory: 'src',
      outputDirectory: 'dist',
      cssMain: 'main.css',
      ignore: [
        '**/*.+(md|mdx)',
        '**/__tests__/**',
        '**/__snapshots__/**',
        // '**/*.+(stories|test|snippet).*'
        '**/*.+(stories|test).*' // <~~ I remove `|snippet`
      ]
    };
    // ...
  2. Build components: yarn build
  3. Run playroom: yarn playroom
  4. Snippets are now available

Screenshots

For reference this is what the Playroom UI looks like with and withOUT snippets.

Playroom withOUT snippets Playroom WITH snippets
image image

Desktop (please complete the following information):

  • OS: macOS 10.15.4
  • Browser Chrome
  • Version 1.7.0

Additional context

For reference here is the ColorSwatch.snippet.tsx in my ColorSwatch component that I'm testing with:

// File: ./components/ColorSwatch/src/ColorSwatch.snippet.tsx
import React from 'react';
import { ColorSwatch } from './ColorSwatch';

export default {
  ColorSwatch: <ColorSwatch name="Dark Blue" colorKey="general.darkBlue" />,
};

1.7.4 should fix this. sorry for the regression

1.7.4 should fix this. sorry for the regression

No problem. Thanks for pushing the fix!

I have confirmed it works and solves the problem reported in this issue (so I'm closing)