Change preview button to a switch

Author: gjmooney

packages/base/package.json

@@ -68,6 +68,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@rjsf/core": "^4.2.0",

packages/base/src/formbuilder/objectform/StoryForm.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import { Switch } from '@/src/shared/components/Switch';
+
+interface IPreviewModeSwitchProps {
+  checked: boolean;
+  onCheckedChange: () => void;
+}
+
+export function PreviewModeSwitch({
+  checked,
+  onCheckedChange,
+}: IPreviewModeSwitchProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        padding: '1rem',
+      }}
+    >
+      <label htmlFor="preview-mode-switch" style={{ fontSize: '0.875rem' }}>
+        Preview Mode
+      </label>
+      <Switch
+        id="preview-mode-switch"
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+      />
+    </div>
+  );
+}

packages/base/src/panelview/components/story-maps/PreviewModeSwitch.tsx

@@ -2,18 +2,17 @@ import { IJGISStoryMap, IJupyterGISModel } from '@jupytergis/schema';
 import jgisSchema from '@jupytergis/schema/lib/schema/project/jgis.json';
 import React, { useMemo } from 'react';
 
-import { StoryEditorForm } from '@/src/formbuilder/objectform/StoryForm';
+import { BaseForm } from '@/src/formbuilder';
 import { deepCopy } from '@/src/tools';
 import { IDict } from '@/src/types';
 
 interface IStoryPanelProps {
   model: IJupyterGISModel;
-  togglePreview: () => void;
 }
 
 const storyMapSchema: IDict = deepCopy(jgisSchema.definitions.jGISStoryMap);
 
