Merge branch 'master' of https://github.com/web3ui/web3uikit into fea…

…t/SelectValue
web3ui · Feb 26, 2022 · d92745f · d92745f
2 parents 3342f5c + c75c7e9
commit d92745f
Show file tree

Hide file tree

Showing 19 changed files with 383 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     },
     "dependencies": {
         "@walletconnect/web3-provider": "^1.7.1",
+        "@web3auth/web3auth": "^0.3.2",
         "moralis": "^1.3.2",
         "react-blockies": "^1.4.1",
         "react-moralis": "^1.3.1",

diff --git a/src/components/Blockie/Blockie.stories.tsx b/src/components/Blockie/Blockie.stories.tsx
@@ -8,6 +8,13 @@ export default {
     title: '1.Web3/Blockie',
     component: Blockie,
     decorators: [moralisContext],
+    parameters: {
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+    },
 } as ComponentMeta<typeof Blockie>;
 
 const Template: ComponentStory<typeof Blockie> = (args: BlockieProps) => (

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -13,7 +13,7 @@ const Button: React.FC<ButtonProps> = ({
     isFullWidth = false,
     isLoading = false,
     loadingText = 'Loading...',
-    onClick = (e) => e.preventDefault(),
+    onClick = (e) => e.preventDefault,
     size = 'regular',
     text = 'click',
     theme,

diff --git a/src/components/ConnectButton/ConnectButton.stories.tsx b/src/components/ConnectButton/ConnectButton.stories.tsx
@@ -7,6 +7,13 @@ export default {
     title: '1.Web3/ConnectButton',
     component: ConnectButton,
     decorators: [moralisContext],
+    parameters: {
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+    },
 } as ComponentMeta<typeof ConnectButton>;
 
 const Template: ComponentStory<typeof ConnectButton> = (args) => (

diff --git a/src/components/CreditCard/CreditCard.stories.tsx b/src/components/CreditCard/CreditCard.stories.tsx
@@ -11,25 +11,103 @@ const Template: ComponentStory<typeof CreditCard> = (args) => {
     return <CreditCard {...args} />;
 };
 
-export const Mastercard = Template.bind({});
-Mastercard.args = {
+export const Visa = Template.bind({});
+Visa.args = {
     id: 'marty-mc-fly-cc-id',
     isExpired: false,
     name: 'Marty McFly',
-    type: 'visa',
+    brand: 'visa',
     lastDigits: '1177',
     expiresAt: {
         month: '04',
         year: '22',
     },
 };
 
-export const MastercardExpired = Template.bind({});
-MastercardExpired.args = {
+export const VisaExpired = Template.bind({});
+VisaExpired.args = {
     id: 'marty-mc-fly-cc-id',
     isExpired: true,
     name: 'Marty McFly',
-    type: 'mastercard',
+    brand: 'visa',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '11',
+        year: '21',
+    },
+};
+
+export const MasterCard = Template.bind({});
+MasterCard.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: false,
+    name: 'Marty McFly',
+    brand: 'mastercard',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '11',
+        year: '24',
+    },
+};
+
+export const MasterCardExpired = Template.bind({});
+MasterCardExpired.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: true,
+    name: 'Marty McFly',
+    brand: 'mastercard',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '11',
+        year: '21',
+    },
+};
+
+export const Amex = Template.bind({});
+Amex.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: false,
+    name: 'Marty McFly',
+    brand: 'amex',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '11',
+        year: '24',
+    },
+};
+
+export const AmexExpired = Template.bind({});
+AmexExpired.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: true,
+    name: 'Marty McFly',
+    brand: 'amex',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '11',
+        year: '21',
+    },
+};
+
+export const Diners = Template.bind({});
+Diners.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: false,
+    name: 'Marty McFly',
+    brand: 'diners',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '11',
+        year: '24',
+    },
+};
+
+export const DinersExpired = Template.bind({});
+DinersExpired.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: true,
+    name: 'Marty McFly',
+    brand: 'diners',
     lastDigits: '1177',
     expiresAt: {
         month: '11',

diff --git a/src/components/CreditCard/CreditCard.styles.ts b/src/components/CreditCard/CreditCard.styles.ts
@@ -1,22 +1,28 @@
 import styled, { css } from 'styled-components';
 import resetCSS from '../../styles/reset';
 import fonts from '../../styles/fonts';
-import colors, { colorPercentage } from '../../styles/colors';
-import { CreditCardProps } from './types';
+import colors, { colorPercentage, gradientColors } from '../../styles/colors';
+import { creditCardBrands, CreditCardProps } from './types';
 
-type TStyleProps = Pick<CreditCardProps, 'isExpired' | 'pressed'>;
+type TStyleProps = Pick<CreditCardProps, 'isExpired' | 'pressed' | 'brand'>;
+
+const getBgGradient = (brand: creditCardBrands) => {
+    switch (brand) {
+        case 'amex':
+            return gradientColors.lightBlue;
+        case 'diners':
+            return gradientColors.purpleToPink;
+        case 'mastercard':
+            return gradientColors.blue;
+        case 'visa':
+            return gradientColors.goldShiny;
+    }
+};
 
 export const DivStyledCreditCard = styled.div<TStyleProps>`
     ${resetCSS};
     ${fonts.text};
-    background: linear-gradient(
-            113.54deg,
-            rgba(60, 87, 140, 0.5) 14.91%,
-            rgba(70, 86, 169, 0.5) 43.21%,
-            rgba(125, 150, 217, 0.345) 44.27%,
-            rgba(129, 161, 225, 0.185) 55.76%
-        ),
-        linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+    background: ${({ brand }) => getBgGradient(brand)};
     border: 2px solid ${colorPercentage(colors.white, 40)};
     border-radius: 16px;
     display: grid;
@@ -29,54 +35,8 @@ export const DivStyledCreditCard = styled.div<TStyleProps>`
         height: 10px;
     }
 
