@foodpilot/foods 2.25.3 → 2.25.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -0
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -1 +1,95 @@
|
|
|
1
1
|
<img width="2560" height="1024" alt="foods_logo_banner_clean-min" src="https://github.com/user-attachments/assets/4cfbd824-f8fe-473e-aa7a-7c789b8d2b9d" />
|
|
2
|
+
|
|
3
|
+
# foods
|
|
4
|
+
|
|
5
|
+
`@foodpilot/foods` is FoodPilot's design system for React: the MUI-based components, tenant themes and charts of
|
|
6
|
+
platform-app.
|
|
7
|
+
|
|
8
|
+
- **Storybook:** [foods-storybook.foodpilot.tech](https://foods-storybook.foodpilot.tech), organised like IBM
|
|
9
|
+
Carbon's.
|
|
10
|
+
- **Figma Design System:** [Design System](https://www.figma.com/design/ucJSnn3mHlv4MCnwe1oZ2Z/Design-System), the
|
|
11
|
+
design source of truth.
|
|
12
|
+
- **For AI assistants:** [`llms.txt`](llms.txt) ([llmstxt.org](https://llmstxt.org)), also served at
|
|
13
|
+
[foods-storybook.foodpilot.tech/llms.txt](https://foods-storybook.foodpilot.tech/llms.txt).
|
|
14
|
+
|
|
15
|
+
## Use foods
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @foodpilot/foods
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Peer dependencies:
|
|
22
|
+
|
|
23
|
+
- always: `react` and `react-dom` 18 or 19, `@mui/material` ^6.4, `@emotion/react` and `@emotion/styled` ^11.14,
|
|
24
|
+
`i18next`, `react-i18next` and `lodash`;
|
|
25
|
+
- only for the components that use them: `@mui/icons-material`, `@mui/lab`, the `@mui/x-*` packages, `recharts` and
|
|
26
|
+
`material-react-table`.
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { FoodsThemeProvider } from "@foodpilot/foods/themes";
|
|
30
|
+
import { Button } from "@foodpilot/foods/Button";
|
|
31
|
+
|
|
32
|
+
<FoodsThemeProvider theme="foodpilot">
|
|
33
|
+
{/* "foodpilot" | "winepilot" | "collective" */}
|
|
34
|
+
<App />
|
|
35
|
+
</FoodsThemeProvider>;
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Every export is named, from the root entry or a component entry: see [IMPORT_EXAMPLES.md](IMPORT_EXAMPLES.md). Style
|
|
39
|
+
with the theme tokens (palette, 8 px spacing, typography variants, shadows), never raw values. Components translate
|
|
40
|
+
their texts with `react-i18next`, the English strings being the keys; the application provides the translations.
|
|
41
|
+
|
|
42
|
+
## Storybook
|
|
43
|
+
|
|
44
|
+
`npm run storybook` serves it on port 6006, `npm run build-storybook` builds it into `storybook-static/`. The
|
|
45
|
+
`demo.yml` workflow deploys it after every release.
|
|
46
|
+
|
|
47
|
+
| Section | What it holds | Folder |
|
|
48
|
+
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- |
|
|
49
|
+
| Getting Started | Welcome, and the guides for designers, product and developers | `src/getting-started/` |
|
|
50
|
+
| Components | The components to use, by Figma Design System page: Actions, Avatar and user, Content, Data display, Feedbacks, Inputs, Modals, Navigation | `src/components/<Category>/` |
|
|
51
|
+
| Elements | The foundations: colours, typography, spacing, shadows, breakpoints, icons | `src/elements/` |
|
|
52
|
+
| Layout | Page layouts | `src/layout/` |
|
|
53
|
+
| Preview | Components still being built or redesigned | `src/preview/` |
|
|
54
|
+
| Legacy | Components removed from the Figma Design System, kept for the screens that use them | `src/legacy/<Category>/` |
|
|
55
|
+
| Deprecated | Deliberate deprecations | `src/deprecated/<Category>/` |
|
|
56
|
+
|
|
57
|
+
Each component has an **Overview** page (`src/docs/DocsPage.tsx`) with:
|
|
58
|
+
|
|
59
|
+
- its match with the Figma design (the doc status of its Figma frame) and the day its usage guidelines were copied
|
|
60
|
+
from Figma;
|
|
61
|
+
- its description;
|
|
62
|
+
- the usage guidelines from Figma: do's and don'ts, anatomy, behaviour, content and states, or _No usage guidelines
|
|
63
|
+
yet_;
|
|
64
|
+
- every story;
|
|
65
|
+
- the props (Component API);
|
|
66
|
+
- its references.
|
|
67
|
+
|
|
68
|
+
In Storybook:
|
|
69
|
+
|
|
70
|
+
- each story has controls, logs its callbacks in **Actions** and plays its main interaction in **Interactions**;
|
|
71
|
+
- the toolbar switches the tenant theme (FoodPilot, WinePilot, Positive), the background and the viewport;
|
|
72
|
+
- the texts are in English.
|
|
73
|
+
|
|
74
|
+
## Contribute
|
|
75
|
+
|
|
76
|
+
[AGENTS.md](AGENTS.md) holds the rules for any change. In short:
|
|
77
|
+
|
|
78
|
+
- **Stories:** a component's stories go in `src/components/<Category>/<Component>.stories.tsx`, without a `title`,
|
|
79
|
+
since the folder decides the sidebar, and their meta starts with a stable `id`, the file name in lower case, so the
|
|
80
|
+
URLs survive a move. Their texts are in English, with fitting controls, `fn()` callbacks and a `play` function.
|
|
81
|
+
Usage guidelines come from Figma, in `parameters.guidelines`, with the Figma doc `status` and the `syncedAt` day.
|
|
82
|
+
- **llms.txt:** when a component or its stories are added, moved or removed, run `npm run llms` and commit
|
|
83
|
+
`llms.txt`. CI fails when it is stale.
|
|
84
|
+
- **Legacy:** a component's stories move to `src/legacy/` with `git mv` once it is removed from the Figma Design
|
|
85
|
+
System, then `llms.txt` is refreshed. The platform-design skill of the frontend harness reports the stories
|
|
86
|
+
platform-app no longer imports; that alone does not move them.
|
|
87
|
+
- **Checks:**
|
|
88
|
+
- `npm run prettier`, `npm run lint`, `npm run tsc`;
|
|
89
|
+
- `npm test`, which includes the stories' plays and the `llms.txt` check;
|
|
90
|
+
- `npm run build`, `npm run depcruise:check`.
|
|
91
|
+
|
|
92
|
+
CI is described in [docs/ci.md](docs/ci.md), size budgets in [BUNDLE_ANALYSIS.md](BUNDLE_ANALYSIS.md).
|
|
93
|
+
|
|
94
|
+
- **Releases:** `npm run publish:patch|minor|major` dispatches the release workflow from `main`. platform-app gets a
|
|
95
|
+
change after that release and its own dependency update.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foodpilot/foods",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "2.25.
|
|
4
|
+
"version": "2.25.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/main.js",
|
|
7
7
|
"module": "./dist/main.js",
|
|
@@ -198,6 +198,7 @@
|
|
|
198
198
|
"local-storybook": "storybook dev -p 6007",
|
|
199
199
|
"test": "vitest run",
|
|
200
200
|
"build-storybook": "storybook build",
|
|
201
|
+
"llms": "node scripts/llms-txt.mjs",
|
|
201
202
|
"lint:fix": "npm run lint --fix",
|
|
202
203
|
"prepare": "husky install",
|
|
203
204
|
"tsc-debug": "tsgo --incremental --generateTrace debugTypescript.out",
|
|
@@ -262,6 +263,7 @@
|
|
|
262
263
|
"@mui/x-date-pickers": "^8.27.2",
|
|
263
264
|
"@size-limit/file": "^12.0.0",
|
|
264
265
|
"@size-limit/preset-big-lib": "^11.2.0",
|
|
266
|
+
"@storybook/addon-docs": "^10.2.13",
|
|
265
267
|
"@storybook/react-vite": "^10.2.13",
|
|
266
268
|
"@testing-library/dom": "^10.4.1",
|
|
267
269
|
"@testing-library/jest-dom": "^6.9.1",
|
|
@@ -295,12 +297,13 @@
|
|
|
295
297
|
"react": "19.2.0",
|
|
296
298
|
"react-dom": "19.2.0",
|
|
297
299
|
"recharts": "^3.7.0",
|
|
300
|
+
"remark-gfm": "^4.0.1",
|
|
298
301
|
"rollup-plugin-visualizer": "^7.0.0",
|
|
299
302
|
"size-limit": "^12.0.0",
|
|
300
303
|
"storybook": "^10.2.13",
|
|
301
304
|
"typescript": "^5.9.3",
|
|
302
305
|
"typescript-eslint": "^8.56.1",
|
|
303
|
-
"vite": "^7.3.
|
|
306
|
+
"vite": "^7.3.7",
|
|
304
307
|
"vite-bundle-visualizer": "^1.2.1",
|
|
305
308
|
"vite-plugin-dts": "^4.5.0",
|
|
306
309
|
"vite-plugin-svgr": "^4.5.0",
|