intuit / design-systems-cli Goto Github PK

View Code? Open in Web Editor NEW

394.0 5.0 84.0 11.98 MB

A CLI toolbox for creating design systems.

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

License: MIT License

JavaScript 14.04% TypeScript 84.70% HTML 1.27%

hacktoberfest

design-systems-cli's Introduction

A CLI toolbox for creating design systems in minutes

Uses: Typescript, CSS, styled-components support

Outputs: CJS and MJS

No tooling configuration required

Overview

Design-systems-cli is basically a Create React App for design systems.

The main benefit it brings you as a developer is time savings. Setting up all of the monorepo, storybook, and build tools for a design system takes over a week if you piece it together yourself. You can do it with this project in minutes.

Features

⭐ Scaffold components and entire design systems

⭐ Build your components for multiple outputs (cjs and esm)

⭐ Write styles with styled-components or css-modules

⭐ Craft excellent components using Storybook

⭐ Let component consumer try your components with playroom

⭐ Testing and linting support

⭐ Typescript supported out of the box

⭐ Track the size of your components and debug the changes

For the full documentation, go here.

Installation

Ensure you have the following softwares installed:

Node >= 10.18.1 - Installation guide
Yarn - Installation guide

If node-gyp throws errors during installation, installation may still be successful

To get started:

To get set up, fork and clone the project then run the following command:

yarn && yarn start

Creating a new Plugin

To scaffold a new plugin inside this repo run the following command:

yarn run create:plugin "my plugin"

Contributing

Feel free to open an issue or a pull request!

Make sure to read our code of conduct.

We actively welcome pull requests. Learn how to contribute.

Contributors ✨

Thank you to all these wonderful people (emoji key):

_{Adam Dierkens} 💻 🎨 🤔 📖 ⚠️	_{Andrew Lisowski} 💻 🎨 📖 🤔 🚇 ⚠️	_{Tyler Krupicka} 💻 📖 ⚠️	_{Kendall Gassner} 💻 📖 ⚠️	_{Kelly Harrop} 🎨	_{Peter Mikitsh} 📖	_{WhiteSource Renovate} 💻 ⚠️
_mishavp2001 💻	_{Raj Vasikarla} 💻 📖 ⚠️	_{Brandon Orther} 📖 💻	_alan-cruz2 💻	_hainessss 💻	_{Athitya Kumar} 💻	_{Jason Rundell (he/him)} 📖 ⚠️ 💻
_Reuben 📖	_my99N 📖 ⚠️ 💻	_anjaliguptaz 📖	_chaopan ⚠️	_{Talor Anderson} 💻 📖 ⚠️	_{Spencer Hamm} 💻 📖 ⚠️	_{Adil Malik} ⚠️
_{Salil Cuncoliencar} 📖 ⚠️ 💻	_{Gaurav Kesarwani} 📖 ⚠️ 💻	_{Nicolas Hoizey} 📖	_{Harris Borawski} 💻	_{Sean Powell} 💻	_melindali255 📖 ⚠️ 💻	_{Yucho Ho} 💻
_{Jeremiah Zucker} ⚠️	_{Abd El-Ghazali} 📖 💻

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

design-systems-cli's People

Contributors

Stargazers

Watchers

Forkers

petermikitsh adierkens dilverdev tylerkrupicka kendallgassner mishavp2001 marinep31 vanyasehgal orther alan-cruz2 jyotsnac dpkm95 rfesi athityakumar zbarovsky ranniepavillon vfreitas- reubenae conjurer2306 salilbc rachanamamillapalli edgarsherman anjaliguptaz sarthakgupta072 devopstoday11 selvagsz veenadesai38 chaopan jeffreyjiang666 intuit-rr talor-a whjvenyl amalik2 vasikarla-zz gauravkesarwani venkatramanareddy fattslug danilomartinelli arunsinghintuit hborawski shriuken spentacular jiportilla xiaotian-tan pavanprakash-g yucho jcan1995 melindali255 classicvalues sugarmanz straiforos sheryldelrosario swastyy ryantang333 sketchlagoon kennethbigler shikhanjali moquez samruddhi362 tmarmer liangruile-michela rushil-patel jordanforeman abdelgzali shreyaprasad1209 arsenethierry benmccann undervalent artemisd fpc97 fjolin-intuit isabella232 egcgt3 matthewkaneda chrisdraycott jsun034 nikunj-bisht josediego corp-ray rum1887 submergenc3 devdoshi intu-mtaing

