tony/move-help-hook-into-another-library

apps/zipper.dev/package.json

@@ -112,6 +112,7 @@
     "monaco-editor-workers": "^0.45.0",
     "monaco-jsx-highlighter": "^2.0.4",
     "mongodb": "^6.3.0",
+    "use-helper-inspector": "git+https://github.com/Zipper-Inc/use-helper-inspector.git",
     "mysql2": "^3.6.5",
     "ndjson": "^2.0.0",
     "next": "^13.2.0",

apps/zipper.dev/src/components/playground/app-edit-sidebar.tsx

@@ -16,7 +16,7 @@ import { TabButton } from '@zipper/ui';
 import { useMemo, useState } from 'react';
 import { HiEye, HiPencil } from 'react-icons/hi2';
 import { useEditorContext } from '../context/editor-context';
-import { useHelpBorder, useHelpMode } from '../context/help-mode-context';
+import { useHelpBorder } from 'use-helper-inspector';
 import { AppConsole } from './app-console';
 import AppEditSidebarApplet from './app-edit-sidebar-applet';
 

apps/zipper.dev/src/components/playground/playground-sidebar.tsx

@@ -27,7 +27,7 @@ import {
 } from '@chakra-ui/react';
 import React, { useEffect, useRef, useState } from 'react';
 import AddScriptForm from '~/components/playground/add-script-form';
-import { useHelpBorder } from '~/components/context/help-mode-context';
+import { useHelpBorder } from 'use-helper-inspector';
 
 import { Script } from '@prisma/client';
 import { trpc } from '~/utils/trpc';

apps/zipper.dev/src/components/playground/playground.tsx

@@ -43,9 +43,9 @@ import { IconButton } from '@chakra-ui/react';
 import { FiChevronLeft, FiX } from 'react-icons/fi';
 import {
   useHelpMode,
-  inspectableComponents,
   useHelpBorder,
-} from '../context/help-mode-context';
+  type InspectableComponents,
+} from 'use-helper-inspector';
 
 import { FeedbackModal } from '~/components/auth/feedback-modal';
 import { ContactModal } from '~/components/playground/contact-modal';
@@ -518,3 +518,50 @@ function InspectUiHelpMode(props: { onClose: () => void }) {
     </Box>
   );
 }
+
+export const inspectableComponents: InspectableComponents = {
+  PlaygroundSidebar: {
+    name: 'Sidebar',
+    description:
+      'The Playground Sidebar is where you can find the code editor and the console.',
+  },
+  PlaygroundCode: {
+    name: 'Editor',
+    description: 'The Playground Code Editor is where you can write your code.',
+  },
+  PreviewPanel: {
+    name: 'Preview',
+    description: `(if lib file) Since you are not exporting a handler function, there's nothing important here.
+    (if handler) You can preview the generated form for your hander function's input and actually run it here to test it out.`,
+  },
+  ConsoleTab: {
+    name: 'Console',
+    description: `Anything that you send with console.* as well as save, deploy, and other messages and/or errors that come from Zipper will show up in your Console. `,
+  },
+  CodeTab: {
+    name: 'Code',
+    description: `Edit, run, and play with this applet's code in this section.`,
+  },
+  ScheduleTab: {
+    name: 'Schedule',
+    description:
+      'Use cron syntax or natural language to schedule a run for any handler in this applet.',
+  },
+  SecretsTab: {
+    name: 'Secrets',
+    description: `Secrets
+      Create and manage environment secrets of this applet. Access them with Deno.env.get('YOUR_SECRET').`,
+  },
+  RunsTab: {
+    name: 'Runs',
+    description: `View this applet's run history including inputs, outputs, and who ran it.`,
+  },
+  VersionsTab: {
+    name: 'Versions',
+    description: `Publish or rollback to any saved version of this applet..`,
+  },
+  SettingsTab: {
+    name: 'Settings',
+    description: `Change the name, description, and other settings of this applet.`,
+  },
+};

apps/zipper.dev/src/components/playground/tab-code.tsx

@@ -14,18 +14,14 @@ import {
 } from '@chakra-ui/react';
 import { Script } from '@prisma/client';
 import { Markdown, useCmdOrCtrl } from '@zipper/ui';
-import { useSession } from 'next-auth/react';
 import dynamic from 'next/dynamic';
 import { useEffect, useRef, useState } from 'react';
 import { FiEye } from 'react-icons/fi';
 import {
   AppEditSidebarContextType,
   AppEditSidebarProvider,
 } from '~/components/context/app-edit-sidebar-context';
-import {
-  useHelpBorder,
-  useHelpMode,
-} from '~/components/context/help-mode-context';
+import { useHelpBorder } from 'use-helper-inspector';
 import { AppEditSidebar } from '~/components/playground/app-edit-sidebar';
 import { ConnectorId } from '~/connectors/createConnector';
 import { useUser } from '~/hooks/use-user';

apps/zipper.dev/src/pages/[resource-owner]/[app-slug]/[...playground].tsx

@@ -7,10 +7,13 @@ import Head from 'next/head';
 import SuperJSON from 'superjson';
 import SignedIn from '~/components/auth/signed-in';
 import EditorContextProvider from '~/components/context/editor-context';
-import { HelpModeProvider } from '~/components/context/help-mode-context';
+import { HelpModeProvider } from 'use-helper-inspector';
 import { DefaultLayout } from '~/components/default-layout';
 import Header from '~/components/header';
-import { Playground } from '~/components/playground/playground';
+import {
+  Playground,
+  inspectableComponents,
+} from '~/components/playground/playground';
 import { NextPageWithLayout } from '~/pages/_app';
 import { createContext } from '~/server/context';
 import { trpcRouter } from '~/server/routers/_app';
@@ -73,7 +76,7 @@ const PlaygroundPage: NextPageWithLayout<Props> = ({
       refetchApp={refetchApp}
       readOnly={appQuery.data.canUserEdit === false}
     >
-      <HelpModeProvider>
+      <HelpModeProvider inspectableComponents={inspectableComponents}>
         <Playground app={appQuery.data} filename={filename} tab={tab} />
       </HelpModeProvider>
     </EditorContextProvider>

yarn.lock

@@ -17177,6 +17177,12 @@ use-debounce@^9.0.3:
   resolved "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.3.tgz"
   integrity sha512-FhtlbDtDXILJV7Lix5OZj5yX/fW1tzq+VrvK1fnT2bUrPOGruU9Rw8NCEn+UI9wopfERBEZAOQ8lfeCJPllgnw==
 
+"use-helper-inspector@git+https://github.com/Zipper-Inc/use-helper-inspector.git":
+  version "0.2.0"
+  resolved "git+https://github.com/Zipper-Inc/use-helper-inspector.git#8bbf41c8a2638bbca83d6e738db5265166c121b6"
+  dependencies:
+    react "^18.2.0"
+
 use-isomorphic-layout-effect@^1.1.1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz"