refactor: switch to @pubkey-ui/core

demo/src/app/app-routes.tsx

@@ -1,4 +1,5 @@
-import { useRoutes } from 'react-router-dom'
+import { UiThemeLink } from '@pubkey-ui/core'
+import { Link, useRoutes } from 'react-router-dom'
 import { HomeRoutes } from './home/feature'
 
 export function AppRoutes() {
@@ -7,3 +8,5 @@ export function AppRoutes() {
     { index: true, element: <HomeRoutes /> },
   ])
 }
+
+export const ThemeLink: UiThemeLink = ({ children, ...props }) => <Link {...props}>{children}</Link>

demo/src/app/app.tsx

@@ -1,12 +1,13 @@
-import './ui/theme/styles'
+import { UiLayout, UiThemeProvider } from '@pubkey-ui/core'
 import { AppRoutes } from './app-routes'
-import { UiHeader, UiThemeProvider } from './ui'
+import { UiAppHeader } from './ui/header/ui-app-header'
 
 export function App() {
   return (
     <UiThemeProvider>
-      <UiHeader />
-      <AppRoutes />
+      <UiLayout header={<UiAppHeader />}>
+        <AppRoutes />
+      </UiLayout>
     </UiThemeProvider>
   )
 }

demo/src/app/home/feature/home-feature.tsx

@@ -3,8 +3,7 @@ import { Container, Stack } from '@mantine/core'
 import { WalletModalProvider } from '@pubkeyapp/wallet-adapter-mantine-ui'
 import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
 import { clusterApiUrl } from '@solana/web3.js'
