feat: convert Emoji (#861)

* feat: convert Emoji

* fix: convert Emoji rollback prettier upgrade

* fix: import WuiProps from Wui system

* fix: line breaks in Emoji func

* fix: use react FC instead of jsx element

* fix: updates tsconfig.json with root directory

global.d.ts

@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+  interface Process {
+    browser: boolean
+  }
+}

packages/Emoji/.npmignore

@@ -1,2 +1,3 @@
 /*
 !/dist/*.js
+!/dist/*.d.ts

packages/Emoji/index.js → packages/Emoji/index.tsx

@@ -1,22 +1,30 @@
 import React, { useMemo } from 'react'
-import { bool, number, string } from 'prop-types'
 import { Box } from '@welcome-ui/box'
 import Bowser from 'bowser'
+import { WuiProps } from '@welcome-ui/system'
 
 const EMOJI_PATH = 'https://cdn.welcome-ui.com/emojis/'
 
 // Apple by default for SSR
 const IS_APPLE_OS =
   !process.browser || Bowser.parse(window.navigator.userAgent).platform.vendor === 'Apple'
 
-export function Emoji({
+export interface EmojiProps extends React.HTMLAttributes<HTMLImageElement> {
+  emoji?: string
+  height?: number
+  size?: number
+  useAppleEmoji?: boolean
+  width?: number
+}
+
+export const Emoji: React.FC<EmojiProps & WuiProps> = ({
   emoji,
-  useAppleEmoji = IS_APPLE_OS,
+  height = 24,
   size,
+  useAppleEmoji = IS_APPLE_OS,
   width = 24,
-  height = 24,
   ...rest
-}) {
+}) => {
   const isUrl = useMemo(() => {
     try {
       new URL(emoji)
@@ -39,15 +47,5 @@ export function Emoji({
   )
 }
 
-Emoji.propTypes = {
-  /** The slack emoji, e.g: :sweat-smile: or a URL */
-  emoji: string,
-  height: number,
-  /** Helper to prevent to set width & height */
-  size: number,
-  /** Needed for SSR, it defaults to true on the server */
-  useAppleEmoji: bool,
-  width: number
-}
-
-export const getEmojiName = alias => alias?.replace?.(/:/g, '')
+// eslint-disable-next-line prettier/prettier
+export const getEmojiName = (alias: string): string => alias?.replace?.(/:/g, '')

packages/Emoji/package.json

@@ -4,6 +4,7 @@
   "description": "Customizable design system with react • styled-components • styled-system and reakit.",
   "main": "dist/emoji.cjs.js",
   "module": "dist/emoji.es.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",

packages/Emoji/rollup.config.js

@@ -1,3 +1,3 @@
 import { getRollupConfig } from '../../rollup.config.js'
 
-export default getRollupConfig({ pwd: __dirname })
+export default getRollupConfig({ pwd: __dirname, ts: true })

packages/Utils/use-isomorphic-layout-effect.ts

@@ -1,5 +1,3 @@
 import { useEffect, useLayoutEffect } from 'react'
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 export const useIsomorphicLayoutEffect = process.browser ? useLayoutEffect : useEffect

tsconfig.json

@@ -14,6 +14,6 @@
     "sourceMap": false,
     "declaration": true
   },
-  "include": ["packages/*", "packages/**/*", "icons/*", "icons/**/*", "./styled.d.ts"],
+  "include": ["packages/*", "packages/**/*", "icons/*", "icons/**/*", "./styled.d.ts", "./global.d.ts"],
   "exclude": ["node_modules", "dist", "**/*.test.tsx"]
 }

yarn.lock

@@ -14551,7 +14551,7 @@ prettier-linter-helpers@^1.0.0:
 prettier@=1.18.2:
   version "1.18.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
-  integrity "sha1-aCPnxZAAF7S9Os9G/prEtNe9qeo= sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw=="
+  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
 
 pretty-format@^24.9.0:
   version "24.9.0"