in

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

  • ✅ 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

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

  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
  • Contact me via email, listed in package.json

GitHub

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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Tata Communications Introduces New Ethernet Service for Enterprises

Steps to set up on prem domain for identity synchronization