Skip to content

RTurek/slick-ui

Repository files navigation

Netlify Status CircleCI

license Follow on Twitter

slick-ui (alpha)

slick-ui is a component library based on Material-UI and the Material Design System. At the moment this is just a side project for fun, practice, and teaching.

This library is a collection of work I've done over the last few years that demonstrates my ui development capabilities. It's meant for use on my other side projects, not necessarily for use by the general public.

Frontend architecture, ui component development, accessibility, clean and maintainable code, user experience, documentation, and ui testing are my passions as a developer. I like to live where all of those things come together!

Things I'm playing around with for this project just to practice and learn...

  • React.js
  • Material-UI
  • Semantic HTML
  • styled-components (css-in-js)
  • Jest and storybook testing
  • eslint / stylelint
  • Storybook
  • Netlify
  • CircleCI
  • Codecov
  • (not yet) tailwindcss (utility based css)
  • (not yet) TypeScript
  • (not yet) Custom HTML Elements (web components)
  • Accessibility testing

Demo

https://slick-ui.netlify.app/

Instructions for LOCAL development

Clone slick-ui from GitHub - https://github.com/rturek/slick-ui

  gh repo clone rturek/slick-ui

Dependencies:

The project might work with previous versions, but I can only guarantee it works on these versions

  • node v14.17.6
  • npm v8.1.2

Install

  npm install

Tests

Run tests

  npm run test

Update Snapshots

  npm run test -u

Coverage report should be generated at coverage/lcov-report/index.html

Lint

  npm run lint
  npm run lint:css

Storybook

Local Development

  npm run storybook

Static Build

  build-storybook -c .storybook -o static-storybook

Upgrade Storybook

Requires @storybook/cli

  npx sb upgrade

Netlify Deployment

Netlify Status

https://slick-ui.netlify.app/

Netlify pulls from the deploy-netlify-storybook branch in this repo to deploy to the URL above. To start a new deploy, you should get deploy-netlify-storybook up to date with main OR push whatever changes you'd like to test to the deploy branch, and Netlify will automatically run the storybook static build and publish the updates when the branch is updated on GitHub.

  git checkout deploy-netlify-storybook
  git rebase main
  git push