datajunction-ui 0.0.1-rc.17 → 0.0.1-rc.19

package/src/styles/index.css

@@ -1,8 +1,12 @@
+@import url('https://fonts.googleapis.com/css?family=Jost');
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Lato');
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
-    'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
+    Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -14,6 +18,13 @@ body {
 div {
   display: block;
 }
+h2 {
+  font-family: 'Raleway', system-ui;
+  font-weight: 300;
+}
+h2 b {
+  font-weight: 600;
+}
 p {
   display: block;
   margin-block-start: 1em;
@@ -26,7 +37,7 @@ a,
 a:hover {
   text-decoration: none;
   color: #005c72;
-  font-family: 'Cerebri Sans', sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 a:hover {
   text-decoration: underline;
@@ -153,6 +164,7 @@ ul {
 .h6,
 h6 {
   margin: 0;
+  font-family: 'Jost';
   text-transform: uppercase;
   font-size: 0.8125rem;
   font-weight: 600;
@@ -251,6 +263,7 @@ tr {
   background-clip: border-box;
   border-radius: 1rem;
   margin: 2rem;
+  padding-bottom: 2rem;
 }
 
 .card-light-shadow {
@@ -313,6 +326,7 @@ tr {
   font-weight: 600;
   letter-spacing: 0.08em;
   color: #95aac9;
+  font-family: 'Jost';
 }
 
 .card-table thead th {
@@ -325,7 +339,7 @@ tr {
 td,
 tbody th {
   vertical-align: middle;
-  text-align: center;
+  text-align: left;
 }
 .table [data-sort],
 .table-nowrap td,
@@ -369,6 +383,10 @@ tbody th {
   border-bottom-width: 1px;
   box-shadow: inset 0 0 0 9999px transparent;
 }
+.node_type_creation_heading {
+  text-transform: capitalize;
+  padding: 5px;
+}
 
 /* Nodes */
 .node_type {
@@ -384,6 +402,7 @@ tbody th {
 
 /* Nodes */
 .node_type__source {
+  font-family: 'Jost';
   background-color: #ccf7e5 !important;
   color: #00b368;
 }
@@ -393,15 +412,21 @@ tbody th {
 }
 
 .node_type__transform {
+  font-family: 'Jost';
   background-color: #ccefff !important;
   color: #0063b4;
 }
+
+.node_type__transform:hover {
+  background-color: #ccefff !important;
+}
 .react-flow__node .node_type__transform {
   background-color: #6daaa750 !important;
   color: #6daaa7;
 }
 
 .node_type__metric {
+  font-family: 'Jost';
   background-color: #fad7dd !important;
   color: #a2283e;
 }
@@ -411,6 +436,7 @@ tbody th {
 }
 
 .node_type__dimension {
+  font-family: 'Jost';
   background-color: #ffefd0 !important;
   color: #a96621;
 }
@@ -420,6 +446,7 @@ tbody th {
 }
 
 .node_type__cube {
+  font-family: 'Jost';
   background-color: #dbafff !important;
   color: #580076;
 }
@@ -710,6 +737,10 @@ pre {
   padding: 0 2.25rem 0 2.25rem;
 }
 
+.card-header h2 {
+  font-family: 'Jost';
+}
+
 .text-gray-400 {
   color: #b5b5c3 !important;
 }
@@ -873,3 +904,49 @@ pre {
 .inactive {
   display: none;
 }
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  float: right;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  margin-top: 6px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  min-width: 115px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-content a:hover {
+  text-decoration: none;
+}
+
+.dropdown-content a div {
+  padding: 12px 16px;
+  background-color: #ffffff !important;
+}
+
+.dropdown-content a div:hover {
+  background-color: #f3eeff !important;
+}
+
+.add_node {
+  background-color: #5d2f86 !important;
+  color: #fff;
+  text-transform: none;
+  vertical-align: middle;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1rem;
+  border-radius: 0.5rem;
+  word-wrap: break-word;
+  white-space: break-spaces;
+}

package/src/styles/login.css

@@ -0,0 +1,67 @@
+.login form {
+  border-radius: 25px;
+  border: 2px solid #000000;
+  background: linear-gradient(120deg, #ffed7c, #fef7c8);
+  width: 40vw;
+  height: 30rem;
+  box-sizing: border-box;
+  padding: 2rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.login form button {
+  width: 15vw;
+  margin: auto;
+}
+
+.login form span {
+  padding: 0.5rem;
+}
+
+.login input[type='text'] {
+  width: 20vw;
+  padding: 12px 20px;
+  margin: auto;
+  display: inline-block;
+  border: 2px solid #000000;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.login input[type='password'] {
+  -webkit-text-security: disc;
+  width: 20vw;
+  padding: 12px 20px;
+  margin: auto;
+  display: inline-block;
+  border: 2px solid #000000;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.login button[type='submit'] {
+  width: 10vw;
+  background-color: #01b268;
+  border: 2px solid #000000;
+  color: white;
+  padding: 14px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.login .logo-title {
+  display: flex;
+  margin: auto;
+}
+
+.login .logo-title img {
+  padding: 0.5rem;
+}

package/src/styles/node-creation.scss

@@ -0,0 +1,190 @@
+// Fonts
+form {
+  text-align: left;
+
+  select {
+    background-color: #eeeeee;
+    border-radius: 10px;
+    border-style: none;
+    padding: 1rem;
+    font-family: Lato, 'sans-serif';
+    font-size: 110%;
+  }
+
+  input {
+    background-color: #eeeeee;
+    border-radius: 10px;
+    border-style: none;
+    border-width: 1px;
+    box-sizing: border-box;
+    padding: 1rem;
+    font-size: 110%;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+      rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  }
+
+  label {
+    font-family: 'Lato', sans-serif;
+    display: block;
+    text-transform: uppercase;
+    margin-bottom: 5px;
+    font-size: 90%;
+    font-weight: 600;
+  }
+
+  .NodeCreationInput {
+    margin: 0.5rem 0;
+    display: inline-grid;
+    width: 35%;
+    padding: 0 20px;
+  }
+
+  .DisplayNameInput,
+  .FullNameInput,
+  .NamespaceInput {
+    span {
+      color: red;
+    }
+  }
+
+  .DisplayNameInput,
+  .FullNameInput,
+  .NamespaceInput {
+    display: inline-grid;
+    box-sizing: border-box;
+    flex-wrap: nowrap;
+    margin: 1rem 0;
+  }
+
+  .DisplayNameInput {
+    width: 45%;
+  }
+
+  .FullNameInput {
+    width: 100%;
+
+    input {
+      width: 75%;
+      color: #275c86;
+    }
+  }
+
+  .NamespaceInput {
+    padding: 0 20px;
+    width: 30%;
+
+    div:first-child {
+      flex: 1 0 auto;
+    }
+
+    input {
+      width: 35%;
+      border: 0;
+      font-family: 'Lato', sans-serif;
+      padding: 5px 0;
+      font-size: 18px;
+      font-weight: 300;
+      outline: none;
+    }
+  }
+
+  .SelectInput {
+    background-color: #eee;
+    border-radius: 10px;
+    border-style: none;
+    border-color: transparent;
+    box-sizing: border-box;
+    padding: 0.5rem;
+    font-size: 110%;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+      rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  }
+  .SelectInput div,
+  .SelectInput div div {
+    border: none;
+  }
+
+  .SelectInput div:first-child {
+    background-color: #eee !important;
+    border: none;
+    color: #0c4128;
+  }
+
+  .DescriptionInput {
+    width: 100%;
+
+    textarea {
+      width: 75%;
+      background-color: #eeeeee;
+      border-radius: 10px;
+      border-style: none;
+      border-width: 1px;
+      box-sizing: border-box;
+      padding: 1rem;
+      font-family: Lato, Sans;
+      font-size: 110%;
+      margin: 0.5rem 0;
+      height: 100px;
+    }
+  }
+
+  .QueryInput {
+    width: 75%;
+  }
+
+  .NodeModeInput {
+    select {
+      background-color: #eeeeee;
+      border-radius: 10px;
+      border-style: none;
+      padding: 1rem;
+      font-family: Lato, Sans;
+      font-size: 110%;
+    }
+  }
+
+  button {
+    display: block;
+    border-radius: 10px;
+    border-style: none;
+    padding: 1rem;
+    margin: 0.5rem 20px;
+    text-transform: uppercase;
+    font-family: Lato, Sans;
+    font-weight: 600;
+    font-size: 110%;
+    background-size: 200% auto;
+    background-color: #ffd559;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+      rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  }
+}
+
+.message {
+  padding: 20px;
+  opacity: 1;
+  margin-bottom: 15px;
+  border-radius: 0.5rem;
+  line-height: 1.25rem;
+  font-size: 1.2rem;
+  svg {
+    margin-right: 0.3rem;
+    height: 1.5rem;
+  }
+}
+.success {
+  background-color: rgb(245, 253, 242);
+  color: rgb(53, 110, 35);
+  svg {
+    filter: invert(34%) sepia(86%) saturate(465%) hue-rotate(60deg)
+      brightness(82%) contrast(80%);
+  }
+}
+.alert {
+  background-color: rgb(253 242 242/1);
+  color: rgb(155 28 28/1);
+  svg {
+    filter: invert(16%) sepia(68%) saturate(2827%) hue-rotate(344deg)
+      brightness(96%) contrast(100%);
+  }
+}

package/src/styles/styles.scss

@@ -0,0 +1,44 @@
+@use 'sass:color';
+
+.svg-font-color svg > path {
+  fill: var(--ifm-font-color-base);
+}
+select {
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-top: 0.25rem;
+  max-width: 20vw;
+}
+.queryBuilder {
+  min-width: 420px;
+
+  .ruleGroup div select,
+  .ruleGroup div input {
+    -webkit-text-security: none;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    padding-bottom: 0.35rem;
+    padding-left: 0.5rem;
+    padding-top: 0.35rem;
+    border: none;
+  }
+
+  .ruleGroup div button {
+    background-color: #f0f8ff;
+    color: #24518f;
+    border: 1px solid #365b8f;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 0.25rem 0.5rem;
+    text-align: center;
+    text-decoration: none;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+}

package/src/styles/styles.scss.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  queryBuilder: string;
+  ruleGroup: string;
+  'svg-font-color': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/webpack.config.js

@@ -2,6 +2,8 @@ const webpack = require('webpack');
 const dotenv = require('dotenv').config();
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 require('dotenv').config({ path: './.env' });
 
 var babelOptions = {
@@ -31,7 +33,7 @@ module.exports = {
     },
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.scss'],
     modules: ['src', 'node_modules'],
     fallback: {
       path: false,
@@ -72,6 +74,10 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.(s(a|c)ss)$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
       {
         test: /\.js$/,
         exclude: /node_modules/,
@@ -104,5 +110,9 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
     }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css', // isDevelopment ? '[name].css' : '[name].[hash].css',
+      chunkFilename: '[id].css', // isDevelopment ? '[id].css' : '[id].[hash].css'
+    }),
   ],
 };