@bettercms-ai/kit 0.1.0

package/src/core/components/dialog/__workshop__/index.ts

@@ -0,0 +1,19 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'components/dialog',
+  title: 'Dialog',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
+    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
+    {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
+    {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
+    {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
+    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
+    {name: 'panes', title: 'Panes', component: lazy(() => import('./panes'))},
+    {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
+    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
+  ],
+})

package/src/core/components/dialog/__workshop__/layering.tsx

@@ -0,0 +1,41 @@
+import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@bettercms-ai/kit'
+import {useAction} from '@bettercms-ai/kit-workshop'
+
+export default function LayeringStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <LayerProvider>
+        <Layer zOffset={10} id="a">
+          <Card padding={2} shadow={2}>
+            <DebugLayer />
+          </Card>
+        </Layer>
+        <Layer zOffset={10} id="b">
+          <Card padding={2} shadow={2}>
+            <DebugLayer />
+          </Card>
+        </Layer>
+        <Dialog
+          header="Layering example"
+          id="layering-example"
+          onClose={useAction('onEscape')}
+          zOffset={100}
+        >
+          <Box padding={4}>
+            <DebugLayer />
+          </Box>
+        </Dialog>
+      </LayerProvider>
+    </Box>
+  )
+}
+
+function DebugLayer() {
+  const layer = useLayer()
+
+  return (
+    <Code language="json" size={1}>
+      {JSON.stringify(layer, null, 2)}
+    </Code>
+  )
+}

package/src/core/components/dialog/__workshop__/nested.tsx

@@ -0,0 +1,72 @@
+import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@bettercms-ai/kit'
+import {useEffect, useRef, useState} from 'react'
+
+export default function NestedStory() {
+  const [open1] = useState(true)
+  const [open2, setOpen2] = useState(false)
+  const [open3, setOpen3] = useState(false)
+
+  const dialog2Button = useRef<HTMLButtonElement>(null)
+  const dialog3Button = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (!open2) dialog2Button.current?.focus()
+  }, [open2])
+
+  useEffect(() => {
+    if (!open3) dialog3Button.current?.focus()
+  }, [open3])
+
+  return (
+    <LayerProvider>
+      {open1 && (
+        <Dialog animate cardShadow={1} header="Dialog 1" id="dialog1">
+          <Box padding={4}>
+            <Button onClick={() => setOpen2(true)} ref={dialog2Button} text="Open Dialog 2" />
+          </Box>
+
+          {open2 && (
+            <Dialog
+              animate
+              cardShadow={2}
+              header="Dialog 2"
+              id="dialog2"
+              onClose={() => setOpen2(false)}
+              onClickOutside={() => setOpen2(false)}
+            >
+              <Box padding={4}>
+                <Button onClick={() => setOpen3(true)} ref={dialog3Button} text="Open Dialog 3" />
+              </Box>
+
+              {open3 && (
+                <Dialog
+                  animate
+                  cardShadow={4}
+                  header="Dialog 3"
+                  id="dialog3"
+                  onClose={() => setOpen3(false)}
+                  onClickOutside={() => setOpen3(false)}
+                >
+                  <Box padding={4}>
+                    <MenuButton
+                      button={<Button text="Test" />}
+                      id="menu3"
+                      popover={{animate: true}}
+                      menu={
+                        <Menu>
+                          <MenuItem text="Test" />
+                          <MenuItem text="Test" />
+                        </Menu>
+                      }
+                      portal
+                    />
+                  </Box>
+                </Dialog>
+              )}
+            </Dialog>
+          )}
+        </Dialog>
+      )}
+    </LayerProvider>
+  )
+}

package/src/core/components/dialog/__workshop__/onScroll.tsx

