@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib/stories/Button.stories.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+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: 'Composite components/Button',
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }],
+  argTypes: {
+    as: {
+      table: {
+        disable: true
+      }
+    },
+    theme: {
+      table: {
+        disable: true
+      }
+    },
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    variant: {
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const defaultButton = args => /*#__PURE__*/_react.default.createElement(_.Button, args, "Default Button");
+
+exports.defaultButton = defaultButton;
+defaultButton.displayName = "defaultButton";
+
+const dangerButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonDanger, args, "Danger Button");
+
+exports.dangerButton = dangerButton;
+dangerButton.displayName = "dangerButton";
+
+const outlineButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonOutline, args, "Outline Button");
+
+exports.outlineButton = outlineButton;
+outlineButton.displayName = "outlineButton";
+
+const primaryButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonPrimary, args, "Primary Button");
+
+exports.primaryButton = primaryButton;
+primaryButton.displayName = "primaryButton";
+
+const invisibleButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonInvisible, args, "Invisible Button");
+
+exports.invisibleButton = invisibleButton;
+invisibleButton.displayName = "invisibleButton";
+
+const closeButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonClose, _extends({}, args, {
+  onClick: () => alert('button clicked.')
+}));
+
+exports.closeButton = closeButton;
+closeButton.displayName = "closeButton";
+
+const buttonGroup = args => /*#__PURE__*/_react.default.createElement(_.ButtonGroup, {
+  display: "block",
+  my: 2
+}, /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 1"), /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 2"), /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 3"));
+
+exports.buttonGroup = buttonGroup;
+buttonGroup.displayName = "buttonGroup";
+
+const buttonTableList = args => /*#__PURE__*/_react.default.createElement(_.ButtonTableList, args, "Button Table List");
+
+exports.buttonTableList = buttonTableList;
+buttonTableList.displayName = "buttonTableList";
+defaultButton.args = {
+  variant: 'medium'
+};
+dangerButton.args = {
+  variant: 'medium'
+};
+outlineButton.args = {
+  variant: 'medium'
+};
+primaryButton.args = {
+  variant: 'medium'
+};
+invisibleButton.args = {
+  variant: 'medium'
+};
+closeButton.args = {
+  variant: 'medium'
+};
+buttonGroup.args = {
+  variant: 'medium'
+};
+buttonTableList.args = {
+  variant: 'medium'
+};

package/lib/stories/Overlay.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogOverlay = exports.DropdownOverlay = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ = require("..");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+var _default = {
+  title: 'Internal components/Overlay',
+  component: _.Overlay,
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+      theme: _.theme
+    }, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }]
+};
+exports.default = _default;
+
+const DummyItem = _styledComponents.default.button.withConfig({
+  displayName: "Overlaystories__DummyItem",
+  componentId: "sc-92ppmu-0"
+})(["border-radius:6px;font-weight:400;padding:6px 8px;font-weight:400;text-align:left;margin:0;font-size:14px;background:none;border:none;&:hover{background:#f0f3f5;}&:focus{background:red;}"]);
+
+const DropdownOverlay = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Button, {
+    ref: buttonRef,
+    sx: {
+      position: 'relative'
+    },
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), isOpen && /*#__PURE__*/_react.default.createElement(_.Overlay, {
+    anchorRef: buttonRef,
+    returnFocusRef: buttonRef,
+    height: "auto",
+    width: "sm",
+    ignoreClickRefs: [buttonRef],
+    onEscape: () => setIsOpen(false),
+    onClickOutside: () => setIsOpen(false)
+  }, /*#__PURE__*/_react.default.createElement(_.Flex, {
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement(DummyItem, null, "Copy link"), /*#__PURE__*/_react.default.createElement(DummyItem, null, "Quote reply"), /*#__PURE__*/_react.default.createElement(DummyItem, null, "Reference in new issue"), /*#__PURE__*/_react.default.createElement(DummyItem, null, "Edit"), /*#__PURE__*/_react.default.createElement(DummyItem, null, "Delete"))));
+};
+
+exports.DropdownOverlay = DropdownOverlay;
+
+const DialogOverlay = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  const confirmButtonRef = (0, _react.useRef)(null);
+  const anchorRef = (0, _react.useRef)(null);
+
+  const closeOverlay = () => setIsOpen(false);
+
+  return /*#__PURE__*/_react.default.createElement(_.Position, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    ref: anchorRef
+  }, /*#__PURE__*/_react.default.createElement(_.Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), isOpen && /*#__PURE__*/_react.default.createElement(_.Overlay, {
+    positionSettings: {
+      side: 'inside-center',
+      align: 'center'
+    },
+    anchorRef: anchorRef,
+    initialFocusRef: confirmButtonRef,
+    returnFocusRef: buttonRef,
+    ignoreClickRefs: [buttonRef],
+    onEscape: closeOverlay,
+    onClickOutside: closeOverlay,
+    width: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_.Flex, {
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement(_.Text, null, "Are you sure?"), /*#__PURE__*/_react.default.createElement(_.ButtonDanger, {
+    onClick: closeOverlay
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_.Button, {
+    onClick: closeOverlay,
+    ref: confirmButtonRef
+  }, "Confirm"))));
+};
+
+exports.DialogOverlay = DialogOverlay;
+DialogOverlay.displayName = "DialogOverlay";

