first commit

services/web/frontend/stories/editor/layout-dropdown-button.stories.tsx

@@ -0,0 +1,35 @@
+import { LayoutDropdownButtonUi } from '@/features/editor-navigation-toolbar/components/layout-dropdown-button'
+import { Meta } from '@storybook/react'
+import { ComponentProps } from 'react'
+
+export const LayoutDropdown = (
+  props: ComponentProps<typeof LayoutDropdownButtonUi>
+) => (
+  <div className="toolbar toolbar-header justify-content-end m-4">
+    <div className="toolbar-right">
+      <LayoutDropdownButtonUi {...props} />
+    </div>
+  </div>
+)
+
+const meta: Meta<typeof LayoutDropdownButtonUi> = {
+  title: 'Editor / Toolbar / Layout Dropdown',
+  component: LayoutDropdownButtonUi,
+  argTypes: {
+    view: {
+      control: 'select',
+      options: [null, 'editor', 'file', 'pdf', 'history'],
+    },
+    detachRole: {
+      control: 'select',
+      options: ['detacher', 'detached'],
+    },
+    pdfLayout: {
+      control: 'select',
+      options: ['sideBySide', 'flat'],
+    },
+  },
+  parameters: { actions: { argTypesRegex: '^handle.*' } },
+}
+
+export default meta

services/web/frontend/stories/editor/pdf-compile-button.stories.tsx

@@ -0,0 +1,54 @@
+import { FC } from 'react'
+import type { Meta } from '@storybook/react'
+import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
+import { ScopeDecorator } from '../decorators/scope'
+import { CompileContext } from '@/shared/context/local-compile-context'
+import { DetachCompileContext } from '@/shared/context/detach-compile-context'
+
+export const CompileButton: FC<CompileContext> = (props: CompileContext) => (
+  <DetachCompileContext.Provider value={props}>
+    <div className="pdf m-5">
+      <div className="toolbar toolbar-pdf toolbar-pdf-hybrid btn-toolbar">
+        <div className="toolbar-pdf-left">
+          <PdfCompileButton />
+        </div>
+      </div>
+    </div>
+  </DetachCompileContext.Provider>
+)
+
+const args: Partial<CompileContext> = {
+  autoCompile: false,
+  compiling: false,
+  draft: false,
+  hasChanges: false,
+  stopOnFirstError: false,
+  stopOnValidationError: false,
+  animateCompileDropdownArrow: false,
+}
+
+const meta: Meta<typeof CompileButton> = {
+  title: 'Editor / Toolbar / Compile Button',
+  component: CompileButton,
+  // @ts-ignore
+  decorators: [ScopeDecorator],
+  argTypes: {
+    startCompile: { action: 'startCompile' },
+    setAutoCompile: { action: 'setAutoCompile' },
+    setCompiling: { action: 'setCompiling' },
+    setDraft: { action: 'setDraft' },
+    setStopOnFirstError: { action: 'setStopOnFirstError' },
+    setError: { action: 'setError' },
+    setHasLintingError: { action: 'setHasLintingError' },
+    setPosition: { action: 'setPosition' },
+    setStopOnValidationError: { action: 'setStopOnValidationError' },
+    recompileFromScratch: { action: 'recompileFromScratch' },
+    stopCompile: { action: 'stopCompile' },
+    setAnimateCompileDropdownArrow: {
+      action: 'setAnimateCompileDropdownArrow',
+    },
+  },
+  args,
+}
+
+export default meta