Merge pull request #68 from merative/ab/add-shared-entrypoint-2

Add shared entrypoint

.storybook/preview.js

@@ -1,3 +1,4 @@
+import "../packages/carbon-addons-devenv/src/scss/index.scss";
 import "../packages/custom-carbon-addons/src/scss/index.scss";
 
 export const parameters = {

packages/carbon-addons-devenv/src/index.js

@@ -1,7 +1,7 @@
-import "../../custom-carbon-addons/src/scss/index.scss";
-import "regenerator-runtime/runtime";
-import { renderers, sampleRenderers } from "./staticExports";
+/*
+ * Copyright Merative US L.P. 2021, 2024
+ */
+import "./scss/index.scss";
+import sampleRenderers from "../sample_renderers";
 
-import { requireCustomCarbonAddons } from "./dynamicExports";
-
-export default { requireCustomCarbonAddons, renderers, sampleRenderers };
+export default sampleRenderers;

packages/carbon-addons-devenv/src/scss/addons_samples/logo.scss

@@ -1,5 +1,5 @@
 .#{$prefix}--logo {
-  box-shadow: inset 0 0 0 2px $layer-01;
+  box-shadow: inset 0 0 0 2px themes.get("layer-01");
   border-radius: $border-radius-round;
   font-weight: 500;
   overflow: hidden;

packages/carbon-addons-devenv/src/scss/addons_samples/personfolio.scss

@@ -1,25 +1,25 @@
 .#{$prefix}--personfolio {
-  background-color: $layer-01;
-  color: $text-primary;
+  background-color: themes.get("layer-01");
+  color: themes.get("text-primary");
   border-radius: 6px;
   border-width: 1px 1px 1px 1px;
   border-style: solid !important;
-  padding: $spacing-05;
-  margin-top: $spacing-05;
+  padding: themes.get("spacing-05");
+  margin-top: themes.get("spacing-05");
 
   &--child {
-    border-color: $support-error;
+    border-color: themes.get("support-error");
   }
 
   &--youngadult {
-    border-color: $support-success;
+    border-color: themes.get("support-success");
   }
 
   &--adult {
-    border-color: $support-warning;
+    border-color: themes.get("support-warning");
   }
 
   &--senior {
-    border-color: $support-info;
+    border-color: themes.get("support-info");
   }
 }

packages/carbon-addons-devenv/src/scss/index.scss

@@ -1,5 +1,9 @@
-@import "./app.scss";
+@use "@carbon/themes/scss/themes" as *;
+@use "@carbon/themes";
 
 .spm-custom-component {
-  @import "./carbon-components.scss";
+  @import "./prefix.scss";
+  @import "./variables.scss";
+  @import "./addons_samples/logo.scss";
+  @import "./addons_samples/personfolio.scss";
 }

packages/carbon-addons-devenv/src/scss/logo.scss

@@ -1,5 +1,5 @@
 .#{$prefix}--logo {
-  box-shadow: inset 0 0 0 2px $carbon--white-0;
+  box-shadow: inset 0 0 0 2px themes.get("layer-01");
   border-radius: $border-radius-round;
   font-weight: 500;
   overflow: hidden;

packages/carbon-addons-devenv/src/scss/personfolio.scss

@@ -1,25 +1,25 @@
 .#{$prefix}--personfolio {
-  background-color: $ui-01;
-  color: $text-01;
+  background-color: themes.get("layer-01");
+  color: themes.get("text-primary");
   border-radius: 6px;
   border-width: 1px 1px 1px 1px;
   border-style: solid !important;
-  padding: $spacing-05;
-  margin-top: $spacing-05;
+  padding: themes.get("spacing-05");
+  margin-top: themes.get("spacing-05");
 
   &--child {
-    border-color: $support-01;
+    border-color: themes.get("support-error");
   }
 
   &--youngadult {
-    border-color: $support-02;
+    border-color: themes.get("support-success");
   }
 
   &--adult {
-    border-color: $support-03;
+    border-color: themes.get("support-warning");
   }
 
   &--senior {
-    border-color: $support-04;
+    border-color: themes.get("support-info");
   }
 }

packages/carbon-addons-devenv/src/scss/prefix.scss

@@ -0,0 +1 @@
+$prefix: "bx";

