feat: base submit bounty modal

.gitignore

@@ -7,6 +7,7 @@ environments/.dev.preview-server.env
 
 # dependencies
 /node_modules
+/node_modules2
 /.pnp
 .pnp.js
 

package-lock.json

@@ -40,6 +40,7 @@
         "react": "^17.0.2",
         "react-confetti": "^6.0.1",
         "react-copy-to-clipboard": "^5.0.4",
+        "react-datepicker": "^4.7.0",
         "react-dom": "^17.0.2",
         "react-icons": "^4.3.1",
         "react-image-lightbox": "^5.1.4",
@@ -75,6 +76,7 @@
         "@types/lodash.throttle": "^4.1.6",
         "@types/marked": "^4.0.3",
         "@types/react-copy-to-clipboard": "^5.0.2",
+        "@types/react-datepicker": "^4.4.0",
         "autoprefixer": "^9.8.8",
         "gh-pages": "^3.2.3",
         "msw": "^0.39.1",
@@ -4789,7 +4791,6 @@
     "node_modules/@popperjs/core": {
       "version": "2.10.2",
       "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
-      "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -9786,6 +9787,31 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-datepicker": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.4.0.tgz",
+      "integrity": "sha512-wzmevaO51rLFwSZd5HSqBU0aAvZlRRkj6QhHqj0jfRDSKnN3y5IKXyhgxPS8R0LOWOtjdpirI1DBryjnIp/7gA==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.2",
+        "@types/react": "*",
+        "date-fns": "^2.0.1",
+        "react-popper": "^2.2.5"
+      }
+    },
+    "node_modules/@types/react-datepicker/node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "17.0.10",
       "integrity": "sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==",
@@ -52391,6 +52417,35 @@
         "react": "^15.3.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
+      "integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.24.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.12.0",
+        "react-popper": "^2.2.5"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17",
+        "react-dom": "^16.9.0 || ^17"
+      }
+    },
+    "node_modules/react-datepicker/node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -52712,8 +52767,7 @@
     "node_modules/react-fast-compare": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
-      "dev": true
     },
     "node_modules/react-helmet-async": {
       "version": "1.1.2",
@@ -52851,11 +52905,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz",
+      "integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x"
+      }
+    },
     "node_modules/react-popper": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
       "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
-      "dev": true,
       "dependencies": {
         "react-fast-compare": "^3.0.1",
         "warning": "^4.0.2"
@@ -64647,8 +64713,7 @@
     },
     "@popperjs/core": {
       "version": "2.10.2",
-      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
+      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ=="
-      "dev": true
     },
     "@prisma/client": {
       "version": "3.5.0",
@@ -68278,6 +68343,26 @@
         "@types/react": "*"
       }
     },
+    "@types/react-datepicker": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.4.0.tgz",
+      "integrity": "sha512-wzmevaO51rLFwSZd5HSqBU0aAvZlRRkj6QhHqj0jfRDSKnN3y5IKXyhgxPS8R0LOWOtjdpirI1DBryjnIp/7gA==",
+      "dev": true,
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "@types/react": "*",
+        "date-fns": "^2.0.1",
+        "react-popper": "^2.2.5"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "2.28.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+          "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+          "dev": true
+        }
+      }
+    },
     "@types/react-dom": {
       "version": "17.0.10",
       "integrity": "sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==",
@@ -101211,6 +101296,26 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-datepicker": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
+      "integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.24.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.12.0",
+        "react-popper": "^2.2.5"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "2.28.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+          "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+        }
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -101459,8 +101564,7 @@
     "react-fast-compare": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
-      "dev": true
     },
     "react-helmet-async": {
       "version": "1.1.2",
@@ -101563,11 +101667,16 @@
       "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.6.5.tgz",
       "integrity": "sha512-i5iuAm5XRT/h7uBL9/pGWeRsQXzqvjBrPVP1sobKgDKEvfZuKFpYp/alaQhTRM56Jtkb8jZpSqLn52Ku6jJbDg=="
     },
+    "react-onclickoutside": {
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz",
+      "integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
+      "requires": {}
+    },
     "react-popper": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
       "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
