├── examples
    └── demo
    │   ├── src
    │       ├── vite-env.d.ts
    │       ├── main.tsx
    │       ├── style.css
    │       └── App.tsx
    │   ├── .gitignore
    │   ├── postcss.config.js
    │   ├── vite.config.js
    │   ├── tailwind.config.js
    │   ├── .eslintrc.js
    │   ├── index.html
    │   ├── tsconfig.json
    │   ├── tsconfig.eslint.json
    │   ├── package.json
    │   └── favicon.svg
├── pnpm-workspace.yaml
├── packages
    └── solid-emoji-picker
    │   ├── src
    │       ├── index.ts
    │       └── EmojiPicker.tsx
    │   ├── pridepack.json
    │   ├── tsconfig.json
    │   ├── LICENSE
    │   ├── package.json
    │   ├── .gitignore
    │   └── README.md
├── package.json
├── lerna.json
├── LICENSE
├── .gitignore
├── README.md
└── biome.json


/examples/demo/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'packages/**/*'
3 | - 'examples/**/*'


--------------------------------------------------------------------------------
/packages/solid-emoji-picker/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './EmojiPicker';
2 | 


--------------------------------------------------------------------------------
/examples/demo/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local


--------------------------------------------------------------------------------
/packages/solid-emoji-picker/pridepack.json:
--------------------------------------------------------------------------------
1 | {
2 |   "target": "es2017",
3 |   "jsx": "preserve"
4 | }


--------------------------------------------------------------------------------
/examples/demo/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   }
6 | };


--------------------------------------------------------------------------------
/examples/demo/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import solidPlugin from 'vite-plugin-solid';
3 | 
4 | export default defineConfig({
5 |   plugins: [solidPlugin()],
6 | });
7 | 


--------------------------------------------------------------------------------
/examples/demo/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { render } from 'solid-js/web';
 2 | import App from './App';
 3 | 
 4 | import './style.css';
 5 | 
 6 | const app = document.getElementById('app');
 7 | 
 8 | if (app) {
 9 |   render(() => <App />, app);
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/demo/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   mode: 'jit',
 3 |   content: [
 4 |     './src/**/*.tsx',
 5 |   ],
 6 |   darkMode: 'class', // or 'media' or 'class'
 7 |   theme: {
 8 |   },
 9 |   variants: {},
10 |   plugins: [
11 |   ],
12 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "root",
 3 |   "private": true,
 4 |   "workspaces": [
 5 |     "packages/*",
 6 |     "examples/*"
 7 |   ],
 8 |   "devDependencies": {
 9 |     "@biomejs/biome": "^1.7.0",
10 |     "lerna": "^8.1.2",
11 |     "typescript": "^5.4.5"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/demo/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "root": true,
 3 |   "extends": [
 4 |     "lxsmnsyc/typescript/solid"
 5 |   ],
 6 |   "parserOptions": {
 7 |     "project": "./tsconfig.eslint.json",
 8 |     "tsconfigRootDir": __dirname,
 9 |   },
10 |   "rules": {
11 |   }
12 | };
13 | 


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "npmClient": "pnpm",
 3 |   "command": {
 4 |     "version": {
 5 |       "exact": true
 6 |     },
 7 |     "publish": {
 8 |       "allowBranch": [
 9 |         "main"
10 |       ],
11 |       "registry": "https://registry.npmjs.org/"
12 |     }
13 |   },
14 |   "version": "0.3.0"
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/examples/demo/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "module": "ESNext",
 5 |     "lib": ["ESNext", "DOM"],
 6 |     "moduleResolution": "Node",
 7 |     "strict": true,
 8 |     "sourceMap": true,
 9 |     "resolveJsonModule": true,
10 |     "esModuleInterop": true,
11 |     "noEmit": true,
12 |     "noUnusedLocals": true,
13 |     "noUnusedParameters": true,
14 |     "noImplicitReturns": true,
15 |     "jsx": "preserve",
16 |     "jsxImportSource": "solid-js",
17 |   },
18 |   "include": ["./src"]
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/demo/tsconfig.eslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "module": "ESNext",
 5 |     "lib": ["ESNext", "DOM"],
 6 |     "moduleResolution": "Node",
 7 |     "strict": true,
 8 |     "sourceMap": true,
 9 |     "resolveJsonModule": true,
