Skip to content

Commit 0bc0c13

Browse files
thedannywahlthedannywahl
authored
Apps/nutritionfacts/useaiinfo (#135)
* import aiinfo * update deps * use aiinfo * add group to output * fix casing in cache * move output to ./src/components * relocate components * use ts as entry, not mts * remove extra id from type * add group to output * update test for PermissionLevel structure * update templates * use existing types * add name to top level output * stricter type structure * remove default objects * simplify imports * move instructure/ui to peer dependencies * update writeEntry tests for components folder * update writeBarrel for components folder * no leaf packages. * update template * consistent file naming * use aiinfo * fix declaration error * simplify buttons * remove object copying * fix divider * add description to root * include cjs build * include cjs build * make sure types are exported explicitly * update coverage * update readme * add readme test * remove permissions from pagelayout * use line icon * lint * wrap fetchproducts in a callback * type extendedNutritionFacts * update readme * @instructure.ai/[email protected] * add apps to releases * @instructure.ai/[email protected] * tag apps on release * rename workflow * rename workflow * auto bump nutrition facts * @instructure.ai/[email protected] * fix spacing * fix casing
1 parent 9a6ab38 commit 0bc0c13

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+3495
-4603
lines changed

‎.github/workflows/nutritionfacts-auto-release.yml‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
name: After aiinfo Release → Bump nutritionfacts
2+
3+
on:
4+
release:
5+
types: [published]
6+
7+
permissions:
8+
contents: write
9+
pull-requests: write
10+
11+
env:
12+
CI: 1
13+
14+
jobs:
15+
bump-nutritionfacts:
16+
name: Bump nutritionfacts on aiinfo release
17+
runs-on: ubuntu-latest
18+
19+
if: contains(github.event.release.name, '@instructure.ai/aiinfo') || contains(github.event.release.tag_name, '@instructure.ai/aiinfo')
20+
21+
steps:
22+
- name: Checkout
23+
uses: actions/checkout@v4
24+
with:
25+
fetch-depth: 0
26+
27+
- name: Setup Node
28+
uses: actions/setup-node@v4
29+
with:
30+
node-version: '24'
31+
32+
- name: Install pnpm
33+
run: npm install -g pnpm
34+
35+
- name: Configure git
36+
run: |
37+
git config user.name "github-actions[bot]"
38+
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
39+
40+
- name: Create release branch
41+
id: mkbranch
42+
shell: bash
43+
run: |
44+
set -euo pipefail
45+
TS="$(date -u +%s)"
46+
BRANCH="release-${TS}"
47+
echo "branch=$BRANCH" >> "$GITHUB_OUTPUT"
48+
git switch -c "$BRANCH"
49+
50+
- name: Update nutritionfacts deps
51+
shell: bash
52+
run: |
53+
set -euo pipefail
54+
pnpm -F nutritionfacts up @instructure.ai/aiinfo@latest
55+
56+
- name: Commit changes (if any)
57+
id: commit
58+
shell: bash
59+
run: |
60+
set -euo pipefail
61+
git add -A
62+
if git diff --cached --quiet; then
63+
echo "no_changes=true" >> "$GITHUB_OUTPUT"
64+
echo "No changes to commit."
65+
else
66+
git commit -m "(chore) update dependencies"
67+
echo "no_changes=false" >> "$GITHUB_OUTPUT"
68+
fi
69+
70+
- name: Run custom release step
71+
if: steps.commit.outputs.no_changes == 'false'
72+
shell: bash
73+
run: |
74+
set -euo pipefail
75+
# Your custom command
76+
git release app nutritionfacts
77+
78+
- name: Push branch
79+
if: steps.commit.outputs.no_changes == 'false'
80+
run: |
81+
git push --set-upstream origin "${{ steps.mkbranch.outputs.branch }}"
82+
83+
- name: Create PR and enable auto-merge
84+
if: steps.commit.outputs.no_changes == 'false'
85+
env:
86+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
87+
shell: bash
88+
run: |
89+
set -euo pipefail
90+
PR_URL=$(gh pr create \
91+
--title "(chore) nutritionfacts deps sync after aiinfo release" \
92+
--body "Automated bump after release: **${{ github.event.release.tag_name || github.event.release.name }}**" \
93+
--base main \
94+
--head "${{ steps.mkbranch.outputs.branch }}")
95+
echo "Opened PR: $PR_URL"
96+
# Queue auto-merge (squash). Requires repo setting 'Allow auto-merge' to be enabled.
97+
gh pr merge --auto --squash "$PR_URL"

‎.github/workflows/tag-on-merge.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ jobs:
3131
else
3232
DIFF_RANGE="HEAD~1 HEAD"
3333
fi
34-
for pkgjson in $(git diff --name-only $DIFF_RANGE | grep -E '^(package.json|packages/.*/package.json)$'); do
34+
for pkgjson in $(git diff --name-only $DIFF_RANGE | grep -E '^(package.json|packages/.*/package.json|apps/.*/package.json)$'); do
3535
NAME=$(jq -r .name $pkgjson)
3636
VERSION=$(jq -r .version $pkgjson)
3737
TAG="${NAME}@${VERSION}"

‎.template/instui/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<body>
1414
<div id="root"></div>
15-
<script type="module" src="/src/main.tsx"></script>
15+
<script type="module" src="/src/Main.tsx"></script>
1616
</body>
1717

1818
</html>

‎.template/instui/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
"@instructure.ai/shared-configs": "workspace:^"
2121
},
2222
"dependencies": {
23-
"react": "^19.1.1",
24-
"react-dom": "^19.1.1",
25-
"@instructure/ui": "^11.0.0"
23+
"react": "^19.2.0",
24+
"react-dom": "^19.2.0",
25+
"@instructure/ui": "^11.0.1"
2626
}
2727
}