-    ${(p) => (p.isExpired ? expiredStyles : p.pressed ? pressedStyles : '')}
-
-    @keyframes hoverEffect {
-        from {
-            background: linear-gradient(
-                    113.54deg,
-                    rgba(60, 87, 140, 0.5) 18.91%,
-                    rgba(70, 86, 169, 0.5) 44.21%,
-                    rgba(125, 150, 217, 0.345) 48.27%,
-                    rgba(129, 161, 225, 0.185) 55.76%
-                ),
-                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
-        }
-        from {
-            background: linear-gradient(
-                    113.54deg,
-                    rgba(60, 87, 140, 0.5) 19.91%,
-                    rgba(70, 86, 169, 0.5) 45.21%,
-                    rgba(125, 150, 217, 0.345) 49.27%,
-                    rgba(129, 161, 225, 0.185) 55.76%
-                ),
-                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
-        }
-        to {
-            background: linear-gradient(
-                    113.54deg,
-                    rgba(60, 87, 140, 0.5) 20.91%,
-                    rgba(70, 86, 169, 0.5) 46.21%,
-                    rgba(125, 150, 217, 0.345) 50.27%,
-                    rgba(129, 161, 225, 0.185) 55.76%
-                ),
-                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
-        }
-    }
-
-    :hover {
-        animation-name: hoverEffect;
-        animation-duration: 40ms;
-        background: linear-gradient(
-                113.54deg,
-                rgba(60, 87, 140, 0.5) 16.91%,
-                rgba(70, 86, 169, 0.5) 45.21%,
-                rgba(125, 150, 217, 0.345) 52.27%,
-                rgba(129, 161, 225, 0.185) 55.76%
-            ),
-            linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
-        cursor: pointer;
-    }
+    ${({ isExpired, pressed }) =>
+        isExpired ? expiredStyles : pressed ? pressedStyles : ''}
 `;
 
 export const DivStyledFlex = styled.div`

diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx
@@ -18,14 +18,15 @@ const CreditCard: React.FC<CreditCardProps> = ({
     lastDigits,
     name,
     onRemove,
-    type,
+    brand,
 }: CreditCardProps) => {
     const [pressed, setPressed] = useState<boolean>(false);
 
     return (
         <DivStyledCreditCard
             isExpired={isExpired}
             onClick={() => setPressed(!pressed)}
+            brand={brand}
             pressed={pressed}
         >
             <DivStyledFlex>
@@ -35,15 +36,15 @@ const CreditCard: React.FC<CreditCardProps> = ({
                     items={['']}
                     onChange={() => setPressed(!pressed)}
                 />
-                <DivStyledRemove onClick={onRemove}></DivStyledRemove>
+                <DivStyledRemove onClick={onRemove} />
             </DivStyledFlex>
             <PStyledDigits>{`•••• ${lastDigits}`}</PStyledDigits>
             <DivStyledFlex>
                 <DivStyledFlexText>
                     <PStyledText>{name}</PStyledText>
                     <PStyledText>{`${expiresAt.month} / ${expiresAt.year}`}</PStyledText>
                 </DivStyledFlexText>
-                <Logo size="small" theme={type} />
+                <Logo size="small" theme={brand} />
             </DivStyledFlex>
         </DivStyledCreditCard>
     );

diff --git a/src/components/CreditCard/types.ts b/src/components/CreditCard/types.ts
@@ -5,7 +5,7 @@ export interface CreditCardProps {
     id?: string;
 
     /**
-     * set date of expiration MM/YY
+     * set date of expiration { month: 'MM', year: 'YY' }  MM/YY
      */
     expiresAt: {
         /**
@@ -46,5 +46,7 @@ export interface CreditCardProps {
     /**
      * set type
      */
-    type: 'mastercard' | 'visa';
+    brand: creditCardBrands;
 }
+
+export type creditCardBrands = 'mastercard' | 'visa' | 'amex' | 'diners';
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -92,3 +92,31 @@ DemoForm.args = {
         },
     ],
 };
+
+export const LoginForm = Template.bind({});
+LoginForm.args = {
+    title: 'Login',
+    buttonConfig: {
+        theme: 'primary',
+        text: 'Login',
+    },
+    data: [
+        {
+            name: 'Email',
+            type: 'email',
+            value: '',
+            validation: {
+                required: true,
+            },
+        },
+        {
+            name: 'Password',
+            type: 'password',
+            value: '',
+            validation: {
+                required: true,
+            },
+        },
+    ],
+    onSubmit: (e) => console.log(e),
+};
diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts
@@ -26,7 +26,7 @@ export interface FormProps {
      * when the form passes validation the data is returned
      * { id: string, data: [{inputName: string; inputResult: string[] | string;}]}
      */
-    onSubmit?: (data: FormDataReturned) => FormDataReturned;
+    onSubmit?: (data: FormDataReturned) => void;
 }
 
 export type FormDataReturned = {

diff --git a/src/components/Logo/Logo.stories.tsx b/src/components/Logo/Logo.stories.tsx
@@ -56,3 +56,27 @@ MastercardSmall.args = {
     theme: 'mastercard',
     size: 'small',
 };
+
+export const AmexRegular = Template.bind({});
+AmexRegular.args = {
+    theme: 'amex',
+    size: 'regular',
+};
+
+export const AmexSmall = Template.bind({});
+AmexSmall.args = {
+    theme: 'mastercard',
+    size: 'small',
+};
+
+export const DinersRegular = Template.bind({});
+DinersRegular.args = {
+    theme: 'diners',
+    size: 'regular',
+};
+
+export const DinersSmall = Template.bind({});
+DinersSmall.args = {
+    theme: 'mastercard',
+    size: 'small',
+};