♻️ (createCanal) deprecate createCanal API

Author: tpucci

docs/components/Warning.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export function Warning(props: { children: string }) {
+  return (
+    <View
+      style={{
+        padding: 8,
+        backgroundColor: '#eee',
+        borderLeftWidth: 3,
+        borderLeftColor: '#fdcb00',
+        borderRadius: 4,
+      }}
+    >
+      <Text style={{ fontWeight: 'bold', fontSize: 16 }}>⚠️ Warning</Text>
+      <Text style={{ marginTop: 4 }}>{props.children}</Text>
+    </View>
+  );
+}

doczrc.js

@@ -15,6 +15,7 @@ module.exports = {
   modifyBundlerConfig: config => {
     // Combine the default docz aliases with our custom aliases.
     config.resolve.alias = Object.assign({}, config.resolve.alias, {
+      components: path.resolve(__dirname, 'docs/components/'),
       'react-native$': 'react-native-web',
       'react-gondola$': path.resolve(__dirname, 'src/index.ts'), // eslint-disable-line
       'react-gondola/transitions$': path.resolve(__dirname, 'src/transitions/index.ts'), // eslint-disable-line

src/createCanal.mdx

@@ -4,7 +4,13 @@ menu: API
 route: /api/create-canal
 ---
 
-# createCanal
+# [deprecated] createCanal
+
+import { Warning } from 'components/Warning';
+
+<Warning>
+  This API is deprecated and will be removed in the next major release; i.e. in `react-gondola` 2.
+</Warning>
 
 `type: <Authorizations = { [K in Stop['name']]?: boolean }>(stopsList: Stop[]): ComponentType<CanalComponentProps<Authorizations>>`
 
@@ -55,15 +61,15 @@ MobX Strem Listener of list of local Stops. All full screen stops are filtered o
 Link your pages in a canal.
 
 ```tsx
-import React from "react";
-import { createCanal } from "react-gondola";
-import { FirstName } from "./FirstName";
-import { LastName } from "./LastName";
-import { Confirm } from "./Confirm";
+import React from 'react';
+import { createCanal } from 'react-gondola';
+import { FirstName } from './FirstName';
+import { LastName } from './LastName';
+import { Confirm } from './Confirm';
 
 export const SignInCanal = createCanal([
-  { name: "firstName", Component: FirstName },
-  { name: "lastName", Component: LastName },
-  { name: "confirm", Component: Confirm, isFullScreen: true }
+  { name: 'firstName', Component: FirstName },
+  { name: 'lastName', Component: LastName },
+  { name: 'confirm', Component: Confirm, isFullScreen: true },
 ]);
 ```

src/createCanal.tsx

@@ -21,6 +21,9 @@ export interface CanalInterface {
   back$: Observable<BackEvent>;
 }
 
+/**
+ * @deprecated This will be removed in the next major.
+ */
 export const createCanal = <
   StopName extends string,
   Stop extends StopInterface<StopName>,