-      "dev": true,
       "requires": {
         "react-fast-compare": "^3.0.1",
         "warning": "^4.0.2"

package.json

@@ -35,6 +35,7 @@
     "react": "^17.0.2",
     "react-confetti": "^6.0.1",
     "react-copy-to-clipboard": "^5.0.4",
+    "react-datepicker": "^4.7.0",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-image-lightbox": "^5.1.4",
@@ -126,6 +127,7 @@
     "@types/lodash.throttle": "^4.1.6",
     "@types/marked": "^4.0.3",
     "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-datepicker": "^4.4.0",
     "autoprefixer": "^9.8.8",
     "gh-pages": "^3.2.3",
     "msw": "^0.39.1",

src/Components/Inputs/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import DatePicker from './DatePicker';
+
+export default {
+    title: 'Shared/DatePicker',
+    component: DatePicker,
+
+} as ComponentMeta<typeof DatePicker>;
+
+const Template: ComponentStory<typeof DatePicker> = (args) => <DatePicker {...args} />
+
+
+export const Default = Template.bind({});
+Default.args = {
+    value: new Date(),
+    classes: { containerClasses: "max-w-[360px] bg-white" }
+}
+
+
+

src/Components/Inputs/DatePicker/DatePicker.tsx

@@ -0,0 +1,38 @@
+import ReactDatePicker from "react-datepicker";
+import { MdCalendarToday } from "react-icons/md";
+import "react-datepicker/dist/react-datepicker.css";
+
+interface Props {
+    value?: Date,
+    onChange?: (newValue: Date | null) => void
+    classes?: {
+        containerClasses?: string,
+        inputClasses?: string
+    };
+    className?: string
+    innerClassname?: string
+}
+
+export default function DatePicker({ value = new Date(), onChange = () => { }, classes, className }: Props) {
+    return (
+        <div className={`relative border flex gap-10 rounded-8 text-gray-600  py-10 px-14
+         focus-within:outline-primary 
+         ${className} ${classes?.containerClasses}`}>
+            <MdCalendarToday className="flex-shrink-0 self-center" />
+            <ReactDatePicker
+                selected={value}
+                onChange={onChange}
+                className={`
+                    block
+                    w-full
+                    rounded-md
+                    border-gray-300 
+                    bg-transparent
+                    cursor-pointer
+                   focus-visible:outline-none
+                   text-gray-800
+                   ${classes?.inputClasses} `}
+            ></ReactDatePicker>
+        </div>
+    )
+}

src/features/Posts/pages/PostDetailsPage/Components/SubmitBountyPlanModal/SubmitBountyPlan.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import SubmitBountyPlanModal from './SubmitBountyPlanModal';
+
+import { ModalsDecorator } from 'src/utils/storybook/decorators';
+
+export default {
+    title: 'Posts/Post Details Page/Components/Submit Bounty Plan',
+    component: SubmitBountyPlanModal,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof SubmitBountyPlanModal>;
+
+const Template: ComponentStory<typeof SubmitBountyPlanModal> = (args) => <SubmitBountyPlanModal {...args} />;
+
+export const Default = Template.bind({});
+

src/features/Posts/pages/PostDetailsPage/Components/SubmitBountyPlanModal/SubmitBountyPlanModal.tsx

@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion'
+import { IoClose } from 'react-icons/io5'
+import DatePicker from 'src/Components/Inputs/DatePicker/DatePicker'
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
+
+export default function Login_SuccessCard({ onClose, direction, ...props }: ModalCard) {
+
+
+    return (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[774px] p-32 rounded-xl relative !bg-white"
+
+        >
+            <IoClose className='absolute text-body2 top-32 right-32 hover:cursor-pointer' onClick={onClose} />
+            <h2 className='text-h5 font-bolder'>Submit a plan</h2>
+            <p className="text-body4 mt-8">
+                Please provide an action plan & ask any initial questions you have for this ticket
+            </p>
+            <div className="input-wrapper mt-24 relative">
+                <textarea
+                    rows={6}
+                    className="input-field !p-20"
+                    placeholder='What steps will you take to complete this task? '
+                />
+            </div>
+            <div className="grid sm:grid-cols-2 gap-24 mt-16">
+                <div>
+                    <label className='text-body5 text-gray-600 font-medium' htmlFor="">First Draf</label>
+                    <DatePicker className='mt-8' />
+                </div>
+                <div>
+                    <label className='text-body5 text-gray-600 font-medium' htmlFor="">Completion Date</label>
+                    <DatePicker className='mt-8' />
+                </div>
+            </div>
+
+            <div>
+                <div className="mt-16">
+                    <input className="appearance-none h-16 w-16 border border-gray-300 rounded-sm bg-gray-200 checked:bg-primary-600 checked:border-primary-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" value="" id="flexCheckChecked" />
+                    <label className=" inline-block text-gray-800" htmlFor="flexCheckChecked">
+                        Checked checkbox
+                    </label>
+                </div>
+            </div>
+
+
+        </motion.div>
+    )
+}

src/index.css

@@ -17,7 +17,7 @@
   }
 
   .input-wrapper {
-    @apply w-full relative border border-gray-300 rounded-lg shadow-xs flex h-42 focus-within:outline-primary;
+    @apply w-full relative border border-gray-300 rounded-lg shadow-xs flex focus-within:outline-primary;
   }
 
   .input-field {
@@ -25,7 +25,7 @@
   }
 
   .input-icon {
-    @apply h-full text-primary-500 flex-shrink-0 w-42 px-12;
+    @apply h-full text-primary-500 flex-shrink-0 w-42 px-12 self-center;
   }
 
   .chip {
@@ -38,8 +38,6 @@
   .modal-card {
     @apply rounded-[40px] bg-gray-50 overflow-hidden w-full shadow-2xl z-10;
   }
-
-   
 }
 
 body {
@@ -47,7 +45,7 @@ body {
   /* background-color: #F8FAFC; */
 }
 
-.page-container{
+.page-container {
   width: 98%;
   margin: 0 auto;
   max-width: 1440px;

src/utils/storybook/decorators.tsx

@@ -18,11 +18,8 @@ import { ApolloProvider } from '@apollo/client';
 import { apolloClient } from '../apollo';
 
 
+// Enable the Mocks Service Worker
 // -------------------------------------------
-// -------------------------------------------
-
-console.log('HIIII ', process.env);
-
 
 if (process.env.STORYBOOK_ENABLE_MOCKS) {
     worker.start({

tailwind.config.js

@@ -97,5 +97,7 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
 };