TM: Add iOS documentation

Add mp4 + webm videos

Add css tweaks

docs/turbo-native-modules-android.md

@@ -334,6 +334,7 @@ yarn run android
 </TabItem>
 </Tabs>
 
-<video width="50%" height="50%" playsinline="true" autoplay="true" muted="true" loop="true">
-    <source src="/docs/assets/turbo-native-modules-android.webm" type="video/webm" />
+<video width="30%" height="30%" playsinline="true" autoplay="true" muted="true" loop="true">
+    <source src="/docs/assets/turbo-native-modules/turbo-native-modules-android.webm" type="video/webm" />
+    <source src="/docs/assets/turbo-native-modules/turbo-native-modules-android.mp4" type="video/mp4" />
 </video>

docs/turbo-native-modules-ios.md

@@ -5,6 +5,125 @@ title: 'Turbo Native Modules: iOS'
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
-:::caution
-This is work-in-progress... 👷
-:::
+Having completed both your Turbo Native Module specification, run codegen and written the application code we now need to write iOS platform code to make sure `localStorage` survives after the application is closed.
+
+## Prepare your Xcode Project
+
+We need to prepare your iOS project using Xcode. After completing these **6 steps** you'll have `RCTNativeLocalStorage` that implements the generated `NativeLocalStorageSpec` interface.
+
+1. Open the CocoPods generated Xcode Workspace:
+
+```bash
+cd ios
+open TurboModuleExample.xcworkspace
+```
+
+<img class="half-size" alt="Open Xcode Workspace" src="/docs/assets/turbo-native-modules/xcode/1.webp" />
+
+2. Right click on app and select <code>New Group</code>, call the new group `NativeLocalStorage`.
+
+<img class="half-size" alt="Right click on app and select New Group" src="/docs/assets/turbo-native-modules/xcode/2.webp" />
+
+3. In the `NativeLocalStorage` group, create <code>New</code>→<code>File from Template</code>.
+
+<img class="half-size" alt="Create a new file using the Cocoa Touch Classs template" src="/docs/assets/turbo-native-modules/xcode/3.webp" />
+
+4. Use the <code>Cocoa Touch Class</code>
+
+<img class="half-size" alt="Use the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/4.webp"  />
+
+5. Name the Cocoa Touch Class <code>RCTNativeLocalStorage</code> with the <code>Objective-C</code> language
+
+<img class="half-size" alt="Create an Objective-C RCTNativeLocalStorage class" src="/docs/assets/turbo-native-modules/xcode/4.webp" />
+
+6. Rename <code>RCTNativeLocalStorage.m</code> → <code>RCTNativeLocalStorage.mm</code> making it an Objective-C++ file
+
+<img class="half-size" alt="Convert to and Objective-C++ file" src="/docs/assets/turbo-native-modules/xcode/5.webp" />
+
+## Implement localStorage with NSUserDefaults
+
+Start by updating `RCTNativeLocalStorage.h`:
+
+```objc
+//  RCTNativeLocalStorage.h
+//  TurboModuleExample
+
+#import <Foundation/Foundation.h>
+// highlight-add-next-line
+#import <NativeLocalStorageSpec/NativeLocalStorageSpec.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+// highlight-remove-next-line
+@interface RCTNativeLocalStorage : NSObject
+// highlight-add-next-line
+@interface RCTNativeLocalStorage : NSObject <NativeLocalStorageSpec>
+
+@end
+```
+
+Then update our implementation to use `NSUserDefaults.
+
+```objc
+//  RCTNativeLocalStorage.mm
+//  TurboModuleExample
+
+#import "RCTNativeLocalStorage.h"
+
+@implementation RCTNativeLocalStorage
+
+// highlight-add-start
++RCT_EXPORT_MODULE(NativeLocalStorage)
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeLocalStorageSpecJSI>(params);
+}
+
+- (NSString * _Nullable)getItem:(NSString *)key {
+  return [NSUserDefaults.standardUserDefaults stringForKey:key];
+}
+
+- (void)setItem:(NSString *)value
+          key:(NSString *)key {
+  [NSUserDefaults.standardUserDefaults setObject:value forKey:key];
+}
+
+- (void)removeItem:(NSString *)key {
+  [NSUserDefaults.standardUserDefaults removeObjectForKey:key];
+}
+
+- (void)clear {
+  NSDictionary *keys = [NSUserDefaults.standardUserDefaults dictionaryRepresentation];
+  for (NSString *key in keys) {
+    [self removeItem:key];
+  }
+}
+// highlight-add-end
+
+@end
+```
+
+Important things to note:
+
+- `RCT_EXPORT_MODULE` exports and registers the module using the identifier we'll use to access it in the JavaScript environment: `NativeLocalStorage`. See these [docs](./legacy/native-modules-ios#module-name) for more details.
+- You can use Xcode to jump to the Codegen `@protocol NativeLocalStorageSpec`. You can also use Xcode to generate stubs for you.
+
+## Build and run your code on a Simulator
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+```bash
+npm run ios
+```
+</TabItem>
+<TabItem value="yarn">
+```bash
+yarn run ios
+```
+</TabItem>
+</Tabs>
+
+<video width="30%" height="30%" playsinline="true" autoplay="true" muted="true" loop="true">
+    <source src="/docs/assets/turbo-native-modules/turbo-native-modules-ios.webm" type="video/webm" />
+    <source src="/docs/assets/turbo-native-modules/turbo-native-modules-ios.mp4" type="video/mp4" />
+</video>

docs/turbo-native-modules.md

@@ -224,7 +224,6 @@ Codegen is run as part of the script phases that's automatically added to the pr
 cd ios
 bundle install
 bundle exec pod install
-bundle exec pod install
 
 ...
 Framework build type is static library

website/sidebars.json

@@ -101,7 +101,7 @@
           {
             "type": "doc",
             "id": "turbo-native-modules-ios",
-            "label": "👷iOS"
+            "label": "iOS"
           },
           {
             "type": "doc",

website/src/css/customTheme.scss

@@ -84,8 +84,10 @@
   --home-code-red: #d73a49;
   --home-code-purple: #6f42c1;
   --home-code-green: #22863a;
-  --home-code-diff-removed: #f851494;
-  --home-code-diff-added: #3fb9504d;
+  --home-code-diff-removed: #f8514926;
+  --home-code-diff-removed-word: #f8514966;
+  --home-code-diff-added: #2ea04326;
+  --home-code-diff-added-word: #2ea04366;
 
   @media (max-width: 900px) {
     --home-hero-grid-icon: transparent;
@@ -152,8 +154,10 @@ html[data-theme="dark"] {
   --home-code-red: #f46b78;
   --home-code-purple: #a77cf7;
   --home-code-green: #74e68f;
-  --home-code-diff-removed: #f851494;
-  --home-code-diff-added: #3fb9504d;
+  --home-code-diff-removed: #f8514926;
+  --home-code-diff-removed-word: #f8514966;
+  --home-code-diff-added: #2ea04326;
+  --home-code-diff-added-word: #2ea04366;
 
   @media (max-width: 900px) {
     --home-hero-grid-icon: transparent;
@@ -1975,18 +1979,34 @@ figcaption > p:last-child {
   margin-bottom: 0;
 }
 
+/* Diffing with code syntax highlighting */
 .code-remove-line {
   background-color: var(--home-code-diff-removed);
+  .token {
+    background-color: var(--home-code-diff-removed-word);
+  }
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
-  // border-left: 3px solid #ff000080;
 }
 
 .code-add-line {
   background-color: var(--home-code-diff-added);
+  .token {
+    background-color: var(--home-code-diff-added-word);
+  }
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
-  // border-left: 3px solid #ff000080;
+}
+
+img {
+  &.center {
+    width: 100%;
+    justify-content: center;
+  }
+  &.half-size {
+    max-height: 50vh;
+    object-fit: contain;
+  }
 }