@atlaskit/storybook-addon-design-system 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/storybook-addon-design-system
 
+## 3.1.0
+
+### Minor Changes
+
+- [#154276](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154276)
+  [`917104b6edd11`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/917104b6edd11) -
+  Introduced `adsTheme` parameter for customizing the theme in preview.js that allows overriding the
+  theme with custom values 'light' or 'dark'.
+
 ## 3.0.0
 
 ### Major Changes

package/constellation/index/props.mdx

@@ -11,6 +11,25 @@
    };
    ```
 
+By default, the theme is set to auto (which matches the browser's theme). However, you can easily
+override this default by specifying a custom theme using the adsTheme parameter in your
+`.storybook/preview.js` file.
+
+### Example Usage
+
+In your `.storybook/preview.js` file, you can set the adsTheme parameter to either 'light' or
+'dark':
+
+```js
+const preview: Preview = {
+	parameters: {
+		adsTheme: 'light' | 'dark',
+	}
+	// ... other parameters
+}
+export default preview;
+```
+
 ## Storybook v7
 
 1. Install a pre-1.0 version of the addon (e.g., `0.8.0`).

package/dist/cjs/tool.js

@@ -53,8 +53,14 @@ var Tool = function Tool() {
     setIsVisible = _useState2[1];
   var _useGlobals = (0, _managerApi.useGlobals)(),
     _useGlobals2 = (0, _slicedToArray2.default)(_useGlobals, 2),
-    adsTheme = _useGlobals2[0].adsTheme,
+    originalAdsTheme = _useGlobals2[0].adsTheme,
     updateGlobals = _useGlobals2[1];
+  var adsTheme = (0, _managerApi.useParameter)('adsTheme', originalAdsTheme || 'auto');
+  (0, _react.useEffect)(function () {
+    updateGlobals({
+      adsTheme: adsTheme
+    });
+  }, [adsTheme, updateGlobals]);
   var setTheme = (0, _react.useCallback)(function (theme) {
     return updateGlobals({
       adsTheme: theme

package/dist/es2019/tool.js

@@ -1,7 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/components';
 import { BottomBarIcon, CircleHollowIcon, CircleIcon, CrossIcon, MirrorIcon, SidebarIcon } from '@storybook/icons';
-import { useGlobals } from '@storybook/manager-api';
+import { useGlobals, useParameter } from '@storybook/manager-api';
 import { TOOL_ID } from './constants';
 const themeOptions = [{
   id: 'auto',
@@ -38,8 +38,14 @@ const Tool = () => {
   var _themeOptions$find;
   const [isVisible, setIsVisible] = useState(false);
   const [{
-    adsTheme
+    adsTheme: originalAdsTheme
   }, updateGlobals] = useGlobals();
+  const adsTheme = useParameter('adsTheme', originalAdsTheme || 'auto');
+  useEffect(() => {
+    updateGlobals({
+      adsTheme
+    });
+  }, [adsTheme, updateGlobals]);
   const setTheme = useCallback(theme => updateGlobals({
     adsTheme: theme
   }), [updateGlobals]);

package/dist/esm/tool.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/components';
 import { BottomBarIcon, CircleHollowIcon, CircleIcon, CrossIcon, MirrorIcon, SidebarIcon } from '@storybook/icons';
-import { useGlobals } from '@storybook/manager-api';
+import { useGlobals, useParameter } from '@storybook/manager-api';
 import { TOOL_ID } from './constants';
 var themeOptions = [{
   id: 'auto',
@@ -43,8 +43,14 @@ var Tool = function Tool() {
     setIsVisible = _useState2[1];
   var _useGlobals = useGlobals(),
     _useGlobals2 = _slicedToArray(_useGlobals, 2),
-    adsTheme = _useGlobals2[0].adsTheme,
+    originalAdsTheme = _useGlobals2[0].adsTheme,
     updateGlobals = _useGlobals2[1];
+  var adsTheme = useParameter('adsTheme', originalAdsTheme || 'auto');
+  useEffect(function () {
+    updateGlobals({
+      adsTheme: adsTheme
+    });
+  }, [adsTheme, updateGlobals]);
   var setTheme = useCallback(function (theme) {
     return updateGlobals({
       adsTheme: theme

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/storybook-addon-design-system",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "Design token storybook addon",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -33,7 +33,7 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@storybook/components": "^8.4.7",
 		"@storybook/icons": "^1.2.9",

package/src/tool.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactElement, useCallback, useState } from 'react';
+import React, { type ReactElement, useCallback, useEffect, useState } from 'react';
 
 import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/components';
 import {
@@ -9,7 +9,7 @@ import {
 	MirrorIcon,
 	SidebarIcon,
 } from '@storybook/icons';
-import { useGlobals } from '@storybook/manager-api';
+import { useGlobals, useParameter } from '@storybook/manager-api';
 
 import { TOOL_ID } from './constants';
 import { type Themes } from './types';
@@ -36,7 +36,12 @@ const themeOptions: ThemeOption[] = [
  */
 const Tool = () => {
 	const [isVisible, setIsVisible] = useState(false);
-	const [{ adsTheme }, updateGlobals] = useGlobals();
+	const [{ adsTheme: originalAdsTheme }, updateGlobals] = useGlobals();
+	const adsTheme = useParameter('adsTheme', originalAdsTheme || 'auto');
+
+	useEffect(() => {
+		updateGlobals({ adsTheme });
+	}, [adsTheme, updateGlobals]);
 
 	const setTheme = useCallback(
 		(theme: Themes) => updateGlobals({ adsTheme: theme }),