feat(cms): add cms dashboard

Create CMS package and components package for the new dashboard

fix(auth): fix auth / docs tests to implement new auth package changes

fix(mail): fix mail package build

fix(cms): add @tensei/components as dependency to @tensei/cms

examples/blog/resources/Post.js

@@ -12,7 +12,6 @@ const {
     belongsTo,
     belongsToMany,
 } = require('@tensei/core')
-const { trix } = require('@tensei/trix')
 
 module.exports = resource('Post')
     .displayInNavigation()
@@ -31,7 +30,7 @@ module.exports = resource('Post')
                 textarea('Reason for publishing')
                     .default('A short description of why you published.')
                     .rules('required', 'max:50'),
-                trix('Post content').rules('required', 'min:12'),
+                // trix('Post content').rules('required', 'min:12'),
             ])
             .showOnTableRow(),
         action('Archive')
@@ -64,7 +63,7 @@ module.exports = resource('Post')
             .hideOnIndex(),
         text('Slug').rules('required', 'slug').unique(),
         text('Description').rules('required').hideOnIndex(),
-        trix('Content').rules('required', 'max:2000', 'min:12').hideOnIndex(),
+        // trix('Content').rules('required', 'max:2000', 'min:12').hideOnIndex(),
         integer('Av. CPC').rules('required').hideOnDetail(),
         select('Category')
             .options([

examples/next/package.json

@@ -5,9 +5,7 @@
     "license": "MIT",
     "dependencies": {
         "@mikro-orm/sqlite": "^4.3.2",
-        "next": "^10.0.3",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1"
+        "next": "^10.0.3"
     },
     "devDependencies": {
         "nodemon": "^2.0.4",

packages/auth/src/config.ts

@@ -45,6 +45,7 @@ export interface AuthPluginConfig {
     fields: FieldContract[]
     profilePictures: boolean
     userResource: string
+    cms: boolean
     roleResource: string
     disableCookies: boolean
     permissionResource: string

packages/cms/.gitignore

@@ -0,0 +1,3 @@
+build
+.next
+.env

packages/cms/.prettierignore

@@ -0,0 +1,2 @@
+public/
+css/app.min.css

packages/cms/app.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ApolloProvider } from '@apollo/client'
+import { BrowserRouter } from 'react-router-dom'
+
+import './core'
+
+import Dashboard from './pages/Dashboard'
+
+ReactDOM.render(
+    <ApolloProvider client={window.Tensei.client}>
+        <BrowserRouter>
+            <Dashboard />
+        </BrowserRouter>
+    </ApolloProvider>,
+    document.querySelector('#app')
+)

packages/cms/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                targets: {
+                    node: 'current'
+                }
+            }
+        ],
+        '@babel/preset-react'
+    ]
+}

packages/cms/components/Actions/Actions.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Transition, Menu } from '@tensei/components'
+
+export interface ActionsProps {}
+
+const Actions: React.FC<ActionsProps> = ({}) => {
+    return (
+        <div className="relative inline-block">
+            <Menu>
+                {({ open }) => (
+                    <>
+                        <Menu.Button className="flex mr-4 items-center justify-center bg-tensei-gray-300 h-8 w-8 rounded-full">
+                            <span className="sr-only">Actions</span>
+                            <svg
+                                width={14}
+                                height={14}
+                                className="fill-current text-tensei-gray-700"
+                                viewBox="0 0 16 16"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path d="M2.16667 10.1668C3.36328 10.1668 4.33333 9.19678 4.33333 8.00016C4.33333 6.80355 3.36328 5.8335 2.16667 5.8335C0.97005 5.8335 0 6.80355 0 8.00016C0 9.19678 0.97005 10.1668 2.16667 10.1668Z" />
+                                <path d="M8.00004 10.1668C9.19666 10.1668 10.1667 9.19678 10.1667 8.00016C10.1667 6.80355 9.19666 5.8335 8.00004 5.8335C6.80342 5.8335 5.83337 6.80355 5.83337 8.00016C5.83337 9.19678 6.80342 10.1668 8.00004 10.1668Z" />
+                                <path d="M13.8333 10.1668C15.0299 10.1668 16 9.19678 16 8.00016C16 6.80355 15.0299 5.8335 13.8333 5.8335C12.6367 5.8335 11.6666 6.80355 11.6666 8.00016C11.6666 9.19678 12.6367 10.1668 13.8333 10.1668Z" />
+                            </svg>
+                        </Menu.Button>
+
+                        <Transition
+                            show={open}
+                            enter="transition ease-out duration-100"
+                            enterFrom="transform opacity-0 scale-95"
+                            enterTo="transform opacity-100 scale-100"
+                            leave="transition ease-in duration-75"
+                            leaveFrom="transform opacity-100 scale-100"
+                            leaveTo="transform opacity-0 scale-95"
+                        >
+                            <Menu.Items
+                                static
+                                className="z-50 absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-sm shadow-sm outline-none"
+                            >
+                                <div className="py-1">
+                                    <Menu.Item>
+                                        {({ active }) => (
+                                            <a
+                                                href="#account-settings"
+                                                className={`${
+                                                    active
+                                                        ? 'bg-gray-100 text-gray-900'
+                                                        : 'text-gray-700'
+                                                } flex justify-between w-full px-4 py-2 text-sm leading-5 text-left`}
+                                            >
+                                                Account settings
+                                            </a>
+                                        )}
+                                    </Menu.Item>
+                                </div>
+
+                                <div className="py-1">
+                                    <Menu.Item>
+                                        {({ active }) => (
+                                            <a
+                                                href="#sign-out"
+                                                className={`${
+                                                    active
+                                                        ? 'bg-gray-100 text-gray-900'
+                                                        : 'text-gray-700'
+                                                } flex justify-between w-full px-4 py-2 text-sm leading-5 text-left`}
+                                            >
+                                                Sign out
+                                            </a>
+                                        )}
+                                    </Menu.Item>
+                                </div>
+                            </Menu.Items>
+                        </Transition>
+                    </>
+                )}
+            </Menu>
+        </div>
+    )
+}
+
+export default Actions

