Add NotFound component (#9)

# Add NotFound component

## ♻️ Current situation & Problem
NotFound is common pattern. It's worth providing out of the box
solution.


## ⚙️ Release Notes 
* Add NotFound component


![image](https://github.com/user-attachments/assets/9864905b-26e5-4b45-addf-8dd3816264dd)


## 📝 Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordSpezi/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordSpezi/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordSpezi/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordSpezi/.github/blob/main/CONTRIBUTING.md).

package.json

@@ -143,6 +143,10 @@
       "types":  "./dist/molecules/Notifications.d.ts",
       "default":  "./dist/molecules/Notifications.js"
     },
+    "./molecules/NotFound": {
+      "types":  "./dist/molecules/NotFound.d.ts",
+      "default":  "./dist/molecules/NotFound.js"
+    },
     "./SpeziProvider": {
       "types": "./dist/SpeziProvider.d.ts",
       "default": "./dist/SpeziProvider.js"

src/index.ts

@@ -9,7 +9,12 @@
 import './main.css'
 
 export * from './utils/className'
+export * from './utils/date'
+export * from './utils/file'
+export * from './utils/misc'
 export * from './utils/tailwind'
+export * from './utils/useOpenState'
+export * from './utils/navigator'
 export * from './theme/light'
 export * from './theme/utils'
 export * from './components/Avatar'
@@ -43,6 +48,7 @@ export * from './molecules/AsideBrandLayout'
 export * from './molecules/DashboardLayout'
 export * from './molecules/ConfirmDeleteDialog'
 export * from './molecules/Notifications'
+export * from './molecules/NotFound'
 export * from './modules/auth/user'
 export * from './modules/auth/SignInForm'
 export * from './modules/auth/hooks'

src/molecules/NotFound/NotFound.stories.tsx

@@ -0,0 +1,30 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project
+//
+// SPDX-FileCopyrightText: 2024 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+import { type Meta, type StoryObj } from '@storybook/react'
+import { NotFound } from './NotFound'
+
+const meta: Meta<typeof NotFound> = {
+  title: 'Molecules/NotFound',
+  component: NotFound,
+}
+
+export default meta
+
+type Story = StoryObj<typeof NotFound>
+
+export const Generic: Story = {
+  args: { backPage: { href: '/', name: 'home' }, entityName: 'page' },
+}
+
+export const UserNotFound: Story = {
+  args: {
+    backPage: { href: '/users', name: 'users list' },
+    entityName: 'user',
+  },
+}

src/molecules/NotFound/NotFound.test.tsx

@@ -0,0 +1,28 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project
+//
+// SPDX-FileCopyrightText: 2024 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '@/tests/helpers'
+import { NotFound } from './'
+
+describe('NotFound', () => {
+  it('renders not found error page', () => {
+    renderWithProviders(
+      <NotFound
+        backPage={{ name: 'users', href: '/users' }}
+        entityName="user"
+      />,
+    )
+
+    const backLink = screen.getByRole('link', { name: /users/ })
+    expect(backLink).toBeInTheDocument()
+
+    const title = screen.getByText(`This user doesn't exist`)
+    expect(title).toBeInTheDocument()
+  })
+})

src/molecules/NotFound/NotFound.tsx

@@ -0,0 +1,89 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project
+//
+// SPDX-FileCopyrightText: 2024 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+import { Link } from '@tanstack/react-router'
+import { RouteOff } from 'lucide-react'
+import { type ComponentProps, type ReactNode } from 'react'
+import { Button } from '@/components/Button'
+import { cn } from '@/utils/className'
+
+export const NotFoundIcon = ({
+  className,
+  ...props
+}: Omit<ComponentProps<'div'>, 'children'>) => (
+  <div
+    className={cn('flex-center mb-2 size-20 rounded-full bg-muted', className)}
+    {...props}
+  >
+    <RouteOff className="size-7" />
+  </div>
+)
+
+export const NotFoundContainer = ({
+  className,
+  ...props
+}: ComponentProps<'div'>) => (
+  <div
+    className={cn('flex-center grow flex-col gap-1', className)}
+    {...props}
+  />
+)
+
+export const NotFoundTitle = ({
+  className,
+  ...props
+}: ComponentProps<'h1'>) => (
+  <h1 className={cn('text-2xl font-medium', className)} {...props} />
+)
+
+export const NotFoundParagraph = ({
+  className,
+  ...props
+}: ComponentProps<'p'>) => (
+  <p className={cn('text-muted-foreground', className)} {...props} />
+)
+
+interface NotFoundActionProps extends ComponentProps<typeof Button> {}
+
+export const NotFoundAction = (props: NotFoundActionProps) => (
+  <Button size="sm" className="mt-3" asChild {...props} />
+)
+
+export interface NotFoundProps {
+  /**
+   * Configures where user should go instead
+   * @example { name: "users list", href: "/user" }
+   * */
+  backPage: {
+    name: ReactNode
+    href: string
+  }
+  /**
+   * Singular name of accessed entity
+   * @example "user"
+   * */
+  entityName: ReactNode
+  className?: string
+}
+
+export const NotFound = ({
+  backPage,
+  entityName,
+  className,
+}: NotFoundProps) => (
+  <NotFoundContainer className={className}>
+    <NotFoundIcon />
+    <NotFoundTitle>This {entityName} doesn't exist</NotFoundTitle>
+    <NotFoundParagraph>
+      Please check your URL or return to {backPage.name}
+    </NotFoundParagraph>
+    <NotFoundAction>
+      <Link to={backPage.href}>Go to {backPage.name}</Link>
+    </NotFoundAction>
+  </NotFoundContainer>
+)

src/molecules/NotFound/index.tsx

@@ -0,0 +1,9 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project
+//
+// SPDX-FileCopyrightText: 2024 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+export * from './NotFound'