@synerise/ds-emoji-picker 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+---
+id: emoji-picker
+title: EmojiPicker
+---
+
+EmojiPicker UI Component
+
+## Installation
+```
+npm i @synerise/ds-emoji-picker
+or
+yarn add @synerise/ds-emoji-picker
+```
+
+## Usage
+```
+import EmojiPicker from '@synerise/ds-emoji-picker'
+
+<EmojiPicker />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-emoji-picker--default"></iframe>
+
+## API
+
+| Property      | Description                                                                              | Type                      | Default |
+|---------------|------------------------------------------------------------------------------------------|---------------------------|---------|
+| children      | the element that triggers showing the picker                                             | ReactElement              | -       |
+| onSelect      | triggered when an emoji has been selected                                                | (emoji: Emoji) => void    | -       |
+| closeOnSelect | determines whether dropdown should hide when an emoji has been selected. true by default | boolean                   | true    |
+| dropdownProps | Dropdown customisation props see ds-dropdown                                             | Partial<DropdownProps>    | -       |
+| texts         | customise texts  / labels                                                                | Partial<EmojiPickerTexts> | -       |

package/dist/EmojiList/EmojiList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EmojiListProps } from './EmojiList.types';
+export declare const EmojiList: ({ texts: customTexts, onSelect, searchQuery }: EmojiListProps) => React.JSX.Element;

package/dist/EmojiList/EmojiList.js

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import Divider from '@synerise/ds-divider';
+import Scrollbar from '@synerise/ds-scrollbar';
+import { getEmojisByGroup } from 'unicode-emoji-utils';
+import * as S from './EmojiList.styles';
+import { useEmojiTranslations } from '../hooks/useEmojiTranslations';
+export var EmojiList = function EmojiList(_ref) {
+  var customTexts = _ref.texts,
+    onSelect = _ref.onSelect,
+    searchQuery = _ref.searchQuery;
+  var texts = useEmojiTranslations(customTexts);
+  var grouped = useMemo(function () {
+    return getEmojisByGroup('group');
+  }, []);
+  var filteredList = useMemo(function () {
+    var items = [];
+    grouped.forEach(function (emojis, category) {
+      var matching = searchQuery ? emojis.filter(function (emoji) {
+        var _emoji$keywords;
+        return (_emoji$keywords = emoji.keywords) == null ? void 0 : _emoji$keywords.find(function (keyword) {
+          return keyword.match(searchQuery);
+        });
+      }) : emojis;
+      if (matching.length) {
+        items.push({
+          title: texts[category] || category,
+          emojis: matching
+        });
+      }
+    });
+    return items;
+  }, [searchQuery, grouped, texts]);
+  var handleClick = function handleClick(emoji) {
+    // eslint-disable-next-line no-unused-expressions
+    onSelect == null || onSelect(emoji);
+  };
+  return /*#__PURE__*/React.createElement(Scrollbar, {
+    maxHeight: 330
+  }, filteredList.map(function (_ref2, index) {
+    var title = _ref2.title,
+      emojis = _ref2.emojis;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+      labelBelow: title,
+      hiddenLine: index === 0
+    }), /*#__PURE__*/React.createElement(S.EmojiCategoryWrapper, null, emojis.map(function (emoji) {
+      return /*#__PURE__*/React.createElement(S.EmojiItem, {
+        key: emoji.emoji,
+        "data-testid": "ds-emoji-item",
+        onClick: function onClick() {
+          return handleClick(emoji);
+        }
+      }, emoji.emoji);
+    })));
+  }));
+};

package/dist/EmojiList/EmojiList.styles.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const EmojiItem: import("styled-components").StyledComponent<(props: any) => React.JSX.Element, any, {}, never>;
+export declare const EmojiCategoryWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/EmojiList/EmojiList.styles.js

@@ -0,0 +1,17 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import React from 'react';
+import styled from 'styled-components';
+import Button from '@synerise/ds-button';
+export var EmojiItem = styled(function (props) {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+    type: "ghost",
+    mode: "single-icon"
+  }));
+}).withConfig({
+  displayName: "EmojiListstyles__EmojiItem",
+  componentId: "sc-1yme2ir-0"
+})(["font-size:18px;display:flex;align-items:center;cursor:pointer;"]);
+export var EmojiCategoryWrapper = styled.div.withConfig({
+  displayName: "EmojiListstyles__EmojiCategoryWrapper",
+  componentId: "sc-1yme2ir-1"
+})(["display:flex;gap:4px;flex-wrap:wrap;"]);

package/dist/EmojiList/EmojiList.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { Emoji } from 'unicode-emoji-utils';
+export type EmojiListTexts = {
+    'smileys-emotion': ReactNode;
+    'people-body': ReactNode;
+    'animals-nature': ReactNode;
+    'food-drink': ReactNode;
+    'travel-places': ReactNode;
+    activities: ReactNode;
+    objects: ReactNode;
+    symbols: ReactNode;
+    flags: ReactNode;
+};
+export type EmojiListProps = {
+    texts?: Partial<EmojiListTexts>;
+    onSelect?: (emoji: Emoji) => void;
+    searchQuery?: string;
+};
+export type EmojiCategory = {
+    title: ReactNode;
+    emojis: Emoji[];
+};

package/dist/EmojiList/EmojiList.types.js

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

package/dist/EmojiOverlay/EmojiOverlay.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EmojiOverlayType } from './EmojiOverlay.types';
+export declare const EmojiOverlay: ({ texts: customTexts, onSelect, focus }: EmojiOverlayType) => React.JSX.Element;

package/dist/EmojiOverlay/EmojiOverlay.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import Icon, { SearchM } from '@synerise/ds-icon';
+import { theme } from '@synerise/ds-core';
+import Dropdown from '@synerise/ds-dropdown';
+import { EmojiList } from '../EmojiList/EmojiList';
+import { useEmojiTranslations } from '../hooks/useEmojiTranslations';
+export var EmojiOverlay = function EmojiOverlay(_ref) {
+  var customTexts = _ref.texts,
+    onSelect = _ref.onSelect,
+    focus = _ref.focus;
+  var texts = useEmojiTranslations(customTexts);
+  var _useState = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var handleClearInput = function handleClearInput() {
+    setSearchQuery('');
+  };
+  var handleSearchChange = function handleSearchChange(query) {
+    setSearchQuery(query);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown.SearchInput, {
+    onSearchChange: handleSearchChange,
+    onClearInput: handleClearInput,
+    placeholder: texts.placeholder,
+    value: searchQuery,
+    autofocus: focus,
+    iconLeft: /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(SearchM, null),
+      color: theme.palette['grey-600']
+    })
+  }), /*#__PURE__*/React.createElement(EmojiList, {
+    onSelect: onSelect,
+    searchQuery: searchQuery,
+    texts: texts
+  }));
+};

package/dist/EmojiOverlay/EmojiOverlay.types.d.ts

@@ -0,0 +1,4 @@
+import type { EmojiPickerProps } from '../EmojiPicker.types';
+export type EmojiOverlayType = Pick<EmojiPickerProps, 'onSelect' | 'texts'> & {
+    focus?: boolean;
+};

package/dist/EmojiOverlay/EmojiOverlay.types.js

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

package/dist/EmojiPicker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { EmojiPickerProps } from './EmojiPicker.types';
+export declare const EmojiPicker: ({ children, closeOnSelect, onSelect, texts, dropdownProps }: EmojiPickerProps) => React.JSX.Element;

package/dist/EmojiPicker.js

@@ -0,0 +1,45 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import React, { useRef, useState } from 'react';
+import Dropdown from '@synerise/ds-dropdown';
+import { useOnClickOutside } from '@synerise/ds-utils';
+import * as S from './EmojiPicker.styles';
+import { EmojiOverlay } from './EmojiOverlay/EmojiOverlay';
+export var EmojiPicker = function EmojiPicker(_ref) {
+  var children = _ref.children,
+    _ref$closeOnSelect = _ref.closeOnSelect,
+    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
+    _onSelect = _ref.onSelect,
+    texts = _ref.texts,
+    dropdownProps = _ref.dropdownProps;
+  var _useState = useState(false),
+    isOpen = _useState[0],
+    setOpen = _useState[1];
+  var _useState2 = useState(false),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
+  var ref = useRef(null);
+  useOnClickOutside(ref, function () {
+    setOpen(false);
+  });
+  var toggleOpen = function toggleOpen(newState) {
+    setOpen(newState);
+    setFocus(newState);
+  };
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    visible: isOpen,
+    onVisibleChange: toggleOpen,
+    placement: "bottomRight"
+  }, dropdownProps, {
+    overlay: /*#__PURE__*/React.createElement(S.Overlay, {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(EmojiOverlay, {
+      onSelect: function onSelect(val) {
+        closeOnSelect && toggleOpen(false);
+        // eslint-disable-next-line no-unused-expressions
+        _onSelect == null || _onSelect(val);
+      },
+      texts: texts,
+      focus: focus
+    }))
+  }), children);
+};

package/dist/EmojiPicker.styles.d.ts

@@ -0,0 +1 @@
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/EmojiPicker.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var Overlay = styled.div.withConfig({
+  displayName: "EmojiPickerstyles__Overlay",
+  componentId: "sc-562kws-0"
+})(["width:260px;"]);

package/dist/EmojiPicker.types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+import type { DropdownProps } from '@synerise/ds-dropdown';
+import type { Emoji } from 'unicode-emoji-utils';
+import type { EmojiListTexts } from './EmojiList/EmojiList.types';
+export type EmojiPickerTexts = EmojiListTexts & {
+    placeholder: string;
+};
+export type EmojiPickerProps = {
+    children?: ReactElement;
+    onSelect?: (emoji: Emoji) => void;
+    dropdownProps?: Partial<DropdownProps>;
+    texts?: Partial<EmojiPickerTexts>;
+    closeOnSelect?: boolean;
+};

package/dist/EmojiPicker.types.js

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

package/dist/hooks/useEmojiTranslations.d.ts

@@ -0,0 +1,2 @@
+import { EmojiPickerTexts } from '../EmojiPicker.types';
+export declare const useEmojiTranslations: (texts?: Partial<EmojiPickerTexts>) => EmojiPickerTexts;

package/dist/hooks/useEmojiTranslations.js

@@ -0,0 +1,52 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import React, { useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+export var useEmojiTranslations = function useEmojiTranslations(texts) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var allTexts = useMemo(function () {
+    return _extends({
+      'smileys-emotion': /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "Smileys"
+      }),
+      'people-body': /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "People & body"
+      }),
+      'animals-nature': /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "Animals & nature"
+      }),
+      'food-drink': /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "Food & drink"
+      }),
+      'travel-places': /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "Travel & places"
+      }),
+      activities: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "Activities"
+      }),
+      objects: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "Objects"
+      }),
+      symbols: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "Symbols"
+      }),
+      flags: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.ICON-PICKER.SMILEYS",
+        defaultMessage: "Flags"
+      }),
+      placeholder: formatMessage({
+        id: 'DS.ICON-PICKER.PLACEHOLDER',
+        defaultMessage: 'Search'
+      })
+    }, texts || {});
+  }, [texts, formatMessage]);
+  return allTexts;
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { EmojiPicker, EmojiPicker as default } from './EmojiPicker';
+export type { EmojiPickerProps, EmojiPickerTexts } from './EmojiPicker.types';

package/dist/index.js

@@ -0,0 +1 @@
+export { EmojiPicker, EmojiPicker as default } from './EmojiPicker';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@synerise/ds-emoji-picker",
+  "version": "1.0.0",
+  "description": "EmojiPicker UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "types": "tsc --noEmit",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-button": "^1.1.0",
+    "@synerise/ds-divider": "^1.0.1",
+    "@synerise/ds-dropdown": "^1.0.1",
+    "@synerise/ds-icon": "^1.0.1",
+    "@synerise/ds-scrollbar": "^1.0.1",
+    "@synerise/ds-utils": "^1.0.1",
+    "unicode-emoji-utils": "^1.2.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "react-intl": ">=3.12.0 <= 6.8",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "bf168e5bafcb99015f36731a8aa158cecca12434"
+}