packages/cms/components/Actions/index.ts

@@ -0,0 +1 @@
+export { default } from './Actions'

packages/cms/components/Nav/Nav.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+export interface NavProps {
+    className: string
+}
+
+const Nav: React.FC<NavProps> = ({ className }) => {
+    return (
+        <nav className={className}>
+            <div className="w-full">
+                <div className="px-6 w-full flex items-center justify-between text-white cursor-pointer group">
+                    <span className="font-medium text-sm">DASHBOARDS</span>
+                    <svg
+                        width={12}
+                        height={12}
+                        viewBox="0 0 12 9"
+                        className="fill-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path d="M1.41 0.840027L6 5.42003L10.59 0.840027L12 2.25003L6 8.25003L0 2.25003L1.41 0.840027Z" />
+                    </svg>
+                </div>
+
+                <div className="w-full flex items-center justify-between text-sm text-white bg-tensei-primary py-3 px-6 cursor-pointer mt-4 bg-opacity-10">
+                    Main
+                </div>
+                <div className="w-full flex items-center justify-between text-sm text-tensei-gray-700 py-3 px-6 cursor-pointer">
+                    Tags
+                </div>
+                <div className="w-full flex items-center justify-between text-sm text-tensei-gray-700 py-3 px-6 cursor-pointer">
+                    Posts
+                </div>
+                <div className="w-full flex items-center justify-between text-sm text-tensei-gray-700 py-3 px-6 cursor-pointer">
+                    Performance
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+export default Nav

packages/cms/components/Nav/index.ts

@@ -0,0 +1 @@
+export { default } from './Nav'

packages/cms/core/index.ts

@@ -0,0 +1,45 @@
+import { TenseiState } from '@tensei/components'
+import { ApolloClient, InMemoryCache } from '@apollo/client'
+
+class Core {
+    state = (() => {
+        let ctx = {}
+        let admin = null
+        let resources = []
+        let permissions = {}
+        let registered = false
+
+        const { ___tensei___ } = window
+
+        try {
+            ctx = JSON.parse(___tensei___.ctx)
+            resources = JSON.parse(___tensei___.resources)
+            registered = ___tensei___.registered === 'true'
+
+            admin = JSON.parse(___tensei___.admin || '')
+
+            // user.permissions.forEach((permission) => {
+            //     // permissions[permission] = true
+            // })
+        } catch (errors) {}
+
+        return {
+            ctx,
+            admin,
+            resources,
+            permissions,
+            registered
+        } as TenseiState
+    })()
+
+    client = new ApolloClient({
+        uri: this.state.ctx.apiPath,
+        cache: new InMemoryCache()
+    })
+
+    boot = () => {
+        console.log('@@booting')
+    }
+}
+
+window.Tensei = new Core()

packages/cms/css/.gitignore

@@ -0,0 +1 @@
+app.min.css

packages/cms/css/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/cms/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/public/app.js": "/public/app.js",
+    "/public/app.css": "/public/app.css"
+}

packages/cms/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@tensei/cms",
+    "version": "0.4.3",
+    "main": "./build/index.js",
+    "license": "MIT",
+    "types": "./build/index.d.ts",
+    "files": [
+        "build/"
+    ],
+    "scripts": {
+        "prettier": "prettier --write './**/*.{js,json,ts,tsx,css}'",
+        "dev:css": "NODE_ENV=development yarn build:css",
+        "build:css": "tailwind build css/app.css -o css/app.min.css",
+        "dev": "yarn dev:css && webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
+        "build": "NODE_ENV=production webpack --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+        "@babel/preset-react": "^7.12.7",
+        "@babel/preset-typescript": "^7.12.7",
+        "@tensei/components": "^0.4.3",
+        "@types/react": "^17.0.0",
+        "@types/react-dom": "^17.0.0",
+        "@types/react-router-dom": "^5.1.6",
+        "laravel-mix": "^5.0.9",
+        "laravel-mix-react-typescript-extension": "^1.0.3",
+        "react": "^16.14.0",
+        "react-dom": "^16.14.0",
+        "react-router-dom": "^5.2.0",
+        "ts-loader": "^8.0.11",
+        "typescript": "^4.1.2"
+    },
+    "config": {
+        "commitizen": {
+            "path": "cz-conventional-changelog"
+        }
+    },
+    "husky": {
+        "hooks": {
+            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+        }
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@apollo/client": "^3.3.4",
+        "@tailwindcss/aspect-ratio": "^0.2.0",
+        "@tailwindcss/forms": "^0.2.1",
+        "@tailwindcss/typography": "^0.3.1",
+        "@tailwindcss/ui": "^0.7.2",
+        "autoprefixer": "^9",
+        "graphql": "^15.4.0",
+        "postcss": "^7",
+        "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+        "use-onclickoutside": "^0.3.1"
+    }
+}