@@ -380,10 +397,10 @@ ReactDOM.render(app, document.getElementById('root'))`,
const app =
ReactDOM.render(app, document.getElementById('root'))`,
- focus: "1:7",
- },
- {
- code: `function MyComponent() {
+ focus: "1:7",
+ },
+ {
+ code: `function MyComponent() {
return (
@@ -398,10 +415,10 @@ ReactDOM.render(app, document.getElementById('root'))`,
const app =
Hello World
ReactDOM.render(app, document.getElementById('root'))`,
- focus: "1:7",
- },
- {
- code: `function MyComponent() {
+ focus: "1:7",
+ },
+ {
+ code: `function MyComponent() {
return (
@@ -414,15 +431,40 @@ ReactDOM.render(app, document.getElementById('root'))`,
const app =
Hello World
ReactDOM.render(app, document.getElementById('root'))`,
- focus: "7",
- },
- {
- code: `const app =
Hello World
+ focus: "7",
+ },
+ {
+ code: `const app =
Hello World
ReactDOM.render(app, document.getElementById('root'))`,
- focus: "1",
- },
- ],
- lang: "jsx",
- file: "index.js",
+ focus: "1",
+ },
+]
+
+function CodeSandboxIcon() {
+ return (
+
+
+
+ )
}
diff --git a/packages/storybook/src/mini-editor-tween.story.js b/packages/storybook/src/mini-editor-tween.story.js
new file mode 100644
index 00000000..aeb9eacd
--- /dev/null
+++ b/packages/storybook/src/mini-editor-tween.story.js
@@ -0,0 +1,283 @@
+import React from "react"
+import { MiniEditorTween } from "@code-hike/mini-editor"
+import { WithProgress } from "./utils"
+import "@code-hike/mini-editor/dist/index.css"
+
+export default {
+ title: "Mini Editor Tween",
+}
+
+export const oneToOne = () => {
+ return (
+ // prettier-ignore
+
+ )
+}
+
+export const oneToOneTabs = () => {
+ return (
+ // prettier-ignore
+
+ )
+}
+
+export const oneToTwoNorth = () => {
+ return (
+ // prettier-ignore
+
+ )
+}
+
+export const oneToTwoSouth = () => {
+ return (
+ // prettier-ignore
+
+ )
+}
+
+export const twoToOneNorth = () => {
+ return (
+ // prettier-ignore
+
+ )
+}
+
+export const twoToOneSouth = () => {
+ return (
+ // prettier-ignore
+
+ )
+}
+
+export const twoToTwo = () => {
+ return (
+
+ )
+}
+
+const files0 = [
+ {
+ name: "foo.js",
+ lang: "js",
+ code: `console.log(foo, 1)`,
+ },
+ {
+ name: "bar.js",
+ lang: "js",
+ code: `console.log(bar, 1)`,
+ },
+ {
+ name: "x.js",
+ lang: "js",
+ code: `console.log(x, 1)`,
+ },
+ {
+ name: "y.js",
+ lang: "js",
+ code: `console.log(y, 1)`,
+ },
+]
+const files1 = [
+ {
+ name: "foo.js",
+ lang: "js",
+ code: `console.log(foo, 2)`,
+ },
+ {
+ name: "bar.js",
+ lang: "js",
+ code: `console.log(bar, 2)`,
+ },
+ {
+ name: "x.js",
+ lang: "js",
+ code: `console.log(x, 2)`,
+ },
+ {
+ name: "y.js",
+ lang: "js",
+ code: `console.log(y, 2)`,
+ },
+]
+
+function TestTransition({
+ tabs,
+ actives = [[], []],
+ ratios = [[], []],
+}) {
+ const [
+ prevNorthTabs,
+ nextNorthTabs,
+ prevSouthTabs,
+ nextSouthTabs,
+ ] = tabs
+ const [
+ [prevNorthActive, nextNorthActive],
+ [prevSouthActive, nextSouthActive],
+ ] = actives
+
+ const [
+ [prevNorthRatio, nextNorthRatio],
+ [prevSouthRatio, nextSouthRatio],
+ ] = ratios
+
+ const prev = {
+ files: files0,
+ northPanel: {
+ tabs: prevNorthTabs,
+ active: prevNorthActive,
+ heightRatio: prevNorthRatio,
+ },
+ southPanel: prevSouthTabs
+ ? {
+ tabs: prevSouthTabs,
+ active: prevSouthActive,
+ heightRatio: prevSouthRatio,
+ }
+ : undefined,
+ }
+ const next = {
+ files: files1,
+ northPanel: {
+ tabs: nextNorthTabs,
+ active: nextNorthActive,
+ heightRatio: nextNorthRatio,
+ },
+ southPanel: nextSouthTabs
+ ? {
+ tabs: nextSouthTabs,
+ active: nextSouthActive,
+ heightRatio: nextSouthRatio,
+ }
+ : undefined,
+ }
+
+ return (
+
+ {(progress, backward) => (
+ <>
+
+
+
+
+ {prevNorthActive}
+
+ {JSON.stringify(prevNorthTabs)}
+ |
+
+ {nextNorthActive}
+
+ {JSON.stringify(nextNorthTabs)}
+ |
+
+
+
+ {prevSouthActive}
+
+ {JSON.stringify(prevSouthTabs)}
+ |
+
+ {nextSouthActive}
+
+ {JSON.stringify(nextSouthTabs)}
+ |
+
+
+
+ )}
+
+ )
+}
diff --git a/packages/storybook/src/mini-editor.story.js b/packages/storybook/src/mini-editor.story.js
index 5559b251..95fca6ff 100644
--- a/packages/storybook/src/mini-editor.story.js
+++ b/packages/storybook/src/mini-editor.story.js
@@ -27,7 +27,12 @@ export const focusEditor = () => {
Focus
-
+
)
}
@@ -47,7 +52,153 @@ export const codeEditor = () => {
Change
+
+ )
+}
+
+export const singlePanelEditor = () => {
+ const [input, setInput] = React.useState(code1)
+ const [code, setCode] = React.useState(code1)
+ const files = [
+ { name: "index.js", lang: "js", code: "" },
+ { name: "app.js", lang: "js", code },
+ ]
+ return (
+
+
+