docs(website): showcase page

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}

detox/android/detox/proguard-rules-app.pro

@@ -1,4 +1,5 @@
 -keepattributes InnerClasses, Exceptions
+
 -keep class com.facebook.react.modules.** { *; }
 -keep class com.facebook.react.uimanager.** { *; }
 -keep class com.facebook.react.animated.** { *; }
@@ -8,8 +9,9 @@
 -keep class com.facebook.react.ReactInstanceManager** { *; }
 -keep class com.facebook.react.ReactInstanceEventListener { *; }
 
--keep class com.facebook.react.views.slider.ReactSlider { *; }
--keep class com.reactnativecommunity.slider.ReactSlider { *; }
+-keep class com.facebook.react.views.slider.** { *; }
+-keep class com.google.android.material.slider.** { *; }
+-keep class com.reactnativecommunity.slider.** { *; }
 -keep class com.reactnativecommunity.asyncstorage.** { *; }
 
 -keep class kotlin.jvm.** { *; }

website/docusaurus.config.js

@@ -52,14 +52,10 @@ const config = {
  sidebarPath: require.resolve('./sidebars.js'),
  editUrl: 'https://github.com/wix/Detox/edit/master/docs/',
  docLayoutComponent: '@site/src/components/CustomLayout',
- remarkPlugins: [
- [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
- ],
+ remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]]
  },
  pages: {
- remarkPlugins: [
- [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
- ],
+ remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]]
  },
  theme: {
  customCss: require.resolve('./src/css/custom.css')
@@ -90,6 +86,12 @@ const config = {
  position: 'left',
  label: 'API'
  },
+ {
+ href: 'https://github.com/wix/Showcase',
+ label: 'Showcase',
+ position: 'left',
+ className: 'header-showcase-link'
+ },
  {
  type: 'docsVersionDropdown',
  position: 'right',
@@ -109,7 +111,7 @@ const config = {
  indexName: 'detox'
  },
  footer: {
- style: 'dark',
+ style: 'light',
  links: [
  {
  title: 'Docs',
@@ -142,15 +144,24 @@ const config = {
  items: [
  {
  label: 'GitHub',
- href: 'https://github.com/wix/Detox'
+ href: 'https://github.com/wix/Detox',
+ position: 'left',
+ className: 'footer-ghfooter',
+ favicon: '/static/img/showcase/ghfooter.svg'
  },
  {
  label: 'Twitter',
- href: 'https://twitter.com/detoxe2e/'
+ href: 'https://twitter.com/detoxe2e/',
+ position: 'left',
+ className: 'footer-twitterfooter',
+ favicon: '/static/img/showcase/twitterfooter.png'
  },
  {
  label: 'Discord',
- href: 'https://discord.gg/CkD5QKheF5'
+ href: 'https://discord.gg/CkD5QKheF5',
+ position: 'left',
+ className: 'footer-discordfooter',
+ favicon: '/static/img/showcase/discordfooter.png'
  }
  ]
  }
@@ -165,6 +176,11 @@ const config = {
  additionalLanguages: ['gradle', 'ini', 'java'],
  theme: lightCodeTheme,
  darkTheme: darkCodeTheme
+ },
+ colorMode: {
+ defaultMode: 'dark',
+ disableSwitch: false,
+ respectPrefersColorScheme: false
  }
  }),
  scripts: [

website/package.json

@@ -16,15 +16,16 @@
  "dependencies": {
  "@docusaurus/core": "^2.0.0",
  "@docusaurus/preset-classic": "^2.0.0",
- "@docusaurus/theme-search-algolia": "^2.0.0",
  "@docusaurus/remark-plugin-npm2yarn": "^2.0.0",
+ "@docusaurus/theme-search-algolia": "^2.0.0",
  "@mdx-js/react": "^1.6.21",
  "@svgr/webpack": "^5.5.0",
  "clsx": "^1.1.1",
  "file-loader": "^6.2.0",
  "prism-react-renderer": "^1.2.1",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
+ "styled-components": "^5.3.5",
  "url-loader": "^4.1.1"
  },
  "browserslist": {

website/src/components/Showcase/AppsList.js

@@ -0,0 +1,88 @@
+const cardList = [
+ {
+ title: 'Hudl',
+ image: require('@site/static/img/showcase/hudlsmall.jpeg').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'Valora',
+ image: require('@site/static/img/showcase/valora.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'Wix Spaces',
+ image: require('@site/static/img/showcase/wix-spaces.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'Wix Owner',
+ image: require('@site/static/img/showcase/wix-owner.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'React Native',
+ image: require('@site/static/img/showcase/react-native.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'Rocket Chat',
+ image: require('@site/static/img/showcase/rocket-chat.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'WealthSimple',
+ image: require('@site/static/img/showcase/wealthsimple.png').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'Pitch',
+ image: require('@site/static/img/showcase/pitch.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'React Native datetimepicker',
+ image: require('@site/static/img/showcase/rn-datetimepicker.png').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'Maiia',
+ image: require('@site/static/img/showcase/maiia.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'Noona',
+ image: require('@site/static/img/showcase/noona.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'OMNON NOTES',
+ image: require('/img/showcase/omnon.webp').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.shopify.mobile&hl=en_US&gl=US',
+ link2: 'https://apps.apple.com/us/app/shopify/id1058959277'
+ },
+ {
+ title: 'Bolt',
+ image: require('@site/static/img/showcase/bolt.webp').default,
+ link1: 'https://play.google.com/store/search?q=bolt&c=apps',
+ link2: 'https://apps.apple.com/us/app/bolt-fast-affordable-rides/id675033630'
+ },
+ {
+ title: 'Next',
+ image: require('@site/static/img/showcase/next.jpg').default,
+ link1: 'https://play.google.com/store/apps/details?id=com.nextdoor',
+ link2: 'https://apps.apple.com/us/app/nextdoor/id490318083'
+ }
+];
+
+export default cardList;

website/src/components/Showcase/Button.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import styles from './Button.module.css';
+
+const Button = (props) => {
+ return (
+ <button type={props.type} className={styles.button} onClick={props.onClick}>
+ {props.children}
+ </button>
+ );
+};
+
+export default Button;

website/src/components/Showcase/Button.module.css

@@ -0,0 +1,59 @@
+.button {
+ background-color: #5d71e5;
+ color: #ffffff;
+ box-sizing: border-box;
+ position: relative;
+ width: 217px;
+ height: 50px;
+ right: 40px;
+ top: 20px;
+ border: 1px solid #000000;
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+.button:focus {
+ outline: none;
+}
+
+.button:hover {
+ background-color: #7633e5;
+ position: relative;
+ width: 217px;
+ height: 50px;
+ left: 20px;
+ top: 97px;
+}
+
+.button:active {
+ position: relative;
+ left: 0%;
+ right: 0%;
+ top: 0%;
+ bottom: 0%;
+
+ background: #5c25af;
+}
+
+.button a {
+ position: relative;
+ left: 9.22%;
+ right: 9.68%;
+ top: 24%;
+ bottom: 26%;
+ text-decoration: none;
+
+ /* T/T2 */
+ font-family: 'Nunito Sans', sans-serif;
+ font-style: normal;
+ font-weight: 300;
+ font-size: 16px;
+ line-height: 25px;
+ /* identical to box height, or 156% */
+ color: #ffffff;
+}
+
+@media (min-width: 768px) {
+ .button {
+ width: auto;
+ }
+}

website/src/components/Showcase/Card.js

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react';
+import styles from '../../pages/showcase.module.css';
+// import cardList from './AppsList';
+import cardList from '../../../showcase.json';
+import Link from '@docusaurus/Link';
+
+function Card({ title, image, link1, link2 }) {
+ return (
+ <section>
+ <div>
+ <div className={styles.showcaseSection}>
+ <div className={styles.logos}>
+ <div className={styles.showcaseSection.showcaseCard}>
+ <div className={styles.iconBox}>
+ <img src={image} className="imageShowcase" />
+ </div>
+ <div>
+ <div>
+ <h3>{title}</h3>
+ <p className="showcaseLinks"></p>
+ <br></br>
+ <Link className={styles.storeButton}>
+ <a href={link1} target="_blank">
+ Google Play
+ </a>
+ </Link>
+ <Link className={styles.storeButton}>
+ <a href={link2} target="_blank">
+ App Store
+ </a>
+ </Link>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ );
+}
+
+export default Card;

website/src/components/Showcase/Showcase.js

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import Card from './Card';
+import styles from '../../pages/showcase.module.css';
+// import cardList from './AppsList';
+import cardList from '../../../showcase.json';
+
+function Showcase() {
+ useEffect(() => {
+ // This will run when the page first loads and whenever the title changes
+ document.title = 'Detox | Showcase';
+ }, ['Detox | Showcase']);
+ return (
+ <section>
+ <div className={styles.showcase}>
+ <div
+ className="row"
+ style={{
+ justifyContent: 'center',
+ alignItems: 'center',
+ display: 'flex',
+ maxWidth: 1300
+ }}>
+ {cardList.map((props, idx) => (
+ <Card key={idx} {...props} />
+ ))}
+ </div>
+ </div>
+ </section>
+ );
+}
+
+Showcase.title = 'Detox | Showcase';
+
+export default Showcase;

website/src/components/Showcase/Showcase.module.css

@@ -0,0 +1,13 @@
+.features {
+ display: flex;
+ align-items: center;
+ padding: 5rem 0;
+ width: 100%;
+}
+
+.featureImage {
+ height: 64px;
+ width: 64px;
+ stroke: white;
+ stroke-width: 2px;
+}