merge our change and zeit-ui 1.7.5's change into master

.circleci/config.yml

@@ -1,4 +1,17 @@
-version: 2
+version: 2.1
+workflows:
+  build_test_release:
+    jobs:
+      - test
+      - build
+      - release:
+          requires:
+            - build
+            - test
+          filters:
+            branches:
+              only: /^master|dev|alpha|[0-9]+\.[0-9]+\.x$/
+
 jobs:
   test:
     docker:
@@ -47,9 +60,20 @@ jobs:
           key: v2-dependencies-{{ checksum "package.json" }}
 
       - run: yarn run build
-workflows:
-  version: 2
-  build_and_test:
-    jobs:
-      - test
-      - build
+      - persist_to_workspace:
+          root: .
+          paths:
+            - dist
+            - esm
+
+  release:
+    docker:
+      - image: circleci/node:12.0
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: npx semantic-release

.github/CONTRIBUTING.md

@@ -43,11 +43,15 @@ At any time, you think it's ok, you can start the following steps to submit your
 
 ### Q & A
 
-> I added a new document page, but it was not displayed locally?
+> How to choose the target branch of PR ?
+
+- If this is a `feature`, set to `rc` branch. All the others are set to `master` branch.
+
+> I added a new document page, but it was not displayed locally ?
 
 - Run `yarn dev` agian.
 
-> How can I update remote origin?
+> How can I update remote origin ?
 
 - refer to [here](https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes).
 

.github/ISSUE_TEMPLATE/1-bug-report.md

@@ -3,14 +3,25 @@ name: "Bug report 🐞"
 about: "If something isn't working as expected 🤔."
 ---
 
+<!-- Please do NOT DELETE the template. -->
+<!-- No template issues will be closed. -->
+
 # Bug report 🐞
 
 ## Version & Environment
 
+  - Version of browser
+  - Version of `zeit-ui/react`
 
 ## Expection
 
+The behavior I expect is ...
+
 ## Actual results (or Errors)
 
+I got an error:
 
+```
+code
+```
 

.github/ISSUE_TEMPLATE/2-feature-request.md

@@ -3,19 +3,23 @@ name: "Feature request 🚀"
 about: "I have a suggestion!"
 ---
 
-# Feature request 🚀
+<!-- Please do NOT DELETE the template. -->
+<!-- No template issues will be closed. -->
 
-### Expected:
-  - No breaking changes
+# Feature request 🚀
 
-### Examples:
-```js
-```
+  - [ ] I will create Pull Request
+  - [x] It's just a suggestion
 
-### Programme:
+### Expected
 
-### Others:
+  - Component or something else
 
+### Examples
 
+```jsx
+```
 
+### Programme (Optional)
 
+### Others (Optional)

.github/ISSUE_TEMPLATE/3-docs.md

@@ -0,0 +1,22 @@
+---
+name: "About `docs` 🛠️"
+about: "Issues and feature requests for docs"
+---
+
+<!-- Please do NOT DELETE the template. -->
+<!-- No template issues will be closed. -->
+
+# About `docs`
+
+This is a document site related issue.
+
+### Languages
+
+  - [x] English
+  - [ ] Chinese
+
+### Description
+
+
+### Page Links (Optional)
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,9 +1,7 @@
-## PR Checklist
+## Checklist
 
 - [ ] Fix linting errors
 - [ ] Label has been added
 
-
 ## Change information
 
-

.github/semantic.yml

@@ -0,0 +1,32 @@
+# Always validate the PR title, and ignore the commits
+titleOnly: false
+
+# Always validate all commits, and ignore the PR title
+commitsOnly: false
+
+# Always validate the PR title AND all the commits
+titleAndCommits: true
+
+# By default types specified in commitizen/conventional-commit-types is used.
+# See: https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json
+# You can override the valid types
+types:
+  - feat
+  - fix
+  - docs
+  - style
+  - refactor
+  - perf
+  - test
+  - build
+  - ci
+  - chore
+  - revert
+
+# Allow use of Merge commits (eg on github: "Merge branch 'master' into feature/ride-unicorns")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowMergeCommits: true
+
+# Allow use of Revert commits (eg on github: "Revert "feat: ride unicorns"")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowRevertCommits: true

.jest.config.js

@@ -23,6 +23,18 @@ module.exports = {
     '!components/utils/*',
   ],
 
