test(oidc-server): merge develop

Signed-off-by: Roy Scheeren <[email protected]>

apps/design-system/src/components/Atoms/Button/Button.tsx

@@ -37,9 +37,9 @@ const Button: FC<Props> = ({
   }
 
   const sizeClassMap = {
-    [Size.small]: 'py-3 px-4 md:py-4 md:px-6 text-xs sm:text-sm',
-    [Size.medium]: 'py-4 px-8 text-sm sm:text-base',
-    [Size.large]: 'py-4 px-10 text-base sm:text-2xl',
+    [Size.small]: 'py-2 px-4 text-xs sm:text-sm',
+    [Size.medium]: 'px-8 py-3 text-sm sm:text-base',
+    [Size.large]: 'px-8 py-3 text-base sm:text-2xl',
   }
 
   const indicatorColour = {
@@ -59,7 +59,7 @@ const Button: FC<Props> = ({
     <button
       type="button"
       onClick={() => onClick()}
-      className={`${styleClassMap[type][style]} ${sizeClassMap[size]} ${extraClasses} disabled:opacity-50 font-bold leading-none transition duration-300 ease-in-out rounded-full`}
+      className={`${styleClassMap[type][style]} ${sizeClassMap[size]} ${extraClasses} disabled:opacity-50 font-bold leading-none transition duration-300 ease-in-out rounded-md`}
       disabled={isDisabled || isWorking}
     >
       {buttonView}

apps/design-system/src/components/Atoms/Dialog/Dialog.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, Story } from '@storybook/react'
+import React from 'react'
+
+import { Dialog } from './Dialog'
+
+export default {
+  component: Dialog,
+  title: 'Components/Dialog',
+} as Meta
+
+const Template: Story = ({ isOpen, setShow, heading, description }) => (
+  <Dialog
+    isOpen={isOpen}
+    setShow={setShow}
+    heading={heading}
+    description={description}
+    action={<button>CLICK</button>}
+  />
+)
+
+export const DialogStory = Template.bind({})
+
+DialogStory.args = {
+  isOpen: true,
+  setShow: () => {},
+  heading: 'Heading',
+  description: 'Description',
+}

apps/design-system/src/components/Atoms/Dialog/Dialog.tsx

@@ -0,0 +1,88 @@
+import { Dialog as ReactDialog, Transition } from '@headlessui/react'
+import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline'
+import { FC, Fragment, JSXElementConstructor, ReactElement } from 'react'
+
+interface DialogProps {
+  isOpen: boolean
+  setShow: (x: boolean) => void
+  heading: string | ReactElement<any, string | JSXElementConstructor<any>>
+  description: string | ReactElement<any, string | JSXElementConstructor<any>>
+  action: ReactElement
+}
+
+export const Dialog: FC<DialogProps> = ({ isOpen, setShow, heading, description, action }) => {
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <ReactDialog as="div" className="relative z-50" onClose={setShow}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-800 bg-opacity-75 dark:bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <ReactDialog.Panel className="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+                <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md bg-white dark:bg-gray-900 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-900 focus:ring-offset-0"
+                    onClick={() => {
+                      setShow(false)
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="sm:flex sm:items-start">
+                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-600 sm:mx-0 sm:h-10 sm:w-10">
+                    <ExclamationTriangleIcon className="h-6 w-6 text-red-600 dark:text-red-100" aria-hidden="true" />
+                  </div>
+                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <ReactDialog.Title
+                      as="h3"
+                      className="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+                    >
+                      {heading}
+                    </ReactDialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">{description}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                  {action}
+                  <button
+                    type="button"
+                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                    onClick={() => {
+                      setShow(false)
+                    }}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </ReactDialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </ReactDialog>
+    </Transition.Root>
+  )
+}

apps/design-system/src/components/Atoms/Dialog/Dialog.ui.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+
+import { Dialog } from './Dialog'
+
+describe('atoms/Dialog', () => {
+  describe('render', () => {
+    it('should render Dialog with content', () => {
+      // when ... rendering component
+      const setShowStub = jest.fn()
+      render(
+        <Dialog
+          heading="HEADING"
+          description="DESCRIPTION"
+          isOpen={true}
+          setShow={setShowStub}
+          action={<button>BUTTON</button>}
+        />,
+      )
+      const DialogElement = screen.getByText('HEADING')
+
+      // then ... should render as expected
+      expect(DialogElement).toBeInTheDocument()
+    })
+  })
+})

apps/design-system/src/components/Atoms/Dialog/index.ts

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

apps/design-system/src/index.ts

@@ -3,6 +3,7 @@ export { Button } from './components/Atoms/Button'
 export { Card } from './components/Atoms/Card'
 export { ContactPerson } from './components/Atoms/ContactPerson'
 export { Date } from './components/Atoms/Date'
+export { Dialog } from './components/Atoms/Dialog'
 export { Checkbox, Checkboxes, DragAndDropField, FileField, TextField, TextareaField } from './components/Atoms/Form'
 export { Grid, GridRow } from './components/Atoms/Grid'
 export { Heading } from './components/Atoms/Heading'
@@ -15,7 +16,7 @@ export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow } from
 export { ThemeToggle } from './components/Atoms/ThemeToggle'
 export { Tooltip } from './components/Atoms/Tooltip'
 
-export { ColorScheme, Language } from './types'
+export { ColorScheme, Language, Size } from './types'
 
 export { useClipboard, useLocalStorage } from './hooks'
 export { formatPercentage, formatDate, formatShortDate, calculateProfitPercentage } from './common/utils'

apps/envited.ascs.digital/app/assets/detail/page.tsx

@@ -0,0 +1,11 @@
+import { Asset } from '../../../modules/Asset'
+
+export default async function Index() {
+  return (
+    <>
+      <main className="mx-auto max-w-2xl px-4 pt-0 pb-12 sm:px-6 lg:max-w-7xl lg:px-8">
+        <Asset />
+      </main>
+    </>
+  )
+}

apps/envited.ascs.digital/app/assets/page.tsx

@@ -0,0 +1,18 @@
+import { Assets } from '../../modules/Assets'
+import { Breadcrumbs } from '../../modules/Breadcrumbs'
+import { PageHeader } from '../../modules/PageHeader'
+
+export default async function Index() {
+  return (
+    <>
+      <main className="mx-auto max-w-2xl px-4 pt-0 pb-12 sm:px-6 lg:max-w-7xl lg:px-8">
+        <Breadcrumbs />
+        <PageHeader
+          heading="Assets"
+          description="All the data available on the platform are harmonised to the latest standards and can be easily used in your virtual development or testing process. We are providing all partners full transparency. Use the search mask and meta tags to find your desired data and get an good overview about our OpenCRG-, OpenDrive-, OpenSceneGraph- and unity-files as well as software tools."
+        />
+        <Assets />
+      </main>
+    </>
+  )
+}

apps/envited.ascs.digital/app/dashboard/assets/page.tsx

@@ -1,3 +1,5 @@
+import { DashboardAssets } from '../../../modules/Assets'
+
 export default async function Index() {
-  return 'Assets'
+  return <DashboardAssets />
 }

apps/envited.ascs.digital/app/dashboard/layout.tsx

@@ -1,26 +1,89 @@
 import { ReactNode } from 'react'
 
 import { NAVIGATION_DASHBOARD } from '../../common/constants'
-import { Header } from '../../modules/Header'
-import { Navigation } from '../../modules/Navigation'
+import { Breadcrumbs } from '../../modules/Breadcrumbs'
+import { DashboardNavigation } from '../../modules/DashboardNavigation'
 
 interface DashboardProps {
   children: ReactNode
 }
 
+const profile = {
+  name: 'Testcompany GmbH',
+  logo: 'https://www.bmw.nl/content/dam/bmw/common/images/logo-icons/BMW/BMW_White_Logo.svg.asset.1670245093434.svg',
+  backgroundImage:
+    'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply',
+  fields: [
+    ['Phone', '(555) 123-4567'],
+    ['Email', '[email protected]'],
+    ['Title', 'Senior Front-End Developer'],
+    ['Team', 'Product Development'],
+    ['Location', 'San Francisco'],
+    ['Sits', 'Oasis, 4th floor'],
+    ['Salary', '$145,000'],
+    ['Birthday', 'June 8, 1990'],
+  ],
+}
+
 export default function DashboardLayout({ children }: DashboardProps) {
   return (
     <>
-      <Header />
-      <main>
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="flex gap-x-8">
-            <div className="w-1/5">
-              <Navigation items={NAVIGATION_DASHBOARD} />
+      <main className="mx-auto max-w-2xl px-4 pt-0 pb-12 sm:px-6 lg:max-w-7xl lg:px-8">
+        <Breadcrumbs />
+        <div className="mb-12">
+          <div className="relative -z-10 isolate overflow-hidden bg-gray-400 h-32 lg:h-48 rounded-xl">
+            <img src={profile.backgroundImage} alt="" className="inset-0 -z-10 h-full w-full object-cover opacity-40" />
+            <div
+              className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl"
+              aria-hidden="true"
+            >
+              <div
+                className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-blue-900 to-blue-800 opacity-20"
+                style={{
+                  clipPath:
+                    'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                }}
+              />
+            </div>
+            <div
+              className="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu"
+              aria-hidden="true"
+            >
+              <div
+                className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-blue-900 to-blue-800 opacity-20"
+                style={{
+                  clipPath:
+                    'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                }}
+              />
+            </div>
+          </div>
+          <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+            <div className="-mt-20 sm:-mt-24 sm:flex sm:items-start sm:space-x-5">
+              <div className="flex">
+                <img
+                  className="h-24 w-24 rounded-xl ring-4 ring-white sm:h-32 sm:w-32 bg-gray-300 p-4"
+                  src={profile.logo}
+                  alt=""
+                />
+              </div>
+              <div className="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
+                <div className="mt-6 min-w-0 flex-1 sm:hidden md:block">
+                  <h1 className="truncate text-2xl font-bold text-white">{profile.name}</h1>
+                </div>
+              </div>
+            </div>
+            <div className="mt-6 hidden min-w-0 flex-1 sm:block md:hidden">
+              <h1 className="truncate text-2xl font-bold text-gray-900">{profile.name}</h1>
             </div>
-            <div className="w-4/5">{children}</div>
           </div>
         </div>
+        <div className="flex gap-x-8 mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+          <div className="w-1/4">
+            <DashboardNavigation items={NAVIGATION_DASHBOARD} />
+          </div>
+          <div className="w-3/4">{children}</div>
+        </div>
       </main>
     </>
   )

apps/envited.ascs.digital/app/dashboard/page.tsx

@@ -1,3 +1,5 @@
+import { EnvelopeOpenIcon, UsersIcon } from '@heroicons/react/24/outline'
+
 import { getServerSession } from '../../common/auth'
 import { getUserById } from '../../common/serverActions'
 import { Dashboard } from '../../modules/Dashboard'
@@ -7,10 +9,44 @@ export default async function Index() {
   const session = await getServerSession()
   const user = await getUserById('did:pkh:tz:tz1SfdVU1mor3Sgej3FmmwMH4HM1EjTzqqeE')
 
+  const stats = [
+    { id: 1, name: 'Users', stat: '5', icon: UsersIcon },
+    { id: 2, name: 'Assets', stat: '8', icon: EnvelopeOpenIcon },
+  ]
+
   return (
     <>
       <main>
-        <div className="mx-auto max-w-6xl">
+        <div>
+          <div className="mb-12">
+            <h3 className="text-base font-semibold leading-6 text-gray-900">Overview</h3>
+
+            <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2">
+              {stats.map(item => (
+                <div
+                  key={item.id}
+                  className="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 border sm:px-6 sm:pt-6"
+                >
+                  <dt>
+                    <div className="absolute rounded-md bg-blue-900 p-3">
+                      <item.icon className="h-6 w-6 text-white" aria-hidden="true" />
+                    </div>
+                    <p className="ml-16 truncate text-sm font-medium text-gray-500">{item.name}</p>
+                  </dt>
+                  <dd className="ml-16 flex items-baseline pb-6 sm:pb-7">
+                    <p className="text-2xl font-semibold text-gray-900">{item.stat}</p>
+                    <div className="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
+                      <div className="text-sm">
+                        <a href="#" className="font-medium text-blue-900 hover:text-blue-800">
+                          View all<span className="sr-only"> {item.name} stats</span>
+                        </a>
+                      </div>
+                    </div>
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </div>
           {session ? (
             <>
               <User {...user} />

apps/envited.ascs.digital/app/layout.tsx

@@ -1,5 +1,6 @@
+import { Footer } from '../modules/Footer'
+import { Header } from '../modules/Header'
 import { NotificationContainer } from '../modules/Notifications'
-import { Providers } from '../modules/Theme/Providers'
 import './global.css'
 
 export const metadata = {
@@ -22,8 +23,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <meta name="theme-color" content="#ffffff"></meta>
       </head>
       <body className="bg-white dark:bg-gray-800">
+        <Header />
         <NotificationContainer />
-        <Providers>{children}</Providers>
+        {children}
+        <Footer />
       </body>
     </html>
   )