@rango-dev/ui 0.29.1-next.3 → 0.29.1-next.5

package/src/components/Tabs/Tabs.styles.tsx

@@ -0,0 +1,157 @@
+import { darkTheme, styled } from '../../theme';
+import { Button } from '../Button';
+
+export const Tabs = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  position: 'relative',
+  justifyContent: 'space-between',
+  height: '100%',
+  variants: {
+    type: {
+      secondary: {
+        border: '3px solid $neutral100',
+        backgroundColor: '$neutral100',
+      },
+      primary: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        borderColor: '$$color',
+        borderWidth: '5px',
+        borderStyle: 'solid',
+        backgroundColor: '$$color',
+      },
+    },
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+  },
+});
+
+export const Tab = styled(Button, {
+  color: '$neutral700',
+  backgroundColor: 'transparent',
+  height: '100%',
+  zIndex: 10,
+  '& ._text': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  variants: {
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+    type: {
+      primary: {
+        padding: '$5 $10',
+        height: '100%',
+      },
+      secondary: {},
+    },
+    isActive: {
+      true: {
+        transition: 'color 0.8s linear',
+      },
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'secondary',
+      isActive: true,
+      css: {
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+      },
+    },
+    {
+      type: 'secondary',
+      isActive: false,
+      css: {
+        '&:hover': {
+          backgroundColor: '$info100',
+          color: '$secondary500',
+          [`.${darkTheme} &`]: {
+            backgroundColor: 'transparent',
+            color: '$neutral700',
+          },
+        },
+      },
+    },
+
+    {
+      type: 'primary',
+      isActive: true,
+      css: {
+        color: '$secondary',
+        '& svg': {
+          color: '$secondary',
+        },
+      },
+    },
+    {
+      type: 'primary',
+      isActive: false,
+      css: {
+        '&:hover': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  ],
+});
+
+export const BackdropTab = styled('div', {
+  padding: '$4',
+  position: 'absolute',
+  inset: 0,
+  transition: 'transform 0.2s cubic-bezier(0, 0, 0.86, 1.2)',
+  '&.no-transition': {
+    transition: 'none',
+  },
+  variants: {
+    type: {
+      secondary: {
+        backgroundColor: '$secondary500',
+      },
+      primary: {
+        backgroundColor: '$background',
+      },
+    },
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+  },
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,95 @@
+import type { PropTypes } from './Tabs.types';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import { Divider } from '../Divider';
+import { Tooltip } from '../Tooltip';
+
+import { BackdropTab, Tab, Tabs } from './Tabs.styles';
+
+const INITIAL_RENDER_DELAY = 100;
+export function TabsComponent(props: PropTypes) {
+  const {
+    items: tabItems,
+    onChange,
+    container = document.body,
+    value,
+    type,
+    borderRadius = 'medium',
+    className,
+  } = props;
+  const [tabWidth, setTabWidth] = useState(0);
+  const tabRef: React.Ref<HTMLButtonElement> = useRef(null);
+  const currentIndex = tabItems.findIndex((item) => item.id === value);
+
+  // State variable to track the initial render
+  const [initialRender, setInitialRender] = useState(true);
+  const transformPosition = currentIndex * tabWidth;
+
+  useEffect(() => {
+    const updateTabWidth = () => {
+      if (tabRef.current) {
+        const tabRect = tabRef.current.getBoundingClientRect();
+        setTabWidth(tabRect.width);
+      }
+    };
+    updateTabWidth();
+    window.addEventListener('resize', updateTabWidth);
+    return () => {
+      window.removeEventListener('resize', updateTabWidth);
+    };
+  }, []);
+
+  useEffect(() => {
+    // Set initialRender to false after a short delay
+    const timeout = setTimeout(() => {
+      setInitialRender(false);
+      clearTimeout(timeout);
+    }, INITIAL_RENDER_DELAY);
+  }, []);
+
+  return (
+    <Tabs
+      className={`_tabs ${className || ''}`}
+      type={type}
+      borderRadius={borderRadius}>
+      {tabItems.map((item, index) => (
+        <Tooltip
+          key={item.id}
+          style={{ width: '100%' }}
+          container={container}
+          side="bottom"
+          sideOffset={2}
+          content={item.tooltip}
+          open={!item.tooltip ? false : undefined}>
+          <Tab
+            className="_tab"
+            ref={index === 0 ? tabRef : null} // Set ref on the first tab
+            type={type}
+            fullWidth
+            disableRipple={true}
+            borderRadius={borderRadius}
+            onClick={() => onChange(item)}
+            size="small"
+            isActive={item.id === value}
+            variant="default">
+            {item.icon}
+            {!!item.icon && !!item.title && (
+              <Divider direction="horizontal" size="2" />
+            )}
+            {item.title}
+          </Tab>
+        </Tooltip>
+      ))}
+      <BackdropTab
+        type={type}
+        borderRadius={borderRadius}
+        className={`_backdrop-tab ${initialRender ? 'no-transition' : ''}`}
+        css={{
+          width: tabWidth,
+          transform: `translateX(${transformPosition}px)`,
+        }}
+      />
+    </Tabs>
+  );
+}

package/src/components/Tabs/Tabs.types.tsx

@@ -0,0 +1,32 @@
+import type { Tabs } from './Tabs.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseItem = {
+  id: string | number;
+  tooltip?: React.ReactNode;
+};
+
+type ItemWithTitle = BaseItem & {
+  title: string;
+  icon?: React.ReactNode;
+};
+
+type ItemWithIcon = BaseItem & {
+  icon: React.ReactNode;
+  title?: string;
+};
+
+type Item = ItemWithTitle | ItemWithIcon;
+type BaseProps = Stitches.VariantProps<typeof Tabs>;
+type BaseType = Exclude<BaseProps['type'], object>;
+type BaseBorderRadius = Exclude<BaseProps['borderRadius'], object>;
+
+export interface PropTypes {
+  items: Item[];
+  container?: HTMLElement;
+  onChange: (item: Item) => void;
+  value: string;
+  type: BaseType;
+  borderRadius?: BaseBorderRadius;
+  className?: string;
+}

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { TabsComponent as Tabs } from './Tabs';

package/src/components/index.ts

@@ -11,7 +11,7 @@ export * from './Chip';
 export * from './common';
 export * from './Divider';
 export * from './Drawer';
-export * from './ExpandedRoute';
+export * from './FullExpandedQuote';
 export * from './Header';
 export * from './Modal';
 export * from './MessageBox';
@@ -53,3 +53,5 @@ export * from './Popover';
 export * from './Flags';
 export * from './Select';
 export * from './QuoteTag';
+export * from './Tabs';
+export type { SvgIconProps } from './SvgIcon';

package/src/icons/Bridges.tsx

@@ -0,0 +1,19 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgBridges(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18.21 9.21C15.93 10.78 13.45 13.3 13 17H15V19H9V17H11C10.5 12.5 6.63 9 2 9V7C6.39 7 10.22 9.55 12 13.3C13.13 10.87 14.99 9.05 16.78 7.78L14 5H21V12L18.21 9.21Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgBridges;

package/src/icons/Exchange.tsx

@@ -0,0 +1,22 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgExchange(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Icons">
+        <path
+          id="Vector"
+          d="M6.99 11L3 15L6.99 19V16H14V14H6.99V11ZM21 9L17.01 5V8H10V10H17.01V13L21 9Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgExchange;

package/src/icons/index.ts

@@ -2,6 +2,7 @@ export { default as AddIcon } from './Add';
 export { default as AutoThemeIcon } from './AutoTheme';
 export { default as AutorenewIcon } from './Autorenew';
 export { default as BorderRadiusIcon } from './BorderRadius';
+export { default as BridgeIcon } from './Bridges';
 export { default as ChevronDownIcon } from './ChevronDown';
 export { default as ChevronLeftIcon } from './ChevronLeft';
 export { default as ChevronRightIcon } from './ChevronRight';
@@ -18,6 +19,7 @@ export { default as DoneIcon } from './Done';
 export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ErrorIcon } from './Error';
 export { default as ExitIcon } from './Exit';
+export { default as ExchangeIcon } from './Exchange';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
 export { default as GasIcon } from './Gas';

package/dist/widget/ui/src/components/ExpandedRoute/ExpandedRoute.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './ExpandedRoute.types';
-import React from 'react';
-export declare function ExpandedRoute(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=ExpandedRoute.d.ts.map

package/dist/widget/ui/src/components/ExpandedRoute/ExpandedRoute.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandedRoute.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ExpandedRoute/ExpandedRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAC;AA8B1B,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,qBAkH7C"}

package/dist/widget/ui/src/components/ExpandedRoute/ExpandedRoute.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ExpandedRoute } from './ExpandedRoute';
-declare const meta: Meta<typeof ExpandedRoute>;
-export default meta;
-type Story = StoryObj<typeof ExpandedRoute>;
-export declare const Main: Story;
-//# sourceMappingURL=ExpandedRoute.stories.d.ts.map

package/dist/widget/ui/src/components/ExpandedRoute/ExpandedRoute.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandedRoute.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ExpandedRoute/ExpandedRoute.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAEpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,IAAI,EAAE,KAgBlB,CAAC"}

package/dist/widget/ui/src/components/ExpandedRoute/ExpandedRoute.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandedRoute.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ExpandedRoute/ExpandedRoute.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE/E,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7B,GAAG,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC3B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACxD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/widget/ui/src/components/ExpandedRoute/index.d.ts

@@ -1,2 +0,0 @@
-export { ExpandedRoute } from './ExpandedRoute';
-//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/ExpandedRoute/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ExpandedRoute/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/widget/ui/src/components/ExpandedRoute/mock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ExpandedRoute/mock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AAE7D,eAAO,MAAM,KAAK,EAAE,IAAI,EAkNvB,CAAC;AAEF,eAAO,MAAM,IAAI;;;GAqBhB,CAAC"}

package/src/components/ExpandedRoute/ExpandedRoute.tsx

@@ -1,147 +0,0 @@
-import type { PropTypes } from './ExpandedRoute.types';
-
-import React from 'react';
-
-import { ErrorIcon, WarningIcon } from '../../icons';
-import { ChainToken } from '../ChainToken';
-import { Image } from '../common';
-import { Divider } from '../Divider';
-import { QuoteCost } from '../QuoteCost';
-import { QuoteTag } from '../QuoteTag';
-import { Tooltip } from '../Tooltip';
-import { Typography } from '../Typography';
-
-import {
-  FromToken,
-  IconHighlight,
-  lastStepStyle,
-  LeftSection,
-  OutputSection,
-  RightSection,
-  RouteContainer,
-  RouteHeader,
-  Step,
-  Steps,
-  StyledPriceImpact,
-  SwapperContainer,
-  SwapperImage,
-  TagsContainer,
-  tokenLabelStyles,
-  VerticalLine,
-} from './ExpandedRoute.styles';
-
-export function ExpandedRoute(props: PropTypes) {
-  const {
-    steps,
-    tags,
-    time,
-    fee,
-    percentageChange,
-    warningLevel,
-    outputPrice,
-    tooltipContainer,
-    selected = false,
-    onClick,
-  } = props;
-  const numberOfSteps = steps.length;
-  return (
-    <RouteContainer selected={selected} onClick={onClick}>
-      <RouteHeader>
-        <QuoteCost fee={fee} time={time} steps={numberOfSteps} />
-        <TagsContainer>
-          {tags.map((tag) => (
-            <QuoteTag key={tag.label} label={tag.label} value={tag.value} />
-          ))}
-        </TagsContainer>
-      </RouteHeader>
-      <Steps>
-        {steps.map((step, index) => {
-          const key = `item-${index}`;
-          return (
-            <Step
-              key={key}
-              className={index === numberOfSteps - 1 ? lastStepStyle() : ''}>
-              <LeftSection>
-                <ChainToken
-                  size="small"
-                  chainImage={step.from.chain.image}
-                  tokenImage={step.from.token.image}
-                />
-                <FromToken>
-                  <Tooltip
-                    content={step.from.price.realValue}
-                    container={tooltipContainer}
-                    side="bottom"
-                    open={!step.from.price.realValue ? false : undefined}>
-                    <Typography size="xsmall" variant="body">
-                      {step.from.price.value}
-                    </Typography>
-                  </Tooltip>
-                  <Typography
-                    size="xsmall"
-                    variant="body"
-                    className={tokenLabelStyles()}>
-                    {step.from.token.displayName}
-                  </Typography>
-                </FromToken>
-              </LeftSection>
-              <RightSection>
-                <SwapperContainer>
-                  <SwapperImage state={step.state}>
-                    <Image size={15} type="circular" src={step.swapper.image} />
-                    {step.state && (
-                      <IconHighlight type={step.state}>
-                        {step.state === 'error' ? (
-                          <ErrorIcon size={6} color="error" />
-                        ) : (
-                          <WarningIcon size={6} color="warning" />
-                        )}
-                      </IconHighlight>
-                    )}
-                  </SwapperImage>
-                  <Typography size="xsmall" variant="body" align="center">
-                    {step.swapper.displayName}
-                  </Typography>
-                </SwapperContainer>
-                <VerticalLine />
-              </RightSection>
-            </Step>
-          );
-        })}
-        <OutputSection>
-          <ChainToken
-            chainImage={steps[numberOfSteps - 1].to.chain.image}
-            tokenImage={steps[numberOfSteps - 1].to.token.image}
-            size="medium"
-          />
-          <div>
-            <div>
-              <Tooltip
-                content={outputPrice.realValue}
-                container={tooltipContainer}
-                open={!outputPrice.realValue ? false : undefined}>
-                <Typography size="xmedium" variant="title">
-                  {outputPrice.value}
-                </Typography>
-                <Divider size={4} direction="horizontal" />
-                <Typography size="large" variant="body">
-                  {steps[numberOfSteps - 1].to.token.displayName}
-                </Typography>
-              </Tooltip>
-            </div>
-          </div>
-          <StyledPriceImpact
-            size="xsmall"
-            warningLevel={warningLevel}
-            outputUsdValue={outputPrice.usdValue}
-            realOutputUsdValue={outputPrice.realUsdValue}
-            percentageChange={percentageChange}
-            tooltipProps={{
-              container: tooltipContainer,
-            }}
-          />
-        </OutputSection>
-      </Steps>
-    </RouteContainer>
-  );
-}

package/src/components/ExpandedRoute/index.ts

@@ -1 +0,0 @@
-export { ExpandedRoute } from './ExpandedRoute';