@commercetools/nimbus 0.0.1 → 0.0.3

package/src/components/alert/components/alert.actions.tsx

@@ -1,27 +0,0 @@
-import { useContext, useEffect } from "react";
-import { AlertActions as AlertActionsSlot } from "../alert.slots";
-import type { AlertActionsProps } from "../alert.types";
-import { AlertContext } from "./alert.root";
-
-const AlertActions = ({ children, ...props }: AlertActionsProps) => {
-  const context = useContext(AlertContext);
-
-  useEffect(() => {
-    if (context) {
-      const slotElement = (
-        <AlertActionsSlot {...props}>{children}</AlertActionsSlot>
-      );
-      // Register it with the parent
-      context.setActions(slotElement);
-
-      // On unmount, remove it
-      return () => context.setActions(null);
-    }
-  }, [children, props]);
-
-  return null;
-};
-
-AlertActions.displayName = "Alert.Actions";
-
-export default AlertActions;

package/src/components/alert/components/alert.description.tsx

@@ -1,27 +0,0 @@
-import { useContext, useEffect } from "react";
-import { AlertDescription as AlertDescriptionSlot } from "../alert.slots";
-import type { AlertDescriptionProps } from "../alert.types";
-import { AlertContext } from "./alert.root";
-
-const AlertDescription = ({ children, ...props }: AlertDescriptionProps) => {
-  const context = useContext(AlertContext);
-
-  useEffect(() => {
-    if (context) {
-      const slotElement = (
-        <AlertDescriptionSlot {...props}>{children}</AlertDescriptionSlot>
-      );
-      // Register it with the parent
-      context.setDescription(slotElement);
-
-      // On unmount, remove it
-      return () => context.setDescription(null);
-    }
-  }, [children, props]);
-
-  return null;
-};
-
-AlertDescription.displayName = "Alert.Description";
-
-export default AlertDescription;

package/src/components/alert/components/alert.dismiss-button.tsx

@@ -1,41 +0,0 @@
-import { useContext, useEffect } from "react";
-import { AlertDismissButton as AlertDismissButtonSlot } from "../alert.slots";
-import type { AlertDismissButtonProps } from "../alert.types";
-import { Clear } from "@commercetools/nimbus-icons";
-import { IconButton } from "../../icon-button";
-import { AlertContext } from "./alert.root";
-
-const AlertDismissButton = ({
-  children,
-  ...props
-}: AlertDismissButtonProps) => {
-  const context = useContext(AlertContext);
-
-  useEffect(() => {
-    if (context) {
-      const slotElement = (
-        <AlertDismissButtonSlot>
-          <IconButton
-            aria-label="Dismiss"
-            {...props}
-            variant="ghost"
-            size="2xs"
-          >
-            <Clear role="img" />
-          </IconButton>
-        </AlertDismissButtonSlot>
-      );
-      // Register it with the parent
-      context.setDismiss(slotElement);
-
-      // On unmount, remove it
-      return () => context.setDismiss(null);
-    }
-  }, [children, props]);
-
-  return null;
-};
-
-AlertDismissButton.displayName = "Alert.DismissButton";
-
-export default AlertDismissButton;

package/src/components/alert/components/alert.root.tsx

