Revert "UI Editor styling (#40)"

This reverts commit 89ae255. This was causing `openmrs` to fail to compile due to CSS loader problems.
openmrs · Nov 24, 2020 · 0441fd0 · 0441fd0
1 parent bbd9a6f
commit 0441fd0
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 81 deletions.
diff --git a/packages/esm-app-shell/src/declarations.d.tsx b/packages/esm-app-shell/src/declarations.d.tsx
diff --git a/packages/esm-app-shell/webpack.config.js b/packages/esm-app-shell/webpack.config.js
@@ -62,29 +62,13 @@ module.exports = {
         },
       },
       {
-        test: /esm-styleguide\/.+\.css$/i,
+        test: /\.css$/,
         use: [
           { loader: require.resolve(MiniCssExtractPlugin.loader) },
           { loader: require.resolve("css-loader") },
           { loader: require.resolve("postcss-loader") },
         ],
       },
-      {
-        test: /node_modules\/.+\.css$/i,
-        use: ["style-loader", "css-loader"],
-      },
-      {
-        test: /esm-extensions\/.+\.css$/i,
-        use: [
-          "style-loader",
-          {
-            loader: "css-loader",
-            options: {
-              modules: true,
-            },
-          },
-        ],
-      },
       {
         test: /\.(woff|woff2|png)?$/,
         use: [{ loader: require.resolve("file-loader") }],

diff --git a/packages/esm-extensions/src/declarations.d.tsx b/packages/esm-extensions/src/declarations.d.tsx
diff --git a/packages/esm-extensions/src/extension-slot-react.component.tsx b/packages/esm-extensions/src/extension-slot-react.component.tsx
@@ -5,7 +5,6 @@ import React, {
   useEffect,
   useCallback,
 } from "react";
-import { TooltipIcon } from "carbon-components-react";
 import { ModuleNameContext, ExtensionContext } from "@openmrs/esm-context";
 import { configCacheNotifier } from "@openmrs/esm-config";
 import {
@@ -17,13 +16,13 @@ import {
   unregisterExtensionSlot,
   AttachedExtensionInfo,
 } from "./extensions";
-import styles from "./ui-editor.styles.css";
+import { TooltipIcon } from "carbon-components-react";
 
 interface ExtensionSlotBaseProps {
   extensionSlotName: string;
   children?: ReactNode;
+  style?: React.CSSProperties;
   state?: Record<string, any>;
-  className?: string;
 }
 
 // remainder of props are for the top-level <div>
@@ -32,8 +31,8 @@ export type ExtensionSlotReactProps<T = {}> = ExtensionSlotBaseProps & T;
 export const ExtensionSlotReact: React.FC<ExtensionSlotReactProps> = ({
   extensionSlotName,
   children,
+  style,
   state,
-  className,
   ...divProps
 }: ExtensionSlotReactProps) => {
   const [attachedExtensionInfos, setAttachedExtensionInfos] = useState<
@@ -74,12 +73,12 @@ export const ExtensionSlotReact: React.FC<ExtensionSlotReactProps> = ({
     return () => sub.unsubscribe();
   }, [extensionSlotName]);
 
-  const divClassName = `${className ?? ""} ${
-    getIsUIEditorEnabled() ? styles.slot : ""
-  }`;
+  const divStyle = getIsUIEditorEnabled()
+    ? { ...style, backgroundColor: "cyan" }
+    : style;
 
   return (
-    <div className={divClassName} {...divProps}>
+    <div style={divStyle} {...divProps}>
       {attachedExtensionInfos.map(
         ({
           extensionId,
@@ -102,9 +101,6 @@ export const ExtensionSlotReact: React.FC<ExtensionSlotReactProps> = ({
           );
         }
       )}
-      {getIsUIEditorEnabled() && (
-        <div className={styles.slotName}>{extensionSlotName}</div>
-      )}
     </div>
   );
 };
@@ -136,8 +132,12 @@ export const ExtensionReact: React.FC<ExtensionReactProps> = ({ state }) => {
   }, [actualExtensionSlotName, attachedExtensionSlotName, extensionId]);
 
   return getIsUIEditorEnabled() ? (
-    <TooltipIcon tooltipText={extensionId} align="center" direction="top">
-      <div className={styles.extension}>
+    <TooltipIcon
+      tooltipText={`Slot Name : ${attachedExtensionSlotName}`}
+      align="center"
+      direction="top"
+    >
+      <div style={{ outline: "0.125rem solid yellow" }}>
         <slot ref={ref} />
       </div>
     </TooltipIcon>

diff --git a/packages/esm-extensions/src/ui-editor.styles.css b/packages/esm-extensions/src/ui-editor.styles.css
diff --git a/packages/esm-extensions/webpack.config.js b/packages/esm-extensions/webpack.config.js
@@ -2,7 +2,7 @@ const { resolve } = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 
-const { peerDependencies } = require("./package.json");
+const { peerDependencies } = require('./package.json');
 
 module.exports = {
   entry: [
@@ -27,22 +27,6 @@ module.exports = {
         exclude: /node_modules/,
         use: "babel-loader",
       },
-      {
-        test: /node_modules\/.+\.css$/i,
-        use: ["style-loader", "css-loader"],
-      },
-      {
-        test: /\.css$/,
-        use: [
-          "style-loader",
-          {
-            loader: "css-loader",
-            options: {
-              modules: true,
-            },
-          },
-        ],
-      },
     ],
   },
   resolve: {