[Component Architecture] 10.3 Iteration Plan

[joshblack]

10.3 Iteration Plan

This plan captures our work on the Component Architecture project for May. This work will introduce updates to the underlying development process, from introducing a new structure to the system through a monorepo to tackling component testing through a formal specification.

Endgame

• May 27th, 2019: Code freeze for the endgame
• May 31st, 2019: Endgame done

The endgame details for this iteration are tracked in TBD.

Component Anatomy

This is a continued effort originating from the carbon-spec repo.

Our primary goal is to abstract component artifacts to new carbon specification packages that each component implementation consumes. The focus is on a select few components initially (e.g. button, checkbox, icon, modal).

• Create component spec packages Create component specification packages #2389
• Determine spec directory structure Create component specification directory structure #2390
• Generate README.md via sync script Generate component spec README's from directory #2391
• Create demo objects Create component spec demo objects #2392

Our stretch goal is to apply the new component anatomy to all components.

Component Testing

Also originating from the carbon-spec repo, this effort is to have the component specification packages include tests that can be consumed by each component implementation to provide a framework to achieve standardization.

Our primary goal is to create test case and test runner structure that can be used by vanilla and React components. The focus is on a select few components initially (e.g. button, checkbox, icon, modal).

• Create spec test format Create spec test format #2393
• Run spec tests in vanilla components Run initial spec tests in vanilla components #2394
• Run spec tests in React components Run initial spec tests in React components #2395

Our stretch goal is to have the specification tests consumable by Angular and Vue components.

Our ideal goal is to provide a specification test reporting framework so we can generate a component status page to the likes of carbon-design-system/carbon-spec#13.

Monorepo

This is a new effort to update the Carbon Design System ecosystem to a monorepo structure following our RFC.

Our primary goal is to introduce this setup following phase 1:

• Setup carbon-components as a monorepo Reorganize carbon-components as a monorepo #2382
• Introduce carbon-components-react to the monorepo Add carbon-components-react to monorepo #2383
• Introduce carbon-elements to the monorepo Add carbon-elements to monorepo #2385
• Migrate over issues from projects to the carbon repo Migrate over issues from projects to monorepo #2386
• Write documentation and guidelines around the monorepo Write guidelines for monorepo #2387

Our stretch goal would include beginning to create per-component packages. This work would include:

• Separating out components from carbon-components into discrete packages
  • carbon-components/src/components/button becomes @carbon/button
  • Includes introduction of testing to prevent regressions
  • Includes work to figure out inline strategy based on existing elements work
• Separating out components from carbon-components-react into discrete packages
  • carbon-components-react/src/components/Button becomes @carbon/button-react
• Consolidate configs to top-level, where appropriate. This includes:
  • Test setup (Jest)
  • Linting (ESLint, Stylelint)
  • Formatting (prettier)
• Setup Netlify previews per-package

Our ideal goal would be all of the above in addition to:

• Setting up a @carbon/cli internal project to help with component development
  • One could type yarn develop <component-name> and the development environment is dynamically created for them
  • This setup should prioritize fast storybook rebuilds while still allowing us to publish a storybook for all components

---

Deferred Items

• Creating component specification tests for all components