design-systems-cli's Issues

Custom config for Playroom

Is your feature request related to a problem? Please describe.

I need to wrap my components in a ThemeProvider container for them to be styled correctly. When I use Playroom my components aren't styled because I can't setup Playroom to use my ThemeProvider.
frameComponent working because Playroom isn't configured to use

Describe the solution you'd like

I'd like to be able to configure Playroom at the system / monorepo level when using @ds-cli to allow me to set a custom frameComponent.

ds storybook start - command error

Describe the bug

Errors running ds storybook start from a new design-system.

To Reproduce

npm init @design-systems

cd <repo-name>

yarn storybook

Expected behavior

The storybook command to start

Screenshots

Improve ReadMe

The ReadMe for this project is a little bare-bones. While we have a documentation site, it would be nice to include some more information explaining why the project exists and how it is useful.

Since DS-CLI is basically a Create React App for design systems, I think some of the elements of the CRA readme would be good to include.

Installation guide, video setting up a new design system, philosophy, features etc would all be useful. We really should hammer that setting up all of the monorepo, Storybook, and build tools takes over a week if you piece it together yourself. You can do it with this project in minutes.

Options issue in styled.tsx

Describe the bug

https://github.com/intuit/design-systems-cli/blob/master/packages/utils/src/utils/styled.tsx#L58
I think options should be made optional, and then this should check if options exists. We are getting an error on:
TypeError: Cannot read properties of undefined (reading 'class').

To Reproduce

Run the VSCode debugger on a project with an @ids-ts component in it. NOTE: this only shows up on the debugger, it works fine when run via yarn test.

Expected behavior

Screenshots

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Additional context

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

circleci

.circleci/config.yml

circleci/node 16.5.0-browsers

github-actions

action.yml

actions/checkout v2

actions/setup-node v1

stefanzweifel/git-auto-commit-action v4.14.1

npm

package.json

@auto-it/all-contributors 10.36.5

@auto-it/first-time-contributor 10.36.5

@auto-it/released 10.36.5

auto 10.36.5

change-case 4.1.1

copy-template-dir 1.4.0

lerna 4.0.0

prettier 2.1.2

rimraf 3.0.2

signale 1.4.0

typescript 4.2.2

node >=10.18.1

packages/babel-plugin-include-styles/package.json

@babel/traverse ^7.13.0

find-up 5.0.0

tslib 2.0.1

@babel/core ^7.13.8

@babel/types ^7.13.0

@types/node 14.14.31

packages/babel-plugin-replace-styles/package.json

tslib 2.0.1

@babel/core ^7.13.8

@babel/types ^7.13.0

@types/node 14.14.31

packages/cli-utils/package.json

find-up 5.0.0

npm-which 3.0.1

signale 1.4.0

tslib 2.0.1

utility-types 3.10.0

webpack 4.44.1

@types/signale 1.4.1

packages/cli/package.json

command-line-application 0.10.1

deepmerge 4.2.2

dlv 1.1.3

dotenv 8.2.0

env-ci 5.0.2

fs-extra 9.0.1

tslib 2.0.1

update-check 1.5.4

@types/dotenv 6.1.1

@types/env-ci 3.1.0

packages/core/__tests__/test-plugin/package.json

packages/core/package.json

import-cwd 3.0.0

tslib 2.0.1

packages/create/package.json

@types/dedent 0.7.0

@types/fs-extra 9.0.1

@types/inquirer 7.3.1

change-case 4.1.1

cli-spinners 2.5.0

colorette 1.2.2

command-line-application 0.10.1

copy-template-dir 1.4.0

dedent 0.7.0

fs-extra 9.0.1

inquirer 7.3.3

progress-estimator 0.3.0

terminal-link 2.1.1

title-case 3.0.3

ts-loader 8.0.17

tslib 2.0.1

webpack 4.44.1

webpack-cli 3.3.12

change-case >=3.x

cli-spinners >=2.x

colorette >=1.x

command-line-application >=0.x

copy-template-dir >=1.x

dedent >=0.x

fs-extra >=8.x

inquirer >=6.x

progress-estimator >=0.x

terminal-link >=1.x

title-case >=3.x

packages/docs/package.json

command-line-docs 0.0.6

dedent 0.7.0

mkdirp 1.0.4

tslib 2.0.1

command-line-docs 0.0.6

docsify-cli 4.4.0

push-dir 0.4.1

