theme-ui - npm Package Compare versions

Comparing version 0.0.0-5 to 0.0.0-6

index.js

@@ -1,8 +0,130 @@
-import React from 'react'
-import { ComponentProvider } from 'emotion-mdx'
+import React, { useContext } from 'react'
+import { jsx } from '@emotion/core'
+import { ThemeProvider as EmotionProvider } from 'emotion-theming'
+import { MDXProvider } from '@mdx-js/react'
 import css from '@styled-system/css'
+import merge from 'lodash.merge'
+import get from 'lodash.get'
 
 export { css } from '@styled-system/css'
-export { Context, Styled } from 'emotion-mdx'
 
+const tags = [
+  'p',
+  'a',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'img',
+  'pre',
+  'code',
+  'ol',
+  'ul',
+  'li',
+  'blockquote',
+  'hr',
+  'em',
+  'table',
+  'tr',
+  'th',
+  'td',
+  'em',
+  'strong',
+  'delete',
+  // mdx
+  'wrapper',
+  'inlineCode',
+  'thematicBreak',
+  // extras
+  'div',
+]
+
+const aliases = {
+  inlineCode: 'code',
+  thematicBreak: 'hr',
+  wrapper: 'div',
+}
+
+const alias = n => aliases[n] || n
+
+const themed = key => theme => theme.css(get(theme, `styles.${key}`))(theme)
+
+const styled = (tag, key) => ({ as = tag, ...props }) => jsx(alias(as), {
+  ...props,
+  css: themed(key)
+})
+
+const components = {}
+
+export const Styled = React.forwardRef(({
+  tag = 'div',
+  ...props
+}, ref) => {
+  const components = useComponents()
+  const type = components[tag] || 'div'
+  return jsx(type, { ...props, ref })
+})
+
+const createStyled = tag => React.forwardRef((props, ref) =>
+  jsx(Styled, { ref, tag, ...props })
+)
+
+tags.forEach(tag => {
+  components[tag] = styled(tag, tag)
+  Styled[tag] = createStyled(tag)
+})
+
+const createComponents = (components = {}) => {
+  const next = {}
+  Object.keys(components).forEach(key => {
+    next[key] = styled(components[key], key)
+    Styled[key] = createStyled(key)
+  })
+  return next
+}
+
+const noop = n => () => n
+
+const baseContext = {
+  theme: {
+    css: noop,
+  },
+  components,
+}
+
+export const Context = React.createContext(baseContext)
+
+export const ComponentProvider = ({
+  theme,
+  components,
+  transform,
+  ...props
+}) => {
+  const outer = useContext(Context)
+  const context = merge({}, outer, {
+    theme: merge({}, theme, {
+      css: transform,
+    }),
+    components: createComponents(components),
+  })
+
+  return (
+    <EmotionProvider theme={context.theme}>
+      <MDXProvider components={context.components}>
+        <Context.Provider value={context}>
+          {props.children}
+        </Context.Provider>
+      </MDXProvider>
+    </EmotionProvider>
+  )
+}
+
+export const useComponents = () => {
+  const context = useContext(Context)
+  return context.components
+}
+
+// This could be removed, but keeping the theme-ui API intact
 export const ThemeProvider = props =>
@@ -9,0 +131,0 @@ <ComponentProvider

layout.js

 import React from 'react'
 import { css } from './index'
 
-// todo...
+// todo
 export const Box = props =>
   <div
     {...props}
-    css={theme => css({
+    css={(theme) => css({
       boxSizing: 'border-box',
@@ -10,0 +10,0 @@ minWidth: 0,

package.json

 {
   "name": "theme-ui",
-  "version": "0.0.0-5",
+  "version": "0.0.0-6",
   "main": "index.js",
@@ -11,7 +11,6 @@ "author": "Brent Jackson <[e-mail]>",
   "dependencies": {
-    "@emotion/core": "^10.0.10",
     "@styled-system/css": "^1.0.3",
     "css-what": "^2.1.3",
-    "emotion-mdx": "^1.0.0-6",
-    "emotion-theming": "^10.0.10",
+    "jest-emotion": "^10.0.10",
+    "lodash.get": "^4.4.2",
     "lodash.merge": "^4.6.1",
@@ -25,6 +24,17 @@ "styled-system": "^4.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@emotion/core": "^10.0.10",
+    "@mdx-js/mdx": "^1.0.0-rc.0",
+    "@mdx-js/react": "^1.0.0-rc.0",
+    "emotion-theming": "^10.0.10",
     "jest": "^24.7.0",
     "jest-emotion": "^10.0.10",
+    "react-test-renderer": "^16.8.6",
     "typography-theme-wordpress-2016": "^0.16.19"
+  },
+  "peerDependencies": {
+    "@emotion/core": "^10.0.10",
+    "@mdx-js/mdx": "^1.0.0-rc.0",
+    "@mdx-js/react": "^1.0.0-rc.0",
+    "emotion-theming": "^10.0.10"
   }
 }

typography.js

@@ -19,3 +19,3 @@ // based on https://github.com/jxnblk/typography-mdx
         // todo...
-        console.log('!TAG', selector, parent.type)
+        // console.log('!TAG', selector, parent.type)
         return
@@ -22,0 +22,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

559770

increased by9856.78%

Number of package files

6

increased by20%

Lines of code

222

increased by91.38%

Worsened metrics

Dependency count

11

increased by37.5%

Dev dependency count

11

increased by83.33%

Dependency changes

• + Addedjest-emotion@^10.0.10

• + Addedlodash.get@^4.4.2

• + Added@types/jest@23.3.14(transitive)

• + Addedatob@2.1.2(transitive)

• + Addedcss@2.2.4(transitive)

• + Addeddecode-uri-component@0.2.2(transitive)

• + Addedjest-emotion@10.0.32(transitive)

• + Addedresolve-url@0.2.1(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsource-map-resolve@0.5.3(transitive)

• + Addedsource-map-url@0.4.1(transitive)

• + Addedurix@0.1.0(transitive)

• - Removed@emotion/core@^10.0.10

• - Removedemotion-mdx@^1.0.0-6

• - Removedemotion-theming@^10.0.10

• - Removed@emotion/is-prop-valid@0.8.8(transitive)

• - Removed@emotion/styled@10.3.0(transitive)

• - Removed@emotion/styled-base@10.3.0(transitive)

• - Removedemotion-mdx@1.0.0-6(transitive)