feat(components): add Icon, Checkbox, Textarea and TextInput components

packages/cms/app.tsx

@@ -5,13 +5,6 @@ import { BrowserRouter } from 'react-router-dom'
 
 import './core'
 
-import Dashboard from './pages/Dashboard'
+import Wrapper from './pages/Wrapper'
 
-ReactDOM.render(
-    <ApolloProvider client={window.Tensei.client}>
-        <BrowserRouter>
-            <Dashboard />
-        </BrowserRouter>
-    </ApolloProvider>,
-    document.querySelector('#app')
-)
+ReactDOM.render(<Wrapper />, document.querySelector('#app'))

packages/cms/components/Nav/Nav.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
+import { Icon } from '@tensei/components'
 
 export interface NavProps {
     className: string
@@ -8,8 +10,8 @@ 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>
+                <div className="px-10 w-full flex items-center justify-between text-white cursor-pointer group">
+                    <span className="font-medium text-xs">Dashboards</span>
                     <svg
                         width={12}
                         height={12}
@@ -21,18 +23,26 @@ const Nav: React.FC<NavProps> = ({ className }) => {
                     </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>
+                <Link
+                    to={window.Tensei.getPath('resources/beans')}
+                    className="relative w-full flex items-center justify-between text-xs text-white bg-tensei-primary py-3 px-10 cursor-pointer mt-4 bg-opacity-10"
+                >
+                    <div className="flex items-center">
+                        <Icon active icon="tag" />{' '}
+                        <span className="ml-4">Main</span>
+                    </div>
+
+                    <span className="absolute h-full w-1 left-0 bg-tensei-primary"></span>
+                </Link>
+
+                <Link
+                    to={window.Tensei.getPath('resources/okto')}
+                    className="w-full flex items-center justify-between text-xs text-tensei-gray-700 py-3 px-10 cursor-pointer transition ease-in-out hover:bg-tensei-primary hover:bg-opacity-10"
+                >
+                    <div className="flex items-center">
+                        <Icon icon="grid" /> <span className="ml-4">Main</span>
+                    </div>
+                </Link>
             </div>
         </nav>
     )

packages/cms/core/index.ts

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom'
 import { TenseiState } from '@tensei/components'
 import { ApolloClient, InMemoryCache } from '@apollo/client'
 
@@ -32,11 +33,17 @@ class Core {
         } as TenseiState
     })()
 
+    components = {
+        Link
+    }
+
     client = new ApolloClient({
         uri: this.state.ctx.apiPath,
         cache: new InMemoryCache()
     })
 
+    getPath = (path: string) => `/${this.state.ctx.dashboardPath}/${path}`
+
     boot = () => {}
 }
 

packages/cms/package.json

@@ -56,6 +56,7 @@
         "classnames": "^2.2.6",
         "graphql": "^15.4.0",
         "postcss": "^7",
+        "react-router-dom": "^5.2.0",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat",
         "use-onclickoutside": "^0.3.1"
     }

packages/cms/pages/CreateResource/CreateResource.tsx

