fix: showcase

.gitignore

@@ -40,9 +40,10 @@ jspm_packages
 .node_repl_history
 
 ################
-# JetBrains
+# IDE
 ################
 .idea
+.vscode
 
 ## File-based project format:
 *.iws

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

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

website/docusaurus.config.js

@@ -27,7 +27,7 @@ const config = {
  // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
  // Advanced use-case: functional editUrl
  editUrl: ({locale, blogDirPath, blogPath, permalink}) =>
- `https://github.com/wix/Detox/edit/master/website/${blogDirPath}/${blogPath}`,
+ `https://github.com/wix/Detox/edit/next/website/${blogDirPath}/${blogPath}`,
  editLocalizedFiles: false,
  authorsMapPath: 'authors.yml',
  feedOptions: {
@@ -50,7 +50,7 @@ const config = {
  docs: {
  path: '../docs',
  sidebarPath: require.resolve('./sidebars.js'),
- editUrl: 'https://github.com/wix/Detox/edit/master/docs/',
+ editUrl: 'https://github.com/wix/Detox/edit/next/docs/',
  docLayoutComponent: '@site/src/components/CustomLayout',
  remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]]
  },
@@ -86,12 +86,12 @@ const config = {
  position: 'left',
  label: 'API'
  },
- {
-  href: 'https://github.com/wix/Showcase',
- label: 'Showcase',
- position: 'left',
- className: 'header-showcase-link'
- },
+ // {
+ // to: 'showcase',
+ //  label: 'Showcase',
+ //  position: 'left',
+ //  className: 'header-showcase-link'
+ // },
  {
  type: 'docsVersionDropdown',
  position: 'right',

website/src/components/Showcase/Card.js

@@ -1,41 +1,23 @@
-import React, { useEffect } from 'react';
-import styles from '../../pages/showcase.module.css';
-// import cardList from './AppsList';
-import cardList from '../../../showcase.json';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
+import React from 'react';
 
-function Card({ title, image, link1, link2 }) {
+import styles from './Card.module.css';
+
+function Card({ className, title, image, linkGoogle, linkApple }) {
  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>
+ <li className={clsx(className, styles.card)}>
+ <img src={require(`@site/static/${image}`).default} className={styles.image} />
+ <span className={styles.title}>{title}</span>
+ <div className={styles.actions}>
+ <Link className={styles.storeButton} href={linkGoogle}>
+ Google Play
+ </Link>
+ <Link className={styles.storeButton} href={linkApple}>
+ App Store
+ </Link>
  </div>
- </section>
+ </li>
  );
 }
 

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

@@ -0,0 +1,105 @@
+.card {
+ box-sizing: border-box;
+ width: 310px;
+ height: 300px;
+
+ position: relative;
+ overflow: hidden;
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ border: 1px solid rgb(239, 239, 239);
+ border-radius: 5%;
+ padding: 20px;
+
+ transition: box-shadow 0.25s ease-in-out;
+
+ font-family: 'Nunito Sans', sans-serif;
+ font-weight: normal;
+}
+
+.card:hover {
+ box-shadow: 0px 12px 12px #f2eeeee8;
+}
+
+.card::before {
+ content: '';
+
+ position: absolute;
+ z-index: -1;
+
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ background: radial-gradient(100% 100% at 1.07% 0%, rgba(255, 99, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+
+ opacity: 0;
+ transition: opacity 0.25s ease-in-out;
+}
+
+.card:hover::before {
+ opacity: 1;
+}
+
+[data-theme='dark'] .card {
+ border-color: #131419;
+}
+
+[data-theme='dark'] .card:hover {
+ box-shadow: none;
+}
+
+.title {
+ font-weight: 700;
+ font-size: 30px;
+ margin: 20px 0 38px;
+}
+
+.image {
+ width: 70px;
+ height: 70px;
+ border-radius: 25%;
+ box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
+}
+
+.storeButton {
+ display: inline-block;
+ width: 115px;
+ height: 30px;
+ line-height: 30px;
+ margin-right: 10px;
+ color: #000;
+ text-align: center;
+ text-decoration: none;
+ border-radius: 25px;
+ font-size: 13px;
+ background: #e6e6e6;
+}
+
+.storeButton:hover {
+ background-color: #5a3fc6;
+ transition: transform 0.25s ease-in-out;
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+ color: #ffffff;
+ text-decoration: none;
+}
+
+[data-theme='dark'] .storeButton {
+ color: #fff;
+}
+
+[data-theme='dark'] .storeButton {
+ background-color: #23272f;
+}
+
+[data-theme='dark'] .storeButton:hover {
+ background-color: #5a3fc6;
+}
+
+.storeButton:focus {
+ outline: none;
+}

website/src/components/Showcase/Hero.js

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import Link from '@docusaurus/Link';
+
+import styles from './Hero.module.css';
+
+export default function ShowcaseHero() {
+ return (
+ <section className={clsx('hero hero--primary', styles.heroBanner)}>
+ <div className="container">
+ <h1 className="hero__title">Users Showcase</h1>
+ <h2 className="hero__subtitle">Check out who is using Detox to Gray box test their React Native Apps</h2>
+
+ <Link to="/docs/introduction/getting-started" className={styles.button}>
+ Join the Showcase!
+ </Link>
+ </div>
+ </section>
+ );
+}