@atlaskit/app-provider 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/app-provider
 
+## 0.3.0
+
+### Minor Changes
+
+- [#42091](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42091) [`4ec3142822b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ec3142822b) - Add the `routerLinkComponent` prop to support router link configuration within the Design System.
+
 ## 0.2.0
 
 ### Minor Changes

package/constellation/index/examples.mdx

@@ -4,6 +4,7 @@ order: 0
 
 import defaultExample from '../../examples/constellation/0-default';
 import themeSwitcherExample from '../../examples/constellation/1-theme-switcher';
+import RouterLinkComponentExample from '../../examples/constellation/2-router-link-component';
 
 ## Theming
 
@@ -26,3 +27,17 @@ The `useTheme` hook can be used to get the active themes. The `useSetTheme` hook
   source={themeSwitcherExample.code}
   packageName="@atlaskit/app-provider"
 />
+
+## Router links
+
+The `routerLinkComponent` prop provides support for configuring router links within Design System components.
+
+Support for this is limited as Design System components are being updated, starting with `@atlaskit/button`.
+
+This example shows how links can be configured to utilize the router link component supplied by [React Resource Router](https://github.com/atlassian-labs/react-resource-router), however any routing library can be used.
+
+<Example
+  Component={RouterLinkComponentExample}
+  appearance="source-only"
+  packageName="@atlaskit/app-provider"
+/>

package/dist/cjs/app-provider.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.AppProvider = AppProvider;
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _routerLinkProvider = _interopRequireDefault(require("./router-link-provider"));
 var _themeProvider = _interopRequireDefault(require("./theme-provider"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,7 +24,8 @@ function AppProvider(_ref) {
   var children = _ref.children,
     _ref$defaultColorMode = _ref.defaultColorMode,
     defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,
-    defaultTheme = _ref.defaultTheme;
+    defaultTheme = _ref.defaultTheme,
+    routerLinkComponent = _ref.routerLinkComponent;
   var isInsideAppProvider = (0, _react.useContext)(InsideAppProviderContext);
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');
@@ -33,6 +35,8 @@ function AppProvider(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_themeProvider.default, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, children));
+  }, /*#__PURE__*/_react.default.createElement(_routerLinkProvider.default, {
+    routerLinkComponent: routerLinkComponent
+  }, children)));
 }
 var _default = exports.default = AppProvider;

package/dist/cjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "useColorMode", {
     return _themeProvider.useColorMode;
   }
 });
+Object.defineProperty(exports, "useRouterLink", {
+  enumerable: true,
+  get: function get() {
+    return _useRouterLink.default;
+  }
+});
 Object.defineProperty(exports, "useSetColorMode", {
   enumerable: true,
   get: function get() {
@@ -35,4 +41,5 @@ Object.defineProperty(exports, "useTheme", {
   }
 });
 var _appProvider = _interopRequireDefault(require("./app-provider"));
-var _themeProvider = require("./theme-provider");
+var _themeProvider = require("./theme-provider");
+var _useRouterLink = _interopRequireDefault(require("./router-link-provider/hooks/use-router-link"));

package/dist/cjs/router-link-provider/hooks/use-router-link.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _index = require("../index");
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+var useRouterLink = function useRouterLink() {
+  var _useContext = (0, _react.useContext)(_index.RouterLinkProviderContext),
+    routerLinkComponent = _useContext.routerLinkComponent;
+  return routerLinkComponent;
+};
+var _default = exports.default = useRouterLink;

package/dist/cjs/router-link-provider/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RouterLinkProviderContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var RouterLinkProviderContext = exports.RouterLinkProviderContext = /*#__PURE__*/(0, _react.createContext)({});
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+var RouterLinkProvider = function RouterLinkProvider(_ref) {
+  var routerLinkComponent = _ref.routerLinkComponent,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(RouterLinkProviderContext.Provider, {
+    value: {
+      routerLinkComponent: routerLinkComponent
+    }
+  }, children);
+};
+var _default = exports.default = RouterLinkProvider;

package/dist/es2019/app-provider.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext } from 'react';
+import RouterLinkProvider from './router-link-provider';
 import ThemeProvider from './theme-provider';
 const InsideAppProviderContext = /*#__PURE__*/createContext(false);
 /**
@@ -11,7 +12,8 @@ const InsideAppProviderContext = /*#__PURE__*/createContext(false);
 export function AppProvider({
   children,
   defaultColorMode = 'light',
-  defaultTheme
+  defaultTheme,
+  routerLinkComponent
 }) {
   const isInsideAppProvider = useContext(InsideAppProviderContext);
   if (isInsideAppProvider) {
@@ -22,6 +24,8 @@ export function AppProvider({
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, children));
+  }, /*#__PURE__*/React.createElement(RouterLinkProvider, {
+    routerLinkComponent: routerLinkComponent
+  }, children)));
 }
 export default AppProvider;

package/dist/es2019/index.js

@@ -1,2 +1,4 @@
 export { default } from './app-provider';
-export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+import useRouterLink from './router-link-provider/hooks/use-router-link';
+export { useRouterLink };