packages/eslint-config/package.json

@kendallgassner/eslint-plugin-package-json 0.2.1

@typescript-eslint/eslint-plugin 4.16.1

@typescript-eslint/parser 4.16.1

babel-eslint 10.1.0

eslint 7.6.0

eslint-config-airbnb 18.2.0

eslint-config-prettier 6.11.0

eslint-config-xo 0.32.1

eslint-config-xo-react 0.23.0

eslint-plugin-import 2.22.0

eslint-plugin-jest 23.20.0

eslint-plugin-jsdoc 30.2.2

eslint-plugin-jsx-a11y 6.3.1

eslint-plugin-mdx 1.8.1

eslint-plugin-no-explicit-type-exports 0.11.4

eslint-plugin-prettier 3.1.4

eslint-plugin-react 7.20.6

eslint-plugin-react-hooks 4.2.0

tslib 2.0.1

packages/hooks/package.json

@babel/runtime 7.14.0

@popperjs/core ^2.9.0

@testing-library/react 11.2.7

@testing-library/react-hooks 7.0.0

fromentries 1.3.2

react-fast-compare 3.2.0

resize-observer-polyfill 1.5.1

tslib ^2.3.0

use-isomorphic-layout-effect 1.1.1

ts-readme 1.1.3

react >= 16.8.6

react-dom >= 16.8.6

packages/load-config/package.json

change-case 4.1.1

cosmiconfig 7.0.0

dedent 0.7.0

deepmerge 4.2.2

dlv 1.1.3

flat 5.0.2

resolve 1.17.0

tslib 2.0.1

@types/cosmiconfig 5.0.3

@types/dlv 1.1.2

@types/flat 5.0.1

@types/resolve 1.17.1

packages/next-esm-css/package.json

@babel/runtime ^7.13.9

packages/plugin/package.json

command-line-application 0.10.1

tslib 2.0.1

utility-types 3.10.0

packages/stylelint-config/package.json

stylelint-a11y 1.2.3

stylelint-config-css-modules 2.2.0

stylelint-config-prettier 8.0.2

stylelint-config-recommended 3.0.0

stylelint-config-styled-components 0.1.1

stylelint-declaration-block-no-ignored-properties 2.3.0

stylelint-order 4.1.0

stylelint-processor-styled-components 1.10.0

stylelint-selector-tag-no-without-class 2.0.3

tslib 2.0.1

stylelint >7.x

packages/svg-icon-builder/package.json

change-case 3.1.0

command-line-application 0.10.1

endent 2.1.0

fs-extra 9.0.1

maxstache 1.0.7

signale 1.4.0

svgo 1.3.2

@auto-it/jira 10.36.5

@auto-it/slack 10.36.5

@types/change-case 2.3.1

@types/fs-extra 9.0.1

@types/signale 1.4.1

@types/svgo 1.3.3

packages/utils/package.json

@babel/runtime ^7.13.9

clsx ^1.0.4

focus-lock ^0.8.0

react-merge-refs ^1.0.0

@testing-library/jest-dom 4.0.0

@testing-library/react 8.0.7

@testing-library/react-hooks 1.1.0

@types/classnames 2.2.11

@types/react-dom 16.9.0

auto 10.36.5

husky 3.0.1

lint-staged 9.2.1

prettier 1.19.1

react 16.8.6

react-dom 16.8.6

react-test-renderer 16.8.6

ts-readme 1.1.3

typescript 4.2.2

@types/react *

react >= 16.8.6

react-dom >= 16.8.6

plugins/build/package.json

@babel/code-frame ^7.12.13

@babel/core ^7.13.8

@babel/plugin-proposal-class-properties ^7.13.0

@babel/plugin-syntax-dynamic-import ^7.8.3

@babel/plugin-transform-runtime ^7.13.9

@babel/preset-env ^7.13.9

@babel/preset-react ^7.12.13

@babel/preset-typescript ^7.13.0

@babel/runtime ^7.13.9

autoprefixer 9.8.6

babel-plugin-macros 3.0.1

babel-plugin-styled-components 1.12.0

babel-preset-jest 26.3.0

change-case 4.1.1

chokidar 3.4.2

clean-css 4.2.3

colorette 1.2.2

dedent 0.7.0

fast-glob 3.2.5

fs-extra 9.0.1

icss-utils 4.1.1

minimatch 3.0.4

pkg-up 3.1.0

postcss 7.0.32

postcss-hexrgba 2.0.1

