@bronzelabs/oakma-ui 0.0.1 → 0.0.2

package/src/components/Notification/Notification.stories.tsx

@@ -1,158 +0,0 @@
-import React from "react"
-
-// Components
-import Notification from "./Notification"
-
-// Types
-import type { Meta, StoryFn } from "@storybook/react-webpack5"
-import type { NotificationProps } from "./Notification"
-import { NOTIFICATION_VARIANTS } from "./types"
-
-// Utils
-import { DummyPhoneIcon } from "../../../.storybook/components"
-
-/*
-
-
-
-
-*/
-
-const meta: Meta<NotificationProps> = {
-  title: "Components/Notification",
-  component: Notification,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "A notification banner used to surface messages, alerts, or status updates to the user.",
-      },
-    },
-    controls: {
-      exclude: ["className", "ref", "leadingIcon"],
-    },
-  },
-  argTypes: {
-    variant: {
-      type: "string",
-      description: "Visual variant of the Notification.",
-      table: {
-        type: { summary: NOTIFICATION_VARIANTS.map(v => `"${v}"`).join(" | ") },
-        defaultValue: { summary: '"default"' },
-      },
-      options: NOTIFICATION_VARIANTS,
-      control: { type: "select" },
-    },
-    text: {
-      type: "string",
-      description: "The primary message text.",
-      table: {
-        type: { summary: "React.ReactNode" },
-      },
-    },
-    subText: {
-      type: "string",
-      description: "Optional secondary message displayed below the primary text.",
-      table: {
-        type: { summary: "React.ReactNode" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    onClose: {
-      description: "When provided, renders a dismiss button that calls this handler.",
-      table: {
-        type: { summary: "() => void" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-  },
-  args: {
-    text: "Notification message here",
-    variant: "default",
-  },
-  decorators: [
-    Story => (
-      <div style={{ width: 350 }}>
-        <Story />
-      </div>
-    ),
-  ],
-}
-
-const Template: StoryFn<NotificationProps> = args => <Notification {...args} />
-
-const Default = Template.bind({})
-const Dark = Template.bind({})
-const WithLeadingIcon = Template.bind({})
-const WithSubText = Template.bind({})
-const WithAllFeatures = Template.bind({})
-
-// Args
-Default.args = {
-  onClose: () => {},
-}
-
-Dark.args = {
-  variant: "dark",
-  onClose: () => {},
-}
-
-WithLeadingIcon.args = {
-  leadingIcon: <DummyPhoneIcon />,
-  onClose: () => {},
-}
-
-WithSubText.args = {
-  subText: "Sub-text message here.",
-  onClose: () => {},
-}
-
-WithAllFeatures.args = {
-  leadingIcon: <DummyPhoneIcon />,
-  subText: "Sub-text message here.",
-  onClose: () => {},
-}
-
-// Parameters
-Default.parameters = {
-  docs: {
-    description: {
-      story: "Default light notification with a dismiss button.",
-    },
-  },
-}
-
-Dark.parameters = {
-  docs: {
-    description: {
-      story: 'Dark teal variant. Pass `variant="dark"` to enable.',
-    },
-  },
-}
-
-WithLeadingIcon.parameters = {
-  docs: {
-    description: {
-      story: "Pass any React node to `leadingIcon` to render an icon before the message.",
-    },
-  },
-}
-
-WithSubText.parameters = {
-  docs: {
-    description: {
-      story: "Provide `subText` to render a secondary line of smaller text beneath the message.",
-    },
-  },
-}
-
-WithAllFeatures.parameters = {
-  docs: {
-    description: {
-      story: "Leading icon, primary message, sub-text, and dismiss button all together.",
-    },
-  },
-}
-
-export { Default, Dark, WithLeadingIcon, WithSubText, WithAllFeatures }
-export default meta

package/src/components/Notification/Notification.tsx

@@ -1,110 +0,0 @@
-import React from "react"
-
-// Components
-import { XMarkIcon } from "@heroicons/react/20/solid"
-
-// Types
-import { NotificationVariant } from "./types"
-
-// Utils
-import clsx from "clsx"
-
-// Params
-interface NotificationProps extends Omit<React.ComponentPropsWithRef<"div">, "children"> {
-  variant?: NotificationVariant
-  leadingIcon?: React.ReactNode
-  text: string
-  subText?: string | React.ReactNode
-  onClose?: () => void
-}
-
-interface NotificationData extends Pick<NotificationProps, "variant" | "text" | "subText"> {
-  /** The id of the Notification. */
-  id: string
-  /** Time that the notification was added. */
-  timestamp: number
-}
-
-/*
-
-
-
-
-*/
-
-const Notification: React.FC<NotificationProps> = ({
-  variant = "default",
-  text,
-  subText,
-  leadingIcon,
-  onClose,
-  className,
-  ...rest
-}) => {
-  return (
-    <div
-      className={clsx(
-        "flex w-full items-start gap-2 rounded-2xl border px-4 py-3 shadow-md",
-        variant === "default" && "border-stroke-dark bg-white",
-        variant === "dark" && "border-transparent bg-teal-100",
-        className,
-      )}
-      {...rest}
-    >
-      {leadingIcon && (
-        <span
-          className={clsx(
-            "mt-0.5 size-5 shrink-0",
-            variant === "default" && "text-teal-100",
-            variant === "dark" && "text-white",
-          )}
-        >
-          {leadingIcon}
-        </span>
-      )}
-      <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <p
-          className={clsx(
-            "text-sm font-medium tracking-[-0.14px]",
-            variant === "default" && "text-neutral-100",
-            variant === "dark" && "text-white",
-          )}
-        >
-          {text}
-        </p>
-        {subText && (
-          <p
-            className={clsx(
-              "text-xs",
-              variant === "default" && "text-neutral-50",
-              variant === "dark" && "text-teal-10",
-            )}
-          >
-            {subText}
-          </p>
-        )}
-      </div>
-
-      {onClose && (
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Dismiss notification"
-          className={clsx(
-            "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors ease-out",
-            variant === "default" &&
-              "text-neutral-50 hover:bg-neutral-50/10 hover:text-neutral-100 focus-visible:bg-neutral-50/10 focus-visible:text-neutral-100 active:bg-neutral-50/20",
-            variant === "dark" &&
-              "text-white/70 hover:bg-white/10 hover:text-white focus-visible:bg-white/10 focus-visible:text-white active:bg-white/20",
-          )}
-        >
-          <XMarkIcon className="size-5" />
-        </button>
-      )}
-    </div>
-  )
-}
-
-Notification.displayName = "Notification"
-export default Notification
-export type { NotificationProps, NotificationData }

package/src/components/Notification/index.ts

@@ -1 +0,0 @@
-export { default, type NotificationProps, type NotificationData } from "./Notification"

package/src/components/Notification/types.ts

@@ -1,11 +0,0 @@
-/*
-
-
-
-
-
-*/
-
-export const NOTIFICATION_VARIANTS = ["default", "dark"] as const
-
-export type NotificationVariant = (typeof NOTIFICATION_VARIANTS)[number]

package/src/components/Notifications/Notifications.docs.md

@@ -1,103 +0,0 @@
-## Usage
-
-To being, wrap you entire application in `NotificationsProvider`. This will provide the context for the notifications to be displayed and allow the adding and removing of notifications from anywhere in the app:
-
-```tsx
-import { NotificationsProvider } from "@bronzelabs/oakma-ui"
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <NotificationsProvider>
-          <main>{children}</main>
-        </NotificationsProvider>
-      </body>
-    </html>
-  )
-}
-```
-
-In most cases you'll want to display the notifications in their default, fixed position in the viewport. To do this, add the `Notifications` component to the layout of your app:
-
-```tsx
-import { NotificationsProvider, Notifications } from "@bronzelabs/oakma-ui"
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <NotificationsProvider>
-          <main>{children}</main>
-          <Notifications /> { /* <----- */ }
-        </NotificationsProvider>
-      </body>
-    </html>
-  )
-}
-```
-
-### Adding a notification
-
-To add a notification, use the `useNotifications` hook to access the `addNotification` method. This accepts either a single or an array of `Notification` objects as its only argument. The `Notification` object has the following properties:
-
-| Property  | Type                        | Description                                                                                                         |
-| --------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| `id`      | `string`                    | A unique identifier for the notification. If not provided, one will be generated.                                   |
-| `text`    | `string \| React.ReactNode` | Content to display inside the Notification. Can also be a ReactNode to allow passing of jsx with things like links. |
-| `subText` | `string \| React.ReactNode` | Optional content to display below the main text. Can also be a ReactNode.                                           |
-| `variant` | `"default"` \| `"dark"`     | The style variant of the Notification. Currently just controls light/dark.                                          |
-
-```tsx
-"use client"
-
-import { useNotifications } from "@bronzelabs/oakma-ui"
-
-export default function MyComponent() {
-  const { addNotification } = useNotifications()
-
-  function handleClick() {
-    addNotification({
-      text: "This is a success notification",
-    })
-  }
-
-  return <button onClick={handleClick}>Add notification</button>
-}
-```
-
-You can also pass an optional second argument to `addNotification` to specify whether the notification should automatically dismiss after a certain amount of time. By default, notifications will automatically dismiss after 5 seconds. To disable this behavior, pass `false` as the second argument:
-
-```tsx
-export default function MyComponent() {
-  // {/* ... */}
-
-  function handleClick() {
-    addNotification({
-      text: "This notification will not automatically dismiss",
-      }, false)
-  }
-
-  // {/* ... */}
-}
-```
-
-### Removing a notification
-
-To remove a notification, use the `useNotifications` hook to access the `removeNotification` method. This function accepts the `id` of the notification you want to remove as its only argument.
-
-```tsx
-"use client"
-
-import { useNotifications } from "@bronzelabs/oakma-ui"
-
-export default function MyComponent() {
-  const { removeNotification } = useNotifications()
-
-  function handleClick() {
-    removeNotification("1")
-  }
-
-  return <button onClick={handleClick}>Remove notification</button>
-}
-```

package/src/components/Notifications/Notifications.stories.tsx

@@ -1,159 +0,0 @@
-import React, { useEffect } from "react"
-
-// Components
-import Notifications, { type NotificationsProps } from "./Notifications"
-import Notification, { type NotificationData } from "../Notification"
-import { NotificationsProvider, useNotifications } from "./NotificationsContext"
-
-// Types
-import type { StoryFn, Meta } from "@storybook/react-webpack5"
-import type { PickPartial } from "../../types/helpers"
-
-// Utils
-import { StorybookActionButton } from "../../../.storybook/components"
-import extraDocs from "./Notifications.docs.md"
-import { renderDocsWithProps } from "../../../.storybook/utils"
-
-// Data
-const data: PickPartial<NotificationData, "id" | "timestamp">[] = [
-  {
-    text: "This is the first notification",
-    subText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  },
-  {
-    text: "This is the second notification",
-    subText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  },
-  {
-    text: "This is the third notification",
-    subText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  },
-]
-
-/*
-
-
-
- 
-*/
-
-const meta = {
-  title: "Components/Notifications",
-  component: Notifications,
-  subcomponents: { Notification },
-  parameters: {
-    docs: {
-      page: renderDocsWithProps({ extraDocs }),
-    },
-    controls: {
-      exclude: ["className", "ref", "children"],
-    },
-  },
-  argTypes: {
-    isDisismissable: {
-      type: "boolean",
-      description: "Whether the notifications can be dismissed by an internal `X` button or not",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-  },
-  args: {
-    isDisismissable: false,
-  },
-  decorators: [
-    Story => (
-      <div style={{ width: 400 }}>
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Notifications>
-
-// Templates
-const Template: StoryFn<NotificationsProps> = args => {
-  const { addNotification } = useNotifications()
-
-  useEffect(() => addNotification(data, false), [addNotification])
-
-  return (
-    <Notifications
-      {...args}
-      /**
-       * Position in the main app is fixed to the top right corner, however, in storybook
-       * this is positioning it outside the relevant container, therefore, its position
-       * needs to be reset.
-       */
-      style={{
-        position: "relative",
-        top: "auto",
-        right: "auto",
-        bottom: "auto",
-        left: "auto",
-      }}
-    />
-  )
-}
-
-// Stories
-const Default = Template.bind({})
-const Dismissable = Template.bind({})
-const Playground = Template.bind({})
-
-// Args
-Dismissable.args = {
-  isDisismissable: true,
-}
-
-Playground.args = {
-  isDisismissable: true,
-}
-
-// Decorators
-Default.decorators = [Story => <NotificationsProvider>{<Story />}</NotificationsProvider>]
-
-Dismissable.decorators = [Story => <NotificationsProvider>{<Story />}</NotificationsProvider>]
-
-Playground.decorators = [
-  Story => {
-    const { notifications, addNotification, removeNotification } = useNotifications()
-
-    return (
-      <div>
-        {<Story />}
-        <div
-          style={{
-            marginTop: 48,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 16,
-          }}
-        >
-          <StorybookActionButton
-            onClick={() =>
-              addNotification(
-                {
-                  text: "This is a dummy notification",
-                  subText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                  variant: Math.round(Math.random()) > 0 ? "default" : "dark",
-                },
-                false,
-              )
-            }
-          >
-            Add
-          </StorybookActionButton>
-          <StorybookActionButton onClick={() => removeNotification(notifications.at(0)?.id)}>
-            Remove
-          </StorybookActionButton>
-        </div>
-      </div>
-    )
-  },
-  Story => <NotificationsProvider>{<Story />}</NotificationsProvider>,
-]
-
-export default meta
-export { Default, Dismissable, Playground }

package/src/components/Notifications/Notifications.tsx

@@ -1,90 +0,0 @@
-"use client"
-
-import React, { useCallback } from "react"
-
-// Components
-import Notification from "../Notification"
-
-// Types
-
-// Utils
-import clsx from "clsx"
-import { useNotifications } from "./NotificationsContext"
-import { motion, AnimatePresence, type Variants } from "motion/react"
-
-// Props
-interface NotificationsProps extends React.ComponentProps<"div"> {
-  isDisismissable?: boolean
-  children?: never
-}
-
-const notificationVariants: Variants = {
-  initial: {
-    opacity: 0,
-    y: 15,
-  },
-  animate: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      ease: "easeOut",
-      duration: 0.15,
-    },
-  },
-  exit: {
-    opacity: 0,
-    x: "4rem",
-    transition: {
-      ease: "easeOut",
-      duration: 0.15,
-    },
-  },
-}
-
-/*
-
-
-
-
-*/
-
-const Notifications: React.FC<NotificationsProps> = ({ className, isDisismissable, ...rest }) => {
-  // State
-  const { notifications: data, removeNotification } = useNotifications()
-
-  // Functions
-  const handleRemove = useCallback(
-    (id: string) => () => removeNotification(id),
-    [removeNotification],
-  )
-
-  return (
-    <div
-      className={clsx(
-        "w-[min(25rem, 96vw)] fixed inset-x-[2vw] top-0 z-9999 md:top-6 md:right-6 md:left-auto",
-        className,
-      )}
-      {...rest}
-    >
-      <AnimatePresence>
-        {data?.map(item => (
-          <motion.div
-            key={item.id}
-            className="my-3 w-full min-w-82 select-none"
-            initial="initial"
-            animate="animate"
-            exit="exit"
-            variants={notificationVariants}
-            layout
-          >
-            <Notification {...item} onClose={isDisismissable ? handleRemove(item.id) : undefined} />
-          </motion.div>
-        ))}
-      </AnimatePresence>
-    </div>
-  )
-}
-
-Notifications.displayName = "Notifications"
-export default Notifications
-export type { NotificationsProps }