@moda/om 20.2.0 → 21.0.0-next.1

package/dist/src/components/Clickable/Clickable.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { LinkProps } from 'react-router-dom';
+import React, { ReactNode } from 'react';
+import { LinkProps as NextLinkProps } from 'next/link';
 import './Clickable.scss';
 type ButtonElProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 type AnchorElProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
@@ -7,5 +7,10 @@ export type ClickableProps = {
     disabled?: boolean;
     styleless?: boolean;
 } & (ButtonElProps | AnchorElProps | LinkProps);
+type LinkProps = NextLinkProps & {
+    to: string;
+    className?: string;
+    children?: ReactNode;
+};
 export declare const Clickable: React.ForwardRefExoticComponent<ClickableProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export {};

package/dist/src/components/NavigationPreventer/NavigationPreventer.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { PromptProps } from 'react-router-dom';
 interface Props {
-    message?: PromptProps['message'];
+    message?: string;
     enabled: boolean | undefined;
 }
 export declare const NavigationPreventer: React.FC<Props>;

package/dist/src/index.d.ts

@@ -1,4 +1,3 @@
-import 'focus-visible';
 export declare const tokens: {
     colors: {
         all: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "20.2.0",
+  "version": "21.0.0-next.1",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -48,7 +48,7 @@
   "peerDependencies": {
     "react": ">=18.1.0",
     "react-dom": ">=18.1.0",
-    "react-router-dom": "^5.1.2"
+    "next": ">=15.0.0"
   },
   "dependencies": {
     "@moda/icons": "^5.29.9",
@@ -57,7 +57,7 @@
     "@types/classnames": "^2.3.4",
     "classnames": "^2.5.1",
     "credit-card-type": "^10.0.1",
-    "focus-visible": "^5.2.1",
+    "next": "^15.0.2",
     "proportional-scale": "^4.0.0",
     "react-focus-on": "^3.9.4",
     "react-input-mask": "^2.0.4",
@@ -97,7 +97,6 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-input-mask": "^3.0.5",
-    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.11.0",
     "@typescript-eslint/parser": "^8.11.0",
     "autoprefixer": "^10.4.20",
@@ -134,7 +133,6 @@
     "ramda": "^0.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^5.1.2",
     "rollup": "^4.24.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^4.0.0",

package/src/components/Button/Button.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
 
@@ -64,13 +63,11 @@ export const PrimaryWithHref = () => (
 );
 
 export const PrimaryAsReactRouterLink = () => (
-  <BrowserRouter>
-    <States<ButtonProps> states={[{}, { hover: true }, { focus: true }, { disabled: true }]}>
-      <Button to='#href' onClick={action('clicked')}>
-        Add to Cart
-      </Button>
-    </States>
-  </BrowserRouter>
+  <States<ButtonProps> states={[{}, { hover: true }, { focus: true }, { disabled: true }]}>
+    <Button to='#href' onClick={action('clicked')}>
+      Add to Cart
+    </Button>
+  </States>
 );
 
 export const PrimaryWithIcon = () => (

package/src/components/Clickable/Clickable.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
-import { BrowserRouter } from 'react-router-dom';
 import { Clickable, ClickableProps } from './Clickable';
 
 export default { title: 'Components/Clickable' };
@@ -21,9 +20,7 @@ export const Anchor = () => (
 );
 
 export const Link = () => (
-  <BrowserRouter>
-    <States<ClickableProps>>
-      <Clickable to='#href'>Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
-    </States>
-  </BrowserRouter>
+  <States<ClickableProps>>
+    <Clickable to='#href'>Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
+  </States>
 );

package/src/components/Clickable/Clickable.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
-import { Link, LinkProps } from 'react-router-dom';
+import Link, { LinkProps as NextLinkProps } from 'next/link';
 
 import './Clickable.scss';
 
@@ -12,6 +12,8 @@ export type ClickableProps = {
   styleless?: boolean;
 } & (ButtonElProps | AnchorElProps | LinkProps);
 
+type LinkProps = NextLinkProps & { to: string; className?: string; children?: ReactNode };
+
 const isLink = (props: ButtonElProps | AnchorElProps | LinkProps): props is LinkProps =>
   'to' in props;
 const isAnchor = (props: ButtonElProps | AnchorElProps | LinkProps): props is AnchorElProps =>
@@ -30,7 +32,8 @@ export const Clickable = React.forwardRef(
       disabled
     };
 
-    if (isLink(props)) return <Link {...props} ref={ref as React.Ref<HTMLAnchorElement>} />;
+    if (isLink(props))
+      return <Link {...props} href={props.to} ref={ref as React.Ref<HTMLAnchorElement>} />;
     if (isAnchor(props)) return <a {...props} ref={ref as React.Ref<HTMLAnchorElement>} />;
     if (isButton(props)) return <button {...props} ref={ref as React.Ref<HTMLButtonElement>} />;
 

package/src/components/ControlLink/ControlLink.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
-import { BrowserRouter } from 'react-router-dom';
 import { ControlLink, ControlLinkProps } from './ControlLink';
 
 export default { title: 'Components/ControlLink' };
@@ -15,17 +14,13 @@ const states = [
 ];
 
 export const Underlined = () => (
-  <BrowserRouter>
-    <States<ControlLinkProps> states={states}>
-      <ControlLink>Underlined Control Link</ControlLink>
-    </States>
-  </BrowserRouter>
+  <States<ControlLinkProps> states={states}>
+    <ControlLink>Underlined Control Link</ControlLink>
+  </States>
 );
 
 export const Blank = () => (
-  <BrowserRouter>
-    <States<ControlLinkProps> states={states}>
-      <ControlLink underlined={false}>Blank Control Link</ControlLink>
-    </States>
-  </BrowserRouter>
+  <States<ControlLinkProps> states={states}>
+    <ControlLink underlined={false}>Blank Control Link</ControlLink>
+  </States>
 );

package/src/components/NavigationPreventer/NavigationPreventer.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import { Prompt, PromptProps } from 'react-router-dom';
 import { usePreventNavigation } from './usePreventNavigation';
 
 interface Props {
-  message?: PromptProps['message'];
+  message?: string;
   enabled: boolean | undefined;
 }
 
 export const NavigationPreventer: React.FC<Props> = ({
-  enabled = false,
-  message = 'Changes that you made may not be saved.'
+  enabled = false
+  // message = 'Changes that you made may not be saved.'
 }) => {
   usePreventNavigation(enabled);
 
-  return <Prompt when={enabled} message={message} />;
+  // TODO: implement this with next.js https://github.com/vercel/next.js/discussions/32231
+  return null;
 };

package/src/index.ts

@@ -1,5 +1,3 @@
-import 'focus-visible';
-
 import { colors, typography, space, breakpoints } from '@moda/tokens';
 
 import { States } from './utilities';