@rango-dev/ui 0.1.14-next.10 → 0.1.14-next.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.14-next.10",
+  "version": "0.1.14-next.12",
   "license": "MIT",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -13,8 +13,8 @@
     "bundle": "esbuild src/index.ts --bundle --minify --keep-names --sourcemap --outdir=dist --platform=node --format=esm --packages=external",
     "build": "yarn type-checking && yarn bundle",
     "type-checking": "tsc --declaration --emitDeclarationOnly",
-    "storybook": "start-storybook -p 3000",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 3000",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "@rango-dev/queue-manager-rango-preset": "*",
@@ -22,12 +22,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
     "@size-limit/preset-small-lib": "^8.1.0",
-    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addons": "^6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@storybook/addon-links": "^7.0.9",
+    "@storybook/addons": "^7.0.9",
+    "@storybook/react": "^7.0.9",
+    "@storybook/react-webpack5": "^7.0.9",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
@@ -39,6 +43,7 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "size-limit": "^8.1.0",
+    "storybook": "^7.0.9",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.1",
     "typescript": "^4.8.4"

package/src/components/Alert/Alert.stories.tsx

@@ -1,22 +1,35 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
 import { Alert } from '.';
 import { PropTypes } from './Alert';
+import { Meta } from '@storybook/react';
+import { Typography } from '../Typography';
 
 export default {
-  title: 'Alert',
+  title: 'Components/Alert',
   component: Alert,
+  args: {
+    type: 'success',
+    title: 'Alert Title',
+    footer: <Typography variant='body1'>It's a Alert!</Typography>
+  },
   argTypes: {
     type: {
+      name: 'type',
       defaultValue: 'success',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'warning', 'error'],
+      },
     },
+
     title: {
+      name: 'title',
       defaultValue: 'Alert Title',
-    },
-    description: {
-      defaultValue: 'Alert description ...',
+      control: {
+        type: 'text',
+      },
     },
   },
-} as ComponentMeta<typeof Alert>;
+} as Meta<typeof Alert>;
 
 export const Main = (args: PropTypes) => <Alert {...args} />;

package/src/components/Alert/Alert.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactNode } from 'react';
 import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
 import { Typography } from '../Typography';
 import { styled } from '../../theme';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 
 const MainContainer = styled('div', {
   width: '100%',
@@ -72,7 +72,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
               {type === 'success' && <CheckCircleIcon color={type} size={24} />}
               {type === 'warning' && <WarningIcon color={type} size={24} />}
               {type === 'error' && <InfoCircleIcon color={type} size={24} />}
-              <Spacer size={4} />
+              <Divider size={4} direction='horizontal' />
             </div>
           </>
         )}
@@ -90,7 +90,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
               <Typography className="title" variant="title" color={type}>
                 {title}
               </Typography>
-              {!!children && <Spacer size={4} direction="vertical" />}
+              {!!children && <Divider size={4} />}
             </>
           )}
           {children}

package/src/components/BestRoute/BestRoute.stories.tsx

@@ -1,27 +1,37 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
 import { BestRoute, PropTypes } from './BestRoute';
 import { bestRoute, bestRouteExample2, bestRouteExample3 } from './mock';
+import { Meta } from '@storybook/react';
 
 export default {
   title: 'Components/Best Route',
   component: BestRoute,
-} as ComponentMeta<typeof BestRoute>;
+} as Meta<typeof BestRoute>;
 
 export const Main = (props: PropTypes) => (
   <div style={{ maxWidth: 512 }}>
-    <BestRoute {...props} data={bestRoute} />
+    <BestRoute {...props} data={bestRoute} totalFee="0.28" totalTime="10:45" />
   </div>
 );
 export const With4Step = (props: PropTypes) => (
   <div style={{ maxWidth: 512 }}>
-    <BestRoute {...props} data={bestRouteExample2} />
+    <BestRoute
+      {...props}
+      data={bestRouteExample2}
+      totalFee="0.28"
+      totalTime="10:45"
+    />
   </div>
 );
 
 export const With2Step = (props: PropTypes) => (
   <div style={{ maxWidth: 512 }}>
-    <BestRoute {...props} data={bestRouteExample3} />
+    <BestRoute
+      {...props}
+      data={bestRouteExample3}
+      totalFee="0.28"
+      totalTime="10:45"
+    />
   </div>
 );
 export const WithError = (props: PropTypes) => (

package/src/components/BestRoute/mock.ts

@@ -174,7 +174,7 @@ export const bestRouteExample2: BestRouteType = {
         warnings: [],
         swapperId: 'ParaSwap Bsc',
         swapperType: 'DEX',
-        swapperLogo: 'https://api.rango.exchange/swappers/para-swap.png',
+        swapperLogo: 'https://api.rango.exchange/swappers/paraswap.svg',
 
         from: {
           symbol: 'USDC',

package/src/components/BlockchainsList/BlockchainsList.stories.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { BlockchainsList, PropTypes } from './BlockchainsList';
 import { blockchainMeta } from './mockData';
 
 export default {
-  title: 'Blockchains List',
+  title: 'Components/Blockchains List',
   component: BlockchainsList,
+  args: {
+    searchedText: '',
+  },
   argTypes: {
     searchedText: {
       type: 'string',
       defaultValue: '',
+      control: {
+        type: 'text',
+      },
     },
   },
-} as ComponentMeta<typeof BlockchainsList>;
+} as Meta<typeof BlockchainsList>;
 
 export const Main = (args: PropTypes) => {
   return (