thomas-lowry / figma-plugin-ds

A small lightweight design system for use in Figma Plugins
MIT License
693 stars 71 forks source link

Add a `package.json` #11

Closed yuanqing closed 4 years ago

yuanqing commented 4 years ago

This is to add a package.json with scripts to build the CSS and JS files (via node-sass and terser respectively).

More things that can be done if this PR is merged:

  1. Bump the version in the package.json and publish as a module to npm
  2. Add scripts to build the docs (pug)
  3. Add scripts to lint (eslint, stylelint) and auto-format (prettier) the JS and CSS
  4. Travis CI integration
phil-lgr commented 4 years ago

I'm starting to contribute to https://github.com/oriziv/figma-sass-less-plugin and I would like to consume this lib via npm! That would be awesome to have a versions and a changelog

phil-lgr commented 4 years ago

@yuanqing may I suggest to add:

npm i --save-dev commitizen cz-conventional-changelog standard-version

and then add the following commands to the scripts so we have automated CHANGELOG generation

"config": {
        "commitizen": {
            "path": "node_modules/cz-conventional-changelog"
        }
    },
    "husky": {
        "hooks": {
            "pre-commit": "prettier --write CHANGELOG.md --loglevel silent && git add CHANGELOG.md"
        }
    },
    "scripts": {
        "prettier": "prettier --write ./src/**/* ./*.js",
        "commit": "git-cz",
        "changelog": "standard-version",
        "release": "git push --follow-tags"
    },

usage would look like this:

### Commit Style with [Commitizen](http://commitizen.github.io/cz-cli/)

To commit in this repository use `git-cz` (with `commitizen` installed globally) or `npm run commit` when committing.

You'll be prompted to fill in any required fields and your commit messages will be formatted according to the standards defined by project maintainers:

