Skip to content

Commit

Permalink
Switch to svelte-headlessui (#241)
Browse files Browse the repository at this point in the history 
While this package has a different API, it definitly feels more svelte-like than the previous one, which tried to emulate a React API.
  • Loading branch information
@oxisto
oxisto authored Dec 14, 2023
1 parent 033c70d commit b380bb9
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 84 deletions.
27 changes: 17 additions & 10 deletions ui/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
},
"devDependencies": {
"@bufbuild/connect-web": "^0.13.0",
"@rgossiaux/svelte-headlessui": "^2.0.0",
"@steeze-ui/heroicons": "^2.2.3",
"@steeze-ui/svelte-icon": "^1.5.0",
"@sveltejs/adapter-auto": "^2.0.0",
Expand All @@ -33,16 +32,15 @@
"prettier-plugin-tailwindcss": "^0.5.2",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"svelte-headlessui": "^0.0.32",
"svelte-transition": "^0.0.10",
"tailwindcss": "^3.3.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.0"
},
"type": "module",
"overrides": {
"@rgossiaux/svelte-headlessui": {
"svelte": "$svelte"
},
"@sveltejs/kit": {
"vite": "$vite"
}
Expand Down
60 changes: 36 additions & 24 deletions ui/src/lib/components/PortfolioBreadcrumb.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import Performance from '$lib/components/Performance.svelte';
import type { Portfolio, PortfolioSnapshot } from '$lib/gen/mgo_pb';
import { currency } from '$lib/intl';
import { Menu, MenuButton, MenuItem, MenuItems } from '@rgossiaux/svelte-headlessui';
import {
Calendar,
Check,
Expand All @@ -15,6 +14,10 @@
Pencil
} from '@steeze-ui/heroicons';
import { Icon } from '@steeze-ui/svelte-icon';
import { createMenu } from 'svelte-headlessui';
import { Transition } from 'svelte-transition';
const menu = createMenu({ label: 'More' });
export let portfolio: Portfolio;
export let snapshot: PortfolioSnapshot;
Expand All @@ -38,7 +41,7 @@
class="h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">
<a href="." class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">
My Bank
</a>
</div>
Expand Down Expand Up @@ -112,37 +115,46 @@
</span>

<!-- Dropdown -->
<Menu as="div" class="relative ml-3 sm:hidden">
<MenuButton
<div class="relative ml-3 sm:hidden">
<button
on:click={menu.open}
class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
>
More
<Icon src={ChevronDown} class="-mr-1 ml-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
</MenuButton>
</button>

<transition
enter-active-class="transition ease-out duration-200"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
<Transition
show={$menu.expanded}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<MenuItems
<div
use:menu.items
class="absolute right-0 z-10 -mr-1 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<MenuItem let:active>
<a href="#" class="{active ? 'bg-gray-100' : ''} block px-4 py-2 text-sm text-gray-700"
>Edit</a
<div use:menu.item>
<a
href="."
class="{$menu.active === 'Edit'
? 'bg-gray-100'
: ''} block px-4 py-2 text-sm text-gray-700">Edit</a
>
</MenuItem>
<MenuItem let:active>
<a href="#" class="{active ? 'bg-gray-100' : ''} block px-4 py-2 text-sm text-gray-700"
>View</a
</div>
<div use:menu.item>
<a
href="."
class="{$menu.active === 'View'
? 'bg-gray-100'
: ''} block px-4 py-2 text-sm text-gray-700">View</a
>
</MenuItem>
</MenuItems>
</transition>
</Menu>
</div>
</div>
</Transition>
</div>
</div>
</div>
88 changes: 42 additions & 46 deletions ui/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,24 @@
<script lang="ts">
import Sidebar from '$lib/components/Sidebar.svelte';
import {
Dialog,
Menu,
MenuButton,
MenuItem,
MenuItems,
TransitionChild,
TransitionRoot
} from '@rgossiaux/svelte-headlessui';
import { Bars3, Bell, ChevronDown, MagnifyingGlass, XMark } from '@steeze-ui/heroicons';
import { Icon } from '@steeze-ui/svelte-icon';
import { createDialog, createMenu } from 'svelte-headlessui';
import { Transition } from 'svelte-transition';
const dialog = createDialog({ label: 'Sidebar' });
const menu = createMenu({ label: 'User menu' });
const userNavigation = [
{ name: 'Your profile', href: '#' },
{ name: 'Sign out', href: '#' }
];
let sidebarOpen = false;
let active = false;
</script>

