Merge pull request #102 from kamo88/develop

develop → master

Author: kamo88

.github/actions/install/action.yml

@@ -3,7 +3,6 @@ description: install node_modules
 runs:
   using: composite
   steps:
-    - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
         node-version-file: 'package.json'

.github/workflows/assign-author.yml

@@ -1,4 +1,4 @@
-name: assign-author-to-PR-&-chore/workflowISSUE
+name: assign author to PR
 on:
   pull_request:
     types: [opened]

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: CI-for-pull-request
+name: CI for pull request
 on: pull_request
 jobs:
   install:
@@ -16,7 +16,7 @@ jobs:
       - uses: ./.github/actions/install
       - run: npm run lint:all
   test:
-    name: test
+    name: test & coverage
     runs-on: ubuntu-latest
     needs: install
     steps:

.github/workflows/publish.yml

@@ -1,4 +1,4 @@
-name: package-publish-to-npm
+name: package publish to npm
 on:
   release:
     types: [published]

.github/workflows/storybook-release.yml

@@ -1,4 +1,4 @@
-name: deploy-storybook-to-github-pages
+name: deploy storybook to github pages
 
 on:
   push:

README.md

@@ -1,7 +1,7 @@
-![NPM](https://img.shields.io/npm/l/%40kamo88%2Freact-dialog-hooks)
+![license](https://img.shields.io/npm/l/%40kamo88%2Freact-dialog-hooks)
 ![npm (scoped)](https://img.shields.io/npm/v/%40kamo88/react-dialog-hooks)
-[![pages-build-deployment](https://github.com/kamo88/react-dialog/actions/workflows/pages/pages-build-deployment/badge.svg?branch=main)](https://github.com/kamo88/react-dialog/actions/workflows/pages/pages-build-deployment)
-[![package-publish-to-npm](https://github.com/kamo88/react-dialog/actions/workflows/publish.yml/badge.svg?branch=main)](https://github.com/kamo88/react-dialog/actions/workflows/publish.yml)
+[![codecov](https://codecov.io/gh/kamo88/react-dialog-hooks/graph/badge.svg?token=W77V28C2TY)](https://codecov.io/gh/kamo88/react-dialog-hooks)
+[![pages-build-deployment](https://github.com/kamo88/react-dialog-hooks/actions/workflows/pages/pages-build-deployment/badge.svg?branch=gh-pages)](https://github.com/kamo88/react-dialog-hooks/actions/workflows/pages/pages-build-deployment)
 
 ```
 npm i @kamo88/react-dialog-hooks

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@kamo88/react-dialog-hooks",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "type": "module",
   "description": "react use dialog hooks & dialog component",
   "main": "./dist/umd/index.js",
@@ -74,15 +74,15 @@
     "lint-staged": "^14.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.28",
-    "prettier": "3.0.2",
+    "prettier": "3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.3",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18",
     "rollup-plugin-license": "^3.0.1",
     "rollup-plugin-visualizer": "^5.9.2",
     "storybook": "^7.3.2",
     "tailwindcss": "^3.3.3",
-    "typescript": "~5.1",
+    "typescript": "~5.2.0",
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.5.2",
     "vite-tsconfig-paths": "^4.2.0",
@@ -112,7 +112,7 @@
   },
   "homepage": "https://github.com/kamo88/react-dialog-hooks#readme",
   "volta": {
-    "node": "18.17.0"
+    "node": "18.17.1"
   },
   "engines": {
     "node": "^18",

package.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base",
+    ":timezone(Asia/Tokyo)",
+    ":automergePatch",
+    "schedule:earlyMondays"
+  ],
+  "enabledManagers": ["npm"],
+  "ignoreDeps": ["npm"],
+  "prHourlyLimit": 0,
+  "packageRules": [
+    {
+      "extends": "packages:linters",
+      "groupName": "linters",
+      "packagePatterns": ["^@typescript-eslint/", "^prettier"]
+    },
+    {
+      "matchPackageNames": [
+        "react",
+        "@types/react",
+        "react-dom",
+        "@types/react-dom"
+      ],
+      "groupName": "react"
+    }
+  ]
+}

renovate.json

@@ -0,0 +1,42 @@
+import { expect, test, describe } from 'vitest';
+
+import { getIsDialogChild } from './getIsDialogChild';
+
+describe('hooks/getIsDialogChild ※no use logic', () => {
+  test('dialog: null', () => {
+    const touchingContent = document.createElement('div');
+    const isDialogChild = getIsDialogChild(touchingContent, null);
+    expect(isDialogChild).toBe(false);
+  });
+
+  test('touching dialog', () => {
+    const dialog = document.createElement('dialog');
+    const isDialogChild = getIsDialogChild(dialog, dialog);
+    expect(isDialogChild).toBe(false);
+  });
+
+  test('not child touchingContent no parent', () => {
+    const touchingContent = document.createElement('div');
+    const dialog = document.createElement('dialog');
+    const isDialogChild = getIsDialogChild(touchingContent, dialog);
+    expect(isDialogChild).toBe(false);
+  });
+
+  test('not child touchingContent parent body', () => {
+    const touchingContent = document.createElement('div');
+    document.body.appendChild(touchingContent);
+    const dialog = document.createElement('dialog');
+    const isDialogChild = getIsDialogChild(touchingContent, dialog);
+    expect(isDialogChild).toBe(false);
+  });
+
+  test('is dialog`s grandchild element', () => {
+    const touchingContentContainer = document.createElement('div');
+    const touchingContent = document.createElement('div');
+    touchingContentContainer.appendChild(touchingContent);
+    const dialog = document.createElement('dialog');
+    dialog.appendChild(touchingContentContainer);
+    const isDialogChild = getIsDialogChild(touchingContent, dialog);
+    expect(isDialogChild).toBe(true);
+  });
+});

src/components/Dialog/hooks/getIsDialogChild.test.ts

@@ -0,0 +1,22 @@
+export type GetIsDialogChild = (
+  el: HTMLElement | Element,
+  dialog: HTMLDialogElement | null,
+) => boolean;
+
+/**
+ * on body-scroll-lock` s disableBodyScroll option allowTouchMove,
+ * One accurate determination process.
+ * Since there seems to be no problem without it, only the method is implemented for now.
+ */
+export const getIsDialogChild: GetIsDialogChild = (el, dialog) => {
+  if (!dialog) return false;
+  if (el === dialog) return false;
+
+  let { parentElement } = el;
+
+  while (parentElement && parentElement !== document.body) {
+    if (parentElement === dialog) return true;
+    parentElement = parentElement.parentElement;
+  }
+  return false;
+};

src/components/Dialog/hooks/getIsDialogChild.ts

@@ -42,7 +42,9 @@ export const useDialogPromise = () => {
        * The dialog should appear on the entire screen.
        * The only touchable elements other than the dialog should be the dialog's child elements.
        */
-      disableBodyScroll(ref.current, { allowTouchMove: () => true });
+      disableBodyScroll(ref.current, {
+        allowTouchMove: () => true,
+      });
     }
     promiseState.current = new Promise<DialogResponseState>((resolve) => {
       resolveState.current = resolve;

src/components/Dialog/hooks/useDialogPromise.ts

@@ -11,6 +11,11 @@ export default defineConfig(({ mode }) => {
   const isAnalyze = mode === 'analyze';
   return {
     resolve: {
+      /**
+       * The combination of vite-tsconfig-paths and vite-plugin-dts does not resolve ailias when the d.ts file is created.
+       * However, with other plugins,
+       * it looked like the file creation was running twice, so I left it set to this configuration for the time being.
+       */
       alias: {
         '@': path.resolve(__dirname, 'src'),
       },
@@ -22,6 +27,10 @@ export default defineConfig(({ mode }) => {
       lib: {
         entry: path.resolve(__dirname, 'src/index.ts'),
         name: 'Kamo88Dialog', // When you build with umd, it is set in the window with this variable name.
+        /**
+         * By default, umd format is built in .cjs.
+         * In unpkg, .cjs would be provided in text/plain format.(2023/9/2)
+         */
         fileName: (format) => `${format}/index.js`,
         formats: ['es', 'umd'],
       },
@@ -44,7 +53,11 @@ export default defineConfig(({ mode }) => {
           path.resolve(__dirname, 'src/**/*.test.*'),
           path.resolve(__dirname, 'src/**/*.stories.*'),
           path.resolve(__dirname, 'src/**/*.example.*'),
-          path.resolve(__dirname, 'src/components/Dialog/DialogContainer.tsx'),
+          path.resolve(
+            __dirname,
+            'src/components/Dialog/hooks/getIsDialogChild.ts',
+          ),
+          path.resolve(__dirname, 'src/components/Dialog/DialogContainer.tsx'), // including Dialog
         ],
         include: [
           path.resolve(__dirname, 'src/index.ts'),
@@ -54,10 +67,8 @@ export default defineConfig(({ mode }) => {
       }),
       license({
         thirdParty: {
-          includePrivate: true, // Default is false.
           output: {
             file: path.join(__dirname, 'dist', 'dependencies.txt'),
-            encoding: 'utf-8', // Default is utf-8.
           },
         },
       }),