mobilelive-inc/friday-design-system

Purpose and Shape

This is a multi-package design-system repository centered on reusable UI components, themes, icons, and documentation/demo surfaces. It supports Angular, React/“rx-xis”, and framework-neutral static CSS/HTML assets. The supplied root README is placeholder content; the repository structure is the primary architectural evidence.

Workspace and Entry Points

The workspace is organized as an Nx-style monorepo, with libraries under libs/ and executable/demo applications under apps/. Key public library entry points are:

• libs/angular/src/index.ts

• libs/rx-xis/src/index.ts

• libs/ui/src/index.ts

Browser application bootstraps are apps/angular-demos/src/main.ts, apps/angular-sign-up/src/main.ts, and apps/rx-xis-app/src/main.tsx. A smaller standalone React-oriented package also exposes src/index.js.

Angular Component System

libs/angular is the main Angular implementation and composition boundary. libs/angular/src/lib/angular.module.ts aggregates Angular-facing capabilities, while individual component directories provide implementation, templates/styles, and public behavior. Representative components include:

• libs/angular/src/lib/button/button.component.ts

• libs/angular/src/lib/form-field/form-field.component.ts

• libs/angular/src/lib/input/input.directive.ts

More stateful/overlay-oriented components establish internal service and lifecycle boundaries: libs/angular/src/lib/modal/modal.service.ts, libs/angular/src/lib/modal/modal-ref.ts, and libs/angular/src/lib/modal/modal-container.ts. Shared form, template, tooltip, and error abstractions reside under libs/angular/src/lib/shared/.

React Component System

The React implementation exists in both the distributable libs/rx-xis package and the richer apps/rx-xis-app component/demo area. The former exposes a compact library API through libs/rx-xis/src/index.ts; its button is implemented at libs/rx-xis/src/actions/button/button.tsx. The app-level component catalog is exported from apps/rx-xis-app/src/components/index.js and uses centralized theme primitives:

• apps/rx-xis-app/src/components/theme/defaultTheme.js

• apps/rx-xis-app/src/components/theme/globalStyles.js

• apps/rx-xis-app/src/components/theme/colors.js

Controls such as inputs, selects, radios, toggles, and tooltips consume those styling primitives, separating reusable control APIs from application/demo presentation.

Styling, Themes, and Icons

libs/static is the framework-neutral styling pipeline: SCSS source and design tokens compile into checked-in CSS artifacts under libs/static/css/. Its root stylesheet composition begins at libs/static/src/scss/index.scss; tokens are defined in locations such as libs/static/src/scss/settings/_colors.scss and libs/static/src/styles/css-variables.scss. Theme-specific overrides are represented by libs/static/theme/theme.scss.

Icons are a separate asset package rooted in libs/icons/icomoon.json and libs/icons/icomons_styles.scss, with font files in libs/icons/fonts/. Angular and React packages include corresponding icon/font consumption assets, rather than relying on an external icon service.

Demonstration and Documentation Surfaces

Angular demos exercise the Angular library through a component gallery application rooted at apps/angular-demos/src/app/app.module.ts and apps/angular-demos/src/app/app.component.ts. A separate sign-up application, rooted at apps/angular-sign-up/src/app/app.module.ts, demonstrates form composition and theme switching.

Storybook is a primary component-documentation runtime, configured globally in .storybook/main.js and independently for Angular in libs/angular/.storybook/main.js and the React demo app in apps/rx-xis-app/.storybook/main.js. Stories are colocated with components where appropriate, for example libs/angular/src/lib/button/button.component.stories.ts.

Build, Test, and Delivery Boundaries

Angular builds are governed by angular.json and library package metadata in libs/angular/src/ng-package.json. React/static packages use Webpack and, in the React app, Rollup (apps/rx-xis-app/webpack.config.js, apps/rx-xis-app/rollup.config.js); the root standalone package has webpack.config.js and rollup.config.js.

Jest is the unit-test runtime, while Cypress E2E projects validate browser-facing Angular applications, notably apps/angular-e2e/cypress.json and apps/angular-sign-up-e2e/cypress.json. GitHub Actions provides CI execution through .github/workflows/code-Inspector.yml; no backend, database, or remote application service is evident from the tree.