react-spring-carousel 3.0.0-beta090.51 → 3.0.0-beta090.53

package/lib/types.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+
+type Item = {
+  id: string;
+  renderItem: ReactNode;
+  renderThumb?: ReactNode;
+};
+
+type SlideType = "fixed" | "fluid" | "freeScroll";
+
+type FixedSlideTypeProps = {
+  slideType?: "fixed";
+  scrollAmount?: never;
+  itemsPerSlide?: number;
+  scrollAmountType?: "group" | "slide";
+};
+type FluidSlideTypeProps = {
+  slideType?: "fluid";
+  scrollAmount?: number;
+  itemsPerSlide?: never;
+  scrollAmountType?: never;
+};
+type FreeScrollSlideTypeProps = {
+  slideType?: "freeScroll";
+  scrollAmount?: number;
+  itemsPerSlide?: never;
+  scrollAmountType?: never;
+  withLoop?: never;
+};
+
+export type Props = {
+  init?: boolean;
+  slideType?: SlideType;
+  items: Item[];
+  withLoop?: boolean;
+  enableGestures?: boolean;
+  carouselAxis?: "x" | "y";
+  slideWhenDragThresholdIsReached?: boolean;
+  gutter?: number;
+  startEndGutter?: number;
+  fadeIn?: boolean;
+} & (FixedSlideTypeProps | FluidSlideTypeProps | FreeScrollSlideTypeProps);
+
+export * from "./events";

package/lib/useEventsModule.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from "react";
+
+import {
+  SpringCarouselEventsEventHandler,
+  SpringCarouselEvents,
+} from "./events";
+
+const eventLabel = "RSC::Event";
+
+export function useEventsModule() {
+  const targetEvent = useRef<HTMLDivElement | null>(null);
+
+  function useListenToCustomEvent(
+    eventHandler: SpringCarouselEventsEventHandler
+  ) {
+    useEffect(() => {
+      if (!targetEvent.current) {
+        targetEvent.current = document.createElement("div");
+      }
+
+      function handleEvent(_event: Event) {
+        const event = _event as CustomEvent<SpringCarouselEvents>;
+        eventHandler(event.detail);
+      }
+
+      if (targetEvent.current) {
+        targetEvent.current.addEventListener(eventLabel, handleEvent, false);
+        return () => {
+          targetEvent.current?.removeEventListener(
+            eventLabel,
+            handleEvent,
+            false
+          );
+        };
+      }
+    }, [eventHandler]);
+  }
+  function emitEvent(event: SpringCarouselEvents) {
+    if (targetEvent.current) {
+      const newEvent = new CustomEvent(eventLabel, {
+        detail: event,
+      });
+      targetEvent.current.dispatchEvent(newEvent);
+    }
+  }
+
+  return {
+    useListenToCustomEvent,
+    emitEvent,
+  };
+}

package/lib/utils.ts

@@ -0,0 +1,42 @@
+function isOutOfViewport(element: Element): {
+  isOut: boolean;
+  direction: "start" | "end" | null;
+} {
+  const { left, right, top, bottom } = element.getBoundingClientRect();
+  const { innerWidth, innerHeight } = window;
+
+  if (left < 0 || top < 0) {
+    return {
+      isOut: true,
+      direction: "start",
+    };
+  }
+
+  if (
+    Math.floor(right) > Math.floor(innerWidth) ||
+    Math.floor(bottom) > Math.floor(innerHeight)
+  ) {
+    return {
+      isOut: true,
+      direction: "end",
+    };
+  }
+
+  return {
+    isOut: false,
+    direction: null,
+  };
+}
+function pFloat(v: number) {
+  return parseFloat(v.toFixed(2));
+}
+function logWarn(message: string) {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(message);
+  }
+}
+function logError(message: string) {
+  console.error(message);
+}
+
+export { isOutOfViewport, pFloat, logWarn, logError };

package/lib/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,101 +1,53 @@
 {
   "name": "react-spring-carousel",
-  "version": "3.0.0-beta090.51",
-  "description": "A new <Carousel /> experience for the web",
-  "homepage": "https://react-spring-carousel.emilianobucci.com",
-  "repository": "https://github.com/Emiliano-Bucci/react-spring-carousel",
-  "author": "Emiliano Bucci",
-  "license": "MIT",
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/types/index.d.ts",
-  "files": [
-    "dist/*"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "module": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/types/index.d.ts"
-    }
-  },
+  "version": "3.0.0-beta090.53",
+  "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release:beta": "git push && npm run build && npm publish --tag beta",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-    "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
-    "format": "prettier --write src//**/*.{ts,tsx} --config ./.prettierrc",
-    "prepare": "husky install"
+    "release:beta": "git push && npm run build && npm publish --tag beta"
   },
-  "keywords": [
-    "react",
-    "react-spring",
-    "carousel",
-    "react-carousel",
-    "react-spring-carousel",
-    "slider",
-    "react-slider",
-    "react-spring-slider",
-    "animated"
-  ],
-  "devDependencies": {
-    "@storybook/addon-essentials": "^7.5.0",
-    "@storybook/addon-interactions": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
-    "@storybook/blocks": "^7.5.0",
-    "@storybook/manager-api": "^7.5.0",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-vite": "^7.5.0",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react": "^4.0.0-beta.0",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.1",
-    "prettier": "^2.8.8",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hooks": "^1.0.1",
-    "storybook": "^7.5.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.0",
-    "vite-plugin-dts": "^2.3.0",
-    "vite-tsconfig-paths": "^4.2.0"
+  "dependencies": {
+    "@use-gesture/react": "^10.2.26"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.5.4",
-    "@use-gesture/react": "^10.2.26",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "screenfull": "^5.2.0"
+    "react-dom": "^18.0.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.7.0",
+    "@eslint/js": "^9.9.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-storybook": "^0.8.0",
+    "globals": "^15.9.0",
+    "storybook": "^8.2.9",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1",
+    "vite-plugin-dts": "^4.0.3"
   },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx}": [
-      "npx eslint",
-      "npm run format"
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
     ]
   }
 }

package/src/stories/Button.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};