postcss-icss-selectors 2.0.3

postcss-load-config 2.1.0

postcss-modules 3.2.2

postcss-nested 4.2.3

postcss-url 8.0.0

pretty-bytes 5.6.0

pretty-ms 7.0.0

tapable 1.1.3

tslib 2.0.1

type-fest 0.16.0

typescript 4.2.2

@types/autoprefixer 9.7.2

@types/babel__code-frame 7.0.2

@types/babel__core 7.1.9

@types/clean-css 4.2.2

@types/dedent 0.7.0

@types/fs-extra 9.0.1

@types/icss-utils 4.1.0

@types/minimatch 3.0.3

@types/postcss-nested 4.1.0

@types/postcss-url 8.0.1

@types/pretty-bytes 5.2.0

@types/pretty-ms 5.0.1

plugins/bundle/package.json

case-sensitive-paths-webpack-plugin 2.3.0

dedent 0.7.0

duplicate-package-checker-webpack-plugin 3.0.0

get-monorepo-packages 1.2.0

postcss-loader ^4.2.0

style-loader 1.2.1

terser-webpack-plugin 4.1.0

tslib 2.0.1

webpack 4.44.1

@types/case-sensitive-paths-webpack-plugin 2.1.4

@types/duplicate-package-checker-webpack-plugin 2.1.0

plugins/clean/package.json

fast-glob 3.2.5

fs-extra 9.0.1

tslib 2.0.1

@types/fs-extra 9.0.1

plugins/create-command/package.json

change-case 4.1.1

cli-spinners 2.5.0

colorette 1.2.2

copy-template-dir 1.4.0

dedent 0.7.0

fs-extra 9.0.1

inquirer 7.3.3

progress-estimator 0.3.0

terminal-link 2.1.1

title-case 3.0.3

tslib 2.0.1

plugins/dev/package.json

chokidar 3.4.2

dedent 0.7.0

find-package-json 1.2.0

resolve-cwd 3.0.0

tslib 2.0.1

@types/find-package-json 1.1.1

plugins/lint/package.json

eslint 7.6.0

eslint-formatter-github ^1.0.0

eslint-formatter-pretty 4.0.0

fast-glob 3.2.5

get-monorepo-packages 1.2.0

stylelint 13.7.0

stylelint-formatter-github ^1.0.0

stylelint-formatter-pretty 2.1.0

tslib 2.0.1

@types/eslint 7.2.2

@types/stylelint 9.10.1

plugins/playroom/package.json

@babel/core ^7.13.8

@babel/register ^7.13.8

babel-plugin-import-redirect 1.1.1

css-loader 3.5.3

dedent 0.7.0

fast-glob 3.2.5

file-loader 6.2.0

fs-extra 9.0.1

playroom 0.25.0

react-element-to-jsx-string 14.3.2

style-loader 1.2.1

tslib 2.0.1

webpack 4.44.1

plugins/proof/package.json

@babel/core ^7.13.8

@babel/plugin-transform-runtime ^7.13.9

@babel/preset-typescript ^7.13.0

@proof-ui/a11y-plugin ^0.1.4

@proof-ui/add-all-plugin ^0.1.4

@proof-ui/babel-plugin ^0.1.4

@proof-ui/cli ^0.1.4

@proof-ui/config ^0.1.4

@proof-ui/junit-plugin ^0.1.4

@proof-ui/skip-tests-plugin ^0.1.4

babel-preset-power-assert 3.0.0

tslib 2.0.1

@types/signale 1.4.1

plugins/size/package.json

change-case 4.1.1

chokidar 3.4.2

colorette 1.2.2

commently 6.18.3

cross-spawn 7.0.3

css-loader 3.5.3

diff2html 3.3.0

file-size 1.0.0

fs-extra 9.0.1

get-monorepo-packages 1.2.0

gitlog 4.0.0

lodash.chunk 4.2.0

markdown-table 2.0.0

mini-css-extract-plugin 0.11.0

opn 5.5.0

optimize-css-assets-webpack-plugin 5.0.4

signale 1.4.0

table 6.0.7

terser-webpack-plugin 4.1.0

tslib 2.0.1

webpack 4.44.1

webpack-bundle-analyzer 3.8.0

webpack-inject-plugin 1.5.5

webpack-sources 1.4.3

@types/fs-extra 9.0.1

@types/hogan.js 3.0.0

@types/lodash.chunk 4.2.6

@types/markdown-table 2.0.0