-export function StoryEditorPanel({ model, togglePreview }: IStoryPanelProps) {
+export function StoryEditorPanel({ model }: IStoryPanelProps) {
   const { landmarkId, story } = useMemo(() => {
     return model.getSelectedStory();
   }, [model, model.sharedModel.storiesMap]);
@@ -24,23 +23,21 @@ export function StoryEditorPanel({ model, togglePreview }: IStoryPanelProps) {
 
   if (!story) {
     return (
-      <div style={{ padding: '10px' }}>
+      <div style={{ padding: '0 0.5rem 0.5rem 0.5rem' }}>
         <p>No story map available. Create one by adding a landmark.</p>
       </div>
     );
   }
 
   return (
-    <div style={{ padding: '10px' }}>
-      <h3>Story Map Properties</h3>
-      <StoryEditorForm
+    <div style={{ padding: '0 0.5rem 0.5rem 0.5rem' }}>
+      <BaseForm
         formContext="update"
         sourceData={story}
         model={model}
         schema={storyMapSchema}
         syncData={syncStoryData}
         filePath={model.filePath}
-        togglePreview={togglePreview}
       />
     </div>
   );

packages/base/src/panelview/components/story-maps/StoryEditorPanel.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@jupyter/react-components';
 import {
   IJGISLayer,
   IJGISStoryMap,
@@ -11,10 +10,9 @@ import StoryNavBar from './StoryNavBar';
 
 interface IStoryViewerPanelProps {
   model: IJupyterGISModel;
-  togglePreview: () => void;
 }
 
-function StoryViewerPanel({ model, togglePreview }: IStoryViewerPanelProps) {
+function StoryViewerPanel({ model }: IStoryViewerPanelProps) {
   const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(0);
   const [storyData, setStoryData] = useState<IJGISStoryMap | null>(null);
 
@@ -200,7 +198,6 @@ function StoryViewerPanel({ model, togglePreview }: IStoryViewerPanelProps) {
           hasNext={currentIndexDisplayed < landmarks.length - 1}
         />
       )}
-      <Button onClick={togglePreview}>Edit Story</Button>
     </div>
   );
 }

packages/base/src/panelview/components/story-maps/StoryViewerPanel.tsx

@@ -8,15 +8,16 @@ import * as React from 'react';
 
 import { AnnotationsPanel } from './annotationPanel';
 import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPanel';
+import { PreviewModeSwitch } from './components/story-maps/PreviewModeSwitch';
+import StoryEditorPanel from './components/story-maps/StoryEditorPanel';
+import StoryViewerPanel from './components/story-maps/StoryViewerPanel';
 import { ObjectPropertiesReact } from './objectproperties';
 import {
   PanelTabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from '../shared/components/Tabs';
-import StoryEditorPanel from './components/story-maps/StoryEditorPanel';
-import StoryViewerPanel from './components/story-maps/StoryViewerPanel';
 
 interface IRightPanelProps {
   formSchemaRegistry: IJGISFormSchemaRegistry;
@@ -141,16 +142,16 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
           className="jgis-panel-tab-content"
           style={{ paddingTop: 0 }}
         >
-          {settings.storyMapPresentation || !displayEditor ? (
-            <StoryViewerPanel
-              model={props.model}
-              togglePreview={toggleEditor}
+          {!settings.storyMapPresentation && (
+            <PreviewModeSwitch
+              checked={!displayEditor}
+              onCheckedChange={toggleEditor}
             />
+          )}
+          {settings.storyMapPresentation || !displayEditor ? (
+            <StoryViewerPanel model={props.model} />
           ) : (
-            <StoryEditorPanel
-              model={props.model}
-              togglePreview={toggleEditor}
-            />
+            <StoryEditorPanel model={props.model} />
           )}
         </TabsContent>
 

packages/base/src/panelview/rightpanel.tsx

@@ -0,0 +1,24 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn('jgis-switch', className)}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="jgis-switch-thumb"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

packages/base/src/shared/components/Switch.tsx

@@ -21,6 +21,7 @@
 @import url('./shared/dropdownMenu.css');
 @import url('./shared/badge.css');
 @import url('./shared/checkbox.css');
+@import url('./shared/switch.css');
 
 .errors {
   color: var(--jp-warn-color0);

packages/base/style/base.css

@@ -0,0 +1,63 @@
+.jgis-switch {
+  display: inline-flex;
+  height: 1.15rem;
+  width: 2rem;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 9999px !important;
+  border: 1px solid transparent;
+  /* border: 1px solid var(--jp-brand-color3); */
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  cursor: pointer;
+}
+
+.jgis-switch:focus-visible {
+  border-color: var(--jp-border-color0);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--jp-ui-font-color0), transparent 50%);
+}
+
+.jgis-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.jgis-switch[data-state='checked'] {
+  background-color: var(--jp-accent-color0);
+}
+
+.jgis-switch[data-state='unchecked'] {
+  background-color: var(--jp-layout-color2);
+}
+
+.jgis-switch-thumb {
+  background-color: var(--jp-layout-color1);
+  pointer-events: none;
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  box-shadow: none;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateX(0);
+}
+
+.jgis-switch-thumb[data-state='checked'] {
+  transform: translateX(calc(100% - 6px));
+}
+
+.jgis-switch-thumb[data-state='unchecked'] {
+  transform: translateX(-2px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .jgis-switch-thumb[data-state='unchecked'] {
+    background-color: var(--jp-ui-font-color0);
+  }
+
+  .jgis-switch-thumb[data-state='checked'] {
+    background-color: var(--jp-layout-color1);
+  }
+}

packages/base/style/shared/switch.css

@@ -899,6 +899,7 @@ __metadata:
     "@radix-ui/react-dropdown-menu": ^2.1.15
     "@radix-ui/react-popover": ^1.1.14
     "@radix-ui/react-slot": ^1.2.3
+    "@radix-ui/react-switch": ^1.2.6
     "@radix-ui/react-tabs": ^1.1.12
     "@radix-ui/react-toggle-group": ^1.1.10
     "@rjsf/core": ^4.2.0
@@ -3138,6 +3139,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-switch@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "@radix-ui/react-switch@npm:1.2.6"
+  dependencies:
+    "@radix-ui/primitive": 1.1.3
+    "@radix-ui/react-compose-refs": 1.1.2
+    "@radix-ui/react-context": 1.1.2
+    "@radix-ui/react-primitive": 2.1.3
+    "@radix-ui/react-use-controllable-state": 1.2.2
+    "@radix-ui/react-use-previous": 1.1.1
+    "@radix-ui/react-use-size": 1.1.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 737ebe7cd5544455411e8a606980e4491281fb38a829eb08a4505251f51c32dcae0b9f13b9ab0b574980d4e228e352b1613971f0b2a516d0fe2eefe2bb318231
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-tabs@npm:^1.1.12":
   version: 1.1.13
   resolution: "@radix-ui/react-tabs@npm:1.1.13"