Initial release

Author: Adil Malik

.gitignore

@@ -1,104 +1,78 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
+.DS_Store
+*.swp
+.idea
+node_modules
+report
+dist/
+.vscode/
+.out/
+commonjs/
+module/
+target/
+npm-debug.log
+npm-shrinkwrap.json
+*.iml
+jsconfig.json
+.vscode/*
+!.vscode/settings.json
+_node
 .nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
+yarn-error.log
+package-lock.json
+lerna-debug.log
+coverage/
+junit.xml
+out/
+bundle-master
+bundle-pr
+diff.html
+roleFile
+core.*
 .env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
+.eslintcache
+tsconfig.tsbuildinfo
+build-info.sh
+proof-junit.xml
+proof-a11y.json
+.snapshots/local/actual
+.snapshots/local/diff
+*.stories.jsx
+
+# Android
+*.iml
+*.ipr
+*.iws
+.idea/
+local.properties
+bin/
+gen/
+build/
+target/
+release/
+.gradle/
+
+# iOS
+Index/
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+
+storybook-static/
+*.lock

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Intuit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,2 +1,53 @@
-# Storybook for Native
+# Storybook Native
 
+This module is a build tool that allows creation of stories to view components inside of Android and iOS native applications easily inside of storybook. The intended purpose is for native developers to be able to quickly get started with storybook without having to learn how to write extensive amounts of JavaScript, and without having to learn how to use storybook.
+
+## Installation
+`npm install @storybook/native`
+or
+`yarn add @storybook/native`
+
+## How it works
+Storybook Native uses [appetize.io](https://appetize.io/) to render your mobile application in an emulator that can be interacted with from your browser. appetize.io allows you to pass in custom launch arguments which will be sent to your mobile application when it first starts up. In your application, you must create a handler that determines what to render based on what those launch arguments are.  
+  
+Example launch arguments:
+```json
+{
+  "component": "button",
+  "theme": "dark"
+}
+```
+If you wanted to use those launch arguments, your application would need to parse the value associated with the  `component` key, and then render the corresponding component (in this case, a button component). Your application would also need to request either light or dark mode based on what the value of `theme` is.
+
+*You do not need to exactly follow the above example for your launch arguments! Your launch arguments object can have any information that you want.*
+
+Examples of parsing launch arguments:
+ - [Android - parsing intents](examples/android-material-ui/app/app/src/main/java/com/intuit/august2020/storybookdemoapp/MainActivity.kt#L27)
+ - [Flutter](examples/flutter/app/lib/main.dart#L73)
+ - [iOS](examples/ios-material-ui/app/iOSStoryBookDemo/iOSStoryBookDemo/AppDelegate.swift#L66)
+
+After you have modified your application to support these launch arguments, you must upload your application to appetize.io. After the upload, you will receive a public key that can be used with Storybook Native to view your application directly in storybook.
+
+## Usage
+To use this module, you must create a node script [such as this example one](examples/ios-simple/generate.js) that imports `generateStories` from this module. Pass in details about stories that you want this module to generate. Each call to `generateStories` generates a file that contains stories generated from the information you pass in. Run `yarn start-storybook` to view those stories in a local storybook instance, or run `yarn build-storybook` to build a static storybook that can be uploaded as a web page.
+
+You must also have a `.storybook` folder with a `main.js` file inside of it, where you must configure the path to your stories, as well as any addons you want to use. The `@storybook/addon-docs` and `@storybook/addon-controls` addons must always be included. The `@storybook/native-addon` addon is required if you want to be able to rotate the emulator, or capture screenshots. [Here](examples/ios-simple/.storybook/main.js) is an example of a valid `main.js` file.
+
+### Examples
+Examples of how to use this module can be found [in this folder](examples/). The `app` folder inside each example contains the source code of the application the example is for.
+
+### Parameters for `generateStories`
+ - category: The group/category that the specified stories will fall under
+ - filePath: The path to write the file that contains the generated stories
+ - apiKey: Your application's public key that you received from appetize.io
+ - platform: What platform your app is running on ("ios" or "android")
+ - stories: A list of stories to generate, where each story is an object represented with the following keys:
+   - name: The name of the story
+   - appLaunchArgs: An object that gets passed to your application when it first launches. This is what is used to determine which component or page to load in your application, and it can also be used to handle other logic such as theming.
+   - docs (optional): Documentation that you want to show up in the storybook docs panel
+
+## Local development
+ - Clone this repo
+ - Run yarn to install dependencies
+ - `yarn build && cd examples/ios-material-ui && yarn start`  
+Anytime changes are made, yarn build and start must be re-run

examples/android-material-ui/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../stories/*.stories.jsx'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/native-addon/dist/register.js'
+  ]
+};

examples/android-material-ui/app/app/.gitignore

@@ -0,0 +1 @@
+/build

examples/android-material-ui/app/app/build.gradle

@@ -0,0 +1,38 @@
+apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
+
+android {
+    compileSdkVersion 28
+
+    defaultConfig {
+        applicationId "com.intuit.august2020.storybookdemoapp"
+        minSdkVersion 16
+        targetSdkVersion 28
+        versionCode 1
+        versionName "1.0"
+
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: "libs", include: ["*.jar"])
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+    implementation 'androidx.core:core-ktx:1.3.1'
+    implementation 'androidx.appcompat:appcompat:1.2.0'
+    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
+	implementation 'com.google.android.material:material:1.2.1'
+	implementation 'androidx.legacy:legacy-support-v4:1.0.0'
+	testImplementation 'junit:junit:4.12'
+    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
+
+}

examples/android-material-ui/app/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

examples/android-material-ui/app/app/src/androidTest/java/com/intuit/august2020/storybookdemoapp/ExampleInstrumentedTest.kt

@@ -0,0 +1,24 @@
+package com.intuit.august2020.storybookdemoapp
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("com.intuit.august2020.storybookdemoapp", appContext.packageName)
+    }
+}

examples/android-material-ui/app/app/src/main/AndroidManifest.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="com.intuit.august2020.storybookdemoapp">
+
+	<application
+		android:allowBackup="true"
+		android:icon="@mipmap/ic_launcher"
+		android:label="@string/app_name"
+		android:roundIcon="@mipmap/ic_launcher_round"
+		android:supportsRtl="true"
+		android:theme="@style/AppTheme">
+		<activity android:name=".TextFieldActivity"></activity>
+		<activity android:name=".TabsActivity" />
+		<activity android:name=".SnackbarActivity" />
+		<activity android:name=".SliderActivity" />
+		<activity android:name=".SwitchActivity" />
+		<activity android:name=".RadioActivity" />
+		<activity android:name=".DialogsActivity" />
+		<activity android:name=".ChipsActivity" />
+		<activity android:name=".CardActivity" />
+		<activity android:name=".FloatingButtonActivity" />
+		<activity android:name=".ButtonActivity" />
+		<activity android:name=".MainActivity">
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+	</application>
+
+</manifest>