feat: add storybook

.github/renovate.json

@@ -176,6 +176,20 @@
       ],
       "automerge": true
     },
+    {
+      "groupName": "storybook",
+      "matchPackageNames": [
+        "@storybook/addon-actions",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
+        "@storybook/addon-links",
+        "@storybook/builder-webpack4",
+        "@storybook/manager-webpack4",
+        "@storybook/react",
+        "@storybook/testing-library"
+      ],
+      "automerge": true
+    },
     {
       "matchPackagePatterns": ["*"],
       "automerge": true

.github/workflows/documentation.yml

@@ -22,7 +22,7 @@ jobs:
           restore-keys: yarn-cache-
       - run: yarn install --immutable
       - name: Build docs
-        run: yarn docs
+        run: yarn build:docs
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:

.storybook/main.js

@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+}

.storybook/preview.js

@@ -0,0 +1,10 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+    viewMode: "docs",
+  },
+}

README.md

@@ -1,6 +1,8 @@
 # @bounceapp/lottie
 
-[![Version](https://img.shields.io/npm/v/@bounceapp/lottie.svg)](https://www.npmjs.com/package/@bounceapp/lottie) [![License](https://img.shields.io/github/license/Bounceapp/lottie)](https://github.com/Bounceapp/lottie/blob/master/LICENSE)
+[![Package version](https://img.shields.io/npm/v/@bounceapp/lottie?style=for-the-badge&labelColor=000000)](https://www.npmjs.com/package/@bounceapp/lottie)
+[![MIT license](https://img.shields.io/badge/License-MIT-brightgreen.svg?style=for-the-badge&labelColor=000000)](LICENSE)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-hotpink.svg?style=for-the-badge&labelColor=000000)](https://github.com/dcangulo/@bounceapp/lottie/pulls)
 
 Lottie wrapper for React Native Web
 

example/app.json

@@ -6,6 +6,7 @@
     "orientation": "portrait",
     "ios": {
       "supportsTablet": true
-    }
+    },
+    "platforms": ["android", "ios", "web"]
   }
 }

example/babel.config.js

@@ -2,15 +2,5 @@ module.exports = function (api) {
   api.cache(true)
   return {
     presets: ["babel-preset-expo"],
-    plugins: [
-      [
-        "module-resolver",
-        {
-          alias: {
-            "@bounceapp/lottie": "../src",
-          },
-        },
-      ],
-    ],
   }
 }

example/package.json

@@ -11,6 +11,7 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@bounceapp/lottie": "../src",
     "expo": "45.0.6",
     "lottie-ios": "3.2.3",
     "lottie-react": "2.3.1",
@@ -22,8 +23,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.19.3",
-    "@babel/preset-env": "7.19.3",
-    "@expo/webpack-config": "0.17.2",
+    "@expo/webpack-config": "~0.16.21",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-preset-expo": "9.2.0",
     "typescript": "4.8.4"

example/webpack.config.js

@@ -0,0 +1,15 @@
+const createExpoWebpackConfigAsync = require("@expo/webpack-config")
+
+module.exports = async function (env, argv) {
+  const config = await createExpoWebpackConfigAsync(
+    {
+      ...env,
+      babel: {
+        dangerouslyAddModulePathsToTranspile: ["@bounceapp/lottie"],
+      },
+    },
+    argv,
+  )
+
+  return config
+}

example/yarn.lock

@@ -921,7 +921,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/preset-env@7.19.3", "@babel/preset-env@^7.12.9":
+"@babel/preset-env@^7.12.9":
   version "7.19.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.19.3.tgz#52cd19abaecb3f176a4ff9cc5e15b7bf06bec754"
   integrity sha512-ziye1OTc9dGFOAXSWKUqQblYHNlBOaDl8wzqf2iKXJAltYiR3hKHUKmkt+S9PppW7RQpq4fFCrwwpIDj/f5P4w==
@@ -1083,6 +1083,9 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@bounceapp/lottie@../src":
+  version "0.0.0"
+
 "@expo/[email protected]", "@expo/bunyan@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@expo/bunyan/-/bunyan-4.0.0.tgz#be0c1de943c7987a9fbd309ea0b1acd605890c7b"
@@ -1217,6 +1220,23 @@
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-46.0.2.tgz#191f225ebfcbe624868ddc40efae79593f948dd8"
   integrity sha512-PXkmOgNwRyBfgVT1HmFZhfh3Qm7WKKyV6mk3/5HJ/LzPh1t+Zs2JrWX8U2YncTLV1QzV7nV8tnkyvszzqnZEzQ==
 
+"@expo/[email protected]":
+  version "6.0.24"
+  resolved "https://registry.yarnpkg.com/@expo/config/-/config-6.0.24.tgz#3602da8fdfa817e290a52fb328fc8ed9d6bc61e7"
+  integrity sha512-OcACI1md1Yo5TQmUxxueJ/RaTlR2Mgl6KswTFOYCL1XJERF/jjAx95zhWXH+JQGdlM0yB0vqM6vB6GbUFRvLxA==
+  dependencies:
+    "@babel/code-frame" "~7.10.4"
+    "@expo/config-plugins" "4.1.5"
+    "@expo/config-types" "^45.0.0"
+    "@expo/json-file" "8.2.36"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    require-from-string "^2.0.2"
+    resolve-from "^5.0.0"
+    semver "7.3.2"
+    slugify "^1.3.4"
+    sucrase "^3.20.0"
+
 "@expo/[email protected]", "@expo/config@^6.0.14", "@expo/config@~6.0.23":
   version "6.0.26"
   resolved "https://registry.yarnpkg.com/@expo/config/-/config-6.0.26.tgz#2c9255ab618a354c8c8bd97366d60992ed21195f"
@@ -1433,18 +1453,19 @@
   resolved "https://registry.yarnpkg.com/@expo/vector-icons/-/vector-icons-13.0.0.tgz#e2989b85e95a82bce216f88cf8fb583ab050ec95"
   integrity sha512-TI+l71+5aSKnShYclFa14Kum+hQMZ86b95SH6tQUG3qZEmLTarvWpKwqtTwQKqvlJSJrpFiSFu3eCuZokY6zWA==
 
-"@expo/webpack-config@0.17.2":
-  version "0.17.2"
-  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.17.2.tgz#04975c0f88714df592722be1ddd616bacdff50ff"
-  integrity sha512-cgcWyVXUEH5wj4InAPCIDHAGgpkQhpzWseCj4xVjdL3paBKRMWVjPUqmdHh/exap3U0kHGr/XS+e7ZWLcgHkUw==
+"@expo/webpack-config@~0.16.21":
+  version "0.16.27"
+  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.16.27.tgz#05819e9b4a3f9dfc6890e86d14c11071d70c8891"
+  integrity sha512-dC9RzRJAvMncNyxQX1+SR4NfkQPwjYxhxDpeUxGVySEuPLeluG219ddqMTVh2HMeqA7fGZsCEGWa5yVadSknNQ==
   dependencies:
     "@babel/core" "7.9.0"
+    "@expo/config" "6.0.24"
     babel-loader "8.1.0"
     chalk "^4.0.0"
     clean-webpack-plugin "^3.0.0"
     copy-webpack-plugin "~6.0.3"
     css-loader "~3.6.0"
-    expo-pwa "0.0.123"
+    expo-pwa "0.0.122"
     file-loader "~6.0.0"
     find-yarn-workspace-root "~2.0.0"
     getenv "^1.0.0"
@@ -4448,11 +4469,12 @@ [email protected]:
     compare-versions "^3.4.0"
     invariant "^2.2.4"
 
-[email protected].123:
-  version "0.0.123"
-  resolved "https://registry.yarnpkg.com/expo-pwa/-/expo-pwa-0.0.123.tgz#06c3b6293d36b7e35a08f814172fcd3a139cc950"
-  integrity sha512-zLueqATI+bvvjAfPHErrQ/jnsAN1/Jy46/K0TjdVvvCPoouVym6+1LhIEUUDAHTNJBOb9BIav9WxlrFb5/h3KA==
+[email protected].122:
+  version "0.0.122"
+  resolved "https://registry.yarnpkg.com/expo-pwa/-/expo-pwa-0.0.122.tgz#1ebe55694908a1f6d7b6f03d251464a4531cafcc"
+  integrity sha512-E2DVR/1SWFXqLLT9XNKnSVoHbZLGhpkx7PigaqfcI/t1hF+A6zAopwDfKmpFGymuSVqlwEJMTr/PYRdhUY55/g==
   dependencies:
+    "@expo/config" "6.0.24"
     "@expo/image-utils" "0.3.22"
     chalk "^4.0.0"
     commander "2.20.0"

package.json

@@ -16,7 +16,8 @@
     "!lib/typescript/example",
     "!**/__tests__",
     "!**/__fixtures__",
-    "!**/__mocks__"
+    "!**/__mocks__",
+    "!**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "keywords": [
     "expo",
@@ -41,7 +42,8 @@
     "lint-staged": "lint-staged --allow-empty",
     "prepare": "bob build && husky install",
     "release": "release-it",
-    "docs": "yarn typedoc ./src/index.ts --out ./docs --tsconfig ./tsconfig.json --readme none --sort source-order",
+    "build:docs": "build-storybook --output-dir docs",
+    "dev:docs": "start-storybook -p 6006",
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn"
   },
@@ -74,6 +76,14 @@
     "jest": "28.1.3",
     "lint-staged": "13.0.3",
     "prettier": "2.7.1",
+    "@storybook/addon-actions": "6.5.12",
+    "@storybook/addon-essentials": "6.5.12",
+    "@storybook/addon-interactions": "6.5.12",
+    "@storybook/addon-links": "6.5.12",
+    "@storybook/builder-webpack4": "6.5.12",
+    "@storybook/manager-webpack4": "6.5.12",
+    "@storybook/react": "6.5.12",
+    "@storybook/testing-library": "0.0.13",
     "@release-it/conventional-changelog": "5.1.1",
     "@types/jest": "28.1.8",
     "@types/prettier": "2.7.1",
@@ -88,7 +98,6 @@
     "react-native-builder-bob": "0.18.3",
     "react-native": "0.68.2",
     "release-it": "15.5.0",
-    "typedoc": "0.23.15",
     "@commitlint/cli": "17.1.2",
     "@commitlint/config-conventional": "17.1.0",
     "@typescript-eslint/eslint-plugin": "5.39.0",
@@ -104,8 +113,7 @@
     "eslint-plugin-react": "7.31.9",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-native": "4.0.0",
-    "eslint-plugin-unused-imports": "2.0.0",
-    "@babel/core": "7.19.3"
+    "eslint-plugin-unused-imports": "2.0.0"
   },
   "peerDependencies": {
     "expo": "*",

src/Lottie.stories.tsx

@@ -0,0 +1,36 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react"
+
+import lottieAnimation from "../example/lottieAnimation.json"
+import { LottieView } from "./Lottie"
+
+export default {
+  title: "LottieView",
+  component: LottieView,
+  parameters: {
+    viewMode: "docs",
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof LottieView>
+
+const Template: ComponentStory<typeof LottieView> = args => (
+  <div
+    style={{
+      display: "flex",
+      height: "100vh",
+      width: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+    }}>
+    <LottieView {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.storyName = "LottieView"
+Default.args = {
+  style: { width: 100, height: 100 },
+  autoPlay: true,
+  loop: true,
+  source: lottieAnimation,
+}