Skip to content

Commit

Permalink
feat(react): add missing exports
Browse files Browse the repository at this point in the history
  • Loading branch information
@mverissimo
mverissimo committed Jul 10, 2024
1 parent e6da2ac commit 5c02ee3
Show file tree
Hide file tree
Showing 8 changed files with 167 additions and 219 deletions.
90 changes: 38 additions & 52 deletions packages/react/src/components/floating-panel/examples/basic.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,45 @@
import {
FloatingPanel,
FloatingPanelBody,
FloatingPanelCloseTrigger,
FloatingPanelContent,
FloatingPanelDragTrigger,
FloatingPanelHeader,
FloatingPanelMaximizeTrigger,
FloatingPanelMinimizeTrigger,
FloatingPanelPositioner,
FloatingPanelResizeTrigger,
FloatingPanelRestoreTrigger,
FloatingPanelTitle,
FloatingPanelTrigger,
Portal,
} from '../..'

import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
import { FloatingPanel, Portal } from '../..'

export const Basic = () => (
<FloatingPanel.Root>
<FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
<FloatingPanelPositioner>
<FloatingPanelContent>
<FloatingPanelDragTrigger>
<FloatingPanelHeader>
<FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
<div data-scope="floating-panel" data-part="trigger-group">
<FloatingPanelMinimizeTrigger>
<Minus />
</FloatingPanelMinimizeTrigger>
<FloatingPanelMaximizeTrigger>
<Maximize2 />
</FloatingPanelMaximizeTrigger>
<FloatingPanelRestoreTrigger>
<ArrowDownLeft />
</FloatingPanelRestoreTrigger>
<FloatingPanelCloseTrigger>
<XIcon />
</FloatingPanelCloseTrigger>
</div>
</FloatingPanelHeader>
</FloatingPanelDragTrigger>
<FloatingPanelBody>
<p>Some content</p>
</FloatingPanelBody>
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
<Portal>
<FloatingPanel.Positioner>
<FloatingPanel.Content>
<FloatingPanel.DragTrigger>
<FloatingPanel.Header>
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
<div data-scope="floating-panel" data-part="trigger-group">
<FloatingPanel.MinimizeTrigger>
<Minus />
</FloatingPanel.MinimizeTrigger>
<FloatingPanel.MaximizeTrigger>
<Maximize2 />
</FloatingPanel.MaximizeTrigger>
<FloatingPanel.RestoreTrigger>
<ArrowDownLeft />
</FloatingPanel.RestoreTrigger>
<FloatingPanel.CloseTrigger>
<XIcon />
</FloatingPanel.CloseTrigger>
</div>
</FloatingPanel.Header>
</FloatingPanel.DragTrigger>
<FloatingPanel.Body>
<p>Some content</p>
</FloatingPanel.Body>

<FloatingPanelResizeTrigger axis="n" />
<FloatingPanelResizeTrigger axis="e" />
<FloatingPanelResizeTrigger axis="w" />
<FloatingPanelResizeTrigger axis="s" />
<FloatingPanelResizeTrigger axis="ne" />
<FloatingPanelResizeTrigger axis="se" />
<FloatingPanelResizeTrigger axis="sw" />
<FloatingPanelResizeTrigger axis="nw" />
</FloatingPanelContent>
</FloatingPanelPositioner>
<FloatingPanel.ResizeTrigger axis="n" />
<FloatingPanel.ResizeTrigger axis="e" />
<FloatingPanel.ResizeTrigger axis="w" />
<FloatingPanel.ResizeTrigger axis="s" />
<FloatingPanel.ResizeTrigger axis="ne" />
<FloatingPanel.ResizeTrigger axis="se" />
<FloatingPanel.ResizeTrigger axis="sw" />
<FloatingPanel.ResizeTrigger axis="nw" />
</FloatingPanel.Content>
</FloatingPanel.Positioner>
</Portal>
</FloatingPanel.Root>
)
76 changes: 30 additions & 46 deletions packages/react/src/components/floating-panel/examples/controlled.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,49 @@
import { useState } from 'react'
import {
FloatingPanel,
FloatingPanelBody,
FloatingPanelCloseTrigger,
FloatingPanelContent,
FloatingPanelDragTrigger,
FloatingPanelHeader,
FloatingPanelMaximizeTrigger,
FloatingPanelMinimizeTrigger,
FloatingPanelPositioner,
FloatingPanelResizeTrigger,
FloatingPanelRestoreTrigger,
FloatingPanelTitle,
FloatingPanelTrigger,
Portal,
} from '../..'

import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
import { useState } from 'react'
import { FloatingPanel, Portal } from '../..'