packages/carbon-addons-devenv/src/scss/variables.scss

@@ -1,6 +1,4 @@
-$prefix: "bx";
 $border-radius-round: 100vw !default;
 $width-logo-large: 120px; // do we need small and medium too
 $width-logo-medium: 80px;
 $width-logo-small: 36px;
-$border-base: 1px solid $background;

packages/carbon-addons-entrypoint/src/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright Merative US L.P. 2024
+ */
+
+import "regenerator-runtime/runtime";
+
+// eslint-disable-next-line import/no-unresolved
+import sampleRenderers from "devenv_pkg/src";
+// eslint-disable-next-line import/no-unresolved
+import renderers from "custom_pkg/src";
+
+/* Imports Carbon Addons dynamically */
+const requireCustomCarbonAddons = async () => {
+  const customCarbonAddons = await import(
+    /* webpackChunkName: "simple" */ "../../custom-carbon-addons/src/apollo-client-hooks"
+  );
+  return customCarbonAddons;
+};
+
+// These items will become children of window.spmcustom
+export { requireCustomCarbonAddons, renderers, sampleRenderers };

packages/custom-carbon-addons/src/index.js

@@ -1,8 +1,7 @@
 /*
  * Copyright Merative US L.P. 2021, 2024
  */
+import "./scss/index.scss";
+import renderers from "../renderers";
 
-// eslint-disable-next-line import/no-unresolved
-import { renderers, sampleRenderers } from "devenv_pkg/src";
-
-export { renderers, sampleRenderers };
+export default renderers;

packages/custom-carbon-addons/src/scss/addons/index.scss

@@ -0,0 +1 @@
+// Import your custom SCSS files in this file to automatically include them in the build.

packages/custom-carbon-addons/src/scss/addons/readme.txt

@@ -1 +1 @@
-Add your custom SCSS files to this directory
+Add your custom SCSS files to this directory and import them in index.scss.

packages/custom-carbon-addons/src/scss/index.scss

@@ -1,17 +1,7 @@
-@import "../../../carbon-addons-devenv/src/scss/app.scss";
+@use "@carbon/themes/scss/themes" as *;
+@use "@carbon/themes";
 
 .spm-custom-component {
-  //-------------------------
-  // Variable overrides
-  //-------------------------
   @import "./variables.scss";
-  //-------------------------
-  // Carbon-Components
-  //-------------------------
-  @import "../../../carbon-addons-devenv/src/scss/carbon-components.scss";
-  //-------------------------
-  // Custom addons scss here
-  //-------------------------
-  // Sample component addons
-  //@import '../../../carbon-addons-devenv/src/scss/addon-samples.scss';
+  @import "./addons";
 }

webpack.config.js

@@ -3,7 +3,10 @@ const webpack = require("webpack");
 const ReactDevToolsIFramePlugin = require("react-dev-tools-iframe-webpack-plugin");
 
 module.exports = {
-  entry: ["./public-path.js", "./packages/carbon-addons-devenv/src/index.js"],
+  entry: [
+    "./public-path.js",
+    "./packages/carbon-addons-entrypoint/src/index.js",
+  ],
   mode: "development",
   module: {
     rules: [
@@ -21,10 +24,10 @@ module.exports = {
             },
           },
         ],
-        include: path.resolve(
-          __dirname,
-          "./packages/custom-carbon-addons/src/scss",
-        ),
+        include: [
+          path.resolve(__dirname, "./packages/carbon-addons-devenv/src/scss"),
+          path.resolve(__dirname, "./packages/custom-carbon-addons/src/scss"),
+        ],
       },
       {
         test: /\.(js|jsx)$/,
@@ -59,12 +62,12 @@ module.exports = {
     extensions: ["*", ".js", ".jsx"],
     alias: {
       devenv_pkg: path.resolve("./packages/carbon-addons-devenv"),
+      custom_pkg: path.resolve("./packages/custom-carbon-addons"),
     },
   },
   output: {
     path: path.resolve(__dirname, "dist/"),
     library: "spmcustom",
-    libraryExport: "default",
     publicPath: "/dist/",
     filename: "spm-custom-carbon-addons-[name].bundle.js",
     chunkFilename: "spm-custom-carbon-addons-[name].chunk.js",