@@ -1,92 +0,0 @@
-import {
-  createContext,
-  forwardRef,
-  useMemo,
-  useState,
-  type ReactNode,
-} from "react";
-import { AlertRoot as AlertRootSlot, AlertIcon } from "../alert.slots";
-import type { AlertProps, AlertRootComponent } from "../alert.types";
-import { Box } from "../../box";
-import { Stack } from "../../stack";
-import {
-  CheckCircleOutline,
-  ErrorOutline,
-  Info,
-  WarningAmber,
-} from "@commercetools/nimbus-icons";
-
-const getIconFromTone = (tone: AlertProps["tone"]) => {
-  switch (tone) {
-    case "critical":
-      return <ErrorOutline />;
-    case "info":
-      return <Info />;
-    case "warning":
-      return <WarningAmber />;
-    case "positive":
-      return <CheckCircleOutline />;
-    default:
-      return null;
-  }
-};
-
-type AlertContextValue = {
-  setTitle: (title: ReactNode) => void;
-  setDescription: (description: ReactNode) => void;
-  setActions: (actions: ReactNode) => void;
-  setDismiss: (dismiss: ReactNode) => void;
-};
-
-export const AlertContext = createContext<AlertContextValue | undefined>(
-  undefined
-);
-
-/**
- * Alert
- * ============================================================
- * Provides feedback to the user about the status of an action or system event
- */
-const AlertRoot: AlertRootComponent = forwardRef<HTMLDivElement, AlertProps>(
-  ({ children, ...props }, ref) => {
-    const [titleNode, setTitle] = useState<ReactNode>(null);
-    const [descriptionNode, setDescription] = useState<ReactNode>(null);
-    const [actionsNode, setActions] = useState<ReactNode>(null);
-    const [dismissNode, setDismiss] = useState<ReactNode>(null);
-
-    // Memoize the context value so we don't cause unnecessary re-renders
-    const contextValue = useMemo(
-      () => ({
-        setTitle,
-        setDescription,
-        setActions,
-        setDismiss,
-      }),
-      [setTitle, setDescription, setActions, setDismiss]
-    );
-
-    return (
-      <AlertContext.Provider value={contextValue}>
-        <AlertRootSlot ref={ref} {...props} role="alert">
-          <AlertIcon alignItems="flex-start">
-            {getIconFromTone(props.tone)}
-          </AlertIcon>
-          <Stack flex="1" gap="200">
-            <Box>
-              {titleNode}
-              {descriptionNode}
-            </Box>
-            {actionsNode}
-          </Stack>
-          {dismissNode}
-
-          {children}
-        </AlertRootSlot>
-      </AlertContext.Provider>
-    );
-  }
-);
-
-AlertRoot.displayName = "Alert.Root";
-
-export default AlertRoot;

package/src/components/alert/components/alert.title.tsx

@@ -1,29 +0,0 @@
-import { useContext, useEffect } from "react";
-import { AlertTitle as AlertTitleSlot } from "../alert.slots";
-import type { AlertTitleProps } from "../alert.types";
-import { AlertContext } from "./alert.root";
-
-const AlertTitle = ({ children, ...props }: AlertTitleProps) => {
-  const context = useContext(AlertContext);
-
-  useEffect(() => {
-    if (context) {
-      const slotElement = (
-        <AlertTitleSlot {...props} fontWeight="600">
-          {children}
-        </AlertTitleSlot>
-      );
-      // Register it with the parent
-      context.setTitle(slotElement);
-
-      // On unmount, remove it
-      return () => context.setTitle(null);
-    }
-  }, [children, props]);
-
-  return null;
-};
-
-AlertTitle.displayName = "Alert.Title";
-
-export default AlertTitle;

package/src/components/alert/index.ts

@@ -1,2 +0,0 @@
-export * from "./alert";
-export * from "./alert.types";

package/src/components/avatar/avatar.mdx

