diff --git a/README.md b/README.md index 9c00932c..62618314 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ -# react-native-owl [![github][github-image]][github-url] +# react-native-owl [![github][github-image]][github-url] [![npm][npm-image]][npm-url] [![docs][docs-image]][docs-url] > **Work In Progress**: Visual regression testing for React Native - - ## Installation ```sh @@ -12,14 +10,14 @@ yarn add -D react-native-owl npm install -D react-native-owl ``` -## 📃 [Documentation](https://formidable.com/open-source/react-native-owl/docs/) +## 📃 [Documentation](https://formidable.com/open-source/react-native-owl/) The documentation contains everything you need to know about `react-native-owl`, and contains several sections in order of importance when you first get started: - **[Getting started](https://formidable.com/open-source/react-native-owl/docs/introduction/getting-started)** — contains the "Getting Started" guide. -- **[Configuration](https://formidable.com/open-source/react-native-owl/introduction/config-file)** — explains all the configuration options for `react-native-owl`. -- **[Running on CI](https://formidable.com/open-source/react-native-owl/advanced/running-ci)** — example GitHub Action to run react-native-owl on CO. +- **[Configuration](https://formidable.com/open-source/react-native-owl/docs/introduction/config-file)** — explains all the configuration options for `react-native-owl`. +- **[Running on CI](https://formidable.com/open-source/react-native-owl/docs/advanced/running-ci)** — example GitHub Action to run react-native-owl on CO. _You can find the raw markdown files inside this repository's `docs` folder._ @@ -29,3 +27,7 @@ _You can find the raw markdown files inside this repository's `docs` folder._ [github-image]: https://github.com/FormidableLabs/react-native-owl/workflows/Run%20Tests/badge.svg [github-url]: https://github.com/FormidableLabs/react-native-owl/actions +[npm-image]: https://img.shields.io/npm/v/react-native-owl +[npm-url]: https://www.npmjs.com/package/react-native-owl +[docs-image]: https://img.shields.io/badge/docs-visit%20site-blue +[docs-url]: https://formidable.com/open-source/react-native-owl/ diff --git a/docs/advanced/running-ci.md b/docs/advanced/running-ci.md index 4ca55948..7b9211b0 100644 --- a/docs/advanced/running-ci.md +++ b/docs/advanced/running-ci.md @@ -4,8 +4,6 @@ sidebar_position: 1 # Running on CI -This is a placeholder. - :::info With visual regression testing, it is all about **consistency**. Please make sure that you use the same simulator across environments. ie. Use the same emulator to generate the baseline images and the same (model) one on CI so that the library can compare the screenshots. diff --git a/docs/api/matchers.md b/docs/api/matchers.md index 8d8baaa1..0b626dbc 100644 --- a/docs/api/matchers.md +++ b/docs/api/matchers.md @@ -4,15 +4,13 @@ sidebar_position: 2 # Matchers -This is a placeholder. - ### toMatchBaseline(name: string) This custom matcher will try to find and compare the baseline screenshot by using the path of the latest screenshot (returned by `takeScreenshot()`). You will have to take a screenshot before using, and pass the path of that screenshot to the expect method. #### Example -```js +```js {7} import { takeScreenshot } from 'react-native-owl'; describe('App.tsx', () => { @@ -26,4 +24,4 @@ describe('App.tsx', () => { The first time this test is run, or when run with the `--update` flag, the `.toMatchBaseline` expectation will always be successful. -On subsequent test runs, the screenshot captured by `takeScreenshot` (and stored in `/current`) will be compared to the baseline screenshot. ***Any*** differences will cause the expectation to fail, and the report to be generated. \ No newline at end of file +On subsequent test runs, the screenshot captured by `takeScreenshot` (and stored in `/current`) will be compared to the baseline screenshot. **_Any_** differences will cause the expectation to fail, and the report to be generated. diff --git a/docs/api/methods.md b/docs/api/methods.md index b1b47b7d..16155815 100644 --- a/docs/api/methods.md +++ b/docs/api/methods.md @@ -4,15 +4,13 @@ sidebar_position: 1 # Methods -This is a placeholder. - ### takeScreenshot(name: string) Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`) using the specified filename (no extension required). If running the tests using the `--update` or `-u` flag, or its the first time its being run, this will store the screenshot under the `baseline` directory. #### Example -```js +```js {5} import { takeScreenshot } from 'react-native-owl'; describe('App.tsx', () => { @@ -26,4 +24,4 @@ describe('App.tsx', () => { The first time this test is run, or when run with the `--update` flag, the screenshot will be stored at `./owl/baseline/ios/homescreen.png` (or `/android/` is testing on Android). -On subsequent test runs, the screenshot will be stored at `./owl/current/ios/homescreen.png`. \ No newline at end of file +On subsequent test runs, the screenshot will be stored at `./owl/current/ios/homescreen.png`. diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index d3bddbc4..220b7bda 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -49,6 +49,11 @@ const config = { disableSwitch: true, respectPrefersColorScheme: false, }, + announcementBar: { + id: 'announcement-blogpost', + content: `Read the announcement "We're Building a Visual Regression Testing Library for React Native" in our blog.`, + isCloseable: false, + }, navbar: { style: 'dark', title: 'React Native Owl', @@ -126,6 +131,7 @@ const config = { ], }, prism: { + defaultLanguage: 'javascript', theme: lightCodeTheme, darkTheme: darkCodeTheme, }, diff --git a/website/src/components/Hero/index.tsx b/website/src/components/Hero/index.tsx index 469f972f..d729d06d 100644 --- a/website/src/components/Hero/index.tsx +++ b/website/src/components/Hero/index.tsx @@ -20,7 +20,7 @@ export const Hero = () => { const { siteConfig } = useDocusaurusContext(); return ( -
+
@@ -39,7 +39,7 @@ export const Hero = () => {
- + {heroExample}
diff --git a/website/src/components/Hero/styles.module.css b/website/src/components/Hero/styles.module.css index 2472e13a..50791164 100644 --- a/website/src/components/Hero/styles.module.css +++ b/website/src/components/Hero/styles.module.css @@ -3,15 +3,16 @@ * and scoped locally. */ -.heroBanner { +.hero { + color: var(--ifm-color-white); background-color: var(--brand-blue); position: relative; - z-index: 1; - padding: 2rem; + padding: 1.5rem; margin-bottom: 3rem; + z-index: 1; } -.heroBanner:after { +.hero:after { background: inherit; border-bottom: 10px solid var(--brand-orange); content: ''; @@ -28,28 +29,32 @@ -webkit-backface-visibility: hidden; } -.heroSubtitle { - font-weight: 500; - margin-bottom: 2rem; -} - -@media screen and (min-width: 966px) { - .heroBanner { +@media (min-width: 1416px) { + .hero { padding: 3rem 0 4rem; margin-bottom: 10rem; } } +.heroSubtitle { + font-weight: 500; + margin-bottom: 2rem; +} + .logoBadge { max-width: 8rem; margin-bottom: 0.75rem; } +.codeSample { + width: 100%; +} + .codeSampleWrapper { margin-top: 2rem; } -@media screen and (min-width: 1025px) { +@media (min-width: 1025px) { .codeSampleWrapper { display: flex; align-items: center; diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index 62496380..1332f491 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -4,6 +4,13 @@ import clsx from 'clsx'; import styles from './styles.module.css'; const FeatureList = [ + { + title: 'Visual regression testing', + imageSource: '/images/homepage/diff.png', + description: ( + <>We've created a simple api for capturing and comparing screenshots. + ), + }, { title: 'Take screenshots from your app', imageSource: '/images/homepage/mockup.png', @@ -14,14 +21,6 @@ const FeatureList = [ ), }, - { - title: 'Compare screenshots taken', - Svg: require('../../../static/images/homepage/diff.svg').default, - svgClassName: styles.visualExample, - description: ( - <>We've created a simple api for capturing and comparing screenshots. - ), - }, { title: 'View the differences', imageSource: '/images/homepage/report.png', @@ -35,28 +34,21 @@ const FeatureList = [ ]; export const HomepageFeatures = () => { - return FeatureList.map( - ({ Svg, svgClassName, title, description, imageSource }, idx) => { - return ( -
-
-

{title}

-

{description}

+ return FeatureList.map(({ title, description, imageSource }, idx) => { + return ( +
+

{title}

+

{description}

-
- {!!imageSource && ( - - )} - {!!Svg && ( - - )} -
-
-
- ); - } - ); +
+ {!!imageSource && ( + + )} +
+ + ); + }); }; diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css index 985b32ea..c0c42a02 100644 --- a/website/src/components/HomepageFeatures/styles.module.css +++ b/website/src/components/HomepageFeatures/styles.module.css @@ -1,7 +1,7 @@ .feature { - background-color: var(--ifm-color-secondary); + background-color: var(--brand-beige); padding: 2rem; - margin: 1rem auto; + margin: 2rem auto; text-align: center; } @@ -11,10 +11,13 @@ } } -.featureSvg { - width: 100%; - max-width: 10rem; - height: 10rem; +.title { + font-size: 2rem; +} + +.subtitle { + font-size: 1.45rem; + line-height: 2.35rem; } .visualExample { diff --git a/website/src/css/custom.css b/website/src/css/custom.css index d1117249..6a8bdb35 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -8,6 +8,7 @@ :root { --brand-blue: #1e2852; --brand-orange: #f04d21; + --brand-beige: #ebe5da; --ifm-navbar-height: 4.25rem; diff --git a/website/src/theme/AnnouncementBar/index.tsx b/website/src/theme/AnnouncementBar/index.tsx new file mode 100644 index 00000000..36a3e826 --- /dev/null +++ b/website/src/theme/AnnouncementBar/index.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import clsx from 'clsx'; +import { useThemeConfig, useAnnouncementBar } from '@docusaurus/theme-common'; +import { translate } from '@docusaurus/Translate'; +import IconClose from '@theme/IconClose'; + +import styles from './styles.module.css'; + +function AnnouncementBar(): JSX.Element | null { + const { isActive, close } = useAnnouncementBar(); + const { announcementBar } = useThemeConfig(); + + if (!isActive) { + return null; + } + + const { content, backgroundColor, textColor, isCloseable } = announcementBar!; + + return ( +
+ {isCloseable &&
} +
+ {isCloseable ? ( + + ) : null} +
+ ); +} + +export default AnnouncementBar; diff --git a/website/src/theme/AnnouncementBar/styles.module.css b/website/src/theme/AnnouncementBar/styles.module.css new file mode 100644 index 00000000..6f2cddd5 --- /dev/null +++ b/website/src/theme/AnnouncementBar/styles.module.css @@ -0,0 +1,55 @@ +:root { + --docusaurus-announcement-bar-height: auto; +} + +.announcementBar { + display: flex; + align-items: center; + height: var(--docusaurus-announcement-bar-height); + background-color: var(--brand-orange); + color: var(--ifm-color-white); +} + +html[data-announcement-bar-initially-dismissed='true'] .announcementBar { + display: none; +} + +.announcementBarPlaceholder { + flex: 0 0 10px; +} + +.announcementBarClose { + flex: 0 0 30px; + align-self: stretch; + padding: 0; + line-height: 0; +} + +.announcementBarContent { + flex: 1 1 auto; + font-size: 85%; + text-align: center; + padding: 0.5rem 2rem; +} + +@media print { + .announcementBar { + display: none; + } +} + +.announcementBarContent a { + color: inherit; + text-decoration: underline; +} + +@media (min-width: 997px) { + :root { + --docusaurus-announcement-bar-height: 2.5rem; + } + + .announcementBarPlaceholder, + .announcementBarClose { + flex-basis: 50px; + } +} diff --git a/website/static/images/homepage/diff.png b/website/static/images/homepage/diff.png new file mode 100644 index 00000000..eefba9b7 Binary files /dev/null and b/website/static/images/homepage/diff.png differ diff --git a/website/static/images/homepage/diff.svg b/website/static/images/homepage/diff.svg deleted file mode 100644 index c488a472..00000000 --- a/website/static/images/homepage/diff.svg +++ /dev/null @@ -1,66 +0,0 @@ - - - Artboard - - - - - - - - - - - - - - Baseline - - - - - - - - - - - Latest - - - - - - - - - - - - Diff - - - - - - - - - - - - - - - - - - - - - - - - - -