react-scroll-snap-anime-slider 1.0.0

package/docs/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+import { clsx } from 'clsx';
+import styles from './styles.module.css';
+import { random, colord } from "colord";
+import { ButtonBack, ButtonNext, Carousel, Slide, Slider, SliderBarLine, SliderBarDotGroup, renderDotsDynamicCircle, renderDotsDynamicPill } from "../../../../src";
+
+type SlideItem = {
+    title: string;
+    background: string;
+    color: string;
+};
+
+function Feature(props: SlideItem) {
+    const [count, setCount] = useState(0);
+    return (
+        <div
+            style={{
+                display: "flex",
+                width: "100%",
+                height: "100%",
+                backgroundColor: props.background,
+                color: props.color,
+                alignItems: "center",
+            }}
+        >
+            <div className="text--center" style={{ width: "100%" }}>
+                <h3>{props.title}</h3>
+                <div><button className="button button--sm button--secondary" type="button" onClick={() => setCount(count + 1)} >Add Count</button></div>
+                <div>{count}</div>
+            </div>
+        </div>
+    );
+}
+
+export default function HomepageFeatures(): JSX.Element {
+    const [slideCount, setSlideCount] = useState(20);
+    const [visibleSlides, setVisibleSlides] = useState(3);
+    const [step, setStep] = useState(1);
+    const [height, setHeight] = useState(1);
+    const [width, setWidth] = useState(1.2);
+    const [margin, setMargin] = useState(0);
+    const [freeScroll, setFreeScroll] = useState(false);
+    const [buttons, setButtons] = useState(true);
+    const [scrollbar, setScrollbar] = useState(true);
+    const [dotGroup, setDotGroup] = useState(true);
+    const [dotGroupType, setDotGroupType] = useState(1);
+
+    let slides: SlideItem[] = [];
+
+    for (let i = 0; i < slideCount; ++i) {
+        let c = random();
+        let color = c.isLight() ? "#000" : "#fff";
+
+        slides.push({
+            title: "Slide #" + (i + 1),
+            background: c.toHex(),
+            color,
+        });
+    }
+
+    return (
+        <section >
+            <div className="container">
+                <div className="padding-bottom--md">
+                    <Carousel
+                        totalSlides={slides.length}
+                        visibleSlides={visibleSlides}
+                        step={step}
+                        slideHeight={height}
+                        slideWidth={width}
+                        freeScroll={freeScroll}
+                        currentSlide={0}
+                        margin={margin / 2 + "px"}
+                    >
+                        <Slider
+                            aria-label="my slider"
+                            style={{ borderRadius: "1rem", overflow: "hidden" }}
+                        >
+                            {slides.map((props, i) => (
+                                <Slide
+                                    key={i}
+                                    aria-label="my slide"
+                                >
+                                    <Feature  {...props} />
+                                </Slide>
+                            ))}
+                        </Slider>
+
+                        {scrollbar &&
+                            <SliderBarLine
+                                id="my-slider-bar"
+                                className="margin-top--md"
+                                aria-label="slider bar"
+                                trackProps={{
+                                    id: "my-slider-bar-track",
+                                    "aria-label": "slider track",
+                                    style: { borderRadius: "1rem" }
+                                }}
+                                thumbProps={{
+                                    id: "my-slider-bar-thumb",
+                                    "aria-label": "slider thumb",
+                                    style: { borderRadius: "1rem" }
+                                }}
+                            />
+                        }
+
+                        {dotGroup &&
+                            <SliderBarDotGroup
+                                id="my-slider-dot-group"
+                                className="margin-top--md"
+                                aria-label="slider bar"
+                                dotGroupProps={{
+                                    id: "my-slider-bar-dot-track",
+                                    "aria-label": "slider track"
+                                }}
+                                renderDots={dotGroupType === 1
+                                    ? renderDotsDynamicCircle
+                                    : ((dotGroupType === 2)
+                                        ? renderDotsDynamicPill
+                                        : undefined)
+                                }
+                            />
+                        }
+
+                        {buttons &&
+                            <div className="margin-top--md" style={{ textAlign: "center" }}>
+                                <ButtonBack className="button button--primary">&lt;</ButtonBack>
+
+                                <ButtonNext className="button button--primary margin-left--md">&gt;</ButtonNext>
+                            </div>
+                        }
+
+                    </Carousel>
+                </div>
+            </div>
+
+            <hr />
+
+            <div className={styles.featureSettingContainer} >
+
+                <div className="padding--md">
+                    <div className="">
+                        Slide count: <input className="site-input" type="number" value={slideCount} onChange={(e) => setSlideCount(Number(e.target.value))} />
+                    </div>
+                    <div className="padding-top--xs">
+                        Visible slides: <input className="site-input" type="number" value={visibleSlides} onChange={(e) => setVisibleSlides(Number(e.target.value))} />
+                    </div>
+                    <div className="padding-top--xs">
+                        Slides per step: <input className="site-input" type="number" value={step} onChange={(e) => setStep(Number(e.target.value))} />
+                    </div>
+                </div>
+
+                <div className="padding--md">
+
+                    <div className="">
+                        Slide gap: <input className="site-input" type="number" value={margin} onChange={(e) => setMargin(Number(e.target.value))} step="1" /> px
+                    </div>
+
+                    <div className="padding-top--xs">
+                        Slide height: <input className="site-input" type="number" value={height} onChange={(e) => setHeight(Number(e.target.value))} step="0.1" />
+                    </div>
+                    <div className="padding-top--xs">
+                        Slide width: <input className="site-input" type="number" value={width} onChange={(e) => setWidth(Number(e.target.value))} step="0.1" />
+                    </div>
+
+                    <div className="padding-top--xs" style={{ "color": " var(--ifm-color-secondary-darkest)", fontSize: "12px" }}>Height will become auto if set to 0</div>
+
+                </div>
+
+                <div className="padding--md">
+                    <div className="">
+                        Free Scroll?: <input className="" type="checkbox" checked={freeScroll} onChange={() => setFreeScroll(!freeScroll)} />
+                    </div>
+
+                    <div className="padding-top--xs">
+                        Show scrollbar?: <input className="" type="checkbox" checked={scrollbar} onChange={() => setScrollbar(!scrollbar)} />
+                    </div>
+
+                    <div className="padding-top--xs">
+                        Show buttons?: <input className="" type="checkbox" checked={buttons} onChange={() => setButtons(!buttons)} />
+                    </div>
+                </div>
+
+                <div className="padding--md">
+
+                    <div className="">
+                        Show dot group?: <input className="" type="checkbox" checked={dotGroup} onChange={() => setDotGroup(!dotGroup)} />
+                    </div>
+
+                    <div className="padding-top--xs">
+                        Normal: <input className="" type="radio" name="dot-type" checked={dotGroupType === 0} onChange={() => setDotGroupType(0)} disabled={!dotGroup} />
+                    </div>
+
+                    <div className="">
+                        Dynamic circle: <input className="" type="radio" name="dot-type" checked={dotGroupType === 1} onChange={() => setDotGroupType(1)} disabled={!dotGroup} />
+                    </div>
+
+                    <div className="">
+                        Dynamic pill: <input className="" type="radio" name="dot-type" checked={dotGroupType === 2} onChange={() => setDotGroupType(2)} disabled={!dotGroup} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/docs/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,35 @@
+.features {
+  display: flex;
+  align-items: center;
+  /* padding: 2rem 0; */
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}
+
+.featureSettingContainer {
+  display: flex;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.featureSettingContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.featureSettingContainer > div {
+  flex-shrink: 0;
+}
+.featureSettingContainer > div:not(:first-child) {
+  border-left: 1px solid var(--ifm-hr-background-color);
+}
+
+.demoBox {
+  /* box-shadow: 0px 0px 12px 0px var(--ifm-hr-background-color); */
+  border-radius: 1rem;
+  border: 1px solid var(--ifm-hr-background-color);
+  padding: 1rem 0;
+}

package/docs/src/css/custom.css

@@ -0,0 +1,87 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ * 
+ * https://infima.dev/docs/components/avatar
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary-lightest: #aae3fc;
+  --ifm-color-primary-lighter: #6dd0fa;
+  --ifm-color-primary-light: #00bef8;
+  --ifm-color-primary: #00b0f9;
+  --ifm-color-primary-dark: #00a2f6;
+  --ifm-color-primary-darker: #0095e7;
+  --ifm-color-primary-darkest: #0082d4;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-hr-background-color: #e0e5eb;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+  --ifm-color-primary-lightest: #e1f6ff;
+  --ifm-color-primary-lighter: #b3e7ff;
+  --ifm-color-primary-light: #80d8ff;
+  --ifm-color-primary: #47c8ff;
+  --ifm-color-primary-dark: #10bbff;
+  --ifm-color-primary-darker: #00afff;
+  --ifm-color-primary-darkest: #00a0fb;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-hr-background-color: #565c62;
+}
+
+hr {
+  margin: 0;
+}
+
+.header-github-link:before {
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  background-color: var(--ifm-navbar-link-color);
+  content: "";
+  display: flex;
+  height: 24px;
+  width: 24px;
+}
+
+.site-input {
+  appearance: none; /* Algolia will add type="search" to the input in Safari and Safari's styling will override the styling here. */
+  background: var(--ifm-navbar-search-input-background-color);
+  border: none;
+  border-radius: 2rem;
+  color: var(--ifm-navbar-search-input-color);
+  cursor: text;
+  display: inline-block;
+  font-size: 0.9rem;
+  height: 2rem;
+  padding: 0 1rem;
+  width: 5rem;
+  /* min-width: 5rem; */
+  /* max-width: 10rem; */
+}
+
+.site-input::placeholder {
+  color: var(--ifm-navbar-search-input-placeholder-color);
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.footer {
+  background-color: unset;
+  border-top: 1px solid var(--ifm-hr-background-color);
+}
+
+.footer__item {
+  text-align: center;
+}
+
+@media (max-width: 996px) {
+  .footer__col {
+    margin-bottom: 0;
+  }
+}

package/docs/src/pages/index.module.css

@@ -0,0 +1,34 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.heroBannerBg {
+  background: url(/img/logo-slider.png) no-repeat right center/300px 300px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  opacity: 0.2;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem 0;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/docs/src/pages/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+    const { siteConfig } = useDocusaurusContext();
+    return (
+        <header className={clsx('', styles.heroBanner)}>
+            <div className={styles.heroBannerBg}></div>
+            <div className="container" style={{ position: "relative" }}>
+                <h1 className="hero__title">{siteConfig.title}</h1>
+                <h5 className="hero__subtitle">
+                    A simple slider using css style scroll-snap and <a className="" style={{ color: "#FA196C", fontStyle: "italic" }} href="https://popmotion.io/" target="_blank">Popmotion</a>
+                </h5>
+                <div className={styles.buttons}>
+                    {/* <Link
+                        className="button button--secondary button--lg"
+                        to="/docs/intro">
+                        Docusaurus Tutorial - 5minfffffff ⏱️
+                    </Link> */}
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default function Home(): JSX.Element {
+    const { siteConfig } = useDocusaurusContext();
+    return (
+        <Layout
+            // page title shown on document title
+            // title={`A Simple React Anime Slider`}
+            // Description will go into a meta tag in <head />
+            description="A Simple React Anime Slider">
+            <HomepageHeader />
+
+            <main style={{ position: "relative" }}>
+                <HomepageFeatures />
+            </main>
+
+        </Layout>
+    );
+}

package/docs/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

package/docs/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "module": "CommonJS", // Forces CommonJS
+  "moduleResolution": "node16", // `node16` allows the `import()`
+  "allowJs": true,
+  "jsx": "react",
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "./src/**/*",
+  ]
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.svg";

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "react-scroll-snap-anime-slider",
+  "version": "1.0.0",
+  "private": false,
+  "description": "A simple slider/carousel using css style scroll-snap and Popmotion.",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react",
+    "carousel",
+    "scroll snapping",
+    "scroll snap",
+    "scroll",
+    "slider",
+    "react slider",
+    "popmotion",
+    "inertia slider",
+    "anime slider",
+    "animate slider"
+  ],
+  "author": "karanokara <karawakara@gmail.com> (https://github.com/karanokara)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/karanokara/react-scroll-snap-anime-slider.git"
+  },
+  "devDependencies": {
+    "@parcel/packager-raw-url": "^2.8.3",
+    "@parcel/transformer-typescript-types": "^2.8.3",
+    "@parcel/transformer-webmanifest": "^2.8.3",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.1",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "@types/animejs": "^3.1.7",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.23",
+    "@types/react": "^18.0.34",
+    "@types/react-dom": "^18.0.11",
+    "node-sass": "^8.0.0",
+    "parcel": "^2.8.3",
+    "process": "^0.11.10",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^4.9.5"
+  },
+  "dependencies": {
+    "popmotion": "8.7.1",
+    "rollup-plugin-import-css": "^3.2.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "scripts": {
+    "build": "rm -rf ./dist && rollup -c",
+    "start": "parcel demo/src/index.html --dist-dir demo/dist --port 5001 --open",
+    "docs": "cd ./docs && npm start"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,82 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import terser from '@rollup/plugin-terser';
+import external from "rollup-plugin-peer-deps-external";
+import css from "rollup-plugin-import-css";
+// import json from '@rollup/plugin-json';
+// import dts from "rollup-plugin-dts";
+import packageJson from "./package.json" assert { type: 'json' };
+
+/**
+ * Using rollup: ES module bundler
+ * - add "type": "module" to package.json for this file to work in ES style
+ *      - or change extension to .mjs
+ * - run with -config: rollup -c
+ */
+export default [
+    {
+        input: packageJson.source,
+        output: [
+            // compile to those file formats
+            {
+                // CommonJS module, suitable for Node
+                file: packageJson.main,     // file name to use
+                format: "cjs",
+                sourcemap: true,
+            },
+
+            // compile to an ES module, can be used for <script type=module>
+            {
+                file: packageJson.module,
+                format: "es",
+                sourcemap: true,
+            },
+
+            // A self-executing function, suitable for <script> tag browser format
+            // {
+            //     file: 'dist/bundle.js',
+            //     format: 'iife',     //immediately-invoked Function Expression
+            //     name: "MyBundle",
+            //     sourcemap: true,
+            //     globals: {
+            //         react: 'React',
+            //         animejs: 'animejs'
+            //     }
+            // }
+
+            // amd – Asynchronous Module Definition, used with module loaders like RequireJS
+            // system – Native format of the SystemJS loader (alias: systemjs)
+            // umd – Universal Module Definition, works as amd, cjs and iife all in one
+        ],
+
+        // indicate which modules should be treated as external
+        external: ['popmotion'],
+
+        plugins: [
+            // bring external modules source code to the output, not necessary for this library 
+            // resolve(),
+
+            // convert CommonJS to ES2015 before Rollup can process them.
+            commonjs(),
+
+            typescript({ tsconfig: "./tsconfig.build.json" }),
+
+            terser(),       // minify output
+
+            css(),
+            // automatically add a library's peerDependencies to its bundle's external config
+            external(),
+
+            // json(),      // source code have json files import
+
+        ],
+    },
+
+    // defines how our libraries types are distributed and uses the dts plugin to do so
+    // {
+    //     input: "dist/types/index.d.ts",
+    //     output: [{ file: "dist/index.d.ts", format: "esm" }],
+    //     plugins: [dts()],
+    // },
+];