Roll your own tab (mostly empty)

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 { RollYourOwnFeaturesPane } 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, <RollYourOwnFeaturesPane />)}
       </SimpleFlexRow>
       <CanvasStrategyInspector />
     </FlexColumn>

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

editor/src/components/navigator/left-pane/roll-your-own-pane.tsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import { FlexColumn, FlexRow, Section } from '../../../uuiui'
+import { when } from '../../../utils/react-conditionals'
+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]
+
+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 = 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)
+
+  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>
+  )
+})
+RollYourOwnFeaturesPane.displayName = 'RollYourOwnFeaturesPane'
+
+const GridSection = React.memo(() => {
+  const [features, setFeatures] = useAtom(rollYourOwnFeatures)
+
+  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'

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