‎.template/instui/src/App.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { FC } from "react";
2-
import { InstUISettingsProvider } from "@instructure/ui";
32

43
const App: FC = () => {
5-
return <InstUISettingsProvider>Hello, World!</InstUISettingsProvider>;
4+
return <>Hello, World!</>;
65
};
76
export default App;

‎.template/instui/src/main.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { StrictMode } from "react";
22
import { createRoot, type Root } from "react-dom/client";
33
import App from "./App.tsx";
44
import "./Main.css";
5+
import { InstUISettingsProvider } from "@instructure/ui";
56

67
const root: HTMLElement =
78
document.getElementById("root") ||
@@ -13,6 +14,8 @@ const appRoot: Root = createRoot(root);
1314

1415
appRoot.render(
1516
<StrictMode>
16-
<App />
17+
<InstUISettingsProvider>
18+
<App />
19+
</InstUISettingsProvider>
1720
</StrictMode>,
1821
);

‎.template/react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@instructure.ai/shared-configs": "workspace:^"
2121
},
2222
"dependencies": {
23-
"react": "^19.1.1",
24-
"react-dom": "^19.1.1"
23+
"react": "^19.2.0",
24+
"react-dom": "^19.2.0"
2525
}
2626
}

‎apps/nutritionfacts/README.md‎

Lines changed: 15 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11

2-
# IgniteAI Nutrition Facts Generator
2+
# @instructure.ai/nutritionfacts
3+
4+
## IgniteAI Nutrition Facts Generator
35

