Merge pull request #3 from react-native-toolkit/changed-image-ui

Updated Docs & setup review workflow

Author: DaniAkash

.github/workflows/review.yml

@@ -0,0 +1,48 @@
+name: review
+on: pull_request
+
+jobs:
+  test:
+    strategy:
+      matrix:
+        platform: [ubuntu-latest, macOS-latest]
+        node: ['12.x']
+    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: ${{ matrix.node }}
+      - run: npx yarn bootstrap
+      - run: npx yarn test
+
+  coverage:
+    needs: [test]
+    name: coverage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 12.x
+      - run: npx yarn bootstrap
+      - run: npx yarn test --coverage
+      - uses: romeovs/lcov-reporter-action@v0.2.16
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+  chromatic:
+    needs: [test]
+    name: Publish storybook to chromatic 🧪
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - run: npx yarn bootstrap
+      - run: npx yarn chromatic
+        working-directory: example
+        env:
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -1,6 +1,9 @@
 # logs
 *.log
 
+# coverage
+coverage
+
 # OSX
 #
 .DS_Store

example/src/stories/BetterImage.stories.js

@@ -9,65 +9,67 @@ export default {
 
 const Template = (args) => <BetterImage {...args} />;
 
+const imageStyle = { height: 200, width: 400 };
+
 const validSource = () => ({
   source: {
-    uri: `https://pyt-images.imgix.net/images/app/pretrip/australia.png?h=346.5&w=252&crop=fit&dpr=3&auto=format,compress,enhance&q=10&bust=${Math.random()}`,
+    uri: `https://unsplash.com/photos/yNvVnPcurD8/download?force=true&w=2400&bust=${Math.random()}`,
   },
   thumbnailSource: {
-    uri: `https://pyt-images.imgix.net/images/app/pretrip/australia.png?h=346.5&w=252&crop=fit&dpr=0.1&auto=format,compress,enhance&q=10&bust=${Math.random()}`,
+    uri: `https://unsplash.com/photos/yNvVnPcurD8/download?force=true&w=24&bust=${Math.random()}`,
   },
   fallbackSource: {
-    uri: `https://pyt-images.imgix.net/images/place-holder.png?bust=${Math.random()}`,
+    uri: `https://unsplash.com/a/img/empty-states/photos.png?bust=${Math.random()}`,
   },
 });
 export const ValidImage = Template.bind({});
 ValidImage.args = {
   ...validSource(),
-  viewStyle: { height: 400, width: 400 },
+  viewStyle: imageStyle,
   resizeMode: 'contain',
 };
 
 const inValidSource = () => ({
   source: {
-    uri: `https://pyt-images.imgix.net/images/app/pretrip/nowheretobefound.png?h=346.5&w=252&crop=fit&dpr=0.3&auto=format,compress,enhance&q=10&bust=${Math.random()}`,
+    uri: `https://unsplash.com/photos/2347729843y7/download?force=true&w=2400&bust=${Math.random()}`,
   },
   thumbnailSource: {
-    uri: `https://pyt-images.imgix.net/images/app/pretrip/nowheretobefound.png?h=346.5&w=252&crop=fit&dpr=0.1&auto=format,compress,enhance&q=10&bust=${Math.random()}`,
+    uri: `https://unsplash.com/photos/2347729843y7/download?force=true&w=24&bust=${Math.random()}`,
   },
   fallbackSource: {
-    uri: `https://pyt-images.imgix.net/images/place-holder.png?bust=${Math.random()}`,
+    uri: `https://unsplash.com/a/img/empty-states/photos.png?bust=${Math.random()}`,
   },
 });
 
 export const InvalidImage = Template.bind({});
 InvalidImage.args = {
   ...inValidSource(),
-  viewStyle: { height: 400, width: 400 },
+  viewStyle: imageStyle,
   resizeMode: 'contain',
 };
 
 const invalidImageOnlySource = () => ({
   source: {
-    uri: `https://pyt-images.imgix.net/images/app/pretrip/nowheretobefound.png?h=346.5&w=252&crop=fit&dpr=0.3&auto=format,compress,enhance&q=10&bust=${Math.random()}`,
+    uri: `https://unsplash.com/photos/2347729843y7/download?force=true&w=2400&bust=${Math.random()}`,
   },
   thumbnailSource: {
-    uri: `https://pyt-images.imgix.net/images/app/pretrip/australia.png?h=346.5&w=252&crop=fit&dpr=0.1&auto=format,compress,enhance&q=10&bust=${Math.random()}`,
+    uri: `https://unsplash.com/photos/yNvVnPcurD8/download?force=true&w=24&bust=${Math.random()}`,
   },
   fallbackSource: {
-    uri: `https://pyt-images.imgix.net/images/place-holder.png?bust=${Math.random()}`,
+    uri: `https://unsplash.com/a/img/empty-states/photos.png?bust=${Math.random()}`,
   },
 });
 export const InvalidImageButWithValidThumbnail = Template.bind({});
 InvalidImageButWithValidThumbnail.args = {
   ...invalidImageOnlySource(),
-  viewStyle: { height: 400, width: 400 },
+  viewStyle: imageStyle,
   resizeMode: 'contain',
 };
 
 export const CustomImageFadeDuration = Template.bind({});
 CustomImageFadeDuration.args = {
   ...validSource(),
-  viewStyle: { height: 400, width: 400 },
+  viewStyle: imageStyle,
   resizeMode: 'contain',
   thumbnailFadeDuration: 250,
   imageFadeDuration: 2000,