@@ -1,80 +0,0 @@
----
-id: Components-Avatar
-title: Avatar
-description: >-
-  A reusable Avatar component to display user profile pictures or initials that
-  is flexible and customizable for various use cases.
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Media
-  - Avatar
-tags:
-  - component
-figmaLink: >-
-  https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/New-Design-System?node-id=180-1106&t=MVbo0ZHDE08wKshT-0
----
-
-# Avatar
-
-A reusable Avatar component that displays user profile pictures or initials.
-It's accessible, keyboard-navigable, and follows WCAG guidelines.
-
-## Basic Usage
-
-Use the Avatar component to represent a user with either their profile picture
-or initials.
-
-```jsx-live
-const App = () => (
-  <Stack direction="horizontal">
-    <Avatar firstName="John" lastName="Doe" src="https://thispersondoesnotexist.com/ " />
-    <Avatar firstName="Jane" lastName="Smith" /> {/* Shows initials when no image */}
-  </Stack>
-)
-```
-
-## Features
-
-### Sizes
-
-Available in multiple sizes to suit different contexts:
-
-```jsx-live
-const App = () => {
-  const sizes = ["md", "xs", "2xs"];
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <Avatar
-          key={size}
-          size={size}
-          firstName="John"
-          lastName="Doe"
-          src="https://thispersondoesnotexist.com/ "
-        />
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Fallback Behavior
-
-The component handles various scenarios gracefully:
-
-- Shows initials when no image is provided
-
-```jsx-live
-const App = () => (
-  <Stack direction="horizontal">
-    <Avatar firstName="John" lastName="Doe"/> {/* Shows JD */}
-  </Stack>
-)
-```
-
-## Props
-
-<PropTable id="Avatar" />

package/src/components/avatar/avatar.recipe.tsx

@@ -1,36 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-export const avatarRecipe = defineRecipe({
-  className: "avatar",
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    verticalAlign: "middle",
-    overflow: "hidden",
-    userSelect: "none",
-    borderRadius: "full",
-    flexShrink: 0,
-    fontWeight: "600",
-    backgroundColor: "colorPalette.3",
-    colorPalette: "primary",
-    color: "colorPalette.11",
-    focusVisibleRing: "outside",
-    "button&": {
-      cursor: "button",
-    },
-    _disabled: {
-      layerStyle: "disabled",
-    },
-  },
-  variants: {
-    size: {
-      md: { width: 1000, height: 1000, textStyle: "sm" },
-      xs: { width: 800, height: 800, textStyle: "xs" },
-      "2xs": { width: 600, height: 600, textStyle: "xs" },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-  },
-});

package/src/components/avatar/avatar.slots.tsx

@@ -1,16 +0,0 @@
-import {
-  type HTMLChakraProps,
-  type RecipeProps,
-  type UnstyledProp,
-  createRecipeContext,
-} from "@chakra-ui/react";
-import { avatarRecipe } from "./avatar.recipe";
-
-interface AvatarRecipeProps extends RecipeProps<"div">, UnstyledProp {}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface AvatarRootProps
-  extends HTMLChakraProps<"div", AvatarRecipeProps> {}
-const { withContext } = createRecipeContext({ recipe: avatarRecipe });
-
-export const AvatarRoot = withContext<HTMLElement, AvatarRootProps>("figure");

package/src/components/avatar/avatar.stories.tsx

@@ -1,136 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar } from "./avatar";
-import type { AvatarProps } from "./avatar.types";
-import { within, expect } from "@storybook/test";
-import { Button, Stack } from "@/components";
-
-/**
- * Storybook metadata configuration
- * - title: determines the location in the sidebar
- * - component: references the component being documented
- */
-const meta: Meta<typeof Avatar> = {
-  title: "components/Avatar",
-  component: Avatar,
-};
-
-export default meta;
-type Story = StoryObj<typeof Avatar>;
-
-const sizes: AvatarProps["size"][] = ["md", "xs", "2xs"];
-
-const colorPalettes: AvatarProps["colorPalette"][] = [
-  "red",
-  "green",
-  "blue",
-  "amber",
-];
-
-const avatarImg = "https://thispersondoesnotexist.com/ ";
-
-export const Base: Story = {
-  args: {
-    src: avatarImg,
-    ["aria-label"]: "avatar",
-    alt: "avatar",
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const avatar = canvas.getByLabelText("avatar");
-
-    await step("Uses a <figure> element by default", async () => {
-      await expect(avatar.tagName).toBe("FIGURE");
-    });
-  },
-};
-
-export const Sizes: Story = {
-  args: {
-    src: avatarImg,
-    ["aria-label"]: "avatar",
-    alt: "avatar",
-  },
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {sizes.map((size) => (
-          <Avatar key={size as string} {...args} size={size} alt="avatar" />
-        ))}
-      </Stack>
-    );
-  },
-};
-
-export const BaseWithInitials: Story = {
-  args: {
-    firstName: "John",
-    lastName: "Doe",
-    ["aria-label"]: "avatar",
-    alt: "avatar",
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const avatar = canvas.getByLabelText("avatar");
-    await step(
-      "Take first letters of first and last name to make initials",
-      async () => {
-        await expect(avatar).toHaveTextContent("JD");
-      }
-    );
-  },
-};
-
-export const SizesWithInitials: Story = {
-  args: {
-    firstName: "Michael",
-    lastName: "Douglas",
-    ["aria-label"]: "avatar",
-    alt: "avatar",
-  },
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {sizes.map((size) => (
-          <Avatar key={size as string} {...args} size={size} alt="avatar" />
-        ))}
-      </Stack>
-    );
-  },
-};
-
-export const Colors: Story = {
-  args: {
-    firstName: "Michael",
-    lastName: "Douglas",
-    ["aria-label"]: "avatar",
-    alt: "avatar",
-  },
-  render: (args) => {
-    return (
-      <Stack direction="row" gap="400" alignItems="center">
-        {colorPalettes.map((colorPalette) => (
-          <Avatar
-            key={colorPalette as string}
-            {...args}
-            colorPalette={colorPalette}
-            alt="avatar"
-          />
-        ))}
-      </Stack>
-    );
-  },
-};
-
-export const InAButton: Story = {
-  args: {
-    src: avatarImg,
-  },
-
-  render(args) {
-    return (
-      <Button unstyled asChild>
-        <Avatar {...args} as="button" />
-      </Button>
-    );
-  },
-};

package/src/components/avatar/avatar.tsx

@@ -1,34 +0,0 @@
-import { forwardRef } from "react";
-import { Image } from "@chakra-ui/react";
-import { type AvatarProps } from "./avatar.types";
-import { AvatarRoot } from "./avatar.slots.tsx";
-
-function getInitials(firstName: string, lastName: string) {
-  return (
-    firstName.split("")[0].toUpperCase() + lastName.split("")[0].toUpperCase()
-  );
-}
-
-export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
-  const { firstName, lastName, src, alt, ...rest } = props;
-
-  const fullName = `${firstName} ${lastName}`;
-
-  const sharedProps = {
-    "aria-label": `${fullName} avatar`,
-    ref,
-    ...rest,
-  };
-  return (
-    <AvatarRoot {...sharedProps}>
-      {src ? (
-        // TODO: implement more robust error handling for image
-        <Image src={src} alt={alt || fullName} />
-      ) : (
-        getInitials(firstName, lastName)
-      )}
-    </AvatarRoot>
-  );
-});
-
-Avatar.displayName = "Avatar";

package/src/components/avatar/avatar.types.ts

@@ -1,33 +0,0 @@
-import type { HTMLAttributes } from "react";
-import type { RecipeVariantProps } from "@chakra-ui/react";
-import { avatarRecipe } from "./avatar.recipe.tsx";
-import type { AvatarRootProps } from "./avatar.slots";
-export interface AvatarComponentProps
-  extends HTMLAttributes<HTMLDivElement>,
-    RecipeVariantProps<typeof avatarRecipe> {
-  /**
-   * The first name used to show initials
-   */
-  firstName: string;
-  /**
-   * The last name used to show initials
-   */
-  lastName: string;
-  /**
-   * The image URL
-   */
-  src?: string;
-  /**
-   * Alt text for the avatar image
-   */
-  alt?: string;
-  /**
-   * If the avatar is disabled
-   */
-  isDisabled?: boolean;
-}
-
-type FunctionalAvatarProps = AvatarRootProps & AvatarComponentProps;
-export interface AvatarProps extends FunctionalAvatarProps {
-  children?: React.ReactNode;
-}

package/src/components/avatar/index.ts

@@ -1,2 +0,0 @@
-export * from './avatar'
-export * from './avatar.types'

package/src/components/badge/badge.mdx

@@ -1,91 +0,0 @@
----
-id: Components-Badge
-title: Badge
-description: To display small status indicators or labels.
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Badge
-tags:
-  - component
----
-
-# Badge
-
-To display small status indicators or labels.
-
-## Basic Usage
-
-[Explain the basic usage / usecase of the component].
-
-```jsx-live
-const App = () => <Badge>I am Badge!</Badge>
-```
-
-### Sizes
-
-Available sizes.
-
-```jsx-live
-const App = () => {
-
-  const sizes = ['md', 'xs', '2xs'];
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <Badge key={size} size={size}>'{size}' Badge</Badge>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-Available variants.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid', 'subtle', 'outline', 'ghost', 'plain'];
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <Badge key={variant} variant={variant}>'{variant}' Badge</Badge>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Colors
-
-[Explain usage with different colors/semantics.]
-
-```jsx-live
-const App = () => {
-  const variants = ["solid", "subtle", "outline", "ghost", "link", "plain"];
-  const colors = ["neutral", "primary", "info", "success", "danger", "error"];
-
-  return (
-    <Stack>
-      {colors.map((color) => (
-        <Stack key={color} direction="horizontal">
-          {variants.map((variant) => (
-            <Badge colorPalette={color} key={variant} variant={variant}>
-              '{variant}' Badge
-            </Badge>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-## Props
-
-<PropTable id="Badge" />