feat: add more components

apps/web/src/app/app-layout.tsx

@@ -1,12 +1,12 @@
-import { ActionIcon, Anchor, Card, Group, Text } from '@mantine/core'
-import { UiContainer, UiTheme, useUiColorScheme } from '@pubkey-ui/core'
+import { ActionIcon, Anchor, Box, Card, Group, Text } from '@mantine/core'
+import { UiContainer, useUiColorScheme } from '@pubkey-ui/core'
 import { IconMoon, IconSun } from '@tabler/icons-react'
 import { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
 export function AppLayout({ children }: { children: ReactNode }) {
   return (
-    <UiTheme>
+    <Box>
       <Card p="0" display="block">
         <UiContainer py="sm">
           <Group justify="space-between">
@@ -29,7 +29,7 @@ export function AppLayout({ children }: { children: ReactNode }) {
         </UiContainer>
       </Card>
       {children}
-    </UiTheme>
+    </Box>
   )
 }
 

apps/web/src/app/app.tsx

@@ -1,11 +1,15 @@
+import { UiThemeProvider } from '@pubkey-ui/core'
+import { Link } from 'react-router-dom'
 import { AppLayout } from './app-layout'
 
 import { AppRoutes } from './app-routes'
 
 export function App() {
   return (
-    <AppLayout>
-      <AppRoutes />
-    </AppLayout>
+    <UiThemeProvider link={({ children, ...props }) => <Link {...props}>{children}</Link>}>
+      <AppLayout>
+        <AppRoutes />
+      </AppLayout>
+    </UiThemeProvider>
   )
 }

apps/web/src/app/features/demo/demo-feature-toast.tsx

@@ -0,0 +1,24 @@
+import { Button, SimpleGrid } from '@mantine/core'
+import { toastError, toastInfo, toastSuccess, toastWarning } from '@pubkey-ui/core'
+import { DemoCard } from './demo-card'
+
+export function DemoFeatureToast() {
+  return (
+    <DemoCard title="Toast">
+      <SimpleGrid cols={2}>
+        <Button color="green" onClick={() => toastSuccess('This is a success toast')}>
+          Toast Success
+        </Button>
+        <Button color="red" onClick={() => toastError('This is an error toast')}>
+          Toast Error
+        </Button>
+        <Button color="yellow" onClick={() => toastWarning('This is a warning toast')}>
+          Toast Warning
+        </Button>
+        <Button color="cyan" onClick={() => toastInfo('This is an info toast')}>
+          Toast Info
+        </Button>
+      </SimpleGrid>
+    </DemoCard>
+  )
+}

apps/web/src/app/features/demo/demo-feature.tsx

@@ -7,6 +7,7 @@ import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureSearchInput } from './demo-feature-search-input'
 import { DemoFeatureStack } from './demo-feature-stack'
 import { DemoFeatureTime } from './demo-feature-time'
+import { DemoFeatureToast } from './demo-feature-toast'
 
 export function DemoFeature() {
   return (
@@ -20,6 +21,7 @@ export function DemoFeature() {
         <DemoFeatureSearchInput />
         <DemoFeatureStack />
         <DemoFeatureTime />
+        <DemoFeatureToast />
       </UiStack>
     </UiContainer>
   )

apps/web/src/app/features/dev/dev-feature-search.tsx

@@ -1,5 +1,17 @@
-import { UiContainer } from '@pubkey-ui/core'
+import { Anchor, Button } from '@mantine/core'
+import { UiCard, UiContainer, useUiTheme } from '@pubkey-ui/core'
 
 export function DevFeatureSearch() {
-  return <UiContainer>xx</UiContainer>
+  const { Link } = useUiTheme()
+  return (
+    <UiContainer>
+      <UiCard>TEST</UiCard>
+      <Anchor component={Link} to="/demo">
+        Go to demo
+      </Anchor>
+      <Button component={Link} to="/demo">
+        Go to demo
+      </Button>
+    </UiContainer>
+  )
 }

apps/web/src/app/features/dev/dev-feature.tsx

@@ -1,12 +1,5 @@
-import { UiContainer, UiStack } from '@pubkey-ui/core'
 import { DevFeatureSearch } from './dev-feature-search'
 
 export function DevFeature() {
-  return (
-    <UiContainer>
-      <UiStack>
-        <DevFeatureSearch />
-      </UiStack>
-    </UiContainer>
-  )
+  return <DevFeatureSearch />
 }

packages/core/src/lib/index.ts

@@ -6,5 +6,6 @@ export * from './ui-debug'
 export * from './ui-group'
 export * from './ui-search-input'
 export * from './ui-stack'
-export * from './ui-time'
 export * from './ui-theme'
+export * from './ui-time'
+export * from './ui-toast'

packages/core/src/lib/ui-theme/index.ts

@@ -1,3 +1,3 @@
 export * from './ui-color-scheme-provider'
-export * from './ui-theme'
+export * from './ui-theme-provider'
 export * from './use-ui-breakpoints'

packages/core/src/lib/ui-theme/ui-theme-provider.tsx

@@ -0,0 +1,58 @@
+import { ColorSchemeScript, createTheme, DEFAULT_THEME, Loader, MantineProvider } from '@mantine/core'
+import { ModalsProvider } from '@mantine/modals'
+import { Notifications } from '@mantine/notifications'
+import { createContext, FunctionComponent, ReactNode, Suspense, useContext } from 'react'
+import { UiColorSchemeProvider } from './ui-color-scheme-provider'
+
+// Import the mantine theme styles
+import './ui-theme-styles'
+
+const theme = createTheme({
+  colors: {
+    brand: DEFAULT_THEME.colors.blue,
+  },
+  primaryColor: 'brand',
+})
+
+export type UiThemeLink = FunctionComponent<{
+  children: ReactNode
+  to: string
+  target?: HTMLAnchorElement['target']
+  rel?: HTMLAnchorElement['rel']
+}>
+
+export const defaultUiThemeLink: UiThemeLink = ({ children, ...props }) => (
+  <a href={props.to} {...props}>
+    {children}
+  </a>
+)
+
+export interface UiThemeProviderContext {
+  Link: UiThemeLink
+}
+
+const Context = createContext<UiThemeProviderContext>({} as UiThemeProviderContext)
+
+export function UiThemeProvider({ children, link }: { children: ReactNode; link?: UiThemeLink }) {
+  const value: UiThemeProviderContext = {
+    Link: link ?? defaultUiThemeLink,
+  }
+
+  return (
+    <Context.Provider value={value}>
+      <ColorSchemeScript defaultColorScheme="auto" />
+      <MantineProvider theme={theme} defaultColorScheme="auto">
+        <UiColorSchemeProvider>
+          <ModalsProvider>
+            <Notifications />
+            <Suspense fallback={<Loader />}>{children}</Suspense>
+          </ModalsProvider>
+        </UiColorSchemeProvider>
+      </MantineProvider>
+    </Context.Provider>
+  )
+}
+
+export function useUiTheme() {
+  return useContext(Context)
+}

packages/core/src/lib/ui-toast/index.ts

@@ -0,0 +1 @@
+export * from './ui-toast'

packages/core/src/lib/ui-toast/ui-toast.tsx

@@ -0,0 +1,37 @@
+import { NotificationData, notifications } from '@mantine/notifications'
+
+export type ToastProps = string | NotificationData
+
+export function toastSuccess(notification: ToastProps) {
+  notification = typeof notification === 'string' ? { message: notification } : notification
+  notifications.show({
+    color: notification?.color ?? 'green',
+    title: notification?.title ?? 'Success',
+    message: notification?.message,
+  })
+}
+
+export function toastError(notification: ToastProps) {
+  notification = typeof notification === 'string' ? { message: notification } : notification
+  notifications.show({
+    color: notification?.color ?? 'red',
+    title: notification?.title ?? 'Error',
+    message: notification?.message,
+  })
+}
+export function toastWarning(notification: ToastProps) {
+  notification = typeof notification === 'string' ? { message: notification } : notification
+  notifications.show({
+    color: notification?.color ?? 'yellow',
+    title: notification?.title ?? 'Warning',
+    message: notification?.message,
+  })
+}
+export function toastInfo(notification: ToastProps) {
+  notification = typeof notification === 'string' ? { message: notification } : notification
+  notifications.show({
+    color: notification?.color ?? 'cyan',
+    title: notification?.title ?? 'Info',
+    message: notification?.message,
+  })
+}

packages/generators/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.1",
   "dependencies": {
     "@nx/devkit": "17.1.3",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "@nx/js": "17.1.3"
   },
   "type": "commonjs",
   "main": "./src/index.js",