@types/mini-css-extract-plugin 0.9.1

@types/opn 5.1.0

@types/optimize-css-assets-webpack-plugin 5.0.1

@types/table 6.0.0

@types/terser-webpack-plugin 4.1.0

@types/webpack-bundle-analyzer 3.8.0

@types/webpack-sources 1.4.2

plugins/storybook/package.json

@alisowski/storybook-addon-notes ^6.0.1

@babel/core ^7.13.8

@storybook/addon-a11y ^6.2.9

@storybook/addon-actions ^6.2.9

@storybook/addon-backgrounds ^6.2.9

@storybook/addon-knobs ^6.2.9

@storybook/addon-viewport ^6.2.9

@storybook/addons ^6.2.9

@storybook/cli ^6.2.9

@storybook/components ^6.2.9

@storybook/react ^6.2.9

@storybook/theming ^6.2.9

babel-loader 8.1.0

core-js 3.6.5

dedent 0.7.0

fast-glob 3.2.5

get-port 5.1.1

github-url-to-object 4.0.4

source-map-loader 1.1.0

story2sketch 1.7.0

storybook-addon-jsx ^7.3.0

storybook-addon-react-docgen ^1.2.44

storybook-addon-sketch ^0.2.0

storybook-dark-mode ^1.0.0

tslib 2.0.1

webpack 4.44.1

webpack-filter-warnings-plugin 1.2.1

@types/dedent 0.7.0

react 16.13.1

react-dom 16.13.1

react >= 16

react-dom >= 16

plugins/test/package.json

@babel/core ^7.13.8

@jest/transform 27.2.1

@jest/types 27.1.1

@testing-library/jest-dom 5.11.4

@types/jest 26.0.20

babel-plugin-istanbul 6.0.0

env-ci 5.0.2

identity-obj-proxy 3.0.0

jest 27.2.1

jest-github-reporter ^1.0.0

jest-junit 11.1.0

polyfill-object.fromentries 1.0.1

tslib 2.0.1

@types/babel__core 7.1.9

@types/env-ci 3.1.0

plugins/update/package.json

chalk 4.1.0

colorette 1.2.2

fs-extra 9.0.1

marked 1.1.1

marked-terminal 4.1.1

node-fetch 2.6.1

semver 7.5.2

tslib 2.0.1

@types/marked-terminal 3.1.1

@types/node-fetch 2.5.8

@types/semver 7.3.4

scripts/template-plugin/package.json

Check this box to trigger a request for Renovate to run again on this repository

Build Testing

One of the hardest parts of this project is testing because so much of the builds require external packages that run against the file system. Mocking lots of files would be an improvement, but also difficult.

I'd love to see some out-of-the-box thinking with regard to testing this project. Can we test scaffolding a new repo? Can we test a component build with different settings?

I'm open to suggestions and contributions in this space, but it may require looking at other projects like Create React App to see what they do.

ENOENT: no such file or directory, chmod - when trying to npm link

Describe the bug
Getting the following error when trying to npm link:
ENOENT: no such file or directory, chmod '/Users/uriklar/Code/test/bluxome/node_modules/@design-systems/cli/node_modules/@design-systems/core/bin/ds.js'

To Reproduce

I ran npm init @design-systems
Created a component using yarn run create
from the root folder of the generated folder (generated by the npm init command) i ran npm link

Expected behavior

npm link succeeds

Screenshots

Desktop (please complete the following information):

OS: MacOS Catalina 10.15.2

Additional context

Thanks for the awesome looking lib!!

Update Typings

This project uses typescript, and has a bunch of type declarations for projects that did not include types. It would be nice to see if these packages have official types now, or if we can contribute some of these types back to DefinitelyTyped.

We don't need a single PR to remove all of them, feel free to just make a PR if you're able to update a package. This is a great issue if you want to learn more about typescript and DefinitelyTyped!

`create system --list-templates` broken

Styled component templates should not have babel preset or style section

Is dark mode possible in the docs?

Is your feature request related to a problem? Please describe.

I noticed that the docs currently don't have dark mode.

Describe the solution you'd like

Add a toggle switch to toggle between light and dark mode. This would be really helpful.

Describe alternatives you've considered

N/A

Additional context

N/A

passing command line options to 'ds lint' ex. --max-warnings

i don't see a way to pass --max-warnings to ds lint

Is this possible?

Are you willing to accept open contribution to this feature? If yes, should it be open or opinionated?

