Pavewise - Style Guide & More
  • At a Glance
    • Tech Stack
  • Frontend
    • Overview
    • Config & Tooling
      • Editor / IDE setup
        • General
        • Snippets
        • Formatting
          • "Format on save"
          • Prettier (.prettierrc)
        • Linting
          • ESLint (.eslintrc.json)
        • TS Config (tsconfig.json)
      • Browser setup
      • Command Line setup
        • Aliasing (.zshrc, etc.)
    • Workflow
    • Basic Guidelines
      • JavaScript
      • React
      • TypeScript
    • Naming
      • Extensions
      • Folders/Directories
      • Filenames
      • Declarations
    • Our Systems
      • Overview
      • Pages
        • File-based routing
        • "Route" folder
      • Components
        • Overview
        • MUI
          • General
          • Styling choices
          • Choosing Components
        • StorybookJS
      • State Management
        • General State Strategy
        • Client Global State
        • Server Global State
        • URL state
      • Data Fetching & APIs
        • "api" object
        • "Router" folder
      • Forms
      • Charts
      • Tables
    • Additional
      • Styling
      • Helpful websites/tools
    • // TODO
      • Component Architecture
      • Component Structure
      • Creating a New Component...
    • 🥳 Onboarding
    • 👩‍🏫 Learning Resources
      • ReactJS
        • Function Declarations vs Function Expressions
      • TypeScript
      • (Global) State Management
      • Charting Libraries (JS)
      • (Not Implemented)
        • StorybookJS
        • NextJS
  • API
    • Overview
    • Introduction
    • Versioning
    • Authentication
    • HTTP Methods
    • Endpoints
    • Query Params
    • Request & Response Format
    • Error Handling
    • Status Codes
    • Database Relationship Types
    • Additional Topics
      • Rate Limiting
    • 💻 Examples
    • 👩‍🏫 Learning Resources
  • Backend
    • Overview
    • Workflow
    • Topics
    • File Setups
      • Routes (routes.rb)
      • Schema (schema.rb)
      • Models (models/x.rb)
      • Controllers (x_controller.rb)
        • Database Relationships
        • Controller Actions
          • :index
          • :show
          • :create
          • :update
          • :destroy
        • Controller Concerns
          • :index
            • QueryParamsProcessor
          • :show (none)
          • :create (none)
          • :update (none)
          • :destroy (none)
        • Controller [X]
          • :index (none)
          • :show (none)
          • :create (none)
          • :update (none)
          • :destroy (none)
        • Controller [Y]
          • :index (none)
          • :show (none)
          • :create (none)
          • :update (none)
          • :destroy (none)
        • Other Information
          • Multi-table Data Retrieval via Single Frontend Request
    • Database Tables
      • Roles / Permissions
    • Ruby gems
    • AI
    • 👩‍🏫 Learning Resources
      • Ruby on Rails (Rails)
  • Database
    • Overview
    • 👩‍🏫 Learning Resources
  • Dev Ops
    • Overview
    • 👩‍🏫 Learning Resources
Powered by GitBook
On this page
  • General
  • Creating a new Page
  1. Frontend
  2. // TODO

Creating a New Component...

PreviousComponent StructureNext🥳 Onboarding

Last updated 10 months ago

General

  • Icons

    • Always use MUI Icons, (prefer "rounded" when available in that version)

  • JSX

Creating a new Page

  • (1) A new page should be created

    • Filename: index.tsx

    • Location: src/pages/[page-name]/index.tsx

  • (2) A new components folder (and subfolder) should be created

    • Folder name: _components/

    • Location: src/pages/[page-name]/_components/

  • (3) Use our current template for PodX.tsx components

    • Aka, copy everything within components/team-members & paste into components/[page-name]

    • **TODO: UPDATE THIS SECTION

which can be found here
Always prefer MUI components (vs plain JSX)