@rango-dev/ui 0.1.15 → 0.1.16-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +0 -4
- package/dist/components/Alert/Alert.d.ts +7 -7
- package/dist/components/Alert/Alert.stories.d.ts +7 -5
- package/dist/components/Alert/LoadingFailedAlert.d.ts +2 -2
- package/dist/components/Alert/NotFoundAlert.d.ts +7 -7
- package/dist/components/Alert/index.d.ts +2 -2
- package/dist/components/BestRoute/BestRoute.d.ts +15 -12
- package/dist/components/BestRoute/BestRoute.stories.d.ts +10 -8
- package/dist/components/BestRoute/index.d.ts +1 -1
- package/dist/components/BestRoute/mock.d.ts +4 -4
- package/dist/components/BlockchainsList/BlockchainsList.d.ts +10 -10
- package/dist/components/BlockchainsList/BlockchainsList.stories.d.ts +5 -5
- package/dist/components/BlockchainsList/index.d.ts +1 -1
- package/dist/components/BlockchainsList/mockData.d.ts +2 -2
- package/dist/components/Button/Button.d.ts +17 -17
- package/dist/components/Button/Button.stories.d.ts +10 -8
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +11 -11
- package/dist/components/Checkbox/Checkbox.stories.d.ts +7 -5
- package/dist/components/Checkbox/index.d.ts +1 -1
- package/dist/components/Chip/Chip.d.ts +12 -12
- package/dist/components/Chip/Chip.stories.d.ts +7 -7
- package/dist/components/Chip/index.d.ts +1 -1
- package/dist/components/ColorPicker/ColorPicker.d.ts +9 -9
- package/dist/components/ColorPicker/ColorPicker.stories.d.ts +5 -5
- package/dist/components/ColorPicker/index.d.ts +1 -1
- package/dist/components/Divider/Divider.d.ts +6 -6
- package/dist/components/Divider/index.d.ts +1 -1
- package/dist/components/Drawer/Drawer.d.ts +13 -13
- package/dist/components/Drawer/Drawer.stories.d.ts +8 -8
- package/dist/components/Drawer/index.d.ts +1 -1
- package/dist/components/Header/Header.d.ts +9 -9
- package/dist/components/Header/index.d.ts +1 -1
- package/dist/components/Icon/AddCircleIcon.d.ts +3 -3
- package/dist/components/Icon/AddIcon.d.ts +3 -3
- package/dist/components/Icon/AddWalletIcon.d.ts +3 -3
- package/dist/components/Icon/AngleDownIcon.d.ts +3 -3
- package/dist/components/Icon/AngleLeftIcon.d.ts +3 -3
- package/dist/components/Icon/AngleRightIcon.d.ts +3 -3
- package/dist/components/Icon/AngleUpIcon.d.ts +3 -3
- package/dist/components/Icon/ArrowRightIcon.d.ts +3 -3
- package/dist/components/Icon/BagIcon.d.ts +3 -3
- package/dist/components/Icon/BanIcon.d.ts +3 -3
- package/dist/components/Icon/CheckCircleIcon.d.ts +3 -3
- package/dist/components/Icon/CheckIcon.d.ts +3 -3
- package/dist/components/Icon/CheckSquareIcon.d.ts +3 -3
- package/dist/components/Icon/CheckWalletIcon.d.ts +3 -3
- package/dist/components/Icon/ChevronRightIcon.d.ts +3 -3
- package/dist/components/Icon/CloseIcon.d.ts +112 -1
- package/dist/components/Icon/CopyIcon.d.ts +3 -3
- package/dist/components/Icon/DeleteCircleIcon.d.ts +3 -3
- package/dist/components/Icon/DeleteWalletIcon.d.ts +3 -3
- package/dist/components/Icon/DisconnectIcon.d.ts +3 -3
- package/dist/components/Icon/DownloadIcon.d.ts +3 -3
- package/dist/components/Icon/GasIcon.d.ts +3 -3
- package/dist/components/Icon/HistoryIcon.d.ts +3 -3
- package/dist/components/Icon/HorizontalSwapIcon.d.ts +3 -3
- package/dist/components/Icon/Icons.stories.d.ts +5 -5
- package/dist/components/Icon/InfoCircleIcon.d.ts +3 -3
- package/dist/components/Icon/MinusCircleIcon.d.ts +3 -3
- package/dist/components/Icon/RetryIcon.d.ts +3 -3
- package/dist/components/Icon/RetryLeftIcon.d.ts +3 -3
- package/dist/components/Icon/RetryRightIcon.d.ts +3 -3
- package/dist/components/Icon/SearchIcon.d.ts +3 -3
- package/dist/components/Icon/SearchMinusIcon.d.ts +3 -3
- package/dist/components/Icon/SettingIcon.d.ts +3 -3
- package/dist/components/Icon/SignatureIcon.d.ts +3 -3
- package/dist/components/Icon/SwapWalletIcon.d.ts +3 -3
- package/dist/components/Icon/TimeIcon.d.ts +3 -3
- package/dist/components/Icon/TrashIcon.d.ts +3 -3
- package/dist/components/Icon/TryAgainIcon.d.ts +3 -3
- package/dist/components/Icon/VerticalSwapIcon.d.ts +3 -3
- package/dist/components/Icon/WalletIconIcon.d.ts +3 -3
- package/dist/components/Icon/WarningIcon.d.ts +3 -3
- package/dist/components/Icon/common.d.ts +228 -2
- package/dist/components/Icon/index.d.ts +40 -40
- package/dist/components/Icon/types.d.ts +7 -7
- package/dist/components/LiquiditySourceList/LiquiditySource.stories.d.ts +5 -5
- package/dist/components/LiquiditySourceList/LiquiditySourceList.d.ts +11 -11
- package/dist/components/LiquiditySourceList/index.d.ts +1 -1
- package/dist/components/LiquiditySourceList/mockData.d.ts +2 -2
- package/dist/components/Modal/Modal.d.ts +11 -11
- package/dist/components/Modal/Modal.stories.d.ts +5 -5
- package/dist/components/Modal/index.d.ts +1 -1
- package/dist/components/Radio/Radio.d.ts +13 -13
- package/dist/components/Radio/Radio.stories.d.ts +5 -5
- package/dist/components/Radio/index.d.ts +1 -1
- package/dist/components/SecondaryPage/SecondaryPage.d.ts +16 -16
- package/dist/components/SecondaryPage/SecondaryPage.stories.d.ts +5 -2
- package/dist/components/SecondaryPage/index.d.ts +1 -1
- package/dist/components/SelectableWalletList/SelectableWalletList.d.ts +7 -7
- package/dist/components/SelectableWalletList/SelectableWalletList.stories.d.ts +7 -5
- package/dist/components/SelectableWalletList/index.d.ts +1 -1
- package/dist/components/SelectableWalletList/mock.d.ts +2 -2
- package/dist/components/Skeleton/Skeleton.d.ts +6 -6
- package/dist/components/Skeleton/Skeleton.stories.d.ts +5 -5
- package/dist/components/Skeleton/index.d.ts +1 -1
- package/dist/components/Spinner/Spinner.d.ts +6 -6
- package/dist/components/Spinner/Spinner.stories.d.ts +5 -5
- package/dist/components/Spinner/index.d.ts +1 -1
- package/dist/components/StatusDrawer/StatusDrawer.d.ts +11 -11
- package/dist/components/StatusDrawer/StatusDrawer.stories.d.ts +5 -5
- package/dist/components/StatusDrawer/index.d.ts +1 -1
- package/dist/components/StepDetail/StepDetail.d.ts +12 -12
- package/dist/components/StepDetail/StepDetail.stories.d.ts +7 -5
- package/dist/components/StepDetail/index.d.ts +1 -1
- package/dist/components/SwapContainer/SwapContainer.d.ts +7 -7
- package/dist/components/SwapContainer/index.d.ts +1 -1
- package/dist/components/SwapDetail/SwapDetail.d.ts +8 -8
- package/dist/components/SwapDetail/SwapDetail.stories.d.ts +7 -5
- package/dist/components/SwapDetail/Token.d.ts +17 -17
- package/dist/components/SwapDetail/index.d.ts +1 -1
- package/dist/components/SwapDetail/mock.d.ts +2 -2
- package/dist/components/Switch/Switch.d.ts +6 -6
- package/dist/components/Switch/Switch.stories.d.ts +5 -5
- package/dist/components/Switch/index.d.ts +1 -1
- package/dist/components/TextField/TextField.d.ts +10 -10
- package/dist/components/TextField/TextField.stories.d.ts +7 -7
- package/dist/components/TextField/index.d.ts +1 -1
- package/dist/components/TokenList/TokenItem.d.ts +11 -11
- package/dist/components/TokenList/TokenList.d.ts +17 -17
- package/dist/components/TokenList/TokenList.stories.d.ts +5 -5
- package/dist/components/TokenList/index.d.ts +1 -1
- package/dist/components/TokenList/mockData.d.ts +2 -2
- package/dist/components/Tooltip/Tooltip.d.ts +7 -7
- package/dist/components/Tooltip/Tooltip.stories.d.ts +7 -5
- package/dist/components/Tooltip/index.d.ts +1 -1
- package/dist/components/Typography/Typography.d.ts +18 -18
- package/dist/components/Typography/Typography.stories.d.ts +7 -5
- package/dist/components/Typography/index.d.ts +1 -1
- package/dist/components/VirtualizedList/VirtualizedList.d.ts +17 -17
- package/dist/components/Wallet/State.d.ts +7 -7
- package/dist/components/Wallet/Wallet.d.ts +7 -7
- package/dist/components/Wallet/Wallet.stories.d.ts +7 -5
- package/dist/components/Wallet/index.d.ts +1 -1
- package/dist/components/common/FilledCircle.d.ts +111 -1
- package/dist/components/common/Image.d.ts +6 -6
- package/dist/components/common/index.d.ts +2 -2
- package/dist/components/index.d.ts +25 -31
- package/dist/{components → containers}/BlockchainSelector/BlockchainSelector.d.ts +17 -17
- package/dist/{components → containers}/BlockchainSelector/BlockchainSelector.stories.d.ts +5 -5
- package/dist/containers/ConfirmSwap/ConfirmSwap.d.ts +22 -22
- package/dist/containers/ConfirmSwap/ConfirmSwap.stories.d.ts +8 -6
- package/dist/containers/ConfirmSwap/index.d.ts +1 -1
- package/dist/containers/ConfirmSwap/mock.d.ts +5 -5
- package/dist/{components → containers}/ConnectWalletsModal/ConnectWallets.stories.d.ts +5 -5
- package/dist/{components → containers}/ConnectWalletsModal/ConnectWalletsModal.d.ts +11 -11
- package/dist/{components → containers}/ConnectWalletsModal/mockData.d.ts +2 -2
- package/dist/containers/History/History.d.ts +6 -6
- package/dist/containers/History/History.stories.d.ts +9 -5
- package/dist/containers/History/SwapsGroup.d.ts +13 -13
- package/dist/containers/History/index.d.ts +3 -2
- package/dist/containers/History/mock.d.ts +2 -2
- package/dist/containers/History/types.d.ts +39 -39
- package/dist/{components → containers}/LiquiditySourcesSelector/LiquiditySourcesSelector.d.ts +13 -13
- package/dist/{components → containers}/LiquiditySourcesSelector/LiquiditySourcesSelector.stories.d.ts +5 -5
- package/dist/{components → containers}/Settings/Settings.d.ts +24 -24
- package/dist/{components → containers}/Settings/Settings.stories.d.ts +5 -5
- package/dist/containers/SwapHistory/SwapHistory.d.ts +1128 -24
- package/dist/containers/SwapHistory/SwapHistory.stories.d.ts +14 -5
- package/dist/containers/SwapHistory/SwapMessages.d.ts +17 -17
- package/dist/containers/SwapHistory/index.d.ts +1 -1
- package/dist/containers/SwapHistory/mock.d.ts +2 -2
- package/dist/containers/TokenSelector/TokenSelector.d.ts +124 -0
- package/dist/{components → containers}/TokenSelector/TokenSelector.stories.d.ts +5 -5
- package/dist/containers/index.d.ts +8 -3
- package/dist/helper/index.d.ts +6 -6
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/useCopyToClipboard.d.ts +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/index.js +20 -8
- package/dist/index.js.map +7 -0
- package/dist/theme.d.ts +928 -8
- package/dist/types/index.d.ts +2 -2
- package/dist/types/meta.d.ts +23 -23
- package/dist/types/swaps.d.ts +29 -29
- package/dist/types/wallet.d.ts +23 -23
- package/package.json +17 -37
- package/src/components/Alert/Alert.stories.tsx +19 -6
- package/src/components/Alert/Alert.tsx +3 -3
- package/src/components/BestRoute/BestRoute.stories.tsx +15 -5
- package/src/components/BestRoute/mock.ts +1 -1
- package/src/components/BlockchainsList/BlockchainsList.stories.tsx +9 -3
- package/src/components/BlockchainsList/mockData.ts +603 -108
- package/src/components/Button/Button.stories.tsx +8 -3
- package/src/components/Checkbox/Checkbox.stories.tsx +6 -2
- package/src/components/Chip/Chip.stories.tsx +23 -7
- package/src/components/ColorPicker/ColorPicker.stories.tsx +6 -3
- package/src/components/Divider/Divider.tsx +113 -11
- package/src/components/Drawer/Drawer.stories.tsx +8 -11
- package/src/components/Icon/Icons.stories.tsx +8 -4
- package/src/components/LiquiditySourceList/LiquiditySource.stories.tsx +6 -3
- package/src/components/LiquiditySourceList/LiquiditySourceList.tsx +3 -3
- package/src/components/Modal/Modal.stories.tsx +9 -10
- package/src/components/Radio/Radio.stories.tsx +12 -7
- package/src/components/SecondaryPage/SecondaryPage.stories.tsx +12 -3
- package/src/components/SelectableWalletList/SelectableWalletList.stories.tsx +2 -2
- package/src/components/SelectableWalletList/mock.ts +2 -2
- package/src/components/Skeleton/Skeleton.stories.tsx +6 -2
- package/src/components/Spinner/Spinner.stories.tsx +6 -2
- package/src/components/StatusDrawer/StatusDrawer.stories.tsx +7 -2
- package/src/components/StatusDrawer/StatusDrawer.tsx +2 -2
- package/src/components/StepDetail/StepDetail.stories.tsx +9 -2
- package/src/components/SwapDetail/SwapDetail.stories.tsx +5 -2
- package/src/components/SwapDetail/SwapDetail.tsx +3 -3
- package/src/components/SwapDetail/Token.tsx +4 -4
- package/src/components/Switch/Switch.stories.tsx +2 -2
- package/src/components/TextField/TextField.stories.tsx +3 -2
- package/src/components/TokenList/TokenList.stories.tsx +3 -3
- package/src/components/Tooltip/Tooltip.stories.tsx +7 -2
- package/src/components/Typography/Typography.stories.tsx +2 -2
- package/src/components/Wallet/Wallet.stories.tsx +7 -13
- package/src/components/index.ts +0 -6
- package/src/containers/BlockchainSelector/BlockchainSelector.stories.tsx +41 -0
- package/src/{components → containers}/BlockchainSelector/BlockchainSelector.tsx +5 -5
- package/{dist/components/BlockchainSelector/index.d.ts → src/containers/BlockchainSelector/index.ts} +1 -1
- package/src/containers/ConfirmSwap/ConfirmSwap.stories.tsx +223 -10
- package/src/containers/ConfirmSwap/ConfirmSwap.tsx +21 -12
- package/src/containers/ConfirmSwap/mock.ts +12 -15
- package/src/containers/ConnectWalletsModal/ConnectWallets.stories.tsx +24 -0
- package/src/{components → containers}/ConnectWalletsModal/ConnectWalletsModal.tsx +3 -3
- package/{dist/components/ConnectWalletsModal/index.d.ts → src/containers/ConnectWalletsModal/index.ts} +1 -1
- package/src/{components → containers}/ConnectWalletsModal/mockData.ts +17 -17
- package/src/containers/History/History.stories.tsx +2 -2
- package/src/containers/History/History.tsx +1 -1
- package/src/containers/History/index.ts +2 -1
- package/src/containers/History/mock.ts +3 -3
- package/src/containers/History/types.tsx +1 -1
- package/src/{components → containers}/LiquiditySourcesSelector/LiquiditySourcesSelector.stories.tsx +7 -4
- package/src/{components → containers}/LiquiditySourcesSelector/LiquiditySourcesSelector.tsx +2 -3
- package/{dist/components/LiquiditySourcesSelector/index.d.ts → src/containers/LiquiditySourcesSelector/index.ts} +1 -1
- package/src/containers/Settings/Settings.stories.tsx +27 -0
- package/src/{components → containers}/Settings/Settings.tsx +11 -8
- package/{dist/components/Settings/index.d.ts → src/containers/Settings/index.ts} +1 -1
- package/src/containers/SwapHistory/SwapHistory.stories.tsx +3 -3
- package/src/containers/SwapHistory/SwapHistory.tsx +4 -5
- package/src/containers/SwapHistory/mock.ts +2 -2
- package/src/{components → containers}/TokenSelector/TokenSelector.stories.tsx +7 -8
- package/src/{components → containers}/TokenSelector/TokenSelector.tsx +7 -6
- package/{dist/components/TokenSelector/index.d.ts → src/containers/TokenSelector/index.ts} +1 -1
- package/src/containers/index.ts +5 -0
- package/src/theme.ts +14 -22
- package/src/types/index.ts +1 -1
- package/dist/components/Spacer/Spacer.d.ts +0 -6
- package/dist/components/Spacer/Spacer.stories.d.ts +0 -5
- package/dist/components/Spacer/index.d.ts +0 -1
- package/dist/components/SwapContainer/SwapContainer.stories.d.ts +0 -5
- package/dist/components/TokenSelector/TokenSelector.d.ts +0 -14
- package/dist/ui.cjs.development.js +0 -5181
- package/dist/ui.cjs.development.js.map +0 -1
- package/dist/ui.cjs.production.min.js +0 -2
- package/dist/ui.cjs.production.min.js.map +0 -1
- package/dist/ui.esm.js +0 -5091
- package/dist/ui.esm.js.map +0 -1
- package/src/components/BlockchainSelector/BlockchainSelector.stories.tsx +0 -25
- package/src/components/ConnectWalletsModal/ConnectWallets.stories.tsx +0 -13
- package/src/components/Settings/Settings.stories.tsx +0 -34
- package/src/components/Spacer/Spacer.stories.tsx +0 -31
- package/src/components/Spacer/Spacer.tsx +0 -128
- package/src/components/Spacer/index.ts +0 -1
- package/src/components/SwapContainer/SwapContainer.stories.tsx +0 -13
- /package/{src/components/BlockchainSelector/index.ts → dist/containers/BlockchainSelector/index.d.ts} +0 -0
- /package/{src/components/ConnectWalletsModal/index.ts → dist/containers/ConnectWalletsModal/index.d.ts} +0 -0
- /package/{src/components/LiquiditySourcesSelector/index.ts → dist/containers/LiquiditySourcesSelector/index.d.ts} +0 -0
- /package/{src/components/Settings/index.ts → dist/containers/Settings/index.d.ts} +0 -0
- /package/{src/components/TokenSelector/index.ts → dist/containers/TokenSelector/index.d.ts} +0 -0
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentMeta } from '@storybook/react';
|
|
3
|
-
import { BlockchainSelector, PropTypes } from './BlockchainSelector';
|
|
4
|
-
import { blockchainMeta } from '../BlockchainsList/mockData';
|
|
5
|
-
import { SwapContainer } from '../SwapContainer/SwapContainer';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Blockchain Selector',
|
|
9
|
-
component: BlockchainSelector,
|
|
10
|
-
argTypes: {
|
|
11
|
-
type: {
|
|
12
|
-
defaultValue: 'Source',
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
} as ComponentMeta<typeof BlockchainSelector>;
|
|
16
|
-
|
|
17
|
-
export const Main = (args: PropTypes) => (
|
|
18
|
-
<SwapContainer>
|
|
19
|
-
<BlockchainSelector
|
|
20
|
-
{...args}
|
|
21
|
-
list={blockchainMeta}
|
|
22
|
-
selected={blockchainMeta[0]}
|
|
23
|
-
/>
|
|
24
|
-
</SwapContainer>
|
|
25
|
-
);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentMeta } from '@storybook/react';
|
|
3
|
-
import { ConnectWalletsModal, PropTypes } from './ConnectWalletsModal';
|
|
4
|
-
import { walletsInfo } from './mockData';
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Connect Wallets Modal',
|
|
8
|
-
component: ConnectWalletsModal,
|
|
9
|
-
} as ComponentMeta<typeof ConnectWalletsModal>;
|
|
10
|
-
|
|
11
|
-
export const Main = (args: PropTypes) => (
|
|
12
|
-
<ConnectWalletsModal {...args} list={walletsInfo} />
|
|
13
|
-
);
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentMeta } from '@storybook/react';
|
|
3
|
-
import { Settings, PropTypes } from './Settings';
|
|
4
|
-
import { SwapContainer } from '../SwapContainer/SwapContainer';
|
|
5
|
-
import { liquiditySources } from '../LiquiditySourceList/mockData';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Settings',
|
|
9
|
-
component: Settings,
|
|
10
|
-
argTypes: {
|
|
11
|
-
slippages: {
|
|
12
|
-
defaultValue: [0.5, 1, 3, 5, 8, 13, 20],
|
|
13
|
-
},
|
|
14
|
-
selectedSlippage: { defaultValue: 3 },
|
|
15
|
-
liquiditySources: {
|
|
16
|
-
defaultValue: liquiditySources,
|
|
17
|
-
},
|
|
18
|
-
selectedLiquiditySources: {
|
|
19
|
-
defaultValue: liquiditySources.slice(0, 5),
|
|
20
|
-
},
|
|
21
|
-
minSlippage: {
|
|
22
|
-
defaultValue: 1,
|
|
23
|
-
},
|
|
24
|
-
maxSlippage: {
|
|
25
|
-
defaultValue: 10,
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
} as ComponentMeta<typeof Settings>;
|
|
29
|
-
|
|
30
|
-
export const Main = (args: PropTypes) => (
|
|
31
|
-
<SwapContainer>
|
|
32
|
-
<Settings {...args} />
|
|
33
|
-
</SwapContainer>
|
|
34
|
-
);
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { ComponentMeta } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Typography } from '../Typography';
|
|
4
|
-
import { Spacer, PropTypes } from './Spacer';
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Components/Spacer',
|
|
8
|
-
component: Spacer,
|
|
9
|
-
argTypes: {
|
|
10
|
-
size: {
|
|
11
|
-
name: 'size',
|
|
12
|
-
control: { type: 'select' },
|
|
13
|
-
options: [12, 16, 18, 20],
|
|
14
|
-
defaultValue: 12,
|
|
15
|
-
},
|
|
16
|
-
direction: {
|
|
17
|
-
name: 'direction',
|
|
18
|
-
control: { type: 'select' },
|
|
19
|
-
options: ['vertical', 'horizontal'],
|
|
20
|
-
defaultValue: 'horizontal',
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
} as ComponentMeta<typeof Spacer>;
|
|
24
|
-
|
|
25
|
-
export const Main = (props: PropTypes) => (
|
|
26
|
-
<div style={{ display: props.direction === 'horizontal' ? 'flex' : 'block' }}>
|
|
27
|
-
<Typography variant="body1">spacer </Typography>
|
|
28
|
-
<Spacer {...props} />
|
|
29
|
-
<Typography variant="body1">spacer</Typography>
|
|
30
|
-
</div>
|
|
31
|
-
);
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { styled } from '../../theme';
|
|
3
|
-
|
|
4
|
-
const SpacerContainer = styled('div', {
|
|
5
|
-
variants: {
|
|
6
|
-
size: {
|
|
7
|
-
4: {},
|
|
8
|
-
8: {},
|
|
9
|
-
12: {},
|
|
10
|
-
16: {},
|
|
11
|
-
18: {},
|
|
12
|
-
20: {},
|
|
13
|
-
24: {},
|
|
14
|
-
},
|
|
15
|
-
direction: {
|
|
16
|
-
vertical: {},
|
|
17
|
-
horizontal: {},
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
compoundVariants: [
|
|
21
|
-
{
|
|
22
|
-
size: 4,
|
|
23
|
-
direction: 'horizontal',
|
|
24
|
-
css: {
|
|
25
|
-
width: '$4',
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
size: 4,
|
|
30
|
-
direction: 'vertical',
|
|
31
|
-
css: {
|
|
32
|
-
height: '$4',
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
size: 8,
|
|
37
|
-
direction: 'horizontal',
|
|
38
|
-
css: {
|
|
39
|
-
width: '$8',
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
size: 8,
|
|
44
|
-
direction: 'vertical',
|
|
45
|
-
css: {
|
|
46
|
-
height: '$8',
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
size: 12,
|
|
51
|
-
direction: 'horizontal',
|
|
52
|
-
css: {
|
|
53
|
-
width: '$12',
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
size: 12,
|
|
58
|
-
direction: 'vertical',
|
|
59
|
-
css: {
|
|
60
|
-
height: '$12',
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
size: 16,
|
|
65
|
-
direction: 'horizontal',
|
|
66
|
-
css: {
|
|
67
|
-
width: '$16',
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
size: 16,
|
|
72
|
-
direction: 'vertical',
|
|
73
|
-
css: {
|
|
74
|
-
height: '$16',
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
size: 18,
|
|
79
|
-
direction: 'horizontal',
|
|
80
|
-
css: {
|
|
81
|
-
width: '$18',
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
size: 18,
|
|
86
|
-
direction: 'vertical',
|
|
87
|
-
css: {
|
|
88
|
-
height: '$18',
|
|
89
|
-
},
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
size: 20,
|
|
93
|
-
direction: 'horizontal',
|
|
94
|
-
css: {
|
|
95
|
-
width: '$20',
|
|
96
|
-
},
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
size: 20,
|
|
100
|
-
direction: 'vertical',
|
|
101
|
-
css: {
|
|
102
|
-
height: '$20',
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
size: 24,
|
|
107
|
-
direction: 'horizontal',
|
|
108
|
-
css: {
|
|
109
|
-
width: '$24',
|
|
110
|
-
},
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
size: 24,
|
|
114
|
-
direction: 'vertical',
|
|
115
|
-
css: {
|
|
116
|
-
height: '$24',
|
|
117
|
-
},
|
|
118
|
-
},
|
|
119
|
-
],
|
|
120
|
-
});
|
|
121
|
-
export interface PropTypes {
|
|
122
|
-
size?: 4 | 8 | 12 | 16 | 18 | 20 | 24;
|
|
123
|
-
direction?: 'vertical' | 'horizontal';
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
export function Spacer({ size = 12, direction = 'horizontal' }: PropTypes) {
|
|
127
|
-
return <SpacerContainer size={size} direction={direction} />;
|
|
128
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Spacer } from './Spacer';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentMeta } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
import { SwapContainer, PropTypes } from './SwapContainer';
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Components/Swap Box',
|
|
8
|
-
component: SwapContainer,
|
|
9
|
-
} as ComponentMeta<typeof SwapContainer>;
|
|
10
|
-
|
|
11
|
-
export const Main = (args: PropTypes) => (
|
|
12
|
-
<SwapContainer {...args}></SwapContainer>
|
|
13
|
-
);
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|