dagster-io · hellendag · Dec 5, 2024 · Sep 26, 2024
diff --git a/js_modules/dagster-ui/packages/app-oss/package.json b/js_modules/dagster-ui/packages/app-oss/package.json
@@ -12,7 +12,6 @@
     "@dagster-io/ui-components": "workspace:*",
     "@dagster-io/ui-core": "workspace:*",
     "@rive-app/react-canvas": "^3.0.34",
-    "@types/styled-components": "^5.1.26",
     "eslint-config-next": "^13.5.3",
     "graphql": "^16.8.1",
     "next": "^14.2.10",
@@ -23,7 +22,8 @@
     "react-router-dom": "^5.3.0",
     "react-router-dom-v5-compat": "^6.3.0",
     "recoil": "^0.7.7",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6",
+    "stylis": "^4",
     "uuid": "^9.0.0",
     "validator": "^13.7.0",
     "web-vitals": "^2.1.3"
@@ -33,7 +33,7 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^16.11.20",
     "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/uuid": "^8.3.4",
     "@types/validator": "^13",
     "@types/webpack-bundle-analyzer": "^4",

diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -30,7 +30,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "styled-components": "^5.3.3"
+    "styled-components": "^6",
+    "stylis": "^4"
   },
   "dependencies": {
     "@react-hook/resize-observer": "^1.2.6",
@@ -77,9 +78,8 @@
     "@types/mdx-js__react": "^1",
     "@types/react": "^18.3.9",
     "@types/react-dates": "^21.8.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/react-is": "^18.3.0",
-    "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.2",
     "babel-jest": "^27.4.6",
     "babel-loader": "^9.1.2",

diff --git a/js_modules/dagster-ui/packages/ui-components/rollup.config.js b/js_modules/dagster-ui/packages/ui-components/rollup.config.js
@@ -57,5 +57,6 @@ export default {
     'react-dom',
     'react-is',
     'styled-components',
+    'stylis',
   ],
 };
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import {Colors} from './Color';
 import {IconWrapper} from './Icon';
 import {SpinnerWrapper} from './Spinner';
