storybook setup and stuff

Author: StoneT2000

.storybook/webpack.config.js

@@ -1,8 +1,10 @@
+var path = require("path");
 module.exports = {
   module: {
     rules: [
       {
         test: /\.(ts|tsx)$/,
+        include: path.resolve("../"),
         use: [
           {
             loader: require.resolve("awesome-typescript-loader"),
@@ -18,8 +20,16 @@ module.exports = {
       },
       {
         test: /\.(less|css)$/,
+        include: path.resolve("../"),
         use: ["style-loader", "css-loader", "less-loader"]
-      }
+      },
+      {
+        test: /\.(jpg|png|svg)$/,
+        include: path.resolve("../"),
+        use: {
+          loader: 'url-loader',
+        },
+      },
     ]
   },
   resolve: {

components/Button/index.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import classnames from 'classnames';
+
+import "./styles.less";
+
+type ButtonProps = {
+  className?: string,
+  type?: string,
+  size?: string,
+}
+
+/* Default Button is medium sized */
+export const Button: React.FunctionComponent<ButtonProps> = ({ className, type, children }) => {
+  let classes = classnames("acm-btn", {"acm-btn-primary": type === "primary"});
+  if (className) {
+    classes = classnames(classes, ...className.split(" "));
+  }
+  console.log(classes);
+  return (
+    <button className={classes}>
+      <span>{children}</span>
+    </button>
+  );
+};

components/Button/styles.less

@@ -0,0 +1,5 @@
+@import "../../styles/vars.less";
+.acm-button {
+  background-color: rgb(51,56,68);
+  color: @white;
+}

index.tsx

@@ -1 +1,2 @@
+export { Button } from "./components/Button";
 export * from "antd";

package-lock.json

@@ -4,9 +4,9 @@
   "description": "ACM Components, an extension of Ant Design",
   "main": "/lib/index.js",
   "scripts": {
-    "storybook": "start-storybook",
+    "storybook": "start-storybook -s ./stories/assets -p 9001",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --display-error-details"
+    "build": "rm -rf lib && webpack --display-error-details"
   },
   "author": "",
   "license": "MIT",
@@ -20,6 +20,7 @@
     "@storybook/addon-actions": "^5.2.5",
     "@storybook/addon-info": "^5.2.5",
     "@storybook/react": "^5.2.5",
+    "@types/classnames": "^2.2.10",
     "@types/jest": "^24.0.22",
     "@types/react": "^16.9.11",
     "awesome-typescript-loader": "^5.2.1",
@@ -52,6 +53,7 @@
     "webpack-node-externals": "^1.7.2"
   },
   "dependencies": {
-    "antd": "^3.25.0"
+    "antd": "^3.25.0",
+    "classnames": "^2.2.6"
   }
 }

package.json

@@ -0,0 +1,40 @@
+@import './vars.less';
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
+blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
+ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
+dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
+figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  font-family: @font;
+}
+
+h1 {
+  color: @h1-color;
+  font-size: 6.6rem;
+  line-height: 125%;
+  font-weight: bold;
+}
+h2 {
+  color: @h2-color;
+  font-size: 2.4rem;
+  line-height: 125%;
+  font-weight: bold;
+}
+h3 {
+  color: @h3-color;
+  font-size: 2.2rem;
+  line-height: 125%;
+  font-weight: bold;
+}
+h4 {
+  color: @h4-color;
+}
+h5 {
+
+}
+li {
+  font-family: @body-font;
+  font-size: 2rem;
+  color: @b2;
+}

styles/index.less

@@ -0,0 +1,12 @@
+/** ACM COMPONENTS **/
+@white: white;
+
+/** Screen break points **/
+@sm: 576px;
+@md: 768px;
+@lg: 992px;
+@xl: 1200px;
+
+/* Typography */
+@font: 'Montserrat', sans-serif;
+@body-font: 'Open Sans', sans-serif;

styles/vars.less

@@ -4,6 +4,17 @@
     "noImplicitAny": true,
     "module": "commonjs",
     "target": "es5",
-    "jsx": "react"
+    "jsx": "react",
+    "allowJs": false,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
   }
 }

tsconfig.json

@@ -1,5 +1,7 @@
 var path = require("path");
 const nodeExternals = require("webpack-node-externals");
+const autoprefixer = require('autoprefixer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
   .BundleAnalyzerPlugin;
 module.exports = {
@@ -14,8 +16,8 @@ module.exports = {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        include: path.resolve("src"),
+        exclude: /(node_modules|lib)/,
+        include: path.resolve("components"),
         use: "babel-loader"
       },
       {
@@ -25,16 +27,47 @@ module.exports = {
         use: "ts-loader"
       },
       {
-        test: /\.(less|css)$/,
-        exclude: /node_modules/,
-        use: ["style-loader", "css-loader", "less-loader"]
+        test: /\.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: require.resolve('less-loader'),
+            options: {
+              javascriptEnabled: true,
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(jpg|png|svg)$/,
+        include: path.resolve("./components"),
+        use: {
+          loader: 'url-loader',
+        },
+      },
+      {
+        test: /\.svg$/,
+        include: path.resolve("./components"),
+        loader: 'url-loader'
       }
     ]
   },
   resolve: {
     // Add '.ts' and '.tsx' as resolvable extensions.
     extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".less"]
   },
-  plugins: [new BundleAnalyzerPlugin()],
+  plugins: [
+    new BundleAnalyzerPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    })
+  ],
   externals: [nodeExternals()]
 };