diff --git a/.gitignore b/.gitignore index d5e3b11..2659df7 100644 --- a/.gitignore +++ b/.gitignore @@ -66,6 +66,4 @@ typings/ .env .next dist/ -.gitignore -.docz/ -/docz.config.js +.next/ diff --git a/README.md b/README.md deleted file mode 100644 index c173293..0000000 --- a/README.md +++ /dev/null @@ -1,91 +0,0 @@ -# Tesseract Web - React Common - -Common front-end components for Web using the [Tesseract design system](https://make.modal.sh/tesseract/design), written for [React](https://reactjs.org). - -Package: - -[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common) -[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions) - -Dependencies: - -[![React](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=react&kind=peerDependencies)](https://github.com/facebook/react) -[![Styled Components](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=styled-components&kind=peerDependencies)](https://github.com/styled-components/styled-components) -[![TypeScript](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=typescript&kind=devDependencies)](https://github.com/microsoft/typescript) -[![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest) -[![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup) - -## Installation - -Since this package resides in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/), you may need to -adjust configuration in your chosen package manager. - -With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file: - -``` -"@tesseract-design:registry" "https://js.pack.modal.sh/" -``` - -Then, install the package by running the following command: - -```shell script -yarn add @tesseract-design/react-common -``` - -## Usage - -The package includes components as named exports. Simply import the components you need individually or use a namespace -import, like so: - -```jsx harmony -import * as React from 'react' -import ReactDOM from 'react-dom' -import * as T from '@tesseract-design/react-common' - -const LoginForm = etcProps => ( -
-
- - Log In - -
- -
-
- -
-
- - Log In - -
-
-
-) - -const mountNode = window.document.createElement('div') - -ReactDOM.render( - , - mountNode, -) - -window.document.body.appendChild(mountNode) -``` - -Detailed usage guides can be found in the [Tesseract Design - React Common documentation](https://make.modal.sh/tesseract/web/react/common). - -## TypeScript - -The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the -compiled source. - diff --git a/README.md b/README.md new file mode 120000 index 0000000..f0e93b5 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +packages/react-common-docs/src/pages/index.md \ No newline at end of file diff --git a/package.json b/package.json index f69519f..0bbaac0 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "license": "MIT", "private": false, "devDependencies": { + "@babel/runtime": "^7.12.5", + "@reach/slider": "^0.10.5", "@rollup/plugin-typescript": "^5.0.2", "@types/enzyme": "^3.10.5", "@types/enzyme-adapter-react-16": "^1.0.6", @@ -29,23 +31,20 @@ "jest-axe": "3.4.0", "jest-enzyme": "7.1.2", "jest-extended": "0.11.5", + "pascal-case": "3.1.1", "plop": "2.6.0", "prettier": "1.19.1", - "react-is": "^16.13.1", + "prop-types": "15.7.2", + "react": "16.13.1", + "react-dom": "16.13.1", + "react-feather": "2.0.3", "rollup": "^2.23.0", "rollup-plugin-peer-deps-external": "2.2.2", "rollup-plugin-terser": "5.3.0", + "styled-components": "5.1.0", "ts-jest": "^26.1.3", "tslib": "^2.0.0", - "typescript": "^3.9.7", - "@reach/slider": "^0.10.5", - "docz": "^2.3.1", - "pascal-case": "3.1.1", - "prop-types": "15.7.2", - "react": "16.13.1", - "react-dom": "16.13.1", - "react-feather": "2.0.3", - "styled-components": "5.1.0" + "typescript": "^3.9.7" }, "scripts": { "prepublishOnly": "NODE_ENV=production rm -rf dist/ && rollup -c", @@ -64,5 +63,6 @@ "react-feather": "2.0.3", "styled-components": "5.1.0" }, - "homepage": "https://make.modal.sh/tesseract/web/react/common" + "homepage": "https://make.modal.sh/tesseract/web/react/common", + "dependencies": {} } diff --git a/packages/react-common-docs/README.md b/packages/react-common-docs/README.md deleted file mode 100644 index 4b5c883..0000000 --- a/packages/react-common-docs/README.md +++ /dev/null @@ -1,30 +0,0 @@ -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 index 25d2665..a5ef71b 100644 --- a/packages/react-common-docs/brand.tsx +++ b/packages/react-common-docs/brand.tsx @@ -1,9 +1,40 @@ -const Brand = () => ( -
- - Tesseract - -
-) +import * as React from 'react' +import styled from 'styled-components' +import pkg from '../../package.json' + +const Base = styled('div')({ + position: 'relative', +}) + +const Title = styled('strong')({ + fontSize: '2rem', + fontFamily: 'var(--font-family-headings), sans-serif', + fontWeight: 'var(--font-weight-headings, 400)', + lineHeight: 'var(--line-height-headings, 1.5)', + fontStretch: 'var(--font-stretch-headings, normal)', + textTransform: 'lowercase', + whiteSpace: 'nowrap', +}) + +const Subtitle = styled('small')({ + position: 'absolute', + bottom: '-1em', + right: 0, + fontWeight: 'bolder', +}) + +const Brand = () => { + const name = pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name + return ( + + + {name} + + + v.{pkg.version} + + + ) +} export default Brand diff --git a/packages/react-common-docs/next.config.js b/packages/react-common-docs/next.config.js index 54c2c26..d24602c 100644 --- a/packages/react-common-docs/next.config.js +++ b/packages/react-common-docs/next.config.js @@ -1,6 +1,25 @@ +const path = require('path') + const withMDX = require('next-mdx-frontmatter')({ extension: /\.mdx?$/ }) -module.exports = withMDX({ + +const e = withMDX({ pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'] }) + +module.exports = { + ...e, + webpack(...args) { + const oldWebpack = e.webpack(...args) + const [config, { defaultLoaders, }] = args + + config.module.rules.push({ + test: /\.(ts|tsx)$/, + include: [path.resolve(__dirname, '../react-common/')], + use: [defaultLoaders.babel], + }) + + return oldWebpack + } +} diff --git a/packages/react-common-docs/package.json b/packages/react-common-docs/package.json index 91728c6..e6e2c4b 100644 --- a/packages/react-common-docs/package.json +++ b/packages/react-common-docs/package.json @@ -3,14 +3,16 @@ "version": "0.1.0", "private": true, "scripts": { + "predev": "./scripts/docgen", "dev": "next dev", + "prebuild": "./scripts/docgen", "build": "next build", + "prestart": "./scripts/docgen", "start": "next start", - "docgen": "node scripts/docgen.js" + "docgen": "./scripts/docgen" }, "dependencies": { "@mdx-js/loader": "^1.6.19", - "@tesseract-design/react-common": "^0.2.1", "next": "10.0.1", "next-mdx-frontmatter": "^0.0.3", "pascal-case": "^3.1.1", diff --git a/packages/react-common-docs/public/theme/dark.css b/packages/react-common-docs/public/theme/dark.css index 6131033..5d8daf0 100644 --- a/packages/react-common-docs/public/theme/dark.css +++ b/packages/react-common-docs/public/theme/dark.css @@ -78,6 +78,9 @@ font-stretch: var(--font-stretch-base, normal); font-weight: var(--font-weight-base, 400); line-height: var(--line-height-base, 2); + transition-property: color, background-color; + transition-timing-function: ease; + transition-duration: 350ms; } h1 { diff --git a/packages/react-common-docs/scripts/docgen.js b/packages/react-common-docs/scripts/docgen old mode 100644 new mode 100755 similarity index 97% rename from packages/react-common-docs/scripts/docgen.js rename to packages/react-common-docs/scripts/docgen index 59e8125..78ebe5e --- a/packages/react-common-docs/scripts/docgen.js +++ b/packages/react-common-docs/scripts/docgen @@ -1,3 +1,5 @@ +#!/usr/bin/env node + const docgen = require('react-docgen-typescript') const path = require('path') const fs = require('fs') diff --git a/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx b/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx index 505b4b7..c7ea6f7 100644 --- a/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx +++ b/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import * as PropTypes from 'prop-types' import styled from 'styled-components' -import { Icon } from '@tesseract-design/react-common' +import { Icon } from '../../../../react-common/src' const Image = styled('img')({ display: 'block', diff --git a/packages/react-common-docs/src/components/Nav/Nav.tsx b/packages/react-common-docs/src/components/Nav/Nav.tsx index dad668f..1415a35 100644 --- a/packages/react-common-docs/src/components/Nav/Nav.tsx +++ b/packages/react-common-docs/src/components/Nav/Nav.tsx @@ -16,7 +16,7 @@ const Container = styled('span')({ margin: '0 0 0 auto', boxSizing: 'border-box', '@media (min-width: 720px)': { - maxWidth: 360, + maxWidth: 'var(--max-width)', }, }) diff --git a/packages/react-common-docs/src/components/NavLink/NavLink.tsx b/packages/react-common-docs/src/components/NavLink/NavLink.tsx index ec80f59..3c20273 100644 --- a/packages/react-common-docs/src/components/NavLink/NavLink.tsx +++ b/packages/react-common-docs/src/components/NavLink/NavLink.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import * as PropTypes from 'prop-types' import styled from 'styled-components' -import { Icon } from '@tesseract-design/react-common' +import { Icon } from '../../../../react-common/src' import MenuGraphics, { propTypes as menuGraphicsPropTypes } from '../MenuGraphics/MenuGraphics' const Link = styled('a')({ diff --git a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx index 6b868e1..0d414c4 100644 --- a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx +++ b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx @@ -1,12 +1,15 @@ +import { Icon } from '../../../../react-common/src' +import pkg from '../../../../../package.json' import styled from 'styled-components' -import Nav from '../Nav/Nav' import Link from 'next/link' import * as React from 'react' +import Nav from '../Nav/Nav' const StyledLink = styled('a')({ display: 'block', textDecoration: 'none', - marginBottom: '2rem', + marginTop: '3rem', + marginBottom: '3rem', }) const Container = styled('span')({ @@ -17,11 +20,12 @@ const Container = styled('span')({ margin: '0 0 0 auto', boxSizing: 'border-box', '@media (min-width: 720px)': { - maxWidth: 360, + maxWidth: 'var(--max-width)', }, }) const Base = styled('aside')({ + '--max-width': 240, position: 'fixed', top: 0, left: '-100%', @@ -29,55 +33,96 @@ const Base = styled('aside')({ height: '100%', backgroundColor: 'var(--color-bg)', zIndex: 4, + transitionProperty: 'color, background-color', + transitionTimingFunction: 'ease', + transitionDuration: '350ms', '@media (min-width: 720px)': { left: 0, - width: `${100 / 3}%`, + width: `${100 / 4}%`, maxWidth: 'none', height: '100%', '+ *': { - paddingLeft: `${100 / 3}%`, + paddingLeft: `${100 / 4}%`, boxSizing: 'border-box', }, }, }) +const Actions = styled('div')({ + marginBottom: '4rem', + display: 'flex', + gap: '1rem', + alignItems: 'center', +}) + +const ToggleWrapper = styled('label')({ + cursor: 'pointer', + color: 'var(--color-accent)', + display: 'inline-block', +}) + +const ToggleIcon = styled('span')({ + +}) + +const ToggleInput = styled('input')({ + position: 'absolute', + left: -999999, +}) + const NavWrapper = styled('nav')({ '--size-link': '3rem', }) +const RepoLink = styled('a')({ + display: 'inline-grid', + width: '1.5rem', + height: '1.5rem', + placeContent: 'center', +}) + const Sidebar = ({ data, brand: Brand, + initialTheme = 'Dark', }) => { - const [dark, setDark] = React.useState(false) - - const toggleDarkMode = (b: boolean) => () => { - setDark(b) + const [theme, setTheme] = React.useState(initialTheme) + const toggleDarkMode = (b: string) => () => { + setTheme(b) } React.useEffect(() => { - const stylesheets = Array.from(window.document.querySelectorAll('link[title]')) + let storageTheme = window.localStorage.getItem('tesseract-theme') + || ( + window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'Dark' + : 'Light' + ) + window.localStorage.setItem('tesseract-theme', storageTheme) + setTimeout(() => { + setTheme(storageTheme) + }) + }, []) + + React.useEffect(() => { + window.localStorage.setItem('tesseract-theme', theme) + }, [theme]) + React.useEffect(() => { + const stylesheets = Array.from(window.document.querySelectorAll('link[title]')) as HTMLLinkElement[] stylesheets.forEach(s => { - if (s.getAttribute('rel').includes('alternate')) { - s.setAttribute('rel', 'stylesheet') + const enabled = s.title === theme + s.setAttribute('rel', enabled ? 'stylesheet' : 'alternate stylesheet') + if (enabled) { s.removeAttribute('disabled') } else { - s.setAttribute('rel', 'alternate stylesheet') s.setAttribute('disabled', 'disabled') } }) - }, [dark]) + }, [theme]) return ( - - - + + + + + + { + theme === 'Dark' + && ( + + ) + } + { + theme === 'Light' + && ( + + ) + } + + + + + + +