From e70a43a43dadd2705a08c982890f9d3088f7c8ef Mon Sep 17 00:00:00 2001 From: Taylor Bantle Date: Tue, 23 Jan 2024 12:37:33 -0800 Subject: [PATCH] Add react-contexts package --- packages/hooks/README.dev.md => README.dev.md | 18 ++- README.md | 3 +- package.json | 4 + packages/contexts/.eslintignore | 4 + packages/contexts/.eslintrc.cjs | 3 + packages/contexts/.npmignore | 2 + packages/contexts/README.md | 15 +++ packages/contexts/babel.config.js | 7 + packages/contexts/jest.config.js | 13 ++ packages/contexts/jest.setup.ts | 2 + packages/contexts/package.json | 82 ++++++++++++ packages/contexts/rollup.config.js | 39 ++++++ .../src/__tests__/commentForm.test.tsx | 109 ++++++++++++++++ .../contexts/src/__tests__/feature.test.tsx | 29 +++++ .../src/__tests__/featureGate.test.tsx | 102 +++++++++++++++ packages/contexts/src/commentForm.tsx | 122 ++++++++++++++++++ packages/contexts/src/createCustomContext.ts | 17 +++ packages/contexts/src/features/feature.tsx | 50 +++++++ .../contexts/src/features/featureGate.tsx | 21 +++ packages/contexts/src/index.ts | 9 ++ packages/contexts/tsconfig.build.json | 4 + packages/contexts/tsconfig.json | 27 ++++ packages/hooks/package.json | 2 +- yarn.lock | 75 ++++++++++- 24 files changed, 749 insertions(+), 10 deletions(-) rename packages/hooks/README.dev.md => README.dev.md (50%) create mode 100644 packages/contexts/.eslintignore create mode 100644 packages/contexts/.eslintrc.cjs create mode 100644 packages/contexts/.npmignore create mode 100644 packages/contexts/README.md create mode 100644 packages/contexts/babel.config.js create mode 100644 packages/contexts/jest.config.js create mode 100644 packages/contexts/jest.setup.ts create mode 100644 packages/contexts/package.json create mode 100644 packages/contexts/rollup.config.js create mode 100644 packages/contexts/src/__tests__/commentForm.test.tsx create mode 100644 packages/contexts/src/__tests__/feature.test.tsx create mode 100644 packages/contexts/src/__tests__/featureGate.test.tsx create mode 100644 packages/contexts/src/commentForm.tsx create mode 100644 packages/contexts/src/createCustomContext.ts create mode 100644 packages/contexts/src/features/feature.tsx create mode 100644 packages/contexts/src/features/featureGate.tsx create mode 100644 packages/contexts/src/index.ts create mode 100644 packages/contexts/tsconfig.build.json create mode 100644 packages/contexts/tsconfig.json diff --git a/packages/hooks/README.dev.md b/README.dev.md similarity index 50% rename from packages/hooks/README.dev.md rename to README.dev.md index 0ccc22e5..8e32f95e 100644 --- a/packages/hooks/README.dev.md +++ b/README.dev.md @@ -1,19 +1,21 @@ # Developer notes -## Testing this package in a local app +## Testing a package in a local app -Using [`yalc`](https://github.com/wclr/yalc) is the best way to test this library in another local package. +Using [`yalc`](https://github.com/wclr/yalc) is the best way to test a library in another +local package. -First, compile and build this package: +First, choose a package to compile and build: ```zsh -% yarn dbuild +% cd packages/hooks +hooks % yarn dbuild ``` And publish to `yalc`: ```zsh -% yalc publish +hooks % yalc publish ``` The `yalc:publish` script will also achieve the above. @@ -24,8 +26,10 @@ Then in your app, link to this package: other-app % yalc link @dolthub/react-hooks ``` -And you will see and up-to-date version of this package. When you make a change to this package, you can push the change by running `yarn yalc:push` and you should see it automatically reflected in your app. +And you will see and up-to-date version of the `react-hooks` package. When you make a +change to the package, you can push the change by running `yarn yalc:push` and you should +see it automatically reflected in your app. To remove the yalc package in your app, run `yalc remove --all`. -**Coming soon**: using `yalc` to watch for changes and automatically push +**Coming soon**: using `yalc` to watch for changes and automatically push. diff --git a/README.md b/README.md index 15dadd9c..f8706834 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # react-library +- [`@dolthub/react-contexts`](https://github.com/dolthub/react-library/tree/main/packages/contexts): A library of useful React contexts - [`@dolthub/react-hooks`](https://github.com/dolthub/react-library/tree/main/packages/hooks): A library of useful React hooks -- [`@dolthub/web-utils`](https://github.com/dolthub/react-library/tree/main/packages/utils): A library of useful utilities for the web - [`@dolthub/proto-resource-utils`](https://github.com/dolthub/react-library/tree/main/packages/resource-utils): A library of useful utilities for managing Google protobuf resources and names +- [`@dolthub/web-utils`](https://github.com/dolthub/react-library/tree/main/packages/utils): A library of useful utilities for the web diff --git a/package.json b/package.json index cd24cf6a..e852d6c3 100644 --- a/package.json +++ b/package.json @@ -10,17 +10,21 @@ "dbuild": "npm-run-all 'dbuild:*'", "dbuild:utils": "yarn workspace @dolthub/web-utils dbuild", "dbuild:hooks": "yarn workspace @dolthub/react-hooks dbuild", + "dbuild:contexts": "yarn workspace @dolthub/react-contexts dbuild", "dbuild:resource": "yarn workspace @dolthub/proto-resource-utils dbuild", "lint": "npm-run-all --parallel 'lint:*'", "lint:hooks": "yarn workspace @dolthub/react-hooks lint", + "lint:contexts": "yarn workspace @dolthub/react-contexts lint", "lint:utils": "yarn workspace @dolthub/web-utils lint", "lint:resource": "yarn workspace @dolthub/proto-resource-utils lint", "prettier": "npm-run-all --parallel 'prettier:*'", "prettier:hooks": "yarn workspace @dolthub/react-hooks prettier", + "prettier:contexts": "yarn workspace @dolthub/react-contexts prettier", "prettier:utils": "yarn workspace @dolthub/web-utils prettier", "prettier:resource": "yarn workspace @dolthub/proto-resource-utils prettier", "test": "npm-run-all --parallel 'test:*'", "test:hooks": "yarn workspace @dolthub/react-hooks test", + "test:contexts": "yarn workspace @dolthub/react-contexts test", "test:utils": "yarn workspace @dolthub/web-utils test", "test:resource": "yarn workspace @dolthub/proto-resource-utils test" }, diff --git a/packages/contexts/.eslintignore b/packages/contexts/.eslintignore new file mode 100644 index 00000000..fad00ec9 --- /dev/null +++ b/packages/contexts/.eslintignore @@ -0,0 +1,4 @@ +dist +node_modules +.eslintrc.js +./*.js diff --git a/packages/contexts/.eslintrc.cjs b/packages/contexts/.eslintrc.cjs new file mode 100644 index 00000000..041fb773 --- /dev/null +++ b/packages/contexts/.eslintrc.cjs @@ -0,0 +1,3 @@ +module.exports = { + extends: "../../.eslintrc.cjs", +}; diff --git a/packages/contexts/.npmignore b/packages/contexts/.npmignore new file mode 100644 index 00000000..54fcfddb --- /dev/null +++ b/packages/contexts/.npmignore @@ -0,0 +1,2 @@ +src/ +tsconfig.* \ No newline at end of file diff --git a/packages/contexts/README.md b/packages/contexts/README.md new file mode 100644 index 00000000..15523db9 --- /dev/null +++ b/packages/contexts/README.md @@ -0,0 +1,15 @@ +# @dolthub/react-contexts + +A library of useful React contexts. + +## Installation + +``` +% yarn add @dolthub/react-contexts +``` + +or + +``` +% npm install @dolthub/react-contexts +``` diff --git a/packages/contexts/babel.config.js b/packages/contexts/babel.config.js new file mode 100644 index 00000000..89a4577b --- /dev/null +++ b/packages/contexts/babel.config.js @@ -0,0 +1,7 @@ +module.exports = { + presets: [ + ["@babel/preset-env", { targets: { node: "current" } }], + "@babel/preset-react", + "@babel/preset-typescript", + ], +}; diff --git a/packages/contexts/jest.config.js b/packages/contexts/jest.config.js new file mode 100644 index 00000000..8cc4db0d --- /dev/null +++ b/packages/contexts/jest.config.js @@ -0,0 +1,13 @@ +const TEST_REGEX = "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$"; + +module.exports = { + setupFilesAfterEnv: ["/jest.setup.ts"], + testRegex: TEST_REGEX, + transform: { + "^.+\\.tsx?$": "babel-jest", + }, + testPathIgnorePatterns: ["types", "node_modules", ".rollup.cache", "dist"], + moduleFileExtensions: ["ts", "js", "tsx"], + collectCoverage: false, + clearMocks: true, +}; diff --git a/packages/contexts/jest.setup.ts b/packages/contexts/jest.setup.ts new file mode 100644 index 00000000..38955bde --- /dev/null +++ b/packages/contexts/jest.setup.ts @@ -0,0 +1,2 @@ +import "@testing-library/jest-dom"; +import "@testing-library/react"; diff --git a/packages/contexts/package.json b/packages/contexts/package.json new file mode 100644 index 00000000..af2585cc --- /dev/null +++ b/packages/contexts/package.json @@ -0,0 +1,82 @@ +{ + "name": "@dolthub/react-contexts", + "author": "DoltHub", + "description": "A collection of React contexts for common tasks", + "version": "0.1.0", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "keywords": [ + "react", + "contexts", + "react-contexts", + "state", + "frontend" + ], + "packageManager": "yarn@4.0.2", + "scripts": { + "compile": "tsc -b", + "build": "rollup -c --bundleConfigAsCjs", + "dbuild": "yarn compile && yarn build", + "lint": "eslint --cache --ext .ts,.js,.tsx,.jsx src", + "prettier": "prettier --check 'src/**/*.{js,ts,tsx}'", + "prettier-fix": "prettier --write 'src/**/*.{js,ts,tsx}'", + "npm:publish": "yarn dbuild && npm publish", + "test": "jest --env=jest-environment-jsdom", + "yalc:publish": "yarn dbuild && yalc publish", + "yalc:push": "yarn dbuild && yalc push" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "dependencies": { + "@dolthub/react-hooks": "^0.1.6", + "swr": "^2.2.4" + }, + "devDependencies": { + "@babel/core": "^7.23.7", + "@babel/preset-env": "^7.23.8", + "@babel/preset-react": "^7.23.3", + "@babel/preset-typescript": "^7.23.3", + "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-typescript": "^11.1.5", + "@testing-library/jest-dom": "^6.2.0", + "@testing-library/react": "^14.1.2", + "@testing-library/react-hooks": "^8.0.1", + "@types/babel__core": "^7", + "@types/babel__preset-env": "^7", + "@types/eslint": "^8", + "@types/jest": "^29.5.11", + "@types/react": "^18", + "@types/react-dom": "^18", + "@types/rollup-plugin-peer-deps-external": "^2", + "@typescript-eslint/eslint-plugin": "^6.18.1", + "@typescript-eslint/parser": "^6.18.1", + "babel-jest": "^29.7.0", + "eslint": "^8.56.0", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "prettier": "^3.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "rollup": "^4.9.4", + "rollup-plugin-dts": "^6.1.0", + "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-terser": "^7.0.2", + "tslib": "^2.6.2", + "typescript": "^5.3.3", + "yalc": "^1.0.0-pre.53" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/dolthub/react-library.git" + }, + "bugs": { + "url": "https://github.com/dolthub/react-library/issues" + } +} diff --git a/packages/contexts/rollup.config.js b/packages/contexts/rollup.config.js new file mode 100644 index 00000000..6ebf596d --- /dev/null +++ b/packages/contexts/rollup.config.js @@ -0,0 +1,39 @@ +import resolve from "@rollup/plugin-node-resolve"; +import commonjs from "@rollup/plugin-commonjs"; +import typescript from "@rollup/plugin-typescript"; +import { terser } from "rollup-plugin-terser"; +import external from "rollup-plugin-peer-deps-external"; +import { dts } from "rollup-plugin-dts"; + +const packageJson = require("./package.json"); + +export default [ + { + input: "src/index.ts", + output: [ + { + file: packageJson.main, + format: "cjs", + sourcemap: true, + name: "react-ts-lib", + }, + { + file: packageJson.module, + format: "esm", + sourcemap: true, + }, + ], + plugins: [ + external(), + resolve(), + commonjs(), + typescript({ tsconfig: "./tsconfig.json" }), + terser(), + ], + }, + { + input: "./types/index.d.ts", + output: [{ file: "dist/index.d.ts", format: "esm" }], + plugins: [dts()], + }, +]; diff --git a/packages/contexts/src/__tests__/commentForm.test.tsx b/packages/contexts/src/__tests__/commentForm.test.tsx new file mode 100644 index 00000000..b732d97c --- /dev/null +++ b/packages/contexts/src/__tests__/commentForm.test.tsx @@ -0,0 +1,109 @@ +import { act, fireEvent, render, screen } from "@testing-library/react"; +import React from "react"; +import CommentFormProvider, { useCommentFormContext } from "../commentForm"; + +const MockComponent: React.FC = () => { + const { + comment, + setComment, + onSubmit, + commentFormIsVisible, + commentFormRef, + } = useCommentFormContext(); + return ( +
+