const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

const DIST_DIR = path.resolve(__dirname,'dist');
const SRC_DIR = path.resolve(__dirname,'src');

const config = {
  entry: [
    'babel-polyfill',`${SRC_DIR}/index.tsx`,`${SRC_DIR}/index.scss`,],output: {
    path: `${DIST_DIR}/`,filename: 'bundle.js',publicPath: '/app/',},module: {
    rules: [
      {
        enforce: 'pre',test: /\.jsx?$/,exclude: /node_modules/,loader: 'eslint-loader',options: {
          failOnWarning: true,failOnError: true,{
        test: /\.jsx?$/,include: SRC_DIR,loader: 'babel-loader',{
        test: /\.tsx?$/,use: 'ts-loader',{
        test: /\.css$/,use: [
          MiniCssExtractPlugin.loader,'css-loader',{
        test: /\.scss$/,exclude: /\.module\.scss$/,'postcss-loader','sass-loader',{
        test: /\.module\.scss$/,use: [
          {
            loader: 'style-loader',{
            loader: 'css-loader',options: {
              sourceMap: true,modules: true,localIdentName: '[local]___[hash:base64:5]',{
            loader: 'postcss-loader',{
            loader: 'sass-loader',{
        test: /\.(jpe?g|png|gif|svg)$/i,loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]',{
          loader: 'image-webpack-loader',query: {
            mozjpeg: {
              progressive: true,gifsicle: {
              interlaced: false,optipng: {
              optimizationLevel: 7,pngquant: {
              quality: '75-90',speed: 3,}],exclude: path.resolve(__dirname,'node_modules'),include: __dirname,{
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,// loader: "url?limit=10000"
        use: 'url-loader',{
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,use: 'file-loader',plugins: [
    new MiniCssExtractPlugin({
      filename: 'application.css',}),new webpack.DefinePlugin({
      'process.env.INTERNAL': JSON.stringify(process.env.INTERNAL),resolve: {
    extensions: ['.jsx','.js','.tsx','.ts','.scss'],alias: {
      buttons: path.resolve(__dirname,'src/app/shared/buttons/'),header: path.resolve(__dirname,'src/app/header/'),hooks: path.resolve(__dirname,'src/hooks/'),icons: path.resolve(__dirname,'src/app/shared/icons/'),lotty: path.resolve(__dirname,'src/thirdParty/lotty/'),navigation: path.resolve(__dirname,'src/app/navigation/'),pages: path.resolve(__dirname,'src/app/pages/'),shared: path.resolve(__dirname,'src/app/shared/'),static: path.resolve(__dirname,'src/static/'),storybook: path.resolve(__dirname,'src/thirdParty/storybook/'),styles: path.resolve(__dirname,'src/styles/'),typography: path.resolve(__dirname,'src/app/shared/typography/'),types: path.resolve(__dirname,'src/types/'),};

module.exports = config;

$(document).ready(function() {

  $("#save").on("click",function() {
    if ($('#area').children().length == 6)
      return;
    $("<div>",{
      class: "cell",append: `Column - ${$('#area').children().length + 1}`,appendTo: "#area"
    })
  });

});

* {
  margin: 0;
  box-sizing: border-box;
}

#area {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.cell {
  background: #fafafa;
  height: 50px;
  padding: 1em;
}

const NewClientProject = (pName,cName) => {
  return $("<div>",{
    class: "cell",append: `${pName||"Project Name"}<br>${cName||"Client Name"}`,appendTo: "#dashboardArea"
  });
}

jQuery( $ => {

  $("#toDashboard").on("click",function() {
    $('#overlay').fadeOut(300);
    NewClientProject($("#pName").val(),$('#cName').val());
  });
  
});

NewClientProject();
NewClientProject();

* {margin:0; box-sizing:border-box;}

#dashboardArea {
  display: flex;
  flex-flow: row wrap;
}

#dashboardArea .cell {
  background: #e3e8e7;
  flex: 0 0 22%;
  margin: 1% 1.5%;
  min-height: 140px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="pName" placeholder="Project Name" type="text">
<input id="cName" placeholder="Client Name" type="text">
<button id="toDashboard">Save to Dashboard</button>

<div id="dashboardArea"></div>