feat: continue

interlay · Mar 7, 2024 · 772967c · 772967c
1 parent 2b8ad35
commit 772967c
Show file tree

Hide file tree

Showing 42 changed files with 599 additions and 283 deletions.
diff --git a/packages/components/src/Dialog/Dialog.style.tsx b/packages/components/src/Dialog/Dialog.style.tsx
@@ -15,6 +15,7 @@ const StyledDialog = styled.section<StyledDialogProps>`
   position: relative;
   outline: none;
 
+  width: 100%;
   ${({ theme, $size }) => css`
     ${theme.dialog.base}
     ${theme.dialog.size[$size]}

diff --git a/packages/components/src/Field/Field.style.tsx b/packages/components/src/Field/Field.style.tsx
@@ -9,6 +9,7 @@ const StyledField = styled.div<StyledFieldProps>`
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  height: 100%;
   max-width: ${({ $maxWidth, theme }) => $maxWidth && theme.spacing($maxWidth)};
 `;
 

diff --git a/packages/components/src/Flex/Flex.style.tsx b/packages/components/src/Flex/Flex.style.tsx
@@ -6,7 +6,7 @@ import { StyledMarginProps } from '@interlay/hooks';
 import { marginCSS } from '../utils/margin';
 
 type StyledFlexProps = {
-  $gap: Spacing;
+  $gap?: Spacing;
   $justifyContent?: JustifyContent;
   $alignItems?: AlignItems;
   $direction?: Direction;
@@ -20,7 +20,7 @@ const StyledFlex = styled.div<StyledFlexProps>`
   flex-direction: ${(props) => props.$direction};
   justify-content: ${(props) => props.$justifyContent};
   align-items: ${(props) => props.$alignItems};
-  gap: ${({ theme, $gap }) => theme.spacing($gap)};
+  gap: ${({ theme, $gap }) => $gap && theme.spacing($gap)};
   flex: ${(props) => props.$flex};
   flex-wrap: ${(props) => (typeof props.$wrap === 'boolean' ? 'wrap' : props.$wrap)};
   align-self: ${(props) => props.$alignSelf};

diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx
@@ -41,6 +41,7 @@ type InheritAttrs = Omit<
     Pick<FieldProps, 'label' | 'labelPosition' | 'labelProps' | 'maxWidth' | 'justifyContent' | 'alignItems'>,
   keyof Props
 >;
+
 type BaseInputProps = Props & InheritAttrs;
 
 const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
@@ -60,7 +61,7 @@ const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
           ref={ref as any}
           $adornments={{ left: !!startAdornment, right: !!endAdornment }}
           $hasError={error}
-          $isDisabled={!!inputProps.disabled}
+          $isDisabled={!!inputProps?.disabled}
           $minHeight={minHeight}
           $size={size}
           as={elementType}

diff --git a/packages/components/src/List/List.stories.tsx b/packages/components/src/List/List.stories.tsx
@@ -28,18 +28,6 @@ export default {
 
 export const Default: StoryObj<ListProps> = {};
 
-export const Secondary: StoryObj<ListProps> = {
-  args: {
-    variant: 'secondary'
-  }
-};
-
-export const Card: StoryObj<ListProps> = {
-  args: {
-    variant: 'card'
-  }
-};
-
 export const Horizontal: StoryObj<ListProps> = {
   args: {
     direction: 'row'

diff --git a/packages/components/src/List/List.style.tsx b/packages/components/src/List/List.style.tsx
@@ -1,22 +1,11 @@
 import styled, { css } from 'styled-components';
 import { theme } from '@interlay/theme';
-import { ListVariants } from '@interlay/theme';
 
 import { Flex } from '../Flex';
 
-type StyledListProps = {
-  $variant: ListVariants;
-};
-
-const StyledList = styled(Flex)<StyledListProps>`
-  background-color: ${({ $variant }) => theme.list?.[$variant]?.bg};
-  border-radius: ${({ $variant }) => theme.list[$variant].rounded};
-  border: ${({ $variant }) => theme.list[$variant].border};
-  overflow: hidden;
-`;
+const StyledList = styled(Flex)``;
 
 type StyledListItemProps = {
-  $variant: ListVariants;
   $isDisabled: boolean;
   $isHovered: boolean;
   $isInteractable: boolean;
@@ -27,30 +16,19 @@ const StyledListItem = styled.div<StyledListItemProps>`
   flex: 1;
   align-self: stretch;
   padding: ${theme.spacing.spacing3};
-  border-radius: ${({ $variant }) => theme.list.item[$variant].rounded};
-  background-color: ${({ $variant, $isHovered, $isFocusVisible }) =>
-    $isHovered || $isFocusVisible ? theme.list.item[$variant].hover.bg : theme.list.item[$variant].bg};
-  border: ${({ $variant }) => $variant !== 'card' && theme.list.item[$variant].border};
   color: ${theme.colors.textPrimary};
   cursor: ${({ $isInteractable }) => $isInteractable && 'pointer'};
   outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
   opacity: ${({ $isDisabled }) => $isDisabled && 0.5};
   white-space: nowrap;
 
-  ${({ $variant }) => {
-    if ($variant === 'card') {
-      return css`
-        &:not(:first-of-type) {
-          border-top: ${theme.list.item.card.border};
-        }
-      `;
-    }
-
+  ${({ theme, $isHovered }) => {
     return css`
+      ${theme.list.item.base}
+      ${$isHovered && theme.list.item.hover}
+
       &[aria-selected='true'] {
-        background-color: ${theme.list.item[$variant].selected.bg};
-        color: ${theme.list.text};
-        border-color: ${theme.list.item[$variant].selected.bg};
+        ${theme.list.item.selected};
       }
     `;
   }}

diff --git a/packages/components/src/List/List.tsx b/packages/components/src/List/List.tsx
@@ -27,7 +27,19 @@ type ListProps = Props & NativeAttrs & InheritAttrs;
 // FIXME: use keyboardDelegate for horizontal list (see TagGroup from spectrum)
 const List = forwardRef<HTMLDivElement, ListProps>(
   (
-    { variant = 'primary', direction = 'column', onSelectionChange, selectionMode, selectedKeys, ...props },
+    {
+      variant = 'primary',
+      direction = 'column',
+      onSelectionChange,
+      selectionMode,
+      selectedKeys,
+      disabledBehavior,
+      disabledKeys,
+      disallowEmptySelection,
+      defaultSelectedKeys,
+      selectionBehavior,
+      ...props
+    },
     ref
   ): JSX.Element => {
     const listRef = useDOMRef<HTMLDivElement>(ref);
@@ -36,22 +48,25 @@ const List = forwardRef<HTMLDivElement, ListProps>(
       onSelectionChange,
       selectionMode,
       selectedKeys,
+      disabledBehavior,
+      defaultSelectedKeys,
+      disabledKeys,
+      disallowEmptySelection,
       ...props
     };
-    const state = useListState(ariaProps);
+    const state = useListState({ selectionBehavior, ...ariaProps });
 
     const { gridProps } = useGridList(ariaProps, state, listRef);
 
     return (
       <StyledList
         {...mergeProps(gridProps, props)}
         ref={listRef}
-        $variant={variant}
         direction={direction}
         gap={variant === 'card' ? undefined : 's'}
       >
         {[...state.collection].map((item) => (
-          <ListItem key={item.key} item={item} state={state} variant={variant} />
+          <ListItem key={item.key} item={item} state={state} />
         ))}
       </StyledList>
     );

diff --git a/packages/components/src/List/ListItem.tsx b/packages/components/src/List/ListItem.tsx
@@ -6,23 +6,20 @@ import { mergeProps } from '@react-aria/utils';
 import { ListState } from '@react-stately/list';
 import { Node } from '@react-types/shared';
 import { useMemo, useRef } from 'react';
-import { ListVariants } from '@interlay/theme';
 
 import { Flex, FlexProps } from '../Flex';
 
 import { StyledListItem } from './List.style';
 
-type Props = {
-  variant?: ListVariants;
-};
+type Props = {};
 
 type InheritAttrs = Omit<FlexProps, keyof Props>;
 
 type ListItemProps = Props & InheritAttrs;
 
 type InternalProps<T extends object> = ListItemProps & { item: Node<T>; state: ListState<T> };
 
-const ListItem = <T extends object>({ item, state, variant = 'primary' }: InternalProps<T>): JSX.Element => {
+const ListItem = <T extends object>({ item, state }: InternalProps<T>): JSX.Element => {
   const ref = useRef(null);
   const { rowProps, gridCellProps, isDisabled } = useGridListItem({ node: item }, state, ref);
 
@@ -44,7 +41,6 @@ const ListItem = <T extends object>({ item, state, variant = 'primary' }: Intern
       $isFocusVisible={isFocusVisible}
       $isHovered={isHovered}
       $isInteractable={isInteractable}
-      $variant={variant}
     >
       <Flex {...mergeProps(gridCellProps, props)}>{item.rendered}</Flex>
     </StyledListItem>

diff --git a/packages/components/src/Modal/Modal.style.tsx b/packages/components/src/Modal/Modal.style.tsx
@@ -1,22 +1,28 @@
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
+import { DialogSize } from '@interlay/themev2';
 
 import { overlayCSS } from '../utils/overlay';
 import { Dialog, DialogBody } from '../Dialog';
 
+type StyledWrapperProps = {
+  $placement: 'top' | 'center';
+};
+
 type StyledModalProps = {
   $isOpen?: boolean;
-  $placement: 'top' | 'center';
+  $size: DialogSize;
 };
 
 type StyledDialogProps = {
   $isOpen?: boolean;
+  $maxHeight?: CSSProperties['maxHeight'];
 };
 
 type StyledModalBodyProps = {
   $noPadding?: boolean;
 };
 
-const StyledWrapper = styled.div<StyledModalProps>`
+const StyledWrapper = styled.div<StyledWrapperProps>`
   position: fixed;
   top: 0;
   left: 0;
@@ -46,11 +52,13 @@ const StyledModal = styled.div<StyledModalProps>`
 
   outline: none;
   margin: ${({ theme }) => `${theme.spacing('7xl')} ${theme.spacing('xl')}`};
+  max-width: ${({ theme, $size }) => theme.dialog.size[$size].maxWidth};
+  width: 100%;
 `;
 
 const StyledDialog = styled(Dialog)<StyledDialogProps>`
   pointer-events: ${({ $isOpen }) => !$isOpen && 'none'};
-  max-height: ${({ theme }) => `calc(100dvh - ${theme.spacing('10xl')})`};
+  max-height: ${({ theme, $maxHeight }) => $maxHeight || `calc(100dvh - ${theme.spacing('10xl')})`};
 `;
 
 const StyledDialogBody = styled(DialogBody)<StyledModalBodyProps>`

diff --git a/packages/components/src/Modal/Modal.tsx b/packages/components/src/Modal/Modal.tsx
@@ -1,6 +1,7 @@
 import { forwardRef, useRef } from 'react';
 import { useDOMRef } from '@interlay/hooks';
 import { DialogSize } from '@interlay/themev2';
+import { CSSProperties } from 'styled-components';
 
 import { DialogProps } from '../Dialog';
 import { Overlay } from '../Overlay';
@@ -22,6 +23,7 @@ type Props = {
   container?: Element;
   placement?: 'top' | 'center';
   size?: ModalSizes;
+  maxHeight?: CSSProperties['maxHeight'];
 };
 
 type InheritAttrs = Omit<ModalWrapperProps & DialogProps, keyof Props | 'wrapperRef'>;
@@ -39,7 +41,8 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
       shouldCloseOnInteractOutside,
       container,
       isOpen,
-      size,
+      size = 'md',
+      maxHeight,
       ...props
     },
     ref
@@ -64,10 +67,11 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
           placement={placement}
           shouldCloseOnBlur={shouldCloseOnBlur}
           shouldCloseOnInteractOutside={handleShouldCloseOnInteractOutside}
+          size={size}
           wrapperRef={wrapperRef}
           onClose={onClose}
         >
-          <StyledDialog $isOpen={isOpen} size={size} {...props}>
+          <StyledDialog $isOpen={isOpen} $maxHeight={maxHeight} size={size} {...props}>
             {children}
           </StyledDialog>
         </ModalWrapper>

diff --git a/packages/components/src/Modal/ModalWrapper.tsx b/packages/components/src/Modal/ModalWrapper.tsx
@@ -2,6 +2,7 @@ import { AriaModalOverlayProps, AriaOverlayProps, useModalOverlay } from '@react
 import { mergeProps } from '@react-aria/utils';
 import { OverlayTriggerState } from '@react-stately/overlays';
 import { forwardRef, ReactNode, RefObject } from 'react';
+import { DialogSize } from '@interlay/themev2';
 
 import { Underlay } from '../Overlay/Underlay';
 
@@ -13,6 +14,7 @@ type Props = {
   isOpen?: boolean;
   onClose: () => void;
   wrapperRef: RefObject<HTMLDivElement>;
+  size: DialogSize;
 };
 
 type InheritAttrs = Omit<AriaModalOverlayProps & AriaOverlayProps, keyof Props>;
@@ -31,6 +33,7 @@ const ModalWrapper = forwardRef<HTMLDivElement, ModalWrapperProps>(
       shouldCloseOnInteractOutside,
       shouldCloseOnBlur,
       wrapperRef,
+      size,
       ...props
     },
     ref
@@ -53,8 +56,8 @@ const ModalWrapper = forwardRef<HTMLDivElement, ModalWrapperProps>(
     return (
       <div ref={wrapperRef}>
         <Underlay {...underlayProps} isOpen={!!isOpen} />
-        <StyledWrapper $isOpen={!!isOpen} $placement={placement}>
-          <StyledModal ref={ref} $isOpen={isOpen} $placement={placement} {...mergeProps(modalProps, props)}>
+        <StyledWrapper $placement={placement}>
+          <StyledModal ref={ref} $isOpen={isOpen} $size={size} {...mergeProps(modalProps, props)}>
             {children}
           </StyledModal>
         </StyledWrapper>

diff --git a/packages/components/src/Select/Select.stories.tsx b/packages/components/src/Select/Select.stories.tsx
@@ -24,6 +24,51 @@ const Render = (args: SelectProps) => (
         USDT
       </Flex>
     </Item>
+    <Item key='USDC' textValue='USDC'>
+      <Flex alignItems='center' gap='xs'>
+        USDC
+      </Flex>
+    </Item>
+    <Item key='TBTC' textValue='TBTC'>
+      <Flex alignItems='center' gap='xs'>
+        TBTC
+      </Flex>
+    </Item>
+    <Item key='WBTC' textValue='WBTC'>
+      <Flex alignItems='center' gap='xs'>
+        WBTC
+      </Flex>
+    </Item>
+    <Item key='WETH' textValue='WETH'>
+      <Flex alignItems='center' gap='xs'>
+        WETH
+      </Flex>
+    </Item>
+    <Item key='DAI' textValue='DAI'>
+      <Flex alignItems='center' gap='xs'>
+        DAI
+      </Flex>
+    </Item>
+    <Item key='BBTC' textValue='BBTC'>
+      <Flex alignItems='center' gap='xs'>
+        BBTC
+      </Flex>
+    </Item>
+    <Item key='DBTC' textValue='DBTC'>
+      <Flex alignItems='center' gap='xs'>
+        DBTC
+      </Flex>
+    </Item>
+    <Item key='PBTC' textValue='PBTC'>
+      <Flex alignItems='center' gap='xs'>
+        PBTC
+      </Flex>
+    </Item>
+    <Item key='WWBTC' textValue='WWBTC'>
+      <Flex alignItems='center' gap='xs'>
+        WWBTC
+      </Flex>
+    </Item>
   </Select>
 );