datajunction-ui 0.0.1-rc.0

package/src/styles/index.css

@@ -0,0 +1,546 @@
+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';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+div {
+  display: block;
+}
+p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  width: 100%;
+}
+a,
+a:hover {
+  text-decoration: none;
+  font-family: 'Cerebri Sans', sans-serif;
+}
+code {
+  font-family: Consolas, source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+.link-body-emphasis {
+  font-weight: normal;
+  color: #5e5e5e;
+  text-decoration: none;
+}
+
+.link-body-emphasis:hover {
+  color: #3f4254;
+}
+
+.link-table {
+  color: #3b506c;
+  font-weight: normal;
+  text-decoration: none;
+}
+.breadcrumb-chevron {
+  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+  gap: 0.5rem;
+}
+.breadcrumb-item + .breadcrumb-item::before {
+  float: left;
+  padding-right: var(--bs-breadcrumb-item-padding-x);
+  color: var(--bs-breadcrumb-divider-color);
+  content: var(--bs-breadcrumb-divider, '/');
+}
+.rounded-3 {
+  border-radius: 0.5rem !important;
+}
+
+.bg-body-tertiary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, 1) !important;
+}
+.p-3 {
+  padding: 1rem !important;
+}
+.fw-semibold {
+  font-weight: 600 !important;
+}
+.breadcrumb {
+  --bs-breadcrumb-padding-x: 0;
+  --bs-breadcrumb-padding-y: 0;
+  --bs-breadcrumb-margin-bottom: 1rem;
+  --bs-breadcrumb-bg: #ffffff;
+  --bs-breadcrumb-border-radius: 0.5rem;
+  --bs-breadcrumb-divider-color: rgba(33, 37, 41, 0.75);
+  --bs-breadcrumb-item-padding-x: 0.5rem;
+  --bs-breadcrumb-item-active-color: rgba(33, 37, 41, 0.75);
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
+  margin-bottom: var(--bs-breadcrumb-margin-bottom);
+  list-style: none;
+  line-height: 1em;
+  background-color: var(--bs-breadcrumb-bg);
+  border-radius: var(--bs-breadcrumb-border-radius);
+}
+dl,
+ol,
+ul {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.list-group {
+  width: 100%;
+  /*min-width: fit-content;*/
+  max-width: fit-content;
+  /*margin-inline: 1.5rem;*/
+  border-radius: 0.375rem;
+}
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #212529;
+  text-decoration: none;
+  background-color: #ffffff;
+  /*border: 1px solid #dee2e6;*/
+  min-width: fit-content;
+}
+.list-group-item + .list-group-item {
+  border-top-width: 0;
+}
+.list-group-item:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.d-flex {
+  display: flex !important;
+}
+.gap-2 {
+  gap: 0.5rem !important;
+}
+.justify-content-between {
+  justify-content: space-between !important;
+}
+.w-100 {
+  width: 100% !important;
+}
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+.h6,
+h6 {
+  margin: 0;
+  /*background-color: #f9fbfd;*/
+  text-transform: uppercase;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #95aac9;
+}
+.py-3 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+.align-items-center {
+  align-items: center !important;
+}
+.p-4 {
+  padding: 1.5rem !important;
+}
+.flex-md-row {
+  flex-direction: row !important;
+}
+.py-md-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+.badge {
+  vertical-align: middle;
+}
+.badge.bg-secondary-soft {
+  color: #6e84a3;
+}
+.badge.rounded-pill {
+  padding-right: 0.6em;
+  padding-left: 0.6em;
+}
+.bg-secondary-soft {
+  background-color: #e2e6ed !important;
+}
+.rounded-pill {
+  border-radius: 50rem !important;
+}
+.badge {
+  --bs-badge-padding-x: 0.5em;
+  --bs-badge-padding-y: 0.33em;
+  --bs-badge-font-size: 76%;
+  --bs-badge-font-weight: 400;
+  --bs-badge-color: #fff;
+  --bs-badge-border-radius: 0.375rem;
+  display: inline-block;
+  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
+  font-size: var(--bs-badge-font-size);
+  font-weight: var(--bs-badge-font-weight);
+  line-height: 1;
+  color: var(--bs-badge-color);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--bs-badge-border-radius);
+}
+table {
+  display: table;
+  border-collapse: collapse;
+  box-sizing: border-box;
+  text-indent: initial;
+  border-spacing: 2px;
+  border-color: gray;
+  caption-side: bottom;
+}
+tr {
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
+}
+.card-table {
+  margin-bottom: 0;
+  width: 100%;
+  font-size: 0.8125rem;
+  color: #12263f;
+  vertical-align: top;
+  border-color: #12263f;
+}
+
+.card {
+  box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  /*border: 1px solid #edf2f9;*/
+  border-radius: 1rem;
+  margin: 4rem;
+}
+
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.table > thead {
+  vertical-align: bottom;
+}
+
+tbody,
+td,
+tfoot,
+th,
+thead,
+tr {
+  border: 0 solid;
+  border-color: inherit;
+}
+
+thead {
+  display: table-header-group;
+  vertical-align: middle;
+  border-color: inherit;
+}
+
+tr {
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
+}
+
+.card-table tbody td:first-child,
+.card-table thead th:first-child {
+  padding-left: 1.5rem !important;
+}
+.table thead th {
+  background-color: #f9fbfd;
+  text-transform: uppercase;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #95aac9;
+}
+
+.card-table thead th {
+  border-top-width: 0;
+}
+.table thead th {
+  font-size: 0.625rem;
+}
+.table thead th,
+td,
+tbody th {
+  vertical-align: middle;
+  text-align: center;
+}
+.table [data-sort],
+.table-nowrap td,
+.table-nowrap th {
+  white-space: nowrap;
+}
+.table thead th {
+  background-color: #f9fbfd;
+  text-transform: uppercase;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #95aac9;
+  padding: 1rem;
+}
+.text-start {
+  text-align: left !important;
+}
+.card-inner-table {
+  margin-top: 2rem;
+}
+.card-inner-table thead th {
+  background-color: #fff;
+}
+.table td,
+.table th {
+  border-top: 1px solid #edf2f9;
+  border-bottom: 0;
+  padding: 1rem;
+}
+.card-inner-table td,
+.card-inner-table th {
+  border-top: 1px dashed #edf2f9;
+}
+.mid {
+  flex: 0 0 auto;
+  width: 100%;
+}
+.table > :not(caption) > * > * {
+  background-color: transparent;
+  border-bottom-width: 1px;
+  box-shadow: inset 0 0 0 9999px transparent;
+}
+
+/* Nodes */
+.node_type {
+  background-color: #fad7dd !important;
+  color: #e63757;
+  text-transform: uppercase;
+  vertical-align: middle;
+  padding: 0.44rem;
+  border-radius: 0.375rem;
+  cursor: crosshair;
+}
+
+/* Nodes */
+.node_type__source {
+  /*background-color: #84ea4d50!important;*/
+  /*color: #4e8033;*/
+
+  background-color: #ccf7e5 !important;
+  color: #00b368;
+}
+
+.node_type__transform {
+  background-color: #ccefff !important;
+  color: #0063b4;
+}
+
+.node_type__metric {
+  background-color: #fad7dd !important;
+  color: #a2283e;
+}
+
+.node_type__dimension {
+  background-color: #ffefd0 !important;
+  color: #a96621;
+}
+
+.node_type__cube {
+  background-color: #c2180750 !important;
+  color: #c21807;
+}
+
+.status__valid {
+  color: #00b368;
+}
+
+.status {
+  text-transform: capitalize;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+.col {
+  flex: 0 1;
+  padding: 1.5rem;
+}
+
+.col.active {
+  /*background-color: #f5fbff;*/
+  padding-bottom: 1.15rem;
+  color: #a1a5b7;
+  border-bottom: solid 0.2em #2c7be5;
+  text-align: center;
+}
+
+.row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-top: var(--bs-gutter-y);
+}
+.row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  /*margin-top: 3rem;*/
+  /*margin-bottom: calc(-.75*var(--bs-gutter-x));*/
+  /*margin-left: 3.4rem;*/
+}
+
+.header {
+  --bs-header-margin-bottom: 1.5rem;
+  --bs-header-spacing-y: 1.5rem;
+  --bs-header-body-border-width: 1px;
+  --bs-header-body-border-color: #e3ebf6;
+  --bs-header-body-border-color-dark: rgba(227, 235, 246, 0.1);
+  /*margin-bottom: var(--bs-header-margin-bottom);*/
+  height: 90px;
+  transition: none;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  /*box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.05);*/
+  /*border-bottom: var(--bs-app-header-base-border-bottom);*/
+}
+*,
+:after,
+:before {
+  box-sizing: border-box;
+}
+.header-tabs {
+  margin-bottom: calc(var(--bs-header-spacing-y) * -1);
+  border-bottom-width: 0;
+}
+.nav-tabs .nav-item:first-child {
+  margin-left: 0;
+}
+.nav-tabs .nav-item {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
+  color: #12263f;
+  background-color: transparent;
+  border-color: #2c7be5;
+}
+.header-tabs .nav-link {
+  /*padding-top: var(--bs-header-spacing-y);*/
+  /*padding-bottom: var(--bs-header-spacing-y);*/
+}
+.nav-link {
+  display: block;
+  color: #a1a5b7;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+.nav-overflow {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  padding-bottom: 1px;
+}
+
+pre {
+  border-radius: 1rem;
+  padding-right: 2rem;
+}
+
+.container {
+  max-width: 1320px;
+  width: 100%;
+  padding-left: 30px !important;
+  padding-right: 30px !important;
+}
+
+.logo {
+  margin-right: 3.75rem !important;
+  flex-grow: 0 !important;
+}
+.logo img {
+  padding: 10px;
+  margin-bottom: -1.2rem;
+}
+
+.menu-lg-row > .menu-item {
+  display: flex;
+  align-items: center;
+}
+.menu-item {
+  display: block;
+  padding: 0.15rem 0;
+}
+.me-lg-2 {
+  margin-right: 0.5rem !important;
+}
+.menu,
+.menu-wrapper {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.menu-item .menu-link {
+  cursor: pointer;
+  align-items: center;
+  flex: 0 0 100%;
+  padding: 0.65rem 1rem;
+  transition: none;
+  outline: none !important;
+  font-family: Inter, Helvetica, sans-serif;
+}
+.menu-title a {
+  color: #7e8299;
+}
+.menu-title a:hover {
+  color: #3f4254;
+}
+
+.node__header,
+.mid {
+  background-color: #f4f4f4;
+  padding-bottom: 2rem;
+}
+
+.rounded-box {
+  border-radius: 1rem !important;
+  background-color: #ffffff;
+  max-width: fit-content;
+}
+.card-header {
+  align-items: center;
+  margin: 0.5rem;
+  margin-left: 0;
+  padding: 0 2.25rem 0 2.25rem;
+}
+
+.text-gray-400 {
+  color: #b5b5c3 !important;
+}

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loadable should render LazyComponent after waiting for it to load 1`] = `
+<div>
+  My lazy-loaded component
+</div>
+`;
+
+exports[`loadable should render fallback if given one 1`] = `
+<div>
+  Loading
+</div>
+`;
+
+exports[`loadable should render null by default 1`] = `null`;
+
+exports[`loadable should render null by default with empty options 1`] = `null`;

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { lazyLoad } from 'utils/loadable';
+
+const LoadingIndicator = () => <div>Loading</div>;
+
+const LazyComponenWithDefaultExport = lazyLoad(
+  () => import('../../../internals/testing/loadable.mock'),
+);
+
+const LazyComponentWithExportedFunction = lazyLoad(
+  () => import('../../../internals/testing/loadable.mock'),
+  module => module.ExportedFunc,
+);
+
+const LazyComponentWithFallback = lazyLoad(
+  () => import('../../../internals/testing/loadable.mock'),
+  undefined,
+  {
+    fallback: <LoadingIndicator />,
+  },
+);
+
+describe('loadable', () => {
+  it('should render null by default', () => {
+    const {
+      container: { firstChild },
+    } = render(<LazyComponenWithDefaultExport />);
+    expect(firstChild).toMatchSnapshot();
+  });
+
+  it('should render null by default with empty options', () => {
+    const {
+      container: { firstChild },
+    } = render(<LazyComponentWithExportedFunction />);
+    expect(firstChild).toMatchSnapshot();
+  });
+
+  it('should render fallback if given one', () => {
+    const {
+      container: { firstChild },
+    } = render(<LazyComponentWithFallback />);
+    expect(firstChild).toMatchSnapshot();
+  });
+
+  it('should render LazyComponent after waiting for it to load', async () => {
+    const {
+      container: { firstChild },
+    } = render(<LazyComponentWithExportedFunction />);
+    LazyComponentWithExportedFunction({});
+    expect(firstChild).toMatchSnapshot();
+  });
+});

package/src/utils/__tests__/request.test.ts

@@ -0,0 +1,82 @@
+/**
+ * Test the request function
+ */
+
+import 'whatwg-fetch';
+import { request } from '../request';
+
+declare let window: { fetch: jest.Mock };
+
+describe('request', () => {
+  // Before each test, stub the fetch function
+  beforeEach(() => {
+    window.fetch = jest.fn();
+  });
+
+  describe('stubbing successful response', () => {
+    // Before each test, pretend we got a successful response
+    beforeEach(() => {
+      const res = new Response('{"hello":"world"}', {
+        status: 200,
+        headers: {
+          'Content-type': 'application/json',
+        },
+      });
+
+      window.fetch.mockReturnValue(Promise.resolve(res));
+    });
+
+    it('should format the response correctly', done => {
+      request('/thisurliscorrect')
+        .catch(done)
+        .then(json => {
+          expect(json.hello).toBe('world');
+          done();
+        });
+    });
+  });
+
+  describe('stubbing 204 response', () => {
+    // Before each test, pretend we got a successful response
+    beforeEach(() => {
+      const res = new Response('', {
+        status: 204,
+        statusText: 'No Content',
+      });
+
+      window.fetch.mockReturnValue(Promise.resolve(res));
+    });
+
+    it('should return null on 204 response', done => {
+      request('/thisurliscorrect')
+        .catch(done)
+        .then(json => {
+          expect(json).toBeNull();
+          done();
+        });
+    });
+  });
+
+  describe('stubbing error response', () => {
+    // Before each test, pretend we got an unsuccessful response
+    beforeEach(() => {
+      const res = new Response('', {
+        status: 404,
+        statusText: 'Not Found',
+        headers: {
+          'Content-type': 'application/json',
+        },
+      });
+
+      window.fetch.mockReturnValue(Promise.resolve(res));
+    });
+
+    it('should catch errors', done => {
+      request('/thisdoesntexist').catch(err => {
+        expect(err.response.status).toBe(404);
+        expect(err.response.statusText).toBe('Not Found');
+        done();
+      });
+    });
+  });
+});

package/src/utils/loadable.tsx

@@ -0,0 +1,30 @@
+import React, { lazy, Suspense } from 'react';
+
+interface Opts {
+  fallback: React.ReactNode;
+}
+type Unpromisify<T> = T extends Promise<infer P> ? P : never;
+
+export const lazyLoad = <
+  T extends Promise<any>,
+  U extends React.ComponentType<any>,
+>(
+  importFunc: () => T,
+  selectorFunc?: (s: Unpromisify<T>) => U,
+  opts: Opts = { fallback: null },
+) => {
+  let lazyFactory: () => Promise<{ default: U }> = importFunc;
+
+  if (selectorFunc) {
+    lazyFactory = () =>
+      importFunc().then(module => ({ default: selectorFunc(module) }));
+  }
+
+  const LazyComponent = lazy(lazyFactory);
+
+  return (props: React.ComponentProps<U>): JSX.Element => (
+    <Suspense fallback={opts.fallback!}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+};