@@ -0,0 +1,39 @@
+import {Box, Dialog, LayerProvider, Text} from '@bettercms-ai/kit'
+import {useAction} from '@bettercms-ai/kit-workshop'
+import {useEffect, useRef} from 'react'
+
+export default function OnScrollStory() {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const handleScroll = useAction('scroll')
+
+  useEffect(() => {
+    const el = ref.current
+
+    if (!el) return
+
+    el.addEventListener('scroll', handleScroll, {passive: true})
+
+    return () => el.removeEventListener('scroll', handleScroll)
+  }, [handleScroll])
+
+  return (
+    <LayerProvider>
+      <Dialog contentRef={ref} header="On scroll example" id="on-scroll-example">
+        <Box padding={4}>
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
+            hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi
+            imperdiet quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis,
+            ex quam luctus felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at
+            rhoncus a, tempus vel neque. Vestibulum ante ipsum primis in faucibus orci luctus et
+            ultrices posuere cubilia curae; Sed id mauris quam. Nam finibus sapien non lacinia
+            ultricies. Integer fermentum tortor at pellentesque faucibus. In venenatis commodo
+            placerat. Curabitur commodo tortor libero, vel pellentesque elit luctus sodales. Donec
+            mattis tristique nunc ac lacinia. Vestibulum non pulvinar turpis, posuere consequat
+            arcu. Fusce ut urna blandit, finibus nisi a, molestie elit. Nulla sed eleifend mi.
+          </Text>
+        </Box>
+      </Dialog>
+    </LayerProvider>
+  )
+}

package/src/core/components/dialog/__workshop__/panes.tsx

