datajunction-ui 0.0.1-rc.0 → 0.0.1-rc.2

package/src/styles/index.css

@@ -25,8 +25,21 @@ p {
 a,
 a:hover {
   text-decoration: none;
+  color: #005c72;
   font-family: 'Cerebri Sans', sans-serif;
 }
+a:hover {
+  text-decoration: underline;
+}
+button.nav-link {
+  background: none;
+  color: #007acc;
+  border: inherit;
+  padding: inherit;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
 code {
   font-family: Consolas, source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

package/src/utils/__tests__/loadable.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { lazyLoad } from 'utils/loadable';
+import { lazyLoad } from '../loadable';
 
 const LoadingIndicator = () => <div>Loading</div>;
 

package/tsconfig.json

@@ -2,29 +2,36 @@
   "compilerOptions": {
     "noImplicitAny": false,
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "esnext", "es2015"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
+    "module": "commonjs",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "noFallthroughCasesInSwitch": true,
     "jsx": "react-jsx",
-    "baseUrl": "./src"
+    "baseUrl": "./src",
+    "preserveConstEnums": true,
+    "removeComments": true,
+    "sourceMap": true
   },
-  "include": ["src", "internals/startingTemplate/**/*"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "internals/startingTemplate/**/*"
+  ],
   "ts-node": {
     "compilerOptions": {
       "esModuleInterop": true,
       "module": "commonjs",
       "moduleResolution": "node",
-      "noEmit": true,
+      "noEmit": false,
       "allowSyntheticDefaultImports": true
     }
   }

package/webpack.config.js

@@ -0,0 +1,95 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+var babelOptions = {
+  presets: ['@babel/preset-react'],
+};
+
+module.exports = {
+  cache: true,
+  entry: {
+    main: './src/index.tsx',
+    vendor: ['events', 'fbemitter', 'flux', 'react', 'react-dom'],
+  },
+  target: 'web',
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    filename: 'static/[name].[fullhash].js',
+    library: 'datajunction-ui',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+    umdNamedDefine: true,
+    publicPath: '/',
+  },
+  devServer: {
+    historyApiFallback: true,
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+    fallback: {
+      path: false,
+      buffer: false,
+      assert: false,
+      fs: false,
+      os: false,
+      module: false,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx|jsx)$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              compilerOptions: {
+                noEmit: false,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
+      },
+      {
+        test: /node_modules[\\|/](name-of-the-umd-package)/,
+        use: { loader: 'umd-compat-loader' },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'public', 'index.html'),
+    }),
+    // new MiniCssExtractPlugin({
+    //   filename: './styles/index.css',
+    // }),
+  ],
+};

package/src/app/pages/NotFoundPage/P.ts

@@ -1,8 +0,0 @@
-import styled from 'styled-components/macro';
-
-export const P = styled.p`
-  font-size: 1rem;
-  line-height: 1.5;
-  color: ${p => p.theme.textSecondary};
-  margin: 0.625rem 0 1.5rem 0;
-`;

package/src/app/pages/NotFoundPage/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<NotFoundPage /> should match snapshot 1`] = `
-.c2 {
-  font-size: 1rem;
-  line-height: 1.5;
-  margin: 0.625rem 0 1.5rem 0;
-}
-
-.c0 {
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  min-height: 320px;
-}
-
-.c1 {
-  margin-top: -8vh;
-  font-weight: bold;
-  font-size: 3.375rem;
-}
-
-.c1 span {
-  font-size: 3.125rem;
-}
-
-<div
-  className="c0"
->
-  <div
-    className="c1"
-  >
-    4
-    <span
-      aria-label="Crying Face"
-      role="img"
-    >
-      😢
-    </span>
-    4
-  </div>
-  <p
-    className="c2"
-  >
-    Page not found.
-  </p>
-</div>
-`;

package/src/app/pages/NotFoundPage/__tests__/index.test.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { NotFoundPage } from '..';
-import { MemoryRouter } from 'react-router-dom';
-import { HelmetProvider } from 'react-helmet-async';
-import renderer from 'react-test-renderer';
-
-const renderPage = () =>
-  renderer.create(
-    <MemoryRouter>
-      <HelmetProvider>
-        <NotFoundPage />
-      </HelmetProvider>
-    </MemoryRouter>,
-  );
-
-describe('<NotFoundPage />', () => {
-  it('should match snapshot', () => {
-    const notFoundPage = renderPage();
-    expect(notFoundPage.toJSON()).toMatchSnapshot();
-  });
-});

package/src/styles/dag-styles.ts

@@ -1,117 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-// import { StyleConstants } from './StyleConstants';
-/* istanbul ignore next */
-export const DAGStyle = createGlobalStyle`
-  .react-flow__node-custom {
-    font-size: 1.2em;
-    width: 180px;
-    background: #f5f5f6;
-    color: #222;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
-    border-radius: 2px;
-  }
-  .react-flow {
-      width: 100%; height: 800px; overflow: hidden; position: relative; z-index: 0;
-  }
-  .react-flow__node-custom .react-flow__handle {
-    top: 24px;
-    right: -15px;
-    width: 6px;
-    height: 10px;
-    border-radius: 2px;
-    background-color: #778899;
-  }
-  
-  .react-flow__node.circle {
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: 700;
-  }
-  
-  .react-flow__node.annotation {
-    border-radius: 0;
-    text-align: left;
-    background: white;
-    border: none;
-    line-height: 1.4;
-    width: 225px;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
-  }
-  
-  .react-flow__node.annotation .react-flow__handle {
-    display: none;
-  }
-  
-  .dj-node__header {
-    font-weight: 400;
-    text-transform: uppercase;
-    font-family: 'jetbrains-mono',monospace;
-    font-size: 1.5em;
-    padding-inline-start: 0.5rem;
-    padding-inline-end: 0.5rem;
-    padding-left: 0.75em;
-    padding-top: 0.35rem;
-    padding-bottom: 0.35rem;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-color: #c4cbd1;
-  }
-  
-  .dj-node__body {
-    background-color: rgb(254, 254, 254);
-    padding: 0.5em 0.7em 0.9em 0.7em;
-    font-family: 'nt-dapper',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
-    font-size: 1.7em;
-  }
-  
-  .dj-node__full {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    border-width: 1px;
-    border-style: solid;
-    border-image: initial;
-    border-color: #b0b9c2;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-  }
-  
-  .dj-node__metadata {
-    padding: 1em;
-    font-family: 'nt-dapper',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
-    font-size: 1em;
-  }
-  
-  .collapse-button {
-    display: block;
-    width: 100%;
-    font: 0.8em "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    text-transform: uppercase;
-    border: none;
-    margin-top: 0.2em;
-    padding: 0.35em;
-  }
-  .collapse {
-      padding-top: 10px;
-  }
-  .collapse-content.collapsed {
-    display: none;
-  }
-  .collapsed-content.expanded {
-    display: block;
-  }
-  .collapse tr td {
-      padding-left: 5px;
-      padding-bottom: 5px;
-  }
-  .serif {
-      font-family: 'jetbrains-mono', monospace;
-      text-transform: lowercase;
-  }
-
-`;