docs: add suport for t-rex-ui 1.3.0 (#981)

* Add suport for t-rex-ui 1.3.0

* trailing whiteline

Author: patrycjakalinska

packages/audiodocs/docs/core/base-audio-context.mdx

@@ -318,6 +318,7 @@ const buffer = await this.audioContext.decodeAudioData(data, 4800, 2, false);
 ### `ContextState`
 
 <details>
+<summary>Details</summary>
 
 **Acceptable values:**
   - `suspended`

packages/audiodocs/docusaurus.config.js

@@ -57,6 +57,7 @@ const config = {
         },
       },
     ],
+    require.resolve('@swmansion/t-rex-ui/preset'),
   ],
 
   stylesheets: [

packages/audiodocs/package.json

@@ -33,7 +33,7 @@
     "@mui/material": "^7.1.0",
     "@react-native-community/slider": "^5.0.1",
     "@shopify/react-native-skia": "1.10.2",
-    "@swmansion/t-rex-ui": "1.2.1",
+    "@swmansion/t-rex-ui": "1.3.0",
     "@types/three": "^0.180.0",
     "@vercel/og": "^0.6.2",
     "babel-polyfill": "^6.26.0",

packages/audiodocs/src/components/HireUsSection/index.tsx

@@ -1,39 +1,37 @@
-import {
-  ButtonStyling,
-  BorderStyling,
-  HomepageButton,
-} from '@swmansion/t-rex-ui/dist/components/HomepageButton';
-import styles from './styles.module.css';
+import { JSX, useEffect } from 'react';
+import {HireUsSection} from '@swmansion/t-rex-ui'
+import './styles.module.css';
 
-export const HireUsSection = ({
+export const HireUsSectionWrapper = ({
   content,
   href,
 }: {
-  content?: string;
+  content?: string | JSX.Element;
   href: string;
 }) => {
-  return (
-    <div className={styles.hireUsSectionWrapper}>
-      <div className={styles.hireUsTitleContainer}>
-        <h2>
-          We are <span>Software Mansion</span>
-        </h2>
-      </div>
-      <p className={styles.hireUsSectionBody}>
-        We’re a software company built around improving developer experience and bringing innovative clients' ideas to life. We're pushing boundaries and delivering high-performance solutions that scale.
-        <br />< br />
-        Need help integrating React Native Audio API into your project or want to discuss your ideas?
-      </p>
-
-      <div className={styles.hireUsButton}>
-        <HomepageButton
-          href={href}
-          title="Let's talk"
-          target="_blank"
-          backgroundStyling={ButtonStyling.SECTION}
-          borderStyling={BorderStyling.SECTION}
-        />
-      </div>
-    </div>
+   const resolvedContent = content || (
+    <>
+      We’re a software company built around improving developer experience and
+      bringing innovative clients' ideas to life. We're pushing boundaries and
+      delivering high-performance solutions that scale.
+      <br />
+      <br />
+      Need help integrating React Native Audio API into your project or want to
+      discuss your ideas?
+    </>
   );
+
+   // TODO: Remove this hack after we add support for custom button text in the HireUsSection component
+   // Optional TODO: Contribute to t-rex-ui to add support for custom button text and remove this hack
+   useEffect(() => {
+    const btn = document.querySelector("[class*='hireUsSection'] [class*='homepageButtonLink'] > [class*='homepageButton']");
+    if (btn) {
+      const textNode = Array.from(btn.childNodes).find(n => n.nodeType === Node.TEXT_NODE);
+      if (textNode) {
+        textNode.textContent = "Let's talk";
+      }
+    }
+  }, []);
+
+    return <HireUsSection content={resolvedContent} href={href} />
 };

packages/audiodocs/src/components/HireUsSection/styles.module.css

@@ -1,77 +1,14 @@
-.hireUsSectionWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2.5rem;
-  margin-bottom: 16rem;
-  margin-top: 6.5rem;
-}
-
-@media (max-width: 996px) {
-  .hireUsSectionWrapper {
-    margin-top: 3.5rem;
-    margin-bottom: 10rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .hireUsSectionWrapper {
-    gap: 1.5rem;
-    margin-top: 0;
-    margin-bottom: 5rem !important;
-  }
-  .hireUsTitleContainer h2 {
-    font-size: 42px !important;
-  }
-  .hireUsSectionBody {
-    font-size: 20px !important;
-  }
-}
-
 @media (max-width: 420px) {
-  .hireUsSectionWrapper {
-    margin-top: 0;
-    margin-bottom: 4rem !important;
+  [class*='hireUsSectionBody'] {
+    font-size: 18px !important;
   }
 }
 
-.hireUsTitleContainer {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  justify-content: center;
-  align-items: center;
-}
-
-.hireUsTitleContainer h2 {
-  text-align: center;
-  font-size: 64px;
-  font-weight: 700;
-}
-
-.hireUsTitleContainer h2 > span {
-  color: var(--swm-hire-us-section-title);
-}
-
-[data-theme='dark'] .hireUsTitleContainer h2 > span {
-  color: var(--swm-hire-us-section-title);
-}
-
-.hireUsSectionBody {
-  font-size: 20px;
-  text-wrap: balance;
-  text-align: center;
-  font-weight: 400;
+[class*='hireUsSectionBody'] {
+  font-size: 20px !important;
   color: var(--swm-navy-light-80);
 }
 
-[data-theme='dark'] .hireUsSectionBody {
+[data-theme='dark'] [class*='hireUsSectionBody'] {
   color: var(--swm-navy-dark-40);
 }
-
-
-@media (max-width: 420px) {
-  .hireUsSectionBody {
-    font-size: 18px !important;
-  }
-}

packages/audiodocs/src/css/colors.css

@@ -304,6 +304,23 @@
   --swm-compatibility-supported-background: var(--swm-green-light-80);
   --swm-compatibility-not-supported-background: var(--swm-red-light-80);
   --swm-compatibility-text-color: var(--swm-white);
+
+    /* Markdown copy button */
+  --swm-markdown-copy-button-color: var(--swm-navy-light-100);
+  --swm-markdown-copy-button-border-color: var(--swm-navy-light-100);
+  --swm-markdown-copy-button-background-hover: var(--swm-navy-light-10);
+  --swm-markdown-copy-button-item-color: var(--swm-navy-light-40);
+  --swm-markdown-copy-button-item-background: var(--swm-background);
+  --swm-markdown-copy-button-item-background-hover: var(
+    --ifm-color-emphasis-100
+  );
+  --swm-markdown-copy-button-item-color-hover: var(--swm-navy-light-100);
+
+  /* Badges */
+  --swm-platform-badge-background: var(--swm-green-dark-120);
+  --swm-platform-badge-color: var(--swm-off-white);
+  --swm-available-from-badge-background: var(--swm-yellow-dark-120);
+  --swm-available-from-badge-color: var(--swm-off-white);
 }
 
 :root[data-theme='dark'] {
@@ -478,6 +495,23 @@
   --swm-compatibility-supported-background: var(--swm-green-dark-120);
   --swm-compatibility-not-supported-background: var(--swm-red-dark-120);
   --swm-compatibility-text-color: var(--swm-navy-dark-20);
+
+    /* Markdown copy button */
+  --swm-markdown-copy-button-color: var(--swm-navy-light-40);
+  --swm-markdown-copy-button-border-color: var(--swm-navy-light-40);
+  --swm-markdown-copy-button-background-hover: var(--ifm-color-emphasis-100);
+  --swm-markdown-copy-button-item-color: var(--swm-navy-light-40);
+  --swm-markdown-copy-button-item-background: var(--swm-background);
+  --swm-markdown-copy-button-item-background-hover: var(
+    --ifm-color-emphasis-100
+  );
+  --swm-markdown-copy-button-item-color-hover: var(--swm-off-white);
+
+  /* Badges */
+  --swm-platform-badge-background: var(--swm-green-dark-120);
+  --swm-platform-badge-color: var(--swm-off-white);
+  --swm-available-from-badge-background: var(--swm-yellow-dark-120);
+  --swm-available-from-badge-color: var(--swm-off-white);
 }
 
 code {

packages/audiodocs/src/css/overrides.css

@@ -231,3 +231,7 @@ button[class*='DocSearch-Button'] {
   border-collapse: collapse;
   box-sizing: border-box;
 }
+
+[class*='headerWithBadges'] {
+  align-items: baseline;
+}

packages/audiodocs/src/pages/index.tsx

@@ -11,7 +11,7 @@ import LandingWidget from '@site/src/components/LandingWidget';
 import LandingFeatures from '@site/src/components/LandingFeatures';
 // import LandingExamples from '@site/src/components/LandingExamples';
 import FooterBackground from '@site/src/components/FooterBackground';
-import { HireUsSection } from '@site/src/components/HireUsSection';
+import { HireUsSectionWrapper } from '@site/src/components/HireUsSection';
 
 import styles from './styles.module.css';
 import AudioManager from '../audio/AudioManager';
@@ -48,7 +48,7 @@ function Home() {
       <Spacer.V size="12rem" className={styles.hideOnMobile}  />
       <Spacer.V size="6rem" className={styles.visibleOnMobile}  />
       <div className={styles.container}>
-        <HireUsSection
+        <HireUsSectionWrapper
           href={
             'https://swmansion.com/contact/projects?utm_source=gesture-handler&utm_medium=docs'
           }