Pulling feat/editor-container into develop

.github/workflows/lighthouse.yml

@@ -0,0 +1,28 @@
+
+name: Lighthouse report 
+on: [deployment_status]
+jobs:
+  lighthouse-report-dev:
+    runs-on: ubuntu-latest
+    if: |
+      github.event.deployment_status.state == 'success'
+    steps:
+      - name: checkout code 
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.deployment.ref }}
+      - name: setup nodejs
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.11.0
+      - name: install lhci 
+        run: npm i -g @lhci/[email protected]
+      - name: run develop report
+        if: contains(github.event.deployment.payload, 'develop')
+        env:
+          LHCI_BUILD_CONTEXT__CURRENT_BRANCH: develop
+        run: lhci autorun --config lighthouse/${{ github.event.deployment.environment}}.yml 
+      - name: run report
+        env:
+          LHCI_BUILD_CONTEXT__CURRENT_BRANCH: ${{ github.event.deployment.ref }}
+        run: lhci autorun --config lighthouse/${{ github.event.deployment.environment}}.yml

apps/dicty-frontpage/lighthouserc.yaml

@@ -0,0 +1,4 @@
+ci:
+  collect:
+    url: https://dictybase.dev
+    target: lhci

apps/dicty-frontpage/src/features/EditablePages/EditView.tsx

@@ -1,20 +1,13 @@
 import { useNavigate } from "react-router-dom"
-import { makeStyles, Container, Button } from "@material-ui/core"
+import { Button } from "@material-ui/core"
 import PersonIcon from "@material-ui/icons/Person"
 import { ActionBar } from "@dictybase/ui-common"
