citguy / ooee Goto Github PK

Inspired from https://matthewstrom.com/writing/design-apis

CLI script/task to update/generate a db.json file in root of repo, so that it can fuel a read-only API via https://my-json-server.typicode.com/

Run create-react-app (or equivalent) to initialize a React component library.

Dependencies

• CSS styles will be provided by a separate package (@ooee/web)

Acceptance Criteria

1. Source code should live in packages/web-react.
2. NPM package should be named @ooee/web-react
3. React components should be consumable in a web-based React project (based on react-dom).
4. NPM package should distribute compiled CSS for simple consumption
   1. Avoid defining package-specific styles.

This project is meant to act as boilerplate for a design system monorepo, but technology choices should be up to the consumer. As such, a consumer is unlikely to require every available workspace, so the package.json should be updated to define explicit workspaces instead of a wildcard.

{
  "workspaces": [
    "packages/core",
    "packages/core-color-fns",
    "packages/web"
  ],
}

This will allow consumers to remove unused packages at their own discretion. (Though, I wish we could just comment out lines in the package.json file.)

Initialize the @ooee/scss package to house all Sass assets.

Document the package strategy for this project.

Tiered Assets

1. Core
   • low-level primitives that are common amongst all assets, e.g.:
     • "design tokens" (colors, fonts, icons/graphics, modular scale, motion, elevation, etc.)
2. Environment
   • Platform:
     • Android
     • Apple (iOS/macOS)
     • Windows
   • Cross-Platform Libraries:
     • Libraries: Flutter (Dart), GTK, KDE, etc.
     • Software: MSOffice, Adobe CS (e.g., color binaries), etc.
   • Other:
     • CSS, SCSS, LESS, Stylus, etc.
     • CSS-in-JS
3. Library
   • React, Vue, Angular, Web Components, Ember, Photoshop, Figma, Sketch, etc.
4. Project (out of scope)
   • i.e., consuming projects

Acceptance Criteria

1. Documentation should make use of 11ty to generate a single documentation site for all Ooee packages (packages/*)
2. When run in the root of the repo, yarn docs should generate all documentation.
3. When run in the root of a package, yarn docs should start storybook for supported technologies (React, Vue, Web Components, etc.)

Acceptance Criteria

1. Source code should live in packages/web-sass.
2. NPM package should be named @ooee/web-sass
3. NPM package should distribute Sass modules for consumption

By default, assets are namespaced via the /ui/i prefix.

To avoid conflicts with 3rd-party libraries, this prefix needs to be configurable across all published assets.

Change all instances of ooey/Ooey to ooee/Ooee

Run vue new (or equivalent) to initialize a Vue component library.

Dependencies

• CSS styles will be provided by a separate package (@ooee/web)

Acceptance Criteria

1. Source code should live in packages/web-vue.
2. NPM package should be named @ooee/web-vue
3. Vue components should be consumable in a web-based Vue project.
4. NPM package should distribute compiled CSS for simple consumption.
   1. Avoid defining package-specific styles.

Run ember addon (or equivalent) to initialize an Ember component library.

Dependencies

• CSS styles will be provided by a separate package (@ooee/web)

Acceptance Criteria

1. Source code should live in packages/web-ember.
2. NPM package should be named @ooee/web-ember
3. Ember components should be consumable in a web-based Ember application.
4. NPM package should distribute compiled CSS for simple consumption
   1. Avoid defining package-specific styles.

Define a list of MVP assets to implement for v1.0.0:

In Scope for v1.0.0

Themes

• Light (AA contrast; default)
• Dark (AA contrast)

Components

• Typography
  • Links
  • Headings
  • Body Copy
  • Font Stacks
    • Serif
    • Sans-Serif
    • Monospace
• Button
  • CTA
• Form
  • Input (text-like)
  • Checkbox
  • Radio
  • Textarea
  • Select / Drop-down
  • Range / Slider
• Layout
• Breadcrumbs
• Menu
• Toolbar
• Icon
• Popover
• Tooltip
• Modal
• Notifications
  • Alert (context-specific; high importance; sync)
  • Note (context-specific; low importance; sync)
  • Broadcast (app-wide specific messaging; high importance; sync)
  • Toast (background-context; medium importance; async)
• Loaders
  • Progress Bar - known completion, known progress
  • Busy Spinner - unknown completion, unknown progress
  • Cumulative (elapsed time, total processed files, etc.) - unknown completion, known progress

Out of Scope

Themes

• Light: High Contrast (AAA contrast)
• Dark: High Contrast (AAA contrast)

Components

• Progress Dial/Ring - known completion, known progress
• File Input

By default, packages are configured to be published to the @ooee/* NPM namespace.

However, it would be nice if I could easily modify the NPM namespace across all packages.

Acceptance Criteria

1. Documentation should include adequate content for the following information:
   1. Voice & Tone
   2. Principles
   3. Iconography
   4. Accessibility
   5. Color
   6. Motion