@mediamonks/react-kit 1.0.3 → 2.0.5

package/dist/gsap/components/SplitTextWrapper/SplitTextWrapper.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="gsap/types/split-text.js" />
 import SplitText from 'gsap/SplitText';
 import { type ComponentProps, type ReactElement, type RefAttributes } from 'react';
 /**
@@ -14,6 +15,10 @@ type SplitTextWrapperProps<T extends KnownTarget> = {
      * The element type to render, the default is `div`
      */
     as?: T;
+    /**
+     * Split the first element child of the element passed
+     */
+    splitFirstElementChild?: boolean;
 };
 /**
  * Polymorphic component type, necessary to get all the attributes/props for the

package/dist/gsap/components/SplitTextWrapper/SplitTextWrapper.js

@@ -7,7 +7,7 @@ if (typeof window !== 'undefined') {
     gsap.registerPlugin(SplitText);
 }
 // @ts-expect-error polymorphic type is not compatible with ensuredForwardRef function factory
-export const SplitTextWrapper = ensuredForwardRef(({ variables = {}, as, children, ...props }, ref) => {
+export const SplitTextWrapper = ensuredForwardRef(({ variables = {}, as, children, splitFirstElementChild = false, ...props }, ref) => {
     /**
      * Not using useCallback on purpose so that a new SplitText instance is
      * created whenever this component rerenders the children
@@ -16,7 +16,11 @@ export const SplitTextWrapper = ensuredForwardRef(({ variables = {}, as, childre
         if (ref.current && 'isSplit' in ref.current && ref.current.isSplit) {
             return;
         }
-        ref.current = new SplitText(element, variables);
+        if (splitFirstElementChild && element.childElementCount > 1) {
+            // eslint-disable-next-line no-console
+            console.warn("Split text wrapper should only contain 1 element when 'splitFirstElementChild' is set to true");
+        }
+        ref.current = new SplitText(splitFirstElementChild ? element.firstElementChild : element, variables);
     };
     const Component = (as ?? 'div');
     return (_jsx(Component, { ...props, dangerouslySetInnerHTML: props.dangerouslySetInnerHTML ?? {

package/dist/gsap/hooks/useScrollAnimation/useScrollAnimation.js

@@ -1,4 +1,5 @@
 import gsap from 'gsap';
+// eslint-disable-next-line @typescript-eslint/naming-convention
 import ScrollTrigger from 'gsap/ScrollTrigger';
 import { useEffect, useRef } from 'react';
 import { animations } from '../../animations.js';

package/dist/gsap.d.ts

@@ -0,0 +1,8 @@
+export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
+export * from './gsap/hooks/useAnimation/useAnimation.js';
+export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
+export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
+export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
+export * from './gsap/hooks/useFlip/useFlip.js';
+export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
+export * from './gsap/utils/getAnimation/getAnimation.js';

package/dist/gsap.js

@@ -0,0 +1,8 @@
+export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
+export * from './gsap/hooks/useAnimation/useAnimation.js';
+export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
+export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
+export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
+export * from './gsap/hooks/useFlip/useFlip.js';
+export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
+export * from './gsap/utils/getAnimation/getAnimation.js';

package/dist/index.d.ts

@@ -1,13 +1,5 @@
 export * from './components/AutoAdjustFontSize/AutoAdjustFontSize.js';
 export * from './components/AutoFill/AutoFill.js';
-export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
-export * from './gsap/hooks/useAnimation/useAnimation.js';
-export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
-export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
-export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
-export * from './gsap/hooks/useFlip/useFlip.js';
-export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
-export * from './gsap/utils/getAnimation/getAnimation.js';
 export * from './hocs/ensuredForwardRef/ensuredForwardRef.js';
 export * from './hooks/useClientSideValue/useClientSideValue.js';
 export * from './hooks/useContentRect/useContentRect.js';
@@ -31,18 +23,19 @@ export * from './hooks/useRefs/utils/validateAndUnwrapRefs/validateAndUnwrapRefs
 export * from './hooks/useResizeObserver/useResizeObserver.js';
 export * from './hooks/useStaticValue/useStaticValue.js';
 export * from './hooks/useToggle/useToggle.js';
+export * from './lifecycle/components/CrossFlow/CrossFlow.js';
+export * from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
+export * from './lifecycle/components/TransitionPresence/TransitionPresence.js';
 export * from './lifecycle/hooks/useBeforeMount/useBeforeMount.js';
+export * from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';
 export * from './lifecycle/hooks/useIsMounted/useIsMounted.js';
 export * from './lifecycle/hooks/useIsMountedState/useIsMountedState.js';
 export * from './lifecycle/hooks/useMount/useMount.js';
 export * from './lifecycle/hooks/useUnmount/useUnmount.js';
-export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export * from './types/PolymorphicComponentProps/PolymorphicComponentProps.js';
 export * from './utils/adjustFontSize/adjustFontSize.js';
 export * from './utils/arrayRef/arrayRef.js';
 export * from './utils/createTimeout/createTimeout.js';
 export * from './utils/isRefObject/isRefObject.js';
+export * from './utils/regexPatterns/regexPatterns.js';
 export * from './utils/unref/unref.js';
-export { CrossFlow } from './lifecycle/components/CrossFlow/CrossFlow.js';
-export { TransitionPresenceContext } from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
-export { TransitionPresence } from './lifecycle/components/TransitionPresence/TransitionPresence.js';
-export { useBeforeUnmount, type BeforeUnmountCallback, } from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';

package/dist/index.js

@@ -1,14 +1,6 @@
 /* PLOP_ADD_EXPORT */
 export * from './components/AutoAdjustFontSize/AutoAdjustFontSize.js';
 export * from './components/AutoFill/AutoFill.js';