```bash
$ npm run commit

cz-cli@4.0.3, cz-conventional-changelog@3.0.2

? Select the type of change that you're committing: (Use arrow keys)
❯ feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect the meaning of the code (white-space, formatting, ...
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests or correcting existing tests
(Move up and down to reveal more choices)

Releases & Changelog

To publish new version:

# update changelogs interactively
npm run changelog

# push commit and tags
npm run release
phil-lgr commented 4 years ago

@thomas-lowry if we can have a reply from you here I would appreciate, thanks!

yuanqing commented 4 years ago

may I suggest to add

@phil-lgr For sure! I think that could be a separate PR after this one is merged?

phil-lgr commented 4 years ago

I talked to tom on the Slack channel for plugins and he will get back to us soon

phil-lgr commented 4 years ago

I will keep you in the loop

yuanqing commented 4 years ago

Log when we do npm publish:

$ npm publish --dry-run
npm notice 
npm notice 📦  figma-plugin-ds@0.0.0
npm notice === Tarball Contents === 
npm notice 137.3kB figma-plugin-ds.css                     
npm notice 131.5kB figma-plugin-ds.min.css                 
npm notice 1.5kB   js/disclosure.js                        
npm notice 5.7kB   figma-plugin-ds.min.js                  
npm notice 1.6kB   js/iconInput.js                         
npm notice 12.0kB  js/selectMenu.js                        
npm notice 919B    package.json                            
npm notice 29.2kB  figma-plugin-ds.css.map                 
npm notice 1.4kB   README.md                               
npm notice 2.3kB   scss/icons/_adjust.scss                 
npm notice 2.4kB   scss/icons/_alert.scss                  
npm notice 911B    scss/icons/_align-bottom.scss           
npm notice 1.4kB   scss/icons/_align-middle.scss           
npm notice 903B    scss/icons/_align-top.scss              
npm notice 714B    scss/icons/_angle.scss                  
npm notice 1.2kB   scss/icons/_animated-fill.scss          
npm notice 1.0kB   scss/icons/_arrow-left-right.scss       
npm notice 1.0kB   scss/icons/_arrow-up-down.scss          
npm notice 31B     scss/base/_base.scss                    
npm notice 2.9kB   scss/icons/_blend-empty.scss            
npm notice 2.5kB   scss/icons/_blend.scss                  
npm notice 3.0kB   scss/icons/_break.scss                  
npm notice 1.4kB   scss/components/_button.scss            
npm notice 1.2kB   scss/components/_checkbox.scss          
npm notice 936B    scss/icons/_close.scss                  
npm notice 1.6kB   scss/icons/_comment.scss                
npm notice 2.5kB   scss/icons/_component.scss              
npm notice 631B    scss/icons/_corner-radius.scss          
npm notice 1.1kB   scss/icons/_corners.scss                
npm notice 1.8kB   scss/components/_disclosure.scss        
npm notice 832B    scss/icons/_dist-horiz-spacing.scss     
npm notice 816B    scss/icons/_dist-vert-spacing.scss      
npm notice 129B    scss/components/_divider.scss           
npm notice 745B    scss/icons/_draft.scss                  
npm notice 3.4kB   scss/icons/_effects.scss                
npm notice 1.5kB   scss/icons/_ellipses.scss               
npm notice 1.4kB   scss/icons/_eyedropper.scss             
npm notice 738B    scss/icons/_frame.scss                  
npm notice 2.0kB   scss/icons/_group.scss                  
npm notice 2.2kB   scss/icons/_hidden.scss                 
npm notice 2.4kB   scss/icons/_hyperlink.scss              
npm notice 1.2kB   scss/components/_icon.scss              
npm notice 2.5kB   scss/icons/_image.scss                  
npm notice 1.6kB   scss/icons/_import.scss                 
npm notice 1.6kB   scss/components/_input-icon.scss        
npm notice 1.5kB   scss/components/_input.scss             
npm notice 829B    scss/icons/_instance.scss               
npm notice 212B    scss/components/_label.scss             
npm notice 830B    scss/icons/_layout-align-bottom.scss    
npm notice 584B    scss/icons/_layout-align-horiz-cent.scss
npm notice 828B    scss/icons/_layout-align-left.scss      
npm notice 829B    scss/icons/_layout-align-right.scss     
npm notice 827B    scss/icons/_layout-align-top.scss       
npm notice 588B    scss/icons/_layout-align-vert-cent.scss 
npm notice 795B    scss/icons/_layout-grid-columns.scss    
npm notice 798B    scss/icons/_layout-grid-rows.scss       
npm notice 1.9kB   scss/icons/_layout-grid-uniform.scss    
npm notice 5.2kB   scss/icons/_library.scss                
npm notice 1.2kB   scss/icons/_link-broken.scss            
npm notice 1.5kB   scss/icons/_link-connected.scss         
npm notice 1.3kB   scss/icons/_list-detailed.scss          
npm notice 791B    scss/icons/_list.scss                   
npm notice 1.2kB   scss/icons/_lock-unlocked.scss          
npm notice 1.3kB   scss/icons/_lock.scss                   
npm notice 1.9kB   scss/icons/_mask.scss                   
npm notice 508B    scss/icons/_minus.scss                  
npm notice 1.7kB   scss/base/_mixins.scss                  
npm notice 1.8kB   scss/icons/_node-connect.scss           
npm notice 500B    scss/components/_onboarding-tip.scss    
npm notice 667B    scss/icons/_play.scss                   
npm notice 490B    scss/icons/_plus.scss                   
npm notice 1.2kB   scss/icons/_recent.scss                 
npm notice 1.8kB   scss/icons/_reset-instance.scss         
npm notice 1.9kB   scss/icons/_resize-to-fit.scss          
npm notice 1.0kB   scss/icons/_resolve-filled.scss         
npm notice 1.5kB   scss/icons/_resolve.scss                
npm notice 1.6kB   scss/icons/_restore.scss                
npm notice 994B    scss/icons/_return.scss                 
npm notice 1.4kB   scss/icons/_search-large.scss           
npm notice 1.9kB   scss/icons/_search.scss                 
npm notice 218B    scss/components/_section-title.scss     
npm notice 4.1kB   scss/components/_select-menu.scss       
npm notice 3.4kB   scss/icons/_share.scss                  
npm notice 2.8kB   scss/icons/_smiley.scss                 
npm notice 1.2kB   scss/icons/_star-off.scss               
npm notice 614B    scss/icons/_star-on.scss                
npm notice 800B    scss/icons/_stroke-weight.scss          
npm notice 2.1kB   scss/icons/_styles.scss                 
npm notice 1.0kB   scss/components/_switch.scss            
npm notice 787B    scss/components/_textarea.scss          
npm notice 1.9kB   scss/icons/_tidy-up-grid.scss           
npm notice 828B    scss/icons/_tidy-up-list-horiz.scss     
npm notice 820B    scss/icons/_tidy-up-list-vert.scss      
npm notice 2.7kB   scss/icons/_timer.scss                  
npm notice 1.8kB   scss/icons/_trash.scss                  
npm notice 2.0kB   scss/components/_type.scss              
npm notice 616B    scss/icons/_type.scss                   
npm notice 777B    scss/base/_typography.scss              
npm notice 2.5kB   scss/base/_variables.scss               
npm notice 1.5kB   scss/icons/_vector-handles.scss         
npm notice 2.0kB   scss/icons/_visible.scss                
npm notice 2.2kB   scss/components/_visual-bell.scss       
npm notice 563B    scss/icons/_warning.scss                
npm notice 2.8kB   scss/figma-plugin-ds.scss               
npm notice === Tarball Details === 
npm notice name:          figma-plugin-ds                         
npm notice version:       0.0.0                                   
npm notice package size:  74.2 kB                                 
npm notice unpacked size: 460.1 kB                                
npm notice shasum:        0b9564d032147d6c7a6d59747d88120611e898bd
npm notice integrity:     sha512-N4YQafeuoLP1x[...]zJyyjhF7p5euw==
npm notice total files:   104                                     
npm notice 
+ figma-plugin-ds@0.0.0
afnizarnur commented 4 years ago

Any update with this?

thomas-lowry commented 4 years ago

Sorry for the delay. I haven't had time to review as I just finished working on a Svelte version of this.

I would like to refactor some of this repo with a package.json and more of a build process but I want to rethink how the CSS, and icons are implemented, as well as some sort of tree shaking process.

Starting work on this, this weekend. Stay tuned.