home-new-tab/config/storybook-config/.storybook/preview.tsx at 4f0e5198b97936b10b2e0acf6c6561f1329fc95c · mozilla/home-new-tab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import "@ui/styles/global.css" // This is our base styles

import type { Preview } from "@storybook/react-vite"
import { ImageSourceContext } from "../../../ui/components/discover-card/ImageSourceContext"

const wallpapers = [
  "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/newtab-wallpapers-v2/e94b1e49-c518-40d6-98e3-dffab6cc370d.avif",
  "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/newtab-wallpapers-v2/f5c362af-16df-488d-a8b2-bf8cf29d1c63.avif",
  "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/newtab-wallpapers-v2/32c50b87-9f4b-46cf-a467-f4aa768a1687.avif",
  "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/newtab-wallpapers-v2/036ac885-33cb-41db-bcbb-52dd49254a12.avif",
  "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/newtab-wallpapers-v2/13495d0e-f975-4218-b5f0-c841c69ce2e5.avif",
  "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/newtab-wallpapers-v2/d357925c-b9cd-417e-8731-14272f28f556.avif",
]

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  globalTypes: {
    theme: {
      name: "Theme",
      description: "Global theme for components",
      defaultValue: "system",
      toolbar: {
        icon: "sun",
        // array of plain string values or MenuItem shape
        items: ["system", "light", "dark"],
        // Property that specifies if the name of the item will be displayed
        showName: true,
        // Change title based on selected value
        dynamicTitle: true,
      },
    },
    wallpaper: {
      name: "Wallpaper",
      description: "Wallpaper to use as background for testing",
      defaultValue: null,
      toolbar: {
        icon: "photo",
        // array of plain string values or MenuItem shape
        items: wallpapers,
        // Property that specifies if the name of the item will be displayed
        showName: false,
        // Change title based on selected value
        dynamicTitle: false,
      },
    },
    imageSource: {
      name: "Image Source",
      description: "Toggle between original and smart-cropped images",
      defaultValue: "smart-crop",
      toolbar: {
        icon: "camera",
        items: [
          { value: "smart-crop", title: "Smart Crop (Cloudinary)" },
          { value: "original", title: "Original URLs" },
        ],
        showName: true,
        dynamicTitle: true,
      },
    },
  },
  decorators: [
    (Story, context) => {
      document.body.classList.remove("colormode-system")
      document.body.classList.remove("colormode-light")
      document.body.classList.remove("colormode-dark")
      document.body.classList.add(`colormode-${context.globals.theme}`)

      document.body.style.backgroundImage = `url(${context.globals.wallpaper})`

      return (
        <ImageSourceContext.Provider value={context.globals.imageSource || "smart-crop"}>
          <div style={{ minHeight: "100vh" }}>
            <div className="body-wrapper">
              <Story {...context} />
            </div>
          </div>
        </ImageSourceContext.Provider>
      )
    },
  ],
}

export default preview