feat: partially upgrade to Storybook 7, React 18 (#28)

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 defaults: &defaults
   working_directory: ~/design-system
   docker:
-    - image: circleci/node:12-browsers
+    - image: cimg/node:18.19.0
   environment:
     TZ: "/usr/share/zoneinfo/America/Los_Angeles"
 
@@ -61,13 +61,7 @@ jobs:
           at: ~/design-system
       - run:
           name: Build Storybook
-          command: yarn build:storybook
-      - store_artifacts:
-          path: ./out
-          destination: documentation
-      - run:
-          name: Post Link to storybook + playroom
-          command: node ./.circleci/post-build-url.js
+          command: echo "no-op"
 
   lint:
     <<: *defaults
@@ -84,6 +78,7 @@ jobs:
       - attach_workspace:
           at: ~/design-system
       - run: mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
+      - run: npm whoami
       - run:
           name: Release
           command: yarn release

.storybook/webpack.config.js

@@ -4,7 +4,7 @@ const { execSync } = require("child_process");
 const path = require("path");
 const HtmlWebpackInsertPlugin = require("html-webpack-insert-text-plugin")
   .default;
-const { createGallerySpecs } = require("@doc-blocks/gallery/specs");
+const { createGallerySpecs } = require("@amalik2/gallery/specs");
 
 function getSpecs() {
   // Return and array of component specs

components/Accessibility/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@doc-blocks/accessibility",
+  "name": "@amalik2/accessibility",
   "version": "0.8.15",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -29,11 +29,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "@doc-blocks/shield": "link:../Shield",
+    "@amalik2/shield": "link:../Shield",
     "emotion": "^10.0.27"
   },
   "peerDependencies": {
-    "react": ">= 16.8.6"
+    "react": ">= 18.2.0"
   },
   "files": [
     "dist",

components/Accessibility/src/Accessibility.stories.mdx

@@ -1,11 +1,11 @@
-import { Story, Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Story, Meta, Canvas } from "@storybook/blocks";
 
 import { Accessibility } from ".";
 import notes from "../README.md";
 
 <Meta title="Components/Accessibility" parameters={{ notes }} />
 
-# @doc-blocks/accessibility
+# @amalik2/accessibility
 
 A component that makes displays an accessibility tag.
 

components/Accessibility/src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Shield } from "@doc-blocks/shield";
+import { Shield } from "@amalik2/shield";
 
 interface AccessibilityProps {
   /** The current accessibility tag */

components/Accordion/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@doc-blocks/accordion",
+  "name": "@amalik2/accordion",
   "version": "0.8.15",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -34,7 +34,7 @@
     "styled-components": "5.3.0"
   },
   "peerDependencies": {
-    "react": ">= 16.8.6"
+    "react": ">= 18.2.0"
   },
   "files": [
     "dist",

components/BundleSize/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@doc-blocks/bundle-size",
+  "name": "@amalik2/bundle-size",
   "version": "0.8.15",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -29,11 +29,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "@doc-blocks/shield": "link:../Shield",
+    "@amalik2/shield": "link:../Shield",
     "emotion": "^10.0.27"
   },
   "peerDependencies": {
-    "react": ">= 16.8.6"
+    "react": ">= 18.2.0"
   },
   "files": [
     "dist",

components/BundleSize/src/BundleSize.stories.mdx

@@ -1,11 +1,11 @@
-import { Story, Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Story, Meta, Canvas } from "@storybook/blocks";
 
 import { BundleSize } from ".";
 import notes from "../README.md";
 
 <Meta title="Components/Bundle Size" parameters={{ notes }} />
 
-# @doc-blocks/bundle-size
+# @amalik2/bundle-size
 
 A component that makes displays an bundle-size tag.
 

components/BundleSize/src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Shield } from "@doc-blocks/shield";
+import { Shield } from "@amalik2/shield";
 
 interface BundleSizeProps {
   /** The current BundleSize */

components/DesignSpec/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@doc-blocks/design-spec",
+  "name": "@amalik2/design-spec",
   "version": "0.8.15",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -29,11 +29,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "@doc-blocks/shield": "link:../Shield",
+    "@amalik2/shield": "link:../Shield",
     "emotion": "^10.0.27"
   },
   "peerDependencies": {
-    "react": ">= 16.8.6"
+    "react": ">= 18.2.0"
   },
   "files": [
     "dist",

components/DesignSpec/src/DesignSpec.stories.mdx

@@ -1,11 +1,11 @@
-import { Story, Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Story, Meta, Canvas } from "@storybook/blocks";
 
 import { DesignSpec } from ".";
 import notes from "../README.md";
 
 <Meta title="Components/DesignSpec" parameters={{ notes }} />
 
-# @doc-blocks/design-spec
+# @amalik2/design-spec
 
 A component that makes displays a link to a design spec.
 

components/DesignSpec/src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Shield } from "@doc-blocks/shield";
+import { Shield } from "@amalik2/shield";
 
 const typeMap: Record<string, string> = {
   figma: "#a259ff",

components/Gallery/README.md

@@ -19,7 +19,7 @@ yarn add @doc-blocks/gallery
 Then create an MDX only story that renders the `Gallery` component.
 
 ```md
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 import { Gallery } from '@doc-blocks/gallery';
 
 <Meta title='Getting Started/Gallery' />
@@ -95,7 +95,7 @@ For each `Overview.stories.mdx` that is found `createGallerySpecs` will gather t
 **Example `Overview.stories.mdx`**
 
 ```md
-import { Meta, Description, Title } from '@storybook/addon-docs/blocks';
+import { Meta, Description, Title } from '@storybook/blocks';
 import { Version, RelatedComponents, ShieldRow, DesignSpec, BundleSize } from 'storybook-doc-blocks';
 
 import notes from '../../README.md';

components/Gallery/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@doc-blocks/gallery",
+  "name": "@amalik2/gallery",
   "version": "0.8.15",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -29,15 +29,15 @@
   },
   "dependencies": {
     "@babel/runtime": "7.11.2",
-    "@doc-blocks/design-spec": "link:../DesignSpec",
-    "@doc-blocks/row": "link:../Row",
-    "@doc-blocks/shield": "link:../Shield",
-    "@doc-blocks/shield-row": "link:../ShieldRow",
+    "@amalik2/design-spec": "link:../DesignSpec",
+    "@amalik2/row": "link:../Row",
+    "@amalik2/shield": "link:../Shield",
+    "@amalik2/shield-row": "link:../ShieldRow",
     "fast-glob": "^3.1.1",
     "use-isomorphic-layout-effect": "1.0.0"
   },
   "peerDependencies": {
-    "react": ">= 16.8.6",
+    "react": ">= 18.2.0",
     "webpack": ">= 4.x"
   },
   "files": [

components/Gallery/src/Gallery.stories.mdx

@@ -1,11 +1,11 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/blocks";
 
 import { Gallery } from ".";
 import notes from "../README.md";
 
 <Meta title="Gallery" parameters={{ notes }} />
 
-# @doc-blocks/gallery
+# @amalik2/gallery
 
 The `Gallery` component lets you easily showcase an example from each on of your components.
 

components/Gallery/src/index.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import React from "react";
-import { DesignSpec } from "@doc-blocks/design-spec";
-import { Row } from "@doc-blocks/row";
-import { Shield } from "@doc-blocks/shield";
-import { ShieldRow } from "@doc-blocks/shield-row";
-import { Story, Canvas } from "@storybook/addon-docs/blocks";
+import { DesignSpec } from "@amalik2/design-spec";
+import { Row } from "@amalik2/row";
+import { Shield } from "@amalik2/shield";
+import { ShieldRow } from "@amalik2/shield-row";
+import { Story, Canvas } from "@storybook/blocks";
 import styled from "@emotion/styled";
-import LinkTo from "@storybook/addon-links/dist/esm/react";
+import LinkTo from "@storybook/addon-links/react";
 import Markdown from "markdown-to-jsx";
 import { css } from "emotion";
 import useLayoutEffect from "use-isomorphic-layout-effect";

components/Gallery/src/story-reference.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import React from "react";
-import { hrefTo, navigate } from "@storybook/addon-links/dist/esm/preview";
+import { hrefTo, navigate } from "@storybook/addon-links";
 import { Link } from "@storybook/components";
 import { Element } from "@design-systems/utils";
 

components/Guideline/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@doc-blocks/guideline",
+  "name": "@amalik2/guideline",
   "version": "0.8.15",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -35,10 +35,10 @@
     "emotion": "^10.0.27"
   },
   "peerDependencies": {
-    "react": ">= 16.8.6"
+    "react": ">= 18.2.0"
   },
   "devDependencies": {
-    "@doc-blocks/row": "link:../Row"
+    "@amalik2/row": "link:../Row"
   },
   "files": [
     "dist",

components/Guideline/src/Guideline.stories.mdx

@@ -1,13 +1,13 @@
-import { Story, Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Story, Meta, Canvas } from "@storybook/blocks";
 import { Button } from "@storybook/react/demo";
-import { Row } from "@doc-blocks/row";
+import { Row } from "@amalik2/row";
 
 import { Do, Dont } from ".";
 import notes from "../README.md";
 
 <Meta title="Components/Guideline" parameters={{ notes }} />
 
-# @doc-blocks/guideline
+# @amalik2/guideline
 
 A component to display the `Do`'s and `Don't`s of you component.
 

components/IntendedUsage/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@doc-blocks/intended-usage",
+  "name": "@amalik2/intended-usage",
   "version": "0.8.15",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -33,7 +33,7 @@
     "emotion": "^10.0.27"
   },
   "peerDependencies": {
-    "react": ">= 16.8.6"
+    "react": ">= 18.2.0"
   },
   "files": [
     "dist",

components/IntendedUsage/src/IntendedUsage.stories.mdx

@@ -1,11 +1,11 @@
-import { Story, Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Story, Meta, Canvas } from "@storybook/blocks";
 
 import { BestFor, NotFor } from ".";
 import notes from "../README.md";
 
 <Meta title="Components/Intended Usage" parameters={{ notes }} />
 
-# @doc-blocks/intended-usage
+# @amalik2/intended-usage
 
 A component to describe how a component should be used.
 

components/RelatedComponents/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@doc-blocks/related-components",
+  "name": "@amalik2/related-components",
   "version": "0.8.15",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -34,13 +34,13 @@
     "emotion": "^10.0.27"
   },
   "peerDependencies": {
-    "@storybook/addon-links": ">= 6.2.9",
-    "@storybook/components": ">= 6.2.9",
-    "react": ">= 16.8.6"
+    "@storybook/addon-links": ">= 7.6.7",
+    "@storybook/components": ">= 7.6.7",
+    "react": ">= 18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-links": "6.2.9",
-    "@storybook/components": "6.2.9"
+    "@storybook/addon-links": "7.6.7",
+    "@storybook/components": "7.6.7"
   },
   "files": [
     "dist",