ex.

ds lint --max-warnings 9

ds lint --options max-warnings=9

feature: upgrade to Yarn 2

Yarn 2 was released a year and a half ago, with the RC for Yarn 3 currently underway. The main benefits for me have been improvements to the workspaces feature, and the "zero node modules install" setup (where all your dependencies are zipped and committed into the repo)

https://yarnpkg.com/getting-started/qa#why-should-you-upgrade-to-yarn-modern

Wanted to check if there was interest before exploring whether that would be feasible in this repo.

Size Private NPM repos

Hello,

I have a my repositories under my private NPM account. I do not understand how to authorize the size command to have access to them. I have an .npmrc file with an auth token, but I believe the temp directory that is getting created to do the size calculation is outside of the project workspace? So the question is how do I allow size access to these private packages.

I get this error: Error: Couldn't find package "@myscope/package@^0.0.10" required by xyz.

To Reproduce

Run ds size on a repository that has private modules.

Expected behavior

Should be aware of my .npmrc or provide other method to pass authentication token.

Thanks in advance for the help.

yarn start: 'tsc' is not recognized as an internal or external command

Describe the bug

Project does not start due to tsc not being present.

To Reproduce

Fork repo
Run yarn
Run yarn start

Expected behavior

Success output.

Screenshots

Desktop (please complete the following information):

OS: Windows 10 Home
Browser N/A
Version No version present in intuit/design-systems-cli

a11y job fails looking for `proof-a11y.json`

Describe the bug

