Merge pull request #20 from vivid-planet/add-contacts-admin

COM-272: Add brevo contacts admin

demo/admin/crud-generator-config.ts

@@ -0,0 +1,2 @@
+import { CrudGeneratorConfig } from "@comet/cms-admin";
+export default [] satisfies CrudGeneratorConfig[];

demo/admin/package.json

@@ -2,6 +2,7 @@
     "name": "comet-brevo-module-demo-admin",
     "private": true,
     "scripts": {
+        "admin-generator": "rimraf 'src/*/generated' && comet-admin-generator generate crud-generator-config.ts",
         "postinstall": "cd server && npm install",
         "start": "npm run intl:compile && run-p gql:types generate-block-types && dotenv -c secrets -- cross-env BABEL_ENV=development webpack serve --config ./webpack.config.ts --mode development",
         "build": "npm run intl:compile && run-p gql:types generate-block-types && cross-env BABEL_ENV=production webpack --config ./webpack.config.ts --mode production --progress",
@@ -90,6 +91,7 @@
         "html-webpack-plugin": "^5.0.0",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.2.1",
+        "rimraf": "^3.0.0",
         "style-loader": "^3.0.0",
         "ts-node": "^10.0.0",
         "typescript": "^4.2.3",

demo/admin/src/Routes.tsx

@@ -1,5 +1,6 @@
 import { MasterLayout, RouteWithErrorBoundary } from "@comet/admin";
 import { Domain } from "@comet/admin-icons";
+import { createBrevoContactsPage } from "@comet/brevo-admin";
 import { ContentScopeIndicator, createRedirectsPage, DamPage, PagesPage, PublisherPage, SitePreview } from "@comet/cms-admin";
 import { pageTreeCategories, urlParamToCategory } from "@src/pageTree/pageTreeCategories";
 import * as React from "react";
@@ -16,6 +17,7 @@ import { Page } from "./documents/pages/Page";
 import { ProductsPage } from "./products/ProductsPage";
 
 const RedirectsPage = createRedirectsPage();
+const BrevoContactsPage = createBrevoContactsPage({ scopeParts: ["domain", "language"] });
 
 export const Routes: React.FC = () => {
     return (
@@ -62,6 +64,8 @@ export const Routes: React.FC = () => {
                                         }}
                                     />
 
+                                    <RouteWithErrorBoundary path={`${match.path}/newsletter/contacts`} component={BrevoContactsPage} />
+
                                     <RouteWithErrorBoundary path={`${match.path}/structured-content/products`} component={ProductsPage} />
                                     <RouteWithErrorBoundary path={`${match.path}/assets`} component={DamPage} />
 

demo/admin/src/common/MasterMenu.tsx

@@ -1,6 +1,5 @@
 import { Menu, MenuCollapsibleItem, MenuContext, MenuItemRouterLink, useWindowSize } from "@comet/admin";
-import { Assets, Dashboard, Data, PageTree, Wrench } from "@comet/admin-icons";
-import { BrevoContactsPage } from "@comet/brevo-admin";
+import { Assets, Dashboard, Data, Mail, PageTree, Wrench } from "@comet/admin-icons";
 import * as React from "react";
 import { useIntl } from "react-intl";
 import { useRouteMatch } from "react-router";
@@ -31,12 +30,17 @@ export const MasterMenu: React.FC = () => {
                 icon={<Dashboard />}
                 to={`${match.url}/dashboard`}
             />
-            <BrevoContactsPage />
             <MenuItemRouterLink
                 primary={intl.formatMessage({ id: "menu.pageTree", defaultMessage: "Page tree" })}
                 icon={<PageTree />}
                 to={`${match.url}/pages/pagetree/main-navigation`}
             />
+            <MenuCollapsibleItem primary={intl.formatMessage({ id: "menu.newsletter", defaultMessage: "Newsletter" })} icon={<Mail />}>
+                <MenuItemRouterLink
+                    primary={intl.formatMessage({ id: "menu.newsletter.contacts", defaultMessage: "Contacts" })}
+                    to={`${match.url}/newsletter/contacts`}
+                />
+            </MenuCollapsibleItem>
             <MenuCollapsibleItem primary={intl.formatMessage({ id: "menu.structuredContent", defaultMessage: "Structured content" })} icon={<Data />}>
                 <MenuItemRouterLink
                     primary={intl.formatMessage({ id: "menu.products", defaultMessage: "Products" })}

dev-pm.config.js

@@ -15,6 +15,11 @@ module.exports = {
             script: "pnpm --filter @comet/brevo-api run dev",
             group: ["api"],
         },
+        {
+            name: "api-codegen-schema",
+            script: "pnpm --filter @comet/brevo-api run generate-schema:watch",
+            group: ["api"],
+        },
         //group admin
         {
             name: "admin",

install.sh

@@ -19,6 +19,9 @@ nvm use
 npm i -g pnpm@8
 pnpm install
 
+# create admin symlinks
+ln -sf ../api/schema.gql ./packages/admin/schema.gql
+
 # create demo api symlinks
 ln -sf ../../.env ./demo/api/.env
 ln -sf ../../.env.local ./demo/api

packages/admin/.gitignore

@@ -1 +1,5 @@
-lib
+lib
+block-meta.json
+schema.gql
+src/**/*.generated.ts
+**/*.generated.ts

packages/admin/codegen.ts

@@ -0,0 +1,38 @@
+import { CodegenConfig } from "@graphql-codegen/cli";
+
+const config: CodegenConfig = {
+    schema: "schema.gql",
+    generates: {
+        "./src/graphql.generated.ts": {
+            plugins: ["typescript"],
+            config: {
+                avoidOptionals: {
+                    field: true,
+                },
+                enumsAsTypes: true,
+                namingConvention: "keep",
+                typesPrefix: "GQL",
+            },
+        },
+
+        "./src/": {
+            documents: ["./src/**/!(*.generated).{tsx,ts}"],
+            preset: "near-operation-file",
+            presetConfig: {
+                extension: ".generated.ts",
+                baseTypesPath: "graphql.generated.ts",
+            },
+            config: {
+                avoidOptionals: {
+                    field: true,
+                },
+                enumsAsTypes: true,
+                namingConvention: "keep",
+                typesPrefix: "GQL",
+            },
+            plugins: ["named-operations-object", "typescript-operations"],
+        },
+    },
+};
+
+export default config;

packages/admin/package.json

@@ -13,38 +13,84 @@
         "lib"
     ],
     "scripts": {
-        "build": "$npm_execpath run clean && run-p build:babel build:types",
+        "build": "$npm_execpath run clean && run-p generate-graphql-types && run-p build:babel build:types",
         "build:babel": "npx babel ./src -x \".ts,.tsx\" -d lib",
         "build:types": "tsc --project ./tsconfig.json --emitDeclarationOnly",
         "clean": "rimraf lib",
+        "generate-graphql-types": "graphql-codegen",
+        "generate-graphql-types:watch": "$npm_execpath generate-graphql-types --watch",
         "lint": "run-p lint:eslint lint:tsc",
         "lint:eslint": "eslint --max-warnings 0 src/ package.json",
         "lint:tsc": "tsc --noEmit",
-        "start": "run-p start:babel start:types",
+        "start": "run-p generate-graphql-types && run-p start:babel start:types",
         "start:babel": "npx babel ./src -x \".ts,.tsx\" -d lib -w",
         "start:types": "tsc --project ./tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput"
     },
