Merge pull request #75 from code-hike/spring-prop

pomber · web-flow · commit 68fddf6c9de5 · 2021-07-16T12:39:54.000+01:00
Add spring config
diff --git a/packages/classer/package.json b/packages/classer/package.json
@@ -20,6 +20,9 @@
   },
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/code-diff/package.json b/packages/code-diff/package.json
@@ -22,6 +22,9 @@
   },
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/mini-browser/package.json b/packages/mini-browser/package.json
@@ -34,6 +34,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/mini-editor/package.json b/packages/mini-editor/package.json
@@ -31,6 +31,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/mini-editor/src/mini-editor-spring.tsx b/packages/mini-editor/src/mini-editor-spring.tsx
@@ -7,6 +7,15 @@ import { EditorFrameProps } from "./editor-frame"
 
 export { MiniEditor, MiniEditorProps }
 
+type SpringConfig = Parameters<typeof useSpring>[1]
+
+const defaultSpring = {
+  stiffness: 120,
+  damping: 24,
+  mass: 0.2,
+  decimals: 3,
+}
+
 type SingleFileEditorProps = {
   code: string
   lang: string
@@ -15,17 +24,20 @@ type SingleFileEditorProps = {
   terminal?: string
   frameProps?: Partial<EditorFrameProps>
   codeProps?: Partial<CodeProps>
+  springConfig?: SpringConfig
 }
 type SinglePanelEditorProps = {
   files: StepFile[]
   active: string
   terminal?: string
   frameProps?: Partial<EditorFrameProps>
   codeProps?: Partial<CodeProps>
+  springConfig?: SpringConfig
 }
 type TwoPanelEditorProps = EditorStep & {
   frameProps?: Partial<EditorFrameProps>
   codeProps?: Partial<CodeProps>
+  springConfig?: SpringConfig
 }
 type MiniEditorProps =
   | SingleFileEditorProps
@@ -48,8 +60,8 @@ function SingleFileEditor({
   focus,
   filename = "",
   terminal,
-  frameProps,
-  codeProps,
+  springConfig,
+  ...props
 }: SingleFileEditorProps) {
   const step = React.useMemo(() => {
     const step: EditorStep = {
@@ -64,24 +76,26 @@ function SingleFileEditor({
     return step
   }, [code, lang, focus, filename, terminal])
 
-  const { prev, next, t } = useStepSpring(step)
+  const { prev, next, t } = useStepSpring(
+    step,
+    springConfig
+  )
   return (
     <MiniEditorTween
-      frameProps={frameProps}
       t={t}
       backward={false}
       prev={prev}
       next={next}
-      codeProps={codeProps}
+      {...props}
     />
   )
 }
 function SinglePanelEditor({
   files,
   active,
   terminal,
-  frameProps,
-  codeProps,
+  springConfig,
+  ...props
 }: SinglePanelEditorProps) {
   const step = React.useMemo(() => {
     const tabs = files.map(file => file.name)
@@ -97,25 +111,27 @@ function SinglePanelEditor({
     return step
   }, [files, active, terminal])
 
-  const { prev, next, t } = useStepSpring(step)
+  const { prev, next, t } = useStepSpring(
+    step,
+    springConfig
+  )
   return (
     <MiniEditorTween
-      frameProps={frameProps}
       t={t}
       backward={false}
       prev={prev}
       next={next}
-      codeProps={codeProps}
+      {...props}
     />
   )
 }
 function TwoPanelEditor({
-  frameProps,
-  codeProps,
   northPanel,
   southPanel,
   files,
   terminal,
+  springConfig,
+  ...props
 }: TwoPanelEditorProps) {
   const step = React.useMemo(() => {
     return {
@@ -126,20 +142,25 @@ function TwoPanelEditor({
     }
   }, [northPanel, southPanel, files, terminal])
 
-  const { prev, next, t } = useStepSpring(step)
+  const { prev, next, t } = useStepSpring(
+    step,
+    springConfig
+  )
   return (
     <MiniEditorTween
-      frameProps={frameProps}
       t={t}
       backward={false}
       prev={prev}
       next={next}
-      codeProps={codeProps}
+      {...props}
     />
   )
 }
 
-function useStepSpring(step: EditorStep) {
+function useStepSpring(
+  step: EditorStep,
+  springConfig: SpringConfig = defaultSpring
+) {
   const [{ target, prev, next }, setState] = React.useState(
     {
       target: 0,
@@ -158,12 +179,7 @@ function useStepSpring(step: EditorStep) {
     }
   }, [step])
 
-  const [progress] = useSpring(target, {
-    stiffness: 256,
-    damping: 24,
-    mass: 0.2,
-    decimals: 3,
-  })
+  const [progress] = useSpring(target, springConfig)
 
   const t = progress % 1
 
diff --git a/packages/mini-frame/package.json b/packages/mini-frame/package.json
@@ -24,6 +24,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/mini-terminal/package.json b/packages/mini-terminal/package.json
@@ -26,6 +26,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/player/package.json b/packages/player/package.json
@@ -23,6 +23,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/scroller/package.json b/packages/scroller/package.json
@@ -23,6 +23,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/scrollycoding/package.json b/packages/scrollycoding/package.json
@@ -22,7 +22,7 @@
     "@code-hike/mini-browser": "^0.3.0-next.0",
     "@code-hike/mini-editor": "^0.3.0-next.0",
     "@code-hike/scroller": "^0.3.0-next.0",
-    "@codesandbox/sandpack-react": "^0.0.1",
+    "@codesandbox/sandpack-react": "0.1.2",
     "object-hash": "^2.1.1",
     "server-side-media-queries-for-react": "^0.0.5"
   },
@@ -34,6 +34,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/scrollycoding/src/editor.tsx b/packages/scrollycoding/src/editor.tsx
@@ -12,12 +12,14 @@ type EditorProps = {
   contentProps: EditorStep
   frameProps: MiniEditorProps["frameProps"]
   codeProps: MiniEditorProps["codeProps"]
+  springConfig: MiniEditorProps["springConfig"]
 }
 
 function Editor({
   contentProps,
   codeProps,
   frameProps,
+  springConfig,
 }: EditorProps) {
   const finalFrameProps = {
     button: <CodeSandboxIcon url={useCodeSandboxLink()} />,
@@ -33,6 +35,7 @@ function Editor({
       {...contentProps}
       frameProps={finalFrameProps}
       codeProps={finalCodeProps}
+      springConfig={springConfig}
     />
   )
 }
diff --git a/packages/scrollycoding/src/focus.tsx b/packages/scrollycoding/src/focus.tsx
@@ -103,9 +103,8 @@ function useEditorStep(
 ): [number, EditorStep] {
   // we merge the editor state from the step with the changes
   // requested by the Focus
+  const { stepIndex, editorStep } = useStepData()
   return React.useMemo(() => {
-    const { stepIndex, editorStep } = useStepData()
-
     const fileName = file || editorStep.northPanel.active
     const fileIndex = editorStep.files.findIndex(
       f => f.name === fileName
diff --git a/packages/scrollycoding/src/hike.tsx b/packages/scrollycoding/src/hike.tsx
@@ -141,6 +141,7 @@ function useStepsFromChildren({
           ...editorProps?.frameProps,
           ...stepFrameProps,
         },
+        springConfig: editorProps?.springConfig,
       },
       previewPreset: preset,
       previewProps: {
diff --git a/packages/sim-user/package.json b/packages/sim-user/package.json
@@ -22,6 +22,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/smooth-code/package.json b/packages/smooth-code/package.json
@@ -28,6 +28,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/smooth-column/package.json b/packages/smooth-column/package.json
@@ -23,6 +23,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/smooth-lines/package.json b/packages/smooth-lines/package.json
@@ -23,6 +23,9 @@
   ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
diff --git a/packages/storybook/src/scrollycoding.story.js b/packages/storybook/src/scrollycoding.story.js
@@ -82,10 +82,12 @@ function Hike({ codeProps, ...props }) {
     <HikeComponent
       {...props}
       preset={preset}
-      codeProps={{
-        minColumns: 46,
-        minZoom: 0.9,
-        ...codeProps,
+      editorProps={{
+        codeProps: {
+          minColumns: 40,
+          minZoom: 0.9,
+          ...codeProps,
+        },
       }}
     />
   )
diff --git a/yarn.lock b/yarn.lock