-export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
-export * from './gsap/hooks/useAnimation/useAnimation.js';
-export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
-export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
-export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
-export * from './gsap/hooks/useFlip/useFlip.js';
-export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
-export * from './gsap/utils/getAnimation/getAnimation.js';
 export * from './hocs/ensuredForwardRef/ensuredForwardRef.js';
 export * from './hooks/useClientSideValue/useClientSideValue.js';
 export * from './hooks/useContentRect/useContentRect.js';
@@ -32,19 +24,19 @@ export * from './hooks/useRefs/utils/validateAndUnwrapRefs/validateAndUnwrapRefs
 export * from './hooks/useResizeObserver/useResizeObserver.js';
 export * from './hooks/useStaticValue/useStaticValue.js';
 export * from './hooks/useToggle/useToggle.js';
+export * from './lifecycle/components/CrossFlow/CrossFlow.js';
+export * from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
+export * from './lifecycle/components/TransitionPresence/TransitionPresence.js';
 export * from './lifecycle/hooks/useBeforeMount/useBeforeMount.js';
+export * from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';
 export * from './lifecycle/hooks/useIsMounted/useIsMounted.js';
 export * from './lifecycle/hooks/useIsMountedState/useIsMountedState.js';
 export * from './lifecycle/hooks/useMount/useMount.js';
 export * from './lifecycle/hooks/useUnmount/useUnmount.js';
-export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export * from './types/PolymorphicComponentProps/PolymorphicComponentProps.js';
 export * from './utils/adjustFontSize/adjustFontSize.js';
 export * from './utils/arrayRef/arrayRef.js';
 export * from './utils/createTimeout/createTimeout.js';
 export * from './utils/isRefObject/isRefObject.js';
+export * from './utils/regexPatterns/regexPatterns.js';
 export * from './utils/unref/unref.js';
-// Custom exports for external use only
-export { CrossFlow } from './lifecycle/components/CrossFlow/CrossFlow.js';
-export { TransitionPresenceContext } from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
-export { TransitionPresence } from './lifecycle/components/TransitionPresence/TransitionPresence.js';
-export { useBeforeUnmount, } from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';

package/dist/nextjs.d.ts

@@ -0,0 +1 @@
+export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';

package/dist/nextjs.js

@@ -0,0 +1 @@
+export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';

package/dist/types/PolymorphicComponentProps/PolymorphicComponentProps.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';
+/**
+ * PropsFromAs is a type based on the supplied as prop.
+ */
+type PropsFromAs<Type extends ElementType> = {
+    as?: Type;
+};
+/**
+ * MergeAndOverride is a type that omits type keys from BaseTypes that are also present in OverrideProps.
+ */
+type MergeAndOverride<BaseType, OverrideProps> = Omit<BaseType, keyof OverrideProps> & OverrideProps;
+export type PolymorphicRef<Type extends ElementType> = ComponentPropsWithRef<Type>['ref'];
+export type PolymorphicComponentProps<BaseType extends ElementType, OwnProps = Record<string, never>> = PropsWithChildren<MergeAndOverride<ComponentPropsWithoutRef<BaseType>, PropsFromAs<BaseType> & OwnProps>>;
+export type PolymorphicComponentPropsWithRef<BaseType extends ElementType, OwnProps = Record<string, never>> = PolymorphicComponentProps<BaseType, OwnProps> & {
+    ref?: PolymorphicRef<BaseType>;
+};
+export {};

package/dist/types/PolymorphicComponentProps/PolymorphicComponentProps.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/regexPatterns/regexPatterns.d.ts

@@ -0,0 +1,24 @@
+/**
+ * PascalCaseString
+ * MyComponent
+ * MyComponent5
+ * MyC0mp0nent
+ * My00mponent
+ */
+export declare const pascalCaseRegex: RegExp;
+/**
+ * @example
+ * camelCaseString
+ * helloW0rld
+ * g00M0rning
+ * happyC0ding
+ */
+export declare const camelCaseRegex: RegExp;
+/**
+ * @example
+ * my-component
+ * my-component-5
+ * my-c0mp0nent
+ * c0ding1sfun
+ */
+export declare const kebabCaseRegex: RegExp;

