fix: update imports to relative src paths

.storybook/styles.css

@@ -2,12 +2,10 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "../core/fonts/jetBrains-mono.css";
-@import "../core/fonts/manrope.css";
-
-@import "../reset/styles.css";
-@import "../core/styles.css";
+@import "../src/core/fonts/jetBrains-mono.css";
+@import "../src/core/fonts/manrope.css";
+@import "../src/core/styles.css";
+@import "../src/reset/styles.css";
+@import "../src/core/utils/syntax-highlighter.css";
 
 @import "./application.css";
-
-@import "../src/core/utils/syntax-highlighter.css";

src/core/CustomerLogos/CustomerLogos.stories.tsx

@@ -1,4 +1,4 @@
-import CustomerLogos from "../../core/CustomerLogos/component.jsx";
+import CustomerLogos from "../CustomerLogos/component.jsx";
 
 import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
 import webflow from "../images/cust-logo-webflow-col-pos.svg";

src/core/Footer/Footer.stories.tsx

@@ -1,10 +1,10 @@
 import Footer from "./component.jsx";
 
-import ablyStack from "../../core/images/ably-stack.svg";
-import highestPerformer from "../../core/images/high-performer-2023.svg";
-import bestSupport from "../../core/images/best-support-2023.svg";
-import fastestImplementation from "../../core/images/fastest-implementation-2023.svg";
-import highestUserAdoption from "../../core/images/highest-user-adoption-2023.svg";
+import ablyStack from "../images/ably-stack.svg";
+import highestPerformer from "../images/high-performer-2023.svg";
+import bestSupport from "../images/best-support-2023.svg";
+import fastestImplementation from "../images/fastest-implementation-2023.svg";
+import highestUserAdoption from "../images/highest-user-adoption-2023.svg";
 
 export default {
   title: "Components/Footer",

src/core/Logo/Logo.stories.tsx

@@ -1,5 +1,5 @@
 import Logo from "./component.jsx";
-import logoUrl from "../../core/images/ably-logo.png";
+import logoUrl from "../images/ably-logo.png";
 
 export default {
   title: "Components/Logo",

src/core/Meganav/Meganav.stories.tsx

@@ -3,9 +3,9 @@ import { rest } from "msw";
 
 import Meganav from "../../../src/core/Meganav/component.jsx";
 import loadIcons from "../icons.js";
-import logo from "../../core/images/ably-logo.png";
-import ablyStack from "../../core/images/ably-stack.svg";
-import awsLogo from "../../core/images/icon-tech-aws.svg";
+import logo from "../images/ably-logo.png";
+import ablyStack from "../images/ably-stack.svg";
+import awsLogo from "../images/icon-tech-aws.svg";
 
 import {
   attachStoreToWindow,

src/core/icons.js

@@ -1,6 +1,6 @@
-import { loadSprites } from "../../core/scripts";
+import { loadSprites } from "./scripts";
 
-import sprites from "../../core/sprites.svg";
+import sprites from "./sprites.svg";
 
 const loadIcons = () => loadSprites(sprites);
 

src/core/styles.components.css

@@ -3,33 +3,31 @@
 @import "./styles/text.css";
 @import "./styles/forms.css";
 
-@layer components {
-  .ui-input {
-    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-    @apply max-w-screen-sm;
-  }
+.ui-input {
+  @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+  @apply hover:bg-white hover:shadow-input hover:border-transparent;
+  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+  @apply max-w-screen-sm;
+}
 
-  /* Basis for icon component */
-  .ui-icon-cool-black {
-    stroke: var(--color-cool-black);
-  }
+/* Basis for icon component */
+.ui-icon-cool-black {
+  stroke: var(--color-cool-black);
+}
 
-  .ui-icon-white {
-    stroke: var(--color-white);
-  }
+.ui-icon-white {
+  stroke: var(--color-white);
+}
 
-  .ui-icon-dark-grey {
-    stroke: var(--color-dark-grey);
-  }
+.ui-icon-dark-grey {
+  stroke: var(--color-dark-grey);
+}
 
-  .ui-version-tag {
-    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+.ui-version-tag {
+  @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
 
-    position: relative;
-    vertical-align: super;
-    margin-left: 3px;
-    font-size: 8px;
-  }
+  position: relative;
+  vertical-align: super;
+  margin-left: 3px;
+  font-size: 8px;
 }

src/core/styles/forms.css

@@ -1,64 +1,62 @@
-@layer components {
-  .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans font-medium;
-  }
+.ui-checkbox-p1 {
+  @apply flex items-start mb-16 font-sans font-medium;
+}
 
-  .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans font-medium;
-  }
+.ui-checkbox-p2 {
+  @apply flex items-start mb-12 font-sans font-medium;
+}
 
-  .ui-checkbox-input {
-    @apply opacity-0 absolute h-20 w-20;
-  }
+.ui-checkbox-input {
+  @apply opacity-0 absolute h-20 w-20;
+}
 
-  .ui-checkbox-styled {
-    @apply w-20 h-20 mr-16;
-    @apply bg-white flex flex-shrink-0 justify-center items-center;
-    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
-  }
+.ui-checkbox-styled {
+  @apply w-20 h-20 mr-16;
+  @apply bg-white flex flex-shrink-0 justify-center items-center;
+  @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+}
 
-  .ui-checkbox-styled-tick {
-    @apply hidden text-white;
-  }
+.ui-checkbox-styled-tick {
+  @apply hidden text-white;
+}
 
-  .ui-checkbox-label-p1 {
-    @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
-  }
+.ui-checkbox-label-p1 {
+  @apply select-none;
+  @apply text-p1 font-medium text-cool-black;
+}
 
-  .ui-checkbox-label-p2 {
-    @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
-  }
+.ui-checkbox-label-p2 {
+  @apply select-none;
+  @apply text-p2 font-medium text-cool-black;
+}
 
-  .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
-  }
+.ui-checkbox-input:disabled + .ui-checkbox-styled {
+  @apply bg-gui-unavailable border;
+}
 
-  .ui-checkbox-input:focus + .ui-checkbox-styled {
-    border-width: 0.125rem;
-    @apply border-gui-focus;
-  }
+.ui-checkbox-input:focus + .ui-checkbox-styled {
+  border-width: 0.125rem;
+  @apply border-gui-focus;
+}
 
-  .ui-checkbox-input:checked + .ui-checkbox-styled {
-    @apply bg-active-orange border-dark-grey border;
-  }
+.ui-checkbox-input:checked + .ui-checkbox-styled {
+  @apply bg-active-orange border-dark-grey border;
+}
 
-  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
-    @apply block;
-  }
+.ui-checkbox-input:checked + .ui-checkbox-styled svg {
+  @apply block;
+}
 
-  .ui-textarea {
-    @apply font-sans font-medium text-cool-black text-p1;
-    @apply p-input mb-16;
-    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-  }
+.ui-textarea {
+  @apply font-sans font-medium text-cool-black text-p1;
+  @apply p-input mb-16;
+  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
+  @apply hover:bg-white hover:shadow-input hover:border-transparent;
+  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+}
 
-  .ui-textarea::placeholder {
-    /* CSS vars don't work in ::placeholder in Webkit :( */
-    /* color: var(--text-dark-grey); */
-    color: #76767c;
-  }
+.ui-textarea::placeholder {
+  /* CSS vars don't work in ::placeholder in Webkit :( */
+  /* color: var(--text-dark-grey); */
+  color: #76767c;
 }