Resolve packages names to example imports (#300)

* add packages names in examples import * storybook/add webpack configurations
reach · Oct 14, 2019 · 7f9fde3 · 7f9fde3
1 parent 1cd033a
commit 7f9fde3
Show file tree

Hide file tree

Showing 49 changed files with 101 additions and 54 deletions.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -0,0 +1,35 @@
+const path = require("path");
+
+module.exports = ({ config }) => {
+  const packagesPath = path.resolve(__dirname, "../packages");
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      "@reach/alert": path.join(packagesPath, "/alert/src/"),
+      "@reach/alert-dailog": path.join(packagesPath, "/alert-dailog/src/"),
+      "@reach/auto-id": path.join(packagesPath, "/auto-id/src/"),
+      "@reach/combobox": path.join(packagesPath, "/combobox/src/"),
+      "@reach/component-component": path.join(
+        packagesPath,
+        "/component-component/src/"
+      ),
+      "@reach/dailog": path.join(packagesPath, "/dailog/src/"),
+      "@reach/menu-button": path.join(packagesPath, "/menu-button/src/"),
+      "@reach/popover": path.join(packagesPath, "/popover/src/"),
+      "@reach/portal": path.join(packagesPath, "/portal/src/"),
+      "@reach/rect": path.join(packagesPath, "/rect/src/"),
+      "@reach/skip-nav": path.join(packagesPath, "/skip-nav/src/"),
+      "@reach/slider": path.join(packagesPath, "/slider/src/"),
+      "@reach/tabs": path.join(packagesPath, "/tabs/src/"),
+      "@reach/tooltip": path.join(packagesPath, "/tooltip/src/"),
+      "@reach/utils": path.join(packagesPath, "/utils/src/"),
+      "@reach/visually-hidden": path.join(
+        packagesPath,
+        "/visually-hidden/src/"
+      ),
+      "@reach/window-size": path.join(packagesPath, "/window-size/src/")
+    },
+    extensions: [".js"]
+  };
+  return config;
+};
diff --git a/packages/alert/examples/basic.example.js b/packages/alert/examples/basic.example.js
@@ -1,7 +1,7 @@
 import React from "react";
-import Alert from "../src/index";
-import Component from "../../component-component/src";
-import VisuallyHidden from "../../visually-hidden/src";
+import Alert from "@reach/alert";
+import Component from "@reach/component-component";
+import VisuallyHidden from "@reach/visually-hidden";
 
 export let name = "Basic";
 

diff --git a/packages/combobox/examples/basic.example.js b/packages/combobox/examples/basic.example.js
@@ -6,7 +6,7 @@ import {
   ComboboxList,
   ComboboxOption,
   ComboboxPopover
-} from "../src/index";
+} from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
 import cities from "./cities";

diff --git a/packages/combobox/examples/controlled.example.js b/packages/combobox/examples/controlled.example.js
@@ -6,7 +6,7 @@ import {
   ComboboxList,
   ComboboxOption,
   ComboboxPopover
-} from "../src/index";
+} from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
 import cities from "./cities";

diff --git a/packages/combobox/examples/lots-of-elements.example.js b/packages/combobox/examples/lots-of-elements.example.js
@@ -6,7 +6,7 @@ import {
   ComboboxList,
   ComboboxOption,
   ComboboxPopover
-} from "../src/index";
+} from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
 import cities from "./cities";

diff --git a/packages/combobox/examples/no-popover.example.js b/packages/combobox/examples/no-popover.example.js
@@ -6,7 +6,7 @@ import {
   ComboboxList,
   ComboboxPopover,
   ComboboxOption
-} from "../src/index";
+} from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
 import cities from "./cities";

diff --git a/packages/combobox/examples/with-button.example.js b/packages/combobox/examples/with-button.example.js
@@ -7,7 +7,7 @@ import {
   ComboboxPopover,
   ComboboxOption,
   ComboboxButton
-} from "../src/index";
+} from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
 import cities from "./cities";

diff --git a/packages/component-component/examples/lifecycles.example.js b/packages/component-component/examples/lifecycles.example.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Component from "../src/index";
+import Component from "@reach/component-component";
 
 export let name = "Lifecycles and Refs";
 

diff --git a/packages/component-component/examples/state.example.js b/packages/component-component/examples/state.example.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Component from "../src/index";
+import Component from "@reach/component-component";
 
 export let name = "Basic State";
 

