feat(tabs): Implement a couple of features and fix bugs of tabs (#47)

* feat(tabs): fix/add feature to the Tabs component

fix props data flow, fix children synchronization, add custom border

* refactor(development): better dev/doc experience

We can development component seperately, indipendent of doc and generate doc automatically

* docs(tabs): add docs

each playground is in seperate folder

* test(tabs): remove invalid test

* fix(tabs): unidentified ts build error

* fix(tabs): fix ts error

Fix forwardRef error so that Callers can recognize ref properfly; come up with a better way to
extend Component

* feat(tabs): add controlled componet style

Just identify controlled component has some valid use case

* test(tabs): improve coverage

remove useTabs; add test case

* style(tabs): ts lint

add file to lint in tsConfig

* test(tabs): update snapshot

* feat(tabs): style is more customizable

* feat(tabs): seperate label and bottom

* feat(playground): load component as playground

* feat(tabs and playground): add playground loader; Add useImperative for Tabs; Add examples

Add examples using loader

* fix: fix a syntax error due to merge possibly

* test(tabs): add coverage

Add test for individual component which are not possible covered by main component

* feat(navigation): app Navigation Component

* test(add expects to test): add expect

* test(add expects to test): add expect

* fix(tabs): use variables in style

* fix(tabs): changes names to handle

* fix(tabs): fix merge conflict

* docs(tabs): rename files

* docs(tabs): update docs to conform with API

* fix(tabs): types defination

* test(tabs): add coverage

* test(tabs): update sanpshot

* fix(tabs): update snapshot

* fix(tabs): change nav from a function to a component

* fix(tabs): change nav from a function to a component

* fix(tabs): fix styles

* fix(tabs): fix styles

* fix(tabs): match design color

* style(tabs): changes some inlie styles to css

* style(tabs): fix colors

* test(tabs): unpdate snapshot

* style(tabs): change file name

* style(tabs): change file name

* fix(tabs): fix code review

* style(tabs): fix tabs

* feat(tabs): update the snapshot

* refactor(tabs): style.ts

* feat(tabs): remove code folder from ignore listy

* chore(github): update codeowners

* test(tabs): add a expect in a test case

* test(tabs): use snapshot

Co-authored-by: Chao Zhou <zctocm@gmail.com>
Co-authored-by: yqrashawn <namy.19@gmail.com>

.eslintignore

@@ -6,4 +6,6 @@ esm/*
 public/*
 scripts/*
 tests/*
+loaders/*
+# pages/code/*
 *.config.js

.eslintrc.js

@@ -10,10 +10,12 @@ module.exports = {
   },
   parserOptions: {
     project: './tsconfig.json',
+    projectFolderIgnoreList: ['/node_modules/'],
     ecmaFeatures: {
       jsx: true,
     },
   },
+
   rules: {
     indent: 0,
     '@typescript-eslint/indent': 0,

.github/CODEOWNERS

@@ -13,6 +13,7 @@ components/message/* @chain-txz
 components/button-group/* @chain-txz
 components/popover/* @yqrashawn
 components/tag/* @yqrashawn
+components/tabs/* @GuichiZhao
 
 pages/*/components/input.mdx @yqrashawn
 pages/*/components/textarea.mdx @yqrashawn
@@ -23,4 +24,5 @@ pages/*/components/modal.mdx @angelia-yuqi-personal
 pages/*/components/button.mdx @chain-txz
 pages/*/components/tooltip.mdx @yqrashawn
 pages/*/components/popover.mdx @yqrashawn
-pages/*/components/tag.mdx @yqrashawn
+pages/*/components/tag.mdx @yqrashawn
+pages/*/components/tabs.mdx @GuichiZhao

.vscode/launch.json

@@ -4,6 +4,20 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Launch via NPM",
+      "request": "launch",
+      "runtimeArgs": [
+        "run-script",
+        "docs-collect"
+      ],
+      "runtimeExecutable": "npm",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "type": "pwa-node"
+    },
+
     {
       "type": "node",
       "name": "vscode-jest-tests",

components/index.ts

@@ -6,7 +6,6 @@ export { default as ZeitProvider } from './zeit-provider'
 export { default as CssBaseline } from './css-baseline'
 export { default as useMessages } from './use-messages'
 export { default as useToasts } from './use-toasts'
-export { default as useTabs } from './tabs/use-tabs'
 export { default as useBodyScroll } from './use-body-scroll'
 export { default as useClickAway } from './use-click-away'
 export { default as useClipboard } from './use-clipboard'

components/link/__tests__/__snapshots__/index.test.tsx.snap

@@ -186,7 +186,7 @@ exports[`Link should render correctly 1`] = `
           .link :global(.right) {
             margin-right: 0;
           }
-        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\"><span class=\\"icon left\\"><svg viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg><style>
+        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\"><span class=\\"icon left\\"><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"24\\" width=\\"24\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\\"></path></svg><style>
         .icon {
           margin: 0 5px;
           display: inline-flex;
@@ -231,7 +231,7 @@ exports[`Link should render correctly 1`] = `
           .link :global(.right) {
             margin-right: 0;
           }
-        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\">link<span class=\\"icon right\\"><svg viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg><style>
+        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\">link<span class=\\"icon right\\"><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"24\\" width=\\"24\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\\"></path></svg><style>
         .icon {
           margin: 0 5px;
           display: inline-flex;
@@ -276,15 +276,15 @@ exports[`Link should render correctly 1`] = `
           .link :global(.right) {
             margin-right: 0;
           }
-        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\"><span class=\\"icon left\\"><svg viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg><style>
+        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\"><span class=\\"icon left\\"><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"24\\" width=\\"24\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\\"></path></svg><style>
         .icon {
           margin: 0 5px;
           display: inline-flex;
           align-self: center;
           color: currentColor;
           width: 1rem;
         }
-      </style></span>link<span class=\\"icon right\\"><svg viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg><style>
+      </style></span>link<span class=\\"icon right\\"><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"24\\" width=\\"24\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\\"></path></svg><style>
         .icon {
           margin: 0 5px;
           display: inline-flex;

components/select/__tests__/__snapshots__/index.test.tsx.snap

@@ -461,7 +461,7 @@ exports[`Select should render correctly when variant=text 1`] = `
           line-height: calc(2.25 * 16px);
           min-width: 0;
         }
-      </style></span><svg viewBox=\\"0 0 24 24\\" width=\\"18\\" height=\\"18\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M20 6L9 17l-5-5\\"></path></svg></div><style>
+      </style></span><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"18\\" width=\\"18\\" style=\\"color: currentColor;\\"><path d=\\"M20 6L9 17l-5-5\\"></path></svg></div><style>
         .option {
           display: flex;
           max-width: 100%;