@@ -0,0 +1,82 @@
+import {useCallback, useState} from 'react'
+import {styled} from 'styled-components'
+
+import {Box, Button, Card, Flex} from '../../../primitives'
+import {BoundaryElementProvider, PortalProvider} from '../../../utils'
+import {Menu, MenuButton, MenuItem} from '../../menu'
+import {Dialog} from '../dialog'
+
+export default function PanesStory() {
+  return (
+    <Flex height="fill">
+      <Pane id="A" />
+      <Pane id="B" borderLeft />
+    </Flex>
+  )
+}
+
+const PaneRoot = styled(Card)`
+  position: relative;
+`
+
+const PanePortal = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+`
+
+function Pane(props: {borderLeft?: boolean; id: string}) {
+  const {borderLeft, id} = props
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const handleClose = useCallback(() => {
+    setDialogOpen(false)
+  }, [])
+
+  return (
+    <BoundaryElementProvider element={element}>
+      <PortalProvider element={portalElement}>
+        <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
+          <Box padding={4}>
+            <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
+          </Box>
+
+          <PanePortal ref={setPortalElement} />
+        </PaneRoot>
+
+        {dialogOpen && (
+          <Dialog
+            header={`Dialog ${id}`}
+            id={id}
+            onClickOutside={handleClose}
+            onClose={handleClose}
+            position="absolute"
+          >
+            <Box padding={4}>
+              <MenuButton
+                button={<Button text="Open menu" />}
+                id={`${id}-menu`}
+                menu={
+                  <Menu>
+                    <MenuItem text="Item 1" />
+                    <MenuItem text="Item 2" />
+                    <MenuItem text="Item 3" />
+                  </Menu>
+                }
+              />
+            </Box>
+          </Dialog>
+        )}
+      </PortalProvider>
+    </BoundaryElementProvider>
+  )
+}

package/src/core/components/dialog/__workshop__/position.tsx

@@ -0,0 +1,30 @@
+import {ArrowDownIcon, ArrowUpIcon} from '@bettercms-ai/icons'
+import {Box, Dialog, LayerProvider, Stack, Text} from '@bettercms-ai/kit'
+import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '../../../__workshop__/constants'
+
+export default function PositionStory() {
+  const open = useBoolean('Open', true, 'Props')
+  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS, 'fixed', 'Props')
+
+  return (
+    <Box padding={4}>
+      <Box style={{padding: 'calc(100vh - 100px) 0'}}>
+        <Stack space={3}>
+          <Text align="center">
+            <ArrowUpIcon />
+          </Text>
+          <Text align="center">Scrollable</Text>
+          <Text align="center">
+            <ArrowDownIcon />
+          </Text>
+        </Stack>
+
+        <LayerProvider>
+          {open && <Dialog header="Position example" id="position-example" position={position} />}
+        </LayerProvider>
+      </Box>
+    </Box>
+  )
+}

package/src/core/components/dialog/__workshop__/props.tsx

@@ -0,0 +1,75 @@
+import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@bettercms-ai/kit'
+import {useBoolean, useSelect, useText} from '@bettercms-ai/kit-workshop'
+import {useCallback, useRef, useState} from 'react'
+
+import {WORKSHOP_WIDTH_OPTIONS} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const header = useText('Header', 'Props example', 'Props')
+  const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
+  const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
+  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 0, 'Props')
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+
+  const handleClose = useCallback(() => {
+    setOpen(false)
+    buttonRef.current?.focus()
+  }, [])
+
+  return (
+    <LayerProvider>
+      <Box padding={[4, 5, 6]}>
+        <Button
+          id="open-dialog-button"
+          onClick={() => setOpen(true)}
+          ref={buttonRef}
+          text="Open dialog"
+        />
+
+        {open && (
+          <Dialog
+            __unstable_hideCloseButton={hideCloseButton}
+            header={header}
+            id="dialog"
+            onClickOutside={onClickOutside ? handleClose : undefined}
+            onClose={handleClose}
+            open={open}
+            width={width}
+          >
+            <Box padding={4}>
+              <Stack space={4}>
+                <Text>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
+                  aliquet imperdiet.
+                </Text>
+                <Button id="button-1" text="Focus test" />
+                <Text>
+                  Sed in hendrerit metus. Sed sapien neque, imperdiet eu justo sed, vestibulum
+                  mollis dolor.
+                </Text>
+                <Button id="button-2" text="Focus test" />
+                <Text>
+                  Nulla sit amet ipsum ligula. Duis sit amet velit tempor, ultricies mauris
+                  dignissim, mollis enim.
+                </Text>
+                <Button id="button-3" text="Focus test" />
+                <Text>Cras quis elit non mauris faucibus molestie non non augue. </Text>
+                <Text>
+                  Proin suscipit gravida sodales. Morbi vel purus molestie, rhoncus augue sit amet,
+                  auctor justo.
+                </Text>
+                <Button id="button-4" text="Focus test" />
+                <Text>Proin lobortis nunc a tellus condimentum, a ultrices arcu egestas.</Text>
+                <Button id="button-5" text="Focus test" />
+                <Text>
+                  Suspendisse augue nibh, euismod sit amet sapien nec, molestie dignissim magna.
+                </Text>
+              </Stack>
+            </Box>
+          </Dialog>
+        )}
+      </Box>
+    </LayerProvider>
+  )
+}

package/src/core/components/dialog/__workshop__/provider.tsx

@@ -0,0 +1,11 @@
+import {Dialog, DialogProvider} from '@bettercms-ai/kit'
+
+export default function ProviderStory() {
+  return (
+    <DialogProvider position="absolute" zOffset={1000}>
+      <Dialog header="Outer" id="provider-example">
+        <Dialog header="Inner" id="nested-provider-example" />
+      </Dialog>
+    </DialogProvider>
+  )
+}

package/src/core/components/dialog/__workshop__/wrapped.tsx

@@ -0,0 +1,76 @@
+import {Box, Button, Dialog, DialogProps, LayerProvider, useLayer} from '@bettercms-ai/kit'
+import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+
+export default function WrappedStory() {
+  return (
+    <LayerProvider zOffset={100}>
+      <Box padding={4}>
+        <DialogButton level={0} />
+      </Box>
+    </LayerProvider>
+  )
+}
+
+function DialogButton(props: {level: number}) {
+  const {level} = props
+  const [open, setOpen] = useState(false)
+
+  const openRef = useRef(open)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (openRef.current !== open) {
+      openRef.current = open
+
+      if (!open) {
+        // focus the button that opened the dialog
+        // buttonRef.current?.focus()
+      }
+    }
+  }, [open])
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} ref={buttonRef} text={`Open dialog ${level + 1}`} />
+
+      {open && (
+        <WrappedDialog
+          header={`WrappedDialog ${level + 1}`}
+          id={`wrapped-${level + 1}`}
+          onClickOutside={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <Box padding={4}>
+            <DialogButton level={level + 1} />
+          </Box>
+        </WrappedDialog>
+      )}
+    </>
+  )
+}
+
+function WrappedDialog(props: DialogProps & {children?: ReactNode}) {
+  const layer = useLayer()
+  const isTopLayer = layer.size === 1
+
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  const [lastFocusedElement, setLastFocusedElement] = useState<HTMLElement | null>(null)
+
+  const handleContentFocus = useCallback(() => {
+    const containsActiveElement = dialogRef.current?.contains(document.activeElement)
+
+    if (containsActiveElement) {
+      setLastFocusedElement(document.activeElement as HTMLElement)
+    }
+  }, [])
+
+  // Set focus on the last focused element when the dialog becomes the top layer.
+  useEffect(() => {
+    if (isTopLayer && lastFocusedElement) {
+      lastFocusedElement.focus()
+    }
+  }, [isTopLayer, lastFocusedElement])
+
+  return <Dialog {...props} data-size={layer.size} onFocus={handleContentFocus} ref={dialogRef} />
+}