package/dist/utils/regexPatterns/regexPatterns.js

@@ -0,0 +1,27 @@
+/**
+ * PascalCaseString
+ * MyComponent
+ * MyComponent5
+ * MyC0mp0nent
+ * My00mponent
+ */
+// eslint-disable-next-line unicorn/no-unsafe-regex
+export const pascalCaseRegex = /^(?:[A-Z][\da-z]+)+$/u;
+/**
+ * @example
+ * camelCaseString
+ * helloW0rld
+ * g00M0rning
+ * happyC0ding
+ */
+// eslint-disable-next-line unicorn/no-unsafe-regex
+export const camelCaseRegex = /^[\da-z]+(?:[A-Z][\da-z]+)*$/u;
+/**
+ * @example
+ * my-component
+ * my-component-5
+ * my-c0mp0nent
+ * c0ding1sfun
+ */
+// eslint-disable-next-line unicorn/no-unsafe-regex
+export const kebabCaseRegex = /^[\da-z]+(?:-[\da-z]+)*$/u;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediamonks/react-kit",
-  "version": "1.0.3",
+  "version": "2.0.5",
   "description": "A collection of React hooks, components, utilities that we use at Media.Monks",
   "keywords": [
     "react",
@@ -17,7 +17,9 @@
   "types": "./dist/index.d.ts",
   "module": "./dist/index.js",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.js",
+    "./gsap": "./dist/gsap.js",
+    "./nextjs": "./dist/nextjs.js"
   },
   "type": "module",
   "files": [
@@ -25,8 +27,7 @@
     "README.md"
   ],
   "publishConfig": {
-    "access": "public",
-    "provenance": false
+    "access": "public"
   },
   "scripts": {
     "build": "npm-run-all -s clean build:*",
@@ -50,73 +51,43 @@
     "prepare": "husky install"
   },
   "prettier": "@mediamonks/prettier-config",
-  "eslintConfig": {
-    "overrides": [
-      {
-        "files": [
-          "*.ts",
-          "*.tsx"
-        ],
-        "extends": [
-          "@mediamonks/eslint-config",
-          "@mediamonks/eslint-config-react",
-          "@mediamonks/eslint-config-typescript",
-          "@mediamonks/eslint-config-typescript-react"
-        ],
-        "parserOptions": {
-          "project": "./tsconfig.json"
-        }
-      },
-      {
-        "files": [
-          "*.cjs",
-          "*.js",
-          "*.jsx",
-          "*.mjs"
-        ],
-        "extends": [
-          "@mediamonks/eslint-config"
-        ],
-        "parserOptions": {
-          "ecmaVersion": "latest"
-        }
-      }
-    ]
-  },
   "devDependencies": {
-    "@mediamonks/eslint-config": "^2.0.6",
-    "@mediamonks/eslint-config-react": "^2.1.11",
-    "@mediamonks/eslint-config-typescript": "^1.0.8",
-    "@mediamonks/eslint-config-typescript-react": "^1.0.10",
+    "@mediamonks/eslint-config": "^2.5.0",
+    "@mediamonks/eslint-config-react": "^2.6.0",
+    "@mediamonks/eslint-config-typescript": "^1.5.1",
+    "@mediamonks/eslint-config-typescript-react": "^1.4.1",
     "@mediamonks/prettier-config": "^1.0.1",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/cli": "^7.5.2",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-links": "^8.5.2",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/cli": "^8.5.2",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-vite": "^7.5.2",
-    "@storybook/test-runner": "^0.13.0",
+    "@storybook/manager-api": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-vite": "^8.5.2",
+    "@storybook/test-runner": "^0.21.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/types": "^7.5.2",
-    "@testing-library/react": "^14.0.0",
+    "@storybook/theming": "^8.5.2",
+    "@storybook/types": "^8.5.2",
+    "@testing-library/react": "^16.2.0",
     "@types/lodash-es": "^4.17.11",
     "@types/react": "^18.0.25",
     "@vitejs/plugin-react": "^4.0.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.28.0",
+    "gsap": "npm:@gsap/business@3.12.2",
     "http-server": "^14.1.1",
     "husky": "^8.0.0",
     "jsdom": "^22.0.0",
     "lint-staged": "^13.1.0",
     "npm-run-all": "^4.1.5",
     "plop": "^4.0.0",
-    "prettier": "^2.8.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "prettier": "^3.2.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "shx": "^0.3.4",
-    "storybook": "^7.5.2",
+    "storybook": "^8.5.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",
     "vitest": "^0.34.3",
@@ -126,9 +97,6 @@
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
-    "react": ">= 17"
-  },
-  "optionalDependencies": {
-    "gsap": "npm:@gsap/business@3.12.2"
+    "react": ">= 18"
   }
 }