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