@atlaskit/storybook-addon-design-system 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @atlaskit/storybook-addon-design-system
+
+## 0.1.0
+
+### Minor Changes
+
+- [`ddbec37a16c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddbec37a16c) - Initial release of the design system storybook addon package. Intended to be a generic package for all storybook releated DS tooling

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2021-Present Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1 @@
+# Design System storybook addons

package/dist/cjs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "withDesignTokens", {
+  enumerable: true,
+  get: function get() {
+    return _tokens.withDesignTokens;
+  }
+});
+
+var _tokens = require("./tokens");

package/dist/cjs/tokens/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PANEL_TITLE = exports.PANEL_ID = exports.EVENT_THEME_CHANGED = exports.DECORATOR_PARAM = exports.DECORATOR_ID = exports.ADDON_ID = void 0;
+var ADDON_ID = 'ads-tokens';
+exports.ADDON_ID = ADDON_ID;
+var PANEL_ID = "".concat(ADDON_ID, "/panel");
+exports.PANEL_ID = PANEL_ID;
+var PANEL_TITLE = "Design Tokens";
+exports.PANEL_TITLE = PANEL_TITLE;
+var EVENT_THEME_CHANGED = "".concat(ADDON_ID, "/on-theme-change");
+exports.EVENT_THEME_CHANGED = EVENT_THEME_CHANGED;
+var DECORATOR_ID = 'withDesignTokens';
+exports.DECORATOR_ID = DECORATOR_ID;
+var DECORATOR_PARAM = 'DesignTokens';
+exports.DECORATOR_PARAM = DECORATOR_PARAM;

package/dist/cjs/tokens/decorator.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _addons = require("@storybook/addons");
+
+require("../../../node_modules/@atlaskit/tokens/css/atlassian-light.css");
+
+require("../../../node_modules/@atlaskit/tokens/css/atlassian-dark.css");
+
+var _constants = require("./constants");
+
+// eslint-disable-next-line
+// eslint-disable-next-line
+var withDesignTokens = (0, _addons.makeDecorator)({
+  name: _constants.DECORATOR_ID,
+  parameterName: _constants.DECORATOR_PARAM,
+  wrapper: function wrapper(storyFn, context) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _addons.useEffect)(function () {
+      var setTheme = function setTheme(theme) {
+        if (!theme || theme === 'none') {
+          delete document.documentElement.dataset.theme;
+          return;
+        } // HACK: Allows us to disable the light mode style since it uses root:
+
+
+        if (theme === 'light') {
+          document.querySelectorAll('style').forEach(function (el) {
+            if (el.innerText.includes(':root, html[data-theme="light"]')) {
+              el.innerText = el.textContent.replace(':root,', '');
+            }
+          });
+        }
+
+        document.documentElement.dataset.theme = theme;
+      };
+
+      var channel = _addons.addons.getChannel();
+
+      channel.on(_constants.EVENT_THEME_CHANGED, setTheme);
+      return function () {
+        channel.off(_constants.EVENT_THEME_CHANGED, setTheme);
+      };
+    }, [context.id]);
+    return storyFn(context);
+  }
+});
+var _default = withDesignTokens;
+exports.default = _default;

package/dist/cjs/tokens/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "withDesignTokens", {
+  enumerable: true,
+  get: function get() {
+    return _decorator.default;
+  }
+});
+
+var _decorator = _interopRequireDefault(require("./decorator"));

package/dist/cjs/tokens/register.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addons = require("@storybook/addons");
+
+var _components = require("@storybook/components");
+
+var _constants = require("./constants");
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+// eslint-disable-next-line import/no-extraneous-dependencies
+var TokensPanel = function TokensPanel(_ref) {
+  var onThemeChange = _ref.onThemeChange;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "ADS Design Tokens"), /*#__PURE__*/_react.default.createElement("select", {
+    name: "theme",
+    onChange: function onChange(event) {
+      return onThemeChange(event.target.value);
+    }
+  }, /*#__PURE__*/_react.default.createElement("option", {
+    value: "none"
+  }, "Disable theme"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "light"
+  }, "Light theme"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "dark"
+  }, "Dark theme")));
+};
+
+_addons.addons.register(_constants.ADDON_ID, function (api) {
+  _addons.addons.add(_constants.PANEL_ID, {
+    type: _addons.types.PANEL,
+    title: _constants.PANEL_TITLE,
+    render: function render(_ref2) {
+      var active = _ref2.active,
+          key = _ref2.key;
+      return /*#__PURE__*/_react.default.createElement(_components.AddonPanel, {
+        active: active || false,
+        key: key
+      }, /*#__PURE__*/_react.default.createElement(TokensPanel, {
+        onThemeChange: function onThemeChange(theme) {
+          return api.emit(_constants.EVENT_THEME_CHANGED, theme);
+        }
+      }));
+    }
+  });
+});

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/storybook-addon-design-system",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { withDesignTokens } from './tokens';

package/dist/es2019/tokens/constants.js

@@ -0,0 +1,6 @@
+export const ADDON_ID = 'ads-tokens';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PANEL_TITLE = `Design Tokens`;
+export const EVENT_THEME_CHANGED = `${ADDON_ID}/on-theme-change`;
+export const DECORATOR_ID = 'withDesignTokens';
+export const DECORATOR_PARAM = 'DesignTokens';

package/dist/es2019/tokens/decorator.js

@@ -0,0 +1,40 @@
+import { addons, makeDecorator, useEffect } from '@storybook/addons'; // eslint-disable-next-line
+
+import '../../../node_modules/@atlaskit/tokens/css/atlassian-light.css'; // eslint-disable-next-line
+
+import '../../../node_modules/@atlaskit/tokens/css/atlassian-dark.css';
+import { DECORATOR_ID, DECORATOR_PARAM, EVENT_THEME_CHANGED } from './constants';
+const withDesignTokens = makeDecorator({
+  name: DECORATOR_ID,
+  parameterName: DECORATOR_PARAM,
+  wrapper: (storyFn, context) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      const setTheme = theme => {
+        if (!theme || theme === 'none') {
+          delete document.documentElement.dataset.theme;
+          return;
+        } // HACK: Allows us to disable the light mode style since it uses root:
+
+
+        if (theme === 'light') {
+          document.querySelectorAll('style').forEach(el => {
+            if (el.innerText.includes(':root, html[data-theme="light"]')) {
+              el.innerText = el.textContent.replace(':root,', '');
+            }
+          });
+        }
+
+        document.documentElement.dataset.theme = theme;
+      };
+
+      const channel = addons.getChannel();
+      channel.on(EVENT_THEME_CHANGED, setTheme);
+      return () => {
+        channel.off(EVENT_THEME_CHANGED, setTheme);
+      };
+    }, [context.id]);
+    return storyFn(context);
+  }
+});
+export default withDesignTokens;

package/dist/es2019/tokens/index.js

@@ -0,0 +1 @@
+export { default as withDesignTokens } from './decorator';

package/dist/es2019/tokens/register.js

@@ -0,0 +1,39 @@
+import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { addons, types } from '@storybook/addons'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { AddonPanel } from '@storybook/components';
+import { ADDON_ID, EVENT_THEME_CHANGED, PANEL_ID, PANEL_TITLE } from './constants';
+
+const TokensPanel = ({
+  onThemeChange
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    padding: '20px'
+  }
+}, /*#__PURE__*/React.createElement("h1", null, "ADS Design Tokens"), /*#__PURE__*/React.createElement("select", {
+  name: "theme",
+  onChange: event => onThemeChange(event.target.value)
+}, /*#__PURE__*/React.createElement("option", {
+  value: "none"
+}, "Disable theme"), /*#__PURE__*/React.createElement("option", {
+  value: "light"
+}, "Light theme"), /*#__PURE__*/React.createElement("option", {
+  value: "dark"
+}, "Dark theme")));
+
+addons.register(ADDON_ID, api => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: PANEL_TITLE,
+    render: ({
+      active,
+      key
+    }) => /*#__PURE__*/React.createElement(AddonPanel, {
+      active: active || false,
+      key: key
+    }, /*#__PURE__*/React.createElement(TokensPanel, {
+      onThemeChange: theme => api.emit(EVENT_THEME_CHANGED, theme)
+    }))
+  });
+});

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/storybook-addon-design-system",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { withDesignTokens } from './tokens';

package/dist/esm/tokens/constants.js

@@ -0,0 +1,6 @@
+export var ADDON_ID = 'ads-tokens';
+export var PANEL_ID = "".concat(ADDON_ID, "/panel");
+export var PANEL_TITLE = "Design Tokens";
+export var EVENT_THEME_CHANGED = "".concat(ADDON_ID, "/on-theme-change");
+export var DECORATOR_ID = 'withDesignTokens';
+export var DECORATOR_PARAM = 'DesignTokens';

package/dist/esm/tokens/decorator.js

@@ -0,0 +1,40 @@
+import { addons, makeDecorator, useEffect } from '@storybook/addons'; // eslint-disable-next-line
+
+import '../../../node_modules/@atlaskit/tokens/css/atlassian-light.css'; // eslint-disable-next-line
+
+import '../../../node_modules/@atlaskit/tokens/css/atlassian-dark.css';
+import { DECORATOR_ID, DECORATOR_PARAM, EVENT_THEME_CHANGED } from './constants';
+var withDesignTokens = makeDecorator({
+  name: DECORATOR_ID,
+  parameterName: DECORATOR_PARAM,
+  wrapper: function wrapper(storyFn, context) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(function () {
+      var setTheme = function setTheme(theme) {
+        if (!theme || theme === 'none') {
+          delete document.documentElement.dataset.theme;
+          return;
+        } // HACK: Allows us to disable the light mode style since it uses root:
+
+
+        if (theme === 'light') {
+          document.querySelectorAll('style').forEach(function (el) {
+            if (el.innerText.includes(':root, html[data-theme="light"]')) {
+              el.innerText = el.textContent.replace(':root,', '');
+            }
+          });
+        }
+
+        document.documentElement.dataset.theme = theme;
+      };
+
+      var channel = addons.getChannel();
+      channel.on(EVENT_THEME_CHANGED, setTheme);
+      return function () {
+        channel.off(EVENT_THEME_CHANGED, setTheme);
+      };
+    }, [context.id]);
+    return storyFn(context);
+  }
+});
+export default withDesignTokens;

package/dist/esm/tokens/index.js

@@ -0,0 +1 @@
+export { default as withDesignTokens } from './decorator';

package/dist/esm/tokens/register.js

@@ -0,0 +1,45 @@
+import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { addons, types } from '@storybook/addons'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { AddonPanel } from '@storybook/components';
+import { ADDON_ID, EVENT_THEME_CHANGED, PANEL_ID, PANEL_TITLE } from './constants';
+
+var TokensPanel = function TokensPanel(_ref) {
+  var onThemeChange = _ref.onThemeChange;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/React.createElement("h1", null, "ADS Design Tokens"), /*#__PURE__*/React.createElement("select", {
+    name: "theme",
+    onChange: function onChange(event) {
+      return onThemeChange(event.target.value);
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "none"
+  }, "Disable theme"), /*#__PURE__*/React.createElement("option", {
+    value: "light"
+  }, "Light theme"), /*#__PURE__*/React.createElement("option", {
+    value: "dark"
+  }, "Dark theme")));
+};
+
+addons.register(ADDON_ID, function (api) {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: PANEL_TITLE,
+    render: function render(_ref2) {
+      var active = _ref2.active,
+          key = _ref2.key;
+      return /*#__PURE__*/React.createElement(AddonPanel, {
+        active: active || false,
+        key: key
+      }, /*#__PURE__*/React.createElement(TokensPanel, {
+        onThemeChange: function onThemeChange(theme) {
+          return api.emit(EVENT_THEME_CHANGED, theme);
+        }
+      }));
+    }
+  });
+});

package/dist/esm/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/storybook-addon-design-system",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { withDesignTokens } from './tokens';

package/dist/types/tokens/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ADDON_ID = "ads-tokens";
+export declare const PANEL_ID: string;
+export declare const PANEL_TITLE = "Design Tokens";
+export declare const EVENT_THEME_CHANGED: string;
+export declare const DECORATOR_ID = "withDesignTokens";
+export declare const DECORATOR_PARAM = "DesignTokens";

package/dist/types/tokens/decorator.d.ts

@@ -0,0 +1,4 @@
+import '../../../node_modules/@atlaskit/tokens/css/atlassian-light.css';
+import '../../../node_modules/@atlaskit/tokens/css/atlassian-dark.css';
+declare const withDesignTokens: (...args: any) => any;
+export default withDesignTokens;

package/dist/types/tokens/index.d.ts

@@ -0,0 +1 @@
+export { default as withDesignTokens } from './decorator';

package/dist/types/tokens/register.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@atlaskit/storybook-addon-design-system",
+  "version": "0.1.0",
+  "author": "Atlassian Pty Ltd",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Design System Team",
+    "releaseModel": "scheduled"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.tsx",
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
+  "dependencies": {
+    "@atlaskit/tokens": "^0.4.0",
+    "@babel/runtime": "^7.0.0",
+    "@storybook/addons": "^6.1.11",
+    "@storybook/components": "^6.0.0"
+  },
+  "devDependencies": {
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "design-system": "v1",
+      "deprecation": "no-deprecated-imports",
+      "styling": "emotion"
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+}

package/register-tokens.js

@@ -0,0 +1,2 @@
+/* eslint-disable */
+require('./dist/cjs/tokens/register');