# mobilelive-inc/friday-design-system architecture

> Architecture diagram of the GitHub repository mobilelive-inc/friday-design-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-03). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mobilelive-inc/friday-design-system
- Repository: https://github.com/mobilelive-inc/friday-design-system

## Overview

#### 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.

Main entry points: [`libs/angular/src/lib/angular.module.ts`](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/lib/angular.module.ts) (Angular module), [`libs/angular/src/index.ts`](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/index.ts) (Angular public API), [`apps/rx-xis-app/webpack.config.js`](https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/webpack.config.js) (React/static bundling), [`libs/angular/src/lib/button/button.component.ts`](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/lib/button/button.component.ts) (Angular controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_angular["Angular system"]
  node_angular_public["Angular public API<br/>entry point<br/>[index.ts]"]
  node_angular_module["Angular module<br/>composition module<br/>[angular.module.ts]"]
  node_angular_controls["Angular controls<br/>component layer"]
  node_angular_modal["Modal subsystem<br/>overlay service<br/>[modal.service.ts]"]
  node_angular_shared["Angular shared abstractions<br/>shared layer"]
end

subgraph group_react["React system"]
  node_rx_public["rx-xis public API<br/>entry point<br/>[index.ts]"]
  node_rx_button["rx-xis button<br/>React component<br/>[button.tsx]"]
  node_react_catalog["React component catalog<br/>component exports<br/>[index.js]"]
  node_react_theme["React theme primitives<br/>theme layer<br/>[defaultTheme.js]"]
end

subgraph group_assets["Styles and icons"]
  node_static_source["Static SCSS and tokens<br/>style source<br/>[index.scss]"]
  node_static_css["Compiled static CSS<br/>CSS artifacts"]
  node_static_theme["Theme overrides<br/>SCSS theme<br/>[theme.scss]"]
  node_icons["Icon package<br/>font assets<br/>[icomoon.json]"]
end

subgraph group_docs["Demos and docs"]
  node_angular_demos["Angular component gallery<br/>demo application<br/>[app.module.ts]"]
  node_signup_demo["Angular sign-up demo<br/>demo application<br/>[app.module.ts]"]
  node_react_demo["React demo app<br/>browser application<br/>[main.tsx]"]
  node_storybook["Storybook documentation<br/>documentation runtime<br/>[main.js]"]
end

node_angular_build{{"Angular packaging<br/>build boundary<br/>[angular.json]"}}
node_react_build{{"React/static bundling<br/>build boundary<br/>[webpack.config.js]"}}
node_ci{{"GitHub Actions CI<br/>delivery pipeline<br/>[code-Inspector.yml]"}}

node_angular_public -->|"exports"| node_angular_module
node_angular_module -->|"composes"| node_angular_controls
node_angular_module -->|"composes"| node_angular_modal
node_angular_module -->|"uses"| node_angular_shared
node_rx_public -->|"exports"| node_rx_button
node_react_catalog -->|"uses"| node_react_theme
node_static_source -->|"compiles to"| node_static_css
node_static_theme -.->|"overrides"| node_static_source
node_angular_controls -.->|"consumes"| node_icons
node_rx_button -.->|"consumes"| node_icons
node_angular_demos -->|"exercises"| node_angular_public
node_signup_demo -->|"composes"| node_angular_public
node_signup_demo -->|"switches"| node_static_theme
node_react_demo -->|"renders"| node_react_catalog
node_storybook -.->|"documents"| node_angular_controls
node_storybook -.->|"documents"| node_react_catalog
node_angular_build -->|"packages"| node_angular_public
node_react_build -->|"bundles"| node_rx_public
node_react_build -->|"bundles"| node_react_demo
node_ci -.->|"runs"| node_angular_build
node_ci -.->|"runs"| node_react_build

click node_angular_public "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/index.ts"
click node_angular_module "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/lib/angular.module.ts"
click node_angular_controls "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/lib/button/button.component.ts"
click node_angular_modal "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/lib/modal/modal.service.ts"
click node_rx_public "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/rx-xis/src/index.ts"
click node_rx_button "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/rx-xis/src/actions/button/button.tsx"
click node_react_catalog "https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/src/components/index.js"
click node_react_theme "https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/src/components/theme/defaultTheme.js"
click node_static_source "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/static/src/scss/index.scss"
click node_static_theme "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/static/theme/theme.scss"
click node_icons "https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/icons/icomoon.json"
click node_angular_demos "https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/angular-demos/src/app/app.module.ts"
click node_signup_demo "https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/angular-sign-up/src/app/app.module.ts"
click node_react_demo "https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/src/main.tsx"
click node_storybook "https://github.com/mobilelive-inc/friday-design-system/blob/master/.storybook/main.js"
click node_angular_build "https://github.com/mobilelive-inc/friday-design-system/blob/master/angular.json"
click node_react_build "https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/webpack.config.js"
click node_ci "https://github.com/mobilelive-inc/friday-design-system/blob/master/.github/workflows/code-Inspector.yml"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_angular_public,node_angular_module,node_angular_controls,node_angular_modal,node_angular_shared toneBlue
class node_rx_public,node_rx_button,node_react_catalog,node_react_theme toneAmber
class node_static_source,node_static_css,node_static_theme,node_icons toneMint
class node_angular_demos,node_signup_demo,node_react_demo,node_storybook toneRose
class node_angular_build,node_react_build,node_ci toneNeutral
```

## Components

### Angular system

- [Angular public API](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/index.ts): entry point · `libs/angular/src/index.ts`
- [Angular module](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/lib/angular.module.ts): composition module · Aggregates Angular-facing capabilities. · `libs/angular/src/lib/angular.module.ts`
- [Angular controls](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/lib/button/button.component.ts): component layer · Buttons and form-field/input APIs. · `libs/angular/src/lib/button/button.component.ts`
- [Modal subsystem](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/angular/src/lib/modal/modal.service.ts): overlay service · Service, reference, and container lifecycle boundary. · `libs/angular/src/lib/modal/modal.service.ts`
- **Angular shared abstractions**: shared layer · Form, template, tooltip, and error primitives.

### React system

- [rx-xis public API](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/rx-xis/src/index.ts): entry point · `libs/rx-xis/src/index.ts`
- [rx-xis button](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/rx-xis/src/actions/button/button.tsx): React component · `libs/rx-xis/src/actions/button/button.tsx`
- [React component catalog](https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/src/components/index.js): component exports · Reusable demo-area controls and presentation components. · `apps/rx-xis-app/src/components/index.js`
- [React theme primitives](https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/src/components/theme/defaultTheme.js): theme layer · Default theme, global styles, and colors. · `apps/rx-xis-app/src/components/theme/defaultTheme.js`

### Styles and icons

- [Static SCSS and tokens](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/static/src/scss/index.scss): style source · Framework-neutral stylesheet composition and design tokens. · `libs/static/src/scss/index.scss`
- **Compiled static CSS**: CSS artifacts · Checked-in framework-neutral CSS output.
- [Theme overrides](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/static/theme/theme.scss): SCSS theme · `libs/static/theme/theme.scss`
- [Icon package](https://github.com/mobilelive-inc/friday-design-system/blob/master/libs/icons/icomoon.json): font assets · IcoMoon definitions, styles, and bundled font files. · `libs/icons/icomoon.json`

### Demos and docs

- [Angular component gallery](https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/angular-demos/src/app/app.module.ts): demo application · `apps/angular-demos/src/app/app.module.ts`
- [Angular sign-up demo](https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/angular-sign-up/src/app/app.module.ts): demo application · Demonstrates form composition and theme switching. · `apps/angular-sign-up/src/app/app.module.ts`
- [React demo app](https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/src/main.tsx): browser application · `apps/rx-xis-app/src/main.tsx`
- [Storybook documentation](https://github.com/mobilelive-inc/friday-design-system/blob/master/.storybook/main.js): documentation runtime · Component stories are rendered across framework configurations. · `.storybook/main.js`

### Other components

- [Angular packaging](https://github.com/mobilelive-inc/friday-design-system/blob/master/angular.json): build boundary · Angular workspace build and library package metadata. · `angular.json`
- [React/static bundling](https://github.com/mobilelive-inc/friday-design-system/blob/master/apps/rx-xis-app/webpack.config.js): build boundary · Webpack and Rollup package builds. · `apps/rx-xis-app/webpack.config.js`
- [GitHub Actions CI](https://github.com/mobilelive-inc/friday-design-system/blob/master/.github/workflows/code-Inspector.yml): delivery pipeline · Runs repository automation. · `.github/workflows/code-Inspector.yml`

## Connections

- Angular public API → Angular module: exports
- Angular module → Angular controls: composes
- Angular module → Modal subsystem: composes
- Angular module → Angular shared abstractions: uses
- rx-xis public API → rx-xis button: exports
- React component catalog → React theme primitives: uses
- Static SCSS and tokens → Compiled static CSS: compiles to
- Theme overrides → Static SCSS and tokens: overrides
- Angular controls → Icon package: consumes
- rx-xis button → Icon package: consumes
- Angular component gallery → Angular public API: exercises
- Angular sign-up demo → Angular public API: composes
- Angular sign-up demo → Theme overrides: switches
- React demo app → React component catalog: renders
- Storybook documentation → Angular controls: documents
- Storybook documentation → React component catalog: documents
- Angular packaging → Angular public API: packages
- React/static bundling → rx-xis public API: bundles
- React/static bundling → React demo app: bundles
- GitHub Actions CI → Angular packaging: runs
- GitHub Actions CI → React/static bundling: runs