✨ (react) Add Utterances basic component

packages/react/README.md

@@ -0,0 +1,98 @@
+<p align="center">
+
+  <h1 align="center">utterances-react-component</h1>
+</p>
+
+<p align="center">
+Type safety react component for utterances
+</p>
+
+<div align="center">
+
+[![test](https://github.com/TomokiMiyauci/utterances-react-component/actions/workflows/test.yml/badge.svg)](https://github.com/TomokiMiyauci/utterances-react-component/actions/workflows/test.yml)
+[![GitHub release](https://img.shields.io/github/release/TomokiMiyauci/utterances-react-component.svg)](https://github.com/TomokiMiyauci/utterances-react-component/releases)
+![npm download](https://img.shields.io/npm/dw/utterances-react-component?color=blue)
+
+![GitHub (Pre-)Release Date](https://img.shields.io/github/release-date-pre/TomokiMiyauci/utterances-react-component)
+[![dependencies Status](https://status.david-dm.org/gh/TomokiMiyauci/utterances-react-component.svg)](https://david-dm.org/TomokiMiyauci/utterances-react-component)
+[![codecov](https://codecov.io/gh/TomokiMiyauci/utterances-react-component/branch/main/graph/badge.svg?token=SPAi5Pv2wd)](https://codecov.io/gh/TomokiMiyauci/utterances-react-component)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/f43b1c317e11445399d85ce6efc06504)](https://www.codacy.com/gh/TomokiMiyauci/utterances-react-component/dashboard?utm_source=github.com&utm_medium=referral&utm_content=TomokiMiyauci/utterances-react-component&utm_campaign=Badge_Grade)
+![npm type definitions](https://img.shields.io/npm/types/utterances-react-component)
+![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)
+![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat)
+![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
+
+</div>
+
+---
+
+React component for [utterances](https://utteranc.es/)
+
+Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more.
+
+## :sparkles: Features
+
+- :books: Pure TypeScript and TSX and provides type definition
+- :earth_americas: Multiple modules, providing `ES modules` and `Commonjs`
+- :package: Optimized, super slim size
+
+## :zap: Quick view
+
+```tsx
+import { Utterances } from 'utterances-react-component'
+;<Utterances
+  repo="TomokiMiyauci/utterances-component"
+  theme="github-dark"
+  issueTerm="pathname"
+/>
+```
+
+## :dizzy: Install
+
+### :package: Node.js
+
+```bash
+npm i utterances-react-component
+or
+yarn add utterances-react-component
+```
+
+### :globe_with_meridians: Browser
+
+The module that bundles the dependencies is obtained from
+[skypack](https://www.skypack.dev/view/utterances-react-component).
+
+import like this:
+
+```tsx
+import { Utterances } from 'https://cdn.skypack.dev/utterances-react-component'
+```
+
+**peerDependency**
+
+| package     | version |
+| ----------- | ------- |
+| `react`     | ``      |
+| `react-dom` | ``      |
+
+## :handshake: Contributing
+
+Contributions, issues and feature requests are welcome!<br />Feel free to check
+[issues](https://github.com/TomokiMiyauci/utterances-react-component/issues).
+
+[Contributing guide](./.github/CONTRIBUTING.md)
+
+## :seedling: Show your support
+
+Give a ⭐️ if this project helped you!
+
+<a href="https://www.patreon.com/tomoki_miyauci">
+  <img src="https://c5.patreon.com/external/logo/[email protected]" width="160">
+</a>
+
+## :bulb: License
+
+Copyright © 2021-present [TomokiMiyauci](https://github.com/TomokiMiyauci).
+
+Released under the [MIT](./LICENSE) license

packages/react/_debug/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Utterances from '../lib/Utterances'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Utterances
+      repo="TomokiMiyauci/utterances-component"
+      theme="github-dark"
+      issueTerm="pathname"
+    />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

packages/react/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Debug for react</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/_debug/main.tsx"></script>
+  </body>
+</html>

packages/react/lib/Utterances.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useRef, useEffect } from 'react'
+import { UtterancesProps } from '@shared/types'
+import { createScriptElement, putChildElement } from '@shared/util'
+
+const Utterances: FC<UtterancesProps> = ({
+  repo,
+  label,
+  theme,
+  issueTerm,
+  issueNumber
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const scriptEl = createScriptElement({
+      repo,
+      label,
+      theme,
+      issueTerm,
+      issueNumber: issueNumber as never
+    })
+
+    putChildElement(ref.current, scriptEl)
+  }, [])
+
+  return <div ref={ref} />
+}
+
+export default Utterances

packages/react/lib/index.ts

@@ -0,0 +1,4 @@
+import Utterances from './Utterances'
+
+export { Utterances }
+export type { UtterancesProps, Theme, IssueTerm } from '@shared/types'

packages/react/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "utterances-react-component",
+  "description": "Type safety react component for utterances",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "cz": "yarn --cwd ../.. cz",
+    "commit": "yarn cz",
+    "prepare": "yarn --cwd ../..",
+    "dev": "vite",
+    "lint": "tsc",
+    "build": "vite build && yarn build:types",
+    "build:types": "dts-bundle-generator --no-banner --external-imports=react -o dist/index.d.ts lib/index.ts",
+    "serve": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18"
+  },
+  "dependencies": {
+    "@miyauci/is-valid": "^1.0.0-beta.15"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "dts-bundle-generator": "^5.9.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "author": {
+    "name": "TomokiMiyauci",
+    "email": "[email protected]",
+    "url": "https://miyauchi.dev/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TomokiMiyauci/utterances-component.git",
+    "directory": "packages/react"
+  }
+}

packages/react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@shared/*": ["../../*"]
+    }
+  },
+  "include": ["./lib"]
+}

packages/react/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import { resolve } from 'path'
+import { peerDependencies } from './package.json'
+
+const external = Object.keys(peerDependencies)
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@shared': resolve(__dirname, '..', '..')
+    }
+  },
+  plugins: [reactRefresh()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'lib/index.ts'),
+      formats: ['cjs', 'es'],
+      fileName: 'index'
+    },
+    rollupOptions: {
+      external,
+      output: {
+        format: 'cjs'
+      }
+    }
+  }
+})