@primer/components 0.0.0-2021813234123 → 0.0.0-2021815105142

package/lib/Token/Token.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { TokenBaseProps } from './TokenBase';
-interface Props extends TokenBaseProps {
-    leadingVisual?: React.FunctionComponent<any>;
-}
-declare const Token: React.FC<Props>;
-export default Token;

package/lib/Token/Token.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../constants");
-
-var _TokenBase = _interopRequireDefault(require("./TokenBase"));
-
-var _AddTokenButton = _interopRequireDefault(require("./_AddTokenButton"));
-
-var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const tokenBorderWidthPx = 1; //
-// Very "plain" style - just a border
-//
-// const DefaultToken = styled(TokenBase)`
-//     background-color: ${props => props.isSelected ? get('colors.fade.fg10') : 'transparent'};
-//     border-width: ${tokenBorderWidthPx}px;
-//     border-style: solid;
-//     border-color: ${props => props.isSelected ? get('colors.border.tertiary') : get('colors.border.primary')};
-//     padding-right: ${props => props.handleRemove ? 0 : undefined};
-//     > ._TokenButton {
-//         transform: translate(${tokenBorderWidthPx}px, -${tokenBorderWidthPx}px);
-//     }
-// `;
-
-const DefaultToken = (0, _styledComponents.default)(_TokenBase.default).withConfig({
-  displayName: "Token__DefaultToken",
-  componentId: "sc-1dg52pw-0"
-})(["background-color:", ";border-color:", ";border-style:solid;border-width:", ";color:", ";padding-right:", ";&:hover{background-color:", ";}> ._TokenButton{color:", ";}"], (0, _constants.get)('colors.accent.subtle'), props => props.isSelected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.accent.subtle'), props => props.isSelected ? '1px' : 0, (0, _constants.get)('colors.accent.fg'), props => props.handleRemove || props.handleAdd ? 0 : undefined, (0, _constants.get)('colors.accent.muted'), (0, _constants.get)('colors.accent.fg')); // TODO: make this text truncate
-
-const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
-  displayName: "Token__TokenTextContainer",
-  componentId: "sc-1dg52pw-1"
-})(["flex-grow:1;white-space:nowrap;"]);
-const LeadingVisualContainer = (0, _styledComponents.default)('span').withConfig({
-  displayName: "Token__LeadingVisualContainer",
-  componentId: "sc-1dg52pw-2"
-})(["flex-shrink:0;line-height:0;"]);
-
-const Token = ({
-  leadingVisual: LeadingVisual,
-  ...tokenBaseProps
-}) => {
-  const {
-    handleRemove,
-    handleAdd,
-    text,
-    as,
-    variant
-  } = tokenBaseProps;
-  return /*#__PURE__*/_react.default.createElement(DefaultToken, tokenBaseProps, LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, null, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
-    parentTokenTag: as || 'span',
-    tabIndex: -1,
-    onClick: handleRemove,
-    variant: variant
-  }) : null, handleAdd ? /*#__PURE__*/_react.default.createElement(_AddTokenButton.default, {
-    parentTokenTag: as || 'span',
-    tabIndex: -1,
-    onClick: handleAdd,
-    variant: variant
-  }) : null);
-};
-
-Token.displayName = "Token";
-var _default = Token;
-exports.default = _default;

package/lib/Token/TokenBase.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-export declare type TokenSizeKeys = 'sm' | 'md' | 'lg' | 'xl';
-export declare const tokenSizes: Record<TokenSizeKeys, number>;
-export declare const defaultTokenSize = "md";
-export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size'> {
-    as?: 'button' | 'a' | 'span';
-    handleAdd?: () => void;
-    handleRemove?: () => void;
-    isSelected?: boolean;
-    tabIndex?: number;
-    text: string;
-    variant?: TokenSizeKeys;
-}
-export declare const tokenHeightPx = 32;
-declare const TokenBase: import("styled-components").StyledComponent<"span", any, TokenBaseProps, never>;
-export default TokenBase;

package/lib/Token/TokenBase.js