package/lib/stories/Portal.stories.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiplePortalRoots = exports.CustomPortalRootByRegistration = exports.customPortalRootById = exports.defaultPortal = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _Portal = _interopRequireWildcard(require("../Portal"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+var _default = {
+  title: 'Generic behaviors/Portal',
+  component: _Portal.default,
+  decorators: [Story => {
+    // Since portal roots are registered globally, we need this line so that each storybook
+    // story works in isolation.
+    (0, _Portal.registerPortalRoot)(undefined);
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }]
+};
+exports.default = _default;
+
+const defaultPortal = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Root position", /*#__PURE__*/_react.default.createElement(_.Box, {
+  bg: "red.2",
+  p: 3
+}, "Outer container", /*#__PURE__*/_react.default.createElement(_.Box, {
+  bg: "green.2",
+  p: 3
+}, "Inner container", /*#__PURE__*/_react.default.createElement(_Portal.default, null, "Portaled content rendered at ", /*#__PURE__*/_react.default.createElement("code", null, "<BaseStyles>"), " root."))));
+
+exports.defaultPortal = defaultPortal;
+
+const customPortalRootById = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Root position", /*#__PURE__*/_react.default.createElement(_.Box, {
+  bg: "red.2",
+  p: 3,
+  id: "__primerPortalRoot__"
+}, "Outer container", /*#__PURE__*/_react.default.createElement(_.Box, {
+  bg: "green.2",
+  p: 3
+}, "Inner container", /*#__PURE__*/_react.default.createElement(_Portal.default, null, "Portaled content rendered at the outer container."))));
+
+exports.customPortalRootById = customPortalRootById;
+
+const CustomPortalRootByRegistration = () => {
+  const outerContainerRef = _react.default.useRef(null);
+
+  const [mounted, setMounted] = _react.default.useState(false);
+
+  _react.default.useEffect(() => {
+    if (outerContainerRef.current instanceof HTMLElement) {
+      (0, _Portal.registerPortalRoot)(outerContainerRef.current);
+      setMounted(true);
+    }
+  }, []);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Root position", /*#__PURE__*/_react.default.createElement(_.Box, {
+    bg: "red.2",
+    p: 3,
+    ref: outerContainerRef
+  }, mounted && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Outer container", /*#__PURE__*/_react.default.createElement(_.Box, {
+    bg: "green.2",
+    p: 3
+  }, "Inner container", /*#__PURE__*/_react.default.createElement(_Portal.default, null, "Portaled content rendered at the outer container.")))));
+};
+
+exports.CustomPortalRootByRegistration = CustomPortalRootByRegistration;
+
+const MultiplePortalRoots = () => {
+  const outerContainerRef = _react.default.useRef(null);
+
+  const innerContainerRef = _react.default.useRef(null);
+
+  const [mounted, setMounted] = _react.default.useState(false);
+
+  _react.default.useEffect(() => {
+    if (outerContainerRef.current instanceof HTMLElement && innerContainerRef.current instanceof HTMLElement) {
+      (0, _Portal.registerPortalRoot)(outerContainerRef.current, 'outer');
+      (0, _Portal.registerPortalRoot)(innerContainerRef.current, 'inner');
+      setMounted(true);
+    }
+  }, [outerContainerRef]);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Root position", /*#__PURE__*/_react.default.createElement(_.Box, {
+    bg: "red.2",
+    p: 3,
+    ref: outerContainerRef
+  }, "Outer container", /*#__PURE__*/_react.default.createElement(_.Box, {
+    bg: "green.2",
+    p: 3,
+    ref: innerContainerRef
+  }, mounted && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Portal.default, {
+    containerName: "outer"
+  }, "Portaled content rendered at the outer container."), /*#__PURE__*/_react.default.createElement(_Portal.default, {
+    containerName: "inner"
+  }, "Portaled content rendered at the end of the inner container."), /*#__PURE__*/_react.default.createElement(_Portal.default, null, "Portaled content rendered at ", /*#__PURE__*/_react.default.createElement("code", null, "<BaseStyles>"), " root.")), "Inner container")));
+};
+
+exports.MultiplePortalRoots = MultiplePortalRoots;

package/lib/stories/ThemeProvider.stories.js

@@ -0,0 +1,95 @@
+"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 }; }
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+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(_.BorderBox, {
+    my: 3,
+    p: 3,
+    color: "text.primary",
+    bg: "bg.canvas"
+  }, "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(_.BorderBox, {
+    my: 3,
+    p: 3,
+    color: "text.primary",
+    bg: "bg.canvas"
+  }, "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'
+};