docs: fix transitions code playground and use Tooltip component (#42)

* fix(docs): transitions – example is not displayed due to JS error #41

injectCss is not defined

* fix(docs): transitions – tooltip example is not working

incorrect destructuring on children params

* refactor(docs): use Tooltip component

Author: marcalexiei

www/docs/Overlay.mdx

@@ -14,6 +14,7 @@ positioning engine.
 import clsx from "clsx";
 import { Overlay } from "@restart/ui";
 import Button from "../src/Button";
+import Tooltip from "../src/Tooltip";
 
 const PLACEMENTS = ["left", "top", "right", "bottom"];
 
@@ -70,24 +71,10 @@ function OverlayExample() {
         target={triggerRef}
       >
         {(props, { arrowProps, popper, show }) => (
-          <div {...props} className="absolute">
-            <div
-              {...arrowProps}
-              style={arrowProps.style}
-              className={clsx(
-                "absolute w-3 h-3 z-[-1]",
-                "before:absolute before:rotate-45 before:bg-black before:top-0 before:left-0 before:w-3 before:h-3",
-                popper.placement === "left" && "-right-1",
-                popper.placement === "right" && "-left-1",
-                popper.placement === "bottom" && "-top-1",
-                popper.placement === "top" && "-bottom-1"
-              )}
-            />
-            <div className="py-1 px-2 text-center rounded bg-black text-white ">
-              I&rsquo;m placed to the{" "}
-              <strong>{popper.placement}</strong>
-            </div>
-          </div>
+          <Tooltip {...props} arrowProps={arrowProps} popper={popper}>
+            I&rsquo;m placed to the{" "}
+            <strong>{popper.placement}</strong>
+          </Tooltip>
         )}
       </Overlay>
     </div>

www/docs/transitions.mdx

@@ -11,36 +11,12 @@ specifically, or roll your own like the below example.
 ```js live
 import { Modal, Overlay } from "@restart/ui";
 import Transition from "react-transition-group/Transition";
+import Button from "../src/Button";
+import Tooltip from "../src/Tooltip";
+import '../src/css/transitions.css';
 
 const FADE_DURATION = 200;
 
-injectCss(`
-  .fade {
-    opacity: 0;
-    transition: opacity ${FADE_DURATION}ms linear;
-  }
-
-  .show {
-    opacity: 1;
-  }
-
-
-  .backdrop.fade.show {
-    opacity: 0.5;
-  }
-
-  .dialog {
-    position: absolute;
-    width: 400;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
-    border: 1px solid #e5e5e5;
-    background-color: white;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
-    padding: 20px;
-  }
-`);
-
 const fadeStyles = {
   entering: "show",
   entered: "show",
@@ -60,32 +36,33 @@ const Fade = ({ children, ...props }) => (
 function TransitionExample() {
   const [showModal, setShowModal] = useState(false);
   const [showTooltip, setShowTooltip] = useState(false);
-  const [tooltipRef, attachRef] = useState(null);
+
+  const triggerRef = useRef(null);
 
   return (
     <div className="flex flex-col items-center">
-      <button
+      <Button
         type="button"
         className="btn btn-primary mr-3"
         onClick={() => setShowModal((prev) => !prev)}
       >
         Show Animated Modal
-      </button>
+      </Button>
 
-      <button
+      <Button
         type="button"
         className="btn btn-primary"
         onClick={() => setShowTooltip((prev) => !prev)}
-        ref={attachRef}
+        ref={triggerRef}
       >
         Show Tooltip
-      </button>
+      </Button>
 
       <Overlay
         placement="top"
         transition={Fade}
         show={showTooltip}
-        target={tooltipRef}
+        target={triggerRef}
         popperConfig={{
           modifiers: [
             {
@@ -96,14 +73,10 @@ function TransitionExample() {
           ],
         }}
       >
-        {({ props: { ref, style } }) => (
-          <div
-            ref={ref}
-            className="bg-primary-200 shadow rounded z-10 px-4"
-            style={style}
-          >
-            Hello there
-          </div>
+        {(props, { arrowProps, popper, show }) => (
+          <Tooltip {...props} arrowProps={arrowProps} popper={popper}>
+            Tooltip content
+          </Tooltip>
         )}
       </Overlay>
 
@@ -123,7 +96,7 @@ function TransitionExample() {
             {...props}
             className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none"
           >
-            <div className="dialog bg-white shadow rounded-lg pointer-events-auto">
+            <div className="dialog dialog-transitions-example bg-white shadow rounded-lg pointer-events-auto">
               <h4 id="modal-label">I&apos;m fading in!</h4>
               <p>
                 Anim pariatur cliche reprehenderit, enim

www/src/css/transitions.css

@@ -0,0 +1,22 @@
+.fade {
+  opacity: 0;
+  transition: opacity 200ms linear;
+}
+
+.show {
+  opacity: 1;
+}
+
+.backdrop.fade.show {
+  opacity: 0.5;
+}
+
+.dialog-transitions-example {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid #e5e5e5;
+  background-color: white;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
+  padding: 20px;
+}