Separate @dagster-io/ui into its own package (dagster-io#6150)

js_modules/dagit/Makefile

@@ -5,13 +5,13 @@ generate-graphql:
 	yarn workspace @dagster-io/dagit-core generate-graphql
 
 ts:
-	yarn workspace @dagster-io/dagit-app ts && yarn workspace @dagster-io/dagit-core ts
+	yarn workspace @dagster-io/dagit-app ts && yarn workspace @dagster-io/dagit-core ts && yarn workspace @dagster-io/ui ts
 
 lint:
-	yarn workspace @dagster-io/dagit-app lint && yarn workspace @dagster-io/dagit-core lint
+	yarn workspace @dagster-io/dagit-app lint && yarn workspace @dagster-io/dagit-core lint && yarn workspace @dagster-io/ui lint
 
 test:
-	yarn workspace @dagster-io/dagit-core jest
+	yarn workspace @dagster-io/dagit-core jest && yarn workspace @dagster-io/ui jest
 
 jest:
-	yarn workspace @dagster-io/dagit-core jest
+	yarn workspace @dagster-io/dagit-core jest && yarn workspace @dagster-io/ui jest

js_modules/dagit/package.json

@@ -6,9 +6,9 @@
     "build": "yarn workspace @dagster-io/dagit-app build && yarn post-build",
     "build-with-profiling": "yarn workspace @dagster-io/dagit-app build --profile && yarn post-build",
     "post-build": "cd ../../python_modules/dagit/dagit && rm -rf webapp && mkdir -p webapp && cp -r ../../../js_modules/dagit/packages/app/build ./webapp/ && mkdir -p webapp/build/vendor && cp -r graphql-playground ./webapp/build/vendor",
-    "lint": "yarn workspace @dagster-io/dagit-app lint && yarn workspace @dagster-io/dagit-core lint",
+    "lint": "yarn workspace @dagster-io/dagit-app lint && yarn workspace @dagster-io/dagit-core lint && yarn workspace @dagster-io/ui lint",
     "start": "yarn workspace @dagster-io/dagit-app start",
-    "ts": "yarn workspace @dagster-io/dagit-app ts"
+    "ts": "yarn workspace @dagster-io/dagit-app ts && yarn workspace @dagster-io/ui ts"
   },
   "workspaces": {
     "packages": [

js_modules/dagit/packages/app/config/paths.js

@@ -74,6 +74,7 @@ module.exports = {
 
   // DAGSTER: Path to @dagster-io/dagit-core source.
   dagitCore: path.resolve('../core/src'),
+  dagitUI: path.resolve('../ui/src'),
 };
 
 module.exports.moduleFileExtensions = moduleFileExtensions;

js_modules/dagit/packages/app/config/webpack.config.js

@@ -314,6 +314,7 @@ module.exports = function (webpackEnv) {
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
         '@dagster-io/dagit-core': paths.dagitCore,
+        '@dagster-io/ui': paths.dagitUI,
         // Allows for better profiling with ReactDevTools
         ...(isEnvProductionProfile && {
           'react-dom$': 'react-dom/profiling',
@@ -331,7 +332,7 @@ module.exports = function (webpackEnv) {
         // please link the files into your node_modules/ and let module-resolution kick in.
         // Make sure your source files are compiled, as they will not be processed in any way.
         new ModuleScopePlugin(
-          [paths.appSrc, paths.dagitCore],
+          [paths.appSrc, paths.dagitCore, paths.dagitUI],
           [paths.appPackageJson, reactRefreshOverlayEntry],
         ),
       ],
@@ -380,7 +381,7 @@ module.exports = function (webpackEnv) {
             {
               test: /\.(js|mjs|jsx|ts|tsx)$/,
               // DAGSTER: Include `src` and `@dagster-io/dagit-core`.
-              include: [paths.appSrc, paths.dagitCore],
+              include: [paths.appSrc, paths.dagitCore, paths.dagitUI],
               loader: require.resolve('babel-loader'),
               options: {
                 customize: require.resolve('babel-preset-react-app/webpack-overrides'),

js_modules/dagit/packages/app/package.json

@@ -11,6 +11,7 @@
     "@blueprintjs/select": "^3.16.4",
     "@blueprintjs/table": "^3.8.33",
     "@dagster-io/dagit-core": "1.0.0",
+    "@dagster-io/ui": "1.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.1.2"

js_modules/dagit/packages/app/src/index.tsx

@@ -8,8 +8,7 @@ import {AppProvider} from '@dagster-io/dagit-core/app/AppProvider';
 import {AppTopNav} from '@dagster-io/dagit-core/app/AppTopNav';
 import {ContentRoot} from '@dagster-io/dagit-core/app/ContentRoot';
 import {logLink, timeStartLink} from '@dagster-io/dagit-core/app/apolloLinks';
-import {ColorsWIP} from '@dagster-io/dagit-core/ui/Colors';
-import {IconWIP, IconWrapper} from '@dagster-io/dagit-core/ui/Icon';
+import {ColorsWIP, IconWIP, IconWrapper} from '@dagster-io/ui';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import {Link} from 'react-router-dom';

js_modules/dagit/packages/app/tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@dagster-io/dagit-core/*": ["../core/src/*"]
+      "@dagster-io/dagit-core/*": ["../core/src/*"],
+      "@dagster-io/ui": ["../ui"]
     },
     "target": "es5",
     "lib": [

js_modules/dagit/packages/core/.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
@@ -10,11 +12,25 @@ module.exports = {
   },
   // https://github.com/storybookjs/storybook/issues/16690#issuecomment-971579785
   webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: "javascript/auto",
-    })
-    return config
+    // console.log(path.resolve('../ui/src'));
+    // process.exit(1);
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          '@dagster-io/ui': path.resolve('../ui/src'),
+        },
+      },
+      module: {
+        ...config.module,
+        rules: [...config.module.rules, {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: "javascript/auto",
+        }],
+      },
+    };
   },
-};
+}

js_modules/dagit/packages/core/.storybook/preview.js

@@ -4,13 +4,15 @@ import '@blueprintjs/select/lib/css/blueprint-select.css';
 import '@blueprintjs/table/lib/css/table.css';
 import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';
 
-import {FontFamily} from '../src/ui/styles';
-import {GlobalDialogStyle} from '../src/ui/Dialog';
-import {GlobalPopoverStyle} from '../src/ui/Popover';
-import {GlobalSuggestStyle} from '../src/ui/Suggest';
-import {GlobalToasterStyle} from '../src/ui/Toaster';
-import {GlobalTooltipStyle} from '../src/ui/Tooltip';
-import {ColorsWIP} from '../src/ui/Colors';
+import {
+  FontFamily,
+  GlobalDialogStyle,
+  GlobalPopoverStyle,
+  GlobalSuggestStyle,
+  GlobalToasterStyle,
+  GlobalTooltipStyle,
+  ColorsWIP,
+} from '@dagster-io/ui';
 
 import * as React from 'react';
 import {MemoryRouter} from 'react-router-dom';

js_modules/dagit/packages/core/jest.config.js

@@ -77,6 +77,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less)$': 'identity-obj-proxy',
     '^worker-loader(.*)/workers/(.*)$': '<rootDir>/jest/mocks/$2',
+    '^@dagster-io/ui$': '<rootDir>/../ui/src/index',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

js_modules/dagit/packages/core/jest/fileTransformer.js

@@ -2,7 +2,7 @@
 const path = require('path');
 
 module.exports = {
-  process(src, filename, config, options) {
+  process(src, filename, _config, _options) {
     return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
   },
 };

js_modules/dagit/packages/core/package.json

@@ -28,12 +28,8 @@
     "react-chartjs-2": "^3.0.3",
     "react-codemirror2": "^7.2.1",
     "react-is": "^17.0.2",
-    "react-markdown": "6.0.3",
     "react-virtualized": "^9.22.3",
-    "remark": "13.x",
-    "remark-gfm": "1.0.0",
-    "remark-plain-text": "^0.2.0",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.3.3",
     "subscriptions-transport-ws": "^0.9.15",
     "worker-loader": "^3.0.8",
     "yaml": "2.0.0-1"
@@ -55,16 +51,17 @@
     "@blueprintjs/popover2": "0.10.1",
     "@blueprintjs/select": "^3.16.4",
     "@blueprintjs/table": "^3.8.33",
+    "@dagster-io/ui": "1.0.0",
     "@graphql-tools/mock": "^8.5.0",
     "@graphql-tools/schema": "^8.3.1",
     "@storybook/addon-actions": "6.3.8",
     "@storybook/addon-essentials": "6.3.8",
     "@storybook/addon-links": "6.3.8",
     "@storybook/node-logger": "6.3.8",
     "@storybook/react": "6.3.8",
-    "@testing-library/dom": "^7.26.4",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/dom": "^8.11.1",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^12.1.10",
     "@types/codemirror": "^0.0.80",
     "@types/color": "^3.0.2",
@@ -83,7 +80,7 @@
     "@types/react-test-renderer": "^16.9.1",
     "@types/react-virtualized": "^9.21.5",
     "@types/styled-components": "^5.1.9",
-    "@types/testing-library__jest-dom": "^5.9.5",
+    "@types/testing-library__jest-dom": "^5.14.2",
     "@types/ws": "^6.0.3",
     "@typescript-eslint/eslint-plugin": "5.8.0",
     "@typescript-eslint/parser": "5.8.0",
@@ -108,7 +105,6 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-environment-jsdom-sixteen": "^1.0.3",
-    "nearest-color": "^0.4.4",
     "prettier": "2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -117,6 +113,7 @@
     "react-test-renderer": "^17.0.2",
     "rgb-hex": "^4.0.0",
     "source-map-explorer": "^2.5.0",
+    "styled-components": "^5.2.1",
     "ts-node": "9.1.1",
     "ts-prune": "0.8.9",
     "typescript": "4.5.4",
@@ -128,6 +125,7 @@
     "@blueprintjs/popover2": "0.10.1",
     "@blueprintjs/select": "^3.16.4",
     "@blueprintjs/table": "^3.8.33",
+    "@dagster-io/ui": "1.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.1.2"

js_modules/dagit/packages/core/src/app/AppError.tsx

@@ -1,10 +1,8 @@
 import {ErrorResponse, onError} from '@apollo/client/link/error';
+import {Toaster, FontFamily} from '@dagster-io/ui';
 import {GraphQLError} from 'graphql';
 import * as React from 'react';
 
-import {Toaster} from '../ui/Toaster';
-import {FontFamily} from '../ui/styles';
-
 import {showCustomAlert} from './CustomAlertProvider';
 
 interface DagsterGraphQLError extends GraphQLError {

js_modules/dagit/packages/core/src/app/AppProvider.tsx

@@ -16,18 +16,20 @@ import {
 } from '@apollo/client';
 import {WebSocketLink} from '@apollo/client/link/ws';
 import {getMainDefinition} from '@apollo/client/utilities';
+import {
+  ColorsWIP,
+  GlobalDialogStyle,
+  GlobalPopoverStyle,
+  GlobalSuggestStyle,
+  GlobalToasterStyle,
+  GlobalTooltipStyle,
+  FontFamily,
+} from '@dagster-io/ui';
 import * as React from 'react';
 import {BrowserRouter} from 'react-router-dom';
 import {createGlobalStyle} from 'styled-components/macro';
 import {SubscriptionClient} from 'subscriptions-transport-ws';
 
-import {ColorsWIP} from '../ui/Colors';
-import {GlobalDialogStyle} from '../ui/Dialog';
-import {GlobalPopoverStyle} from '../ui/Popover';
-import {GlobalSuggestStyle} from '../ui/Suggest';
-import {GlobalToasterStyle} from '../ui/Toaster';
-import {GlobalTooltipStyle} from '../ui/Tooltip';
-import {FontFamily} from '../ui/styles';
 import {WorkspaceProvider} from '../workspace/WorkspaceContext';
 
 import {AppContext} from './AppContext';

js_modules/dagit/packages/core/src/app/AppTopNav.tsx

@@ -1,3 +1,4 @@
+import {Box, ColorsWIP, IconWIP, IconWrapper, Tooltip} from '@dagster-io/ui';
 import * as React from 'react';
 import {Link, useHistory} from 'react-router-dom';
 import styled from 'styled-components/macro';
@@ -6,10 +7,6 @@ import {InstanceWarningIcon} from '../nav/InstanceWarningIcon';
 import {VersionNumber} from '../nav/VersionNumber';
 import {WorkspaceWarningIcon} from '../nav/WorkspaceWarningIcon';
 import {SearchDialog} from '../search/SearchDialog';
-import {Box} from '../ui/Box';
-import {ColorsWIP} from '../ui/Colors';
-import {IconWIP, IconWrapper} from '../ui/Icon';
-import {Tooltip} from '../ui/Tooltip';
 
 import {LayoutContext} from './LayoutProvider';
 import {ShortcutHandler} from './ShortcutHandler';

js_modules/dagit/packages/core/src/app/CustomAlertProvider.tsx

@@ -1,10 +1,7 @@
+import {ButtonWIP, DialogWIP, DialogBody, DialogFooter, FontFamily} from '@dagster-io/ui';
 import * as React from 'react';
 import styled from 'styled-components/macro';
 
-import {ButtonWIP} from '../ui/Button';
-import {DialogWIP, DialogBody, DialogFooter} from '../ui/Dialog';
-import {FontFamily} from '../ui/styles';
-
 import {copyValue} from './DomUtils';
 
 const CURRENT_ALERT_CHANGED = 'alert-changed';

js_modules/dagit/packages/core/src/app/CustomConfirmationProvider.tsx

@@ -1,8 +1,6 @@
+import {ButtonWIP, DialogBody, DialogFooter, DialogWIP} from '@dagster-io/ui';
 import * as React from 'react';
 
-import {ButtonWIP} from '../ui/Button';
-import {DialogBody, DialogFooter, DialogWIP} from '../ui/Dialog';
-
 interface ConfirmationOptions {
   catchOnCancel?: boolean;
   title?: string;

js_modules/dagit/packages/core/src/app/DomUtils.tsx

@@ -1,4 +1,4 @@
-import {Toaster} from '../ui/Toaster';
+import {Toaster} from '@dagster-io/ui';
 
 export const SharedToaster = Toaster.create({position: 'top'}, document.body);
 

js_modules/dagit/packages/core/src/app/FallthroughRoot.tsx

@@ -1,11 +1,7 @@
+import {Box, ExternalAnchorButton, ColorsWIP, NonIdealState, Spinner} from '@dagster-io/ui';
 import * as React from 'react';
 import {Redirect, Route, Switch, useLocation} from 'react-router-dom';
 
-import {Box} from '../ui/Box';
-import {ExternalAnchorButton} from '../ui/Button';
-import {ColorsWIP} from '../ui/Colors';
-import {NonIdealState} from '../ui/NonIdealState';
-import {Spinner} from '../ui/Spinner';
 import {WorkspaceContext} from '../workspace/WorkspaceContext';
 import {workspacePipelinePath} from '../workspace/workspacePath';
 

js_modules/dagit/packages/core/src/app/PythonErrorInfo.tsx

@@ -1,13 +1,11 @@
 import {gql} from '@apollo/client';
+import {ButtonWIP, IconWIP, FontFamily} from '@dagster-io/ui';
 import * as React from 'react';
 import styled from 'styled-components/macro';
 
 import {MetadataEntries} from '../runs/MetadataEntry';
 import {MetadataEntryFragment} from '../runs/types/MetadataEntryFragment';
 import {ErrorSource} from '../types/globalTypes';
-import {ButtonWIP} from '../ui/Button';
-import {IconWIP} from '../ui/Icon';
-import {FontFamily} from '../ui/styles';
 
 import {PythonErrorFragment} from './types/PythonErrorFragment';
 

js_modules/dagit/packages/core/src/app/QueryCountdown.tsx

@@ -1,9 +1,7 @@
 import {NetworkStatus, QueryResult} from '@apollo/client';
+import {useCountdown, RefreshableCountdown} from '@dagster-io/ui';
 import * as React from 'react';
 
-import {useCountdown} from '../ui/Countdown';
-import {RefreshableCountdown} from '../ui/RefreshableCountdown';
-
 interface Props<TData> {
   pollInterval: number;
   queryResult: QueryResult<TData, any>;

js_modules/dagit/packages/core/src/app/SettingsRoot.tsx

@@ -1,13 +1,16 @@
+import {
+  Box,
+  ButtonLink,
+  Checkbox,
+  ColorsWIP,
+  MetadataTable,
+  PageHeader,
+  Heading,
+  Subheading,
+} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
-import {Box} from '../ui/Box';
-import {ButtonLink} from '../ui/ButtonLink';
-import {Checkbox} from '../ui/Checkbox';
-import {ColorsWIP} from '../ui/Colors';
-import {MetadataTable} from '../ui/MetadataTable';
-import {PageHeader} from '../ui/PageHeader';
-import {Heading, Subheading} from '../ui/Text';
 
 import {FeatureFlag, getFeatureFlags, setFeatureFlags} from './Flags';
 import {TimezoneSelect} from './time/TimezoneSelect';

js_modules/dagit/packages/core/src/app/ShortcutHandler.tsx

@@ -1,9 +1,8 @@
+import {ColorsWIP} from '@dagster-io/ui';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components/macro';
 
-import {ColorsWIP} from '../ui/Colors';
-
 const MODIFIER_KEYCODES = [17, 18, 91, 224];
 const SHORTCUT_VISIBILITY_EVENT_TYPE = 'shortcut-visibility';
 const SHORTCUT_VISIBLITY_DELAY = 800;