diff options
Diffstat (limited to 'examples/design-system/packages/acme-utils')
7 files changed, 91 insertions, 0 deletions
diff --git a/examples/design-system/packages/acme-utils/.eslintrc.js b/examples/design-system/packages/acme-utils/.eslintrc.js new file mode 100644 index 0000000..b2a3fa9 --- /dev/null +++ b/examples/design-system/packages/acme-utils/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["acme"], +}; diff --git a/examples/design-system/packages/acme-utils/package.json b/examples/design-system/packages/acme-utils/package.json new file mode 100644 index 0000000..debaa2a --- /dev/null +++ b/examples/design-system/packages/acme-utils/package.json @@ -0,0 +1,31 @@ +{ + "name": "@acme/utils", + "version": "0.0.0", + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "sideEffects": false, + "license": "MIT", + "files": [ + "dist/**" + ], + "scripts": { + "build": "tsup src/index.tsx --format esm,cjs --dts --external react", + "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react", + "lint": "eslint \"src/**/*.ts*\"", + "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" + }, + "devDependencies": { + "@acme/tsconfig": "workspace:*", + "@types/react": "^18.0.9", + "@types/react-dom": "^18.0.4", + "eslint": "^8.15.0", + "eslint-config-acme": "workspace:*", + "react": "^18.1.0", + "tsup": "^5.10.1", + "typescript": "^4.5.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/examples/design-system/packages/acme-utils/src/index.tsx b/examples/design-system/packages/acme-utils/src/index.tsx new file mode 100644 index 0000000..6098c1f --- /dev/null +++ b/examples/design-system/packages/acme-utils/src/index.tsx @@ -0,0 +1,3 @@ +export { toSlug } from "./toSlug"; +export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect"; +export { usePrevious } from "./usePrevious"; diff --git a/examples/design-system/packages/acme-utils/src/toSlug.ts b/examples/design-system/packages/acme-utils/src/toSlug.ts new file mode 100644 index 0000000..6aec61c --- /dev/null +++ b/examples/design-system/packages/acme-utils/src/toSlug.ts @@ -0,0 +1,18 @@ +/** + * Return a slugified copy of a string. + * + * @param {string} str The string to be slugified + * @return {string} The slugified string. + */ +export function toSlug(str: string): string { + let s = str; + if (!s) { + return ""; + } + s = s.toLowerCase().trim(); + s = s.replace(/ & /g, " and "); + s = s.replace(/[ ]+/g, "-"); + s = s.replace(/[-]+/g, "-"); + s = s.replace(/[^a-z0-9-]+/g, ""); + return s; +} diff --git a/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx b/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx new file mode 100644 index 0000000..59a7899 --- /dev/null +++ b/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx @@ -0,0 +1,13 @@ +import * as React from "react"; + +/** + * On the server, React emits a warning when calling `useLayoutEffect`. + * This is because neither `useLayoutEffect` nor `useEffect` run on the server. + * We use this safe version which suppresses the warning by replacing it with a noop on the server. + * + * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect + */ +const useIsomorphicLayoutEffect = + typeof window !== "undefined" ? React.useLayoutEffect : () => {}; + +export { useIsomorphicLayoutEffect }; diff --git a/examples/design-system/packages/acme-utils/src/usePrevious.tsx b/examples/design-system/packages/acme-utils/src/usePrevious.tsx new file mode 100644 index 0000000..8024464 --- /dev/null +++ b/examples/design-system/packages/acme-utils/src/usePrevious.tsx @@ -0,0 +1,17 @@ +import * as React from "react"; + +function usePrevious<T>(value: T) { + // The ref object is a generic container whose current property is mutable ... + // ... and can hold any value, similar to an instance property on a class + const ref = React.useRef<T>(value); + + // Store current value in ref + React.useEffect(() => { + ref.current = value; + }, [value]); // Only re-run if value changes + + // Return previous value (happens before update in useEffect above) + return ref.current; +} + +export { usePrevious }; diff --git a/examples/design-system/packages/acme-utils/tsconfig.json b/examples/design-system/packages/acme-utils/tsconfig.json new file mode 100644 index 0000000..9be70c0 --- /dev/null +++ b/examples/design-system/packages/acme-utils/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "@acme/tsconfig/react-library.json", + "include": ["."], + "exclude": ["dist", "build", "node_modules"] +} |