-
 interface Props {
   fillColor?: string;
   textColor?: string;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx
@@ -13,6 +13,13 @@ type Colors =
 
 type Underline = 'never' | 'always' | 'hover';
 
+type Props = Omit<React.HTMLProps<HTMLButtonElement>, 'color'> & {
+  color?: Colors;
+  disabled?: boolean;
+  underline?: Underline;
+  children?: React.ReactNode;
+};
+
 const fontColor = (color: Colors) => {
   if (typeof color === 'string') {
     return css`
@@ -49,14 +56,9 @@ const textDecoration = (underline: Underline) => {
   }
 };
 
-interface Props extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
-  color?: Colors;
-  underline?: Underline;
-}
-
-export const ButtonLink = styled(({color: _color, underline: _underline, ...rest}: Props) => (
-  <button {...rest} />
-))`
+export const ButtonLink = styled(
+  ({color: _color, underline: _underline, type: _type, ...rest}: Props) => <button {...rest} />,
+)<Props>`
   background: transparent;
   border: 0;
   cursor: pointer;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx
@@ -28,9 +28,9 @@ export const CollapsibleSection = ({
           grow: 1,
           ...(headerWrapperProps?.flex || {}),
         }}
-        onClick={() => {
+        onClick={(e) => {
           setIsCollapsed(!isCollapsed);
-          headerWrapperProps?.onClick?.();
+          headerWrapperProps?.onClick?.(e);
         }}
       >
         {arrowSide === 'left' ? (

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx
@@ -302,10 +302,7 @@ const HoveredDictEntryContextProvider = React.memo(({children}: {children: React
 });
 
 const DictEntry = React.forwardRef(
-  (
-    props: React.ComponentProps<typeof DictEntryDiv>,
-    ref: React.ForwardedRef<HTMLButtonElement>,
-  ) => {
+  (props: React.ComponentProps<typeof DictEntryDiv>, ref: React.ForwardedRef<HTMLDivElement>) => {
     const {hovered, onMouseEnter, onMouseLeave} =
       React.useContext(HoveredDictEntryContext).useDictEntryHover();
 
@@ -324,7 +321,7 @@ const DictEntry = React.forwardRef(
 );
 
 const DictEntryDiv2 = styled.div``;
-const DictEntryDiv = styled.div<{$hovered: boolean}>`
+const DictEntryDiv = styled.div<{$hovered?: boolean}>`
   border: 1px solid transparent;
 
   ${({$hovered}) =>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx
@@ -1,4 +1,5 @@
-import styled, {CSSProperties} from 'styled-components';
+import {CSSProperties} from 'react';
+import styled from 'styled-components';
 
 import {Button} from './Button';
 import {Icon} from './Icon';

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx
@@ -67,7 +67,7 @@ const DatePickerContainer = styled.div`
     background-color: ${Colors.backgroundLight()};
     border-color: ${Colors.borderDefault()};
 
-    :hover {
+    &:hover {
       border-color: ${Colors.borderHover()};
     }
   }
@@ -95,7 +95,7 @@ const DatePickerContainer = styled.div`
     border-color: ${Colors.keylineDefault()};
     color: ${Colors.textLight()};
 
-    :hover {
+    &:hover {
       background-color: ${Colors.backgroundBlue()};
       border-color: ${Colors.keylineDefault()};
     }
@@ -104,8 +104,8 @@ const DatePickerContainer = styled.div`
   .CalendarDay__selected {
     background-color: ${Colors.backgroundBlueHover()};
 
-    :active,
-    :hover {
+    &:active,
+    &:hover {
       border-color: ${Colors.keylineDefault()};
     }
   }

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {ReactNode} from 'react';
 import styled, {css} from 'styled-components';
 
 import {Box} from './Box';
@@ -52,17 +53,22 @@ export const Group = (props: Props) => {
   );
 };
 
-type GroupChildProps = {
+type GroupChildProps = React.ComponentProps<typeof Box> & {
   empty: boolean;
+  children: ReactNode;
 };
 
-const GroupChild = styled(({empty: _empty, ...rest}) => <Box {...rest} />)<GroupChildProps>`
+const GroupChild = styled(({empty: _empty, ...rest}: GroupChildProps) => (
+  <Box {...rest} />
+))<GroupChildProps>`
   ${({empty}) => (empty ? 'display: none;' : '')}
   pointer-events: auto;
 `;
 
-type InnerProps = {
+type InnerProps = React.ComponentProps<typeof Box> & {
+  direction: Direction;
   spacing: Spacing;
+  children: ReactNode;
 };
 
 const marginAdjustment = (props: InnerProps) => {
@@ -77,7 +83,7 @@ const Outer = styled(Box)`
   pointer-events: none;
 `;
 
-const Inner = styled(({direction: _direction, spacing: _spacing, ...rest}) => (
+const Inner = styled(({direction: _direction, spacing: _spacing, ...rest}: InnerProps) => (
   <Box {...rest} />
 ))<InnerProps>`
   ${marginAdjustment}

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -824,14 +824,14 @@ export const Icon = React.memo((props: Props) => {
     />
   );
 });
-interface WrapperProps {
+export interface IconWrapperProps {
   $color: string | null;
   $size: number;
   $img: string;
   $rotation: string | null;
 }
 
-export const IconWrapper = styled.div<WrapperProps>`
+export const IconWrapper = styled.div<IconWrapperProps>`
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
   flex-shrink: 0;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
@@ -105,7 +105,7 @@ export const MenuDivider = styled(BlueprintMenuDivider)`
   border-top: 1px solid ${Colors.keylineDefault()};
   margin: 2px 0;
 
-  :focus {
+  &:focus {
     outline: none;
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import {Spinner as BlueprintSpinner} from '@blueprintjs/core';
+import {ReactNode} from 'react';
 import styled from 'styled-components';
 
 import {Colors} from './Color';
@@ -53,7 +54,13 @@ export const Spinner = ({
   );
 };
 
-export const SpinnerWrapper = styled.div<{$padding: number}>`
+interface WrapperProps {
+  $padding: number;
+  children: ReactNode;
+  title?: string;
+}
+
+export const SpinnerWrapper = styled.div<WrapperProps>`
   padding: ${({$padding}) => $padding}px;
 `;
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx
@@ -37,7 +37,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 
   box-shadow: ${({$strokeColor}) => `${$strokeColor} inset 0px 0px 0px 1px`};
 
-  :hover:not(:disabled) {
+  &:hover:not(:disabled) {
     background-color: ${({$fillColor, $fillColorHover}) =>
       $fillColorHover || $fillColor || 'transparent'};
     box-shadow: ${({$strokeColor, $strokeColorHover}) =>
@@ -48,28 +48,28 @@ export const StyledButton = styled.button<StyledButtonProps>`
     text-decoration: none;
   }
 
-  :focus,
-  :focus-visible,
-  :focus:hover:not(:disabled) {
+  &:focus,
+  &:focus-visible,
+  &:focus:hover:not(:disabled) {
     box-shadow: ${Colors.focusRing()} 0 0 0 2px;
     outline: none;
   }
 
-  :focus:not(:focus-visible) {
+  &:focus:not(:focus-visible) {
     box-shadow: ${({$strokeColor}) =>
       `${$strokeColor} inset 0px 0px 0px 1px, ${Colors.shadowDefault()} 0px 2px 12px 0px;`};
   }
 
-  :active:not(:disabled) {
+  &:active:not(:disabled) {
     filter: brightness(0.95);
   }
 
-  :disabled {
+  &:disabled {
     cursor: default;
     opacity: 0.5;
   }
 
-  :disabled:hover {
+  &:disabled:hover {
     box-shadow: ${({$strokeColor}) => `${$strokeColor} inset 0px 0px 0px 1px`};
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx
@@ -93,8 +93,8 @@ const Blob = styled.div<BlobProps>`
   user-select: none;
   width: ${({$blobSize}) => `${$blobSize}px`};
 
-  :focus,
-  :active {
+  &:focus,
+  &:active {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx
@@ -117,32 +117,34 @@ export const Tab = styled((props: TabProps) => {
   ${tabCSS}
 `;
 
-interface TabsProps {
-  children: Array<React.ReactElement<TabProps>>;
+type TabsProps = Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'onChange'> & {
+  children: Array<React.ReactElement<TabProps> | null>;
   selectedTabId?: string;
   onChange?: (selectedTabId: string) => void;
   size?: 'small' | 'large';
-}
+};
 
-export const Tabs = styled(({selectedTabId, children, onChange, size = 'large', ...rest}) => {
-  return (
-    <div {...rest} role="tablist">
-      {React.Children.map(children, (child) =>
-        child
-          ? React.cloneElement(child, {
-              selected: child.props.selected || child.props.id === selectedTabId,
-              $size: size,
-              ...(onChange
-                ? {
-                    onClick: () => onChange(child.props.id),
-                  }
-                : {}),
-            })
-          : null,
-      )}
-    </div>
-  );
-})<TabsProps>`
+export const Tabs = styled(
+  ({selectedTabId, children, onChange, size = 'large', ...rest}: TabsProps) => {
+    return (
+      <div {...rest} role="tablist">
+        {React.Children.map(children, (child) =>
+          child
+            ? React.cloneElement(child, {
+                selected: child.props.selected || child.props.id === selectedTabId,
+                $size: size,
+                ...(onChange
+                  ? {
+                      onClick: () => child.props.id && onChange(child.props.id),
+                    }
+                  : {}),
+              })
+            : null,
+        )}
+      </div>
+    );
+  },
+)<TabsProps>`
   display: flex;
   gap: 16px;
   font-size: ${({size}) => (size === 'small' ? '12px' : '14px')};