Add types and tweak styles

Author: davidkpiano

src/css/custom.css

@@ -660,7 +660,7 @@ h1 {
 }
 
 .markdown h1, .markdown h1:first-child, .index-page h1 {
-  --ifm-h1-font-size: 2.5rem;
+  --ifm-h1-font-size: 1.875rem;
 }
 
 h2 {
@@ -781,7 +781,7 @@ a:hover {
 article,
 .index-page {
   margin: 0 auto;
-  max-width: 66ch;
+  max-width: 50rem;
 }
 
 /* back to top button */
@@ -1077,7 +1077,7 @@ html [class*='toggleButton'] {
 
 .theme-doc-sidebar-item-category-level-1 a,
 .theme-doc-sidebar-item-link-level-1 a {
-  color: var(--st-text);
+  color: var(--ifm-color-emphasis-0);
 }
 
 .theme-doc-sidebar-item-category-level-1 ul li,

versioned_docs/version-5/actions.mdx

@@ -524,7 +524,29 @@ const countMachine = createMachine({
 
 ## TypeScript
 
-_Coming soon_
+You can strongly type the `actions` of your machine in the `types.actions` property of the machine config.
+
+```ts
+const machine = createMachine({
+  types: {} as {
+    // highlight-start
+    actions:
+      | {
+          type: 'track';
+          params: {
+            response: string;
+          };
+        }
+      | { type: 'increment'; params: { value: number } };
+    // highlight-end
+  },
+  // ...
+  entry: [
+    { type: 'track', params: { response: 'good' } },
+    { type: 'increment', params: { value: 1 } },
+  ],
+});
+```
 
 ## Cheatsheet
 

versioned_docs/version-5/actors.mdx

@@ -413,7 +413,39 @@ function Component(props: { actor?: AnyActorRef }) {
 
 ## TypeScript
 
-_Coming soon_
+You can strongly type the `actors` of your machine in the `types.actors` property of the machine config.
+
+```ts
+const fetcher = fromPromise(
+  async ({ input }: { input: { userId: string } }) => {
+    const user = await fetchUser(input.userId);
+
+    return user;
+  },
+);
+
+const machine = createMachine({
+  types: {} as {
+    // highlight-start
+    actors: {
+      src: 'fetchData'; // src name (inline behaviors ideally inferred)
+      id: 'fetch1' | 'fetch2'; // possible ids (optional)
+      logic: typeof fetcher;
+    };
+    // highlight-end
+  },
+  invoke: {
+    src: 'fetchData', // strongly typed
+    id: 'fetch2', // strongly typed
+    onDone: {
+      actions: ({ event }) => {
+        event.output; // strongly typed as { result: string }
+      },
+    },
+    input: { userId: '42' }, // strongly typed
+  },
+});
+```
 
 ## Cheatsheet
 

versioned_docs/version-5/context.mdx

@@ -151,13 +151,22 @@ feedbackActor.send({
 
 ## TypeScript
 
+You can strongly type the `context` of your machine in the `types.context` property of the machine config.
+
 ```ts
 const machine = createMachine({
-  schema: {} as {
+  types: {} as {
+    // highlight-start
     context: {
       feedback: string;
       rating: number;
     };
+    // highlight-end
+  },
+  // Initial context
+  context: {
+    feedback: '',
+    rating: 5,
   },
   entry: ({ context }) => {
     context.feedback; // string

versioned_docs/version-5/delayed-transitions.mdx

@@ -72,14 +72,14 @@ Delayed transitions have a default time interval of 500ms (0.5 seconds).
 
 1. Select the event you want to replace with a delayed transition.
 1. Right-click the event to open the edit menu.
-2. From the **Event type** options, choose **After** to turn the event into a delayed transition.
+1. From the **Event type** options, choose **After** to turn the event into a delayed transition.
 
 #### Using the transition Details panel
 
 1. Open the transition <Info size={18} /> **Details** panel from the right tool menu.
 2. From the **Event type** dropdown menu, choose **After** to turn the event into a delayed transition.
 
-#### Specify delay time 
+#### Specify delay time
 
 Your delay time interval will be displayed in a human-readable format on hover. For example, 15000ms will be displayed as 15 seconds.
 
@@ -160,7 +160,36 @@ Delayed transition timers are canceled when the state is exited.
 
 ## TypeScript
 
-_Coming soon_
+You can strongly type the `delays` of your machine in the `types.delays` property of the machine config.
+
+```ts
+const machine = createMachine({
+  types: {} as {
+    // highlight-start
+    delays: 'shortTimeout' | 'longTimeout' | 'eventually';
+    // highlight-end
+    // ...
+  },
+  // ...
+  after: {
+    // Autocompleted
+    shortTimeout: {
+      /* ... */
+    },
+  },
+  on: {
+    someEvent: {
+      actions: raise(
+        { type: 'anotherEvent' },
+        {
+          // Autocompleted
+          delay: 'eventually',
+        },
+      ),
+    },
+  },
+});
+```
 
 ## Cheatsheet
 

versioned_docs/version-5/eventless-transitions.mdx

@@ -26,7 +26,10 @@ Eventless transitions are labeled “always” and often referred to as “alway
 }
 ```
 
-<SkipDownLink text="Jump to learning more about eventless transitions in XState" link="#eventless-transitions-and-guards"/>
+<SkipDownLink
+  text="Jump to learning more about eventless transitions in XState"
+  link="#eventless-transitions-and-guards"
+/>
 
 ## Using eventless transitions in Stately Studio
 
@@ -77,7 +80,24 @@ Coming soon… examples
 
 ## TypeScript
 
-_Coming soon_
+Eventless transitions can potentially be enabled by any event, so the `event` type is the union of all possible events.
+
+```ts
+const machine = createMachine({
+  types: {} as {
+    events: { type: 'greet'; message: string } | { type: 'submit' };
+  },
+  // ...
+  always: {
+    actions: ({ event }) => {
+      event.type; // 'greet' | 'submit'
+    },
+    guard: ({ event }) => {
+      event.type; // 'greet' | 'submit'
+    },
+  },
+});
+```
 
 ## Cheatsheet
 

versioned_docs/version-5/finite-states.mdx

@@ -167,25 +167,7 @@ console.log(feedbackActor..getSnapshot().hasTag('visible'));
 // logs true
 ```
 
-### Using tags in Stately Studio
-
-You can add tags to states and events in Stately Studio.
-
-First, select the state or event you want to tag.
-
-#### On the canvas
-
-1. Use the <Plus size={18} /> plus icon button to open the edit menu.
-2. Choose <Tag size={18} /> **Tag** from the menu to add a tag block.
-3. Write your tag’s name in the tag’s text input.
-4. Use the <PlusSquare size={18} /> plus icon button alongside your recent tag to add more tags.
-
-#### Using the event details panel
-
-1. Open the state or event <Info size={18} /> **Details** panel from the right tool menu.
-2. Use the **+ Tag** button to add a tag block.
-3. Write your tag’s name in the tag’s text input.
-4. Use the <PlusSquare size={18} /> plus icon button alongside your recent tag to add more tags.
+Read more about [tags](tags.mdx).
 
 ## Meta
 

versioned_docs/version-5/guards.mdx

@@ -235,7 +235,31 @@ on: {
 
 ## TypeScript
 
-_Coming soon_.
+You can strongly type the `guards` of your machine in the `types.guards` property of the machine config.
+
+```ts
+const machine = createMachine({
+  types: {} as {
+    // highlight-start
+    guards:
+      | {
+          type: 'isGreaterThan';
+          params: {
+            count: number;
+          };
+        }
+      | { type: 'isAllowed' };
+    // highlight-end
+  },
+  // ...
+  on: {
+    event: {
+      guard: { type: 'isGreaterThan', params: { count: 5 } },
+      // ...
+    },
+  },
+});
+```
 
 ## Cheatsheet
 

versioned_docs/version-5/input.mdx

@@ -253,16 +253,36 @@ const Component = (props) => {
 
 ## TypeScript
 
+You can strongly type the `input` of your machine in the `types.input` property of the machine config.
+
 ```ts
 import { createActor, createMachine } from 'xstate';
 
 const machine = createMachine({
   types: {} as {
+    // highlight-start
     input: {
       userId: string;
       defaultRating: number;
     };
-    // ...
+    // highlight-end
+    context: {
+      userId: string;
+      feedback: string;
+      rating: number;
+    };
+  },
+  context: ({ input }) => ({
+    userId: input.userId,
+    feedback: '',
+    rating: input.defaultRating,
+  }),
+});
+
+const actor = createActor(machine, {
+  input: {
+    userId: '123',
+    defaultRating: 5,
   },
 });
 ```

versioned_docs/version-5/studio.mdx

@@ -37,6 +37,7 @@ Stately Studio’s editor supports everything you need to visually build state m
 You can access quick start tutorials from the blue <HelpCircle size={12} /> Help button in the editor.
 
 When you first visit the Editor, you’ll be shown two short videos (7m36s) as a quick start guide. You can access these videos again anytime from:
+
 - Editor menu > Help > <GraduationCap size={12} /> **Learn Stately**.
 - The <HelpCircle size={12} /> Help button > <GraduationCap size={12} /> **Learn Stately**.