Package Reorganization

[swissspidy]

Task Description

Our current repository structure has organically grown over the past year to a point where we have multiple different "packages" spread across different folders. Some of them are pretty self-contained and could be easily published standalone (e.g. all the Karma packages), others are a bit more intertwined with other packages. Some are used for build tooling, others for the WordPress integration or the actual editor.

At the same time, they all share the same package.json file, making it difficult to know which packages actually use a certain dependency. That's why I propose adopting npm workspaces using the newly released npm v7 version.

This would make maintenance a lot easier.

To get there we need to get our directory structure in shape to make working with our "packages" more straightforward.

Packages

I propose making /packages the root for all our packages, containing the following directories (incomplete list):

Package	Status	Ticket / PR	Description
animation	✅	#6042	Animations library.
commander	✅	#4853	build/release tool for the plugin
dashboard	✅	#6052	Web Stories dashboard
date	✅	#6043	Date time library (based on date-fns)
design-system	✅	#6051	New design system with shared components for editor and dashboard
story-editor	✅	#6050	Web Stories editor
fonts	✅	#4853	Provides fonts (system + Google Fonts) and their font metrics
i18n	✅	#6049	I18N library, providing helper functions
templates	✅	#6044	Templates
text-sets	✅	#6046	Text Sets
tracking	✅	#6047	Telemetry library
Jest
jest-amp	✅	#4853	Contains custom Jest matchers for AMP validation
jest-puppeteer-amp	✅	#4853	Contains custom Jest matchers for AMP validation in Puppeteer context (depends on jest-amp)
Karma
karma-cuj-reporter	✅	#4853	(moved from /karma) - Our custom Karma CUJ reporter
karma-failed-tests-reporter	✅	#4853	(moved from /karma) - Our custom Karma reporter to retry failed tests
karma-fixture	✅		(moved from /assets/src) - Fixtures to use in Karma tests
karma-puppeteer-client	✅	#4853	(moved from /karma) - Our custom Karma <-> Puppeteer client
karma-puppeteer-launcher	✅	#4853	(moved from /karma) - Our custom Karma <-> Puppeteer launcher
WordPress
activation-notice	✅	#6041	WordPress plugin activation notice.
e2e-test-utils	✅	#6048	Custom test utils to use in E2E tests.
e2e-tests	✅	#6290	The E2E tests themselves.
story-embed-block	✅		Gutenberg block for embedding single stories.

More can be added as identified

Anatomy of a package

Each package has its own README and and package-specific config files.

The repository root contains base config files that can be shared with packages.