-import { HomeUiExample } from '../ui'
-import { HomeUiHero } from '../ui/hero/home-ui-hero'
+import { HomeUiExample, HomeUiHero } from '../ui'
 
 export function HomeFeature() {
   return (

demo/src/app/home/ui/example/home-ui-example.tsx

@@ -1,7 +1,8 @@
-import { Anchor, Box, Code, Group, Stack, Table, Text, Title } from '@mantine/core'
+import { Anchor, Box, Code, Group, SimpleGrid, Stack, Table, Text, Title } from '@mantine/core'
+import { UiContainer, UiStack } from '@pubkey-ui/core'
 import { WalletDisconnectButton, WalletModalButton, WalletMultiButton } from '@pubkeyapp/wallet-adapter-mantine-ui'
 import { ReactNode } from 'react'
-import { UiCode, UiContainer } from '../../../ui'
+import { UiCode } from '../../../ui/code/ui-code'
 import classes from './home-ui-example.module.css'
 
 const demo = `
@@ -37,19 +38,18 @@ export function HomeUiExample() {
       packageUrl: 'https://www.npmjs.com/package/@pubkeyapp/wallet-adapter-mantine-ui/v/1.3.3',
     },
   ]
+  const deps = '@pubkeyapp/wallet-adapter-mantine-ui @solana/wallet-adapter-react @solana/web3.js'
   return (
-    <UiContainer>
-      <Stack gap="lg">
+    <UiContainer fluid py={0}>
+      <UiStack>
         <Title className={classes.title}>Getting started</Title>
-        <Stack gap="lg" mb="lg">
+        <UiStack>
           <Text>Install dependencies:</Text>
-          <UiCode
-            code={{
-              fileName: 'yarn',
-              code: `yarn add @pubkeyapp/wallet-adapter-mantine-ui @solana/wallet-adapter-react @solana/web3.js`,
-              language: 'shell',
-            }}
-          />
+          <UiStack>
+            <UiCode code={{ fileName: 'npm', code: `npm install ${deps}`, language: 'shell' }} />
+            <UiCode code={{ fileName: 'pnpm', code: `pnpm add ${deps}`, language: 'shell' }} />
+            <UiCode code={{ fileName: 'yarn', code: `yarn add ${deps}`, language: 'shell' }} />
+          </UiStack>
           <Text>Configure providers and components:</Text>
           <UiCode
             code={{
@@ -58,7 +58,7 @@ export function HomeUiExample() {
               language: 'tsx',
             }}
           />
-        </Stack>
+        </UiStack>
         <Box p={0} mt="xl">
           <Title className={classes.title}>Versions</Title>
           <Stack gap="lg" mb="lg">
@@ -92,7 +92,12 @@ export function HomeUiExample() {
           </Stack>
         </Box>
         <Title className={classes.title}>Components</Title>
-        <Stack gap="lg" mb="lg">
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}
+        >
           <DemoCard title="<WalletMultiButton />">
             <div className={classes.controls}>
               <WalletMultiButton className={classes.control} size="lg" />
@@ -108,8 +113,8 @@ export function HomeUiExample() {
               <WalletModalButton className={classes.control} size="lg" />
             </div>
           </DemoCard>
-        </Stack>
-      </Stack>
+        </SimpleGrid>
+      </UiStack>
     </UiContainer>
   )
 }

demo/src/app/ui/code/ui-code.tsx

@@ -1,6 +1,7 @@
 import { CodeHighlightTabs, CodeHighlightTabsCode } from '@mantine/code-highlight'
+import '@mantine/code-highlight/styles.css'
 import { DEFAULT_THEME } from '@mantine/core'
-import { IconBrandCss3, IconBrandReact, IconBrandTypescript, IconPackage } from '@tabler/icons-react'
+import { IconBrandCss3, IconBrandNpm, IconBrandReact, IconBrandTypescript } from '@tabler/icons-react'
 
 function getFileIcon(fileName: string) {
   if (fileName.endsWith('.ts')) {
@@ -14,8 +15,8 @@ function getFileIcon(fileName: string) {
     return <IconBrandCss3 size={18} />
   }
 
-  if (fileName === 'yarn') {
-    return <IconPackage color={DEFAULT_THEME.colors.blue[4]} size={18} />
+  if (fileName === 'npm' || fileName === 'pnpm' || fileName === 'yarn') {
+    return <IconBrandNpm color={DEFAULT_THEME.colors.red[4]} size={18} />
   }
   return null
 }

demo/src/app/ui/header/ui-app-header.tsx

@@ -0,0 +1,27 @@
+import { Container, Group, Text } from '@mantine/core'
+import { UiLogoType } from '@pubkey-ui/core'
+import { IconBrandDiscord, IconBrandGithub, IconBrandNpm } from '@tabler/icons-react'
+import { UiHeaderLinks } from './ui-header-links'
+import classes from './ui-header.module.css'
+
+export function UiAppHeader() {
+  return (
+    <header className={classes.header}>
+      <Container size="xl" className={classes.inner}>
+        <Group gap="xs" align="center">
+          <UiLogoType height={32} />
+          <Text visibleFrom="xs" fw={500}>
+            Wallet Adapter for Mantine
+          </Text>
+        </Group>
+        <UiHeaderLinks
+          icons={[
+            { href: 'https://discord.gg/XxuZQeDPNf', icon: IconBrandDiscord },
+            { href: 'https://github.com/pubkeyapp/solana-wallet-adapter-mantine-ui', icon: IconBrandGithub },
+            { href: 'https://npm.im/@pubkeyapp/wallet-adapter-mantine-ui', icon: IconBrandNpm },
+          ]}
+        />
+      </Container>
+    </header>
+  )
+}

demo/src/app/ui/header/ui-header-links.tsx

@@ -0,0 +1,15 @@
+import { ActionIconProps, Group } from '@mantine/core'
+import { UiIconLink, UiIconLinkProps } from '../icon-link/ui-icon-link'
+import { UiThemeToggle } from '../theme-toggle/ui-theme-toggle'
+
+export function UiHeaderLinks({ icons }: { icons: UiIconLinkProps[] }) {
+  const iconProps: ActionIconProps = { variant: 'light', size: 'xl' }
+  return (
+    <Group gap={5}>
+      {icons.map((icon) => (
+        <UiIconLink key={icon.href} {...icon} {...iconProps} />
+      ))}
+      <UiThemeToggle {...iconProps} />
+    </Group>
+  )
+}

demo/src/app/ui/header/ui-header.module.css

@@ -1,7 +1,6 @@
 .header {
   height: rem(56px);
-  background-color: var(--mantine-color-body);
-  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
 }
 
 .inner {

demo/src/app/ui/theme-toggle/ui-theme-toggle.tsx

@@ -1,14 +1,14 @@
 import { ActionIcon, ActionIconProps } from '@mantine/core'
+import { useUiColorScheme } from '@pubkey-ui/core'
 import { IconMoon, IconSun } from '@tabler/icons-react'
 import cx from 'clsx'
-import { useUiColorScheme } from '../theme/ui-color-scheme-provider'
 import classes from './ui-theme-toggle.module.css'
 
 export function UiThemeToggle(props?: ActionIconProps) {
   const { toggleColorScheme } = useUiColorScheme()
 
   return (
-    <ActionIcon onClick={toggleColorScheme} aria-label="Toggle color scheme" {...props}>
+    <ActionIcon onClick={() => toggleColorScheme()} aria-label="Toggle color scheme" {...props}>
       <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
       <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
     </ActionIcon>

demo/src/styles.css

@@ -1,8 +1,5 @@
-/* core styles are required for all packages*/
-
-/* other css files are required only if*/
-/* you are using components from the corresponding package*/
-/* import '@mantine/dates/styles.css';*/
-/* import '@mantine/dropzone/styles.css';*/
-/* import '@mantine/code-highlight/styles.css';*/
-/* ...*/
+html,
+body,
+#root {
+  height: 100%;
+}