diff --git a/packages/component-component/examples/todo-list.example.js b/packages/component-component/examples/todo-list.example.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import Component from "../src/index";
+import Component from "@reach/component-component";
 
 export let name = "Kitchen Sink Todo List";
 

diff --git a/packages/dialog/examples/aria-hides-content.example.js b/packages/dialog/examples/aria-hides-content.example.js
@@ -2,7 +2,7 @@ import React from "react";
 import Component from "@reach/component-component";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "Aria Hides Content";
 

diff --git a/packages/dialog/examples/autofocus.example.js b/packages/dialog/examples/autofocus.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Component from "@reach/component-component";
 import "../styles.css";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "Autofocus";
 

diff --git a/packages/dialog/examples/basic.example.js b/packages/dialog/examples/basic.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Component from "@reach/component-component";
 import "../styles.css";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "Basic";
 

diff --git a/packages/dialog/examples/change-styles.example.js b/packages/dialog/examples/change-styles.example.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTransition, animated, config } from "react-spring/web.cjs";
-import { DialogOverlay, DialogContent } from "../src/index";
+import { DialogOverlay, DialogContent } from "@reach/dialog";
 import "../styles.css";
 
 export let name = "Change Styles";

diff --git a/packages/dialog/examples/destroy-trigger.example.js b/packages/dialog/examples/destroy-trigger.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Component from "@reach/component-component";
 import "../styles.css";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "Destroy Trigger";
 

diff --git a/packages/dialog/examples/dismiss.example.js b/packages/dialog/examples/dismiss.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Component from "@reach/component-component";
 import "../styles.css";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "Dismiss";
 

diff --git a/packages/dialog/examples/dropdown.example.js b/packages/dialog/examples/dropdown.example.js
@@ -1,8 +1,8 @@
 import React from "react";
 import Component from "@reach/component-component";
-import { Menu, MenuButton, MenuList, MenuItem } from "../../menu-button";
+import { Menu, MenuButton, MenuList, MenuItem } from "@reach/menu-button";
 import "../styles.css";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "Dropdown";
 

diff --git a/packages/dialog/examples/long-content.example.js b/packages/dialog/examples/long-content.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Component from "@reach/component-component";
 import "../styles.css";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "Long Content";
 

diff --git a/packages/dialog/examples/nested.example.js b/packages/dialog/examples/nested.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Component from "@reach/component-component";
 import "../styles.css";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "Nested";
 

diff --git a/packages/dialog/examples/no-tabbables.example.js b/packages/dialog/examples/no-tabbables.example.js
@@ -2,7 +2,7 @@ import React from "react";
 import Component from "@reach/component-component";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Dialog } from "../src/index";
+import { Dialog } from "@reach/dialog";
 
 export let name = "No Tabbables";
 

diff --git a/packages/menu-button/examples/basic.example.js b/packages/menu-button/examples/basic.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Menu, MenuList, MenuButton, MenuItem } from "../src/index";
+import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 
 export let name = "Basic";
 

diff --git a/packages/menu-button/examples/conditional-items.example.js b/packages/menu-button/examples/conditional-items.example.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Menu, MenuList, MenuButton, MenuItem } from "../src/index";
+import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 
 export let name = "Conditional Items";
 

diff --git a/packages/menu-button/examples/long-text.example.js b/packages/menu-button/examples/long-text.example.js
@@ -1,7 +1,13 @@
 import React from "react";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Menu, MenuList, MenuLink, MenuButton, MenuItem } from "../src/index";
+import {
+  Menu,
+  MenuList,
+  MenuLink,
+  MenuButton,
+  MenuItem
+} from "@reach/menu-button";
 
 export let name = "Long Text";
 

diff --git a/packages/menu-button/examples/non-menu-children.example.js b/packages/menu-button/examples/non-menu-children.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Menu, MenuList, MenuButton, MenuItem } from "../src/index";
+import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 
 export let name = "Non Menu Children";
 

diff --git a/packages/menu-button/examples/render-callback.example.js b/packages/menu-button/examples/render-callback.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Menu, MenuList, MenuButton, MenuItem } from "../src/index";
+import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 
 export let name = "Render Callback";
 

diff --git a/packages/menu-button/examples/with-links.example.js b/packages/menu-button/examples/with-links.example.js
@@ -1,7 +1,13 @@
 import React from "react";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Menu, MenuList, MenuButton, MenuLink, MenuItem } from "../src/index";
