feat: add react bindings

emdgroup-liquid · Sep 21, 2021 · b1cc028 · b1cc028
1 parent f3d2420
commit b1cc028
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,4 +28,9 @@ UserInterfaceState.xcuserstate
 
 src/**/components.d.ts
 
+# Stencil React bindings
+src/react.js
+src/react.d.ts
+src/react-component-lib
+
 .husky
diff --git a/package.json b/package.json
@@ -28,11 +28,12 @@
     "dist/"
   ],
   "scripts": {
-    "build": "run-s build:stencil:components build:styles build:copy_design_tokens build:copy_tailwind_preset",
+    "build": "run-s build:stencil:components build:stencil:react build:styles build:copy_design_tokens build:copy_tailwind_preset",
     "build:docs": "run-s build:stencil:docs build:eleventy build:styles:docs:docs",
     "build:eleventy": "dotenv -e .env -- npx @11ty/eleventy",
     "build:stencil:components": "stencil build && shx mv tmp/web-components.html-data.json dist/web-components.html-data.json && shx rm -r tmp",
     "build:stencil:docs": "stencil build --config=stencil.config.docs.ts",
+    "build:stencil:react": "tsc -p tsconfig.react.json && (shx rm src/react.ts & shx rm src/react.js & shx rm src/react.d.ts & shx rm -r src/react-component-lib)",
     "build:styles": "run-p build:styles:liquid:*",
     "build:styles:liquid:components": "postcss 'src/liquid/components/**/*.css' --no-map -d dist/css/ && trash dist/css/liquid.css 'dist/css/*.shadow.css' ; cat dist/css/*.css > dist/css/liquid.css",
     "build:styles:liquid:globals": "postcss src/liquid/global/styles/global.css --no-map -o dist/css/liquid.global.css",
@@ -83,8 +84,11 @@
     "@semantic-release/git": "^9.0.0",
     "@stencil/eslint-plugin": "^0.3.1",
     "@stencil/postcss": "^2.0.0",
+    "@stencil/react-output-target": "^0.0.9",
     "@types/jest": "^26.0.24",
     "@types/puppeteer": "^5.4.0",
+    "@types/react": "^17.0.16",
+    "@types/react-dom": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
     "chokidar-cli": "^2.1.0",
@@ -154,5 +158,9 @@
   },
   "browserslist": [
     "supports es6-module and supports css-variables and last 2 versions"
-  ]
+  ],
+  "optionalDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
 }
