Apps/nutritionfacts/background (#190)

* always use white in iframe

* lint

* remove legacy helper class

* lint

* shuffle file case 1

* case shuffle 2

* update import references

* fix reference

* lint

* enable oxc

* lint

* lint

* fix test

* nutritionfacts@2.0.10

* case shuffle 1

* case shuffle 2

* update references

* import from from ./logos to prevent circular dependency

Author: thedannywahl

.vscode/settings.json

@@ -26,5 +26,5 @@
   "oxc.typeAware": true,
   "typescript.experimental.useTsgo": true,
   "vitest.disableWorkspaceWarning": true,
-  "oxc.enable": false,
+  "oxc.enable": true,
 }

apps/nutritionfacts/.github/copilot-instructions.md

@@ -10,4 +10,4 @@ You should use the provided components and utilities from InstUI to build your a
 
 ## InstUI Guidelines
 
-<<instui-guidelines>>
+<<instui-guidelines>>

apps/nutritionfacts/.oxfmtrc.jsonc

@@ -1,4 +1,4 @@
 {
   "$schema": "../../node_modules/oxfmt/configuration_schema.json",
-  "extends": ["../../.oxfmtrc.jsonc"]
-}
+  "extends": ["../../.oxfmtrc.jsonc"],
+}

apps/nutritionfacts/.oxlintrc.json

@@ -1,10 +1,5 @@
 {
   "$schema": "../../node_modules/oxlint/configuration_schema.json",
-  "extends": [
-    "../../.oxlintrc.json"
-  ],
-  "plugins": [
-    "react",
-    "react-perf",
-  ],
-}
+  "extends": ["../../.oxlintrc.json"],
+  "plugins": ["react", "react-perf"]
+}

apps/nutritionfacts/coverage/coverage.yml

@@ -11,87 +11,87 @@ coverage:
       branches: 44.17%
       functions: 46.25%
       lines: 48.13%
-    "App.tsx":
+    "app.tsx":
       statements: 0%
       branches: 0%
       functions: 0%
       lines: 0%
-      uncovered_line_numbers: "18-66"
-    Components:
-      Export:
-        "ControlButton.tsx":
+      uncovered_line_numbers: "11-57"
+    assets:
+      "Layout.ts":
+        statements: 100%
+        branches: 100%
+        functions: 100%
+        lines: 100%
+      "Logos.tsx":
+        statements: 100%
+        branches: 100%
+        functions: 100%
+        lines: 100%
+      "colors.ts":
+        statements: 100%
+        branches: 100%
+        functions: 100%
+        lines: 100%
+      "consts.tsx":
+        statements: 80%
+        branches: 33.33%
+        functions: 0%
+        lines: 80%
+        uncovered_line_numbers: "59"
+    components:
+      export:
+        "controlButton.tsx":
           statements: 0%
           branches: 0%
           functions: 0%
           lines: 0%
           uncovered_line_numbers: "14-23"
-        "Embed.tsx":
+        "embed.tsx":
           statements: 0%
           branches: 0%
           functions: 0%
           lines: 0%
-          uncovered_line_numbers: "8-68"
-        "Link.tsx":
+          uncovered_line_numbers: "8-67"
+        "link.tsx":
           statements: 0%
           branches: 0%
           functions: 0%
           lines: 0%
-          uncovered_line_numbers: "7-41"
-      Layout:
-        "Divider.tsx":
+          uncovered_line_numbers: "7-40"
+      layout:
+        "divider.tsx":
           statements: 100%
           branches: 100%
           functions: 100%
           lines: 100%
-        "NutritionFactsForm.tsx":
+        "extendedNutritionFacts.tsx":
           statements: 0%
           branches: 0%
           functions: 0%
           lines: 0%
-          uncovered_line_numbers: "16-73"
-        "Presets.tsx":
+          uncovered_line_numbers: "4-27"
+        "getLayoutFromParams.ts":
           statements: 0%
           branches: 0%
           functions: 0%
           lines: 0%
-          uncovered_line_numbers: "15-111"
-        "extendedNutritionFacts.tsx":
+          uncovered_line_numbers: "4-14"
+        "nutritionFactsForm.tsx":
           statements: 0%
           branches: 0%
           functions: 0%
           lines: 0%
-          uncovered_line_numbers: "4-32"
-        "getLayoutFromParams.ts":
+          uncovered_line_numbers: "16-61"
+        "presets.tsx":
           statements: 0%
           branches: 0%
           functions: 0%
           lines: 0%
-          uncovered_line_numbers: "4-19"
-    "Main.tsx":
+          uncovered_line_numbers: "13-94"
+    "main.tsx":
       statements: 87.5%
       branches: 83.33%
       functions: 100%
       lines: 87.5%
       uncovered_line_numbers: "27"
-    assets:
-      "Layout.ts":
-        statements: 100%
-        branches: 100%
-        functions: 100%
-        lines: 100%
-      "Logos.tsx":
-        statements: 100%
-        branches: 100%
-        functions: 100%
-        lines: 100%
-      "colors.ts":
-        statements: 100%
-        branches: 100%
-        functions: 100%
-        lines: 100%
-      "consts.tsx":
-        statements: 80%
-        branches: 33.33%
-        functions: 0%
-        lines: 80%
-        uncovered_line_numbers: "65"

