Enable dependabot updates for WB/WS (and group them) (#1863)

## Summary:

Juan and I were discussing keeping Perseus dependnecies up to date with webapp (especially WB and WS). This is a trial run to see if Dependabot will help us. It should open up a new PR any time WB or WS packages are released. And all WB or WS packages that received an update should be updated together in the same Perseus PR. 

Issue: "none"

## Test plan:

I suspect I'll need to land this and monitor it to test. Github action infra is notoriously difficult to test locally.

Author: jeremywiebe

Reviewers: jandrade, jeremywiebe, #perseus

Required Reviewers:

Approved By: jandrade

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1863

.changeset/mighty-rules-talk.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Switch two corner usages of deprecated @khanacademy/wonder-blocks-spacing to @khanacademy/wonder-blocks-tokens

.eslintrc.js

@@ -172,6 +172,11 @@ module.exports = {
         "no-invalid-this": "off",
         "@typescript-eslint/no-this-alias": "off",
         "no-unused-expressions": "off",
+        "no-restricted-imports": [
+            "error",
+            "@khanacademy/wonder-blocks-color",
+            "@khanacademy/wonder-blocks-spacing",
+        ],
         "object-curly-spacing": "off",
         semi: "off",
 

.github/dependabot.yml

@@ -10,3 +10,15 @@ updates:
       allow:
           - dependency-name: "@khanacademy/eslint-config"
           - dependency-name: "@khanacademy/eslint-plugin"
+      assignees:
+          - "@Khan/perseus"
+
+      # Grouped updates for Wonder Blocks and Wonder Stuff releases.
+      # This helps us to stay in sync with the latest releases of these packages.
+      groups:
+          wonder-stuff:
+              patterns:
+                  - "@khanacademy/wonder-stuff-*"
+          wonder-blocks:
+              patterns:
+                  - "@khanacademy/wonder-blocks-*"

packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx

@@ -1,5 +1,4 @@
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import DeviceFramer from "../device-framer";
 
@@ -21,7 +20,7 @@ const SampleContent = () => {
                 color: color.offWhite,
                 width: "90%",
                 height: "300px",
-                padding: Spacing.medium_16,
+                padding: spacing.medium_16,
             }}
         >
             The DeviceFramer controls the size of the content inside the frame.

packages/perseus-editor/src/components/widget-editor.tsx

@@ -8,8 +8,8 @@ import {
 } from "@khanacademy/perseus";
 import {useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
 import Switch from "@khanacademy/wonder-blocks-switch";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 import _ from "underscore";
 
@@ -241,7 +241,7 @@ function LabeledSwitch(props: {
     return (
         <>
             <label htmlFor={id}>{label}</label>
-            <Strut size={Spacing.xxSmall_6} />
+            <Strut size={spacing.xxSmall_6} />
             <Switch id={id} {...switchProps} />
         </>
     );