@primer/components 33.0.0 → 33.1.0-rc.6856bcf5

package/lib/stories/TextInputWithTokens.stories.js

@@ -0,0 +1,252 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Unstyled = exports.WithVisibleTokenCount = exports.TokenRemoveButtonsHidden = exports.TokenWrappingPrevented = exports.MaxHeight = exports.TokenSizeVariants = exports.UsingIssueLabelTokens = exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _TextInputWithTokens = _interopRequireDefault(require("../TextInputWithTokens"));
+
+var _IssueLabelToken = _interopRequireDefault(require("../Token/IssueLabelToken"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Forms/Text Input with Tokens',
+  component: _TextInputWithTokens.default,
+  decorators: [Story => {
+    const [lastKey, setLastKey] = (0, _react.useState)('none');
+    const reportKey = (0, _react.useCallback)(event => {
+      setLastKey(event.key);
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+      onKeyDownCapture: reportKey
+    }, /*#__PURE__*/_react.default.createElement(_.Box, {
+      position: "absolute",
+      right: 5,
+      top: 2
+    }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(_.Box, {
+      paddingTop: 5
+    }, /*#__PURE__*/_react.default.createElement(Story, null)))));
+  }]
+};
+exports.default = _default;
+const mockTokens = [{
+  text: 'zero',
+  id: 0
+}, {
+  text: 'one',
+  id: 1
+}, {
+  text: 'two',
+  id: 2
+}, {
+  text: 'three',
+  id: 3
+}, {
+  text: 'four',
+  id: 4
+}, {
+  text: 'five',
+  id: 5
+}, {
+  text: 'six',
+  id: 6
+}, {
+  text: 'seven',
+  id: 7
+}, {
+  text: 'twenty',
+  id: 20
+}, {
+  text: 'twentyone',
+  id: 21
+}];
+
+const Default = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 3));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+
+exports.Default = Default;
+Default.displayName = "Default";
+
+const UsingIssueLabelTokens = () => {
+  const [tokens, setTokens] = (0, _react.useState)([{
+    text: 'enhancement',
+    id: 1,
+    fillColor: '#a2eeef'
+  }, {
+    text: 'bug',
+    id: 2,
+    fillColor: '#d73a4a'
+  }, {
+    text: 'good first issue',
+    id: 3,
+    fillColor: '#0cf478'
+  }]);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokenComponent: _IssueLabelToken.default,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+
+exports.UsingIssueLabelTokens = UsingIssueLabelTokens;
+UsingIssueLabelTokens.displayName = "UsingIssueLabelTokens";
+
+const TokenSizeVariants = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    sx: {
+      gap: '1em'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "small"
+  }), /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "medium"
+  }), /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "large"
+  }), /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "extralarge"
+  }));
+};
+
+exports.TokenSizeVariants = TokenSizeVariants;
+TokenSizeVariants.displayName = "TokenSizeVariants";
+
+const MaxHeight = () => {
+  const [tokens, setTokens] = (0, _react.useState)(mockTokens);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    maxHeight: "100px"
+  }));
+};
+
+exports.MaxHeight = MaxHeight;
+MaxHeight.displayName = "MaxHeight";
+MaxHeight.storyName = 'maxHeight 200px';
+
+const TokenWrappingPrevented = () => {
+  const [tokens, setTokens] = (0, _react.useState)(mockTokens);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    maxWidth: "500px"
+  }, /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    preventTokenWrapping: true,
+    block: true,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  }));
+};
+
+exports.TokenWrappingPrevented = TokenWrappingPrevented;
+TokenWrappingPrevented.displayName = "TokenWrappingPrevented";
+
+const TokenRemoveButtonsHidden = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    hideTokenRemoveButtons: true,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+
+exports.TokenRemoveButtonsHidden = TokenRemoveButtonsHidden;
+TokenRemoveButtonsHidden.displayName = "TokenRemoveButtonsHidden";
+
+const WithVisibleTokenCount = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 5));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    visibleTokenCount: 2
+  });
+};
+
+exports.WithVisibleTokenCount = WithVisibleTokenCount;
+WithVisibleTokenCount.displayName = "WithVisibleTokenCount";
+
+const Unstyled = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove // TODO: come up with a nicer way to unstyle an input component
+    ,
+    sx: {
+      border: '0',
+      padding: '0',
+      boxShadow: 'none',
+      ':focus-within': {
+        border: '0',
+        boxShadow: 'none'
+      }
+    }
+  });
+};
+
+exports.Unstyled = Unstyled;
+Unstyled.displayName = "Unstyled";

