@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib/EmojiPicker/EmojiPicker.js

@@ -1,205 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ = require("..");
-
-var _AnchoredOverlay = require("../AnchoredOverlay");
-
-var _data = _interopRequireDefault(require("./data"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _styledSystem = require("styled-system");
-
-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; }
-
-const githubEmojis = [];
-const CategoryButton = (0, _styledComponents.default)(_.ButtonInvisible).withConfig({
-  displayName: "EmojiPicker__CategoryButton",
-  componentId: "sc-13xkiny-0"
-})(["color:", ";padding:8px;flex:1;"], (0, _styledSystem.get)('colors.fg.muted'));
-
-const EmojiPicker = ({
-  onSelect
-}) => {
-  const emojiAnchor = (0, _react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const [frequentEmojis, setFrequentEmojis] = (0, _react.useState)([]);
-  (0, _react.useEffect)(() => {
-    if (isOpen) {
-      var _localStorage$getItem;
-
-      const lsEmojis = JSON.parse((_localStorage$getItem = localStorage.getItem('frequentEmojis')) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : '[]');
-
-      if (lsEmojis) {
-        setFrequentEmojis(lsEmojis);
-      }
-    }
-  }, [isOpen]);
-
-  const onEmojiClick = emoji => {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(emoji.emoji);
-    setIsOpen(false);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Button, {
-    ref: emojiAnchor,
-    onClick: () => setIsOpen(!isOpen)
-  }, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.SmileyIcon
-  })), /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
-    anchorRef: emojiAnchor,
-    renderAnchor: null,
-    open: isOpen,
-    height: 'large',
-    width: 'medium'
-  }, /*#__PURE__*/_react.default.createElement(_.Box, {
-    sx: {
-      display: 'flex',
-      flex: 1,
-      flexDirection: 'column',
-      height: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_.Box, {
-    sx: {
-      display: 'flex',
-      flex: 1,
-      flexDirection: 'row',
-      width: '100%'
-    }
-  }, frequentEmojis.length > 0 && /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.ClockIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.MarkGithubIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.SmileyIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.SquirrelIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.ImageIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.GlobeIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.OrganizationIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.LightBulbIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.HeartIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(CategoryButton, null, /*#__PURE__*/_react.default.createElement(_.StyledOcticon, {
-    icon: _octiconsReact.LocationIcon,
-    color: "fg.muted"
-  }))), /*#__PURE__*/_react.default.createElement(_.TextInput, {
-    block: true,
-    width: "auto",
-    color: "fg.default"
-  }), /*#__PURE__*/_react.default.createElement(_.Box, {
-    sx: {
-      overflow: 'auto',
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      height: '100%',
-      p: 2
-    }
-  }, frequentEmojis.length > 0 && /*#__PURE__*/_react.default.createElement(_.Box, {
-    key: "frequently-used"
-  }, /*#__PURE__*/_react.default.createElement(_.Text, {
-    sx: {
-      fontSize: 1,
-      color: 'fg.muted'
-    }
-  }, "Frequently Used"), /*#__PURE__*/_react.default.createElement(_.Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      width: '100%'
-    }
-  }, frequentEmojis.map(emoji => /*#__PURE__*/_react.default.createElement(_.Text, {
-    key: `emoji-${emoji.emoji}`,
-    sx: {
-      p: '10px',
-      borderRadius: 'radii.3',
-      flex: 1
-    }
-  }, emoji.emoji)))), /*#__PURE__*/_react.default.createElement(_.Box, {
-    key: "github"
-  }, /*#__PURE__*/_react.default.createElement(_.Text, {
-    sx: {
-      fontSize: 1,
-      color: 'fg.muted'
-    }
-  }, "Github"), /*#__PURE__*/_react.default.createElement(_.Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      width: '100%'
-    }
-  }, githubEmojis.map(emoji => /*#__PURE__*/_react.default.createElement(_.ButtonInvisible, {
-    key: `emoji-${emoji.emoji}`,
-    sx: {
-      p: '10px',
-      borderRadius: 'radii.3',
-      flex: 1,
-      color: 'fg.muted'
-    },
-    onClick: () => onEmojiClick(emoji)
-  }, /*#__PURE__*/_react.default.createElement(_.Text, {
-    key: `emoji-${emoji.emoji}`,
-    sx: {
-      p: '10px',
-      borderRadius: 'radii.3',
-      flex: 1
-    }
-  }, emoji.emoji))))), _data.default.map(category => /*#__PURE__*/_react.default.createElement(_.Box, {
-    key: category.id
-  }, /*#__PURE__*/_react.default.createElement(_.Text, {
-    sx: {
-      fontSize: 0,
-      color: 'fg.muted'
-    }
-  }, category.name), /*#__PURE__*/_react.default.createElement(_.Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      width: '100%'
-    }
-  }, category.emojis.map(emoji => /*#__PURE__*/_react.default.createElement(_.ButtonInvisible, {
-    key: `emoji-${emoji.emoji}`,
-    sx: {
-      p: '10px',
-      borderRadius: 'radii.3',
-      flex: 1,
-      color: 'fg.muted'
-    },
-    onClick: () => onEmojiClick(emoji)
-  }, /*#__PURE__*/_react.default.createElement(_.Text, {
-    key: `emoji-${emoji.emoji}`
-  }, emoji.emoji))))))))));
-};
-
-var _default = EmojiPicker;
-exports.default = _default;