<div>
<TransitionRoot show={sidebarOpen}>
<Dialog as="div" class="relative z-50 lg:hidden" on:close={() => (sidebarOpen = false)}>
<TransitionChild
<Transition show={$dialog.expanded}>
<div class="relative z-50 lg:hidden">
<Transition
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
Expand All @@ -31,10 +27,10 @@
leaveTo="opacity-0"
>
<div class="fixed inset-0 bg-gray-900/80" />
</TransitionChild>
</Transition>

<div class="fixed inset-0 flex">
<TransitionChild
<Transition
enter="transition ease-in-out duration-300 transform"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
Expand All @@ -43,7 +39,7 @@
leaveTo="-translate-x-full"
>
<div class="relative mr-16 flex w-full max-w-xs flex-1">
<TransitionChild
<Transition
enter="ease-in-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
Expand All @@ -52,18 +48,18 @@
leaveTo="opacity-0"
>
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
<button type="button" class="-m-2.5 p-2.5" on:click={() => (sidebarOpen = false)}>
<button type="button" class="-m-2.5 p-2.5" on:click={dialog.close}>
<span class="sr-only">Close sidebar</span>
<Icon src={XMark} class="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
</Transition>
<Sidebar />
</div>
</TransitionChild>
</Transition>
</div>
</Dialog>
</TransitionRoot>
</div>
</Transition>

<!-- Static sidebar for desktop -->
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
Expand All @@ -74,11 +70,7 @@
<div
class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
>
<button
type="button"
class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
on:click={() => (sidebarOpen = true)}
>
<button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" on:click={dialog.open}>
<span class="sr-only">Open sidebar</span>
<Icon src={Bars3} class="h-6 w-6" aria-hidden="true" />
</button>
Expand Down Expand Up @@ -112,35 +104,39 @@
<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10" aria-hidden="true" />

<!-- Profile dropdown -->
<Menu as="div" class="relative">
<MenuButton class="-m-1.5 flex items-center p-1.5">
<div class="relative">
<div class="-m-1.5 flex items-center p-1.5">
<span class="sr-only">Open user menu</span>
<img
class="h-8 w-8 rounded-full bg-gray-50"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<span class="hidden lg:flex lg:items-center">
<span class="ml-4 text-sm font-semibold leading-6 text-gray-900" aria-hidden="true"
>Tom Cook</span
<span class="ml-4 text-sm font-semibold leading-6 text-gray-900" aria-hidden="true">
Tom Cook</span
>
<Icon src={ChevronDown} class="ml-2 h-5 w-5 text-gray-400" aria-hidden="true" />
<button use:menu.button>
<Icon src={ChevronDown} class="ml-2 h-5 w-5 text-gray-400" aria-hidden="true" />
</button>
</span>
</MenuButton>
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
</div>
<Transition
show={$menu.expanded}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<MenuItems
<div
use:menu.items
class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2
shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
>
{#each userNavigation as item (item.name)}
<MenuItem let:active>
<div use:menu.item>
<a
href={item.href}
class="{active
Expand All @@ -149,11 +145,11 @@
>
{item.name}</a
>
</MenuItem>
</div>
{/each}
</MenuItems>
</transition>
</Menu>
</div>
</Transition>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit b380bb9

Please sign in to comment.