roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-04-24 19:39:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
v3/packages/design-system/README.md
Katalina 2ff6588030
Refactor node packages to yarn workspaces & ditch next.js for CRA. (#161) 
* chore: restructure project into yarn workspaces, remove next

* fix tests, remove webapp from terraform

* remove more ui deployment bits

* remove pages, fix FUNDING.yml

* remove isomorphism

* remove next providers

* fix linting issues

* feat: start basis of new web ui system on CRA

* chore: move types to @roleypoly/types package

* chore: move src/common/utils to @roleypoly/misc-utils

* chore: remove roleypoly/ path remappers

* chore: renmove vercel config

* chore: re-add worker-types to api package

* chore: fix type linting scope for api

* fix(web): craco should include all of packages dir

* fix(ci): change api webpack path for wrangler

* chore: remove GAR actions from CI

* chore: update codeql job

* chore: test better github dar matcher in lint-staged
2021-03-12 18:04:49 -05:00

1.4 KiB
Raw Blame History

Roleypoly Design System

Codename: rapid

The Roleypoly Design System (rapid) is an atomic design system to help rapidly and consistently build Roleypoly and related services. The color system in use is deliberately simple, and should be adhered to.

Developing

Please follow hermeticity considerations.

This package cannot reference RPC types, as they do not exist in the outside world. Storybook is the core component of this, and Storybook doesn't know how to find RPC types at CI build time, as Bazel is also not present. If you are worried about RPC types being compatible, please write a unit test and include the RPC types then.

You need:

  • node (lts or later)
  • yarn (v1.x)

Run:

  • yarn storybook to get started.

Atomic Design 101

Components are split into the following categories:

  • atoms
    • smallest possible parts.
    • typically individual pieces, such as branding, layout macros, and style-wrapped native elements.
  • molecules
    • groups of atoms
    • typically these make up sections of major UI parts
  • organisms
    • groups of molecules
    • typically these are major UI parts
  • templates
    • groups of organisms
    • typically a full page, without data.
  • pages
    • not covered by rapid
    • routes data into templates.

This sort of layout works extremely well with Next.js, the UI toolkit within Roleypoly. You should also be able to develop most parts, up until pages, directly within Storybook.