Integrate tailwind css and create new button library (#2098)

Introduce tailwind as new frontend styling library to replace bulma in the longer run. Also create the first new ui library `ui-buttons` which will be the new standard for buttons ins SCM-Manager. In this library we reconsidered which types of buttons should be used to create a clean and consistent ui.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

scm-ui/ui-scripts/src/tailwind.config.js

@@ -0,0 +1,41 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const path = require("path");
+
+const root = path.resolve(process.cwd(), "scm-ui");
+
+const sizes = [0, 1, 2, 3, 4, 5, 6, "auto"];
+const helpers = ["m", "p"];
+const variants = ["", "x", "y", "t", "r", "l", "b"];
+const bulmaHelpers = helpers
+  .map((helper) => sizes.map((size) => variants.map((variant) => `${helper}${variant}-${size}`)))
+  .flat(3);
+
+module.exports = {
+  // eslint-disable-next-line global-require
+  presets: [require("@scm-manager/ui-styles/src/tailwind.config.preset")],
+  content: [path.join(root, "ui-webapp", "src", "**", "*.tsx")],
+  safelist: bulmaHelpers,
+};

scm-ui/ui-scripts/src/tailwind.css

@@ -0,0 +1,27 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

scm-ui/ui-scripts/src/webpack.config.js

@@ -33,7 +33,13 @@ const isDevelopment = process.env.NODE_ENV === "development";
 const root = path.resolve(process.cwd(), "..");
 
 const babelPlugins = [];
-const webpackPlugins = [];
+const webpackPlugins = [
+  new MiniCssExtractPlugin({
+    filename: "webapp.tailwind.css",
+    chunkFilename: "webapp.tailwind.css",
+    ignoreOrder: false,
+  }),
+];
 
 if (process.env.ANALYZE_BUNDLES === "true") {
   // it is ok to use require here, because we want to load the package conditionally
@@ -82,6 +88,7 @@ module.exports = [
         // enable async/await
         "regenerator-runtime/runtime",
         "./ui-webapp/src/index.tsx",
+        "./ui-scripts/src/tailwind.css",
       ],
     },
     devtool: "eval-cheap-module-source-map",
@@ -101,8 +108,40 @@ module.exports = [
             },
           ],
         },
+        {
+          test: /tailwind\.css$/i,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+            },
+            {
+              loader: "css-loader",
+              options: {
+                importLoaders: 1,
+              },
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: [
+                    [
+                      "tailwindcss",
+                      {
+                        config: path.join(root, "ui-scripts", "src", "tailwind.config.js"),
+                      },
+                    ],
+                    ["autoprefixer", {}],
+                  ],
+                },
+              },
+            },
+          ],
+        },
         {
           test: /\.(css|scss|sass)$/i,
+          exclude: /tailwind\.css$/i,
           use: [
             // Creates `style` nodes from JS strings
             "style-loader",