@orioro/react-reactions 0.0.1

package/dist/styles.css

@@ -0,0 +1,74 @@
+/**
+ * Thanks to animate.css
+ * https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/bounce.css
+ */
+@keyframes react-reactions--bounce {
+  from,
+  20%,
+  53%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -30px, 0) scaleY(1.1);
+  }
+
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -15px, 0) scaleY(1.05);
+  }
+
+  80% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0) scaleY(0.95);
+  }
+
+  90% {
+    transform: translate3d(0, -4px, 0) scaleY(1.02);
+  }
+}
+
+.react-reactions--bounce {
+  animation-name: react-reactions--bounce;
+  animation-duration: 1s;
+}
+
+/**
+ * Thanks to animate.css
+ * https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/headShake.css
+ */
+@keyframes react-reactions--shake {
+  0% {
+    transform: translateX(0);
+  }
+
+  6.5% {
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+}
+
+.react-reactions--shake {
+  animation-timing-function: ease-in-out;
+  animation-name: react-reactions--shake;
+  animation-duration: 1s;
+}

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+export type User = {
+    id: string | number;
+    name?: string;
+    description?: string;
+    pictureUrl?: string;
+};
+export type Emoji = {
+    id: string;
+    native: string;
+    unified: string;
+    [key: string]: any;
+};
+export type Reaction = {
+    id: string | number;
+    targetId: string | number | symbol;
+    emoji: Emoji;
+    user: User;
+    isPersisting?: boolean;
+};
+export type ReactionGroup = {
+    emojiId: string;
+    reactions: Reaction[];
+};

package/dist/util/areReactionSetsEqual.d.ts

@@ -0,0 +1,3 @@
+import { Reaction } from '../types';
+export declare function hashReactionSet(reactions: Reaction[]): string;
+export declare function areReactionSetsEqual(setA: Reaction[], setB: Reaction[]): boolean;

package/dist/util/arrayGroupBy.d.ts

@@ -0,0 +1,3 @@
+type GroupedItems<T> = Record<string, T[]>;
+export declare function arrayGroupBy<T>(array: T[], iteratee: (item: T) => string): GroupedItems<T>;
+export {};

package/dist/util/index.d.ts

@@ -0,0 +1,2 @@
+export * from './arrayGroupBy';
+export * from './areReactionSetsEqual';

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@orioro/react-reactions",
+  "version": "0.0.1",
+  "packageManager": "yarn@4.0.2",
+  "type": "module",
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && npm run emoji-data && rollup --config ./rollup.config.mjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "emoji-data": "node scripts/pt-emoji-data.mjs"
+  },
+  "devDependencies": {
+    "@orioro/dev": "workspace:^",
+    "mkdirp": "^3.0.1",
+    "rollup": "^4.13.0",
+    "rollup-plugin-import-css": "^3.5.0",
+    "storybook": "^8.0.0"
+  },
+  "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
+    "@orioro/react-ui-core": "workspace:^",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/themes": "^3.0.1",
+    "emoji-mart": "^5.6.0",
+    "framer-motion": "^11.2.12",
+    "react": "^18.2.0",
+    "react-use": "^17.5.0",
+    "styled-components": "^6.1.8"
+  }
+}