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 0000000..4965832 Binary files /dev/null and b/packages/react-common-docs/public/favicon.ico differ diff --git a/packages/react-common-docs/public/global.css b/packages/react-common-docs/public/global.css new file mode 100644 index 0000000..a9d61e3 --- /dev/null +++ b/packages/react-common-docs/public/global.css @@ -0,0 +1,52 @@ +body { + margin: 0; +} + +h1 { + font-size: 3em; + text-transform: lowercase; +} + +h2 { + font-size: 2em; + text-transform: lowercase; +} + +h3 { + font-size: 1.75em; + text-transform: lowercase; +} + +h4 { + text-transform: lowercase; +} + +h5 { + text-transform: lowercase; +} + +h6 { + text-transform: lowercase; +} + +p { + margin: 2em 0; +} + +small { + font-size: 0.75em; +} + +a:focus { + color: var(--color-active); + outline: 0; +} + +::selection { + background-color: var(--color-active); + color: var(--color-fg); +} + +:root { + caret-color: var(--color-active); +} diff --git a/packages/react-common-docs/public/theme/dark.css b/packages/react-common-docs/public/theme/dark.css new file mode 100644 index 0000000..fb7acc1 --- /dev/null +++ b/packages/react-common-docs/public/theme/dark.css @@ -0,0 +1,127 @@ +@font-face { + font-family: 'Encode Sans'; + font-stretch: semi-expanded; + font-weight: 400; + src: + local('Encode Sans Semi Expanded'), + local('Encode Sans'); +} + +@font-face { + font-family: 'Encode Sans'; + font-stretch: semi-expanded; + font-weight: 700; + src: + local('Encode Sans Semi Expanded Bold'), + local('Encode Sans Semi Expanded'), + local('Encode Sans'); +} + +@font-face { + font-family: 'Encode Sans'; + font-stretch: condensed; + font-weight: 100; + src: + local('Encode Sans Condensed Thin'), + local('Encode Sans Condensed'), + local('Encode Sans'); +} + +@font-face { + font-family: 'Encode Sans'; + font-stretch: condensed; + font-weight: 200; + src: + local('Encode Sans Condensed ExtraLight'), + local('Encode Sans Condensed Extra Light'), + local('Encode Sans Condensed'), + local('Encode Sans'); +} + +@font-face { + font-family: 'Encode Sans'; + font-stretch: condensed; + font-weight: 300; + src: + local('Encode Sans Condensed Light'), + local('Encode Sans Condensed'), + local('Encode Sans'); +} + +:root { + --color-active: #f90; + --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui; + --font-stretch-base: semi-expanded; + --font-weight-base: 400; + --line-height-base: 2; + --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui; + --font-stretch-headings: condensed; + --font-weight-headings: 100; + --line-height-headings: 1.5; + --font-family-monospace: 'mononoki'; + --font-size-root: 16px; + --color-negative: #222; + --color-positive: #eee; + --color-accent: #C78AB3; + --opacity-light: 0.25; + --opacity-lighter: 0.5; + --opacity-lightest: 0.75; +} + +:root { + --color-bg: var(--color-negative, white); + --color-fg: var(--color-positive, black); + background-color: var(--color-bg); + color: var(--color-fg); + font-size: var(--font-size-root); + font-family: var(--font-family-base), sans-serif; + font-stretch: var(--font-stretch-base, normal); + font-weight: var(--font-weight-base, 400); + line-height: var(--line-height-base, 2); +} + +h1 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h2 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h3 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h4 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h5 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h6 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +a { + color: var(--color-accent); +} diff --git a/packages/react-common-docs/public/theme/light.css b/packages/react-common-docs/public/theme/light.css new file mode 100644 index 0000000..2a7f432 --- /dev/null +++ b/packages/react-common-docs/public/theme/light.css @@ -0,0 +1,138 @@ +@font-face { + font-family: 'Encode Sans'; + font-stretch: semi-expanded; + font-weight: 400; + src: + local('Encode Sans Semi Expanded'), + local('Encode Sans'); +} + +@font-face { + font-family: 'Encode Sans'; + font-stretch: semi-expanded; + font-weight: 700; + src: + local('Encode Sans Semi Expanded Bold'), + local('Encode Sans Semi Expanded'), + local('Encode Sans'); +} + +@font-face { + font-family: 'Encode Sans'; + font-stretch: condensed; + font-weight: 100; + src: + local('Encode Sans Condensed Thin'), + local('Encode Sans Condensed'), + local('Encode Sans'); +} + +@font-face { + font-family: 'Encode Sans'; + font-stretch: condensed; + font-weight: 200; + src: + local('Encode Sans Condensed ExtraLight'), + local('Encode Sans Condensed Extra Light'), + local('Encode Sans Condensed'), + local('Encode Sans'); +} + +@font-face { + font-family: 'Encode Sans'; + font-stretch: condensed; + font-weight: 300; + src: + local('Encode Sans Condensed Light'), + local('Encode Sans Condensed'), + local('Encode Sans'); +} + +:root { + --color-negative: #eee; + --color-positive: #222; + --color-accent: #ba6a9c; + --color-active: #f90; + --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui; + --font-stretch-base: semi-expanded; + --font-weight-base: 400; + --line-height-base: 2; + --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui; + --font-stretch-headings: condensed; + --font-weight-headings: 100; + --line-height-headings: 1.5; + --font-family-monospace: 'mononoki'; + --font-size-root: 16px; + --opacity-light: 0.5; + --opacity-lighter: 0.75; + --opacity-lightest: 0.875; +} + +/*@media (prefers-color-scheme: dark) {*/ +/* :root {*/ +/* --color-negative: #222;*/ +/* --color-positive: #eee;*/ +/* --color-accent: #C78AB3;*/ +/* --opacity-light: 0.25;*/ +/* --opacity-lighter: 0.5;*/ +/* --opacity-lightest: 0.75;*/ +/* }*/ +/*}*/ + +:root { + --color-bg: var(--color-negative, white); + --color-fg: var(--color-positive, black); + background-color: var(--color-bg); + color: var(--color-fg); + font-size: var(--font-size-root); + font-family: var(--font-family-base), sans-serif; + font-stretch: var(--font-stretch-base, normal); + font-weight: var(--font-weight-base, 400); + line-height: var(--line-height-base, 2); +} + +h1 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h2 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h3 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h4 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h5 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h6 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +a { + color: var(--color-accent); +} diff --git a/packages/react-common-docs/public/vercel.svg b/packages/react-common-docs/public/vercel.svg new file mode 100644 index 0000000..fbf0e25 --- /dev/null +++ b/packages/react-common-docs/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ 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 => ( +