From 745fcc8b1eaadc5395263bfdb578a83413fa7de3 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 1 Jul 2024 17:47:54 +0200
Subject: [PATCH 1/6] roll your own tab (mostly empty)

---
 .../components/canvas/design-panel-root.tsx   | 15 ++++
 .../components/editor/store/editor-state.ts   |  1 +
 .../left-pane/roll-your-own-pane.tsx          | 69 +++++++++++++++++++
 editor/src/utils/feature-switches.ts          |  3 +
 4 files changed, 88 insertions(+)
 create mode 100644 editor/src/components/navigator/left-pane/roll-your-own-pane.tsx

diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 7d007c4b982e..3662a906712e 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -35,6 +35,8 @@ import { EditorModes, isCommentMode } from '../editor/editor-modes'
 import { useAllowedToEditProject } from '../editor/store/collaborative-editing'
 import { useCanComment } from '../../core/commenting/comment-hooks'
 import { ElementsOutsideVisibleAreaIndicator } from '../editor/elements-outside-visible-area-indicator'
+import { isFeatureEnabled } from '../../utils/feature-switches'
+import { RollYourOwnPane } from '../navigator/left-pane/roll-your-own-pane'
 
 function isCodeEditorEnabled(): boolean {
   if (typeof window !== 'undefined') {
@@ -158,6 +160,10 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     onClickTab(RightMenuTab.Settings)
   }, [onClickTab])
 
+  const onClickRollYourOwnTab = React.useCallback(() => {
+    onClickTab(RightMenuTab.RollYourOwn)
+  }, [onClickTab])
+
   const canComment = useCanComment()
 
   const allowedToEdit = useAllowedToEditProject()
@@ -219,6 +225,14 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           selected={selectedTab === RightMenuTab.Settings}
           onClick={onClickSettingsTab}
         />
+        {when(
+          isFeatureEnabled('Roll Your Own'),
+          <MenuTab
+            label={'RYO'}
+            selected={selectedTab === RightMenuTab.RollYourOwn}
+            onClick={onClickRollYourOwnTab}
+          />,
+        )}
       </FlexRow>
       <SimpleFlexRow
         className='Inspector-entrypoint'
@@ -236,6 +250,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
         {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
         {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
         {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
+        {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnPane />)}
       </SimpleFlexRow>
       <CanvasStrategyInspector />
     </FlexColumn>
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 20e3549badea..4e2eeee82bc3 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -214,6 +214,7 @@ export enum RightMenuTab {
   Inspector = 'inspector',
   Settings = 'settings',
   Comments = 'comments',
+  RollYourOwn = 'roll-your-own',
 }
 
 // TODO: this should just contain an NpmDependency and a status
diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
new file mode 100644
index 000000000000..d09743e4b762
--- /dev/null
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { FlexColumn, FlexRow, Section } from '../../../uuiui'
+import { when } from '../../../utils/react-conditionals'
+
+const sections = ['Grid'] as const
+type Section = (typeof sections)[number]
+
+export const RollYourOwnPane = React.memo(() => {
+  const [currentSection, setCurrentSection] = React.useState<Section | null>(null)
+
+  const onChangeSection = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    const maybeSectionValue = e.target.value as Section
+    if (sections.includes(maybeSectionValue)) {
+      setCurrentSection(maybeSectionValue)
+    } else {
+      setCurrentSection(null)
+    }
+  }, [])
+
+  return (
+    <FlexColumn
+      id='leftPaneRollYourOwn'
+      key='leftPaneRollYourOwn'
+      style={{
+        display: 'relative',
+        alignItems: 'stretch',
+        paddingBottom: 50,
+        overflowY: 'scroll',
+        alignSelf: 'stretch',
+      }}
+    >
+      <Section>
+        <FlexRow
+          style={{
+            margin: 8,
+            gap: 12,
+            height: 22,
+          }}
+        >
+          <span style={{ fontWeight: 600 }}>Roll Your Own</span>
+        </FlexRow>
+        <FlexRow style={{ gap: 12, margin: 8 }}>
+          <select
+            value={currentSection ?? undefined}
+            style={{ flex: 1 }}
+            onChange={onChangeSection}
+          >
+            <option value=''>–</option>
+            {sections.map((section) => {
+              return (
+                <option key={`section-${section}`} value={section}>
+                  {section}
+                </option>
+              )
+            })}
+          </select>
+        </FlexRow>
+
+        {when(currentSection === 'Grid', <GridSection />)}
+      </Section>
+    </FlexColumn>
+  )
+})
+RollYourOwnPane.displayName = 'RollYourOwnPane'
+
+const GridSection = React.memo(() => {
+  return <FlexColumn style={{ gap: 10 }}>{/* TODO */}</FlexColumn>
+})
+GridSection.displayName = 'GridSection'
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 88d2b5b74c45..4d48a1772df5 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -15,6 +15,7 @@ export type FeatureName =
   | 'Debug - Print UIDs'
   | 'Debug – Connections'
   | 'Condensed Navigator Entries'