package/lib/stories/ThemeProvider.stories.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Nested = exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _styledComponents = require("styled-components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Generic behaviors/ThemeProvider',
+  component: _.ThemeProvider,
+  argTypes: {
+    theme: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+exports.default = _default;
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)(["body{background-color:", ";}"], (0, _.themeGet)('colors.bg.canvas'));
+
+function ActiveColorScheme() {
+  const {
+    colorScheme
+  } = (0, _.useTheme)();
+  return /*#__PURE__*/_react.default.createElement("span", null, "Active color scheme: ", colorScheme);
+}
+
+ActiveColorScheme.displayName = "ActiveColorScheme";
+
+const Default = args => {
+  return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, args, /*#__PURE__*/_react.default.createElement(GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(ActiveColorScheme, null)));
+};
+
+exports.Default = Default;
+Default.displayName = "Default";
+Default.args = {
+  colorMode: 'day',
+  dayScheme: 'light',
+  nightScheme: 'dark'
+};
+
+function NightMode() {
+  return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, {
+    colorMode: "night"
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    my: 3,
+    p: 3,
+    color: "fg.default",
+    bg: "canvas.default",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "border.default",
+    borderRadius: 2
+  }, "Always night mode (", /*#__PURE__*/_react.default.createElement(ActiveColorScheme, null), ")"));
+}
+
+NightMode.displayName = "NightMode";
+
+function InverseMode() {
+  const {
+    resolvedColorMode
+  } = (0, _.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, {
+    colorMode: resolvedColorMode === 'day' ? 'night' : 'day'
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    my: 3,
+    p: 3,
+    color: "fg.default",
+    bg: "canvas.default",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "border.default",
+    borderRadius: 2
+  }, "Always inverse of parent mode (", /*#__PURE__*/_react.default.createElement(ActiveColorScheme, null), ")"));
+}
+
+InverseMode.displayName = "InverseMode";
+
+const Nested = args => {
+  return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, args, /*#__PURE__*/_react.default.createElement(GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(ActiveColorScheme, null), /*#__PURE__*/_react.default.createElement(NightMode, null), /*#__PURE__*/_react.default.createElement(InverseMode, null)));
+};
+
+exports.Nested = Nested;
+Nested.displayName = "Nested";
+Nested.args = {
+  colorMode: 'day',
+  dayScheme: 'light',
+  nightScheme: 'dark_dimmed'
+};

