@rango-dev/ui 0.1.10-next.102

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { Button, PropTypes } from './Button';
+import { AddWalletIcon } from '../Icon';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      name: 'variant',
+      control: { type: 'select' },
+      options: ['contained', 'outlined', 'ghost'],
+      defaultValue: 'contained',
+    },
+    type: {
+      name: 'type',
+      control: { type: 'select' },
+      options: ['primary', 'error', 'warning', 'success'],
+    },
+    align: {
+      name: 'align',
+      control: { type: 'select' },
+      options: ['start', 'grow'],
+    },
+    size: {
+      name: 'size',
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'large', 'compact'],
+      defaultValue: 'medium',
+    },
+    disabled: {
+      name: 'disabled',
+      control: { type: 'boolean' },
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+export const Main = (props: PropTypes) => (
+  <Button {...props}>I'm a button</Button>
+);
+
+export const WithPrefix = (args: PropTypes) => (
+  <Button prefix={<AddWalletIcon size={24} color="white" />} {...args}>
+    I'm a button
+  </Button>
+);
+
+export const WithSuffix = (args: PropTypes) => (
+  <Button suffix={<AddWalletIcon size={24} color="white" />} {...args}>
+    I'm a button
+  </Button>
+);
+export const IconButton = (args: PropTypes) => (
+  <div>
+    <Button suffix={<AddWalletIcon size={24} color="white" />} {...args} />
+  </div>
+);

package/src/components/Button/Button.tsx

@@ -0,0 +1,421 @@
+import { CSSProperties } from '@stitches/react';
+import React, { PropsWithChildren, HTMLAttributes } from 'react';
+import { darkTheme, styled } from '../../theme';
+import { Spinner } from '../Spinner';
+import { Typography } from '../Typography';
+
+const ButtonContainer = styled('button', {
+  borderRadius: '$5',
+  fontSize: '$16',
+  fontWeight: '$400',
+  cursor: 'pointer',
+  padding: '0 $12',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'all 0.35s',
+  border: '0',
+
+  '&:active': {
+    transform: 'scale(0.95)',
+  },
+
+  variants: {
+    align: {
+      start: {
+        display: 'flex',
+        width: '100%',
+      },
+      grow: {
+        display: 'flex',
+        width: '100%',
+      },
+    },
+    size: {
+      compact: {},
+      free: {},
+      small: {
+        height: '$32',
+      },
+      medium: {
+        height: '$40',
+      },
+      large: {
+        height: '$48',
+      },
+    },
+    variant: {
+      contained: {
+        backgroundColor: '$neutrals300',
+        color: '$foreground',
+        border: 0,
+        '&:hover': {
+          backgroundColor: '$neutrals200',
+        },
+        '&:disabled': {
+          background: '$neutrals400',
+        },
+        '&:disabled:hover': {
+          background: '$neutrals400',
+          transform: 'unset',
+        },
+      },
+      outlined: {
+        backgroundColor: '$background',
+        border: 1,
+        borderStyle: 'solid',
+        borderColor: '$neutrals400',
+        color: '$foreground',
+        '&:hover': {
+          borderColor: '$neutrals600',
+        },
+        '&:disabled': {
+          borderColor: '$neutrals300',
+          color: '$neutrals400',
+        },
+      },
+      ghost: {
+        color: '$foreground',
+        '&:hover': {
+          backgroundColor: '$neutrals200',
+        },
+        '&:disabled': {
+          color: '$neutrals400 !important',
+        },
+        background: 'transparent',
+        border: 0,
+
+        [`& ${Typography}`]: {
+          color: 'inherit',
+        },
+      },
+    },
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+    },
+    loading: {
+      true: {},
+    },
+    type: {
+      primary: {},
+      error: {},
+      warning: {},
+      success: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'primary',
+      variant: 'contained',
+      css: {
+        background: '$primary',
+        color: '$white',
+        '&:hover': {
+          background: '$primary700',
+        },
+        '&:visited': {
+          background: '$primary900',
+        },
+        '&:focus': {
+          background: '$primary600',
+        },
+      },
+    },
+    {
+      type: 'primary',
+      variant: 'outlined',
+      css: {
+        color: '$primary !important',
+        borderColor: '$primary',
+        '&:hover': {
+          color: '$primary700 !important',
+          borderColor: '$primary700 !important',
+        },
+        '&:visited': {
+          color: '$primary900 !important',
+          borderColor: '$primary900 !important',
+        },
+        '&:focus': {
+          color: '$primary600 !important',
+          borderColor: '$primary600 !important',
+        },
+      },
+    },
+    {
+      type: 'primary',
+      variant: 'ghost',
+      css: {
+        color: '$primary',
+        '&:hover': {
+          color: '$primary700',
+        },
+        '&:visited': { color: '$primary900' },
+        '&:focus': {
+          color: '$primary600',
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'contained',
+      css: {
+        background: '$error',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color !important',
+        '&:hover': {
+          background: '$error300',
+        },
+        '&:visited': {
+          background: '$error700',
+        },
+        '&:focus': {
+          background: '$error700',
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'outlined',
+      css: {
+        color: '$error !important',
+        borderColor: '$error',
+        '&:hover': {
+          color: '$error300 !important',
+          borderColor: '$error300 !important',
+        },
+        '&:visited': {
+          color: '$error700 !important',
+          borderColor: '$error700 !important',
+        },
+        '&:focus': {
+          color: '$error700 !important',
+          borderColor: '$error700 !important',
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'ghost',
+      css: {
+        color: '$error',
+        '&:hover': {
+          color: '$error300',
+        },
+        '&:visited': {
+          color: '$error700',
+        },
+        '&:focus': {
+          color: '$error700',
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'contained',
+      css: {
+        background: '$warning',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color !important',
+        '&:hover': {
+          background: '$warning300',
+        },
+        '&:visited': {
+          background: '$warning700',
+        },
+        '&:focus': {
+          background: '$warning700',
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'outlined',
+      css: {
+        color: '$warning !important',
+        borderColor: '$warning',
+        '&:hover': {
+          color: '$warning300 !important',
+          borderColor: '$warning300 !important',
+        },
+        '&:visited': {
+          color: '$warning700 !important',
+          borderColor: '$warning700 !important',
+        },
+        '&:focus': {
+          color: '$warning700 !important',
+          borderColor: '$warning700 !important',
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'ghost',
+      css: {
+        color: '$warning',
+        '&:hover': {
+          color: '$warning300',
+        },
+        '&:visited': {
+          color: '$warning700',
+        },
+        '&:focus': {
+          color: '$warning700',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'contained',
+      css: {
+        background: '$success',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color !important',
+        '&:hover': {
+          background: '$success300',
+        },
+        '&:visited': {
+          background: '$success700',
+        },
+        '&:focus': {
+          background: '$success700',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'outlined',
+      css: {
+        color: '$success !important',
+        borderColor: '$success',
+        '&:hover': {
+          color: '$success300 !important',
+          borderColor: '$success300 !important',
+        },
+        '&:visited': {
+          color: '$success700 !important',
+          borderColor: '$success700 !important',
+        },
+        '&:focus': {
+          color: '$success700 !important',
+          borderColor: '$success700 !important',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'ghost',
+      css: {
+        color: '$success',
+        '&:hover': {
+          color: '$success300',
+        },
+        '&:visited': {
+          color: '$success700',
+        },
+        '&:focus': {
+          color: '$success700',
+        },
+      },
+    },
+    {
+      size: 'compact',
+      css: {
+        padding: '$2 $4',
+        fontSize: '$12',
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'medium',
+    variant: 'contained',
+  },
+});
+
+const Content = styled('div', {
+  flex: 1,
+  variants: {
+    align: {
+      start: {
+        textAlign: 'left',
+      },
+      grow: {
+        textAlign: 'center',
+      },
+    },
+    ml: {
+      true: {
+        marginLeft: '$8',
+      },
+    },
+    mr: {
+      true: {
+        marginRight: '$8',
+      },
+    },
+    flexContent: {
+      true: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+  },
+});
+
+export interface PropTypes
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'> {
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  size?: 'small' | 'medium' | 'large' | 'compact' | 'free';
+  variant?: 'contained' | 'outlined' | 'ghost';
+  type?: 'primary' | 'error' | 'warning' | 'success';
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  align?: 'start' | 'grow';
+  loading?: boolean;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  style?: CSSProperties;
+  flexContent?: boolean;
+}
+
+export function Button({
+  children,
+  loading,
+  disabled,
+  prefix,
+  suffix,
+  align,
+  flexContent,
+  ...props
+}: PropsWithChildren<PropTypes>) {
+  const isDisabled = loading || disabled;
+  return (
+    <ButtonContainer disabled={isDisabled} {...props} align={align}>
+      {prefix}
+      {children && (
+        <Content
+          align={align}
+          ml={!!prefix}
+          mr={!!suffix && !loading}
+          flexContent={flexContent}
+          className="_text"
+        >
+          {children}
+        </Content>
+      )}
+      {loading && <Spinner size={16} color={props.type} />}
+      {suffix}
+    </ButtonContainer>
+  );
+}

package/src/components/Button/index.ts

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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Checkbox, PropTypes } from './Checkbox';
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    label: {
+      name: 'label',
+      control: { type: 'text' },
+      defaultValue: 'I am a checkbox',
+    },
+    defaultChecked: {
+      name: 'defaultChecked',
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+  },
+} as ComponentMeta<typeof Checkbox>;
+
+export const Main = (props: PropTypes) => <Checkbox {...props} id="test" />;

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,56 @@
+import React, { PropsWithChildren } from 'react';
+import { styled } from '../../theme';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { CheckIcon } from '../Icon';
+
+const CheckboxContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const CheckboxRoot = styled(RadixCheckbox.Root, {
+  borderRadius: '5px',
+  width: 20,
+  padding: 0,
+  height: 20,
+  border: '1px solid $foreground',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginRight: '$2',
+  backgroundColor: '$neutral-100',
+});
+const Label = styled('label', {
+  color: '$foreground',
+  fontSize: '$m',
+  marginLeft: '$8',
+});
+
+export interface PropTypes {
+  id: string;
+  defaultChecked?: boolean;
+  label: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  name?: string;
+}
+
+export function Checkbox({
+  label,
+  id,
+  ...props
+}: PropsWithChildren<PropTypes>) {
+  return (
+    <CheckboxContainer>
+      <CheckboxRoot id={id} {...props}>
+        <RadixCheckbox.Indicator>
+          <CheckIcon size={20} />
+        </RadixCheckbox.Indicator>
+      </CheckboxRoot>
+      <Label className="_text" htmlFor={id}>
+        {label}
+      </Label>
+    </CheckboxContainer>
+  );
+}

package/src/components/Checkbox/index.ts

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

package/src/components/Chip/Chip.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { Chip, PropTypes } from './Chip';
+
+export default {
+  title: 'Chip',
+  component: Chip,
+} as ComponentMeta<typeof Chip>;
+
+export const Main = (args: PropTypes) => <Chip {...args} label="chip" />;
+
+export const ChipWithPrefix = (args: PropTypes) => (
+  <Chip
+    {...args}
+    label="chip"
+    prefix={
+      <img
+        src="	https://api.rango.exchange/blockchains/binance.svg"
+        style={{ width: '20px' }}
+      />
+    }
+  />
+);
+
+export const ChipWithSuffix = (args: PropTypes) => (
+  <Chip
+    {...args}
+    label="chip"
+    suffix={
+      <img
+        src="	https://api.rango.exchange/blockchains/binance.svg"
+        style={{ width: '20px' }}
+      />
+    }
+  />
+);

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,48 @@
+import { CSSProperties } from '@stitches/react';
+import React from 'react';
+import { styled } from '../../theme';
+
+const ChipCointainer = styled('div', {
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '$5',
+  padding: '$4 $8',
+  height: '32',
+  fontSize: '$14',
+  cursor: 'pointer',
+  transition: 'all 0.35s',
+  color: '$foreground',
+
+  '&:hover': {
+    backgroundColor: '$success700',
+    color: '$background',
+  },
+  variants: {
+    selected: {
+      true: { backgroundColor: '$success', color: '$background' },
+      false: { backgroundColor: '$background' },
+    },
+  },
+});
+
+export interface PropTypes {
+  label: string;
+  selected?: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  className?: string;
+  style?: CSSProperties;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
+
+export function Chip(props: PropTypes) {
+  const { label, selected, prefix, suffix, onClick, style } = props;
+  return (
+    <ChipCointainer selected={selected} onClick={onClick} style={style}>
+      {prefix || null}
+      {label}
+      {suffix || null}
+    </ChipCointainer>
+  );
+}

package/src/components/Chip/index.ts

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

package/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { ColorPicker, PropTypes } from './ColorPicker';
+
+export default {
+  title: 'Components/ColorPicker',
+  component: ColorPicker,
+  argTypes: {
+    place: {
+      name: 'place',
+      control: { type: 'select' },
+      options: ['top', 'bottom', 'left', 'right'],
+      defaultValue: 'top',
+    },
+  },
+} as ComponentMeta<typeof ColorPicker>;
+
+export const Main = (args: PropTypes) => {
+  const [color, setColor] = useState<string>('#5FA425');
+  return (
+    <div
+      style={{
+        height: 600,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <ColorPicker
+        {...args}
+        color={color}
+        onChangeColor={(color) => setColor(color.hex)}
+      />
+    </div>
+  );
+};