+  | 'Roll Your Own'
 
 export const AllFeatureNames: FeatureName[] = [
   // 'Dragging Reparents By Default', // Removing this option so that we can experiment on this later
@@ -30,6 +31,7 @@ export const AllFeatureNames: FeatureName[] = [
   'Debug - Print UIDs',
   'Debug – Connections',
   'Condensed Navigator Entries',
+  'Roll Your Own',
 ]
 
 let FeatureSwitches: { [feature in FeatureName]: boolean } = {
@@ -45,6 +47,7 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Debug - Print UIDs': false,
   'Debug – Connections': false,
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
+  'Roll Your Own': false,
 }
 
 export const STEGANOGRAPHY_ENABLED = false

From caed170ac3e5dc8aa502558741229185d87dd98e Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 1 Jul 2024 18:52:41 +0200
Subject: [PATCH 2/6] add storage and demo features

---
 .../left-pane/roll-your-own-pane.tsx          | 74 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index d09743e4b762..979bb284a97e 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -1,12 +1,48 @@
 import React from 'react'
 import { FlexColumn, FlexRow, Section } from '../../../uuiui'
 import { when } from '../../../utils/react-conditionals'
+import { useAtom } from 'jotai'
+import { UIGridRow } from '../../inspector/widgets/ui-grid-row'
+import { atomWithStorage } from 'jotai/utils'
 
 const sections = ['Grid'] as const
 type Section = (typeof sections)[number]
 
+type GridFeatures = {
+  foo: boolean
+}
+
+type RollYourOwnFeaturesTypes = {
+  Grid: GridFeatures
+}
+
+type RollYourOwnFeatures = {
+  [K in Section]: RollYourOwnFeaturesTypes[K]
+}
+
+let defaultRollYourOwnFeatures: RollYourOwnFeatures = {
+  Grid: {
+    foo: true,
+  },
+}
+
+const ROLL_YOUR_OWN_FEATURES_KEY: string = 'roll-your-own-features'
+
+export const rollYourOwnFeatures = atomWithStorage(
+  ROLL_YOUR_OWN_FEATURES_KEY,
+  defaultRollYourOwnFeatures,
+)
+
 export const RollYourOwnPane = React.memo(() => {
   const [currentSection, setCurrentSection] = React.useState<Section | null>(null)
+  const [features, setFeatures] = useAtom(rollYourOwnFeatures)
+
+  const onChange = React.useCallback(
+    (base: RollYourOwnFeatures) => async (update: Partial<RollYourOwnFeatures>) => {
+      setFeatures({ ...base, ...update })
+    },
+    [setFeatures],
+  )
 
   const onChangeSection = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
     const maybeSectionValue = e.target.value as Section
@@ -56,14 +92,44 @@ export const RollYourOwnPane = React.memo(() => {
           </select>
         </FlexRow>
 
-        {when(currentSection === 'Grid', <GridSection />)}
+        {when(
+          currentSection === 'Grid',
+          <GridSection features={features.Grid} onChange={onChange(features)} />,
+        )}
       </Section>
     </FlexColumn>
   )
 })
 RollYourOwnPane.displayName = 'RollYourOwnPane'
 
-const GridSection = React.memo(() => {
-  return <FlexColumn style={{ gap: 10 }}>{/* TODO */}</FlexColumn>
-})
+const GridSection = React.memo(
+  (props: { features: GridFeatures; onChange: (update: Partial<RollYourOwnFeatures>) => void }) => {
+    const onChange = React.useCallback(
+      (feat: keyof GridFeatures) => (e: React.ChangeEvent<HTMLInputElement>) => {
+        return props.onChange({ Grid: { ...props.features, [feat]: e.target.checked } })
+      },
+      [props],
+    )
+
+    return (
+      <FlexColumn style={{ gap: 10 }}>
+        {Object.entries(props.features).map(([feat, value]) => {
+          return (
+            <UIGridRow padded variant='<--1fr--><--1fr-->' key={`feat-${feat}`}>
+              <div>{feat}</div>
+              {when(
+                typeof value === 'boolean',
+                <input
+                  type='checkbox'
+                  checked={value}
+                  onChange={onChange(feat as keyof GridFeatures)}
+                />,
+              )}
+            </UIGridRow>
+          )
+        })}
+      </FlexColumn>
+    )
+  },
+)
 GridSection.displayName = 'GridSection'

From 2530b1de08ef1d80785a901ec008a8d534314dc2 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 1 Jul 2024 19:08:23 +0200
Subject: [PATCH 3/6] rename

---
 editor/src/components/canvas/design-panel-root.tsx            | 4 ++--
 .../src/components/navigator/left-pane/roll-your-own-pane.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 3662a906712e..a698ebcb451e 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -36,7 +36,7 @@ import { useAllowedToEditProject } from '../editor/store/collaborative-editing'
 import { useCanComment } from '../../core/commenting/comment-hooks'
 import { ElementsOutsideVisibleAreaIndicator } from '../editor/elements-outside-visible-area-indicator'
 import { isFeatureEnabled } from '../../utils/feature-switches'
-import { RollYourOwnPane } from '../navigator/left-pane/roll-your-own-pane'
+import { RollYourOwnFeaturesPane } from '../navigator/left-pane/roll-your-own-pane'
 
 function isCodeEditorEnabled(): boolean {
   if (typeof window !== 'undefined') {
@@ -250,7 +250,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
         {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
         {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
         {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
-        {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnPane />)}
+        {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnFeaturesPane />)}
       </SimpleFlexRow>
       <CanvasStrategyInspector />
     </FlexColumn>
diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index 979bb284a97e..1b49c66e932f 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -33,7 +33,7 @@ export const rollYourOwnFeatures = atomWithStorage(
   defaultRollYourOwnFeatures,
 )
 
-export const RollYourOwnPane = React.memo(() => {
+export const RollYourOwnFeaturesPane = React.memo(() => {
   const [currentSection, setCurrentSection] = React.useState<Section | null>(null)
   const [features, setFeatures] = useAtom(rollYourOwnFeatures)
 
@@ -100,7 +100,7 @@ export const RollYourOwnPane = React.memo(() => {
     </FlexColumn>
   )
 })
-RollYourOwnPane.displayName = 'RollYourOwnPane'
+RollYourOwnFeaturesPane.displayName = 'RollYourOwnFeaturesPane'
 
 const GridSection = React.memo(
   (props: { features: GridFeatures; onChange: (update: Partial<RollYourOwnFeatures>) => void }) => {

From 16c36315610f2a81b9e7214b44013c08cc65dfa1 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 1 Jul 2024 19:23:06 +0200
Subject: [PATCH 4/6] fix

---
 .../src/components/navigator/left-pane/roll-your-own-pane.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index 1b49c66e932f..90f998d2b449 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -38,7 +38,7 @@ export const RollYourOwnFeaturesPane = React.memo(() => {
   const [features, setFeatures] = useAtom(rollYourOwnFeatures)
 
   const onChange = React.useCallback(
-    (base: RollYourOwnFeatures) => async (update: Partial<RollYourOwnFeatures>) => {
+    (base: RollYourOwnFeatures) => (update: Partial<RollYourOwnFeatures>) => {
       setFeatures({ ...base, ...update })
     },
     [setFeatures],

From f22051c10df42ec2fc93a8fd92aa84cea2ea3c10 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 2 Jul 2024 09:16:10 +0200
Subject: [PATCH 5/6] simplify code

---
 .../left-pane/roll-your-own-pane.tsx          | 79 +++++++++----------
 1 file changed, 38 insertions(+), 41 deletions(-)

diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index 90f998d2b449..c83ace808d50 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -35,14 +35,6 @@ export const rollYourOwnFeatures = atomWithStorage(
 
 export const RollYourOwnFeaturesPane = React.memo(() => {
   const [currentSection, setCurrentSection] = React.useState<Section | null>(null)
-  const [features, setFeatures] = useAtom(rollYourOwnFeatures)
-
-  const onChange = React.useCallback(
-    (base: RollYourOwnFeatures) => (update: Partial<RollYourOwnFeatures>) => {
-      setFeatures({ ...base, ...update })
-    },
-    [setFeatures],
-  )
 
   const onChangeSection = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
     const maybeSectionValue = e.target.value as Section
@@ -92,44 +84,49 @@ export const RollYourOwnFeaturesPane = React.memo(() => {
           </select>
         </FlexRow>
 
-        {when(
-          currentSection === 'Grid',
-          <GridSection features={features.Grid} onChange={onChange(features)} />,
-        )}
+        {when(currentSection === 'Grid', <GridSection />)}
       </Section>
     </FlexColumn>
   )
 })
 RollYourOwnFeaturesPane.displayName = 'RollYourOwnFeaturesPane'
 
-const GridSection = React.memo(
-  (props: { features: GridFeatures; onChange: (update: Partial<RollYourOwnFeatures>) => void }) => {
-    const onChange = React.useCallback(
-      (feat: keyof GridFeatures) => (e: React.ChangeEvent<HTMLInputElement>) => {
-        return props.onChange({ Grid: { ...props.features, [feat]: e.target.checked } })
-      },
-      [props],
-    )
+const GridSection = React.memo(() => {
+  const [features, setFeatures] = useAtom(rollYourOwnFeatures)
 
-    return (
-      <FlexColumn style={{ gap: 10 }}>
-        {Object.entries(props.features).map(([feat, value]) => {
-          return (
-            <UIGridRow padded variant='<--1fr--><--1fr-->' key={`feat-${feat}`}>
-              <div>{feat}</div>
-              {when(
-                typeof value === 'boolean',
-                <input
-                  type='checkbox'
-                  checked={value}
-                  onChange={onChange(feat as keyof GridFeatures)}
-                />,
-              )}
-            </UIGridRow>
-          )
-        })}
-      </FlexColumn>
-    )
-  },
-)
+  const onChange = React.useCallback(
+    (feat: keyof GridFeatures) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFeatures((existing) => {
+        return {
+          ...existing,
+          Grid: {
+            ...existing.Grid,
+            [feat]: e.target.checked,
+          },
+        }
+      })
+    },
+    [setFeatures],
+  )
+
+  return (
+    <FlexColumn style={{ gap: 10 }}>
+      {Object.entries(features.Grid).map(([feat, value]) => {
+        return (
+          <UIGridRow padded variant='<--1fr--><--1fr-->' key={`feat-${feat}`}>
+            <div>{feat}</div>
+            {when(
+              typeof value === 'boolean',
+              <input
+                type='checkbox'
+                checked={value}
+                onChange={onChange(feat as keyof GridFeatures)}
+              />,
+            )}
+          </UIGridRow>
+        )
+      })}
+    </FlexColumn>
+  )
+})
 GridSection.displayName = 'GridSection'

From 38d0f32f2240ab76f36f08102f28354dce70ad4e Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 2 Jul 2024 09:18:08 +0200
Subject: [PATCH 6/6] storage when not tests

---
 .../navigator/left-pane/roll-your-own-pane.tsx         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index c83ace808d50..5a29e338b287 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import { FlexColumn, FlexRow, Section } from '../../../uuiui'
 import { when } from '../../../utils/react-conditionals'
-import { useAtom } from 'jotai'
+import { atom, useAtom } from 'jotai'
 import { UIGridRow } from '../../inspector/widgets/ui-grid-row'
 import { atomWithStorage } from 'jotai/utils'
+import { IS_TEST_ENVIRONMENT } from '../../../common/env-vars'
 
 const sections = ['Grid'] as const
 type Section = (typeof sections)[number]
@@ -28,10 +29,9 @@ let defaultRollYourOwnFeatures: RollYourOwnFeatures = {
 
 const ROLL_YOUR_OWN_FEATURES_KEY: string = 'roll-your-own-features'
 
-export const rollYourOwnFeatures = atomWithStorage(
-  ROLL_YOUR_OWN_FEATURES_KEY,
-  defaultRollYourOwnFeatures,
-)
+export const rollYourOwnFeatures = IS_TEST_ENVIRONMENT
+  ? atom(defaultRollYourOwnFeatures)
+  : atomWithStorage(ROLL_YOUR_OWN_FEATURES_KEY, defaultRollYourOwnFeatures)
 
 export const RollYourOwnFeaturesPane = React.memo(() => {
   const [currentSection, setCurrentSection] = React.useState<Section | null>(null)