-    "peerDependencies": {
-        "react": "^17.0",
-        "react-dom": "^17.0",
-        "react-intl": "^5.24.6"
-    },
     "dependencies": {},
     "devDependencies": {
+        "@apollo/client": "^3.2.5",
         "@babel/cli": "^7.17.6",
         "@babel/core": "^7.20.12",
+        "@comet/admin": "^5.3.0",
         "@comet/admin-babel-preset": "^5.3.0",
+        "@comet/admin-icons": "^5.3.0",
+        "@comet/cms-admin": "^5.3.0",
         "@comet/eslint-config": "^5.3.0",
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "@graphql-codegen/cli": "^2.0.0",
+        "@mui/icons-material": "^5.8.4",
+        "@mui/material": "^5.8.6",
+        "@mui/styles": "^5.8.6",
+        "@mui/system": "^5.8.6",
+        "@mui/x-data-grid": "^5.17.26",
         "@types/react": "^17.0",
         "@types/react-dom": "^17.0.0",
+        "axios": "^0.21.0",
+        "draft-js": "^0.11.0",
         "eslint": "^8.0.0",
+        "final-form": "^4.16.1",
+        "graphql": "^15.4.0",
+        "history": "^4.10.0",
         "prettier": "^2.0.0",
         "react": "^17.0",
+        "react-dnd": "^16.0.0",
+        "react-dnd-html5-backend": "^16.0.0",
         "react-dom": "^17.0",
+        "react-final-form": "^6.3.1",
         "react-intl": "^5.24.6",
+        "react-router": "^5.1.2",
+        "react-router-dom": "^5.1.2",
         "rimraf": "^3.0.2",
         "typescript": "^4.0.0"
     },
+
+    "peerDependencies": {
+        "@apollo/client": "^3.2.5",
+        "@comet/admin": "^5.3.0",
+        "@comet/admin-icons": "^5.3.0",
+        "@comet/cms-admin": "^5.3.0",
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "@mui/icons-material": "^5.8.4",
+        "@mui/material": "^5.8.6",
+        "@mui/styles": "^5.8.6",
+        "@mui/system": "^5.8.6",
+        "@mui/x-data-grid": "^5.17.26",
+        "axios": "^0.21.0",
+        "draft-js": "^0.11.0",
+        "final-form": "^4.16.1",
+        "graphql": "^15.4.0",
+        "history": "^4.10.0",
+        "react": "^17.0",
+        "react-dnd": "^16.0.0",
+        "react-dnd-html5-backend": "^16.0.0",
+        "react-dom": "^17.0",
+        "react-final-form": "^6.3.1",
+        "react-intl": "^5.24.6",
+        "react-router": "^5.1.2",
+        "react-router-dom": "^5.1.2"
+    },
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"