# How These Guidelines Were Generated

## Disclaimer
These guidelines were built by analysing the repository: https://github.com/theorchard/orchard-suite

The guidelines have been added to the **Suite Make Kit** Figma project: https://www.figma.com/make/iPNccMWGkpTmVb05sPjBF6/Suite-Make-Kit?t=RpOogwP9NH1lXYty-1

The Make Kit was used to create an example app — **Table with Filter and Sort**: https://www.figma.com/make/idH2t4ehJhGKnkJ26bAx8d/Table-with-Filter-and-Sort?t=uIfX75vLUcoHWC7K-1

## Sources

**Component manifest**
`apps/frontend-solfege/assets/manifest.json` — authoritative list of all components with status, type, tags, and nested sub-components. Deprecated components were excluded from documentation.

**Component source code**
`packages/suite-components/src/components/` — props interfaces, JSDoc tags (`@type`, `@status`, `@tags`, `@variantOf`), variants, and sub-component structure were read directly from TypeScript source.

**Design tokens**
`packages/suite-components/src/styles/vars/` — full SCSS variable and CSS custom property definitions for color, typography, spacing, shadows, and border radius.

**Theming package**
`packages/suite-theming/src/` — theme shapes (`Theme` interface), available brand themes (`themeOrchard`, `themeAwal`, `themeSony`, `themeKnr`), `ThemeProvider`, `ThemeContext`, `useTheme`, and `themes` exports.

**Reference app — `login_page_vanila/`**
A working Figma Make app in the repo. It revealed the actual runtime setup that differs from documentation assumptions:
- CSS imports live in `index.scss` imported from `App.tsx` (not `main.tsx`, which doesn't exist in the file tree)
- `vite.config.ts` requires `sassGlobImports()`, `quietDeps`, and `silenceDeprecations` for SCSS to work
- `Page` comes from `@theorchard/suite-frontend`, not `@theorchard/suite-components`
- Icons (`GlyphIcon`, `AppIcon`) come from `@theorchard/suite-icons`
- `ThemeContext` can be consumed directly via `useContext` in addition to `useTheme` hook
- The `themes` map drives the `ThemeSwitcher` pattern

**Real-world usage data**
`apps/frontend-solfege/.cache/usage/*.usage.json` — aggregated component usage counts across 15 production Suite apps. This shaped:
- Component prominence in the catalog (e.g. `HelpTooltip` is used more than `Select`)
- `useToast` hook documented as the primary toast pattern (152 usages) rather than direct `<Toast>`
- `SkeletonLoader` elevated above `LoadingSpinner` as the preferred loading pattern
- `GridTableColumnDefinition` and `GridTableSortBy` types added to table docs
- `@theorchard/suite-frontend` utilities (`formatMessage`, `formatDate`, `formatNumber`, `filterData`) documented as a separate section
- Deprecated components flagged as legacy — they appear in usage data from old code but must not be copied

**Figma Make documentation**
`https://developers.figma.com/docs/code/write-design-system-guidelines/` — the file structure, content format, and writing conventions (imperative language, decision trees, correct/incorrect examples, granular files) follow the spec defined there.

## What Was Excluded

- Deprecated components (`Col`, `Row`, `Container`, `Dropdown`, `Table`, `Nav`, `Image`, `Control`, `InputGroup`, `SearchDropdown`, `LoadingIndicator`) — documented only as things to avoid
- `@theorchard/suite-frontend` hooks requiring external services (`useFeatureFlag`, `useIdentity`, `flattenError`, `useAppConfig`, `Segment`) — not available in Figma Make sandbox
- Internal sub-components not exported from the package root
- GraphQL / Apollo patterns — app-specific, not part of the design system