+import {
+  Menu,
+  MenuList,
+  MenuButton,
+  MenuLink,
+  MenuItem
+} from "@reach/menu-button";
 import {
   Router,
   Link,

diff --git a/packages/menu-button/examples/with-other-tabbables.example.js b/packages/menu-button/examples/with-other-tabbables.example.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Menu, MenuList, MenuButton, MenuItem } from "../src/index";
+import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 
 export let name = "With Other Tabbables";
 

diff --git a/packages/menu-button/examples/with-tooltip.example.js b/packages/menu-button/examples/with-tooltip.example.js
@@ -3,7 +3,7 @@
 import React from "react";
 import "../styles.css";
 import { action } from "@storybook/addon-actions";
-import { Menu, MenuList, MenuButton, MenuItem } from "../src/index";
+import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import Tooltip from "../../tooltip";
 
 export let name = "With Tooltip";

diff --git a/packages/popover/examples/basic.example.js b/packages/popover/examples/basic.example.js
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import Popover, { positionDefault, positionMatchWidth } from "../src/index";
+import Popover, { positionDefault, positionMatchWidth } from "@reach/popover";
 
 export let name = "Basic";
 

diff --git a/packages/portal/examples/basic.example.js b/packages/portal/examples/basic.example.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Portal from "../src/index";
+import Portal from "@reach/portal";
 
 export let name = "Basic";
 

diff --git a/packages/rect/examples/basic.example.js b/packages/rect/examples/basic.example.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Rect from "../src/index";
+import Rect from "@reach/rect";
 
 export let name = "Basic";
 

diff --git a/packages/rect/examples/pin.example.js b/packages/rect/examples/pin.example.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Rect from "../src/index";
+import Rect from "@reach/rect";
 
 export let name = "Pin element to another";
 

diff --git a/packages/rect/examples/use-rect.example.js b/packages/rect/examples/use-rect.example.js
@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { useRect } from "../src/index";
+import { useRect } from "@reach/rect";
 
 export const name = "useRect";
 

diff --git a/packages/slider/examples/basic.example.js b/packages/slider/examples/basic.example.js
@@ -6,7 +6,7 @@ import {
   SliderTrack,
   SliderTrackHighlight,
   SliderMarker
-} from "../src";
+} from "@reach/slider";
 
 export const name = "Basic";
 

diff --git a/packages/slider/examples/contained-handle.example.js b/packages/slider/examples/contained-handle.example.js
@@ -5,7 +5,7 @@ import {
   SliderHandle,
   SliderTrack,
   SliderTrackHighlight
-} from "../src";
+} from "@reach/slider";
 
 export const name = "Contained Handle";
 

diff --git a/packages/slider/examples/controlled-audio-progress.example.js b/packages/slider/examples/controlled-audio-progress.example.js
@@ -5,7 +5,7 @@ import {
   SliderHandle,
   SliderTrack,
   SliderTrackHighlight
-} from "../src";
+} from "@reach/slider";
 import { useAudio, timeToMs, msToTime } from "./utils";
 
 export const name = "Audio Progress";

diff --git a/packages/slider/examples/controlled.example.js b/packages/slider/examples/controlled.example.js
@@ -6,7 +6,7 @@ import {
   SliderMarker,
   SliderTrack,
   SliderTrackHighlight
-} from "../src";
+} from "@reach/slider";
 
 export const name = "Controlled";
 

diff --git a/packages/slider/examples/vertical.example.js b/packages/slider/examples/vertical.example.js
@@ -6,7 +6,7 @@ import {
   SliderMarker,
   SliderTrack,
   SliderTrackHighlight
-} from "../src";
+} from "@reach/slider";
 
 export const name = "Vertical";
 

diff --git a/packages/slider/examples/with-steps.example.js b/packages/slider/examples/with-steps.example.js
@@ -6,7 +6,7 @@ import {
   SliderMarker,
   SliderTrack,
   SliderTrackHighlight
-} from "../src";
+} from "@reach/slider";
 
 export const name = "With Steps";
 

diff --git a/packages/slider/examples/with-tooltip.example.js b/packages/slider/examples/with-tooltip.example.js
@@ -1,13 +1,13 @@
 import React from "react";
-import { useTooltip, TooltipPopup } from "../../tooltip/src";
-import { wrapEvent } from "../../utils/src";
+import { useTooltip, TooltipPopup } from "@reach/tooltip";
+import { wrapEvent } from "@reach/utils";
 import "../styles.css";
 import {
   Slider,
   SliderHandle,
   SliderTrack,
   SliderTrackHighlight
-} from "../src";
+} from "@reach/slider";
 
 export const name = "With Tooltip";