+  // https://jestjs.io/docs/en/configuration#coveragethreshold-object
+  coverageThreshold: {
+    global: {
+      // meaning of each coverage
+      // https://www.guru99.com/code-coverage.html
+      branches: 96.1,
+      functions: 99.15,
+      lines: 100,
+      statements: 98.78,
+    },
+  },
+
   moduleNameMapper: {
     'tests/(.*)$': '<rootDir>/tests/$1',
     components: '<rootDir>/components/index.ts',

.nvmrc

@@ -0,0 +1 @@
+node

components/auto-complete/auto-complete-item.tsx

@@ -7,6 +7,7 @@ import Ellipsis from '../shared/ellipsis'
 
 interface Props {
   value: string
+  isLabelOnly?: boolean
 }
 
 const defaultProps = {}
@@ -26,6 +27,7 @@ const getSizes = (size: NormalSizes) => {
 const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>> = ({
   value: identValue,
   children,
+  isLabelOnly,
 }) => {
   const theme = useTheme()
   const { value, updateValue, size, updateVisible } = useAutoCompleteContext()
@@ -37,9 +39,20 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
   const isActive = useMemo(() => value === identValue, [identValue, value])
   const fontSize = useMemo(() => getSizes(size), [size])
 
+  // The 'isLabelOnly' is only used inside the component,
+  // Automatically adjust width when only label children is included.
+  const itemHeight = useMemo(() => {
+    if (isLabelOnly) return `calc(1.688 * ${theme.layout.gap})`
+    return 'auto'
+  }, [isLabelOnly, theme.layout.gap])
+
   return (
     <div className={`item ${isActive ? 'active' : ''}`} onClick={selectHandler}>
-      <Ellipsis height={`calc(1.688 * ${theme.layout.gap})`}>{children}</Ellipsis>
+      {isLabelOnly ? (
+        <Ellipsis height={`calc(1.688 * ${theme.layout.gap})`}>{children}</Ellipsis>
+      ) : (
+        children
+      )}
       <style jsx>{`
         .item {
           display: flex;
@@ -49,7 +62,7 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
           white-space: pre;
           font-size: ${fontSize};
           padding: 0 ${theme.layout.gapHalf};
-          height: calc(1.688 * ${theme.layout.gap});
+          height: ${itemHeight};
           background-color: ${theme.palette.background};
           color: ${theme.palette.foreground};
           user-select: none;

components/auto-complete/auto-complete.tsx

@@ -56,7 +56,7 @@ const childrenToOptionsNode = (options: Array<AutoCompleteOption>) =>
     if (React.isValidElement(item)) return React.cloneElement(item, { key })
     const validItem = item as AutoCompleteOption
     return (
-      <AutoCompleteItem key={key} value={validItem.value}>
+      <AutoCompleteItem key={key} value={validItem.value} isLabelOnly>
         {validItem.label}
       </AutoCompleteItem>
     )

components/user/__tests__/index.test.tsx

@@ -35,7 +35,7 @@ describe(' User', () => {
 
   it('should pass alt attribute', () => {
     const wrapper = mount(
-      <User name="witt" src="https://unix.bio/assets/avatar.png" altText="witt"/>
+      <User name="witt" src="https://unix.bio/assets/avatar.png" altText="witt" />,
     )
     expect(wrapper.find('img').prop('alt')).toEqual('witt')
   })

examples/create-next-app/pages/_app.js

@@ -1,11 +1,11 @@
-import { ZeitProvider, CssBaseline } from '@zeit-ui/react';
+import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
 
 function MyApp({ Component, pageProps }) {
   return (
     <ZeitProvider>
       <CssBaseline />
       <Component {...pageProps} />
     </ZeitProvider>
-  );
+  )
 }
-export default MyApp;
+export default MyApp

examples/create-next-app/pages/_document.js

@@ -1,15 +1,10 @@
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from 'next/document';
-import { CssBaseline } from '@zeit-ui/react';
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { CssBaseline } from '@zeit-ui/react'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    const styles = CssBaseline.flush();
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = CssBaseline.flush()
 
     return {
       ...initialProps,
@@ -19,7 +14,7 @@ class MyDocument extends Document {
           {styles}
         </>
       ),
-    };
+    }
   }
 
   render() {
@@ -31,8 +26,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument

examples/create-next-app/pages/index.js

@@ -8,16 +8,16 @@ export default function Home() {
         <title>Create Next App</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-        <Text h1>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </Text>
-        <Card>
-          hello, world. I am using <Code>@zeit-ui/react</Code> !
-        </Card>
-        <Spacer y={1.5} />
-        <Card shadow>
-          <Note type="success">This note details something important.</Note>
-        </Card>
+      <Text h1>
+        Welcome to <a href="https://nextjs.org">Next.js!</a>
+      </Text>
+      <Card>
+        hello, world. I am using <Code>@zeit-ui/react</Code> !
+      </Card>
+      <Spacer y={1.5} />
+      <Card shadow>
+        <Note type="success">This note details something important.</Note>
+      </Card>
     </Page>
   )
 }

examples/tree-shaking-create-react-app/config-overrides.js

@@ -1,6 +1,6 @@
-const { override, fixBabelImports } = require('customize-cra');
- module.exports = override(
-   fixBabelImports('@zeit-ui/react', {
-     libraryDirectory: 'esm',
-   }),
- );
+const { override, fixBabelImports } = require('customize-cra')
+module.exports = override(
+  fixBabelImports('@zeit-ui/react', {
+    libraryDirectory: 'esm',
+  }),
+)

examples/tree-shaking-nextjs/.babelrc

@@ -1,7 +1,5 @@
 {
-  "presets": [
-    "next/babel"
-  ],
+  "presets": ["next/babel"],
   "plugins": [
     [
       "import",