@@ -1,39 +1,59 @@
-import React, { useState, Fragment } from 'react'
-import { Heading, Button, Paragraph, TextInput } from '@tensei/components'
+import React, { Fragment } from 'react'
+import {
+    Heading,
+    Button,
+    TextInput,
+    Textarea,
+    Checkbox,
+    DatePicker
+} from '@tensei/components'
 
 interface CreateResourceProps {}
 
 const CreateResource: React.FC<CreateResourceProps> = ({}) => {
     return (
         <Fragment>
-            <header className="flex flex-wrap items-center justify-between">
-                <Heading as="h1" className="text-tensei-darkest">
-                    Update Tag
-                </Heading>
+            <header className="flex items-center justify-between">
+                <Heading as="h1">Update Tag</Heading>
 
-                <div className="flex w-2/4 justify-end">
+                <div className="flex">
                     <Button
                         clear
                         className="bg-tensei-gray-300 border-tensei-gray-300"
                     >
                         Delete
                     </Button>
-                    <Button primary className="ml-7">
+                    <Button primary className="ml-5">
                         Update
                     </Button>
                 </div>
             </header>
-            <div className="grid grid-cols-3 gap-4">
-                <div className="col-span-2 flex flex-col flex-wrap mt-10 bg-white rounded-lg p-12">
-                    <Paragraph className="tensei-gray-700">
-                        Put in information about the new
-                    </Paragraph>
-
-                    <div className="w-full md:w-2/3 mt-10">
-                        <TextInput label="Title" name="title" id="id" />
+            <div className="flex flex-wrap md:flex-nowrap mt-10">
+                <div className="flex flex-col flex-wrap w-full md:w-3/4 bg-white border border-tensei-gray-600 rounded-lg p-8 md:mr-4">
+                    <div className="mb-5">
+                        <TextInput
+                            label="Title"
+                            name="title"
+                            id="title"
+                            placeholder="Enter your title"
+                        />
+                    </div>
+                    <div className="mb-5">
+                        <Textarea
+                            label="Body"
+                            name="body"
+                            id="body"
+                            placeholder="Provide a full body"
+                        />
+                    </div>
+                    <div className="mb-5">
+                        <Checkbox label="Is active" id="is_active" />
+                    </div>
+                    <div className="mb-5">
+                        <DatePicker />
                     </div>
                 </div>
-                <div className="bg-white rounded-lg p-12 mt-10">5</div>
+                <div className="bg-white border border-tensei-gray-600 rounded-lg p-8 w-full md:w-1/4 mt-5 md:mt-0"></div>
             </div>
         </Fragment>
     )

packages/cms/pages/Dashboard.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
+import { Route } from 'react-router-dom'
 import { Transition, Menu } from '@tensei/components'
 
-import Nav from '../components/Nav'
 import Resource from './Resource'
+import Nav from '../components/Nav'
 import ResourceDetail from './ShowResource'
 import CreateResource from './CreateResource'
 
@@ -86,7 +87,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                                         </div>
                                     </div>
                                     <div className="mt-5 flex-1 h-0 overflow-y-auto">
-                                        <Nav className="px-2 space-y-1" />
+                                        <Nav className="md:px-2 space-y-1" />
                                     </div>
                                 </div>
                             )}