In a new design system, the a11y CI job fails with `Error: ENOENT: no such file or directory, open 'proof-a11y.json'.

To Reproduce

Follow the Getting Started instructions to generate and set up a new design system.
Run CI.

Expected behavior

Something would tell me what proof-a11y.json and how to create it (or create it for me).

I assume this is just something missing in the docs?

npm failing to install @design-systems

Describe the bug

Hello!

I'm following the instructions for installing the cli, and am receiving an npm error when initializing package.json

To Reproduce

From an empty directory, run npm init @design-systems

> npm --version
7.5.6
> npm init @design-systems
Need to install the following packages:
  @design-systems/create
Ok to proceed? (y) y
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:../cli-utils

Some research suggests that using file instead of link for local dependencies may resolve this issue. (ref: https://docs.npmjs.com/cli/v7/configuring-npm/package-json#dependencies)

Commit Lint Support

Is your feature request related to a problem? Please describe.
Since we have multiple contributors , its essential to maintain commit hygiene and ensure that commit message conventions are followed

Describe the solution you'd like

Setup Commitlint and configure a husky pre-commit hook to ensure that all commit messages are checked.

Describe alternatives you've considered

Commitlint paired with husky is the most recommended setup

Additional context

storybook not loading on IE with default configuration

Describe the bug

Sorry to post something about IE, but has anyone gotten the storybook to work when developing on IE? The default configuration will error out with:

To Reproduce

Create a design system with a component and load it in an IE env. (I am using IE 11 on windows 10).

Expected behavior

Seems like this should work, is more configuration required?

Screenshots

Desktop (please complete the following information):

OS: windows 10
Browser IE 11

Unhandled Promise Rejection when I enter project name

Followed the instructions and after using the command

npm init @design-systems

When I enter a name I get this error

Any idea how to fix?

Tests do not fail if coverage does not meet thresholds

Describe the bug

When running yarn test, if your tests do not meet jest coverage thresholds, your tests will still pass.

To Reproduce

Add a coverage threshold that is not met, and verify that test will still pass, even though an error is showing.

Expected behavior

If coverage thresholds are added, and they aren't met, the tests should fail. Preferably it would specify that it failed due to coverage.

Screenshots

Desktop (please complete the following information):

OS: MacOS Big Sur (11.6)
Browser: N/A
Version "@design-systems/cli": "4.13.1",

Additional context

Accessibility Keyboard Testing Issues

Describe the bug

2 Accessibility issues noticed while keyboard testing -

Type to search box getting skipped while tabbing
Commands like ds-build within the Commands section not getting associated with the Section name (Commands)

To Reproduce

Turn on voiceover on mac
Navigate to https://intuit.github.io/design-systems-cli/#/generated/build
Start pressing Tab

Expected behavior

Type to search box receiving focus while tabbing after focus on Design Systems Logo
"Commands" getting called out while focusing on various commands in the list like ds-build

Screenshots

N/A

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser : Chrome, Safari
Version: Chrome 114.0.5735.133, Safari Version 16.3 (18614.4.6.1.6)

Additional context

N/A

Add integration tests

They are needed quite badly

Update Proof plugin to latest version (0.1.1)

The proof plugin has fallen out of date: currently at 0.0.19. Facing an issue with proof right now and it is harder to debug against the older version. The issue may be fixed in the newer version as well. Could we get this bumped in an upcoming sprint please?

Alternatives:

Is there a way to separate out the packages?

Thanks!

Add support for component size limits

Is your feature request related to a problem? Please describe.

I want to define a perf budget in the form of a maximum component size. ds size allows me to set thresholds for changesets, but not for a component totally.

Describe the solution you'd like

The ds size command presently only considers the diff in size between the current changeset and the current release. I believe that with some minimal changes, we should be able to support a size limit for components.

It would be ideal to be able to specify a size limit on a component-by-component basis. I'm super new to this codebase, but it seems like ds.config is system-wide. If it's possible to make component-specific configurations, then exposing a size.limit configuration for a given component that is enforced by ds size would be great. Barring that, setting a size.limit for all components should be feasible as well.

Describe alternatives you've considered

ds size will can result in a report being added to Pull Requests via comments. It's possible to enforce a size limit by refusing to approve PRs where a limit is surpassed. ie. team norms
Possible to author instrumentation that parses output of ds size and fails if a limit is surpassed

Additional context

👋

Auto Formatting Code Using Prettier Action

Adding Prettier Actions will auto-format the CSS, HTML, JavaScript, Markdown files whenever there is a PR.

postcss-loader webpack config uses outdated options object

This bug was discovered when attempting to use @storybook/addon-postcss with Storybook 6.3.
There are deprecation warnings that postcss will require addon-postcss to function in Storybook 7.

Describe the bug

The options object for postcss-loader changed in v4.0.

To Reproduce

OLD:

          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: (
                await getPostCssConfig({
                  useModules: false
                })
              ).plugins
            }

Expected behavior

NEW:

          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              postcssOptions: { // This property is now required
                plugins: (
                  await getPostCssConfig({
                    useModules: false
                  })
                ).plugins
              }
            }

Screenshots

Omitting this new postcssOptions property will result in the following error:

Additional context

This error happens at build-time within the @design-systems/storybook plugin.
I have not explored further than that right now.
In the modify-webpack.js file, updating the postcss-loader to use the postcssOptions object will fully fix this issue.
This fix will break compatibility with postcss-loader v3.0 and lower, however this should not be a problem as postcss-loader is a controlled dependency of @design-systems/bundle.

Not reading the latest version of component template repo

Describe the bug

To Reproduce

Intro:
Git repo ICOM-componets is DS based repo: https://github.intuit.com/gotomarket-expdelactiv/icom-components
This repo using template-component-mds as component template.
Create component script is from here

Steps to reproduce:

git clone ICOM-components
run yarn install
run yarn create
check the template file format , for example, I created a component named MyTestComp. The index.tsx is like below screenshot.
Check the latest version of component template index.tsx file, here

Two files are not matching, it is not fetching the latest version of master branch from template-component-mds

Expected behavior

Screenshots

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Additional context

Add Contributing Guide

This repository could use a CONTRIBUTING.md and guide for people trying to set up the project.

Question: How to register additional Storybook addon?

Problem

I'd like to use @storybook/addon-docs in Storybook but I can't figure out how to register the addon using the local monorepo Storybook config files listed in the docs here.

I've tried adding a .storybook/addons.js file to the root of my monorepo but it's not clear to me what should go in there. Everything I have tried doesn't work. I've reviewed the addons-preset.js file in the @design-systems/storybook package but it's still not clear to me how it works.

I've setup an example repo with addon-docs setup (see orther/integration-ds#1). You can see the file changes here: https://github.com/orther/integration-ds/pull/1/files

Question

How can I configure Storybook to register an additional addon?

Playroom snippets aren't built starting at v1.7.0

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:

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

Expected behavior

Snippets are loaded and available in Playroom.

To get snippets working:

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`
  ]
};
// ...

Build components: yarn build
Run playroom: yarn playroom
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

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" />,
};

Test script does not fire the correct exit code during test suite failures

Describe the bug

When running ds test, a non-zero exit code is not being fired for all types of test failures. This caused our CICD to release a new version of our package, despite us having failing test suites.

To Reproduce

