@pingux/astro 2.31.0 → 2.32.0-alpha.0

package/README.md

@@ -17,10 +17,6 @@ Yarn:
 - Node: 18+
 - React: 16.8+
 
-## Typescript
-
-Run `yarn dlx @yarnpkg/sdks vscode` and reload the window to configure vscode for TypeScript.
-
 ## Usage
 
 All apps should be wrapped in an `<AstroProvider>` for full functionality and styling.
@@ -48,6 +44,17 @@ For example, to view the disabled button styling, navigate to the Button story
 ## Yarn
 We use a modern version of [Yarn](https://yarnpkg.com/getting-started) for package management with the [Plug'n'Play](https://yarnpkg.com/features/pnp) feature enabled. This allows for a [Zero Install](https://yarnpkg.com/features/zero-installs) approach to be used.
 
+## Enabling TypeScript in VSCode
+
+To run TypeScript properly, there are a couple of steps to run first:
+
+1. Run `yarn dlx @yarnpkg/sdks vscode` and reload the window to configure vscode for TypeScript. 
+2. Open a TypeScript file in VSCode and open the command palette with `cmd + shift + p`.
+    
+    a. Search for "TypeScript: Select TypeScript Version..."
+    
+    b. Choose "Use Workspace Version"
+
 ## Browser Compatibility
 
 Astro fully supports the following browsers and versions:

package/lib/README.md

@@ -17,10 +17,6 @@ Yarn:
 - Node: 18+
 - React: 16.8+
 
-## Typescript
-
-Run `yarn dlx @yarnpkg/sdks vscode` and reload the window to configure vscode for TypeScript.
-
 ## Usage
 
 All apps should be wrapped in an `<AstroProvider>` for full functionality and styling.
@@ -48,6 +44,17 @@ For example, to view the disabled button styling, navigate to the Button story
 ## Yarn
 We use a modern version of [Yarn](https://yarnpkg.com/getting-started) for package management with the [Plug'n'Play](https://yarnpkg.com/features/pnp) feature enabled. This allows for a [Zero Install](https://yarnpkg.com/features/zero-installs) approach to be used.
 
+## Enabling TypeScript in VSCode
+
+To run TypeScript properly, there are a couple of steps to run first:
+
+1. Run `yarn dlx @yarnpkg/sdks vscode` and reload the window to configure vscode for TypeScript. 
+2. Open a TypeScript file in VSCode and open the command palette with `cmd + shift + p`.
+    
+    a. Search for "TypeScript: Select TypeScript Version..."
+    
+    b. Choose "Use Workspace Version"
+
 ## Browser Compatibility
 
 Astro fully supports the following browsers and versions:

package/lib/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -65,10 +66,10 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onAction(actionKey);
     }
   }, [onAction, actionKey]);