@@ -244,9 +245,34 @@ const Dashboard: React.FC<DashboardProps> = () => {
                     >
                         <div className="py-6">
                             <div className="max-w-full mx-auto px-6 sm:px-10 md:px-12">
-                                {/* Replace with your content */}
-                                <ResourceDetail />
-                                {/* /End replace */}
+                                <Route
+                                    exact
+                                    component={Resource}
+                                    path={window.Tensei.getPath(
+                                        'resources/:resource'
+                                    )}
+                                />
+                                <Route
+                                    exact
+                                    component={CreateResource}
+                                    path={window.Tensei.getPath(
+                                        'resources/:resource/create'
+                                    )}
+                                />
+                                <Route
+                                    exact
+                                    component={CreateResource}
+                                    path={window.Tensei.getPath(
+                                        'resources/:resource/:id/update'
+                                    )}
+                                />
+                                <Route
+                                    exact
+                                    component={ResourceDetail}
+                                    path={window.Tensei.getPath(
+                                        'resources/:resource/:id'
+                                    )}
+                                />
                             </div>
                         </div>
                     </main>

packages/cms/pages/Resource/Resource.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
 import {
     Table,
     SearchInput,
@@ -112,7 +113,9 @@ const Resource: React.FC<ResourceProps> = ({}) => {
                     </Button>
                 </div>
 
-                <Button primary>Add Resource</Button>
+                <Link to={window.Tensei.getPath('resources/beans/create')}>
+                    <Button primary>Add Resource</Button>
+                </Link>
             </div>
 
             <div className="mt-8">
@@ -142,15 +145,34 @@ const Resource: React.FC<ResourceProps> = ({}) => {
                                         {
                                             title: (
                                                 <span className="sr-only">
-                                                    Actions
+                                                    View
                                                 </span>
                                             ),
                                             field: 'actions',
-                                            className: 'relative px-6 py-3',
 
                                             render: (value, row) => (
                                                 <div className="flex items-center">
-                                                    <Actions />
+                                                    <Link
+                                                        to={window.Tensei.getPath(
+                                                            'resources/books/123'
+                                                        )}
+                                                        className="flex mr-4 items-center justify-center bg-tensei-gray-300 h-8 w-8 rounded-full"
+                                                    >
+                                                        <span className="sr-only">
+                                                            View resource
+                                                        </span>
+
+                                                        <svg
+                                                            className="fill-current text-tensei-gray-700"
+                                                            width={14}
+                                                            height={14}
+                                                            viewBox="0 0 14 14"
+                                                            fill="none"
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                            <path d="M0.25 10.9374V13.7499H3.0625L11.3575 5.45492L8.545 2.64242L0.25 10.9374ZM13.5325 3.27992C13.825 2.98742 13.825 2.51492 13.5325 2.22242L11.7775 0.467422C11.485 0.174922 11.0125 0.174922 10.72 0.467422L9.3475 1.83992L12.16 4.65242L13.5325 3.27992Z" />
+                                                        </svg>
+                                                    </Link>
                                                     <button className="flex mr-4 items-center justify-center bg-tensei-gray-300 h-8 w-8 rounded-full">
                                                         <span className="sr-only">
                                                             Edit

packages/cms/pages/ShowResource/ShowResource.tsx

@@ -1,14 +1,23 @@
 import React, { useState } from 'react'
+import { RouteComponentProps } from 'react-router-dom'
 import { ConfirmModal, Heading, StackedList, Button } from '@tensei/components'
 
-import Actions from '../../components/Actions'
 import Resource from '../Resource'
 
 export interface ResourceDetailProps {}
 
-const ResourceDetail: React.FC<ResourceDetailProps> = ({}) => {
+const ResourceDetail: React.FC<
+    ResourceDetailProps &
+        RouteComponentProps<{
+            id: string
+        }>
+> = ({ match }) => {
     const [deleting, setDeleting] = useState<any>(null)
 
+    if (['create', 'update'].includes(match.params.id)) {
+        return null
+    }
+
     return (
         <>
             <ConfirmModal
@@ -22,7 +31,7 @@ const ResourceDetail: React.FC<ResourceDetailProps> = ({}) => {
 
                 <div className="flex w-2/4 justify-end">
                     <Button danger>Delete</Button>
-                    <Button primary className="ml-7">
+                    <Button primary className="ml-5">
                         Edit
                     </Button>
                 </div>
@@ -31,11 +40,11 @@ const ResourceDetail: React.FC<ResourceDetailProps> = ({}) => {
             <div className="bg-white rounded-lg shadow-sm border-tensei-gray-100 border my-10">
                 <StackedList
                     fields={[
+                        { inputName: 'id' },
                         { inputName: 'name' },
-                        { inputName: 'name' },
-                        { inputName: 'name' },
-                        { inputName: 'name' },
-                        { inputName: 'name' }
+                        { inputName: 'email' },
+                        { inputName: 'description' },
+                        { inputName: 'phone_number' }
                     ]}
                 />
             </div>

packages/cms/pages/Wrapper/Wrapper.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { BrowserRouter, Route } from 'react-router-dom'
+
+import Dashboard from '../Dashboard'
+
+const Wrapper: React.FC = () => {
+    return (
+        <BrowserRouter>
+            <Route component={Dashboard} path={window.Tensei.getPath('')} />
+        </BrowserRouter>
+    )
+}
+
+export default Wrapper

packages/cms/pages/Wrapper/index.ts

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

packages/cms/tailwind.config.js

@@ -13,6 +13,8 @@ module.exports = {
             },
             colors: {
                 'tensei-primary': '#2346F8',
+
+                'tensei-primary-darker': '#243de1',
                 'tensei-secondary': '#33C5FF',
                 'tensei-darkest': '#21185A',
 

packages/common/package.json

@@ -36,6 +36,7 @@
         "indicative": "^7.4.4",
         "luxon": "^1.25.0",
         "pluralize": "^8.0.0",
+        "react-flatpickr": "^3.10.6",
         "signale": "^1.4.0"
     },
     "publishConfig": {

packages/common/src/utils/graphql.ts

@@ -78,9 +78,8 @@ export const populateFromResolvedNodes = async (
 ) => {
     if (!data.length) return
 
-    const relationshipFields = resource?.data.fields.filter(
-        f => f.relatedProperty.reference
-    ) || []
+    const relationshipFields =
+        resource?.data.fields.filter(f => f.relatedProperty.reference) || []
 
     const relatedManyToOneFields = relationshipFields.filter(
         field => field.relatedProperty.reference === ReferenceType.MANY_TO_ONE