@atlaskit/storybook-addon-design-system 3.2.4 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/cjs/decorator.js +18 -17
  3. package/dist/cjs/preset.js +1 -1
  4. package/dist/esm/decorator.js +17 -16
  5. package/dist/esm/preset.js +1 -1
  6. package/package.json +6 -11
  7. package/dist/types-ts4.5/constants.d.ts +0 -5
  8. package/dist/types-ts4.5/decorator.d.ts +0 -4
  9. package/dist/types-ts4.5/index.d.ts +0 -2
  10. package/dist/types-ts4.5/manager.d.ts +0 -1
  11. package/dist/types-ts4.5/preset.d.ts +0 -1
  12. package/dist/types-ts4.5/preview.d.ts +0 -13
  13. package/dist/types-ts4.5/tool.d.ts +0 -8
  14. package/dist/types-ts4.5/types.d.ts +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # @atlaskit/storybook-addon-design-system
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
8
+ Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
9
+
10
+ Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
11
+
12
+ Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
13
+
14
+ ```diff
15
+ - "typesVersions": {
16
+ - ">=4.5 <4.9": {
17
+ - "*": [
18
+ - "dist/types-ts4.5/*",
19
+ - "dist/types-ts4.5/index.d.ts"
20
+ - ]
21
+ - }
22
+ - },
23
+ ```
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies
28
+
29
+ ## 3.2.5
30
+
31
+ ### Patch Changes
32
+
33
+ - Updated dependencies
34
+
3
35
  ## 3.2.4
4
36
 
5
37
  ### Patch Changes
package/dist/cjs/decorator.js CHANGED
@@ -12,7 +12,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _previewApi = require("@storybook/preview-api");
14
14
  var _tokens = require("@atlaskit/tokens");
15
- 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); }
15
+ 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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
16
16
  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; }
17
17
  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; }
