@kenyani/react-emoji-reaction-bar 0.0.2

package/README.md

@@ -0,0 +1,75 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/index.cjs

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ReactionBar: () => ReactionBar
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ReactionBar.tsx
+var import_react = require("react");
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ReactionBar({
+  reactions = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}"],
+  onReact
+}) {
+  const [selected, setSelected] = (0, import_react.useState)(null);
+  const [floating, setFloating] = (0, import_react.useState)([]);
+  const handleReact = (emoji) => {
+    setSelected(emoji);
+    onReact?.(emoji);
+    const id = Date.now();
+    setFloating((prev) => [...prev, { emoji, id }]);
+    setTimeout(() => {
+      setFloating((prev) => prev.filter((f) => f.id !== id));
+    }, 900);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "container", children: [
+    reactions.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.button,
+      {
+        className: "button",
+        whileHover: { scale: 1.3 },
+        whileTap: { scale: 0.9 },
+        animate: {
+          scale: selected === emoji ? 1.25 : 1
+        },
+        transition: {
+          type: "spring",
+          stiffness: 500,
+          damping: 20
+        },
+        onClick: () => handleReact(emoji),
+        children: emoji
+      },
+      emoji
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "floatingLayer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: floating.map((f) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.span,
+      {
+        className: "floatingEmoji",
+        initial: { y: 0, opacity: 1, scale: 1 },
+        animate: { y: -60, opacity: 0, scale: 1.6 },
+        exit: { opacity: 0 },
+        transition: {
+          type: "spring",
+          stiffness: 120,
+          damping: 10,
+          duration: 0.9
+        },
+        children: f.emoji
+      },
+      f.id
+    )) }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReactionBar
+});

package/dist/index.css

@@ -0,0 +1,26 @@
+/* src/styles.css */
+.container {
+  position: relative;
+  display: inline-flex;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 40px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+}
+.button {
+  font-size: 24px;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+.floatingLayer {
+  position: absolute;
+  left: 50%;
+  top: -10px;
+  pointer-events: none;
+}
+.floatingEmoji {
+  position: absolute;
+  font-size: 22px;
+}

package/dist/index.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ReactionBarProps {
+    reactions?: string[];
+    onReact?: (emoji: string) => void;
+}
+
+declare function ReactionBar({ reactions, onReact, }: ReactionBarProps): react_jsx_runtime.JSX.Element;
+
+export { ReactionBar, type ReactionBarProps };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ReactionBarProps {
+    reactions?: string[];
+    onReact?: (emoji: string) => void;
+}
+
+declare function ReactionBar({ reactions, onReact, }: ReactionBarProps): react_jsx_runtime.JSX.Element;
+
+export { ReactionBar, type ReactionBarProps };

package/dist/index.js

@@ -0,0 +1,61 @@
+// src/components/ReactionBar.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReactionBar({
+  reactions = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}"],
+  onReact
+}) {
+  const [selected, setSelected] = useState(null);
+  const [floating, setFloating] = useState([]);
+  const handleReact = (emoji) => {
+    setSelected(emoji);
+    onReact?.(emoji);
+    const id = Date.now();
+    setFloating((prev) => [...prev, { emoji, id }]);
+    setTimeout(() => {
+      setFloating((prev) => prev.filter((f) => f.id !== id));
+    }, 900);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    reactions.map((emoji) => /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        className: "button",
+        whileHover: { scale: 1.3 },
+        whileTap: { scale: 0.9 },
+        animate: {
+          scale: selected === emoji ? 1.25 : 1
+        },
+        transition: {
+          type: "spring",
+          stiffness: 500,
+          damping: 20
+        },
+        onClick: () => handleReact(emoji),
+        children: emoji
+      },
+      emoji
+    )),
+    /* @__PURE__ */ jsx("div", { className: "floatingLayer", children: /* @__PURE__ */ jsx(AnimatePresence, { children: floating.map((f) => /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        className: "floatingEmoji",
+        initial: { y: 0, opacity: 1, scale: 1 },
+        animate: { y: -60, opacity: 0, scale: 1.6 },
+        exit: { opacity: 0 },
+        transition: {
+          type: "spring",
+          stiffness: 120,
+          damping: 10,
+          duration: 0.9
+        },
+        children: f.emoji
+      },
+      f.id
+    )) }) })
+  ] });
+}
+export {
+  ReactionBar
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@kenyani/react-emoji-reaction-bar",
+  "private": false,
+  "version": "0.0.2",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "bundle": "tsup src/index.ts"
+  },
+  "dependencies": {
+    "framer-motion": "^12.36.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@eslint/js": "^9.39.4",
+    "@rolldown/plugin-babel": "^0.2.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0"
+  },
+  "author": "Kenyani",
+  "license": "MIT",
+  "keywords": [
+    "xxx",
+    "xxx"
+  ],
+  "homepage": "xxxx",
+  "github": {
+    "url": "https://github.com/Rachel-Kenyani"
+  }
+}