From 527f51571cd4ed760dcbf87d1bbc6751f44b7b98 Mon Sep 17 00:00:00 2001 From: Brandon Clark Date: Mon, 13 Feb 2023 09:40:14 -0600 Subject: [PATCH] feat: adding useIsomorphicLayoutEffect hook package --- .changeset/long-schools-cheer.md | 5 ++ .eslintrc.js | 2 - .../use-isomorphic-layout-effect/CHANGELOG.md | 32 +++++++++++ .../use-isomorphic-layout-effect/LICENSE | 18 ++++++ .../use-isomorphic-layout-effect/README.md | 4 ++ .../jest.config.js | 3 + .../use-isomorphic-layout-effect/moon.yml | 13 +++++ .../use-isomorphic-layout-effect/package.json | 55 +++++++++++++++++++ .../use-isomorphic-layout-effect/src/index.ts | 1 + .../src/useIsomorphicLayoutEffect.ts | 4 ++ .../tests/useIsomorphicLayoutEffect.test.tsx | 10 ++++ .../tsconfig.build.json | 11 ++++ .../tsconfig.json | 15 +++++ tsconfig.json | 45 ++++++++------- yarn.lock | 12 ++++ 15 files changed, 207 insertions(+), 23 deletions(-) create mode 100644 .changeset/long-schools-cheer.md create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/CHANGELOG.md create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/LICENSE create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/README.md create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/jest.config.js create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/moon.yml create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/package.json create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/src/index.ts create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/src/useIsomorphicLayoutEffect.ts create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/tests/useIsomorphicLayoutEffect.test.tsx create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/tsconfig.build.json create mode 100644 packages/react/hooks/use-isomorphic-layout-effect/tsconfig.json diff --git a/.changeset/long-schools-cheer.md b/.changeset/long-schools-cheer.md new file mode 100644 index 00000000..67ac9440 --- /dev/null +++ b/.changeset/long-schools-cheer.md @@ -0,0 +1,5 @@ +--- +'@project44-manifest/use-isomorphic-layout-effect': minor +--- + +Adding useIsomorhpicLayoutEffect hook package diff --git a/.eslintrc.js b/.eslintrc.js index 2ffea4f6..a43d7fb7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -480,8 +480,6 @@ module.exports = { }, rules: { // Prefer `it` over `test` - 'jest/consistent-test-it': 'error', - 'jest/require-top-level-describe': 'error', 'jest/valid-describe-callback': 'error', 'jest/valid-expect': 'error', diff --git a/packages/react/hooks/use-isomorphic-layout-effect/CHANGELOG.md b/packages/react/hooks/use-isomorphic-layout-effect/CHANGELOG.md new file mode 100644 index 00000000..15844e9d --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/CHANGELOG.md @@ -0,0 +1,32 @@ +# @project44-manifest/use-controlled-state + +## 0.1.1 + +### Patch Changes + +- [#238](https://github.com/project44/manifest/pull/238) + [`f247e35`](https://github.com/project44/manifest/commit/f247e35a3056d714d8a21ed59ece6b418266332d) + Thanks [@bclark-p44](https://github.com/bclark-p44)! - Fixing issue with workspace dependency + format + +## 0.1.0 + +### Minor Changes + +- [#213](https://github.com/project44/manifest/pull/213) + [`345def0`](https://github.com/project44/manifest/commit/345def02dc7f66db38fff6a8716422121c1adf92) + Thanks [@bclark-p44](https://github.com/bclark-p44)! - Adding react transition package + +### Patch Changes + +- Updated dependencies + [[`345def0`](https://github.com/project44/manifest/commit/345def02dc7f66db38fff6a8716422121c1adf92)]: + - @project44-manifest/react-utils@0.2.4 + +## 0.1.0 + +### Minor Changes + +- [#204](https://github.com/project44/manifest/pull/204) + [`486d294`](https://github.com/project44/manifest/commit/486d29490cd30b3c2a243fe25c7222db66a1dff0) + Thanks [@bclark-p44](https://github.com/bclark-p44)! - Adding useControlledState hook package diff --git a/packages/react/hooks/use-isomorphic-layout-effect/LICENSE b/packages/react/hooks/use-isomorphic-layout-effect/LICENSE new file mode 100644 index 00000000..accb6d33 --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/LICENSE @@ -0,0 +1,18 @@ +MIT License + +Copyright (c) 2021 project44, Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and +associated documentation files (the "Software"), to deal in the Software without restriction, +including without limitation the rights to use, copy, modify, merge, publish, distribute, +sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial +portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT +NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES +OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/react/hooks/use-isomorphic-layout-effect/README.md b/packages/react/hooks/use-isomorphic-layout-effect/README.md new file mode 100644 index 00000000..9e64f5da --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/README.md @@ -0,0 +1,4 @@ +# @project44-react/react-use-isomorphic-layout-effect + +This package is part of [Manifest Design System](https://github.com/project44/manifest). Please see +the repo for more details. diff --git a/packages/react/hooks/use-isomorphic-layout-effect/jest.config.js b/packages/react/hooks/use-isomorphic-layout-effect/jest.config.js new file mode 100644 index 00000000..cff548c5 --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/jest.config.js @@ -0,0 +1,3 @@ +module.exports = { + preset: 'jest-preset-manifest', +}; diff --git a/packages/react/hooks/use-isomorphic-layout-effect/moon.yml b/packages/react/hooks/use-isomorphic-layout-effect/moon.yml new file mode 100644 index 00000000..beeea0ba --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/moon.yml @@ -0,0 +1,13 @@ +type: 'library' +language: 'typescript' + +workspace: + inheritedTasks: + rename: + buildPackage: 'build' + +tasks: + build: + outputs: + - 'esm' + - 'lib' diff --git a/packages/react/hooks/use-isomorphic-layout-effect/package.json b/packages/react/hooks/use-isomorphic-layout-effect/package.json new file mode 100644 index 00000000..dc8c15b0 --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/package.json @@ -0,0 +1,55 @@ +{ + "name": "@project44-manifest/use-isomorphic-layout-effect", + "version": "0.0.0", + "description": "Manifest Design System react hook for a ssr safe useEffect", + "license": "MIT", + "author": "project44", + "keywords": [ + "manifest", + "design", + "system", + "react", + "hooks" + ], + "sideEffects": false, + "main": "./lib/index.js", + "module": "./esm/index.js", + "types": "./dts/index.d.ts", + "files": [ + "dts/**/*.d.ts", + "esm/**/*.{js,map}", + "lib/**/*.{js,map}", + "src/**/*.{ts,tsx,json}" + ], + "repository": { + "type": "git", + "url": "git@github.com:project-44/manifest.git", + "directory": "packages/react/hookes/use-isomorphic-layout-effect" + }, + "publishConfig": { + "access": "public" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "devDependencies": { + "react": "^18.1.0", + "react-dom": "^18.1.0" + }, + "packemon": { + "platform": "browser" + }, + "exports": { + "./package.json": "./package.json", + ".": { + "types": "./dts/index.d.ts", + "browser": { + "module": "./esm/index.js", + "import": "./esm/index.js", + "default": "./lib/index.js" + }, + "default": "./lib/index.js" + } + } +} diff --git a/packages/react/hooks/use-isomorphic-layout-effect/src/index.ts b/packages/react/hooks/use-isomorphic-layout-effect/src/index.ts new file mode 100644 index 00000000..23a28426 --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/src/index.ts @@ -0,0 +1 @@ +export * from './useIsomorphicLayoutEffect'; diff --git a/packages/react/hooks/use-isomorphic-layout-effect/src/useIsomorphicLayoutEffect.ts b/packages/react/hooks/use-isomorphic-layout-effect/src/useIsomorphicLayoutEffect.ts new file mode 100644 index 00000000..35ff6f3d --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/src/useIsomorphicLayoutEffect.ts @@ -0,0 +1,4 @@ +import * as React from 'react'; + +export const useIsomorphicLayoutEffect = + typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; diff --git a/packages/react/hooks/use-isomorphic-layout-effect/tests/useIsomorphicLayoutEffect.test.tsx b/packages/react/hooks/use-isomorphic-layout-effect/tests/useIsomorphicLayoutEffect.test.tsx new file mode 100644 index 00000000..26a9d6d2 --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/tests/useIsomorphicLayoutEffect.test.tsx @@ -0,0 +1,10 @@ +import { renderHook } from '@testing-library/react'; +import { useIsomorphicLayoutEffect } from '../src'; + +test('should execute callback', () => { + const callback = jest.fn(); + const { result } = renderHook(() => void useIsomorphicLayoutEffect(callback)); + + expect(result.current).toBeUndefined(); + expect(callback).toHaveBeenCalled(); +}); diff --git a/packages/react/hooks/use-isomorphic-layout-effect/tsconfig.build.json b/packages/react/hooks/use-isomorphic-layout-effect/tsconfig.build.json new file mode 100644 index 00000000..92833dce --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/tsconfig.build.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../../tsconfig.options.json", + "compilerOptions": { + "outDir": "dts", + "rootDir": "src" + }, + "include": [ + "src/**/*" + ], + "references": [] +} diff --git a/packages/react/hooks/use-isomorphic-layout-effect/tsconfig.json b/packages/react/hooks/use-isomorphic-layout-effect/tsconfig.json new file mode 100644 index 00000000..fb4f731c --- /dev/null +++ b/packages/react/hooks/use-isomorphic-layout-effect/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../../tsconfig.options.json", + "compilerOptions": { + "outDir": "../../../../.moon/cache/types/packages/react/hooks/use-isomorphic-layout-effect" + }, + "include": [ + "src/**/*", + "tests/**/*" + ], + "references": [ + { + "path": "./tsconfig.build.json" + } + ] +} diff --git a/tsconfig.json b/tsconfig.json index 994dde9e..c2a1e7dc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,73 +9,76 @@ "path": "packages/react/components/avatar" }, { - "path": "packages/react/components/button" + "path": "packages/react/components/breadcrumb" }, { - "path": "packages/react/components/breadcrumb" + "path": "packages/react/components/button" }, { "path": "packages/react/components/css-baseline" }, { - "path": "packages/system/tokens" + "path": "packages/react/components/icon" }, { - "path": "packages/react/components/icon" + "path": "packages/react/components/layout" }, { - "path": "packages/react/icons" + "path": "packages/react/components/link" }, { - "path": "tools/jest-preset" + "path": "packages/react/components/popover" }, { - "path": "packages/react/components/layout" + "path": "packages/react/components/provider" }, { - "path": "packages/react/components/link" + "path": "packages/react/components/tooltip" }, { - "path": "packages/react/components/popover" + "path": "packages/react/components/transition" }, { - "path": "packages/react/components/provider" + "path": "packages/react/components/typography" }, { "path": "packages/react/core" }, { - "path": "packages/react/styles" + "path": "packages/react/hooks/use-controlled-state" }, { - "path": "packages/react/system" + "path": "packages/react/hooks/use-debounced-state" }, { - "path": "packages/system/theme" + "path": "packages/react/hooks/use-isomorphic-layout-effect" }, { - "path": "packages/react/components/tooltip" + "path": "packages/react/hooks/use-merged-ref" }, { - "path": "packages/react/components/transition" + "path": "packages/react/icons" }, { - "path": "packages/react/types" + "path": "packages/react/styles" }, { - "path": "packages/react/components/typography" + "path": "packages/react/system" }, { - "path": "packages/react/hooks/use-controlled-state" + "path": "packages/react/types" }, { - "path": "packages/react/hooks/use-debounced-state" + "path": "packages/react/utils" }, { - "path": "packages/react/hooks/use-merged-ref" + "path": "packages/system/theme" }, { - "path": "packages/react/utils" + "path": "packages/system/tokens" + }, + { + "path": "tools/jest-preset" } ] } diff --git a/yarn.lock b/yarn.lock index e83184c4..8c75f07c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3597,6 +3597,18 @@ __metadata: languageName: unknown linkType: soft +"@project44-manifest/use-isomorphic-layout-effect@workspace:packages/react/hooks/use-isomorphic-layout-effect": + version: 0.0.0-use.local + resolution: "@project44-manifest/use-isomorphic-layout-effect@workspace:packages/react/hooks/use-isomorphic-layout-effect" + dependencies: + react: ^18.1.0 + react-dom: ^18.1.0 + peerDependencies: + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + languageName: unknown + linkType: soft + "@project44-manifest/use-merged-ref@^0.1.1, @project44-manifest/use-merged-ref@workspace:packages/react/hooks/use-merged-ref": version: 0.0.0-use.local resolution: "@project44-manifest/use-merged-ref@workspace:packages/react/hooks/use-merged-ref"