@atlaskit/storybook-addon-design-system 1.1.1 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/storybook-addon-design-system
 
+## 1.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.0
+
+### Minor Changes
+
+- [#127511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127511)
+  [`db30e29344013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db30e29344013) -
+  Widening range of `react` and `react-dom` peer dependencies from `^16.8.0 || ^17.0.0 || ~18.2.0`
+  to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
+
+  This change has been done to enable usage of `react@18.3` as well as to have a consistent peer
+  dependency range for `react` and `react-dom` for `/platform` packages.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.1.1
 
 ### Patch Changes

package/constellation/index/props.mdx

@@ -1,38 +1,36 @@
-After installing the package, register the addon with your Storybook configuration in the
-`.storybook/main.js` file.
+## Storybook v8
 
-```diff
-module.exports = {
-  addons: [
-+    '@atlaskit/storybook-addon-design-system'
-  ]
-};
-```
-
-## Storybook v6 and below
-
-Add the decorator to `.storybook/preview.js`, which is responsible for applying the logic which has
-the ability to modify the DOM of your stories.
-
-```diff
-+ import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
+1. Install a latest v1 version of the addon (e.g., `1.1.0`).
+2. Register the addon with your Storybook configuration in the `.storybook/main.js` file.
 
-const { addDecorator } = require('@storybook/react');
+   ```diff
+   module.exports = {
+     addons: [
+   +    '@atlaskit/storybook-addon-design-system'
+     ]
+   };
+   ```
 
-+ addDecorator(withDesignTokens);
-```
+## Storybook v7
 
-## Storybook v7 and above
+1. Install a pre-1.0 version of the addon (e.g., `0.8.0`).
+2. Register the addon with your Storybook configuration in the `.storybook/main.js` file.
 
-For Storybook version 7, the following changes are necessary:
+   ```diff
+   module.exports = {
+     addons: [
+   +    '@atlaskit/storybook-addon-design-system'
+     ]
+   };
+   ```
 
-1. Initialising the `globalTypes.adsTheme` property in the global context
-2. Disable the
+3. Initialise the `globalTypes.adsTheme` property in the global context
+4. Disable the
    [built in `backgrounds` add on](https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds),
    as it conflicts with the ADS theming
 
-Both of these can be done in
-[the `preview` file](https://storybook.js.org/docs/configure#configure-story-rendering):
+Both step 3 and step 4 can be done in
+[the `preview.js` file](https://storybook.js.org/docs/configure#configure-story-rendering):
 
 ```diff
 + import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
@@ -58,3 +56,27 @@ const preview = {
 
 export default preview;
 ```
+
+## Storybook v6 and below
+
+1. Install a pre-1.0 version of the addon (e.g., `0.8.0`).
+2. Register the addon with your Storybook configuration in the `.storybook/main.js` file.
+
+   ```diff
+   module.exports = {
+     addons: [
+   +    '@atlaskit/storybook-addon-design-system'
+     ]
+   };
+   ```
+
+3. Add the decorator to `.storybook/preview.js`, which is responsible for applying the logic which
+   has the ability to modify the DOM of your stories.
+
+   ```diff
+   + import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
+
+   const { addDecorator } = require('@storybook/react');
+
+   + addDecorator(withDesignTokens);
+   ```

package/dist/cjs/decorator.js

@@ -13,7 +13,7 @@ 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 && Object.prototype.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, 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 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

@@ -13,7 +13,7 @@ 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 && Object.prototype.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, 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; }
 var themeOptions = [{
   id: 'auto',
   title: 'Same as system',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/storybook-addon-design-system",
-	"version": "1.1.1",
+	"version": "1.2.1",
 	"description": "Design token storybook addon",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -8,7 +8,6 @@
 	},
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
 		"runReact18": true,
 		"website": {
 			"name": "Storybook addon",
@@ -32,7 +31,7 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@storybook/components": "^8.1.0",
 		"@storybook/icons": "^1.2.9",
@@ -41,7 +40,7 @@
 		"@storybook/types": "8.0.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 	},
 	"bundler": {
 		"exportEntries": [

package/src/manager.tsx

@@ -7,7 +7,8 @@ addons.register(ADDON_ID, () => {
 	addons.add(TOOL_ID, {
 		type: types.TOOL,
 		title: TITLE,
-		match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+		match: ({ viewMode }: { viewMode?: string | undefined }) =>
+			!!(viewMode && viewMode.match(/^(story|docs)$/)),
 		render: Tool,
 	});
 });

package/src/tool.tsx

@@ -49,7 +49,7 @@ const Tool = () => {
 			trigger="click"
 			// closeOnClick
 			onVisibleChange={setIsVisible}
-			tooltip={({ onHide }) => (
+			tooltip={({ onHide }: { onHide: () => void }) => (
 				<TooltipLinkList
 					links={themeOptions.map(({ id, title, icon }) => ({
 						id,