ui

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack

Sep 20, 2021
An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack

rocket-science

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

🎯 Goals

  • βœ… Build UI components/pages in isolation
  • βœ… Display test coverage and documentation for each component
  • βœ… Complete control of dynamic input values for each component for edge case testing
  • βœ… Easily view all device sizes
  • βœ… Performance metrics for both server and client
  • βœ… ADA accessibility audit for each component
  • βœ… Easily create a new component from a CLI
  • β­• Mock API
  • βœ… Client Render
  • β­• Server Side Render
  • β­• Static Site Generation
  • β­• Micro Frontend Render

πŸ€– Technologies

Storybook

Component Story Format 3.0

Module Federation

Module Federation | webpack

Typescript

The starting point for learning TypeScript

Jest

How to Test React Components in TypeScript

β–Ά Getting Started

  1. clone repo or run npx create-rs-app
  2. cd into repo
  3. run yarn
  4. run yarn test
  5. run yarn storybook

Optional commands to push to your own git repository

  1. git remote set-url origin https://github.com/user/repo.git (your remote repository)
  2. git remote -v (verify new remote)
  3. git push -u origin main

🧩 Generate New Component

  1. run yarn generateComponent
  2. provide CLI tool the name of your component
  3. check for the following files under ./src/components/yourComponentNameHere
    • index.ts
    • yourComponentNameHere.tsx
    • yourComponentNameHere.styles.ts
    • yourComponentNameHere.test.ts
    • yourComponentNameHere.stories.tsx
    • README.md

❓ Help

  • Contact me via email, listed in package.json

GitHub

https://github.com/SketchLagoon/rocket-science

Recommended