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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/storybook-addon-design-system
 
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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/decorator.js

@@ -12,8 +12,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireWildcard(require("react"));
 var _previewApi = require("@storybook/preview-api");
 var _tokens = require("@atlaskit/tokens");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var splitColumnStyles = {

package/dist/cjs/tool.js

@@ -12,8 +12,7 @@ var _components = require("@storybook/components");
 var _icons = require("@storybook/icons");
 var _managerApi = require("@storybook/manager-api");
 var _constants = require("./constants");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var themeOptions = [{
   id: 'auto',
   title: 'Same as system',
@@ -53,8 +52,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.1",
 	"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": "^5.0.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 }),