diff --git a/src/docs/pages/react-bindings.md b/src/docs/pages/react-bindings.md
@@ -0,0 +1,34 @@
+---
+eleventyNavigation:
+  key: React bindings
+  parent: Introduction
+  order: 7
+layout: layout.njk
+title: React bindings
+permalink: introduction/react-bindings/
+---
+
+
+# React Bindings
+
+Setting event listeners via `on<EventName>`-prop on Liquid Oxygen Web Components does not work properly in React. For this reason, we provide special React bindings for Liquid Oxygen. They allow you to set event listeners via prop just like you are used to do in React without having to use `reference`.
+
+All you need to do is to import and use the React binding of a Liquid Oxygen component instead of using the web component directly.
+
+```js
+import { LdButton } from '@emdgroup-liquid/liquid/dist/react'
+
+export default ({ buttonProps }) => (
+  {/* ... */}
+  <LdButton {...buttonProps} />
+  {/* ... */}
+)
+```
+
+## Custom Elements are defined automatically
+
+A positive side-effect of using React bindings is, that you do not need to call the `defineCustomElements` method manually, as the React bindings automatically take care of that.
+
+For more details on React integration read the [Stencil documentation](https://stenciljs.com/docs/react).
+
+<docs-page-nav prev-href="introduction/server-side-rendering/" next-title="Tailwind CSS integration" next-href="introduction/tailwindcss-integration/"></docs-page-nav>
diff --git a/src/docs/pages/sandbox-applications.md b/src/docs/pages/sandbox-applications.md
@@ -2,7 +2,7 @@
 eleventyNavigation:
   key: Sandbox applications
   parent: Introduction
-  order: 8
+  order: 9
 layout: layout.njk
 title: Sandbox applications
 permalink: introduction/sandbox-applications/

diff --git a/src/docs/pages/server-side-rendering.md b/src/docs/pages/server-side-rendering.md
@@ -66,4 +66,4 @@ return (
 )
 ```
 
-<docs-page-nav prev-href="introduction/type-checking-and-intellisense/" next-title="Tailwind CSS Integration" next-href="introduction/tailwindcss-integration/"></docs-page-nav>
+<docs-page-nav prev-href="introduction/type-checking-and-intellisense/" next-title="React bindings" next-href="introduction/react-bindings/"></docs-page-nav>
diff --git a/src/docs/pages/tailwindcss-integration.md b/src/docs/pages/tailwindcss-integration.md
@@ -2,7 +2,7 @@
 eleventyNavigation:
   key: Tailwind CSS integration
   parent: Introduction
-  order: 7
+  order: 8
 layout: layout.njk
 title: Tailwind CSS integration
 permalink: introduction/tailwindcss-integration/
@@ -42,4 +42,4 @@ module.exports = {
 
 Maybe you don't want to use the preset and want to build your own config from scratch. Or you are using something other than Tailwind for the same purpose. In such cases you might want to access Liquid's design tokens (colors, spacings etc.) as "raw data". You can do so by importing the bundled design token file under `@emdgroup-liquid/liquid/dist/css/design-tokens.json`.
 
-<docs-page-nav prev-href="introduction/server-side-rendering/" next-title="Sandbox applications" next-href="introduction/sandbox-applications/"></docs-page-nav>
+<docs-page-nav prev-href="introduction/react-bindings/" next-title="Sandbox applications" next-href="introduction/sandbox-applications/"></docs-page-nav>
diff --git a/src/liquid/components/ld-toggle/ld-toggle.css b/src/liquid/components/ld-toggle/ld-toggle.css
@@ -8,18 +8,18 @@
   height: var(--ld-toggle-height);
   min-width: auto !important;
   position: relative;
-  /* animations triggered by user interactions on single component instances are probably not a performance issue */
-  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
-  transition: background-color 200ms ease-in-out;
   width: var(--ld-toggle-width);
 
   input {
+    appearance: none;
     background-color: var(--ld-col-rblck4);
     border-radius: var(--ld-br-full);
-    appearance: none;
+    height: 100%;
     position: absolute;
+    /* animations triggered by user interactions on single component instances are probably not a performance issue */
+    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
+    transition: background-color 200ms ease-in-out;
     width: 100%;
-    height: 100%;
     z-index: 0;
     margin: 0;
 

diff --git a/stencil.config.ts b/stencil.config.ts
@@ -1,12 +1,18 @@
 import { Config } from '@stencil/core'
 import { postcss } from '@stencil/postcss'
+import { reactOutputTarget } from '@stencil/react-output-target'
 import postcssConfig from './postcss.config'
 
 export const config: Config = {
   namespace: 'liquid',
   srcDir: 'src/liquid',
   globalStyle: 'src/liquid/global/styles/global.css',
   outputTargets: [
+    reactOutputTarget({
+      componentCorePackage: '..',
+      proxiesFile: './src/react.ts',
+      includeDefineCustomElements: true,
+    }),
     {
       type: 'dist',
     },

diff --git a/tsconfig.react.json b/tsconfig.react.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "jsxFactory": "React.createElement",
+    "outDir": "dist"
+  },
+  "include": ["./src/react.ts"],
+  "exclude": ["node_modules", "./src/liquid/**/*.a11y.ts"]
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1167,6 +1167,11 @@
   dependencies:
     postcss "~8.2.1"
 
+"@stencil/react-output-target@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@stencil/react-output-target/-/react-output-target-0.0.9.tgz#b225611c5743f0285c37d92bb47d9369ba462c54"
+  integrity sha512-t2sSkm/VGftBqewK47eZonaHIXW7CYWlsDy6Ln4jqNVpr93CuPWkg7rsnPiZrJrU1NBuTgA0hC2xoRcAJVm7Sw==
+
 "@stroncium/procfs@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@stroncium/procfs/-/procfs-1.2.1.tgz#6b9be6fd20fb0a4c20e99a8695e083c699bb2b45"
@@ -1318,6 +1323,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.3.tgz#ef65165aea2924c9359205bf748865b8881753c0"
   integrity sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA==
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
 "@types/puppeteer@^5.4.0":
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-5.4.3.tgz#cdca84aa7751d77448d8a477dbfa0af1f11485f2"
@@ -1330,11 +1340,32 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-dom@^17.0.9":
+  version "17.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
+  integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^17.0.16":
+  version "17.0.16"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.16.tgz#056f40c45645761527baeb7d89d842a6abdf285a"
+  integrity sha512-3kCUiOOlQTwUUvjNFkbBTWMTxdTGybz/PfjCw9JmaRGcEDBQh+nGMg7/E9P2rklhJuYVd25IYLNcvqgSPCPksg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/retry@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/stack-utils@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
@@ -3473,6 +3504,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
 csv-generate@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/csv-generate/-/csv-generate-3.4.0.tgz#360ed73ef8ec7119515a47c3bd5970ac4b988f00"
@@ -7422,7 +7458,7 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -10145,6 +10181,15 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10155,6 +10200,14 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -10679,6 +10732,14 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 section-matter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,4 +66,4 @@ return ( @@
     )
     ```
-    <docs-page-nav prev-href="introduction/type-checking-and-intellisense/" next-title="Tailwind CSS Integration" next-href="introduction/tailwindcss-integration/"></docs-page-nav>
+    <docs-page-nav prev-href="introduction/type-checking-and-intellisense/" next-title="React bindings" next-href="introduction/react-bindings/"></docs-page-nav>