intuit / design-systems-cli Goto Github PK
View Code? Open in Web Editor NEWA CLI toolbox for creating design systems.
Home Page: https://intuit.github.io/design-systems-cli/#/
License: MIT License
A CLI toolbox for creating design systems.
Home Page: https://intuit.github.io/design-systems-cli/#/
License: MIT License
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 normsds size
and fails if a limit is surpassedAdditional context
👋
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
Expected behavior
Jenkins CI should error out for any testing failures.
Screenshots
Desktop (please complete the following information):
Additional context
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
How can I configure Storybook to register an additional addon?
Adding Prettier Actions will auto-format the CSS, HTML, JavaScript, Markdown files whenever there is a PR.
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.
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.
Describe the bug
2 Accessibility issues noticed while keyboard testing -
To Reproduce
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):
Additional context
N/A
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:
yarn clean --no-modules
yarn build
yarn playroom
Expected behavior
Snippets are loaded and available in Playroom.
To get snippets working:
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`
]
};
// ...
yarn build
yarn playroom
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):
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" />,
};
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):
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!
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
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?
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
semver
, @types/semver
)table
, @types/table
)@auto-it/all-contributors
, @auto-it/first-time-contributor
, @auto-it/jira
, @auto-it/released
, @auto-it/slack
, @types/autoprefixer
, auto
, stefanzweifel/git-auto-commit-action
)@babel/code-frame
, @babel/core
, @babel/plugin-proposal-class-properties
, @babel/plugin-transform-runtime
, @babel/preset-env
, @babel/preset-react
, @babel/preset-typescript
, @babel/register
, @babel/runtime
, @babel/traverse
, @babel/types
, @types/babel__code-frame
, @types/babel__core
, babel-loader
, babel-plugin-istanbul
, babel-plugin-macros
, babel-plugin-styled-components
, babel-preset-jest
)fs-extra
, @types/fs-extra
)markdown-table
, @types/markdown-table
)mini-css-extract-plugin
, @types/mini-css-extract-plugin
)svgo
, @types/svgo
)terser-webpack-plugin
, @types/terser-webpack-plugin
)webpack-sources
, @types/webpack-sources
)@jest/transform
, @jest/types
, jest
)@storybook/addon-a11y
, @storybook/addon-actions
, @storybook/addon-backgrounds
, @storybook/addon-knobs
, @storybook/addon-viewport
, @storybook/addons
, @storybook/cli
, @storybook/components
, @storybook/react
, @storybook/theming
)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
case-sensitive-paths-webpack-plugin
, @types/case-sensitive-paths-webpack-plugin
)autoprefixer
, icss-utils
, postcss-hexrgba
, postcss-load-config
, postcss-loader
, postcss-modules
, postcss-nested
, postcss-url
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
resolve
, @types/resolve
)@proof-ui/a11y-plugin
, @proof-ui/add-all-plugin
, @proof-ui/babel-plugin
, @proof-ui/cli
, @proof-ui/config
, @proof-ui/junit-plugin
, @proof-ui/skip-tests-plugin
)webpack-bundle-analyzer
, @types/webpack-bundle-analyzer
)@types/eslint
, @typescript-eslint/eslint-plugin
, @typescript-eslint/parser
, eslint
, eslint-config-airbnb
, eslint-config-prettier
, eslint-config-xo
, eslint-config-xo-react
, eslint-formatter-github
, eslint-formatter-pretty
, eslint-plugin-import
, eslint-plugin-jest
, eslint-plugin-jsdoc
, eslint-plugin-jsx-a11y
, eslint-plugin-mdx
, eslint-plugin-no-explicit-type-exports
, eslint-plugin-prettier
, eslint-plugin-react
, eslint-plugin-react-hooks
, prettier
)react
, react-dom
, react-test-renderer
)@types/stylelint
, stylelint
, stylelint-config-css-modules
, stylelint-config-prettier
, stylelint-config-recommended
, stylelint-declaration-block-no-ignored-properties
, stylelint-formatter-pretty
, stylelint-order
, stylelint-selector-tag-no-without-class
)@testing-library/jest-dom
, @testing-library/react
, @testing-library/react-hooks
)action.yml
actions/checkout v2
actions/setup-node v1
stefanzweifel/git-auto-commit-action v4.14.1
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
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:
yarn install
yarn create
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):
Additional context
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
.
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.
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
Desktop (please complete the following information):
Additional context
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):
"@design-systems/cli": "4.13.1",
Additional context
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
or
ds lint --options max-warnings=9
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
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!
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):
Describe the bug
Project does not start due to tsc
not being present.
To Reproduce
yarn
yarn start
Expected behavior
Success output.
Screenshots
Desktop (please complete the following information):
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
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
.
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!
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)
This repository could use a CONTRIBUTING.md and guide for people trying to set up the project.
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.
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):
Additional context
Thanks for the awesome looking lib!!
They are needed quite badly
Describe the bug
Install script fails.
To Reproduce
Clean install on Windows following documentation.
Expected behavior
To finish install without errors.
Desktop:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.