export const Controlled = () => {
const [isOpen, setIsOpen] = useState(false)

return (
<FloatingPanel.Root open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
<FloatingPanelTrigger onClick={() => setIsOpen(true)}>Toggle Panel</FloatingPanelTrigger>
<FloatingPanel.Trigger onClick={() => setIsOpen(true)}>Toggle Panel</FloatingPanel.Trigger>
<Portal>
<FloatingPanelPositioner>
<FloatingPanelContent>
<FloatingPanelDragTrigger>
<FloatingPanelHeader>
<FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
<FloatingPanel.Positioner>
<FloatingPanel.Content>
<FloatingPanel.DragTrigger>
<FloatingPanel.Header>
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
<div data-scope="floating-panel" data-part="trigger-group">
<FloatingPanelMinimizeTrigger>
<FloatingPanel.MinimizeTrigger>
<Minus />
</FloatingPanelMinimizeTrigger>
<FloatingPanelMaximizeTrigger>
</FloatingPanel.MinimizeTrigger>
<FloatingPanel.MaximizeTrigger>
<Maximize2 />
</FloatingPanelMaximizeTrigger>
<FloatingPanelRestoreTrigger>
</FloatingPanel.MaximizeTrigger>
<FloatingPanel.RestoreTrigger>
<ArrowDownLeft />
</FloatingPanelRestoreTrigger>
<FloatingPanelCloseTrigger>
</FloatingPanel.RestoreTrigger>
<FloatingPanel.CloseTrigger>
<XIcon />
</FloatingPanelCloseTrigger>
</FloatingPanel.CloseTrigger>
</div>
</FloatingPanelHeader>
</FloatingPanelDragTrigger>
<FloatingPanelBody>
</FloatingPanel.Header>
</FloatingPanel.DragTrigger>
<FloatingPanel.Body>
<p>Some content</p>
</FloatingPanelBody>
</FloatingPanel.Body>

<FloatingPanelResizeTrigger axis="n" />
<FloatingPanelResizeTrigger axis="e" />
<FloatingPanelResizeTrigger axis="w" />
<FloatingPanelResizeTrigger axis="s" />
<FloatingPanelResizeTrigger axis="ne" />
<FloatingPanelResizeTrigger axis="se" />
<FloatingPanelResizeTrigger axis="sw" />
<FloatingPanelResizeTrigger axis="nw" />
</FloatingPanelContent>
</FloatingPanelPositioner>
<FloatingPanel.ResizeTrigger axis="n" />
<FloatingPanel.ResizeTrigger axis="e" />
<FloatingPanel.ResizeTrigger axis="w" />
<FloatingPanel.ResizeTrigger axis="s" />
<FloatingPanel.ResizeTrigger axis="ne" />
<FloatingPanel.ResizeTrigger axis="se" />
<FloatingPanel.ResizeTrigger axis="sw" />
<FloatingPanel.ResizeTrigger axis="nw" />
</FloatingPanel.Content>
</FloatingPanel.Positioner>
</Portal>
</FloatingPanel.Root>
)
Expand Down
73 changes: 29 additions & 44 deletions packages/react/src/components/floating-panel/examples/lazy-mount.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,46 @@
import {
FloatingPanel,
FloatingPanelBody,
FloatingPanelCloseTrigger,
FloatingPanelContent,
FloatingPanelDragTrigger,
FloatingPanelHeader,
FloatingPanelMaximizeTrigger,
FloatingPanelMinimizeTrigger,
FloatingPanelPositioner,
FloatingPanelResizeTrigger,
FloatingPanelRestoreTrigger,
FloatingPanelTitle,
FloatingPanelTrigger,
Portal,
} from '../..'
import { FloatingPanel, Portal } from '../..'

import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'

export const LazyMount = () => (
<FloatingPanel.Root lazyMount onExitComplete={() => console.log('onExitComplete invoked')}>
<FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
<Portal>
<FloatingPanelPositioner>
<FloatingPanelContent>
<FloatingPanelDragTrigger>
<FloatingPanelHeader>
<FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
<FloatingPanel.Positioner>
<FloatingPanel.Content>
<FloatingPanel.DragTrigger>
<FloatingPanel.Header>
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
<div data-scope="floating-panel" data-part="trigger-group">
<FloatingPanelMinimizeTrigger>
<FloatingPanel.MinimizeTrigger>
<Minus />
</FloatingPanelMinimizeTrigger>
<FloatingPanelMaximizeTrigger>
</FloatingPanel.MinimizeTrigger>
<FloatingPanel.MaximizeTrigger>
<Maximize2 />
</FloatingPanelMaximizeTrigger>
<FloatingPanelRestoreTrigger>
</FloatingPanel.MaximizeTrigger>
<FloatingPanel.RestoreTrigger>
<ArrowDownLeft />
</FloatingPanelRestoreTrigger>
<FloatingPanelCloseTrigger>
</FloatingPanel.RestoreTrigger>
<FloatingPanel.CloseTrigger>
<XIcon />
</FloatingPanelCloseTrigger>
</FloatingPanel.CloseTrigger>
</div>
</FloatingPanelHeader>
</FloatingPanelDragTrigger>
<FloatingPanelBody>
</FloatingPanel.Header>
</FloatingPanel.DragTrigger>
<FloatingPanel.Body>
<p>Some content</p>
</FloatingPanelBody>
</FloatingPanel.Body>

<FloatingPanelResizeTrigger axis="n" />
<FloatingPanelResizeTrigger axis="e" />
<FloatingPanelResizeTrigger axis="w" />
<FloatingPanelResizeTrigger axis="s" />
<FloatingPanelResizeTrigger axis="ne" />
<FloatingPanelResizeTrigger axis="se" />
<FloatingPanelResizeTrigger axis="sw" />
<FloatingPanelResizeTrigger axis="nw" />
</FloatingPanelContent>
</FloatingPanelPositioner>
<FloatingPanel.ResizeTrigger axis="n" />
<FloatingPanel.ResizeTrigger axis="e" />
<FloatingPanel.ResizeTrigger axis="w" />
<FloatingPanel.ResizeTrigger axis="s" />
<FloatingPanel.ResizeTrigger axis="ne" />
<FloatingPanel.ResizeTrigger axis="se" />
<FloatingPanel.ResizeTrigger axis="sw" />
<FloatingPanel.ResizeTrigger axis="nw" />
</FloatingPanel.Content>
</FloatingPanel.Positioner>
</Portal>
</FloatingPanel.Root>
)
81 changes: 32 additions & 49 deletions packages/react/src/components/floating-panel/examples/render-fn.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,48 @@
import {
FloatingPanel,
FloatingPanelBody,
FloatingPanelCloseTrigger,
FloatingPanelContent,
FloatingPanelContext,
FloatingPanelDragTrigger,
FloatingPanelHeader,
FloatingPanelMaximizeTrigger,
FloatingPanelMinimizeTrigger,
FloatingPanelPositioner,
FloatingPanelResizeTrigger,
FloatingPanelRestoreTrigger,
FloatingPanelTitle,
FloatingPanelTrigger,
Portal,
} from '../..'

import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
import { FloatingPanel, Portal } from '../..'

export const RenderFn = () => (
<FloatingPanel.Root>
<FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
<Portal>
<FloatingPanelPositioner>
<FloatingPanelContent>
<FloatingPanelDragTrigger>
<FloatingPanelHeader>
<FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
<FloatingPanel.Positioner>
<FloatingPanel.Content>
<FloatingPanel.DragTrigger>
<FloatingPanel.Header>
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
<div data-scope="floating-panel" data-part="trigger-group">
<FloatingPanelMinimizeTrigger>
<FloatingPanel.MinimizeTrigger>
<Minus />
</FloatingPanelMinimizeTrigger>
<FloatingPanelMaximizeTrigger>
</FloatingPanel.MinimizeTrigger>
<FloatingPanel.MaximizeTrigger>
<Maximize2 />
</FloatingPanelMaximizeTrigger>
<FloatingPanelRestoreTrigger>
</FloatingPanel.MaximizeTrigger>
<FloatingPanel.RestoreTrigger>
<ArrowDownLeft />
</FloatingPanelRestoreTrigger>
<FloatingPanelCloseTrigger>
</FloatingPanel.RestoreTrigger>
<FloatingPanel.CloseTrigger>
<XIcon />
</FloatingPanelCloseTrigger>
</FloatingPanel.CloseTrigger>
</div>
</FloatingPanelHeader>
</FloatingPanelDragTrigger>
<FloatingPanelBody>
</FloatingPanel.Header>
</FloatingPanel.DragTrigger>
<FloatingPanel.Body>
<p>Some content</p>
</FloatingPanelBody>
</FloatingPanel.Body>

<FloatingPanelResizeTrigger axis="n" />
<FloatingPanelResizeTrigger axis="e" />
<FloatingPanelResizeTrigger axis="w" />
<FloatingPanelResizeTrigger axis="s" />
<FloatingPanelResizeTrigger axis="ne" />
<FloatingPanelResizeTrigger axis="se" />
<FloatingPanelResizeTrigger axis="sw" />
<FloatingPanelResizeTrigger axis="nw" />
</FloatingPanelContent>
</FloatingPanelPositioner>
<FloatingPanel.ResizeTrigger axis="n" />
<FloatingPanel.ResizeTrigger axis="e" />
<FloatingPanel.ResizeTrigger axis="w" />
<FloatingPanel.ResizeTrigger axis="s" />
<FloatingPanel.ResizeTrigger axis="ne" />
<FloatingPanel.ResizeTrigger axis="se" />
<FloatingPanel.ResizeTrigger axis="sw" />
<FloatingPanel.ResizeTrigger axis="nw" />
</FloatingPanel.Content>
</FloatingPanel.Positioner>
</Portal>
<FloatingPanelContext>
{(floatingPanel) => <p>floatingPanel is {floatingPanel.open ? 'open' : 'closed'}</p>}
</FloatingPanelContext>
<FloatingPanel.Context>
{(floatingPanel) => <p>floatingPanel. is {floatingPanel.open ? 'open' : 'closed'}</p>}
</FloatingPanel.Context>
</FloatingPanel.Root>
)
Loading

0 comments on commit 5c02ee3

Please sign in to comment.