From 36954ed21cf5a16d2757a434c5de416b8e8570a4 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Sat, 7 Nov 2020 22:04:57 +0800 Subject: [PATCH 1/6] Add Next.js + MDX support Implement Next.js MDX Separate the docs from the code and tests. --- jest.config.js | 4 +- lib/components/Checkbox/Checkbox.mdx | 25 - lib/components/Icon/Icon.mdx | 20 - lib/components/RadioButton/RadioButton.mdx | 32 - lib/components/Select/Select.mdx | 45 - lib/components/TextInput/TextInput.mdx | 71 - lib/services/isEmpty.test.ts | 42 - packages/react-common-docs/README.md | 30 + packages/react-common-docs/brand.tsx | 9 + packages/react-common-docs/next-env.d.ts | 2 + packages/react-common-docs/next.config.js | 6 + packages/react-common-docs/package.json | 19 + packages/react-common-docs/public/favicon.ico | Bin 0 -> 15086 bytes packages/react-common-docs/public/global.css | 52 + .../react-common-docs/public/theme/dark.css | 127 + .../react-common-docs/public/theme/light.css | 138 + packages/react-common-docs/public/vercel.svg | 4 + .../react-common-docs/src/components/Nav.tsx | 91 + .../src/components/Playground.tsx | 47 + .../src/components/Sidebar.tsx | 96 + packages/react-common-docs/src/pages/_app.tsx | 35 + .../react-common-docs/src/pages/_document.tsx | 45 + .../src/pages/components}/Button.mdx | 21 +- .../src/pages/components/Checkbox.mdx | 26 + .../src/pages/components/Icon.mdx | 21 + .../src/pages/components/RadioButton.mdx | 33 + .../src/pages/components/Select.mdx | 46 + .../src/pages/components}/Slider.mdx | 17 +- .../src/pages/components/TextInput.mdx | 78 + packages/react-common-docs/src/pages/index.md | 1 + .../react-common-docs/src/pages}/theming.md | 0 packages/react-common-docs/src/sidebar.json | 18 + packages/react-common-docs/tsconfig.json | 37 + packages/react-common-docs/yarn.lock | 6489 +++++++++++++++++ .../components/Button/Button.test.tsx | 2 +- .../components/Button/Button.tsx | 0 .../components/Checkbox/Checkbox.test.tsx | 2 +- .../components/Checkbox/Checkbox.tsx | 0 .../components/Icon/Icon.test.tsx | 2 +- .../react-common}/components/Icon/Icon.tsx | 0 .../RadioButton/RadioButton.test.tsx | 2 +- .../components/RadioButton/RadioButton.tsx | 0 .../components/Select/Select.test.tsx | 2 +- .../components/Select/Select.tsx | 0 .../components/Slider/Slider.test.tsx | 2 +- .../components/Slider/Slider.tsx | 0 .../components/TextInput/TextInput.test.tsx | 2 +- .../components/TextInput/TextInput.tsx | 0 {lib => packages/react-common}/index.test.ts | 2 +- {lib => packages/react-common}/index.ts | 0 .../react-common/services/isEmpty.test.ts | 40 + .../react-common}/services/isEmpty.ts | 0 .../services/splitValueAndUnit.test.ts | 0 .../services/splitValueAndUnit.ts | 0 .../react-common}/services/stringify.test.ts | 2 +- .../react-common}/services/stringify.ts | 0 .../react-common}/services/utilities.ts | 0 plopfile.js | 2 +- rollup.config.js | 2 +- 59 files changed, 7524 insertions(+), 265 deletions(-) delete mode 100644 lib/components/Checkbox/Checkbox.mdx delete mode 100644 lib/components/Icon/Icon.mdx delete mode 100644 lib/components/RadioButton/RadioButton.mdx delete mode 100644 lib/components/Select/Select.mdx delete mode 100644 lib/components/TextInput/TextInput.mdx delete mode 100644 lib/services/isEmpty.test.ts create mode 100644 packages/react-common-docs/README.md create mode 100644 packages/react-common-docs/brand.tsx create mode 100644 packages/react-common-docs/next-env.d.ts create mode 100644 packages/react-common-docs/next.config.js create mode 100644 packages/react-common-docs/package.json create mode 100644 packages/react-common-docs/public/favicon.ico create mode 100644 packages/react-common-docs/public/global.css create mode 100644 packages/react-common-docs/public/theme/dark.css create mode 100644 packages/react-common-docs/public/theme/light.css create mode 100644 packages/react-common-docs/public/vercel.svg create mode 100644 packages/react-common-docs/src/components/Nav.tsx create mode 100644 packages/react-common-docs/src/components/Playground.tsx create mode 100644 packages/react-common-docs/src/components/Sidebar.tsx create mode 100644 packages/react-common-docs/src/pages/_app.tsx create mode 100644 packages/react-common-docs/src/pages/_document.tsx rename {lib/components/Button => packages/react-common-docs/src/pages/components}/Button.mdx (83%) create mode 100644 packages/react-common-docs/src/pages/components/Checkbox.mdx create mode 100644 packages/react-common-docs/src/pages/components/Icon.mdx create mode 100644 packages/react-common-docs/src/pages/components/RadioButton.mdx create mode 100644 packages/react-common-docs/src/pages/components/Select.mdx rename {lib/components/Slider => packages/react-common-docs/src/pages/components}/Slider.mdx (68%) create mode 100644 packages/react-common-docs/src/pages/components/TextInput.mdx create mode 120000 packages/react-common-docs/src/pages/index.md rename {docs => packages/react-common-docs/src/pages}/theming.md (100%) create mode 100644 packages/react-common-docs/src/sidebar.json create mode 100644 packages/react-common-docs/tsconfig.json create mode 100644 packages/react-common-docs/yarn.lock rename {lib => packages/react-common}/components/Button/Button.test.tsx (98%) rename {lib => packages/react-common}/components/Button/Button.tsx (100%) rename {lib => packages/react-common}/components/Checkbox/Checkbox.test.tsx (96%) rename {lib => packages/react-common}/components/Checkbox/Checkbox.tsx (100%) rename {lib => packages/react-common}/components/Icon/Icon.test.tsx (94%) rename {lib => packages/react-common}/components/Icon/Icon.tsx (100%) rename {lib => packages/react-common}/components/RadioButton/RadioButton.test.tsx (97%) rename {lib => packages/react-common}/components/RadioButton/RadioButton.tsx (100%) rename {lib => packages/react-common}/components/Select/Select.test.tsx (97%) rename {lib => packages/react-common}/components/Select/Select.tsx (100%) rename {lib => packages/react-common}/components/Slider/Slider.test.tsx (97%) rename {lib => packages/react-common}/components/Slider/Slider.tsx (100%) rename {lib => packages/react-common}/components/TextInput/TextInput.test.tsx (98%) rename {lib => packages/react-common}/components/TextInput/TextInput.tsx (100%) rename {lib => packages/react-common}/index.test.ts (92%) rename {lib => packages/react-common}/index.ts (100%) create mode 100644 packages/react-common/services/isEmpty.test.ts rename {lib => packages/react-common}/services/isEmpty.ts (100%) rename {lib => packages/react-common}/services/splitValueAndUnit.test.ts (100%) rename {lib => packages/react-common}/services/splitValueAndUnit.ts (100%) rename {lib => packages/react-common}/services/stringify.test.ts (96%) rename {lib => packages/react-common}/services/stringify.ts (100%) rename {lib => packages/react-common}/services/utilities.ts (100%) diff --git a/jest.config.js b/jest.config.js index 5e77eb6..4df51b0 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,8 +5,8 @@ module.exports = { './jest.setup.ts', ], collectCoverageFrom: [ - './lib/**/*.{ts,tsx}', - '!./lib/**/*.stories.{ts,tsx}' + './packages/**/*.{ts,tsx}', + '!./packages/**/*.stories.{ts,tsx}' ], preset: 'ts-jest', testTimeout: 30000, diff --git a/lib/components/Checkbox/Checkbox.mdx b/lib/components/Checkbox/Checkbox.mdx deleted file mode 100644 index 81d5bd9..0000000 --- a/lib/components/Checkbox/Checkbox.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -name: Checkbox -route: /components/checkbox -menu: Components ---- - -import { Playground, Props, Link } from 'docz' -import Checkbox from './Checkbox' - -# Checkbox - -Component for values that have an on/off state. - - - - - -## Props - - - -## See Also - -- Select for a similar component suitable for selecting more values. -- RadioButton for a similar component on selecting a single value among very few choices. diff --git a/lib/components/Icon/Icon.mdx b/lib/components/Icon/Icon.mdx deleted file mode 100644 index 261ea08..0000000 --- a/lib/components/Icon/Icon.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -name: Icon -route: /components/icon -menu: Components ---- - -import { Playground, Props } from 'docz' -import Icon from './Icon' - -# Icon - -Component for displaying graphics. - - - - - -## Props - - diff --git a/lib/components/RadioButton/RadioButton.mdx b/lib/components/RadioButton/RadioButton.mdx deleted file mode 100644 index 6b5f662..0000000 --- a/lib/components/RadioButton/RadioButton.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -name: RadioButton -route: /components/radiobutton -menu: Components ---- - -import { Playground, Props, Link } from 'docz' -import RadioButton from './RadioButton' - -# RadioButton - -Component for values which are to be selected from a few list of options. - - -
-
- -
-
- -
-
- - -## Props - - - -## See Also - -- Checkbox for a similar component on selecting values among very few choices. -- Select for a similar component suitable for selecting more values. diff --git a/lib/components/Select/Select.mdx b/lib/components/Select/Select.mdx deleted file mode 100644 index 35a1a80..0000000 --- a/lib/components/Select/Select.mdx +++ /dev/null @@ -1,45 +0,0 @@ ---- -name: Select -route: /components/select -menu: Components ---- - -import { Playground, Props, Link } from 'docz' -import Select from './Select' - -# Select - -Component for selecting values from a larger number of options. - - - - - -## Props - - - -## Usage Notes - -The component will behave as `block`, i.e. it takes the remaining of the horizontal space. -To use the component together with layouts, see [TextInput](./textinput) for examples. Both `Select` and -`TextInput` have similar strategies on usage with layouts. - -## See Also - -- Checkbox for a similar component on selecting values among very few choices. -- RadioButton for a similar component on selecting a single value among very few choices. diff --git a/lib/components/TextInput/TextInput.mdx b/lib/components/TextInput/TextInput.mdx deleted file mode 100644 index a7178bd..0000000 --- a/lib/components/TextInput/TextInput.mdx +++ /dev/null @@ -1,71 +0,0 @@ ---- -name: TextInput -route: /components/textinput -menu: Components ---- - -import { Playground, Props, Link } from 'docz' -import TextInput from './TextInput' - -# TextInput - -Component for inputting textual values. - - - - - -## Props - - - -## Usage Notes - -The component will behave as `block`, i.e. it takes the remaining of the horizontal space. -To use the component together with layouts, see the following examples. - -### Inline - -The components are surrounded by `inline-block` elements. These surrounding elements have specified widths, which could -act as guide to the user on how long the expected input values are. - - -
- I am and I live in . -
- - -### Grid - -It is advisable to put surrounding elements instead of the `TextInput` components themselves as children of the -element specified as `grid`. This is to be able to add complementing content to the components, if for example there are -some content that is best displayed outside the component instead of putting in the `hint` prop. - - -
-
- -
-
- -
-
- -
-
- -
-
- - - Consult the fees table for shipping fee details. - -
-
- - -## See Also - -- Select for a graphically-similar component suitable for selecting more values. diff --git a/lib/services/isEmpty.test.ts b/lib/services/isEmpty.test.ts deleted file mode 100644 index 4837494..0000000 --- a/lib/services/isEmpty.test.ts +++ /dev/null @@ -1,42 +0,0 @@ -import * as fc from 'fast-check' -import isEmpty from './isEmpty' - -describe('lib/services/isEmpty', () => { - it('should exist', () => { - expect(isEmpty).toBeDefined() - }) - - it('should be a function', () => { - expect(isEmpty).toBeFunction() - }) - - it('should accept 1 argument', () => { - expect(isEmpty).toHaveLength(1) - }) - - it('should return a boolean value', () => { - fc.assert( - fc.property(fc.anything(), (v) => { - expect(typeof isEmpty(v)).toBe('boolean') - }), - ) - }) - - describe('on arguments', () => { - it('should return `true` on an argument with value of `undefined`', () => { - expect(isEmpty(undefined)).toBe(true) - }) - - it('should return `true` on an argument with value of `null`', () => { - expect(isEmpty(null)).toBe(true) - }) - - it('should return `false` on an argument with value that is neither `undefined` nor `null`', () => { - fc.assert( - fc.property(fc.anything().filter((v) => typeof v !== 'undefined' && v !== null), (v) => { - expect(isEmpty(v)).toBe(false) - }), - ) - }) - }) -}) diff --git a/packages/react-common-docs/README.md b/packages/react-common-docs/README.md new file mode 100644 index 0000000..4b5c883 --- /dev/null +++ b/packages/react-common-docs/README.md @@ -0,0 +1,30 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/packages/react-common-docs/brand.tsx b/packages/react-common-docs/brand.tsx new file mode 100644 index 0000000..25d2665 --- /dev/null +++ b/packages/react-common-docs/brand.tsx @@ -0,0 +1,9 @@ +const Brand = () => ( +
+ + Tesseract + +
+) + +export default Brand diff --git a/packages/react-common-docs/next-env.d.ts b/packages/react-common-docs/next-env.d.ts new file mode 100644 index 0000000..7b7aa2c --- /dev/null +++ b/packages/react-common-docs/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/packages/react-common-docs/next.config.js b/packages/react-common-docs/next.config.js new file mode 100644 index 0000000..54c2c26 --- /dev/null +++ b/packages/react-common-docs/next.config.js @@ -0,0 +1,6 @@ +const withMDX = require('next-mdx-frontmatter')({ + extension: /\.mdx?$/ +}) +module.exports = withMDX({ + pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'] +}) diff --git a/packages/react-common-docs/package.json b/packages/react-common-docs/package.json new file mode 100644 index 0000000..26bbfcc --- /dev/null +++ b/packages/react-common-docs/package.json @@ -0,0 +1,19 @@ +{ + "name": "react-common-docs", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@mdx-js/loader": "^1.6.19", + "@tesseract-design/react-common": "^0.2.1", + "next": "10.0.1", + "next-mdx-frontmatter": "^0.0.3", + "pascalcase": "^1.0.0", + "react-live": "^2.2.3", + "styled-components": "^5.2.1" + } +} diff --git a/packages/react-common-docs/public/favicon.ico b/packages/react-common-docs/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a GIT binary patch literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*- + + \ No newline at end of file diff --git a/packages/react-common-docs/src/components/Nav.tsx b/packages/react-common-docs/src/components/Nav.tsx new file mode 100644 index 0000000..db5e171 --- /dev/null +++ b/packages/react-common-docs/src/components/Nav.tsx @@ -0,0 +1,91 @@ +import * as React from 'react' +import Link from 'next/link' +import styled from 'styled-components' + +const StyledLink = styled('a')({ + display: 'block', + textDecoration: 'none', +}) + +const Container = styled('span')({ + display: 'flex', + alignItems: 'center', + padding: '0 1rem', + height: '2rem', + margin: '0 0 0 auto', + '@media (min-width: 720px)': { + maxWidth: 360, + }, +}) + +const HeaderContainer = styled(Container)({ + marginTop: '2rem', +}) + +const NavContainer = styled('div')({ + +}) + +const Nav = ({ + data, +}) => { + if (Array.isArray(data)) { + return ( + + { + data.map(d => ( +