chore: remove support for LESS (#18)

* chore: cleanup storybook config

* chore: remove less styles

* chore: remove less support from build

Author: ankt271192

.storybook/main.js

@@ -1,90 +1,4 @@
-const path = require("path");
-const Theme = require("./theme");
-const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin");
-
 module.exports = {
     stories: ["../packages/**/*.stories.[tj]sx", "../packages/**/*.stories.mdx"],
-    addons: ["@storybook/addon-essentials", "@storybook/addon-links"],
-    typescript: {
-        typescript: {
-            check: true,
-            checkOptions: {},
-            reactDocgen: "react-docgen-typescript",
-            reactDocgenTypescriptOptions: {
-                shouldExtractLiteralValuesFromEnum: true,
-                propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
-                compilerOptions: {
-                    allowSyntheticDefaultImports: false,
-                    esModuleInterop: false,
-                },
-            },
-        },
-    },
-    webpackFinal: async (config) => {
-        config.module.rules.push({
-            test: /\.(ts|tsx)$/,
-            use: [
-                {
-                    loader: require.resolve("babel-loader"),
-                    options: {
-                        cacheDirectory: true,
-                        presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
-                        plugins: [
-                            ["import", { libraryName: "antd", libraryDirectory: "lib", style: true }],
-                            ["@babel/plugin-proposal-decorators", { legacy: true }],
-                            ["@babel/plugin-proposal-class-properties", { loose: true }],
-                        ],
-                    },
-                },
-            ],
-        });
-        config.module.rules.push({
-            test: /\.less$/,
-            use: [
-                "style-loader",
-                "css-loader",
-                {
-                    loader: "less-loader",
-                    options: {
-                        lessOptions: {
-                            javascriptEnabled: true,
-                            modifyVars: Theme,
-                        },
-                    },
-                },
-            ],
-            include: path.resolve(__dirname, "../"),
-        });
-        config.plugins.push(new TSDocgenPlugin());
-        config.resolve.extensions.push(".ts", ".tsx");
-        // Replaces the webpack rule that loads SVGs as static files to leave out SVG files for us to handle
-        const indexOfRuleToRemove = config.module.rules.findIndex((rule) => rule.test.toString().includes("svg"));
-        config.module.rules.splice(indexOfRuleToRemove, 1, {
-            test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
-            loader: require.resolve("file-loader"),
-            options: {
-                name: "static/media/[name].[hash:8].[ext]",
-                esModule: false,
-            },
-        });
-
-        config.module.rules.push({
-            test: /\.svg$/,
-            use: [
-                {
-                    loader: "@svgr/webpack",
-                    options: {
-                        svgoConfig: {
-                            plugins: [
-                                {
-                                    removeViewBox: false,
-                                },
-                            ],
-                        },
-                    },
-                },
-            ],
-        });
-        return config;
-    },
+    addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-ant-design"],
 };

.storybook/preview.js

@@ -3,10 +3,6 @@ import { addDecorator, addParameters } from "@storybook/react";
 import sortEachDepth from "./sortEachDepth";
 import { Provider, Themes } from "../packages/apsara-ui/src";
 
-// Apply global styles for storybook
-import "!style-loader!css-loader!less-loader!./storybook.less";
-import "../packages/apsara-ui/styles/app.less";
-
 addDecorator((story) => <div style={{ margin: "16px" }}>{story()}</div>);
 addParameters({
     options: {

.storybook/storybook.less

@@ -28,6 +28,10 @@
         "@babel/preset-typescript": "^7.10.4",
         "@commitlint/cli": "^11.0.0",
         "@commitlint/config-conventional": "^11.0.0",
+        "@storybook/addon-essentials": "^6.4.9",
+        "@storybook/addon-links": "^6.4.9",
+        "@storybook/preset-ant-design": "^0.0.2",
+        "@storybook/react": "^6.4.9",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.0.4",
         "@types/node": "^14.10.1",

.storybook/theme.js

@@ -53,11 +53,6 @@
     "devDependencies": {
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-url": "^5.0.1",
-        "@storybook/addon-controls": "^6.1.21",
-        "@storybook/addon-essentials": "^6.1.21",
-        "@storybook/addon-links": "^6.1.10",
-        "@storybook/addon-storysource": "^6.1.10",
-        "@storybook/react": "^6.1.10",
         "@svgr/rollup": "^5.4.0",
         "@svgr/webpack": "^5.4.0",
         "@types/react-window": "^1.8.2",
@@ -67,7 +62,6 @@
         "file-loader": "^6.1.1",
         "less": "^3.12.2",
         "less-loader": "^7.0.1",
-        "react-docgen-typescript-webpack-plugin": "^1.1.0",
         "rollup": "^2.27.0",
         "rollup-plugin-multi-input": "^1.1.1",
         "rollup-plugin-peer-deps-external": "^2.2.3",

package.json

@@ -3,14 +3,10 @@ import multiInput from "rollup-plugin-multi-input";
 import typescript from "rollup-plugin-typescript2";
 import tsImportPluginFactory from "ts-import-plugin";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import postcss from "rollup-plugin-postcss";
-import rollupPostcssLessLoader from "rollup-plugin-postcss-webpack-alias-less-loader";
 import svgr from "@svgr/rollup";
 import json from "@rollup/plugin-json";
 import url from "@rollup/plugin-url";
 
-import Theme from "./theme";
-
 export default {
     input: ["src/**/*.ts", "src/**/*.tsx", "!src/**/*.stories.[tj]s[x]", "!src/**/*.test.[tj]s[x]"],
     /*
@@ -43,22 +39,9 @@ export default {
             limit: Infinity,
             sourceDir: path.join(__dirname, "assets"),
         }),
-        postcss({
-            use: [["less", { javascriptEnabled: true, modifyVars: Theme }]],
-            loaders: [
-                rollupPostcssLessLoader({
-                    nodeModulePath: path.resolve(__dirname, "./node_modules"),
-                    aliases: {},
-                    options: {
-                        javascriptEnabled: true,
-                    },
-                }),
-            ],
-        }),
 
         // Prevents Rollup from bundling the peer dependencies
         peerDepsExternal(),
-
         // Transpiles our TypeScript code into JavaScript
         typescript({
             clean: true,
@@ -72,7 +55,7 @@ export default {
                     before: tsImportPluginFactory({
                         libraryName: "antd",
                         libraryDirectory: "lib",
-                        style: true,
+                        style: "css",
                     }),
                 }),
             ],