feat(elements-colors): update colors preview (#13066)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>

packages/colors/examples/preview/next.config.js

@@ -0,0 +1,11 @@
+const { PHASE_PRODUCTION_BUILD } = require('next/constants')
+
+module.exports = (phase, { defaultConfig }) => {
+  if (phase === PHASE_PRODUCTION_BUILD) {
+    return {
+        basePath: '/colors/examples/preview',
+    }
+  }
+
+  return defaultConfig;
+}

packages/colors/examples/preview/package.json

@@ -6,16 +6,16 @@
   "browserslist": "last 2 versions",
   "source": "index.html",
   "scripts": {
-    "build": "parcel build --dist-dir build --public-url \"/colors/examples/preview\" index.html",
-    "develop": "parcel index.html --no-cache"
-  },
-  "devDependencies": {
-    "@carbon/colors": "^10.37.1",
-    "@parcel/transformer-sass": "^2.0.1",
-    "parcel": "^2.0.1"
+    "develop": "next",
+    "build": "next build && next export -o build"
   },
   "dependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "@carbon/colors": "link:../../",
+    "@carbon/styles": "link:../../../styles",
+    "change-case": "^4.1.1",
+    "next": "^10.0.7",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "sass": "^1.57.1"
   }
 }

packages/colors/examples/preview/src/pages/_app.js

@@ -0,0 +1,5 @@
+import '../styles.scss';
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

packages/colors/examples/preview/src/components/App.js → packages/colors/examples/preview/src/pages/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { colors, unstable_hoverColors } from '@carbon/colors';
+import { colors, hoverColors } from '@carbon/colors';
 
 function getHoverColor(swatch, grade) {
-  for (const [key, value] of Object.entries(unstable_hoverColors)) {
+  for (const [key, value] of Object.entries(hoverColors)) {
     if (!key.includes(swatch)) {
       continue;
     }

packages/colors/examples/preview/src/styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'styles/reset' as *;