@@ -1,84 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.tokenHeightPx = exports.defaultTokenSize = exports.tokenSizes = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styledSystem = require("styled-system");
-
-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; }
-
-const tokenSizes = {
-  sm: 16,
-  md: 20,
-  lg: 24,
-  xl: 32
-};
-exports.tokenSizes = tokenSizes;
-const defaultTokenSize = 'md';
-exports.defaultTokenSize = defaultTokenSize;
-const tokenHeightPx = 32;
-exports.tokenHeightPx = tokenHeightPx;
-const variants = (0, _styledSystem.variant)({
-  variants: {
-    sm: {
-      fontSize: 0,
-      gap: 1,
-      height: `${tokenSizes.sm}px`,
-      paddingLeft: 1,
-      paddingRight: 1
-    },
-    md: {
-      fontSize: 0,
-      gap: 1,
-      height: `${tokenSizes.md}px`,
-      paddingLeft: 2,
-      paddingRight: 2
-    },
-    lg: {
-      fontSize: 0,
-      gap: 2,
-      height: `${tokenSizes.lg}px`,
-      paddingLeft: 2,
-      paddingRight: 2
-    },
-    xl: {
-      fontSize: 1,
-      gap: 2,
-      height: `${tokenSizes.xl}px`,
-      paddingLeft: 3,
-      paddingRight: 3
-    }
-  }
-}); // TODO: if we don't use the props, just style this with `styled` instead of passing `tokenBaseStyles` to `TokenBase`
-
-const tokenBaseStyles = (0, _styledComponents.css)(["align-items:center;border-radius:999px;display:inline-flex;white-space:nowrap;"]);
-
-const TokenBase = _styledComponents.default.span.attrs(({
-  as,
-  tabIndex,
-  onClick,
-  onFocus,
-  onBlur
-}) => ({// tabIndex: 
-  //     as === 'span' &&
-  //     [undefined, -1].includes(tabIndex) &&
-  //     (onClick || onFocus || onBlur)
-  //         ? 0
-  //         : tabIndex
-})).withConfig({
-  displayName: "TokenBase",
-  componentId: "opajvp-0"
-})(["", " ", ""], tokenBaseStyles, variants);
-
-TokenBase.defaultProps = {
-  as: 'span',
-  variant: defaultTokenSize
-};
-var _default = TokenBase;
-exports.default = _default;

package/lib/Token/TokenLabel.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { TokenBaseProps } from './TokenBase';
-interface Props extends TokenBaseProps {
-    fillColor?: string;
-    isOutlined?: boolean;
-}
-declare const TokenLabel: React.FC<Props>;
-export default TokenLabel;

package/lib/Token/TokenLabel.js

@@ -1,116 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _TokenBase = _interopRequireDefault(require("./TokenBase"));
-
-var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
-
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-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); }
-
-const colorModeConfig = {
-  dark: {
-    bgOpacity: 0.18,
-    borderThreshold: 0,
-    borderOpacity: 0.3,
-    lightnessThreshold: 0.6
-  },
-  light: {
-    bgOpacity: 1,
-    borderThreshold: 0.96,
-    borderOpacity: 1,
-    lightnessThreshold: 0.453
-  }
-};
-const tokenBorderWidthPx = 1; // TODO: do a nicer `isSelected` style
-
-const StyledTokenLabel = (0, _styledComponents.default)(_TokenBase.default).withConfig({
-  displayName: "TokenLabel__StyledTokenLabel",
-  componentId: "sc-1bdmgzv-0"
-})(["background-color:", ";border-width:", "px;border-style:solid;border-color:", ";box-shadow:", ";color:", ";overflow:hidden;padding-right:", ";position:relative;> ._TokenButton{color:currentColor;transform:translate(", "px,-", "px);}"], props => props.bgColor, tokenBorderWidthPx, props => props.borderColor, props => props.isSelected ? `0 0 0 2px ${props.bgColor}` : undefined, props => props.textColor, props => props.handleRemove ? 0 : undefined, tokenBorderWidthPx, tokenBorderWidthPx); // TODO: make this text truncate
-
-const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
-  displayName: "TokenLabel__TokenTextContainer",
-  componentId: "sc-1bdmgzv-1"
-})(["white-space:nowrap;z-index:1;"]);
-
-const TokenLabel = ({
-  isOutlined,
-  fillColor,
-  isSelected,
-  ...tokenBaseProps
-}) => {
-  const {
-    handleRemove,
-    text,
-    as,
-    variant
-  } = tokenBaseProps;
-  const {
-    colorScheme
-  } = (0, _ThemeProvider.useTheme)(); // const colorScheme = 'dark';
-
-  const {
-    bgOpacity,
-    borderOpacity,
-    borderThreshold,
-    lightnessThreshold
-  } = colorModeConfig[colorScheme || 'light'];
-  let bgColor = fillColor;
-  let borderColor = fillColor;
-  let textColor = '#FFF';
-  const perceivedLightness = (0, _tinycolor.default)(fillColor).getLuminance();
-  const isFillColorLight = perceivedLightness >= lightnessThreshold;
-
-  if (colorScheme === 'dark') {
-    const lightenBy = (perceivedLightness - lightnessThreshold) * 100 * (isFillColorLight ? 1 : 0);
-    bgColor = isSelected ? (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity * 1.2).toRgbString() : (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity).toRgbString();
-    textColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy + 8).toString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).toString();
-    borderColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy).toRgbString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).setAlpha(borderOpacity).toRgbString();
-  } else {
-    const isFillColorDark = perceivedLightness < 0.1;
-    borderColor = perceivedLightness >= borderThreshold ? (0, _tinycolor.default)(fillColor).darken(25).toString() : 'transparent';
-
-    if (isFillColorLight) {
-      textColor = '#000';
-    }
-
-    if (isSelected) {
-      bgColor = isFillColorDark ? (0, _tinycolor.default)(fillColor).lighten(10).toString() : (0, _tinycolor.default)(fillColor).darken(10).toString();
-    }
-  }
-
-  return /*#__PURE__*/_react.default.createElement(StyledTokenLabel, _extends({
-    fillColor: fillColor,
-    bgColor: bgColor,
-    borderColor: borderColor,
-    textColor: textColor,
-    isSelected: isSelected
-  }, tokenBaseProps), /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
-    parentTokenTag: as || 'span',
-    tabIndex: -1,
-    onClick: handleRemove,
-    variant: variant
-  }) : null);
-};
-
-TokenLabel.displayName = "TokenLabel";
-TokenLabel.defaultProps = {
-  fillColor: '#999' // TODO: pick a real color
-
-};
-var _default = TokenLabel;
-exports.default = _default;

