OLD - AFFiNE Docs
  • ⚠️
  • ⚠️ This website is inactive
  • ⚠️ For reference only
  • ⚠️ Please use our community site
  • ⚠️ community.affine.pro
  • ⚠️
  • Welcome
    • Welcome to the AFFiNE Docs!
  • Getting Started
    • 🎉Welcome
    • 🆒Install AFFiNE with Docker
    • 💻Deploy AFFiNE to Vercel
    • 🌟How to Get Help
  • Developer Docs
    • 🎉Welcome
    • 🌳Setup
    • 🗂️Working with our code
    • 🖥️Contributions
      • ☘️Writing CSS in AFFiNE
      • 💐Adding UI Components
        • 📐Customize rollup config
      • 🌱Icons
      • 🌐Internationalization
    • 🔭Architecture
      • 🎼CodeMap
      • 💫Editor (Virgo)
      • 🦄Whiteboard (Phasor)
      • 💎Collaboration (OctoBase)
    • 📚Glossary
    • 📒AFFiNE Mentorship Program
  • Internationalization
    • 🎉Welcome
    • 📋Apply
    • 📘Operation Guide
    • 📝Contributors
  • AFFiNE Ambassadors
    • 🎉Welcome
    • ✔️Requirements
    • 🎁Benefits
    • 📋Apply
    • ❓FAQ
    • 📚Branding resources
    • 📝Best practices
    • 📑Resources
  • Branding Resources
    • 🎉Welcome
    • Logo (icon)
    • Logo (text)
    • Logo (3D)
    • Tagline banners
    • Colors
  • Community Links
    • 📢AFFiNE Community
    • 🗣️Official Communities
    • 📗Community Resources
Powered by GitBook
On this page
  • Quick overview
  • Useful scripts

Was this helpful?

  1. Developer Docs

Working with our code

To help you get started here are some quick tips and info.

Quick overview

The basic directory structure conventions in this repository are described here.

  • Generic functional components (e.g. atomic UI components) are placed in libs/components/common.

    • Components within common are not allowed to import other components except utils and dependencies.

    • Common components can dependent on each other.

  • Components containing business logic are placed in libs/components. The editor and draw prefixes are used to distinguish them.

  • Data source components are placed in libs/datasource, including API requests, schemas, etc.

Useful scripts

Some commonly used commands defined in package.json are listed here.

# Create react dependency library
pnpm run add:library

# Create react components
pnpm run add:components

# Create a data source
pnpm run add:datasource

# Run unit tests
pnpm test

# Compile or test or lint specific component
pnpm build|test|lint ${project name from workspace.json}
PreviousSetupNextContributions

Last updated 2 years ago

Was this helpful?

🗂️