apps/nutritionfacts/index.html

@@ -1,18 +1,16 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf8" />
+    <link rel="icon" type="image/svg+xml" href="/IgniteAI.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="application-version" content="%VITE_PACKAGE_VERSION%" />
+    <meta name="application-name" content="%VITE_PACKAGE_NAME%" />
+    <title>IgniteAI Nutrition Facts</title>
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" type="image/svg+xml" href="/IgniteAI.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="application-version" content="%VITE_PACKAGE_VERSION%">
-  <meta name="application-name" content="%VITE_PACKAGE_NAME%">
-  <title>IgniteAI Nutrition Facts</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/Main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/Main.tsx"></script>
+  </body>
+</html>

apps/nutritionfacts/index.test.ts

@@ -9,20 +9,18 @@ describe("index.html", () => {
   });
 
   it("should have correct doctype", () => {
-    // jsdom does not expose doctype, so we skip this in jsdom
+    // Jsdom does not expose doctype, so we skip this in jsdom
     expect(document.documentElement.lang).toBe("en");
   });
 
   it("should have correct meta tags", () => {
     const charset = document.querySelector("meta[charset]");
     expect(charset).not.toBeNull();
-    expect(charset?.getAttribute("charset")).toBe("utf-8");
+    expect(charset?.getAttribute("charset")).toBe("utf8");
 
     const viewport = document.querySelector('meta[name="viewport"]');
     expect(viewport).not.toBeNull();
-    expect(viewport?.getAttribute("content")).toBe(
-      "width=device-width, initial-scale=1.0",
-    );
+    expect(viewport?.getAttribute("content")).toBe("width=device-width, initial-scale=1.0");
 
     const version = document.querySelector('meta[name="application-version"]');
     expect(version).not.toBeNull();

apps/nutritionfacts/package.json

@@ -1,23 +1,13 @@
 {
-  "browserslist": [
-    "extends @instructure/browserslist-config-instui"
-  ],
-  "dependencies": {
-    "@instructure.ai/aiinfo": "workspace:^",
-    "@instructure/ui": "^11.2.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "@instructure.ai/shared-configs": "workspace:^"
-  },
   "name": "@instructure.ai/nutritionfacts",
+  "version": "2.0.10",
   "private": true,
   "repository": {
-    "directory": "apps/nutritionfacts",
     "type": "git",
-    "url": "https://github.com/instructure/instructure.ai"
+    "url": "https://github.com/instructure/instructure.ai",
+    "directory": "apps/nutritionfacts"
   },
+  "type": "module",
   "scripts": {
     "build": "vite build",
     "dev": "vite",
@@ -27,6 +17,16 @@
     "typecheck": "tsgo --noEmit",
     "update-cache": "vite-node ./scripts/updateCache.mts"
   },
-  "type": "module",
-  "version": "2.0.9"
-}
+  "dependencies": {
+    "@instructure.ai/aiinfo": "workspace:^",
+    "@instructure/ui": "^11.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "devDependencies": {
+    "@instructure.ai/shared-configs": "workspace:^"
+  },
+  "browserslist": [
+    "extends @instructure/browserslist-config-instui"
+  ]
+}

apps/nutritionfacts/README.md apps/nutritionfacts/readme.mdapps/nutritionfacts/README.md renamed to apps/nutritionfacts/readme.md

@@ -1,4 +1,5 @@
 # @instructure.ai/nutritionfacts
+
 ![version](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Finstructure%2Finstructure.ai%2Frefs%2Fheads%2Fmain%2Fapps%2Fnutritionfacts%2Fpackage.json&query=%24.version&label=version&labelColor=%230e1721&color=%234279B6) ![coverage](https://img.shields.io/badge/dynamic/yaml?url=https%3A%2F%2Fraw.githubusercontent.com%2Finstructure%2Finstructure.ai%2Frefs%2Fheads%2Fmain%2Fapps%2Fnutritionfacts%2Fcoverage%2Fcoverage.yml&query=coverage.totals.total&logo=vitest&label=coverage&labelColor=%230E1721&color=%234279B6)
 
 ## IgniteAI Nutrition Facts Generator
@@ -16,10 +17,10 @@ An interactive web application for importing, viewing, and exporting Nutrition F
 
 [View the tool on the web](https://instructure.ai/nutritionfacts) and select a feature to view its Nutrition Facts. You can:
 
-* View the rendered Nutrition Facts
-* Print (Formatted nicely)
-* Copy an iFrame embed code to your clipboard
-* Copy the permalink to your clipboard
+- View the rendered Nutrition Facts
+- Print (Formatted nicely)
+- Copy an iFrame embed code to your clipboard
+- Copy the permalink to your clipboard
 
 ### Advanced Usage
 
@@ -39,7 +40,7 @@ Nutrition Facts provide two primary export methods: permalink & embed.
 
 ##### Permalink
 
-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.
+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.
 
 When viewing a Nutrition Facts page a "Copy permalink" helper is displayed in the header.
 
@@ -56,7 +57,6 @@ The "Copy embed code" generates an iFrame that is sized to fit the content witho
 
 This makes outputting AI Components fairly simple, and standard.
 
-
 ### Getting Started
 
 > [!CAUTION]