-import { Editor } from "@dictybase/editor"
+import { Editor, EditorContainer } from "@dictybase/editor"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
 import { UpdateButton } from "../../common/components/UpdateButton"
 import { timeSince } from "../../common/utils/timeSince"
 import { truncateEmail } from "../../common/utils/truncateEmail"
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(4),
-  },
-}))
-
 type EditActionBarProperties = {
   editedBy: string
   updatedAt: string
@@ -51,11 +44,10 @@ type EditViewProperties = {
 }
 
 const EditView = ({ data }: EditViewProperties) => {
-  const classes = useStyles()
   const { id, updated_at, updated_by, content } = data
   const editedBy = truncateEmail(updated_by.email)
   return (
-    <Container className={classes.container}>
+    <EditorContainer>
       <Editor
         content={{ storageKey: undefined, editorState: content }}
         editable
@@ -67,7 +59,7 @@ const EditView = ({ data }: EditViewProperties) => {
           />
         }
       />
-    </Container>
+    </EditorContainer>
   )
 }
 

apps/dicty-frontpage/src/features/EditablePages/EditableView.tsx

@@ -1,19 +1,12 @@
-import { makeStyles, Container, Button } from "@material-ui/core"
+import { Button } from "@material-ui/core"
 import PersonIcon from "@material-ui/icons/Person"
 import { useNavigate } from "react-router-dom"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
-import { Editor } from "@dictybase/editor"
+import { Editor, EditorContainer } from "@dictybase/editor"
 import { ActionBar } from "@dictybase/ui-common"
 import { timeSince } from "../../common/utils/timeSince"
 import { truncateEmail } from "../../common/utils/truncateEmail"
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(4),
-  },
-}))
-
 type EditableActionBarProperties = {
   editedBy: string
   updatedAt: string
@@ -51,17 +44,16 @@ type EditableViewProperties = {
 const EditableView = ({ data }: EditableViewProperties) => {
   const { updated_at, updated_by, content, slug } = data
   const editedBy = truncateEmail(updated_by.email)
-  const classes = useStyles()
   return (
-    <Container className={classes.container}>
+    <EditorContainer>
       <Editor
         toolbar={
           <EditableActionBar editedBy={editedBy} updatedAt={updated_at} />
         }
         editable={false}
         content={{ storageKey: slug, editorState: content }}
       />
-    </Container>
+    </EditorContainer>
   )
 }
 

apps/dicty-frontpage/src/features/EditablePages/ShowView.tsx

@@ -1,13 +1,5 @@
-import { makeStyles, Container } from "@material-ui/core"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
-import { Editor } from "@dictybase/editor"
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(4),
-  },
-}))
+import { Editor, EditorContainer } from "@dictybase/editor"
 
 type ShowViewProperties = {
   data: NonNullable<ContentBySlugQuery["contentBySlug"]>
@@ -20,14 +12,13 @@ type ShowViewProperties = {
  */
 const ShowView = ({ data }: ShowViewProperties) => {
   const { slug, content } = data
-  const classes = useStyles()
   return (
-    <Container className={classes.container}>
+    <EditorContainer>
       <Editor
         editable={false}
         content={{ storageKey: slug, editorState: content }}
       />
-    </Container>
+    </EditorContainer>
   )
 }
 

apps/dicty-frontpage/src/pages/content/create.tsx

@@ -1,12 +1,11 @@
-import { Container } from "@material-ui/core"
-import { Editor } from "@dictybase/editor"
+import { Editor, EditorContainer } from "@dictybase/editor"
 import { ACCESS } from "@dictybase/auth"
 import { CreateContentForm } from "../../features/EditablePages/CreateContentForm"
 
 const CreateContentView = () => (
-  <Container>
+  <EditorContainer>
     <Editor editable toolbar={<CreateContentForm />} />
-  </Container>
+  </EditorContainer>
 )
 
 // eslint-disable-next-line import/no-default-export

apps/stock-center/src/components/ShowView.tsx

@@ -1,5 +1,5 @@
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
-import { Editor } from "@dictybase/editor"
+import { Editor, EditorContainer } from "@dictybase/editor"
 
 type ShowViewProperties = {
   data: NonNullable<ContentBySlugQuery["contentBySlug"]>
@@ -13,10 +13,12 @@ type ShowViewProperties = {
 const ShowView = ({ data }: ShowViewProperties) => {
   const { slug, content } = data
   return (
-    <Editor
-      editable={false}
-      content={{ storageKey: slug, editorState: content }}
-    />
+    <EditorContainer>
+      <Editor
+        editable={false}
+        content={{ storageKey: slug, editorState: content }}
+      />
+    </EditorContainer>
   )
 }
 

docker/Dockerfile.lighthouse

@@ -0,0 +1,12 @@
+FROM node:lts-alpine3.20 AS base
+
+# Install utilities
+RUN apt-get update --fix-missing && apt-get install -y python build-essential && apt-get clean
+
+WORKDIR /usr/src/lhci
+COPY package.json .
+COPY lighthouserc.json .
+RUN npm install
+
+EXPOSE 9001
+CMD [ "npm", "start" ]

googleAnalytics.md

@@ -0,0 +1,45 @@
+## google analytics -- should we use a package / write our own class/component?
+
+```mermaid
+flowchart TD
+
+A[Will we need to collect custom measurements?]
+B[gtag.js supports automatic collection of page views]
+C[gtag.js measures page_views on browser history change if enabled on GA dashboard]
+C2[just use a hook that loads gtag.js]
+D0[Write an interface]
+D[What do packages like react-ga4 provide?]
+E[injects gtag.js script]
+F[This is trivial to do by appending script tag to document]
+G[Provides methods to send page views, custom events]
+H["ReactGA internally calls gtag() in its methods. These methods just provide a defined API"]
+J[argument validation]
+K[type definitions]
+
+A -->|no| B
+B --- C
+C --> C2
+A -->|yes| D0
+D0 --> D
+D --> E
+E --> F
+D --> G
+G --> H
+D --> J
+D --> K
+
+click B "https://support.google.com/analytics/answer/9234069?sjid=13764265460356742502-NC"
+click C "https://developers.google.com/analytics/devguides/collection/ga4/single-page-applications?implementation=browser-history"
+click I "https://developers.google.com/tag-platform/gtagjs/reference"
+```
+
+If we end up collecting custom measurements, it might be worth writing a class / component that provides an interface to use gtag().
+It sounds conceptually easy enough. It's also something that can probably be deferred to when it becomes necessary.
+
+If we just need to track page views, then the hook described below should be enough.
+
+a useGoogleAnalytics hook that
+
+1. checks for production environment (might not be necessary, there are ways to filter developer traffic https://support.google.com/analytics/answer/13296761?sjid=879247116944398152-NC but haven't looked into that closely yet)
+2. loads the gtag.js script, so we don't need to edit our HTML directly
+3. tracks bfcache restores

mui-upgrade-plan.md

@@ -0,0 +1,34 @@
+[Reference](https://v5.mui.com/material-ui/migration/migration-v4)
+[Relevant Issue](https://github.com/mui/material-ui/issues/12109)
+
+It seems that I can gradually upgrade to MUI package by package, with different versions of MUI in the same react tree. However, I don't know how theming will work. 
+
+## Phase 1: @material-ui -> @mui
+
+Applications
+  - [] dicty-frontpage
+      - [] @dictybase/auth
+        - [] @dictybase/footer
+        - [] @dictybase/header
+          - [] @dictybase/dicty-image
+        - [] @dictybase/navbar
+        - [] @dictybase/ui-common
+      - [] @dictybase/editor
+        - [] @dictybase/editor-toolbar
+          - [] @dictybase/image-plugin
+            - [] @dictybase/flex-layout-plugin
+            - [] @dictybase/resizable-image
+        - [] @dictybase/table-action-plugin
+        - [] @dictybase/width-table-plugin
+      - [] @dictybase/ui-frontpage
+  - [] stock-center
+  - [] genomepage
+  - [] publication
+
+1. Select an application
+2. Determine which of its packages use material-ui
+3. Apply migration changes to package one by one 
+4. Apply migration changes to the application
+5. Test
+
+## Phase 2: JSS -> Emotion

notes

@@ -0,0 +1,38 @@
+Packages / Apps with react
+
+   - [] genomepage
+   - [] image-component-demo
+   - [] @dictybase#apollo-error-nextjs
+   - [] @dictybase#apollo-error-react-router
+   - [] @dictybase#data-access
+   - [] @dictybase#dicty-image
+   - [] @dictybase#flex-layout-plugin
+   - [] @dictybase#functional
+   - [] @dictybase#hook-dsc
+   - [] @dictybase#hook
+   - [] @dictybase#json-plugin
+   - [] @dictybase#navbar
+   - [] @dictybase#persistence-plugin
+   - [] @dictybase#resizable-image
+   - [] @dictybase#table-action-plugin
+   - [] @dictybase#ui-common
+   - [] @dictybase#ui-dsc
+   - [] @dictybase#ui-frontpage
+   - [] @dictybase#width-table-plugin
+# Incompatible Dependencies
+  - @material-ui/core
+
+# Concurrent React
+  - Concurrency features are opt-in
+  - Rendering is interruptible
+    - Update may be paused or aborted altogether
+  - Waits to mutate DOM until the tree has been fully evaluated
+    - seamless update
+    - screens can be updated in the background
+    - does not block main thread
+      - UI can respond to user input while rendering
+
+# Automatic Batching
+  - Updates inside promises, timeouts, native event handlers are batched
+
+# Transitions

packages/editor/src/EditorContainer.tsx

@@ -0,0 +1,43 @@
+import { FunctionComponent } from "react"
+import { makeStyles, Paper, Box, Container } from "@material-ui/core"
+import { grey, blue } from "@material-ui/core/colors"
+
+const useStyles = makeStyles((theme) => ({
+  background: {
+    backgroundColor: grey[100],
+  },
+  paper: {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4),
+    borderStyle: "none solid",
+    borderColor: blue[50],
+    borderWidth: "4rem",
+    borderRadius: 0,
+    [theme.breakpoints.down("md")]: {
+      border: "none",
+    },
+  },
+  container: {
+    [theme.breakpoints.down("md")]: {
+      padding: 0,
+    },
+  },
+}))
+
+const EditorContainer: FunctionComponent = ({ children }) => {
+  const classes = useStyles()
+
+  return (
+    <Box className={classes.background}>
+      <Container maxWidth="lg">
+        <Paper elevation={3} className={classes.paper}>
+          {children}
+        </Paper>
+      </Container>
+    </Box>
+  )
+}
+
+export { EditorContainer }

packages/editor/src/TreeViewPlugin.tsx

@@ -0,0 +1,17 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { TreeView } from "@lexical/react/LexicalTreeView"
+
+export const TreeViewPlugin = (): JSX.Element => {
+  const [editor] = useLexicalComposerContext()
+  return (
+    <TreeView
+      viewClassName="tree-view-output"
+      treeTypeButtonClassName="debug-treetype-button"
+      timeTravelPanelClassName="debug-timetravel-panel"
+      timeTravelButtonClassName="debug-timetravel-button"
+      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
+      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
+      editor={editor}
+    />
+  )
+}

packages/editor/src/index.ts

@@ -1,2 +1,3 @@
-export { Editor } from "./Editor"
+export * from "./Editor"
+export * from "./EditorContainer"
 export * from "./utils"