diff --git a/core/docz-components/README.md b/core/docz-components/README.md index 697c66e50..6bf15dc5e 100644 --- a/core/docz-components/README.md +++ b/core/docz-components/README.md @@ -1,11 +1,10 @@ -# TSDX React User Guide +# Docz Components -Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it. - -> This TSDX setup is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`. +React components used by `docz` and `gatsby-theme-docz`. > If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/) + ## Commands TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`. @@ -51,12 +50,10 @@ This is the folder structure we set up for you: package.json tsconfig.json /src - index.tsx # EDIT THIS -/test - blah.test.tsx # EDIT THIS + index.tsx .gitignore package.json -README.md # EDIT THIS +README.md tsconfig.json ``` @@ -114,25 +111,6 @@ npm start # or yarn start The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**! -## Deploying the Playground - -The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`): - -```bash -cd example # if not already in the example folder -npm run build # builds to dist -netlify deploy # deploy the dist folder -``` - -Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify: - -```bash -netlify init -# build command: cd example && yarn && yarn build -# directory to deploy: example/dist -# pick yes for netlify.toml -``` - ## Named Exports Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library. @@ -146,22 +124,3 @@ For vanilla CSS, you can include it at the root directory and add it to the `fil ## Publishing to NPM We recommend using https://github.com/sindresorhus/np. - -## Usage with Lerna - -When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_. - -The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project. - -Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below. - -```diff - "alias": { -- "react": "../node_modules/react", -- "react-dom": "../node_modules/react-dom" -+ "react": "../../../node_modules/react", -+ "react-dom": "../../../node_modules/react-dom" - }, -``` - -An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64) diff --git a/core/docz-components/example/index.tsx b/core/docz-components/example/index.tsx index 5184d226c..a07df20be 100644 --- a/core/docz-components/example/index.tsx +++ b/core/docz-components/example/index.tsx @@ -1,12 +1,22 @@ import 'react-app-polyfill/ie11'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { Playground } from '../'; +import { Playground } from '../dist/'; const App = () => { return (
- asd'} showPlaygroundEditor={true} /> + asd'} + // theme={{ + // styles: [], + // plain: { + // fontFamily: 'Inconsolata', + // fontSize: 308, + // lineHeight: '1.5em', + // }, + // }} + />
); }; diff --git a/core/docz-components/package.json b/core/docz-components/package.json index a15ff31e1..79fc2741c 100644 --- a/core/docz-components/package.json +++ b/core/docz-components/package.json @@ -1,6 +1,6 @@ { "name": "docz-components", - "version": "2.0.0-rc.12", + "version": "2.0.0-rc.16", "main": "dist/index.js", "module": "dist/docz-components.esm.js", "typings": "dist/index.d.ts", @@ -44,12 +44,14 @@ "dependencies": { "@emotion/core": "^10.0.16", "@mdx-js/react": "^1.4.0", + "@theme-ui/typography": "^0.2.34", "copy-text-to-clipboard": "^2.1.0", "lodash": "^4.17.15", "lodash-es": "^4.17.15", "re-resizable": "^6.0.0", "react-feather": "^2.0.3", "react-live": "^2.2.0", - "theme-ui": "^0.2.38" + "theme-ui": "^0.2.38", + "typography-theme-moraga": "^0.16.19" } } diff --git a/core/docz-components/src/theme/breakpoints.js b/core/docz-components/src/theme/breakpoints.ts similarity index 65% rename from core/docz-components/src/theme/breakpoints.js rename to core/docz-components/src/theme/breakpoints.ts index f9e7e8ec5..a7647d965 100644 --- a/core/docz-components/src/theme/breakpoints.js +++ b/core/docz-components/src/theme/breakpoints.ts @@ -1,5 +1,5 @@ -const em = px => `${px / 16}em`; -const mountMedia = val => `@media screen and (max-width: ${em(val)})`; +const em = (px: number) => `${px / 16}em`; +const mountMedia = (val: number) => `@media screen and (max-width: ${em(val)})`; export const breakpoints = { mobile: 630, diff --git a/core/docz-components/src/theme/colors.js b/core/docz-components/src/theme/colors.ts similarity index 100% rename from core/docz-components/src/theme/colors.js rename to core/docz-components/src/theme/colors.ts diff --git a/core/docz-components/src/theme/global.js b/core/docz-components/src/theme/global.ts similarity index 100% rename from core/docz-components/src/theme/global.js rename to core/docz-components/src/theme/global.ts diff --git a/core/docz-components/src/theme/index.js b/core/docz-components/src/theme/index.ts similarity index 89% rename from core/docz-components/src/theme/index.js rename to core/docz-components/src/theme/index.ts index a7f27bdf5..f11507a46 100644 --- a/core/docz-components/src/theme/index.js +++ b/core/docz-components/src/theme/index.ts @@ -1,15 +1,18 @@ +//@ts-ignore import moraga from 'typography-theme-moraga'; +//@ts-ignore import { toTheme } from '@theme-ui/typography'; import { merge } from 'lodash'; import * as modes from './modes'; import prism from './prism'; +import { Theme } from '../types'; moraga.headerWeight = 700; const typography = toTheme(moraga); -const getTheme = (...args) => - merge(...args, typography, { +const getTheme = (theme?: Theme) => + merge(theme, typography, { prism, initialColorMode: 'light', colors: { @@ -86,7 +89,7 @@ const getTheme = (...args) => py: 3, px: 4, bg: 'blockquote.bg', - borderLeft: t => `5px solid ${t.colors.blockquote.boder}`, + borderLeft: (t: Theme) => `5px solid ${t.colors.blockquote.boder}`, color: 'blockquote.color', fontStyle: 'italic', '> p': { @@ -112,7 +115,7 @@ const getTheme = (...args) => my: 4, borderCollapse: 'separate', borderSpacing: 0, - [['th', 'td']]: { + [['th', 'td'] as any]: { textAlign: 'left', py: '4px', pr: '4px', @@ -131,7 +134,7 @@ const getTheme = (...args) => }, hr: { border: 0, - borderBottom: t => `1px solid ${t.colors.border}`, + borderBottom: (t: Theme) => `1px solid ${t.colors.border}`, }, }, }); diff --git a/core/docz-components/src/theme/modes.js b/core/docz-components/src/theme/modes.ts similarity index 100% rename from core/docz-components/src/theme/modes.js rename to core/docz-components/src/theme/modes.ts diff --git a/core/docz-components/src/theme/prism/dark.js b/core/docz-components/src/theme/prism/dark.ts similarity index 100% rename from core/docz-components/src/theme/prism/dark.js rename to core/docz-components/src/theme/prism/dark.ts diff --git a/core/docz-components/src/theme/prism/index.js b/core/docz-components/src/theme/prism/index.ts similarity index 100% rename from core/docz-components/src/theme/prism/index.js rename to core/docz-components/src/theme/prism/index.ts diff --git a/core/docz-components/src/theme/prism/light.js b/core/docz-components/src/theme/prism/light.ts similarity index 100% rename from core/docz-components/src/theme/prism/light.js rename to core/docz-components/src/theme/prism/light.ts diff --git a/core/docz-components/src/utils/theme.ts b/core/docz-components/src/utils/theme.ts index b7fc4c3cc..6d2845515 100644 --- a/core/docz-components/src/utils/theme.ts +++ b/core/docz-components/src/utils/theme.ts @@ -1,5 +1,6 @@ import { useThemeUI } from 'theme-ui'; import { get, defaultTo } from 'lodash'; +import getTheme from '../theme/'; export const themeProp = (str: string) => (props: any) => { return get(`theme.${str}`, props); @@ -7,12 +8,11 @@ export const themeProp = (str: string) => (props: any) => { export const usePrismTheme = () => { //@ts-ignore - const { theme, colorMode } = useThemeUI(); + const { theme, colorMode = 'light' } = useThemeUI(); const prismTheme = get(theme, 'prismTheme'); - const themeToUse = defaultTo( prismTheme, - get(prismTheme, `prism.${colorMode}`, theme) + get(theme, `prism.${colorMode}`, get(getTheme(), `prism.${colorMode}`)) ); return themeToUse; }; diff --git a/core/docz/package.json b/core/docz/package.json index d2d978ac4..1e03d6d68 100644 --- a/core/docz/package.json +++ b/core/docz/package.json @@ -1,6 +1,6 @@ { "name": "docz", - "version": "2.0.0-rc.21", + "version": "2.0.0-rc.22", "description": "It's has never been so easy to documents your things!", "license": "MIT", "main": "dist/index.js", @@ -27,7 +27,7 @@ "@mdx-js/react": "^1.0.27", "array-sort": "^1.0.0", "capitalize": "^2.0.0", - "docz-components": "^2.0.0-rc.12", + "docz-components": "^2.0.0-rc.16", "docz-core": "^2.0.0-rc.21", "fast-deep-equal": "^2.0.1", "gatsby": "^2.13.27", diff --git a/yarn.lock b/yarn.lock index 3bbc5d8de..0f9a89bd3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3821,6 +3821,15 @@ dependencies: defer-to-connect "^1.0.1" +"@theme-ui/typography@^0.2.34": + version "0.2.34" + resolved "https://registry.npmjs.org/@theme-ui/typography/-/typography-0.2.34.tgz#ada6b327b4df373a5f5531ae9e53a141a7d1f309" + integrity sha512-auYZb3eUVLIDPnuqR2ekeqM3mYHKxUWWuxaH4DM8ZeIt1xOug9XsxF2S1UJX/pHCXDTVEDO5uiwAbnv7LoW1Zg== + dependencies: + compass-vertical-rhythm "^1.4.5" + modularscale "^2.0.1" + object-assign "^4.1.1" + "@theme-ui/typography@^0.2.5": version "0.2.5" resolved "https://registry.npmjs.org/@theme-ui/typography/-/typography-0.2.5.tgz#1553c5daf0ac23bf113eca4810bfb8692edeb96b" @@ -8548,6 +8557,42 @@ docz-core@2.0.0-rc.2: xstate "^4.6.7" yargs "^13.3.0" +docz-core@2.0.0-rc.6: + version "2.0.0-rc.6" + resolved "https://registry.npmjs.org/docz-core/-/docz-core-2.0.0-rc.6.tgz#ed3221575e16edf9b2cf27456fdd1cce7d3f11aa" + integrity sha512-sAW9KQxpp/fQFGL3GMRJzO7fiqVoGVhqZ4Geq4UD5Ex1vHfKBwq8/5NRdRj0O0rmKXwmZ64ulvfaSqwF+2Z6/Q== + dependencies: + "@sindresorhus/slugify" "^0.9.1" + chalk "^2.4.2" + chokidar "^3.0.2" + detect-port "^1.3.0" + docz-utils "^2.0.0-rc.1" + env-dot-prop "^2.0.1" + fast-deep-equal "^2.0.1" + fast-glob "^3.0.4" + find-up "^4.1.0" + fs-extra "^8.1.0" + get-pkg-repo "^4.1.0" + humanize-string "^2.1.0" + latest-version "^5.1.0" + load-cfg "^2.0.0-rc.1" + lodash "^4.17.14" + minimatch "^3.0.4" + ora "^3.4.0" + react-docgen "^4.1.1" + react-docgen-actual-name-handler "^2.0.0-rc.1" + react-docgen-external-proptypes-handler "^1.0.3" + react-docgen-typescript "^1.12.5" + recast "^0.18.1" + resolve "^1.11.1" + shelljs "^0.8.3" + signale "^1.4.0" + titleize "^2.1.0" + typescript "3.5.3" + wait-on "^3.3.0" + xstate "^4.6.7" + yargs "^13.3.0" + docz@2.0.0-rc.2: version "2.0.0-rc.2" resolved "https://registry.npmjs.org/docz/-/docz-2.0.0-rc.2.tgz#842f1ffb97c6c53cd110592d9aa7dd2d649632ec" @@ -8567,6 +8612,46 @@ docz@2.0.0-rc.2: ulid "^2.3.0" yargs "^13.3.0" +docz@2.0.0-rc.9: + version "2.0.0-rc.9" + resolved "https://registry.npmjs.org/docz/-/docz-2.0.0-rc.9.tgz#e3874c8efa66619e7d19ac9d1664aba3c09853c1" + integrity sha512-3tMx4jxoV9WQd+ZMg3zmKXwK+tX48RZgBpVH3pEtcuUrTJM15Ze+J+VJnlK0L+SvZ9wNr8bMdR2s/g8PJANA+Q== + dependencies: + "@mdx-js/react" "^1.0.27" + array-sort "^1.0.0" + capitalize "^2.0.0" + docz-core "2.0.0-rc.6" + fast-deep-equal "^2.0.1" + gatsby "^2.13.27" + lodash "^4.17.14" + marksy "^8.0.0" + match-sorter "^3.1.1" + prop-types "^15.7.2" + scheduler "^0.15.0" + ulid "^2.3.0" + yargs "^13.3.0" + +docz@next: + version "2.0.0-rc.21" + resolved "https://registry.npmjs.org/docz/-/docz-2.0.0-rc.21.tgz#fedbf2f9caa5eb88e1f079f9b1448ce267ecbcf5" + integrity sha512-i//HOYCkLDD/qdvNjC7SkYea37FeNGtkdlw9N72Cr3fH16LTB+zIuMnbXPajlHX2KszPYo+MlZWQERECF0160w== + dependencies: + "@emotion/core" "^10.0.16" + "@mdx-js/react" "^1.0.27" + array-sort "^1.0.0" + capitalize "^2.0.0" + docz-components "^2.0.0-rc.12" + docz-core "^2.0.0-rc.21" + fast-deep-equal "^2.0.1" + gatsby "^2.13.27" + lodash "^4.17.14" + marksy "^8.0.0" + match-sorter "^3.1.1" + prop-types "^15.7.2" + scheduler "^0.15.0" + ulid "^2.3.0" + yargs "^13.3.0" + dom-converter@^0.2: version "0.2.0" resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"