Tremor - React Component Library for Dashboards

The Tremor project uses Playwright for end-to-end testing of its components. The test suite is configured to run against the Storybook server, which serves the component documentation and examples.

Key Configuration Details:

• Test Directory: Tests are located in ./src/components.
• Execution Mode: Tests run in parallel (fullyParallel: true) by default.
• CI Behavior: In CI environments, the build fails if test.only is found, retries are set to 2, and workers are limited to 1 to ensure stability.
• Reporter: Test results are reported via the HTML reporter.
• Trace Collection: Traces are collected on the first retry to aid debugging.
• Web Server: The test runner automatically starts the Storybook server (npm run storybook) on http://localhost:6006 before running tests.

Environment Variables:

• CI: When set, enables strict CI behaviors (fail on test.only, retries, single worker).
• .env: The configuration supports loading environment variables via dotenv, though it is currently commented out.

Browser Support: Tests run against Chromium, Firefox, and WebKit (Desktop Safari) by default. Mobile and branded browser configurations (Edge, Chrome channel) are commented out but available for uncommenting.

Sources: playwright.config.ts

The Toast component displays temporary notifications. It requires a ToastProvider wrapper and a ToastViewport container. The component accepts the following props:

• title (string): The main title of the toast.
• description (string): The detailed message.
• variant (string): The style variant. Options include default, warning, error, success, and loading.
• open (boolean): Controls whether the toast is visible.
• disableDismiss (boolean): If true, prevents the user from dismissing the toast.
• action (object): Adds an action button to the toast. Contains:
  • label (string): The button text.
  • altText (string): Accessibility text for the button.
  • onClick (function): The click handler.

Basic Usage:

import { ToastProvider, ToastViewport, Toast } from "@tremor/react";

// Wrap your app or component tree
<ToastProvider>
  <ToastViewport>
    <Toast
      title="Information"
      description="Your account has been successfully created."
      open={true}
      variant="success"
    />
  </ToastViewport>
</ToastProvider>

With an Action Button:

<Toast
  title="Deployment Successful"
  description="Your project has been deployed."
  open={true}
  variant="success"
  action={{
    label: "Revert",
    altText: "Revert the deployment",
    onClick: () => handleRevert(),
  }}
/>

import { ToastProvider, ToastViewport, Toast } from "@tremor/react";

<ToastProvider>
  <ToastViewport>
    <Toast
      title="Information"
      description="Your account has been successfully created."
      open={true}
      variant="success"
    />
  </ToastViewport>
</ToastProvider>

Sources: src/components/Toast/toast.stories.tsx

To trigger toasts programmatically (e.g., on button clicks), use the toast function from the useToast hook and include a Toaster component in your render tree.

Steps:

1. Import Toaster from @tremor/react.
2. Place <Toaster /> in your component tree (usually at the root).
3. Import toast from @tremor/hooks (or the specific hook path).
4. Call toast() with title and description options.

Example:

import { Toaster } from "@tremor/react";
import { Button } from "@tremor/react";
import { toast } from "@tremor/hooks";

export function MyComponent() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() =>
          toast({
            title: "Info",
            description: "The quick brown fox jumps over the lazy dog.",
          })
        }
      >
        Show Toast
      </Button>
    </>
  );
}

import { Toaster } from "@tremor/react";
import { Button } from "@tremor/react";
import { toast } from "@tremor/hooks";

<Toaster />
<Button
  onClick={() =>
    toast({
      title: "Info",
      description: "The quick brown fox jumps over the lazy dog.",
    })
  }
>
  Show Toast
</Button>

Sources: src/components/Toast/toast.stories.tsx

Add quick-select presets to the DateRangePicker component by passing a presets array. Each preset object must include a label string and a dateRange object with from and to Date properties.

Example presets include "Today", "Last 7 days", "Last 30 days", "Last 3 months", "Last 6 months", "Month to date", and "Year to date".

import { DateRangePicker } from "@tremor/react" // or your local path

const rangePresets = [
  {
    label: "Today",
    dateRange: {
      from: new Date(),
      to: new Date(),
    },
  },
  {
    label: "Last 7 days",
    dateRange: {
      from: new Date(new Date().setDate(new Date().getDate() - 7)),
      to: new Date(),
    },
  },
  {
    label: "Last 30 days",
    dateRange: {
      from: new Date(new Date().setDate(new Date().getDate() - 30)),
      to: new Date(),
    },
  },
]

<DateRangePicker presets={rangePresets} />

const rangePresets = [
  {
    label: "Today",
    dateRange: {
      from: new Date(),
      to: new Date(),
    },
  },
  {
    label: "Last 7 days",
    dateRange: {
      from: new Date(new Date().setDate(new Date().getDate() - 7)),
      to: new Date(),
    },
  },
]

<DateRangePicker presets={rangePresets} />

Sources: src/components/DatePicker/daterangepicker.stories.tsx