@graphcommerce/framer-scroller 0.2.8 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.11...@graphcommerce/framer-scroller@0.3.0) (2021-10-19)
+
+
+### Features
+
+* **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props ([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
+
+
+
+
+
+## [0.2.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.8...@graphcommerce/framer-scroller@0.2.9) (2021-10-11)
+
+
+### Bug Fixes
+
+* **framer-scroller:** dots should have a background ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
+
+
+
+
+
 ## [0.2.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.7...@graphcommerce/framer-scroller@0.2.8) (2021-10-09)
 
 

package/README.md

@@ -37,22 +37,14 @@ import {
 function MyScroller() {
   return (
     <ScrollerProvider>
-      <Scroller
-        style={{
-          display: `grid`,
-          gridAutoFlow: `column`,
-          gridTemplateColumns: `repeat(100, 100%)`,
-          gridTemplateRows: `100%`,
-          height: 400,
-        }}
-      >
-        <div>item1</div>
-        <div>item2</div>
-        <div>item3</div>
-        <div>item4</div>
-        <div>item5</div>
-        <div>item6</div>
-        <div>item7</div>
+      <Scroller>
+        <div style={{ height: 400 }}>item1</div>
+        <div style={{ height: 400 }}>item2</div>
+        <div style={{ height: 400 }}>item3</div>
+        <div style={{ height: 400 }}>item4</div>
+        <div style={{ height: 400 }}>item5</div>
+        <div style={{ height: 400 }}>item6</div>
+        <div style={{ height: 400 }}>item7</div>
       </Scroller>
       <ScrollerButton>Next</ScrollerButton>
     </ScrollerProvider>

package/components/ScrollerDots.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { UseStyles } from '@graphcommerce/next-ui'
 import { Fab, FabProps, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { HTMLMotionProps, m } from 'framer-motion'
@@ -6,11 +7,6 @@ import React from 'react'
 import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
 
-export type DotsProps = {
-  classes?: Record<'dots' | 'dot' | 'circle', string>
-  fabProps?: Omit<FabProps, 'onClick' | 'children'>
-} & HTMLMotionProps<'div'>
-
 const useStyles = makeStyles(
   (theme: Theme) => ({
     dots: {
@@ -18,6 +14,7 @@ const useStyles = makeStyles(
       display: 'grid',
       gridAutoFlow: 'column',
       padding: `0 7px`,
+      borderRadius: '20px',
     },
     dot: {
       boxShadow: 'none',
@@ -34,8 +31,13 @@ const useStyles = makeStyles(
   { name: 'ScrollerDots' },
 )
 
+export type DotsProps = {
+  fabProps?: Omit<FabProps, 'onClick' | 'children'>
+} & HTMLMotionProps<'div'> &
+  UseStyles<typeof useStyles>
+
 const ScrollerDots = m(
-  React.forwardRef<any, DotsProps>((props, ref) => {
+  React.forwardRef<HTMLDivElement, DotsProps>((props, ref) => {
     const { fabProps, ...containerProps } = props
     const { dots, dot, circle, ...classes } = useStyles(props)
     const { items, getScrollSnapPositions } = useScrollerContext()

package/hooks/useScroller.ts

@@ -19,6 +19,9 @@ import { useVelocitySnapTo } from './useVelocitySnapTo'
 const useStyles = makeStyles(
   {
     root: ({ scrollSnapAlign, scrollSnapStop }: ScrollSnapProps) => ({
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gridAutoColumns: `40%`,
       overflow: `auto`,
       overscrollBehaviorInline: `contain`,
       '& > *': {
@@ -49,7 +52,7 @@ const useStyles = makeStyles(
       },
     },
   },
-  { name: 'Scrollable' },
+  { name: 'Scroller' },
 )
 
 export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = HTMLMotionProps<TagName> & {
@@ -71,7 +74,7 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
 
   const canGrab = useMotionValueValue(
     useTransform(
-      [scroll.xMax, scroll.yMax] as MotionValue[],
+      [scroll.xMax, scroll.yMax] as MotionValue<string | number>[],
       ([xMax, yMax]: number[]) => xMax || yMax,
     ),
     (v) => v,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/framer-scroller",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,17 +16,17 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.6",
-    "@graphcommerce/image": "^2.104.7",
+    "@graphcommerce/framer-utils": "^2.103.8",
+    "@graphcommerce/image": "^2.104.10",
     "@material-ui/core": "^4.12.3",
     "popmotion": "9.3.6"
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
-    "@graphcommerce/eslint-config-pwa": "^3.0.5",
-    "@graphcommerce/prettier-config-pwa": "^3.0.2",
-    "@graphcommerce/typescript-config-pwa": "^3.1.0",
-    "@playwright/test": "^1.15.0"
+    "@graphcommerce/browserslist-config-pwa": "^3.0.2",
+    "@graphcommerce/eslint-config-pwa": "^3.0.7",
+    "@graphcommerce/prettier-config-pwa": "^3.0.3",
+    "@graphcommerce/typescript-config-pwa": "^3.1.1",
+    "@playwright/test": "^1.15.2"
   },
   "peerDependencies": {
     "clsx": "^1.1.1",
@@ -35,5 +35,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^1.0.1"
   },
-  "gitHead": "b3dd4c996ac571874bb03d0a5c16b2c37f41abcb"
+  "gitHead": "a7749d81f482a77bc6bcbf237aca551ed3b7a835"
 }