package/lib/Token/TokenProfile.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { TokenBaseProps } from './TokenBase';
-interface Props extends TokenBaseProps {
-    avatarSrc: string;
-}
-declare const TokenProfile: React.FC<Props>;
-export default TokenProfile;

package/lib/Token/TokenProfile.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../constants");
-
-var _primitives = _interopRequireDefault(require("@primer/primitives"));
-
-var _TokenBase = require("./TokenBase");
-
-var _Token = _interopRequireDefault(require("./Token"));
-
-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); }
-
-const StyledToken = (0, _styledComponents.default)(_Token.default).withConfig({
-  displayName: "TokenProfile__StyledToken",
-  componentId: "sc-1vf9jhf-0"
-})(["padding-left:", ";"], (0, _constants.get)('space.1')); // ${get('space.1')}
-
-const TokenProfile = ({
-  avatarSrc,
-  variant,
-  ...rest
-}) => /*#__PURE__*/_react.default.createElement(StyledToken, _extends({
-  leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
-    src: avatarSrc,
-    size: _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
-  }),
-  variant: variant
-}, rest));
-
-TokenProfile.displayName = "TokenProfile";
-var _default = TokenProfile;
-exports.default = _default;

package/lib/Token/TokenTopic.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { TokenBaseProps } from './TokenBase';
-declare const TokenTopic: React.FC<TokenBaseProps>;
-export default TokenTopic;

package/lib/Token/TokenTopic.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../constants");
-
-var _TokenBase = _interopRequireDefault(require("./TokenBase"));
-
-var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
-
-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); }
-
-const DefaultToken = (0, _styledComponents.default)(_TokenBase.default).withConfig({
-  displayName: "TokenTopic__DefaultToken",
-  componentId: "sc-17xtwrd-0"
-})(["background-color:", ";border-color:", ";border-style:solid;border-width:", ";color:", ";padding-right:", ";&:hover{background-color:", ";}> ._TokenButton{color:", ";}"], (0, _constants.get)('colors.accent.subtle'), props => props.isSelected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.accent.subtle'), props => props.isSelected ? '1px' : 0, (0, _constants.get)('colors.accent.fg'), props => props.handleRemove ? 0 : undefined, (0, _constants.get)('colors.accent.muted'), (0, _constants.get)('colors.accent.fg')); // TODO: make this text truncate
-
-const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
-  displayName: "TokenTopic__TokenTextContainer",
-  componentId: "sc-17xtwrd-1"
-})(["white-space:nowrap;"]);
-
-const TokenTopic = ({
-  as,
-  handleRemove,
-  text,
-  variant,
-  ...rest
-}) => {
-  return /*#__PURE__*/_react.default.createElement(DefaultToken, _extends({
-    as: as,
-    handleRemove: handleRemove,
-    text: text
-  }, rest), /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
-    parentTokenTag: as || 'span',
-    tabIndex: -1,
-    onClick: handleRemove,
-    variant: variant
-  }) : null);
-};
-
-TokenTopic.displayName = "TokenTopic";
-var _default = TokenTopic;
-exports.default = _default;

package/lib/Token/_AddTokenButton.d.ts

@@ -1,3 +0,0 @@
-import { TokenButtonProps } from './_tokenButtonUtils';
-declare const AddTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps, never>;
-export default AddTokenButton;

package/lib/Token/_AddTokenButton.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _TokenBase = require("./TokenBase");
-
-var _tokenButtonUtils = require("./_tokenButtonUtils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const AddTokenButton = _styledComponents.default.span.attrs(({
-  parentTokenTag,
-  variant,
-  ...rest
-}) => {
-  delete rest.children;
-  return {
-    as: parentTokenTag === 'span' ? 'button' : 'span',
-    tabIndex: -1,
-    className: '_TokenButton',
-    children: /*#__PURE__*/React.createElement(_octiconsReact.PlusIcon, {
-      size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
-    }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
-
-  };
-}).withConfig({
-  displayName: "_AddTokenButton__AddTokenButton",
-  componentId: "elcc0o-0"
-})(["", " ", ""], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants);
-
-AddTokenButton.defaultProps = {
-  variant: _TokenBase.defaultTokenSize
-};
-var _default = AddTokenButton;
-exports.default = _default;