Merge pull request #27 from olliethedev/feat/blog-plugin

Feat/blog plugin

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.23",
+  "version": "1.2.0",
   "private": true,
   "workspaces": [
     "./packages/*"

packages/amplify-graphql-amplifiers-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-amplifiers-core",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "description": "Amplify GraphQL @createModel transformer. This directive is intended to be used for creating a new model once a Cognito Event is fired.",
   "keywords": [
     "aws",

packages/amplify-graphql-create-model-transformer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-create-model-transformer",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "description": "Amplify GraphQL @createModel transformer. This directive is intended to be used for creating a new model once a Cognito Event is fired.",
   "keywords": [
     "aws",

packages/amplify-graphql-process-image-transformer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-process-image-transformer",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "description": "This directive allows you to process images.",
   "keywords": [
     "aws",

packages/amplify-graphql-send-email-transformer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-send-email-transformer",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "description": "Amplify GraphQL @sendEmail transformer.",
   "keywords": [
     "aws",

packages/amplify-util-blog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-util-blog",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "description": "Amplify Util Blog is a utility plugin for the Amplify CLI that helps you add blog functionality to your Amplify project.",
   "keywords": [
     "aws",

packages/amplify-util-blog/ui-components/blog/NewPostLayout.tsx

@@ -1,28 +1,32 @@
 /* eslint-disable */
 
 import React from "react";
-import { Flex, Heading } from "@aws-amplify/ui-react";
+import { Button, Flex, Heading } from "@aws-amplify/ui-react";
 import { PostCreateFormInputValues } from "./base/PostCreateForm";
 import { default as PostCreateForm } from "./base/PostCreateForm";
 import { default as TagCreateForm } from "./base/TagCreateForm";
+import { useModal } from "./base/useModal";
 
 interface CreatePostLayoutProps {
   onSuccess: (fields: PostCreateFormInputValues) => void;
 }
 
 const NewPostLayout = ({ onSuccess }: CreatePostLayoutProps) => {
+  const { Modal, toggleModal } = useModal();
   return (
     <>
-      <Flex direction="column" gap="2rem" alignItems="center" width="100%">
-        <Heading level={2}>Create a New Tag</Heading>
-        <TagCreateForm
-          overrides={{
-            TagCreateForm: {
-              width: "100%",
-            },
-          }}
-        />
+      <Flex
+        direction="column"
+        marginTop="2rem"
+        marginBottom="2rem"
+        alignItems="center"
+        width="100%"
+      >
         <Heading level={2}>Create a New Post</Heading>
+
+        <Flex width="100%" paddingLeft="20px" paddingRight="20px">
+          <Button onClick={toggleModal}>Create a New Tag</Button>
+        </Flex>
         <PostCreateForm
           overrides={{
             PostCreateForm: {
@@ -32,6 +36,9 @@ const NewPostLayout = ({ onSuccess }: CreatePostLayoutProps) => {
           onSuccess={onSuccess}
         />
       </Flex>
+      <Modal title="Create a New Tag">
+        <TagCreateForm onSuccess={() => toggleModal()} />
+      </Modal>
     </>
   );
 };

packages/amplify-util-blog/ui-components/blog/UpdatePostLayout.tsx

@@ -1,32 +1,35 @@
 /* eslint-disable */
 
 import React from "react";
-import { Flex, Heading } from "@aws-amplify/ui-react";
+import { Button, Flex, Heading } from "@aws-amplify/ui-react";
 
 import { default as PostUpdateForm } from "./base/PostUpdateForm";
 import { default as TagCreateForm } from "./base/TagCreateForm";
 import { PostUpdateFormInputValues } from "./base/PostUpdateForm";
 import { Post } from "./../../models";
+import { useModal } from "./base/useModal";
 
 interface UpdatePostLayoutProps {
   post: Post;
   onSuccess: (fields: PostUpdateFormInputValues) => void;
 }
 
 const UpdatePostLayout = ({ post, onSuccess }: UpdatePostLayoutProps) => {
-
+  const { Modal, toggleModal } = useModal();
   return (
     <>
-      <Flex direction="column" gap="2rem" alignItems="center" width="100%">
-        <Heading level={2}>Create a New Tag</Heading>
-        <TagCreateForm
-          overrides={{
-            TagCreateForm: {
-              width: "100%",
-            },
-          }}
-        />
+      <Flex
+        direction="column"
+        marginTop="2rem"
+        marginBottom="2rem"
+        alignItems="center"
+        width="100%"
+      >
         <Heading level={2}>Update Post</Heading>
+
+        <Flex width="100%" paddingLeft="20px" paddingRight="20px">
+          <Button onClick={toggleModal}>Create a New Tag</Button>
+        </Flex>
         <PostUpdateForm
           overrides={{
             PostUpdateForm: {
@@ -37,6 +40,9 @@ const UpdatePostLayout = ({ post, onSuccess }: UpdatePostLayoutProps) => {
           post={post as Post}
         />
       </Flex>
+      <Modal title="Create a New Tag">
+        <TagCreateForm onSuccess={() => toggleModal()} />
+      </Modal>
     </>
   );
 };

packages/amplify-util-blog/ui-components/blog/base/Modal.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Button, Flex, Heading, View } from "@aws-amplify/ui-react";
+import { Close } from "../icons/Close";
+
+interface Props {
+  title?: string;
+  open?: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+const Modal = ({ title, open, onClose, children }: Props) => {
+  return (
+    <Flex
+      style={{
+        zIndex: 1000,
+      }}
+      height="100vh"
+      width="100vw"
+      backgroundColor="rgba(25,22,10, 0.3)"
+      position="fixed"
+      top="0"
+      bottom="0"
+      left="0"
+      right="0"
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+      overflow={{ base: "auto" }}
+      onClick={onClose}
+      display={open ? "flex" : "none"}
+    >
+      <View
+        backgroundColor="white"
+        borderRadius="20px"
+        minWidth="300px"
+        padding="20px 25px"
+        overflow="auto"
+        onClick={(e: any) => {
+          // e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        <Flex
+          justifyContent="space-between"
+          alignItems="center"
+          paddingBottom="1rem"
+        >
+          <Heading level={3}>{title}</Heading>
+          <Button onClick={onClose} borderRadius="20px" width="20px">
+            <Close />
+          </Button>
+        </Flex>
+        {children}
+      </View>
+    </Flex>
+  );
+};
+
+export default Modal;