package/lib/EmojiPicker/EmojiPicker.jsx

@@ -1,125 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const octicons_react_1 = require("@primer/octicons-react");
-const react_1 = __importStar(require("react"));
-const __1 = require("..");
-const AnchoredOverlay_1 = require("../AnchoredOverlay");
-const data_1 = __importDefault(require("./data"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const styled_system_1 = require("styled-system");
-const githubEmojis = [];
-const CategoryButton = styled_components_1.default(__1.ButtonInvisible) `
-  color: ${styled_system_1.get('colors.fg.muted')};
-  padding: 8px;
-  flex: 1;
-`;
-const EmojiPicker = ({ onSelect }) => {
-    const emojiAnchor = react_1.useRef(null);
-    const [isOpen, setIsOpen] = react_1.useState(false);
-    const [frequentEmojis, setFrequentEmojis] = react_1.useState([]);
-    react_1.useEffect(() => {
-        if (isOpen) {
-            const lsEmojis = JSON.parse(localStorage.getItem('frequentEmojis') ?? '[]');
-            if (lsEmojis) {
-                setFrequentEmojis(lsEmojis);
-            }
-        }
-    }, [isOpen]);
-    const onEmojiClick = (emoji) => {
-        onSelect?.(emoji.emoji);
-        setIsOpen(false);
-    };
-    return (<>
-      <__1.Button ref={emojiAnchor} onClick={() => setIsOpen(!isOpen)}>
-        <__1.StyledOcticon icon={octicons_react_1.SmileyIcon}/>
-      </__1.Button>
-      <AnchoredOverlay_1.AnchoredOverlay anchorRef={emojiAnchor} renderAnchor={null} open={isOpen} height={'large'} width={'medium'}>
-        <__1.Box sx={{ display: 'flex', flex: 1, flexDirection: 'column', height: '100%' }}>
-          <__1.Box sx={{ display: 'flex', flex: 1, flexDirection: 'row', width: '100%' }}>
-            {frequentEmojis.length > 0 && (<CategoryButton>
-                <__1.StyledOcticon icon={octicons_react_1.ClockIcon} color="fg.muted"/>
-              </CategoryButton>)}
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.MarkGithubIcon} color="fg.muted"/>
-            </CategoryButton>
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.SmileyIcon} color="fg.muted"/>
-            </CategoryButton>
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.SquirrelIcon} color="fg.muted"/>
-            </CategoryButton>
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.ImageIcon} color="fg.muted"/>
-            </CategoryButton>
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.GlobeIcon} color="fg.muted"/>
-            </CategoryButton>
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.OrganizationIcon} color="fg.muted"/>
-            </CategoryButton>
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.LightBulbIcon} color="fg.muted"/>
-            </CategoryButton>
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.HeartIcon} color="fg.muted"/>
-            </CategoryButton>
-            <CategoryButton>
-              <__1.StyledOcticon icon={octicons_react_1.LocationIcon} color="fg.muted"/>
-            </CategoryButton>
-          </__1.Box>
-          <__1.TextInput block width="auto" color="fg.default"/>
-          <__1.Box sx={{ overflow: 'auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', p: 2 }}>
-            {frequentEmojis.length > 0 && (<__1.Box key="frequently-used">
-                <__1.Text sx={{ fontSize: 1, color: 'fg.muted' }}>Frequently Used</__1.Text>
-                <__1.Box sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', width: '100%' }}>
-                  {frequentEmojis.map(emoji => (<__1.Text key={`emoji-${emoji.emoji}`} sx={{ p: '10px', borderRadius: 'radii.3', flex: 1 }}>
-                      {emoji.emoji}
-                    </__1.Text>))}
-                </__1.Box>
-              </__1.Box>)}
-            <__1.Box key="github">
-              <__1.Text sx={{ fontSize: 1, color: 'fg.muted' }}>Github</__1.Text>
-              <__1.Box sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', width: '100%' }}>
-                {githubEmojis.map(emoji => (<__1.ButtonInvisible key={`emoji-${emoji.emoji}`} sx={{ p: '10px', borderRadius: 'radii.3', flex: 1, color: 'fg.muted' }} onClick={() => onEmojiClick(emoji)}>
-                    <__1.Text key={`emoji-${emoji.emoji}`} sx={{ p: '10px', borderRadius: 'radii.3', flex: 1 }}>
-                      {emoji.emoji}
-                    </__1.Text>
-                  </__1.ButtonInvisible>))}
-              </__1.Box>
-            </__1.Box>
-            {data_1.default.map(category => (<__1.Box key={category.id}>
-                <__1.Text sx={{ fontSize: 0, color: 'fg.muted' }}>{category.name}</__1.Text>
-                <__1.Box sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', width: '100%' }}>
-                  {category.emojis.map(emoji => (<__1.ButtonInvisible key={`emoji-${emoji.emoji}`} sx={{ p: '10px', borderRadius: 'radii.3', flex: 1, color: 'fg.muted' }} onClick={() => onEmojiClick(emoji)}>
-                      <__1.Text key={`emoji-${emoji.emoji}`}>{emoji.emoji}</__1.Text>
-                    </__1.ButtonInvisible>))}
-                </__1.Box>
-              </__1.Box>))}
-          </__1.Box>
-        </__1.Box>
-      </AnchoredOverlay_1.AnchoredOverlay>
-    </>);
-};
-exports.default = EmojiPicker;

package/lib/EmojiPicker/EmojiPickerAnchor.js

@@ -1 +0,0 @@
-"use strict";

package/lib/EmojiPicker/EmojiPickerAnchor.jsx

@@ -1 +0,0 @@
-"use strict";

package/lib/EmojiPicker/EmojiPickerPanel.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const EmojiPickerPanel: () => JSX.Element;
-export default EmojiPickerPanel;

package/lib/EmojiPicker/EmojiPickerPanel.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const EmojiPickerPanel = () => {
-  return /*#__PURE__*/_react.default.createElement("div", null);
-};
-
-EmojiPickerPanel.displayName = "EmojiPickerPanel";
-var _default = EmojiPickerPanel;
-exports.default = _default;

package/lib/EmojiPicker/EmojiPickerPanel.jsx

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const EmojiPickerPanel = () => {
-    return <div></div>;
-};
-exports.default = EmojiPickerPanel;

package/lib/EmojiPicker/data.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    id: number;
-    name: string;
-    emojis: {
-        name: string;
-        emoji: string;
-    }[];
-}[];
-export default _default;