10 |     "esModuleInterop": true,
11 |     "noEmit": true,
12 |     "noUnusedLocals": true,
13 |     "noUnusedParameters": true,
14 |     "noImplicitReturns": true,
15 |     "jsx": "preserve",
16 |     "jsxImportSource": "solid-js",
17 |   },
18 |   "include": ["./src"]
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "0.3.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "serve": "vite preview"
 8 |   },
 9 |   "devDependencies": {
10 |     "autoprefixer": "^10.4.19",
11 |     "postcss": "^8.4.38",
12 |     "typescript": "^5.4.5",
13 |     "vite": "^5.2.8",
14 |     "vite-plugin-solid": "^2.10.2"
15 |   },
16 |   "dependencies": {
17 |     "solid-emoji-picker": "0.3.0",
18 |     "solid-js": "^1.8.16",
19 |     "tailwindcss": "^3.4.3"
20 |   },
21 |   "private": true,
22 |   "publishConfig": {
23 |     "access": "restricted"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/packages/solid-emoji-picker/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "exclude": ["node_modules"],
 3 |   "include": ["src", "types"],
 4 |   "compilerOptions": {
 5 |     "module": "ESNext",
 6 |     "lib": ["ESNext", "DOM"],
 7 |     "importHelpers": true,
 8 |     "declaration": true,
 9 |     "sourceMap": true,
10 |     "rootDir": "./src",
11 |     "strict": true,
12 |     "noUnusedLocals": true,
13 |     "noUnusedParameters": true,
14 |     "noImplicitReturns": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "moduleResolution": "Bundler",
17 |     "jsx": "preserve",
18 |     "jsxImportSource": "solid-js",
19 |     "esModuleInterop": true,
20 |     "target": "ES2017",
21 |     "useDefineForClassFields": false,
22 |     "declarationMap": true
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/examples/demo/src/style.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .emoji-picker {
 6 |   @apply w-96 h-96 rounded-lg overflow-auto bg-gray-50;
 7 |   @apply flex flex-col items-center space-y-2 p-2;
 8 |   @apply shadow-lg;
 9 | }
10 | 
11 | .emoji-section {
12 |   @apply mx-2 flex flex-col items-center;
13 | }
14 | 
15 | .emoji-section-title {
16 |   @apply font-semibold text-gray-900 text-lg;
17 | }
18 | 
19 | .emoji-items {
20 |   @apply flex flex-wrap items-center justify-center;
21 | }
22 | 
23 | .emoji-button {
24 |   @apply w-10 h-10 p-2 rounded-lg;
25 |   @apply hover:bg-gray-200 active:bg-gray-100;
26 |   @apply flex items-center justify-center;
27 | }
28 | 
29 | span.emoji {
30 |   @apply text-2xl;
31 | }
32 | 
33 | img.emoji {
34 |   display: block;
35 |   height: 100%;
36 |   width: 100%;
37 | }


--------------------------------------------------------------------------------
/packages/solid-emoji-picker/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License Copyright (c) 2021 <author>
2 | 
3 | 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:
4 | 
5 | The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or substantial portions of the Software.
6 | 
7 | 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.


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # parcel-bundler cache (https://parceljs.org/)
61 | .cache
62 | 
63 | # next.js build output
64 | .next
65 | 
66 | # nuxt.js build output
67 | .nuxt
68 | 
69 | # vuepress build output
70 | .vuepress/dist
71 | 
72 | # Serverless directories
73 | .serverless
74 | 
75 | # FuseBox cache
76 | .fusebox/
77 | 
78 | dist
79 | 


--------------------------------------------------------------------------------
/examples/demo/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
 3 | <path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#41D1FF"/>
 7 | <stop offset="1" stop-color="#BD34FE"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
10 | <stop stop-color="#FFEA83"/>
11 | <stop offset="0.0833333" stop-color="#FFDD35"/>
12 | <stop offset="1" stop-color="#FFA800"/>
13 | </linearGradient>
14 | </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/packages/solid-emoji-picker/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "solid-emoji-picker",
 3 |   "version": "0.3.0",
 4 |   "type": "module",
 5 |   "types": "./dist/types/index.d.ts",
 6 |   "main": "./dist/cjs/production/index.jsx",
 7 |   "module": "./dist/esm/production/index.jsx",
 8 |   "exports": {
 9 |     ".": {
10 |       "development": {
11 |         "require": "./dist/cjs/development/index.jsx",
12 |         "import": "./dist/esm/development/index.jsx"
13 |       },
14 |       "require": "./dist/cjs/production/index.jsx",
15 |       "import": "./dist/esm/production/index.jsx",
16 |       "types": "./dist/types/index.d.ts"
17 |     }
18 |   },
19 |   "files": [
20 |     "dist",
21 |     "src"
22 |   ],
23 |   "engines": {
24 |     "node": ">=10"
25 |   },
26 |   "license": "MIT",
27 |   "keywords": [
28 |     "pridepack"
29 |   ],
30 |   "peerDependencies": {
31 |     "solid-js": "^1.2"
32 |   },
33 |   "devDependencies": {
34 |     "@types/node": "^20.12.7",
35 |     "pridepack": "2.6.0",
36 |     "solid-js": "^1.8.16",
37 |     "tslib": "^2.6.2",
38 |     "typescript": "^5.4.5"
39 |   },
40 |   "private": false,
41 |   "description": "Emoji Picker for Solid",
42 |   "repository": {
43 |     "url": "https://github.com/lxsmnsyc/solid-emoji-picker.git",
44 |     "type": "git"
45 |   },
46 |   "homepage": "https://github.com/lxsmnsyc/solid-emoji-picker/tree/main/packages/solid-emoji-picker",
47 |   "bugs": {
48 |     "url": "https://github.com/lxsmnsyc/solid-emoji-picker/issues"
49 |   },
50 |   "publishConfig": {
51 |     "access": "public"
52 |   },
53 |   "author": "Alexis Munsayac",
54 |   "scripts": {
55 |     "prepublishOnly": "pridepack clean && pridepack build",
56 |     "build": "pridepack build",
57 |     "type-check": "pridepack check",
58 |     "lint": "pridepack lint",
59 |     "test": "pridepack test --passWithNoTests",
60 |     "clean": "pridepack clean",
61 |     "watch": "pridepack watch",
62 |     "start": "pridepack start",
63 |     "dev": "pridepack dev"
64 |   },
65 |   "typesVersions": {
66 |     "*": {}
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/packages/solid-emoji-picker/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.production
 74 | .env.development
 75 | 
 76 | # parcel-bundler cache (https://parceljs.org/)
 77 | .cache
 78 | 
 79 | # Next.js build output
 80 | .next
 81 | 
 82 | # Nuxt.js build / generate output
 83 | .nuxt
 84 | dist
 85 | 
 86 | # Gatsby files
 87 | .cache/
 88 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 89 | # https://nextjs.org/blog/next-9-1#public-directory-support
 90 | # public
 91 | 
 92 | # vuepress build output
 93 | .vuepress/dist
 94 | 
 95 | # Serverless directories
 96 | .serverless/
 97 | 
 98 | # FuseBox cache
 99 | .fusebox/
100 | 
101 | # DynamoDB Local files
102 | .dynamodb/
103 | 
104 | # TernJS port file
105 | .tern-port
106 | 
107 | .npmrc
108 | 


--------------------------------------------------------------------------------
/examples/demo/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import type {
  2 |   EmojiSkinTone,
  3 |   Emoji,
  4 | } from 'solid-emoji-picker';
  5 | import {
  6 |   EmojiPicker,
  7 |   useEmojiComponents,
  8 |   useEmojiData,
  9 | } from 'solid-emoji-picker';
 10 | import type { JSX, Setter } from 'solid-js';
 11 | import { createSignal, Show } from 'solid-js';
 12 | 
 13 | function classNames(...classes: (string | boolean | undefined)[]): string {
 14 |   return classes.filter(Boolean).join(' ');
 15 | }
 16 | 
 17 | interface SkinTonePickerProps {
 18 |   emoji: string;
 19 |   description: string;
 20 |   value?: EmojiSkinTone;
 21 |   setValue: Setter<EmojiSkinTone | undefined>;
 22 |   selected: boolean;
 23 | }
 24 | 
 25 | const SKIN_TONE_PICKER = classNames(
 26 |   'w-10 h-10 p-2 text-2xl rounded-lg',
 27 |   'flex items-center justify-center',
 28 |   'bg-gray-50 bg-opacity-0 hover:bg-opacity-50 active:bg-opacity-25',
 29 | );
 30 | 
 31 | function SkinTonePicker(props: SkinTonePickerProps): JSX.Element {
 32 |   return (
 33 |     <button
 34 |       type="button"
 35 |       onClick={(): void => {
 36 |         props.setValue(props.value);
 37 |       }}
 38 |       class={classNames(SKIN_TONE_PICKER, props.selected && 'bg-opacity-25')}
 39 |     >
 40 |       <span class="sr-only">{props.description}</span>
 41 |       {props.emoji}
 42 |     </button>
 43 |   );
 44 | }
 45 | 
 46 | export default function App(): JSX.Element {
 47 |   const [skinTone, setSkinTone] = createSignal<EmojiSkinTone>();
 48 |   const [pickedEmoji, setPickedEmoji] = createSignal<Emoji>();
 49 | 
 50 |   const [search, setSearch] = createSignal('');
 51 | 
 52 |   const emojisData = useEmojiData();
 53 |   const componentsData = useEmojiComponents();
 54 | 
 55 |   return (
 56 |     <div class="min-h-screen bg-gradient-to-bl from-indigo-600 to-sky-400 flex flex-col space-y-4 items-center justify-center">
 57 |       <span class="text-4xl font-mono text-gray-50 font-bold">solid-emoji-picker</span>
 58 |       <div class="flex flex-col space-y-2 items-center justify-center">
 59 |         <input
 60 |           type="text"
 61 |           class="w-full text-xl p-2 rounded-lg"
 62 |           placeholder="Search an emoji."
 63 |           value={search()}
 64 |           onInput={(e): void => {
 65 |             setSearch(e.currentTarget.value);
 66 |           }}
 67 |         />
 68 |         <EmojiPicker
 69 |           skinTone={skinTone()}
 70 |           onEmojiClick={(emoji): void => {
 71 |             setPickedEmoji(emoji);
 72 |           }}
 73 |           filter={(emoji): boolean => (search() !== '' ? emoji.name.includes(search()) : true)}
 74 |         />
 75 |       </div>
 76 |       <span class="text-3xl text-gray-50 font-mono">
 77 |         <Show when={pickedEmoji()} keyed fallback="No emoji picked.">
 78 |           {(picked): JSX.Element => {
 79 |             const emojis = emojisData();
 80 |             const components = componentsData();
 81 |             if (emojis && components) {
 82 |               return <span>{picked.emoji}</span>
 83 |             }
 84 |             return null;
 85 |           }}
 86 |         </Show>
 87 |       </span>
 88 |       <div class="flex items-center justify-center">
 89 |         <SkinTonePicker
 90 |           emoji="👋"
 91 |           description="Neutral"
 92 |           selected={skinTone() == null}
 93 |           setValue={setSkinTone}
 94 |         />
 95 |         <SkinTonePicker
 96 |           emoji="👋🏻"
 97 |           description="Light Skin"
 98 |           selected={skinTone() === 'light'}
 99 |           value="light"
100 |           setValue={setSkinTone}
101 |         />
102 |         <SkinTonePicker
103 |           emoji="👋🏼"
104 |           description="Medium Light Skin"
105 |           selected={skinTone() === 'medium-light'}
106 |           value="medium-light"
107 |           setValue={setSkinTone}
108 |         />
109 |         <SkinTonePicker
110 |           emoji="👋🏽"
111 |           description="Medium Skin"
112 |           selected={skinTone() === 'medium'}
113 |           value="medium"
114 |           setValue={setSkinTone}
115 |         />
116 |         <SkinTonePicker
117 |           emoji="👋🏾"
118 |           description="Medium Dark Skin"
119 |           selected={skinTone() === 'medium-dark'}
120 |           value="medium-dark"
121 |           setValue={setSkinTone}
122 |         />
123 |         <SkinTonePicker
124 |           emoji="👋🏿"
125 |           description="Dark Skin"
126 |           selected={skinTone() === 'dark'}
127 |           value="dark"
128 |           setValue={setSkinTone}
129 |         />
130 |       </div>
131 |     </div>
132 |   );
133 | }
134 | 


--------------------------------------------------------------------------------
/packages/solid-emoji-picker/README.md:
--------------------------------------------------------------------------------
  1 | # solid-emoji-picker
  2 | 
  3 | > Unstyled Emoji Picker component for SolidJS
  4 | 
  5 | [![NPM](https://img.shields.io/npm/v/solid-emoji-picker.svg)](https://www.npmjs.com/package/solid-emoji-picker) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript) [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-emoji-picker/tree/main/examples/demo)
  6 | 
  7 | ## Install
  8 | 
  9 | ```bash
 10 | npm i solid-emoji-picker
 11 | ```
 12 | 
 13 | ```bash
 14 | yarn add solid-emoji-picker
 15 | ```
 16 | 
 17 | ```bash
 18 | pnpm add solid-emoji-picker
 19 | ```
 20 | 
 21 | ## Usage
 22 | 
 23 | ### Simplest example
 24 | 
 25 | ```jsx
 26 | import { EmojiPicker } from 'solid-emoji-picker';
 27 | 
 28 | function App() {
 29 |   function pickEmoji(emoji) {
 30 |     console.log('You clicked', emoji.name);
 31 |   }
 32 | 
 33 |   return (
 34 |     <EmojiPicker onEmojiClick={pickEmoji} />
 35 |   );
 36 | }
 37 | ```
 38 | 
 39 | ### Emoji Data
 40 | 
 41 | The emoji data is based on [`unicode-emoji-json`](https://github.com/muan/unicode-emoji-json).
 42 | 
 43 | ### Events
 44 | 
 45 | All event properties receives the emoji item data and the accompanying event value.
 46 | 
 47 | - `onEmojiClick` - `"click"` event
 48 | - `onEmojiFocus` - `"focus"` event
 49 | - `onEmojiHover` - `"mouseover"` event
 50 | 
 51 | ### Styling
 52 | 
 53 | The emoji picker has the following structure:
 54 | 
 55 | ```html
 56 | <div class="emoji-picker">
 57 |   <div class="emoji-section">
 58 |     <span class="emoji-section-title"></span>
 59 |     <div class="emoji-items">
 60 |       <button class="emoji-button">
 61 |         <!-- user-defined -->
 62 |       </button>
 63 |     </div>
 64 |   </div>
 65 | </div>
 66 | ```
 67 | 
 68 | You can refer to these classes for styling the parts of the emoji picker.
 69 | 
 70 | ### Skin Tones
 71 | 
 72 | You can define your selected skin tone with the `skinTone` property for `EmojiPicker`. The `skinTone` property has the following possible values: `"light"`, `"medium-light"`, `"medium"`, `"medium-dark"` and `"dark"`. By default, it is `undefined`.
 73 | 
 74 | ```jsx
 75 | <EmojiPicker skinTone="medium" />
 76 | ```
 77 | 
 78 | Take note that some emojis might not correctly apply the skin tone, this depends on the emoji support.
 79 | 
 80 | ### Filtering
 81 | 
 82 | `filter` allows conditionally rendering each emoji item. `filter` receives the emoji item data which shall then return a boolean. This is useful for emulating emoji search.
 83 | 
 84 | ```jsx
 85 | <EmojiPicker filter={(emoji) => emoji.name.includes('hand')} />
 86 | ```
 87 | 
 88 | ### Custom rendering
 89 | 
 90 | `renderEmoji` allows emoji to be rendered in a user-defined way. `renderEmoji` receives the emoji item data, the components (used for skin tone reference) and the currently selected skin tone, in which `renderEmoji` must return a `JSX.Element`.
 91 | 
 92 | Here's an example with [`twemoji`](https://github.com/twitter/twemoji):
 93 | 
 94 | ```jsx
 95 | import twemoji from 'twemoji';
 96 | import {
 97 |   convertSkinToneToComponent,
 98 |   getEmojiWithSkinTone,
 99 | } from 'solid-emoji-picker';
100 | 
101 | function getTwemoji(
102 |   emojis,
103 |   emoji,
104 |   components,
105 |   tone,
106 | ) {
107 |   const skinTone = convertSkinToneToComponent(components, tone);
108 |   const tonedEmoji = getEmojiWithSkinTone(emojis, emoji, skinTone);
109 |   return twemoji.parse(tonedEmoji);
110 | }
111 | 
112 | function renderTwemoji(
113 |   emojis,
114 |   emoji,
115 |   components,
116 |   tone,
117 | ) {
118 |   return <span innerHTML={getTwemoji(emojis, emoji, components, tone)} />;
119 | }
120 | 
121 | <EmojiPicker renderEmoji={renderTwemoji} />
122 | ```
123 | 
124 | If `renderEmoji` is unspecified, it renders the following:
125 | 
126 | ```jsx
127 | <span class="emoji">{emojiCodeWithSkinTone}</span>
128 | ```
129 | 
130 | ### Custom CDN
131 | 
132 | By default, `solid-emoji-picker` loads the emoji data from `unicode-emoji-json`'s UNPKG. You can use the following to modify the data handling:
133 | 
134 | - `setCDN` - sets the base CDN path, defaults to `"https://unpkg.com/unicode-emoji-json/"`
135 | - `setEmojiURL` - specify the full path of the emoji data JSON. If not set, it defaults to selected CDN path + `"data-by-emoji.json"`.
136 | - `setGroupURL` - specify the full path of the group data JSON. If not set, it defaults to selected CDN path + `"data-by-group.json"`.
137 | - `setComponentsURL` - specify the full path of the component JSON. If not set, it defaults to selected CDN path + `"data-emoji-components.json"`.
138 | - `loadEmojiData` - Fetch the emoji data.
139 | - `loadEmojiComponents` - Fetch the components data.
140 | - `loadEmojiGroupData` - Fetch the emoji group data.
141 | - `setEmojiData` - Set the emoji data.
142 | - `setEmojiComponents` - Set the components data.
143 | - `setEmojiGroupData` - Set the emoji group data.
144 | 
145 | ### Suspense
146 | 
147 | `<EmojiPicker>` uses `createResource` for data fetching. Wrapping it in `<Suspense>` is recommended.
148 | 
149 | To directly access these resource primitives, you can use `useEmojiData`, `useEmojiGroupData` and `useEmojiComponents`, both returns the data resource.
150 | 
151 | ## Sponsors
152 | 
153 | ![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)
154 | 
155 | ## License
156 | 
157 | MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
158 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # solid-emoji-picker
  2 | 
  3 | > Unstyled Emoji Picker component for SolidJS
  4 | 
  5 | [![NPM](https://img.shields.io/npm/v/solid-emoji-picker.svg)](https://www.npmjs.com/package/solid-emoji-picker) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript) [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-emoji-picker/tree/main/examples/demo)
  6 | 
  7 | ## Install
  8 | 
  9 | ```bash
 10 | npm i solid-emoji-picker
 11 | ```
 12 | 
 13 | ```bash
 14 | yarn add solid-emoji-picker
 15 | ```
 16 | 
 17 | ```bash
 18 | pnpm add solid-emoji-picker
 19 | ```
 20 | 
 21 | ## Usage
 22 | 
 23 | ### Simplest example
 24 | 
 25 | ```jsx
 26 | import { EmojiPicker } from 'solid-emoji-picker';
 27 | 
 28 | function App() {
 29 |   function pickEmoji(emoji) {
 30 |     console.log('You clicked', emoji.name);
 31 |   }
 32 | 
 33 |   return (
 34 |     <EmojiPicker onEmojiClick={pickEmoji} />
 35 |   );
 36 | }
 37 | ```
 38 | 
 39 | ### Emoji Data
 40 | 
 41 | The emoji data is based on [`unicode-emoji-json`](https://github.com/muan/unicode-emoji-json).
 42 | 
 43 | ### Events
 44 | 
 45 | All event properties receives the emoji item data and the accompanying event value.
 46 | 
 47 | - `onEmojiClick` - `"click"` event
 48 | - `onEmojiFocus` - `"focus"` event
 49 | - `onEmojiHover` - `"mouseover"` event
 50 | 
 51 | ### Styling
 52 | 
 53 | The emoji picker has the following structure:
 54 | 
 55 | ```html
 56 | <div class="emoji-picker">
 57 |   <div class="emoji-section">
 58 |     <span class="emoji-section-title"></span>
 59 |     <div class="emoji-items">
 60 |       <button class="emoji-button">
 61 |         <!-- user-defined -->
 62 |       </button>
 63 |     </div>
 64 |   </div>
 65 | </div>
 66 | ```
 67 | 
 68 | You can refer to these classes for styling the parts of the emoji picker.
 69 | 
 70 | ### Skin Tones
 71 | 
 72 | You can define your selected skin tone with the `skinTone` property for `EmojiPicker`. The `skinTone` property has the following possible values: `"light"`, `"medium-light"`, `"medium"`, `"medium-dark"` and `"dark"`. By default, it is `undefined`.
 73 | 
 74 | ```jsx
 75 | <EmojiPicker skinTone="medium" />
 76 | ```
 77 | 
 78 | Take note that some emojis might not correctly apply the skin tone, this depends on the emoji support.
 79 | 
 80 | ### Filtering
 81 | 
 82 | `filter` allows conditionally rendering each emoji item. `filter` receives the emoji item data which shall then return a boolean. This is useful for emulating emoji search.
 83 | 
 84 | ```jsx
 85 | <EmojiPicker filter={(emoji) => emoji.name.includes('hand')} />
 86 | ```
 87 | 
 88 | ### Custom rendering
 89 | 
 90 | `renderEmoji` allows emoji to be rendered in a user-defined way. `renderEmoji` receives the emoji item data, the components (used for skin tone reference) and the currently selected skin tone, in which `renderEmoji` must return a `JSX.Element`.
 91 | 
 92 | Here's an example with [`twemoji`](https://github.com/twitter/twemoji):
 93 | 
 94 | ```jsx
 95 | import twemoji from 'twemoji';
 96 | import {
 97 |   convertSkinToneToComponent,
 98 |   getEmojiWithSkinTone,
 99 | } from 'solid-emoji-picker';
100 | 
101 | function getTwemoji(
102 |   emojis,
103 |   emoji,
104 |   components,
105 |   tone,
106 | ) {
107 |   const skinTone = convertSkinToneToComponent(components, tone);
108 |   const tonedEmoji = getEmojiWithSkinTone(emojis, emoji, skinTone);
109 |   return twemoji.parse(tonedEmoji);
110 | }
111 | 
112 | function renderTwemoji(
113 |   emojis,
114 |   emoji,
115 |   components,
116 |   tone,
117 | ) {
118 |   return <span innerHTML={getTwemoji(emojis, emoji, components, tone)} />;
119 | }
120 | 
121 | <EmojiPicker renderEmoji={renderTwemoji} />
122 | ```
123 | 
124 | If `renderEmoji` is unspecified, it renders the following:
125 | 
126 | ```jsx
127 | <span class="emoji">{emojiCodeWithSkinTone}</span>
128 | ```
129 | 
130 | > [!WARNING]
131 | > As of April 2024, twemoji no longer works as their CDN is no longer maintained.
132 | 
133 | ### Custom CDN
134 | 
135 | By default, `solid-emoji-picker` loads the emoji data from `unicode-emoji-json`'s UNPKG. You can use the following to modify the data handling:
136 | 
137 | - `setCDN` - sets the base CDN path, defaults to `"https://unpkg.com/unicode-emoji-json/"`
138 | - `setEmojiURL` - specify the full path of the emoji data JSON. If not set, it defaults to selected CDN path + `"data-by-emoji.json"`.
139 | - `setGroupURL` - specify the full path of the group data JSON. If not set, it defaults to selected CDN path + `"data-by-group.json"`.
140 | - `setComponentsURL` - specify the full path of the component JSON. If not set, it defaults to selected CDN path + `"data-emoji-components.json"`.
141 | - `loadEmojiData` - Fetch the emoji data.
142 | - `loadEmojiComponents` - Fetch the components data.
143 | - `loadEmojiGroupData` - Fetch the emoji group data.
144 | - `setEmojiData` - Set the emoji data.
145 | - `setEmojiComponents` - Set the components data.
146 | - `setEmojiGroupData` - Set the emoji group data.
147 | 
148 | ### Suspense
149 | 
150 | `<EmojiPicker>` uses `createResource` for data fetching. Wrapping it in `<Suspense>` is recommended.
151 | 
152 | To directly access these resource primitives, you can use `useEmojiData`, `useEmojiGroupData` and `useEmojiComponents`, both returns the data resource.
153 | 
154 | ## Sponsors
155 | 
156 | ![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)
157 | 
158 | ## License
159 | 
160 | MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
161 | 


--------------------------------------------------------------------------------
/packages/solid-emoji-picker/src/EmojiPicker.tsx:
--------------------------------------------------------------------------------
  1 | import type {
  2 |   JSX,
  3 |   Resource,
  4 | } from 'solid-js';
  5 | import {
  6 |   For,
  7 |   Show,
  8 |   createMemo,
  9 |   createResource,
 10 | } from 'solid-js';
 11 | 
 12 | const ORIGIN_GROUP_DATA_KEY = 'data-by-group.json';
 13 | const ORIGIN_COMPONENTS_KEY = 'data-emoji-components.json';
 14 | const ORIGIN_EMOJI_KEY = 'data-by-emoji.json';
 15 | const CDN_URL = 'https://unpkg.com/unicode-emoji-json@0.6.0/';
 16 | 
 17 | let GROUP_DATA_KEY = `${CDN_URL}${ORIGIN_GROUP_DATA_KEY}`;
 18 | let COMPONENTS_KEY = `${CDN_URL}${ORIGIN_COMPONENTS_KEY}`;
 19 | let EMOJI_KEY = `${CDN_URL}${ORIGIN_EMOJI_KEY}`;
 20 | 
 21 | export function setCDN(url: string): void {
 22 |   GROUP_DATA_KEY = `${url}${ORIGIN_GROUP_DATA_KEY}`;
 23 |   COMPONENTS_KEY = `${url}${ORIGIN_COMPONENTS_KEY}`;
 24 |   EMOJI_KEY = `${url}${ORIGIN_EMOJI_KEY}`;
 25 | }
 26 | 
 27 | export function setComponentsURL(url: string): void {
 28 |   COMPONENTS_KEY = url;
 29 | }
 30 | 
 31 | export function setEmojiURL(url: string): void {
 32 |   EMOJI_KEY = url;
 33 | }
 34 | 
 35 | export function setEmojiGroupURL(url: string): void {
 36 |   GROUP_DATA_KEY = url;
 37 | }
 38 | 
 39 | export interface Emoji {
 40 |   emoji: string;
 41 |   skin_tone_support: boolean;
 42 |   name: string;
 43 |   slug: string;
 44 |   unicode_version: string;
 45 |   emoji_version: string;
 46 | }
 47 | 
 48 | export type EmojiData = Record<string, Emoji>;
 49 | 
 50 | export interface EmojiGroupData {
 51 |   name: string;
 52 |   slug: string;
 53 |   emojis: Emoji[];
 54 | }
 55 | 
 56 | export type EmojiComponents = Record<string, string>;
 57 | 
 58 | let EMOJI_DATA: EmojiData | undefined;
 59 | let EMOJI_COMPONENTS: EmojiComponents | undefined;
 60 | let EMOJI_GROUP_DATA: EmojiGroupData[] | undefined;
 61 | 
 62 | export async function loadEmojiData(): Promise<EmojiData> {
 63 |   if (!EMOJI_DATA) {
 64 |     const response = await fetch(EMOJI_KEY);
 65 |     EMOJI_DATA = await response.json() as EmojiData;
 66 |   }
 67 |   return EMOJI_DATA;
 68 | }
 69 | 
 70 | export async function loadEmojiGroupData(): Promise<EmojiGroupData[]> {
 71 |   if (!EMOJI_GROUP_DATA) {
 72 |     const response = await fetch(GROUP_DATA_KEY);
 73 |     EMOJI_GROUP_DATA = await response.json() as EmojiGroupData[];
 74 |   }
 75 |   return EMOJI_GROUP_DATA;
 76 | }
 77 | 
 78 | export async function loadEmojiComponents(): Promise<EmojiComponents> {
 79 |   if (!EMOJI_COMPONENTS) {
 80 |     const response = await fetch(COMPONENTS_KEY);
 81 |     EMOJI_COMPONENTS = await response.json() as EmojiComponents;
 82 |   }
 83 |   return EMOJI_COMPONENTS;
 84 | }
 85 | 
 86 | export function setEmojiData(data: EmojiData): void {
 87 |   EMOJI_DATA = data;
 88 | }
 89 | 
 90 | export function setEmojiComponents(data: EmojiComponents): void {
 91 |   EMOJI_COMPONENTS = data;
 92 | }
 93 | 
 94 | export function useEmojiData(): Resource<EmojiData | undefined> {
 95 |   const [data] = createResource<EmojiData>(loadEmojiData);
 96 |   return data;
 97 | }
 98 | 
 99 | export function useEmojiComponents(): Resource<EmojiComponents | undefined> {
100 |   const [data] = createResource<EmojiComponents>(loadEmojiComponents);
101 |   return data;
102 | }
103 | 
104 | export function useEmojiGroupData(): Resource<EmojiGroupData[] | undefined> {
105 |   const [data] = createResource<EmojiGroupData[]>(loadEmojiGroupData);
106 |   return data;
107 | }
108 | 
109 | export type EmojiSkinTone =
110 |   | 'light'
111 |   | 'medium-light'
112 |   | 'medium'
113 |   | 'medium-dark'
114 |   | 'dark';
115 | 
116 | const SKIN_TONE_TO_COMPONENT: Record<EmojiSkinTone, string> = {
117 |   light: 'light_skin_tone',
118 |   'medium-light': 'medium_light_skin_tone',
119 |   medium: 'medium_skin_tone',
120 |   'medium-dark': 'medium_dark_skin_tone',
121 |   dark: 'dark_skin_tone',
122 | };
123 | 
124 | export function convertSkinToneToComponent(
125 |   components: EmojiComponents,
126 |   skinTone?: EmojiSkinTone,
127 | ): string | undefined {
128 |   if (skinTone) {
129 |     return components[SKIN_TONE_TO_COMPONENT[skinTone]];
130 |   }
131 |   return undefined;
132 | }
133 | 
134 | const VARIATION = '\uFE0F';
135 | const ZWJ = '\u200D';
136 | 
137 | export function getEmojiWithSkinTone(
138 |   emojis: EmojiData,
139 |   emoji: Emoji,
140 |   skinTone?: string,
141 | ): string {
142 |   if (!(skinTone && emoji.skin_tone_support)) {
143 |     return emoji.emoji;
144 |   }
145 |   const emojiWithSkinTone = emoji.emoji.split(ZWJ)
146 |     .map((chunk) => {
147 |       if (chunk in emojis && emojis[chunk].skin_tone_support) {
148 |         return `${chunk}${skinTone}`;
149 |       }
150 |       return chunk;
151 |     })
152 |     .join(ZWJ);
153 | 
154 |   const emojiWithoutVariation = emojiWithSkinTone.replaceAll(`${VARIATION}${skinTone}`, `${skinTone}`);
155 | 
156 |   return emojiWithoutVariation;
157 | }
158 | 
159 | function DEFAULT_EMOJI_RENDER(
160 |   emojis: EmojiData,
161 |   emoji: Emoji,
162 |   components: EmojiComponents,
163 |   skinTone?: EmojiSkinTone,
164 | ): JSX.Element {
165 |   return (
166 |     <span class="emoji">
167 |       {getEmojiWithSkinTone(
168 |         emojis,
169 |         emoji,
170 |         convertSkinToneToComponent(components, skinTone),
171 |       )}
172 |     </span>
173 |   );
174 | }
175 | 
176 | export type EmojiEventHandler<T extends Event> = (emoji: Emoji, event: T & {
177 |   currentTarget: HTMLButtonElement;
178 |   target: Element;
179 | }) => void;
180 | 
181 | export interface EmojiPickerProps {
182 |   skinTone?: EmojiSkinTone;
183 |   filter?: (emoji: Emoji) => boolean;
184 |   renderEmoji?: (
185 |     emojis: EmojiData,
186 |     emoji: Emoji,
187 |     components: EmojiComponents,
188 |     skinTone?: EmojiSkinTone,
189 |   ) => JSX.Element;
190 |   onEmojiClick?: EmojiEventHandler<MouseEvent>;
191 |   onEmojiFocus?: EmojiEventHandler<FocusEvent>;
192 |   onEmojiHover?: EmojiEventHandler<MouseEvent>;
193 | }
194 | 
195 | export function EmojiPicker(props: EmojiPickerProps): JSX.Element {
196 |   const emojiData = useEmojiData();
197 |   const componentData = useEmojiComponents();
198 |   const emojiGroupData = useEmojiGroupData();
199 | 
200 |   const renderEmoji = createMemo(() => props.renderEmoji || DEFAULT_EMOJI_RENDER);
201 | 
202 |   return (
203 |     <div class="emoji-picker">
204 |       {createMemo(() => {
205 |         const emoji = emojiData();
206 |         const components = componentData();
207 |         const emojiGroup = emojiGroupData();
208 | 
209 |         if (emoji && components && emojiGroup) {
210 |           return (
211 |             <For each={emojiGroup}>
212 |               {(group): JSX.Element => (
213 |                 <div class="emoji-section">
214 |                   <span class="emoji-section-title">{group.name}</span>
215 |                   <div class="emoji-items">
216 |                     <For each={group.emojis}>
217 |                       {(emojiItem): JSX.Element => (
218 |                         <Show when={props.filter ? props.filter(emojiItem) : true}>
219 |                           <button
220 |                             type="button"
221 |                             class="emoji-button"
222 |                             onClick={props.onEmojiClick && [props.onEmojiClick, emojiItem]}
223 |                             onFocus={props.onEmojiFocus && [props.onEmojiFocus, emojiItem]}
224 |                             onMouseOver={props.onEmojiHover && [props.onEmojiHover, emojiItem]}
225 |                             title={emojiItem.name}
226 |                           >
227 |                             {renderEmoji()(emoji, emojiItem, components, props.skinTone)}
228 |                           </button>
229 |                         </Show>
230 |                       )}
231 |                     </For>
232 |                   </div>
233 |                 </div>
234 |               )}
235 |             </For>
236 |           );
237 |         }
238 | 
239 |         return null;
240 |       })() }
241 |     </div>
242 |   );
243 | }
244 | 


--------------------------------------------------------------------------------
/biome.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "https://unpkg.com/@biomejs/biome/configuration_schema.json",
  3 |   "files": {
  4 |     "ignore": ["node_modules/**/*"]
  5 |   },
  6 |   "vcs": {
  7 |     "useIgnoreFile": true
  8 |   },
  9 |   "linter": {
 10 |     "enabled": true,
 11 |     "ignore": ["node_modules/**/*"],
 12 |     "rules": {
 13 |       "a11y": {
 14 |         "noAccessKey": "error",
 15 |         "noAriaHiddenOnFocusable": "off",
 16 |         "noAriaUnsupportedElements": "error",
 17 |         "noAutofocus": "error",
 18 |         "noBlankTarget": "error",
 19 |         "noDistractingElements": "error",
 20 |         "noHeaderScope": "error",
 21 |         "noInteractiveElementToNoninteractiveRole": "error",
 22 |         "noNoninteractiveElementToInteractiveRole": "error",
 23 |         "noNoninteractiveTabindex": "error",
 24 |         "noPositiveTabindex": "error",
 25 |         "noRedundantAlt": "error",
 26 |         "noRedundantRoles": "error",
 27 |         "noSvgWithoutTitle": "error",
 28 |         "useAltText": "error",
 29 |         "useAnchorContent": "error",
 30 |         "useAriaActivedescendantWithTabindex": "error",
 31 |         "useAriaPropsForRole": "error",
 32 |         "useButtonType": "error",
 33 |         "useHeadingContent": "error",
 34 |         "useHtmlLang": "error",
 35 |         "useIframeTitle": "warn",
 36 |         "useKeyWithClickEvents": "warn",
 37 |         "useKeyWithMouseEvents": "warn",
 38 |         "useMediaCaption": "error",
 39 |         "useValidAnchor": "error",
 40 |         "useValidAriaProps": "error",
 41 |         "useValidAriaRole": "error",
 42 |         "useValidAriaValues": "error",
 43 |         "useValidLang": "error"
 44 |       },
 45 |       "complexity": {
 46 |         "noBannedTypes": "error",
 47 |         "noEmptyTypeParameters": "error",
 48 |         "noExcessiveCognitiveComplexity": "error",
 49 |         "noExtraBooleanCast": "error",
 50 |         "noForEach": "error",
 51 |         "noMultipleSpacesInRegularExpressionLiterals": "warn",
 52 |         "noStaticOnlyClass": "error",
 53 |         "noThisInStatic": "error",
 54 |         "noUselessCatch": "error",
 55 |         "noUselessConstructor": "error",
 56 |         "noUselessEmptyExport": "error",
 57 |         "noUselessFragments": "error",
 58 |         "noUselessLabel": "error",
 59 |         "noUselessLoneBlockStatements": "error",
 60 |         "noUselessRename": "error",
 61 |         "noUselessSwitchCase": "error",
 62 |         "noUselessTernary": "error",
 63 |         "noUselessThisAlias": "error",
 64 |         "noUselessTypeConstraint": "error",
 65 |         "noVoid": "off",
 66 |         "noWith": "error",
 67 |         "useArrowFunction": "error",
 68 |         "useFlatMap": "error",
 69 |         "useLiteralKeys": "error",
 70 |         "useOptionalChain": "warn",
 71 |         "useRegexLiterals": "error",
 72 |         "useSimpleNumberKeys": "error",
 73 |         "useSimplifiedLogicExpression": "error"
 74 |       },
 75 |       "correctness": {
 76 |         "noChildrenProp": "error",
 77 |         "noConstantCondition": "error",
 78 |         "noConstAssign": "error",
 79 |         "noConstructorReturn": "error",
 80 |         "noEmptyCharacterClassInRegex": "error",
 81 |         "noEmptyPattern": "error",
 82 |         "noGlobalObjectCalls": "error",
 83 |         "noInnerDeclarations": "error",
 84 |         "noInvalidConstructorSuper": "error",
 85 |         "noInvalidNewBuiltin": "error",
 86 |         "noInvalidUseBeforeDeclaration": "error",
 87 |         "noNewSymbol": "error",
 88 |         "noNonoctalDecimalEscape": "error",
 89 |         "noPrecisionLoss": "error",
 90 |         "noRenderReturnValue": "error",
 91 |         "noSelfAssign": "error",
 92 |         "noSetterReturn": "error",
 93 |         "noStringCaseMismatch": "error",
 94 |         "noSwitchDeclarations": "error",
 95 |         "noUndeclaredVariables": "error",
 96 |         "noUnnecessaryContinue": "error",
 97 |         "noUnreachable": "error",
 98 |         "noUnreachableSuper": "error",
 99 |         "noUnsafeFinally": "error",
100 |         "noUnsafeOptionalChaining": "error",
101 |         "noUnusedImports": "error",
102 |         "noUnusedLabels": "error",
103 |         "noUnusedPrivateClassMembers": "error",
104 |         "noUnusedVariables": "error",
105 |         "noVoidElementsWithChildren": "error",
106 |         "noVoidTypeReturn": "error",
107 |         "useExhaustiveDependencies": "error",
108 |         "useHookAtTopLevel": "off",
109 |         "useIsNan": "error",
110 |         "useJsxKeyInIterable": "off",
111 |         "useValidForDirection": "error",
112 |         "useYield": "error"
113 |       },
114 |       "performance": {
115 |         "noAccumulatingSpread": "error",
116 |         "noDelete": "off"
117 |       },
118 |       "security": {
119 |         "noDangerouslySetInnerHtml": "error",
120 |         "noDangerouslySetInnerHtmlWithChildren": "error",
121 |         "noGlobalEval": "off"
122 |       },
123 |       "style": {
124 |         "noArguments": "error",
125 |         "noCommaOperator": "off",
126 |         "noDefaultExport": "off",
127 |         "noImplicitBoolean": "off",
128 |         "noInferrableTypes": "error",
129 |         "noNamespace": "error",
130 |         "noNegationElse": "error",
131 |         "noNonNullAssertion": "off",
132 |         "noParameterAssign": "off",
133 |         "noParameterProperties": "off",
134 |         "noRestrictedGlobals": "error",
135 |         "noShoutyConstants": "error",
136 |         "noUnusedTemplateLiteral": "error",
137 |         "noUselessElse": "error",
138 |         "noVar": "error",
139 |         "useAsConstAssertion": "error",
140 |         "useBlockStatements": "error",
141 |         "useCollapsedElseIf": "error",
142 |         "useConsistentArrayType": "error",
143 |         "useConst": "error",
144 |         "useDefaultParameterLast": "error",
145 |         "useEnumInitializers": "error",
146 |         "useExponentiationOperator": "error",
147 |         "useExportType": "error",
148 |         "useFilenamingConvention": "off",
149 |         "useForOf": "warn",
150 |         "useFragmentSyntax": "error",
151 |         "useImportType": "error",
152 |         "useLiteralEnumMembers": "error",
153 |         "useNamingConvention": "off",
154 |         "useNodejsImportProtocol": "warn",
155 |         "useNumberNamespace": "error",
156 |         "useNumericLiterals": "error",
157 |         "useSelfClosingElements": "error",
158 |         "useShorthandArrayType": "error",
159 |         "useShorthandAssign": "error",
160 |         "useShorthandFunctionType": "warn",
161 |         "useSingleCaseStatement": "error",
162 |         "useSingleVarDeclarator": "error",
163 |         "useTemplate": "off",
164 |         "useWhile": "error"
165 |       },
166 |       "suspicious": {
167 |         "noApproximativeNumericConstant": "error",
168 |         "noArrayIndexKey": "error",
169 |         "noAssignInExpressions": "error",
170 |         "noAsyncPromiseExecutor": "error",
171 |         "noCatchAssign": "error",
172 |         "noClassAssign": "error",
173 |         "noCommentText": "error",
174 |         "noCompareNegZero": "error",
175 |         "noConfusingLabels": "error",
176 |         "noConfusingVoidType": "error",
177 |         "noConsoleLog": "warn",
178 |         "noConstEnum": "off",
179 |         "noControlCharactersInRegex": "error",
180 |         "noDebugger": "off",
181 |         "noDoubleEquals": "error",
182 |         "noDuplicateCase": "error",
183 |         "noDuplicateClassMembers": "error",
184 |         "noDuplicateJsxProps": "error",
185 |         "noDuplicateObjectKeys": "error",
186 |         "noDuplicateParameters": "error",
187 |         "noEmptyBlockStatements": "error",
188 |         "noEmptyInterface": "error",
189 |         "noExplicitAny": "warn",
190 |         "noExtraNonNullAssertion": "error",
191 |         "noFallthroughSwitchClause": "error",
192 |         "noFunctionAssign": "error",
193 |         "noGlobalAssign": "error",
194 |         "noGlobalIsFinite": "error",
195 |         "noGlobalIsNan": "error",
196 |         "noImplicitAnyLet": "off",
197 |         "noImportAssign": "error",
198 |         "noLabelVar": "error",
199 |         "noMisleadingCharacterClass": "error",
200 |         "noMisleadingInstantiator": "error",
201 |         "noMisrefactoredShorthandAssign": "off",
202 |         "noPrototypeBuiltins": "error",
203 |         "noRedeclare": "error",
204 |         "noRedundantUseStrict": "error",
205 |         "noSelfCompare": "off",
206 |         "noShadowRestrictedNames": "error",
207 |         "noSparseArray": "off",
208 |         "noThenProperty": "warn",
209 |         "noUnsafeDeclarationMerging": "error",
210 |         "noUnsafeNegation": "error",
211 |         "useAwait": "error",
212 |         "useDefaultSwitchClauseLast": "error",
213 |         "useGetterReturn": "error",
214 |         "useIsArray": "error",
215 |         "useNamespaceKeyword": "error",
216 |         "useValidTypeof": "error"
217 |       }
218 |     }
219 |   },
220 |   "formatter": {
221 |     "enabled": true,
222 |     "ignore": ["node_modules/**/*"],
223 |     "formatWithErrors": false,
224 |     "indentWidth": 2,
225 |     "indentStyle": "space",
226 |     "lineEnding": "lf",
227 |     "lineWidth": 80
228 |   },
229 |   "organizeImports": {
230 |     "enabled": true,
231 |     "ignore": ["node_modules/**/*"]
232 |   },
233 |   "javascript": {
234 |     "formatter": {
235 |       "enabled": true,
236 |       "arrowParentheses": "asNeeded",
237 |       "bracketSameLine": false,
238 |       "bracketSpacing": true,
239 |       "indentWidth": 2,
240 |       "indentStyle": "space",
241 |       "jsxQuoteStyle": "double",
242 |       "lineEnding": "lf",
243 |       "lineWidth": 80,
244 |       "quoteProperties": "asNeeded",
245 |       "quoteStyle": "single",
246 |       "semicolons": "always",
247 |       "trailingComma": "all"
248 |     },
249 |     "globals": [],
250 |     "parser": {
251 |       "unsafeParameterDecoratorsEnabled": true
252 |     }
253 |   },
254 |   "json": {
255 |     "formatter": {
256 |       "enabled": true,
257 |       "indentWidth": 2,
258 |       "indentStyle": "space",
259 |       "lineEnding": "lf",
260 |       "lineWidth": 80
261 |     },
262 |     "parser": {
263 |       "allowComments": false,
264 |       "allowTrailingCommas": false
265 |     }
266 |   }
267 | }
268 | 


--------------------------------------------------------------------------------