46
An interactive web application for importing, viewing, and exporting Nutrition Facts for [IgniteAI features](https://www.instructure.com/ignite-ai). Built with React, TypeScript, and Vite, it provides a modern UI for customizing Nutrition Facts, layouts, and exporting results in various formats.
57

6-
## Features
8+
### Features
79

810
- **Customizable Layouts**: Change the appearance of the Nutrition Facts, including revision, permissions, disclaimer, and copyright.
911
- **Import/Export**: Import products and export Nutrition Facts.
1012
- **Modern UI**: Uses [@instructure/ui](https://github.com/instructure/instructure-ui) for a responsive and accessible interface.
1113
- **Dark Mode Support**: Automatically adapts to your system's color scheme.
1214

13-
## Usage
15+
### Usage
1416

1517
[View the tool on the web](https://instructure.ai/nutritionfacts) and select a feature to view its Nutrition Facts. You can:
1618

@@ -19,30 +21,29 @@ An interactive web application for importing, viewing, and exporting Nutrition F
1921
* Copy an iFrame embed code to your clipboard
2022
* Copy the permalink to your clipboard
2123

22-
## Advanced Usage
24+
### Advanced Usage
2325

24-
### Layout
26+
#### Layout
2527

2628
The page layout already includes mobile responsiveness, print styles, iFrame styles, and light and dark mode. Content layout can further be modified using the query parameter by setting `PageLayout` object key values explicitly to `false`:
2729

2830
```json
2931
&copyright=false // Copyright notice
3032
&disclaimer=false // Marketing copy about IgniteAI
3133
&revision=false // Nutrition Facts revision version
32-
&permissions=false // IgniteAI privacy framework level
3334
```
3435

35-
### Exporting
36+
#### Exporting
3637

3738
Nutrition Facts provide two primary export methods: permalink & embed.
3839

39-
#### Permalink
40+
##### Permalink
4041

4142
A permalink is an evergreen link to a specific feature's Nutrition Facts based on its unique id. Permalinks are structured as `ignite.ai/nutritionfacts/?id=<uid>`. When a permalink is accessed, the `uid` is used to fetch the latest revision of the Nutrition Facts and render them.
4243

4344
When viewing a Nutrition Facts page a "Copy permalink" helper is displayed in the header.
4445

45-
#### Embed
46+
##### Embed
4647

4748
The Nutrition Facts pages can be embedded in other sites via iFrame. When embedded in an iFrame the page automatically applies styles to only display the content of the Nutrition Facts - not the header, background, or footer content.
4849

@@ -53,116 +54,29 @@ The "Copy embed code" generates an iFrame that is sized to fit the content witho
5354
> [!NOTE]
5455
> Only the iFrame content is rendered dynamically. The copy of the product name / description are not dynamically updated and will need to be manually updated if either change significantly from the time the embed code is generated.
5556
56-
### JSON
57-
58-
When viewing a Nutrition Facts page a "Copy JSON Object" helper is displayed in the header. This object is for use with @instructure/ui AI Components. An sha256 and a last updated Epoch timestamp are included for easier update validation.
59-
60-
```JSON
61-
{
62-
"id": "<uid>",
63-
"name": "<featureName>",
64-
"sha256": "abc...xyz",
65-
"lastUpdated": "1234567890",
66-
"nutritionFacts": "<StrictNutritionFacts>",
67-
"dataPermissionsLevel": "<AiPermissions>",
68-
"AiInformation": "<StrictAiInformation>"
69-
}
70-
```
71-
7257
This makes outputting AI Components fairly simple, and standard.
7358

74-
#### AiInformation
75-
76-
```jsx
77-
const ai = {jsonObj}
78-
79-
<AiInformation
80-
data={ai.AiInformation}
81-
dataPermissionLevelsCurrentFeature={ai.name}
82-
dataPermissionLevelsData={ai.dataPermissionsLevel}
83-
nutritionFactsFeatureName={ai.name}
84-
nutritionFactsData={ai.nutritionFacts.data}
85-
86-
title="Features"
87-
trigger={<Button>AI information</Button>}
88-
89-
dataPermissionLevelsTitle="Data Permission Levels"
90-
dataPermissionLevelsCurrentFeatureText="Current Feature:"
91-
dataPermissionLevelsCloseIconButtonScreenReaderLabel="Close"
92-
dataPermissionLevelsCloseButtonText="Close"
93-
dataPermissionLevelsModalLabel="This is a Data Permission Levels modal"
94-
dataPermissionLevelsTriggerText="Data Permission Levels"
95-
96-
nutritionFactsModalLabel="This is a modal for AI facts"
97-
nutritionFactsTitle="Nutrition Facts"
98-
nutritionFactsCloseButtonText="Close"
99-
nutritionFactsCloseIconButtonScreenReaderLabel="Close"
100-
nutritionFactsTriggerText="Nutrition Facts"
101-
/>
102-
```
103-
104-
#### NutritionFacts
105-
106-
If you're just providing a `NutritionFacts` component, it can be destructured from the main JSON.
107-
108-
```jsx
109-
const ai = {jsonObj} // Direct reference
110-
const { nutritionFacts } = jsonObj // Destructured
111-
112-
<NutritionFacts
113-
featureName={ai.name || nutritionFacts.name}
114-
data={ai.nutritionFacts.data || nutritionFacts.data }
115-
116-
title="Nutrition Facts"
117-
modalLabel="This is a modal for AI facts"
118-
closeButtonText="Close"
119-
closeIconButtonScreenReaderLabel="Close"
120-
triggerText="Nutrition Facts"
121-
/>
122-
```
123-
124-
#### DataPermissionLevels
12559

126-
```jsx
127-
const ai = {jsonObj}
128-
129-
<DataPermissionLevels
130-
currentFeature={ai.name}
131-
data={ai.dataPermissionsLevel}
132-
133-
title="Data Permission Levels"
134-
currentFeatureText="Current Feature:"
135-
closeIconButtonScreenReaderLabel="Close"
136-
closeButtonText="Close"
137-
modalLabel="This is a Data Permission Levels modal"
138-
triggerText="Data Permission Levels"
139-
/>
140-
```
141-
142-
### Importing
143-
144-
You can import a Nutrition Facts object by referencing its unique id in the query parameter such as `?id=igniteAgent`. Parameter values are case insensitive. If an invalid ID is provided the default product (an empty~ish object) is returned.
145-
146-
## Getting Started
60+
### Getting Started
14761

14862
> [!CAUTION]
14963
> The rest of this readme is for developing the generator. If you need to generate nutrition facts, see 'Usage' above.
15064
151-
### Prerequisites
65+
#### Prerequisites
15266

15367
- [Node.js](https://nodejs.org/) (v20+ recommended)
15468
- [pnpm](https://pnpm.io/) (used for package management)
15569
- [typescript native](https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/)
15670

157-
### Installation
71+
#### Installation
15872

15973
This is part of the `@instructure.ai` monorepo. Clone the `instructure/instructure.ai` repository and install dependencies:
16074

16175
```bash
16276
pnpm install
16377
```
16478

165-
### Development
79+
#### Development
16680

16781
Start the development server using provided scripts:
16882

@@ -172,30 +86,10 @@ pnpm dev nutritionfacts
17286

17387
Open [http://localhost:5173](http://localhost:5173) in your browser to use the app.
17488

175-
### Build
89+
#### Build
17690

17791
The nutritionfacts repo buildscript includes a call to `pnpm update-cache` which fetches the current list of features and stores it locally.
17892

17993
```bash
18094
pnpm build nutritionfacts
18195
```
182-
183-
### Cacheing
184-
185-
The list of Nutrition Facts is fetched at every call. A fall-back cached version is included with the source and is updated on every build.
186-
187-
## Project Structure
188-
189-
- `src/` — Main source code
190-
- `App.tsx` — Main application component
191-
- `Components/` — UI components (EditableField, Export, Import, Layout)
192-
- `assets/` — Layouts, product data, and SVG assets
193-
- `types.ts` — Type definitions for nutrition facts and layout
194-
- `public/` — Static assets
195-
- `index.html` — Entry point
196-
- `vite.config.ts` — Vite configuration
197-
198-
## License
199-
200-
This project is licensed under the MIT License.
201-

‎apps/nutritionfacts/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<body>
1414
<div id="root"></div>
15-
<script type="module" src="/src/main.tsx"></script>
15+
<script type="module" src="/src/Main.tsx"></script>
1616
</body>
1717

1818
</html>

0 commit comments

Comments
 (0)