0.1.3 • Published 3 years ago

cra-template-base-stitches v0.1.3

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

About

See it live

Screenshots

This project used:

In General

  • Folder organization in which content is in a descriptive folder with index file and optional files
    • Types are kept in types.ts
    • Styles are kept in styles.ts
    • Tests are kept in tests.ts
    • Local components are kept in /components local folder with same structure
    • Local hooks are kept in /hooks local folder
    • Local translations are kept in /localization local folder

On Components

  • Props extending HTML tags and with component name as prefix
  • Ref forwarding
  • Arias: busy & disabled,
  • Props order: "rest & ref", "arias", "props"
  • ConditionalStatements & Returns section
  • Maps
  • Styled Component
  • "S" namespace for Styled Components
  • Styles with propStyles variable

On Styles and Theming

  • DefaultStyles variable & file
  • ResetStyles variable & file
  • Animations variable & file
  • Global Styles
  • MUI Custom Theming

On Context

  • Error handling
  • "value" variable with "get" and "set" objects to organize better
  • Memo to memoize "value" and help with unecessary re-renders
  • Categorized content sections as "Utility Information" and others by necessity

As libs

  • React Icons
  • Styled Components
  • Material UI (with Styled Component support libs)
  • Framer Motion
  • Immer (and use-immer)
  • Typescript
  • Jest, React Testing Library, User Event and MSW (Mock Service Worker)
  • Prettier and ESLint (ESLint Plugin Jest included)
  • i18n (i18next)
  • Craco (to override Create React App configuration and allow Styled Components with MUI)

Useful Specific Libs

  • Routes handling: npm i react-router-dom
  • Requests Handling: npm i axios
  • Form Handling: npm i react-hook-form
  • Manipulating Tab Text: npm i react-helmet-async
  • Date Operations: npm i date-fns
  • Calendar/Date Picker: npm i react-day-picker
  • Dropzone: npm i react-dropzone
  • Text Editor: npm i react-draft-wysiwyg draft-js
  • Menus: npm i @szhsin/react-menu (if MUI is not satisfactory, use this one)
  • Tutorials: npm i reactour (needs Styled Components)
  • Complex Animations: npm i react-lottie (After Effects style)
  • Chart Creation: npm i react-chartjs-2 chart.js

Folder Structure inside Global and Pages:

Rules

  • Folders must have category names or descriptive names
  • Use index files for entry points of folders
  • When next to index file, other files must have category names, otherwise they can be descriptive names
  • Aggregator files gather contents to export as one

Categories:

  • components: holds React components
  • constants: holds data that does not change
  • contexts: holds React contexts
  • hooks: holds React hooks
  • resources: holds media files (images, vectors, videos, subtitles, music, sfx, 3d, rigs)
  • styles: holds stylization files
  • tests: holds test files
  • types: holds type files
  • utilities: holds pure functions
  • animations: holds animation-related files
  • services: holds request-related files
  • translations: holds translation-related files

Ps: Group in folders based on functionality first, and then on categories inside these functionalities

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago