@rango-dev/ui 0.15.1-next.1 → 0.15.1-next.3

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,64 @@
+import type { PropTypes } from './Popover.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { NotificationsIcon } from '../../icons';
+import { Button } from '../Button';
+import { AddWalletIcon } from '../Icon';
+import { List } from '../List';
+
+import { Popover } from './Popover';
+
+function PopoverContent() {
+  return (
+    <div style={{ width: '300px' }}>
+      <div>I'm a Popover</div>
+      <List
+        items={[
+          { id: 'one', title: 'one' },
+          { id: 'two', title: 'two' },
+          { id: 'three', title: 'three' },
+          { id: 'four', title: 'four' },
+        ]}
+      />
+    </div>
+  );
+}
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+  args: {
+    content: <PopoverContent />,
+    side: 'bottom',
+  },
+  argTypes: {
+    content: {
+      name: 'content',
+      control: { type: 'component' },
+      defaultValue: null,
+    },
+    side: {
+      name: 'side',
+      control: { type: 'select' },
+      options: ['top', 'right', 'bottom', 'left'],
+      defaultValue: 'bottom',
+    },
+  },
+} as Meta<typeof Popover>;
+
+export const Main = (props: PropTypes) => (
+  <div style={{ display: 'flex' }}>
+    <Popover {...props}>
+      <Button>
+        <AddWalletIcon size={24} />
+      </Button>
+    </Popover>
+    <Popover {...props}>
+      <Button>
+        <NotificationsIcon size={24} />
+      </Button>
+    </Popover>
+  </div>
+);

package/src/components/Popover/Popover.styles.ts

@@ -0,0 +1,15 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+
+import { styled } from '../../theme';
+
+export const PopoverContainer = styled(RadixPopover.Content, {
+  borderRadius: '$sm',
+  filter: 'drop-shadow(0px 5px 20px rgba(130, 130, 130, 0.20))',
+  backgroundColor: '$neutral100',
+});
+
+export const PopoverArrow = styled(RadixPopover.Arrow, {
+  fill: '$neutral100',
+  width: '$16',
+  height: '$8',
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,57 @@
+import type { ContentType, PropTypes, Ref } from './Popover.types';
+import type { PropsWithChildren } from 'react';
+
+import * as RadixPopover from '@radix-ui/react-popover';
+import React from 'react';
+
+import { PopoverArrow, PopoverContainer } from './Popover.styles';
+
+const DEFAULT_SIDE_OFFSET = 0;
+const DEFAULT_ALIGN_OFFSET = 0;
+
+export const PopoverContentComponent = (
+  props: PropsWithChildren<ContentType>,
+  forwardedRef: Ref
+) => {
+  const { container, children, ...rest } = props;
+  return (
+    <RadixPopover.Portal container={container}>
+      <PopoverContainer {...rest} ref={forwardedRef}>
+        {children}
+        <PopoverArrow />
+      </PopoverContainer>
+    </RadixPopover.Portal>
+  );
+};
+
+const PopoverContent = React.forwardRef(PopoverContentComponent);
+PopoverContent.displayName = 'PopoverContent';
+
+export function Popover(props: PropsWithChildren<PropTypes>) {
+  const {
+    children,
+    content,
+    side = 'bottom',
+    sideOffset = DEFAULT_SIDE_OFFSET,
+    alignOffset = DEFAULT_ALIGN_OFFSET,
+    align = 'center',
+    collisionBoundary = [],
+    collisionPadding = 0,
+    container = document.body,
+  } = props;
+  return (
+    <RadixPopover.Root>
+      <RadixPopover.Trigger asChild>{children}</RadixPopover.Trigger>
+      <PopoverContent
+        align={align}
+        alignOffset={alignOffset}
+        collisionBoundary={collisionBoundary}
+        collisionPadding={collisionPadding}
+        side={side}
+        sideOffset={sideOffset}
+        container={container}>
+        {content}
+      </PopoverContent>
+    </RadixPopover.Root>
+  );
+}

package/src/components/Popover/Popover.types.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export type Ref =
+  | ((instance: HTMLInputElement | null) => void)
+  | React.RefObject<HTMLInputElement>
+  | null
+  | undefined;
+
+type Side = 'top' | 'right' | 'bottom' | 'left';
+
+export interface ContentType {
+  side?: Side;
+  sideOffset?: number;
+  alignOffset?: number;
+  align?: 'center' | 'start' | 'end';
+  collisionBoundary?: Element | null | Array<Element | null>;
+  collisionPadding?: number | Partial<Record<Side, number>>;
+  container?: HTMLElement;
+}
+
+export type PropTypes = ContentType & {
+  content: ReactNode;
+};

package/src/components/Popover/index.ts

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

package/src/components/PriceImpact/PriceImpact.stories.tsx

@@ -0,0 +1,21 @@
+import type { PriceImpactProps } from './PriceImpact.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { PriceImpact } from './PriceImpact';
+
+const meta: Meta<typeof PriceImpact> = {
+  title: 'Components/Price Impact',
+  component: PriceImpact,
+  args: {
+    size: 'small',
+    outputUsdValue: '28,490',
+    percentageChange: '2.21',
+    warningLevel: 'low',
+  },
+};
+
+export default meta;
+
+export const Main = (args: PriceImpactProps) => <PriceImpact {...args} />;

package/src/components/PriceImpact/PriceImpact.styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/PriceImpact/PriceImpact.tsx

@@ -0,0 +1,48 @@
+import type { PriceImpactProps } from './PriceImpact.types';
+
+import React from 'react';
+
+import { Typography } from '..';
+
+import { Container } from './PriceImpact.styles';
+
+export function PriceImpact(props: PriceImpactProps) {
+  const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
+
+  let percentageChangeColor = '$neutral900';
+  if (!outputUsdValue || warningLevel === 'low') {
+    percentageChangeColor = '$warning500';
+  } else if (warningLevel === 'high') {
+    percentageChangeColor = '$error500';
+  }
+
+  return (
+    <Container>
+      {outputUsdValue && (
+        <Typography
+          size={size === 'small' ? 'small' : 'medium'}
+          variant="body"
+          color={size !== 'small' ? '$neutral800' : '$neutral900'}>
+          {`~$${outputUsdValue}`}
+        </Typography>
+      )}
+      {((outputUsdValue && percentageChange) || !outputUsdValue) && (
+        <Typography
+          size={size === 'small' ? 'small' : 'medium'}
+          variant="body"
+          ml={4}
+          color={percentageChangeColor}>
+          {outputUsdValue &&
+            percentageChange &&
+            `(${
+              percentageChange.includes('-')
+                ? percentageChange
+                : `-${percentageChange}`
+            }${percentageChange ? '%' : '-'})`}
+
+          {!outputUsdValue && error}
+        </Typography>
+      )}
+    </Container>
+  );
+}

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -0,0 +1,9 @@
+export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
+
+export type PriceImpactProps = {
+  size: 'small' | 'large';
+  outputUsdValue?: string;
+  error?: string;
+  percentageChange?: string | null;
+  warningLevel?: PriceImpactWarningLevel;
+};

package/src/components/PriceImpact/index.ts

@@ -0,0 +1,2 @@
+export { PriceImpact } from './PriceImpact';
+export type { PriceImpactWarningLevel } from './PriceImpact.types';

package/src/components/Radio/Radio.stories.tsx

@@ -1,28 +1,21 @@
+import type { PropTypes } from './Radio.types';
+import type { Meta } from '@storybook/react';
+
+import { Root as RadioRoot } from '@radix-ui/react-radio-group';
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { PropTypes, Radio } from './Radio';
+
+import { Radio } from './Radio';
 
 export default {
   title: 'Components/Radio',
   component: Radio,
   args: {
-    options: [
-      { value: 'one', label: 'One' },
-      { value: 'two', label: 'Two' },
-      { value: 'three', label: 'Three' },
-    ],
-    direction: 'horizontal',
-    defaultValue: 'one',
-  },
-  argTypes: {
-    options: {
-      defaultValue: [
-        { value: 'one', label: 'One' },
-        { value: 'two', label: 'Two' },
-        { value: 'three', label: 'Three' },
-      ],
-    },
+    value: 'test',
   },
 } as Meta<typeof Radio>;
 
-export const Main = (args: PropTypes) => <Radio {...args} />;
+export const Main = (args: PropTypes) => (
+  <RadioRoot>
+    <Radio {...args} />
+  </RadioRoot>
+);

package/src/components/Radio/Radio.styles.tsx

@@ -0,0 +1,38 @@
+import * as Radio from '@radix-ui/react-radio-group';
+
+import { styled } from '../../theme';
+
+export const StyledItem = styled(Radio.Item, {
+  padding: '0',
+  width: '16px',
+  height: '16px',
+  borderRadius: '100%',
+  cursor: 'pointer',
+  backgroundColor: 'transparent',
+  border: '1px solid $neutral800',
+
+  '&:hover': {
+    borderColor: '$secondary600',
+  },
+  '&[data-state="checked"]': {
+    backgroundColor: '$secondary600',
+    borderColor: '$secondary600',
+  },
+});
+
+export const StyledIndicator = styled(Radio.Indicator, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  '&::after': {
+    content: '',
+    display: 'block',
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    backgroundColor: '$background',
+  },
+});

package/src/components/Radio/Radio.tsx

@@ -1,100 +1,14 @@
-import React from 'react';
-import * as RadioGroup from '@radix-ui/react-radio-group';
-import { styled } from '../../theme';
-import { Typography } from '../Typography';
-import { CSSProperties } from '@stitches/react';
-
-const StyledRoot = styled(RadioGroup.Root, {
-  variants: {
-    direction: {
-      horizontal: {
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-      },
-      vertical: {
-        display: 'grid',
-        gridGap: '$24',
-      },
-    },
-  },
-});
-
-const ItemContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: '$8',
-});
-const StyledItem = styled(RadioGroup.Item, {
-  padding: '0',
-  width: '20px',
-  height: '20px',
-  borderRadius: '100%',
-  cursor: 'pointer',
-  backgroundColor: '$background',
-  border: '1px solid $neutral400',
-
-  '&:hover': {
-    borderColor: '$neutral600',
-  },
-});
+import type { PropTypes } from './Radio.types';
 
-const Container = styled('div', {
-  display: 'flex',
-});
-
-const StyledIndicator = styled(RadioGroup.Indicator, {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  '&::after': {
-    content: '',
-    display: 'block',
-    width: '10px',
-    height: '10px',
-    borderRadius: '50%',
-    backgroundColor: '$success',
-  },
-});
-
-const Label = styled('label', {
-  paddingLeft: '$8',
-  cursor: 'pointer',
-  color: '$foreground',
-});
+import React from 'react';
 
-export interface PropTypes {
-  options: { label: string; value: string }[];
-  value: string;
-  onChange: (value: string) => void;
-  direction?: 'vertical' | 'horizontal';
-  style?: CSSProperties;
-}
+import { StyledIndicator, StyledItem } from './Radio.styles';
 
 export function Radio(props: PropTypes) {
-  const { value, onChange, direction = 'vertical', style } = props;
+  const { value } = props;
   return (
-    <Container>
-      <StyledRoot
-        onValueChange={onChange}
-        value={value}
-        direction={direction}
-        style={style}
-      >
-        {props.options.map((option, index) => (
-          <ItemContainer key={index}>
-            <StyledItem value={option.value} id={option.value}>
-              <StyledIndicator />
-            </StyledItem>
-            <Label className="_text" htmlFor={option.value}>
-              <Typography variant="body2">{option.label}</Typography>
-            </Label>
-          </ItemContainer>
-        ))}
-      </StyledRoot>
-    </Container>
+    <StyledItem value={value} id={value}>
+      <StyledIndicator />
+    </StyledItem>
   );
 }

package/src/components/Radio/Radio.types.tsx

@@ -0,0 +1,3 @@
+export interface PropTypes {
+  value: string;
+}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,31 @@
+import type { PropTypes } from './RadioGroup.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { RadioGroup } from './RadioGroup';
+
+export default {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  args: {
+    options: [
+      { value: 'one', label: 'One' },
+      { value: 'two', label: 'Two' },
+      { value: 'three', label: 'Three' },
+    ],
+    direction: 'horizontal',
+    defaultValue: 'one',
+  },
+  argTypes: {
+    options: {
+      defaultValue: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+      ],
+    },
+  },
+} as Meta<typeof RadioGroup>;
+
+export const Main = (args: PropTypes) => <RadioGroup {...args} />;

package/src/components/RadioGroup/RadioGroup.styles.tsx

@@ -0,0 +1,38 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+
+import { styled } from '../../theme';
+
+export const RadioRoot = styled(RadioGroup.Root, {
+  variants: {
+    direction: {
+      horizontal: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      },
+      vertical: {
+        display: 'grid',
+        gridGap: '$24',
+      },
+    },
+  },
+});
+
+export const ItemContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: '$8',
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+});
+
+export const Label = styled('label', {
+  paddingLeft: '$8',
+  cursor: 'pointer',
+  color: '$foreground',
+  '& > span': {
+    display: 'block',
+  },
+});

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,37 @@
+import type { PropTypes } from './RadioGroup.types';
+
+import React from 'react';
+
+import { Radio } from '../Radio/Radio';
+import { Typography } from '../Typography';
+
+import {
+  Container,
+  ItemContainer,
+  Label,
+  RadioRoot,
+} from './RadioGroup.styles';
+
+export function RadioGroup(props: PropTypes) {
+  const { value, onChange, direction = 'vertical', style, options } = props;
+  return (
+    <Container>
+      <RadioRoot
+        onValueChange={onChange}
+        value={value}
+        direction={direction}
+        style={style}>
+        {options.map((option) => (
+          <ItemContainer key={option.value}>
+            <Radio value={option.value} />
+            <Label className="_text" htmlFor={option.value}>
+              <Typography variant="body" size="small">
+                {option.label}
+              </Typography>
+            </Label>
+          </ItemContainer>
+        ))}
+      </RadioRoot>
+    </Container>
+  );
+}

package/src/components/RadioGroup/RadioGroup.types.tsx

@@ -0,0 +1,13 @@
+import type { PropTypes as RadioType } from '../Radio/Radio.types';
+import type { CSSProperties } from '@stitches/react';
+
+export interface PropTypes {
+  options: {
+    label: string;
+    value: RadioType['value'];
+  }[];
+  value: RadioType['value'];
+  onChange: (value: string) => void;
+  direction?: 'vertical' | 'horizontal';
+  style?: CSSProperties;
+}

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export { RadioRoot } from './RadioGroup.styles';

package/src/components/RouteCost/RouteCost.styles.ts

@@ -0,0 +1,20 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  borderRadius: '$xs',
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+  paddingBottom: '$10',
+  '& .item': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .icon': {
+    width: '$16',
+    height: '$16',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/RouteCost/RouteCost.tsx

@@ -0,0 +1,43 @@
+import type { PropTypes } from './RouteCost.types';
+
+import React from 'react';
+
+import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Separator } from '../BestRoute/BestRoute.styles';
+import { Typography } from '../Typography';
+
+import { Container } from './RouteCost.styles';
+
+export function RouteCost(props: PropTypes) {
+  const { fee, time, steps } = props;
+  return (
+    <Container>
+      <div className="item">
+        <div className="icon">
+          <GasIcon size={12} color={'gray'} />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          ${fee}
+        </Typography>
+      </div>
+      <Separator />
+      <div className="item">
+        <div className="icon">
+          <TimeIcon size={12} color="gray" />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          {`${time} min`}
+        </Typography>
+      </div>
+      <Separator />
+      <div className="item">
+        <div className="icon">
+          <NumberIcon size={16} color="gray" />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          {steps}
+        </Typography>
+      </div>
+    </Container>
+  );
+}

package/src/components/RouteCost/RouteCost.types.ts

@@ -0,0 +1,5 @@
+export type PropTypes = {
+  fee: string;
+  time: string | number;
+  steps: number;
+};

package/src/components/RouteCost/index.ts

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