Merge pull request #38 from code-hike/better-tab-styles

Improve editor tab styles

Author: pomber

external/new-react-website

@@ -8,10 +8,11 @@
   },
   "scripts": {
     "build": "lerna run --stream x -- build",
-    "watch": "lerna run --since HEAD --parallel x -- watch",
+    "watch": "lerna run --since HEAD --exclude-dependents --parallel x -- watch",
     "watch-package": "lerna run --scope @*/mini-frame --include-dependencies --parallel x -- watch",
     "watch-all": "lerna run --parallel x -- watch",
     "storybook": "lerna run --scope storybook start --stream",
+    "dev": "lerna run --scope react-website dev --stream",
     "release": "auto shipit"
   },
   "devDependencies": {

package.json

@@ -38,7 +38,6 @@ function EditorFrame({
           files={files}
           active={active}
           button={button}
-          classes={classes}
         />
       }
       classes={classes}
@@ -55,13 +54,11 @@ type TabsContainerProps = {
   files: string[]
   active: string
   button?: React.ReactNode
-  classes?: Classes
 }
 function TabsContainer({
   files,
   active,
   button,
-  classes,
 }: TabsContainerProps) {
   const c = useClasser("ch-editor-tab")
   return (
@@ -70,6 +67,7 @@ function TabsContainer({
       {files.map(fileName => (
         <div
           key={fileName}
+          title={fileName}
           className={c(
             "",
             fileName === active ? "active" : "inactive"

packages/mini-editor/src/editor-frame.tsx

@@ -7,7 +7,7 @@
   border-right: 1px solid rgb(37, 37, 38);
   width: 120px;
   min-width: fit-content;
-  flex-shrink: 0;
+  flex-shrink: 1;
   position: relative;
   display: flex;
   white-space: nowrap;
@@ -18,11 +18,13 @@
   padding-right: 15px;
   background-color: rgb(45, 45, 45);
   color: rgba(255, 255, 255, 0.5);
+  min-width: 0;
 }
 
 .ch-editor-tab-active {
   background-color: rgb(30, 30, 30);
   color: rgb(255, 255, 255);
+  min-width: unset;
 }
 
 .ch-editor-tab > div {
@@ -31,6 +33,7 @@
   font-size: 12px;
   line-height: 1.4em;
   text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 /** body */

packages/mini-editor/src/index.scss

@@ -1,21 +1,22 @@
 {
   "name": "storybook",
   "private": true,
+  "version": "0.3.0-next.0",
   "scripts": {
     "start": "start-storybook -c ./src",
     "build": "build-storybook -c ./src -o ./dist"
   },
   "dependencies": {
-    "@code-hike/mini-browser": "0.0.0-4333a8b",
-    "@code-hike/mini-frame": "0.0.0-4333a8b",
-    "@code-hike/mini-terminal": "0.0.0-4333a8b",
-    "@code-hike/player": "0.0.0-4333a8b",
-    "@code-hike/scroller": "0.0.0-4333a8b",
-    "@code-hike/scrollycoding": "0.0.0-4333a8b",
-    "@code-hike/sim-user": "0.0.0-4333a8b",
-    "@code-hike/smooth-column": "0.0.0-4333a8b",
-    "@code-hike/smooth-lines": "0.0.0-4333a8b",
-    "@code-hike/code-diff": "0.0.0-4333a8b",
+    "@code-hike/mini-browser": "0.3.0-next.0",
+    "@code-hike/mini-frame": "0.3.0-next.0",
+    "@code-hike/mini-terminal": "0.3.0-next.0",
+    "@code-hike/player": "0.3.0-next.0",
+    "@code-hike/scroller": "0.3.0-next.0",
+    "@code-hike/scrollycoding": "0.3.0-next.0",
+    "@code-hike/sim-user": "0.3.0-next.0",
+    "@code-hike/smooth-column": "0.3.0-next.0",
+    "@code-hike/smooth-lines": "0.3.0-next.0",
+    "@code-hike/code-diff": "0.3.0-next.0",
     "@storybook/addon-actions": "^6.0.26",
     "@storybook/addon-controls": "^6.0.26",
     "@storybook/addon-docs": "^6.0.26",

packages/storybook/package.json

@@ -280,6 +280,63 @@ function CodeSandboxIcon() {
   )
 }
 
+export const manyTabs = () => {
+  return (
+    <Page>
+      <h2>Three tabs</h2>
+      <MiniEditor
+        style={{ height: 200 }}
+        lang="js"
+        file="index.js"
+        steps={[{ code: code1 }]}
+        progress={0}
+        tabs={["index.js", "two.css", "three.html"]}
+      />
+      <h2>With button</h2>
+      <MiniEditor
+        style={{ height: 200 }}
+        lang="js"
+        file="index.js"
+        steps={[{ code: code1 }]}
+        progress={0}
+        tabs={["index.js", "two.css", "three.html"]}
+        button={<CodeSandboxIcon />}
+      />
+      <h2>Long name</h2>
+      <MiniEditor
+        style={{ height: 200 }}
+        lang="js"
+        file="index-with-long-name.js"
+        steps={[{ code: code1 }]}
+        progress={0}
+        tabs={[
+          "index-with-long-name.js",
+          "two.css",
+          "three.html",
+        ]}
+        button={<CodeSandboxIcon />}
+      />
+      <h2>Six tabs</h2>
+      <MiniEditor
+        style={{ height: 200 }}
+        lang="js"
+        file="two.js"
+        steps={[{ code: code1 }]}
+        progress={0}
+        tabs={[
+          "index.js",
+          "two.js",
+          "three.html",
+          "four.js",
+          "five.css",
+          "six.html",
+        ]}
+        button={<CodeSandboxIcon />}
+      />
+    </Page>
+  )
+}
+
 export const x = () => {
   return (
     <WithProgress length={xprops.steps.length}>