feat: add react support (#181)

* feat: add react support * refactor: event matches and paths * docs: use baklava in react Co-authored-by: Ali Balbars <[email protected]> * fix: linter * refactor: simplify generate react export script * docs: add cdn example * fix: gitignore * fix: web component multiple register error * docs: usage in react document extended * chore: exclude react from baklava-react bundle * chore: auto generated file excluded from prettier * chore: simplify logic of generate react exports * chore: change build stages * docs: change react doc event names * chore: simplify generate-react-exports.js Co-authored-by: Enes Başpınar <[email protected]> Co-authored-by: Ali Balbars <[email protected]> Co-authored-by: Ali Balbars <[email protected]> Co-authored-by: Murat Çorlu <[email protected]> Co-authored-by: Murat Çorlu <[email protected]>
Trendyol · Aug 4, 2022 · 8887d06 · 8887d06
1 parent b04df4e
commit 8887d06
Show file tree

Hide file tree

Showing 7 changed files with 4,409 additions and 54 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,4 @@ UserInterfaceState.xcuserstate
 src/component-list.json
 coverage/
 build-storybook.log
+baklava-react.ts
diff --git a/.prettierignore b/.prettierignore
@@ -6,6 +6,7 @@ storybook-static/
 custom-elements.json
 component-list.json
 src/components.d.ts
+src/baklava-react.ts
 *.md
 .history/
 package-lock.json

diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx
@@ -0,0 +1,116 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+  title="Frameworks/React"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+# Using Baklava in React
+
+React does not [compatible](https://custom-elements-everywhere.com/#react) with most of the web component features. React passes all props as string to Custom Components so object and array props don't pass in correct way. Also, since React uses its own synthetic event system, it can't listen events that dispatches from Custom Elements. For this reasons, we used [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react) package to convert Custom Elements to React components.
+
+## Using with CDN
+
+Install the NPM package to your project.
+
+```bash
+npm install @trendyol/baklava
+```
+
+Include Baklava library from CDN to your project's `index.html` file's `<head>` section.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/themes/default.css"/>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/baklava.js"></script>
+```
+
+Then you can use Baklava React components in your project by importing them from `@trendyol/baklava/dist/baklava-react` in your code.
+
+```jsx
+import { BlTooltip, BlButton } from "@trendyol/baklava/dist/baklava-react";
+
+function App() {
+  return (
+    <BlTooltip>
+      <BlButton slot="tooltip-trigger" icon="info" text label="Show Info" />
+      Some extra information.
+    </BlTooltip>
+  );
+}
+
+export default App;
+```
+
+By using via CDN, you'll have a very thin React wrapper package in your project bundle, and you'll be able to use Baklava React components in your project with a very fast and optimized CDN. In this way you don't need to do any special thing for including assets.
+
+## Using with NPM
+
+If you want to include Baklava to your project bundle, you can import it via NPM.
+
+Install the NPM package to your project.
+
+```bash
+npm install @trendyol/baklava
+```
+
+Then import Baklava library and styles in a central place of your app. Like `main.jsx` file. You need to use provided `setIconPath` function to set icon location via CDN. Or you can download those icons to your project's asset folder and set the path manually.
+
+```jsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@trendyol/baklava";
+import { setIconPath } from "@trendyol/baklava";
+import "@trendyol/baklava/dist/themes/default.css";
+setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/assets");
+
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+Now you are able to use Baklava React components in your project by importing them from `@trendyol/baklava/dist/baklava-react` in your code.
+
+```jsx
+import { BlTooltip, BlButton } from "@trendyol/baklava/dist/baklava-react";
+
+function App() {
+  return (
+    <BlTooltip>
+      <BlButton slot="tooltip-trigger" icon="info" text label="Show Info" />
+      Some extra information.
+    </BlTooltip>
+  );
+}
+
+export default App;
+```
+
+## Event Handling
+
+Baklava components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the input component emits the `bl-input` event when it receives input. In React, you can listen for the event using `onInput`.
+
+Example:
+
+```jsx
+import { useState } from 'react';
+import { BlInput } from '@trendyol/baklava/dist/baklava-react';
+
+function MyComponent() {
+  const [value, setValue] = useState('');
+
+  return <BlInput value={value} onInput={event => setValue(event.target.value)} />;
+}
+
+export default MyComponent;
+```