18
18
  var splitColumnStyles = {
@@ -41,14 +41,15 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
41
41
  // eslint-disable-next-line react-hooks/rules-of-hooks
42
42
  (0, _previewApi.useEffect)(function () {
43
43
  (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
44
- return _regenerator.default.wrap(function _callee$(_context) {
44
+ var _t;
45
+ return _regenerator.default.wrap(function (_context) {
45
46
  while (1) switch (_context.prev = _context.next) {
46
47
  case 0:
47
- _context.t0 = theme;
48
- _context.next = _context.t0 === 'light' ? 3 : _context.t0 === 'dark' ? 3 : _context.t0 === 'auto' ? 3 : _context.t0 === 'split' ? 6 : _context.t0 === 'stack' ? 6 : _context.t0 === 'none' ? 10 : 14;
48
+ _t = theme;
49
+ _context.next = _t === 'light' ? 1 : _t === 'dark' ? 1 : _t === 'auto' ? 1 : _t === 'split' ? 3 : _t === 'stack' ? 3 : _t === 'none' ? 5 : 6;
49
50
  break;
50
- case 3:
51
- _context.next = 5;
51
+ case 1:
52
+ _context.next = 2;
52
53
  return (0, _tokens.setGlobalTheme)({
53
54
  colorMode: theme,
54
55
  spacing: 'spacing',
@@ -56,10 +57,10 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
56
57
  typography: 'typography',
57
58
  motion: 'motion'
58
59
  });
59
- case 5:
60
- return _context.abrupt("break", 15);
61
- case 6:
62
- _context.next = 8;
60
+ case 2:
61
+ return _context.abrupt("continue", 7);
62
+ case 3:
63
+ _context.next = 4;
63
64
  return (0, _tokens.setGlobalTheme)({
64
65
  colorMode: 'auto',
65
66
  spacing: 'spacing',
@@ -67,7 +68,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
67
68
  typography: 'typography',
68
69
  motion: 'motion'
69
70
  });
70
- case 8:
71
+ case 4:
71
72
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
72
73
  var clone = el.cloneNode(true);
73
74
  clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
@@ -75,17 +76,17 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
75
76
  clone.textContent = clone.textContent.replace(/html\[/g, '[');
76
77
  document.head.append(clone);
77
78
  });
78
- return _context.abrupt("break", 15);
79
- case 10:
79
+ return _context.abrupt("continue", 7);
80
+ case 5:
80
81
  delete document.documentElement.dataset.theme;
81
82
  delete document.documentElement.dataset.colorMode;
82
83
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
83
84
  return el.remove();
84
85
  });
85
- return _context.abrupt("break", 15);
86
- case 14:
87
- return _context.abrupt("break", 15);
88
- case 15:
86
+ return _context.abrupt("continue", 7);
87
+ case 6:
88
+ return _context.abrupt("continue", 7);
89
+ case 7:
89
90
  case "end":
90
91
  return _context.stop();
91
92
  }
package/dist/cjs/preset.js CHANGED
@@ -9,7 +9,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
9
9
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
10
10
  var webpack = exports.webpack = /*#__PURE__*/function () {
11
11
  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(config) {
12
- return _regenerator.default.wrap(function _callee$(_context) {
12
+ return _regenerator.default.wrap(function (_context) {
13
13
  while (1) switch (_context.prev = _context.next) {
14
14
  case 0:
15
15
  return _context.abrupt("return", config);
package/dist/esm/decorator.js CHANGED
@@ -32,14 +32,15 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
32
32
  // eslint-disable-next-line react-hooks/rules-of-hooks
33
33
  useEffect(function () {
34
34
  _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
35
- return _regeneratorRuntime.wrap(function _callee$(_context) {
35
+ var _t;
36
+ return _regeneratorRuntime.wrap(function (_context) {
36
37
  while (1) switch (_context.prev = _context.next) {
37
38
  case 0:
38
- _context.t0 = theme;
39
- _context.next = _context.t0 === 'light' ? 3 : _context.t0 === 'dark' ? 3 : _context.t0 === 'auto' ? 3 : _context.t0 === 'split' ? 6 : _context.t0 === 'stack' ? 6 : _context.t0 === 'none' ? 10 : 14;
39
+ _t = theme;
40
+ _context.next = _t === 'light' ? 1 : _t === 'dark' ? 1 : _t === 'auto' ? 1 : _t === 'split' ? 3 : _t === 'stack' ? 3 : _t === 'none' ? 5 : 6;
40
41
  break;
41
- case 3:
42
- _context.next = 5;
42
+ case 1:
43
+ _context.next = 2;
43
44
  return setGlobalTheme({
44
45
  colorMode: theme,
45
46
  spacing: 'spacing',
@@ -47,10 +48,10 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
47
48
  typography: 'typography',
48
49
  motion: 'motion'
49
50
  });
50
- case 5:
51
- return _context.abrupt("break", 15);
52
- case 6:
53
- _context.next = 8;
51
+ case 2:
52
+ return _context.abrupt("continue", 7);
53
+ case 3:
54
+ _context.next = 4;
54
55
  return setGlobalTheme({
55
56
  colorMode: 'auto',
56
57
  spacing: 'spacing',
@@ -58,7 +59,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
58
59
  typography: 'typography',
59
60
  motion: 'motion'
60
61
  });
61
- case 8:
62
+ case 4:
62
63
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
63
64
  var clone = el.cloneNode(true);
64
65
  clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
@@ -66,17 +67,17 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
66
67
  clone.textContent = clone.textContent.replace(/html\[/g, '[');
67
68
  document.head.append(clone);
68
69
  });
69
- return _context.abrupt("break", 15);
70
- case 10:
70
+ return _context.abrupt("continue", 7);
71
+ case 5:
71
72
  delete document.documentElement.dataset.theme;
72
73
  delete document.documentElement.dataset.colorMode;
73
74
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
74
75
  return el.remove();
75
76
  });
76
- return _context.abrupt("break", 15);
77
- case 14:
78
- return _context.abrupt("break", 15);
79
- case 15:
77
+ return _context.abrupt("continue", 7);
78
+ case 6:
79
+ return _context.abrupt("continue", 7);
80
+ case 7:
80
81
  case "end":
81
82
  return _context.stop();
82
83
  }
package/dist/esm/preset.js CHANGED
@@ -2,7 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
2
2
  import _regeneratorRuntime from "@babel/runtime/regenerator";
3
3
  export var webpack = /*#__PURE__*/function () {
4
4
  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(config) {
5
- return _regeneratorRuntime.wrap(function _callee$(_context) {
5
+ return _regeneratorRuntime.wrap(function (_context) {
6
6
  while (1) switch (_context.prev = _context.next) {
7
7
  case 0:
8
8
  return _context.abrupt("return", config);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "3.2.4",
3
+ "version": "4.0.0",
4
4
  "description": "Design token storybook addon",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
@@ -16,20 +16,12 @@
16
16
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
17
17
  "type": "module",
18
18
  "main": "src/index.tsx",
19
- "typesVersions": {
20
- ">=4.5 <4.9": {
21
- "*": [
22
- "dist/types-ts4.5/*",
23
- "dist/types-ts4.5/index.d.ts"
24
- ]
25
- }
26
- },
27
19
  "sideEffects": [
28
20
  "**/*.compiled.css"
29
21
  ],
30
22
  "atlaskit:src": "src/index.tsx",
31
23
  "dependencies": {
32
- "@atlaskit/tokens": "^12.0.0",
24
+ "@atlaskit/tokens": "^14.0.0",
33
25
  "@babel/runtime": "^7.0.0",
34
26
  "@storybook/components": "^8.4.7",
35
27
  "@storybook/icons": "^1.2.9",
@@ -75,5 +67,8 @@
75
67
  ]
76
68
  }
77
69
  },
78
- "homepage": "https://atlassian.design/components/storybook-addon-design-system"
70
+ "homepage": "https://atlassian.design/components/storybook-addon-design-system",
71
+ "devDependencies": {
72
+ "react": "^18.2.0"
73
+ }
79
74
  }
package/dist/types-ts4.5/constants.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export declare const ADDON_ID = "ads-tokens";
2
- export declare const TOOL_ID: 'ads-tokens/tool';
3
- export declare const TITLE = "Design Tokens";
4
- export declare const DECORATOR_ID = "withDesignTokens";
5
- export declare const DECORATOR_PARAM = "DesignTokens";
package/dist/types-ts4.5/decorator.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import type { Renderer, StoryContext, PartialStoryFn as StoryFunction } from '@storybook/types';
3
- declare const withDesignTokens: (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => React.JSX.Element;
4
- export default withDesignTokens;
package/dist/types-ts4.5/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const _default: {};
2
- export default _default;
package/dist/types-ts4.5/manager.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/types-ts4.5/preset.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const webpack: (config: any) => Promise<any>;
package/dist/types-ts4.5/preview.d.ts DELETED
@@ -1,13 +0,0 @@
1
- /**
2
- * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
3
- * in order to augment stories:
4
- * - with extra rendering
5
- * - gather details about how a story is rendered
6
- *
7
- * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
8
- *
9
- * https://storybook.js.org/docs/react/writing-stories/decorators
10
- */
11
- import type { ProjectAnnotations, Renderer } from '@storybook/types';
12
- declare const preview: ProjectAnnotations<Renderer>;
13
- export default preview;
package/dist/types-ts4.5/tool.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- /**
3
- * __Tool__
4
- *
5
- * ADS Toolbar UI, visible in the topbar of the storybook UI.
6
- */
7
- declare const Tool: () => React.JSX.Element;
8
- export default Tool;
package/dist/types-ts4.5/types.d.ts DELETED
@@ -1 +0,0 @@
1
- export type Themes = 'light' | 'dark' | 'auto' | 'none' | 'split' | 'stack';