@coveord/plasma-mantine 49.0.2 → 49.1.0

package/src/utils/__tests__/overrideComponent.spec.tsx

@@ -0,0 +1,74 @@
+import {render} from '@test-utils';
+import {ReactNode} from 'react';
+
+import {overrideComponent} from '../overrideComponent';
+
+describe('overrideComponent', () => {
+    it('overrides the specified properties on the component and copies over the rest', () => {
+        const Component = () => <div>hello world</div>;
+        Component.displayName = 'hello world';
+        Component.One = () => <span>one</span>;
+        Component.Two = () => <span>two</span>;
+
+        const NewComponent = overrideComponent(Component, {
+            displayName: 'hello new world',
+            One: (props: {children: ReactNode}) => <span>{props.children}</span>,
+        });
+
+        expect(NewComponent.displayName).toBe('hello new world');
+
+        const {container, rerender} = render(<Component />);
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <div>
+                hello world
+              </div>
+            </div>
+        `);
+
+        rerender(<NewComponent />);
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <div>
+                hello world
+              </div>
+            </div>
+        `);
+
+        rerender(<Component.One />);
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span>
+                one
+              </span>
+            </div>
+        `);
+
+        rerender(<NewComponent.One>1</NewComponent.One>);
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span>
+                1
+              </span>
+            </div>
+        `);
+
+        rerender(<Component.Two />);
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span>
+                two
+              </span>
+            </div>
+        `);
+
+        rerender(<NewComponent.Two />);
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <span>
+                two
+              </span>
+            </div>
+        `);
+    });
+});

package/src/utils/createPolymorphicComponent.ts

@@ -0,0 +1,8 @@
+import {createPolymorphicComponent as mantineCreatePolymorphicComponent} from '@mantine/utils';
+
+/*
+ * createPolymorphicComponent is already exported from @mantine/core, but there is an issue when using pnpm + typescript
+ * that forces us to use it directly from @mantine/utils (see https://github.com/microsoft/TypeScript/issues/47663)
+ * We are simply rexporting it here to avoid having to deal with this issue everywhere
+ */
+export const createPolymorphicComponent = mantineCreatePolymorphicComponent;

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './createPolymorphicComponent';
+export * from './overrideComponent';

package/src/utils/overrideComponent.ts

@@ -0,0 +1,18 @@
+/**
+ * Allows to override static properties from a component function
+ *
+ * @param component The component which holds the static properties
+ * @param properties The new static properties to assign on the component
+ * @returns A new component with the specified properties. It doesn't change the original component
+ * @example const Menu = overrideComponent(MantineMenu, {Item: MyMenuItem}); // Menu.Item will equal MyMenuItem
+ */
+export const overrideComponent = <
+    Component extends (...args: Parameters<Component>) => ReturnType<Component>,
+    StaticProperties = Record<keyof Component, never>
+>(
+    component: Component,
+    properties: StaticProperties
+): ((...args: Parameters<Component>) => ReturnType<Component>) & Component & StaticProperties => {
+    const componentClone = (...args: Parameters<Component>) => component(...args);
+    return Object.assign(componentClone, component, properties);
+};