Add storybook and initial configuration - Githubissues

micah5 / PSone.css

🎮 PS1 style CSS Framework, inspired by NES.css

https://micah5.github.io/PSone.css/

MIT License

620 stars 33 forks source link

Add storybook and initial configuration #17

Closed guastallaigor closed 5 years ago

guastallaigor commented 5 years ago

This PR adds an initial configuration for better development and testing, such as:

Package.json configuration: This configuration contains storybook, autoprefixer, cleancss, postcss and poi, with all the other fields filled.
Added storybook configuration and 5 stories using addon-backgrounds and addon-knobs.
Added .editorconfig, .gitignore, .npmignore.
Updated README.md, adding a development section.

Commands

To build the project run npm run build:main (this doesn't generate the minified css yet)
To develop a new component and test each component individually, run npm run storybook
To make changes in the demo page (index.html file) run npm run dev (right now you must have yarn installed as well). This gives you hot module replacement to easier and faster development

Caveats

I couldn't make progress.stories.js work yet, I don't know why. But maybe we could think about refactoring from <div style="width...> to <progress>
I didn't add any linter/commitlint because I don't know if you want that.
I didn't add .scss also for the same reason.

Any changes let me know. Thank you.

micah5 commented 5 years ago

Wow, awesome stuff thanks! This really makes the repo look a lot more approachable.

In regards to linting, I don't really have a preference. Feel free to add one if you like. I do think we should add a sass compiler though