package/lib/stories/Token.stories.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithOnRemoveFn = exports.WithLeadingVisual = exports.Interactive = exports.DefaultToken = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _constants = require("../constants");
+
+var _ = require("..");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Token = _interopRequireDefault(require("../Token/Token"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _octiconsReact = require("@primer/octicons-react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = {
+  title: 'Tokens/Default',
+  component: _Token.default,
+  argTypes: {
+    text: {
+      defaultValue: 'Token'
+    }
+  },
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }]
+};
+exports.default = _default;
+const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual'];
+
+const SingleExampleContainer = ({
+  children,
+  label
+}) => /*#__PURE__*/_react.default.createElement(_Box.default, {
+  display: "flex",
+  sx: {
+    alignItems: 'start',
+    flexDirection: 'column',
+    gap: (0, _constants.get)('space.0')
+  }
+}, label ? /*#__PURE__*/_react.default.createElement(_Text.default, {
+  fontSize: 0,
+  color: "fg.subtle"
+}, label) : null, children);
+
+SingleExampleContainer.displayName = "SingleExampleContainer";
+
+const ExampleCollectionContainer = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_Box.default, {
+  display: "flex",
+  sx: {
+    alignItems: 'start',
+    flexDirection: 'column',
+    gap: (0, _constants.get)('space.6')
+  }
+}, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  fontSize: 1,
+  color: "fg.subtle"
+}, "Hint: use the \"Controls\" tab in the Addons panel to change the token properties"), children);
+
+ExampleCollectionContainer.displayName = "ExampleCollectionContainer";
+
+const DefaultToken = args => {
+  return /*#__PURE__*/_react.default.createElement(ExampleCollectionContainer, null, /*#__PURE__*/_react.default.createElement(_Token.default, args));
+};
+
+exports.DefaultToken = DefaultToken;
+DefaultToken.displayName = "DefaultToken";
+DefaultToken.storyName = 'Default';
+DefaultToken.parameters = {
+  controls: {
+    exclude: [...excludedControlKeys, 'hideRemoveButton']
+  }
+};
+
+const Interactive = args => {
+  return /*#__PURE__*/_react.default.createElement(ExampleCollectionContainer, null, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    sx: {
+      alignItems: 'start',
+      gap: (0, _constants.get)('space.2')
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Token.default, _extends({
+    as: "a",
+    href: "http://google.com/",
+    text: "Link"
+  }, args)), /*#__PURE__*/_react.default.createElement(_Token.default, _extends({
+    as: "button",
+    onClick: (0, _addonActions.action)('clicked'),
+    text: "Button"
+  }, args)), /*#__PURE__*/_react.default.createElement(_Token.default, _extends({
+    as: "span",
+    tabIndex: 0,
+    onFocus: (0, _addonActions.action)('focused'),
+    text: "Focusable Span"
+  }, args))));
+};
+
+exports.Interactive = Interactive;
+Interactive.displayName = "Interactive";
+Interactive.parameters = {
+  controls: {
+    exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']
+  }
+};
+
+const WithLeadingVisual = args => {
+  return /*#__PURE__*/_react.default.createElement(ExampleCollectionContainer, null, /*#__PURE__*/_react.default.createElement(_Token.default, _extends({}, args, {
+    leadingVisual: () => /*#__PURE__*/_react.default.createElement(_octiconsReact.GitBranchIcon, null)
+  })));
+};
+
+exports.WithLeadingVisual = WithLeadingVisual;
+WithLeadingVisual.displayName = "WithLeadingVisual";
+WithLeadingVisual.storyName = 'with leadingVisual';
+WithLeadingVisual.parameters = {
+  controls: {
+    exclude: [...excludedControlKeys, 'hideRemoveButton']
+  }
+};
+
+const WithOnRemoveFn = args => {
+  return /*#__PURE__*/_react.default.createElement(ExampleCollectionContainer, null, /*#__PURE__*/_react.default.createElement(SingleExampleContainer, {
+    label: "w/ onRemove passed"
+  }, /*#__PURE__*/_react.default.createElement(_Token.default, _extends({
+    onRemove: (0, _addonActions.action)('remove me')
+  }, args))), /*#__PURE__*/_react.default.createElement(SingleExampleContainer, {
+    label: "w/ onRemove passed and the token is interactive"
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    sx: {
+      alignItems: 'start',
+      gap: (0, _constants.get)('space.2')
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Token.default, _extends({
+    as: "a",
+    href: "http://google.com/",
+    onRemove: (0, _addonActions.action)('remove me')
+  }, args, {
+    text: "Link"
+  })), /*#__PURE__*/_react.default.createElement(_Token.default, _extends({
+    as: "button",
+    onClick: (0, _addonActions.action)('clicked'),
+    onRemove: (0, _addonActions.action)('remove me')
+  }, args, {
+    text: "Button"
+  })), /*#__PURE__*/_react.default.createElement(_Token.default, _extends({
+    as: "span",
+    tabIndex: 0,
+    onFocus: (0, _addonActions.action)('focused'),
+    onRemove: (0, _addonActions.action)('remove me')
+  }, args, {
+    text: "Focusable Span"
+  })))));
+};
+
+exports.WithOnRemoveFn = WithOnRemoveFn;
+WithOnRemoveFn.displayName = "WithOnRemoveFn";
+WithOnRemoveFn.parameters = {
+  controls: {
+    exclude: excludedControlKeys
+  }
+};