demo

knapsack/data/blocks/block.J35VKyebYz.json

@@ -0,0 +1,21 @@
+{
+  "id": "J35VKyebYz",
+  "blockType": "callout",
+  "data": {
+    "type": "warning",
+    "content": {
+      "type": "doc",
+      "content": [
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "type": "text",
+              "text": "Ask about JS-Doc prop descriptions, failures when trying to restart ks, + our light/dark mode themes"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

knapsack/data/db.yml

@@ -0,0 +1,34 @@
+blocks:
+  settings:
+    tokens:
+      rootFontSize: 16px
+demos:
+  settings: {}
+settings:
+  designSrcs:
+    files:
+      - fileId: ReGfRNillGABAj5SlITalN
+        name: 📐 Gamut
+        type: figma
+        url: https://www.figma.com/file/ReGfRNillGABAj5SlITalN?version-id=6078232483
+        version: '6078232483'
+  logoUrl: ''
+  theme:
+    appearance:
+      customFonts: []
+      navigation:
+        primaryNav: {}
+        secondaryNav: {}
+        tabs: {}
+      pageElements:
+        bodyText: {}
+        headingLarge: {}
+        headingMedium: {}
+        headingSmall: {}
+        headingXLarge: {}
+        headingXSmall: {}
+        link: {}
+        pageDescription: {}
+        pageTitle: {}
+    version: 10
+  title: ''

knapsack/data/demos/demo.K5QkcOoZFe.json

@@ -0,0 +1,12 @@
+{
+  "id": "K5QkcOoZFe",
+  "title": "New Variation",
+  "description": "A description",
+  "type": "data",
+  "patternId": "alert",
+  "templateId": "react-rbiiU4NNpR",
+  "data": {
+    "props": {},
+    "slots": {}
+  }
+}

knapsack/data/demos/demo.tQI-uxpXaM.json

@@ -0,0 +1,11 @@
+{
+  "id": "tQI-uxpXaM",
+  "title": "Main",
+  "type": "data",
+  "patternId": "alert",
+  "templateId": "react-rbiiU4NNpR",
+  "data": {
+    "props": {},
+    "slots": {}
+  }
+}

knapsack/data/knapsack.asset-sets.json

@@ -0,0 +1,4 @@
+{
+  "globalAssetSetIds": [],
+  "allAssetSets": {}
+}

knapsack/data/knapsack.custom-page.atoms.yml

@@ -0,0 +1,3 @@
+id: atoms
+title: Atoms
+blockIds: []

knapsack/data/knapsack.custom-page.homepage.yml

@@ -0,0 +1,15 @@
+id: homepage
+title: ''
+blockIds: []
+settings:
+  pageHeader:
+    backgroundColor:
+      colorValue: '#6A4CEC'
+      type: value
+    textColorTitle:
+      colorValue: '#FFFFFF'
+      type: value
+    textColorDescription:
+      colorValue: '#FFFFFF'
+      type: value
+    size: large

knapsack/data/knapsack.design-tokens.json

@@ -0,0 +1 @@
+{}

knapsack/data/knapsack.files.json

@@ -0,0 +1,3 @@
+{
+  "files": {}
+}

knapsack/data/knapsack.navs.yml

@@ -0,0 +1,14 @@
+byId:
+  alert:
+    id: alert
+    name: Alert
+    parentId: atoms
+    path: /pattern/alert
+  atoms:
+    id: atoms
+    name: Atoms
+    parentId: root
+    path: /pages/atoms
+order:
+  - atoms
+  - alert

knapsack/data/knapsack.pattern.alert.json

@@ -0,0 +1,57 @@
+{
+  "id": "alert",
+  "title": "Alert",
+  "description": "",
+  "statuses": {},
+  "templates": [
+    {
+      "id": "react-rbiiU4NNpR",
+      "title": "Alert",
+      "path": "../../packages/gamut/src/Alert/Alert.tsx",
+      "alias": "Alert",
+      "templateLanguageId": "react",
+      "spec": {},
+      "demoIds": ["tQI-uxpXaM", "K5QkcOoZFe"],
+      "blockIds": []
+    }
+  ],
+  "tabs": [
+    {
+      "id": "zIAi7rhtMc",
+      "type": "designSrc"
+    },
+    {
+      "id": "t4wS5fER2",
+      "type": "designSrc"
+    },
+    {
+      "id": "5HfGFK2pP",
+      "type": "designSrc"
+    },
+    {
+      "type": "template",
+      "id": "react-rbiiU4NNpR"
+    }
+  ],
+  "subPages": [],
+  "designSrcComponentsById": {
+    "zIAi7rhtMc": {
+      "id": "zIAi7rhtMc",
+      "componentId": "1884:2431",
+      "title": "Figma Component",
+      "fileId": "ReGfRNillGABAj5SlITalN"
+    },
+    "t4wS5fER2": {
+      "id": "t4wS5fER2",
+      "componentId": "27627:31065",
+      "title": "Figma Component",
+      "fileId": "ReGfRNillGABAj5SlITalN"
+    },
+    "5HfGFK2pP": {
+      "id": "5HfGFK2pP",
+      "componentId": "1118:23",
+      "title": "Figma Component",
+      "fileId": "ReGfRNillGABAj5SlITalN"
+    }
+  }
+}

knapsack/data/knapsack.patterns.json

@@ -0,0 +1,35 @@
+{
+  "statusSets": [
+    {
+      "id": "main",
+      "title": "Status",
+      "statuses": [
+        {
+          "id": "draft",
+          "title": "Draft",
+          "color": "#9b9b9b"
+        },
+        {
+          "id": "needsDesign",
+          "title": "Needs Design",
+          "color": "#FC0"
+        },
+        {
+          "id": "needsDev",
+          "title": "Needs Development",
+          "color": "#FC0"
+        },
+        {
+          "id": "needsReview",
+          "title": "Needs Review",
+          "color": "#FC0"
+        },
+        {
+          "id": "ready",
+          "title": "Ready",
+          "color": "#2ECC40"
+        }
+      ]
+    }
+  ]
+}

knapsack/dist/meta/ks-meta.json

@@ -0,0 +1,3 @@
+{
+  "demoUrls": []
+}

knapsack/dist/tokens/design-tokens.android.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resources>
+</resources>

knapsack/dist/tokens/design-tokens.cjs

@@ -0,0 +1 @@
+module.exports = {};

knapsack/dist/tokens/design-tokens.css

@@ -0,0 +1,2 @@
+:root {
+}

knapsack/dist/tokens/design-tokens.css.scss

@@ -0,0 +1,2 @@
+:root {
+}

knapsack/dist/tokens/design-tokens.d.cts

@@ -0,0 +1 @@
+

knapsack/dist/tokens/design-tokens.d.mts

@@ -0,0 +1 @@
+

knapsack/dist/tokens/design-tokens.d.ts

@@ -0,0 +1 @@
+

knapsack/dist/tokens/design-tokens.js

@@ -0,0 +1 @@
+

knapsack/dist/tokens/design-tokens.json

@@ -0,0 +1 @@
+{}

knapsack/dist/tokens/design-tokens.less

@@ -0,0 +1 @@
+

knapsack/dist/tokens/design-tokens.mjs

@@ -0,0 +1 @@
+

knapsack/dist/tokens/design-tokens.nested.json

@@ -0,0 +1 @@
+{}

knapsack/dist/tokens/design-tokens.scss

@@ -0,0 +1 @@
+$tokens: ();

knapsack/dist/tokens/design-tokens.style-dictionary.json

@@ -0,0 +1 @@
+{}

knapsack/dist/tokens/design-tokens.swift

@@ -0,0 +1,3 @@
+import UIKit
+  public class ColorTokens {
+}

knapsack/dist/tokens/design-tokens.w3c-spec.json

@@ -0,0 +1 @@
+{}

knapsack/knapsack.config.cjs

@@ -0,0 +1,66 @@
+const { KnapsackReactRenderer } = require('@knapsack/renderer-react');
+const { configureKnapsack } = require('@knapsack/app');
+const { join } = require('path');
+// doesn't work
+const { version } = require('../package.json');
+
+module.exports = configureKnapsack({
+  data: join(__dirname, './data'),
+  dist: join(__dirname, './dist'),
+  public: join(__dirname, './public'),
+  version,
+  templateRenderers: [
+    new KnapsackReactRenderer({
+      babelConfig: {
+        presets: [
+          [
+            '@babel/env',
+            {
+              modules: false,
+              targets: 'defaults',
+            },
+          ],
+          '@babel/preset-typescript',
+        ],
+        plugins: [
+          'macros',
+          [
+            '@emotion',
+            {
+              sourceMap: true,
+              autoLabel: 'always',
+              labelFormat: '[local]',
+              cssPropOptimization: true,
+            },
+          ],
+        ],
+        ignore: [],
+        env: {
+          test: {
+            plugins: ['require-context-hook'],
+          },
+        },
+      },
+      webpackConfig: {
+        module: {
+          rules: [],
+        },
+      },
+      demoWrapperPath: join(__dirname, './meta/DemoWrapper.tsx'),
+    }),
+  ],
+  plugins: [
+    [
+      '@emotion/babel-plugin',
+      {
+        sourceMap: true,
+        autoLabel: 'always',
+        labelFormat: '[local]',
+      },
+    ],
+  ],
+  cloud: {
+    siteId: 'codeacademy-sandbox',
+    repoRoot: join(__dirname, '..'),
+  },
+});

knapsack/meta/DemoWrapper.tsx

@@ -0,0 +1,19 @@
+import {
+  ColorMode,
+  coreTheme,
+  createEmotionCache,
+  GamutProvider,
+} from '@codecademy/gamut-styles';
+
+const DemoWrapper: React.FC = ({ children }) => {
+  return (
+    <GamutProvider
+      cache={createEmotionCache({ speedy: false })}
+      theme={coreTheme}
+    >
+      <ColorMode mode="light">{children}</ColorMode>
+    </GamutProvider>
+  );
+};
+
+export default DemoWrapper;

package.json

@@ -50,6 +50,7 @@
     "jest-environment-jsdom": "29.6.4",
     "jest-environment-jsdom-global": "4.0.0",
     "jest-junit": "^16.0.0",
+    "knapsack": "^1.1.0",
     "lerna": "7.2.0",
     "lint-staged": "14.0.1",
     "lodash": "^4.17.5",
@@ -70,13 +71,15 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
+    "@knapsack/app": "^4.65.5",
+    "@knapsack/renderer-react": "^4.65.5",
     "eslint-plugin-lodash": "^7.4.0",
     "onchange": "^7.0.2",
     "webpack": "4.46.0"
   },
   "engines": {
-    "node": "^16.17",
-    "yarn": "^1.21.1"
+    "node": "^18.18.2",
+    "yarn": "^1.22"
   },
   "license": "MIT",
   "lint-staged": {
@@ -110,7 +113,11 @@
     "start:storybook": "cd ./packages/styleguide && yarn start",
     "test": "nx run-many --target=test --all",
     "verify": "nx run-many --target=verify --parallel=3 --all",
-    "verify-all": "yarn verify"
+    "verify-all": "yarn verify",
+    "ks:build": "knapsack --config knapsack/knapsack.config.cjs build",
+    "ks:start": "knapsack --config knapsack/knapsack.config.cjs start",
+    "ks:serve": "NODE_ENV=production knapsack --config knapsack/knapsack.config.cjs serve",
+    "ks:test": "knapsack --config knapsack/knapsack.config.cjs test"
   },
   "workspaces": {
     "packages": [