Simulate any test suite failure. For example, you can call ds test on an empty test file.
2a. Run echo $? and see that the exit code is still 0 (success) when it should be 1.
2b. OR, you could run your test in a Jenkins pipeline, and observe how the pipeline passes even though the test results show errors

Expected behavior
Jenkins CI should error out for any testing failures.

Screenshots

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Additional context

Custom config breaks module imports with Storybook

Describe the bug

In the storybook section of the docs there are instructions on how to add custom storybook configuration. (https://intuit.github.io/design-systems-cli/#/generated/storybook).

I am trying to add a custom config file as described in the instructions. I am creating a '.storybook' folder at the root of my ds project and adding 'config.js' (also tried with ts) within that folder.

When i do this it breaks module imports in my components themselves. If i remove the custom config file the issue goes away. This happens even if the config file is empty.

Is there additional logic I should be including in the config file?

To Reproduce

Create a '.storybook' folder at the root and add a 'config.js' file within it. Try to import a package into a component.

Expected behavior

Expect no issues importing packages within the component.

Screenshots

Desktop (please complete the following information):

OS: 10.15
Browser chrome
Version 79

custom storybook config breaks component level yarn dev

Describe the bug

Perhaps I am just doing something incorrectly but here is what I am experiencing:

When adding JSX to a custom storybook config (`.storybook/config.js) webpack cannot complete the build when using yarn dev from the individual package level.

To Reproduce

Create a new design system with the CLI.

Add a custom decorator to .storybook/config.js.

maybe something like:

import React from 'react';
import { configure } from '@storybook/react';
import { makeDecorator } from '@storybook/addons';
import { addDecorator } from '@storybook/react';

// allows styling of your story's container.
const withContainer = makeDecorator({
  name: 'withContainer',
  parameterName: 'container',
  wrapper: (storyFn, context, { parameters }) => {
    return (
      <div {...parameters}>
        {storyFn()}
      </div>
    );
  }
});

addDecorator(withContainer);

configure(
  require.context(
    COMPONENT,
    true,
    /^\.\/((?!node_modules).)*\.stories\.(tsx|ts|js|jsx|mdx)$/
  ),
  module
);

create a component.

cd into that component's package.

run yarn dev.

Expected behavior

yarn dev should work at both the component and the root level

Screenshots

Thanks everyone!

error: pathspec 'new' did not match any file(s) known to git during installation

Describe the bug

Install script fails.

To Reproduce

Clean install on Windows following documentation.

Expected behavior

To finish install without errors.

Desktop:

Windows 10 Enterprise, 10.0.18363,
Node v11.4.0
Yarn v1.17.3

Additional context

Here is the entire output log:

PS C:\Users\username\Dev\Projects> npm init @design-systems
npx: installed 1 in 3.529s
[create....] » 🤞  pending      Cloning template...
? What's the system name? ds
? What's your name? username
? What's your email? [email protected]
? Starting version? You probably don't want to change this 0.0.0
? Repository url or owner/repo: https://github.com/..../ds
[create....] » 💾  info         Initializing git repo
[create....] » ⏳  awaiting     Running yarn. This may take a bit...
✓ Installing dependencies 1 ms
error: pathspec 'new' did not match any file(s) known to git
error: pathspec 'design' did not match any file(s) known to git
error: pathspec 'system'' did not match any file(s) known to git
(node:480) UnhandledPromiseRejectionWarning: Error: Command failed: cd ds && git add . && git commit --no-verify -m 'Create new design system'
error: pathspec 'new' did not match any file(s) known to git
error: pathspec 'design' did not match any file(s) known to git
error: pathspec 'system'' did not match any file(s) known to git

    at checkExecSyncError (child_process.js:639:11)
    at Object.execSync (child_process.js:676:15)
    at Object.e.default (C:\Users\username\AppData\Roaming\npm-cache\_npx\25356\node_modules\@design-systems\create\dist\bundle.js:194:425)
    at processTicksAndRejections (internal/process/task_queues.js:86:5)
(node:480) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:480) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

intuit / design-systems-cli Goto Github PK

design-systems-cli's Introduction

Overview

Features

Installation

To get started:

Creating a new Plugin

Contributing

Contributors ✨

design-systems-cli's People

Contributors

Stargazers

Watchers

Forkers

design-systems-cli's Issues

Rate-Limited

Edited/Blocked

Open

Detected dependencies

Problem

Question

Recommend Projects

Recommend Topics

Recommend Org