+  var elementsWithOnPressProp = ['Button', 'IconButton', 'Link'];
   var elementProps = (0, _react.useMemo)(function () {
-    var _ElementType$propType;
     var elementTypeProps = _objectSpread({}, (0, _reactAria.mergeProps)(itemProps, others));
-    if ((_ElementType$propType = ElementType.propTypes) !== null && _ElementType$propType !== void 0 && _ElementType$propType.onPress) {
+    if ((0, _includes["default"])(elementsWithOnPressProp).call(elementsWithOnPressProp, elementType)) {
       elementTypeProps.onPress = onPressHandler;
     }
     if (isCurrent) {

package/lib/cjs/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonProps } from '../../types';
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/lib/cjs/components/Button/Button.js

@@ -24,53 +24,68 @@ var _interactions = require("@react-aria/interactions");
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
 var _Loader = _interopRequireDefault(require("../Loader"));
-var _buttonAttributes = require("./buttonAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant", "tabIndex"];
+var _excluded = ["children", "className", "isDisabled", "isLoading", "onBlur", "onFocus", "onHoverChange", "onHoverEnd", "onHoverStart", "onKeyDown", "onKeyUp", "onPress", "onPressChange", "onPressEnd", "onPressStart", "onPressUp", "tabIndex", "variant"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var className = props.className,
+  var children = props.children,
+    className = props.className,
     isDisabled = props.isDisabled,
     isLoading = props.isLoading,
-    onHoverStart = props.onHoverStart,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
     onHoverChange = props.onHoverChange,
     onHoverEnd = props.onHoverEnd,
+    onHoverStart = props.onHoverStart,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
     onPress = props.onPress,
-    onPressStart = props.onPressStart,
-    onPressEnd = props.onPressEnd,
     onPressChange = props.onPressChange,
+    onPressEnd = props.onPressEnd,
+    onPressStart = props.onPressStart,
     onPressUp = props.onPressUp,
-    children = props.children,
-    variant = props.variant,
     tabIndex = props.tabIndex,
+    variant = props.variant,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var buttonRef = (0, _react.useRef)();
+  var buttonRef = (0, _hooks.useLocalOrForwardRef)(ref);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return buttonRef.current;
-  });
   var _useFocusRing = (0, _reactAria.useFocusRing)(),
     isFocusVisible = _useFocusRing.isFocusVisible,
     focusProps = _useFocusRing.focusProps;
-  var _usePress = (0, _interactions.usePress)(buttonRef),
+  var _usePress = (0, _interactions.usePress)({
+      ref: buttonRef
+    }),
     isPressedFromContext = _usePress.isPressed;
   var _useButton = (0, _reactAria.useButton)(_objectSpread({
-      elementType: 'button'
-    }, props), buttonRef),
+      elementType: 'button',
+      isDisabled: isDisabled,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onPress: onPress,
+      onPressChange: onPressChange,
+      onPressEnd: onPressEnd,
+      onPressStart: onPressStart,
+      onPressUp: onPressUp
+    }, others), buttonRef),
     buttonProps = _useButton.buttonProps,
     isPressed = _useButton.isPressed;
-  var _useHover = (0, _interactions.useHover)(props),
+  var _useHover = (0, _interactions.useHover)({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isHovered: isHovered,
-      isPressed: isPressed || isPressedFromContext,
+      isDisabled: isDisabled,
       isFocused: isFocusVisible,
-      isDisabled: isDisabled
+      isHovered: isHovered,
+      isPressed: isPressed || isPressedFromContext
     }),
     classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
@@ -81,12 +96,11 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-label": ariaLabel,
     className: classNames,
     role: "button",
-    tx: "buttons",
-    sx: isLoading && {
+    sx: isLoading ? {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
-    },
+    } : {},
     variant: variant
   }, others, (0, _reactAria.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
     tabIndex: tabIndex
@@ -101,7 +115,6 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   })));
 });
-Button.propTypes = _buttonAttributes.buttonPropTypes;
 Button.defaultProps = {
   isDisabled: false,
   variant: 'default'

package/lib/cjs/components/Button/Button.stories.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ButtonProps } from '../../types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    decorators: ((...args: any) => any)[];
+    argTypes: any;
+    args: {
+        variant: string;
+        children: string;
+    };
+    parameters: {
+        docs: {
+            source: {
+                type: string;
+            };
+            page: () => React.JSX.Element;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (args: ButtonProps): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: any;
+        };
+    };
+};
+export declare const Disabled: () => React.JSX.Element;
+export declare const TextIconButton: () => React.JSX.Element;
+export declare const InlineButton: () => React.JSX.Element;
+export declare const ColorBlockButton: {
+    (args: any): React.JSX.Element;
+    argTypes: {
+        isConfigured: {
+            control: {
+                type: string;
+            };
+            defaultValue: boolean;
+        };
+    };
+};
+export declare const Critical: () => React.JSX.Element;
+export declare const Primary: () => React.JSX.Element;

package/lib/cjs/components/Button/Button.test.d.ts

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