Add an onboarding modal

Signed-off-by: Axel Boberg <[email protected]>

app/assets/icons/index.js

@@ -6,8 +6,11 @@ import add from './add.svg'
 import edit from './edit.svg'
 import close from './close.svg'
 import person from './person.svg'
+import widget from './widget.svg'
+import rundown from './rundown.svg'
 import warning from './warning.svg'
 import selector from './selector.svg'
+import inspector from './inspector.svg'
 import arrowRight from './arrow-right.svg'
 import editDetail from './edit-detail.svg'
 import placeholder from './placeholder.svg'
@@ -18,8 +21,11 @@ export default {
   edit,
   close,
   person,
+  widget,
+  rundown,
   warning,
   selector,
+  inspector,
   arrowRight,
   editDetail,
   placeholder,

app/components/Onboarding/index.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { SharedContext } from '../../sharedContext'
+
+import { Modal } from '../Modal'
+import { Icon } from '../Icon'
+
+import content from './onboarding.json'
+
+import './style.css'
+
+export function Onboarding ({ onClose = () => {} }) {
+  const [open, setOpen] = React.useState(false)
+  const [shared, applyShared] = React.useContext(SharedContext)
+
+  React.useEffect(() => {
+    console.log('Getting time', new Date(content.updatedAt).getTime(), shared?._userDefaults?.didCompleteOnboarding)
+
+    if (shared?._userDefaults == null) {
+      return
+    }
+
+    if (shared?._userDefaults?.didCompleteOnboarding >= new Date(content.updatedAt).getTime()) {
+      return
+    }
+
+    setOpen(true)
+  }, [shared?._userDefaults])
+
+  function handleClose () {
+    applyShared({
+      _userDefaults: {
+        didCompleteOnboarding: new Date(content.updatedAt).getTime()
+      }
+    })
+    setOpen(false)
+  }
+
+  return (
+    <Modal open={open} size='small'>
+      <div className='Onboarding'>
+        <h1>{content.heading}</h1>
+        <div className='Onboarding-paragraphs'>
+          {
+            content.paragraphs.map(paragraph => {
+              return (
+                <div className='Onboarding-paragraph'>
+                  <div className='Onboarding-paragraphIcon'>
+                    {
+                      paragraph.icon &&
+                        <Icon name={paragraph.icon} />
+                    }
+                  </div>
+                  <div>
+                    <h3>{paragraph.heading}</h3>
+                    {paragraph.body || ''}
+                  </div>
+                </div>
+              )
+            })
+          }
+        </div>
+        <div className='Onboarding-footer'>
+          <button className='Button Button--primary' onClick={() => handleClose()}>Get started</button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

app/components/Onboarding/onboarding.json

@@ -0,0 +1,26 @@
+{
+  "updatedAt": "2024-05-16T11:41:00",
+  "heading": "Welcome to Bridge",
+  "paragraphs": [
+    {
+      "icon": "edit",
+      "heading": "Customize the workspace",
+      "body": "Enter the edit mode to change the layout of your workspace, this mode is always available next to settings in the top right"
+    },
+    {
+      "icon": "widget",
+      "heading": "Widgets",
+      "body": "Use widgets to add functionality to your workspace"
+    },
+    {
+      "icon": "rundown",
+      "heading": "Rundown",
+      "body": "Add items to your rundown by right-clicking or dragging them in"
+    },
+    {
+      "icon": "inspector",
+      "heading": "Inspector",
+      "body": "The inspector lets you edit items"
+    }
+  ]
+}

app/components/Onboarding/style.css

@@ -0,0 +1,25 @@
+.Onboarding {
+  display: flex;
+  padding: 30px;
+  height: 100%;
+
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.Onboarding-paragraphs {
+  height: 100%;
+  margin: 15px 20px 0;
+  text-align: left;
+}
+
+.Onboarding-paragraph {
+  display: flex;
+  margin-bottom: 15px;
+
+  align-items: center;
+}
+
+.Onboarding-paragraphIcon {
+  margin-right: 15px;
+}

app/views/Workspace.jsx

@@ -14,6 +14,7 @@ import * as api from '../api'
 import { SharedContext } from '../sharedContext'
 
 import { Header } from '../components/Header'
+import { Onboarding } from '../components/Onboarding'
 
 import { Grid } from '../components/Grid'
 import { Palette } from '../components/Palette'
@@ -164,6 +165,7 @@ export const Workspace = () => {
 
   return (
     <>
+      <Onboarding />
       <Header title={getFileNameFromPath(shared._filePath)} />
       <Palette open={paletteIsOpen} onClose={() => handlePaletteClose()} />
       {