package/dist/es2019/router-link-provider/hooks/use-router-link.js

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { RouterLinkProviderContext } from '../index';
+
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+const useRouterLink = () => {
+  const {
+    routerLinkComponent
+  } = useContext(RouterLinkProviderContext);
+  return routerLinkComponent;
+};
+export default useRouterLink;

package/dist/es2019/router-link-provider/index.js

@@ -0,0 +1,19 @@
+import React, { createContext } from 'react';
+export const RouterLinkProviderContext = /*#__PURE__*/createContext({});
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+const RouterLinkProvider = ({
+  routerLinkComponent,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(RouterLinkProviderContext.Provider, {
+    value: {
+      routerLinkComponent
+    }
+  }, children);
+};
+export default RouterLinkProvider;

package/dist/esm/app-provider.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext } from 'react';
+import RouterLinkProvider from './router-link-provider';
 import ThemeProvider from './theme-provider';
 var InsideAppProviderContext = /*#__PURE__*/createContext(false);
 /**
@@ -12,7 +13,8 @@ export function AppProvider(_ref) {
   var children = _ref.children,
     _ref$defaultColorMode = _ref.defaultColorMode,
     defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,
-    defaultTheme = _ref.defaultTheme;
+    defaultTheme = _ref.defaultTheme,
+    routerLinkComponent = _ref.routerLinkComponent;
   var isInsideAppProvider = useContext(InsideAppProviderContext);
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');
@@ -22,6 +24,8 @@ export function AppProvider(_ref) {
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, children));
+  }, /*#__PURE__*/React.createElement(RouterLinkProvider, {
+    routerLinkComponent: routerLinkComponent
+  }, children)));
 }
 export default AppProvider;

package/dist/esm/index.js

@@ -1,2 +1,4 @@
 export { default } from './app-provider';
-export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+import useRouterLink from './router-link-provider/hooks/use-router-link';
+export { useRouterLink };

package/dist/esm/router-link-provider/hooks/use-router-link.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { RouterLinkProviderContext } from '../index';
+
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+var useRouterLink = function useRouterLink() {
+  var _useContext = useContext(RouterLinkProviderContext),
+    routerLinkComponent = _useContext.routerLinkComponent;
+  return routerLinkComponent;
+};
+export default useRouterLink;

package/dist/esm/router-link-provider/index.js

@@ -0,0 +1,18 @@
+import React, { createContext } from 'react';
+export var RouterLinkProviderContext = /*#__PURE__*/createContext({});
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+var RouterLinkProvider = function RouterLinkProvider(_ref) {
+  var routerLinkComponent = _ref.routerLinkComponent,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(RouterLinkProviderContext.Provider, {
+    value: {
+      routerLinkComponent: routerLinkComponent
+    }
+  }, children);
+};
+export default RouterLinkProvider;

package/dist/types/app-provider.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type RouterLinkComponent } from './router-link-provider';
 import { type ColorMode, type Theme } from './theme-provider';
 interface AppProviderProps {
     /**
@@ -9,6 +10,10 @@ interface AppProviderProps {
      * Theme settings.
      */
     defaultTheme?: Partial<Theme>;
+    /**
+     * A configured router link component.
+     */
+    routerLinkComponent?: RouterLinkComponent<any>;
     /**
      * App content.
      */
@@ -21,5 +26,5 @@ interface AppProviderProps {
  *
  * Place it at the root of your application.
  */
-export declare function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+export declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, }: AppProviderProps): JSX.Element;
 export default AppProvider;

package/dist/types/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './app-provider';
 export { useColorMode, useSetColorMode, useSetTheme, useTheme, } from './theme-provider';
+export { type RouterLinkComponentProps } from './router-link-provider';
+import useRouterLink from './router-link-provider/hooks/use-router-link';
+export { useRouterLink };

package/dist/types/router-link-provider/hooks/use-router-link.d.ts

@@ -0,0 +1,8 @@
+import { type RouterLinkComponent } from '../index';
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+declare const useRouterLink: () => RouterLinkComponent | undefined;
+export default useRouterLink;

package/dist/types/router-link-provider/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export type RouterLinkComponent<RouterLinkConfig extends {} = {}> = React.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+    /**
+     * A string which can be mapped to the underlying router link,
+     * or optionally a custom object defined in the generic type for advanced use.
+     *
+     * @example
+     * ```
+     * const MyRouterLink: RouterLinkComponent<{
+     *  to: string;
+     *  replace?: boolean;
+     * }> ...
+     * ```
+     */
+    href: string | RouterLinkConfig;
+    children: React.ReactNode;
+};
+export type RouterLinkProviderContextProps<RouterLinkConfig extends {} = {}> = {
+    routerLinkComponent?: RouterLinkComponent<RouterLinkConfig>;
+};
+export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<{}>>;
+export type RouterLinkProviderProps = {
+    /**
+     * The rendering mechanism of router links within Design System components.
+     */
+    routerLinkComponent?: RouterLinkComponent<any>;
+};
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+declare const RouterLinkProvider: ({ routerLinkComponent, children, }: RouterLinkProviderProps & {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default RouterLinkProvider;

package/dist/types-ts4.5/app-provider.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type RouterLinkComponent } from './router-link-provider';
 import { type ColorMode, type Theme } from './theme-provider';
 interface AppProviderProps {
     /**
@@ -9,6 +10,10 @@ interface AppProviderProps {
      * Theme settings.
      */
     defaultTheme?: Partial<Theme>;
+    /**
+     * A configured router link component.
+     */
+    routerLinkComponent?: RouterLinkComponent<any>;
     /**
      * App content.
      */
@@ -21,5 +26,5 @@ interface AppProviderProps {
  *
  * Place it at the root of your application.
  */
-export declare function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+export declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, }: AppProviderProps): JSX.Element;
 export default AppProvider;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './app-provider';
 export { useColorMode, useSetColorMode, useSetTheme, useTheme, } from './theme-provider';
+export { type RouterLinkComponentProps } from './router-link-provider';
+import useRouterLink from './router-link-provider/hooks/use-router-link';
+export { useRouterLink };

package/dist/types-ts4.5/router-link-provider/hooks/use-router-link.d.ts

@@ -0,0 +1,8 @@
+import { type RouterLinkComponent } from '../index';
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+declare const useRouterLink: () => RouterLinkComponent | undefined;
+export default useRouterLink;

package/dist/types-ts4.5/router-link-provider/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export type RouterLinkComponent<RouterLinkConfig extends {} = {}> = React.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+    /**
+     * A string which can be mapped to the underlying router link,
+     * or optionally a custom object defined in the generic type for advanced use.
+     *
+     * @example
+     * ```
+     * const MyRouterLink: RouterLinkComponent<{
+     *  to: string;
+     *  replace?: boolean;
+     * }> ...
+     * ```
+     */
+    href: string | RouterLinkConfig;
+    children: React.ReactNode;
+};
+export type RouterLinkProviderContextProps<RouterLinkConfig extends {} = {}> = {
+    routerLinkComponent?: RouterLinkComponent<RouterLinkConfig>;
+};
+export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<{}>>;
+export type RouterLinkProviderProps = {
+    /**
+     * The rendering mechanism of router links within Design System components.
+     */
+    routerLinkComponent?: RouterLinkComponent<any>;
+};
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+declare const RouterLinkProvider: ({ routerLinkComponent, children, }: RouterLinkProviderProps & {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default RouterLinkProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/app-provider",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A top level provider for the Design System.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -57,6 +57,8 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "react-dom": "^16.8.0",
+    "react-resource-router": "^0.20.0",
+    "react-router-dom": "^4.2.2",
     "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
   },

package/report.api.md

@@ -23,6 +23,7 @@ function AppProvider({
   children,
   defaultColorMode,
   defaultTheme,
+  routerLinkComponent,
 }: AppProviderProps): JSX.Element;
 export default AppProvider;
 
@@ -31,6 +32,7 @@ interface AppProviderProps {
   children: React_2.ReactNode;
   defaultColorMode?: ColorMode;
   defaultTheme?: Partial<Theme>;
+  routerLinkComponent?: RouterLinkComponent<any>;
 }
 
 // @public (undocumented)
@@ -39,12 +41,25 @@ type ColorMode = 'auto' | 'dark' | 'light';
 // @public (undocumented)
 type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 
+// @public (undocumented)
+type RouterLinkComponent<RouterLinkConfig extends {} = {}> =
+  React_2.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+
+// @public (undocumented)
+export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+  href: RouterLinkConfig | string;
+  children: React_2.ReactNode;
+};
+
 // @public (undocumented)
 type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 
 // @public
 export function useColorMode(): ReconciledColorMode;
 
+// @public
+export const useRouterLink: () => RouterLinkComponent | undefined;
+
 // @public
 export function useSetColorMode(): (value: ColorMode) => void;
 

package/tmp/api-report-tmp.d.ts

@@ -8,7 +8,7 @@ import { default as React_2 } from 'react';
 import { ThemeState } from '@atlaskit/tokens';
 
 // @public
-function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, }: AppProviderProps): JSX.Element;
 export default AppProvider;
 
 // @public (undocumented)
@@ -16,6 +16,7 @@ interface AppProviderProps {
     children: React_2.ReactNode;
     defaultColorMode?: ColorMode;
     defaultTheme?: Partial<Theme>;
+    routerLinkComponent?: RouterLinkComponent<any>;
 }
 
 // @public (undocumented)
@@ -24,12 +25,24 @@ type ColorMode = 'auto' | 'dark' | 'light';
 // @public (undocumented)
 type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 
+// @public (undocumented)
+type RouterLinkComponent<RouterLinkConfig extends {} = {}> = React_2.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+
+// @public (undocumented)
+export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+    href: RouterLinkConfig | string;
+    children: React_2.ReactNode;
+};
+
 // @public (undocumented)
 type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 
 // @public
 export function useColorMode(): ReconciledColorMode;
 
+// @public
+export const useRouterLink: () => RouterLinkComponent | undefined;
+
 // @public
 export function useSetColorMode(): (value: ColorMode) => void;