Merge pull request #197 from statelyai/davidkpiano/v5-types

Add types and tweak styles

Author: davidkpiano

src/css/custom.css

@@ -22,9 +22,10 @@
 
 html,
 body {
+  background-color: var(--st-background);
   font-weight: var(--ifm-font-weight-normal);
   letter-spacing: -0.011rem;
-  line-height: 1.45;
+  line-height: 1.625;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -116,7 +117,7 @@ body {
   --st-violet-50: #fcecff;
 
   /* Gray */
-  --st-gray-900: #151618;
+  --st-gray-900: #15151d;
   --st-gray-850: #212226;
   --st-gray-825: #27282a;
   --st-gray-800: #2d2e34;
@@ -159,6 +160,7 @@ body {
   --ifm-link-decoration: underline;
   --docusaurus-highlighted-code-line-bg: var(--st-code-highlight-background);
   --ifm-heading-vertical-rhythm-bottom: 0.75;
+  --ifm-footer-background-color: var(--st-background);
   --ifm-code-background: var(--st-code-highlight-background);
   --ifm-code-border-radius: 0.25em;
   --ifm-code-font-size: 95%;
@@ -301,7 +303,7 @@ body {
   /* tables */
   --ifm-table-border-color: var(--st-layout-border);
   --ifm-table-background: transparent;
-  --ifm-table-stripe-background: rgba(255,255,255,0.6);
+  --ifm-table-stripe-background: rgba(255, 255, 255, 0.6);
   --ifm-footer-link-color: var(--st-footer-link);
 
   /* admonitions */
@@ -331,7 +333,7 @@ html[data-theme='light'] body {
   --st-text: var(--st-gray-800);
   --st-text-highlight: var(--st-gray-900);
   --st-heading: var(--st-text-highlight);
-  --st-text-secondary: var(--st-gray-700);
+  --st-text-secondary: var(--st-gray-600);
   --st-text-link: var(--st-blue-700);
   --st-text-link-hover: var(--st-blue-600);
   --st-text-link-active: var(--st-blue-500);
@@ -349,7 +351,7 @@ html[data-theme='light'] body {
   --st-layout-border-secondary: var(--st-gray-100);
   --st-code-border: var(--st-gray-100);
   --st-codeblock-background: white;
-  --st-code-inline-border: 1px solid rgba(191, 227, 248, .5);/* var(--st-blue-100) in rgba */
+  --st-code-inline-border: 1px solid rgba(191, 227, 248, 0.5); /* var(--st-blue-100) in rgba */
   --st-code-inline-text: var(--st-blue-900);
   --st-code-highlight-background: var(--st-blue-50);
   --st-copy-button-background: var(--st-blue-100);
@@ -413,7 +415,7 @@ html[data-theme='light'] body {
   --docsearch-footer-shadow: inset 0 1px 0 0 var(--st-gray-100);
 
   /* tags */
-  --st-tag-border: 1px solid rgba(191, 227, 248, .5);/* var(--st-blue-100) in rgba */
+  --st-tag-border: 1px solid rgba(191, 227, 248, 0.5); /* var(--st-blue-100) in rgba */
   --st-tag-text: var(--st-blue-900);
   --st-tag-background: var(--st-blue-50);
 
@@ -481,9 +483,9 @@ html[data-theme='dark'] body {
   --st-background: var(--st-gray-900);
   --st-background-secondary: var(--st-gray-800);
   --st-text: var(--st-gray-200);
-  --st-text-highlight: var(--st-gray-100);
+  --st-text-highlight: var(--st-gray-50);
   --st-heading: var(--st-text-highlight);
-  --st-text-secondary: var(--st-gray-200);
+  --st-text-secondary: var(--st-gray-400);
   --st-text-link: var(--st-blue-300);
   --st-text-link-hover: var(--st-blue-400);
   --st-text-link-active: var(--st-blue-400);
@@ -502,7 +504,7 @@ html[data-theme='dark'] body {
   --st-layout-border: var(--st-gray-700);
   --st-layout-border-secondary: var(--st-gray-700);
   --st-code-border: transparent;
-  --st-code-inline-border: 1px solid rgba(69, 71, 79, .5);/* var(--st-gray-700) in rgba */
+  --st-code-inline-border: 1px solid rgba(69, 71, 79, 0.5); /* var(--st-gray-700) in rgba */
   --st-code-inline-text: var(--st-gray-50);
   --st-codeblock-background: var(--st-gray-850);
   --st-code-highlight-background: var(--st-gray-800);
@@ -600,7 +602,7 @@ html[data-theme='dark'] body {
   --ifm-toc-link-color: var(--st-text);
 
   /* tags */
-  --st-tag-border: 1px solid rgba(69, 71, 79, .5);/* var(--st-gray-700) in rgba */
+  --st-tag-border: 1px solid rgba(69, 71, 79, 0.5); /* var(--st-gray-700) in rgba */
   --st-tag-text: var(--st-gray-50);
   --st-tag-background: var(--st-gray-850);
 }
@@ -659,40 +661,44 @@ h1 {
   letter-spacing: -0.022rem;
 }
 
-.markdown h1, .markdown h1:first-child, .index-page h1 {
-  --ifm-h1-font-size: 2.5rem;
+.markdown h1,
+.markdown h1:first-child,
+.index-page h1 {
+  --ifm-h1-font-size: 2rem;
 }
 
 h2 {
   letter-spacing: -0.021rem;
 }
 
 .markdown h2 {
-  --ifm-h2-font-size: 2rem;
+  margin-top: 4.5rem;
+  --ifm-h2-font-size: 1.5rem;
 }
 
 h3 {
   letter-spacing: -0.019rem;
+  color: var(--st-heading);
 }
 
 .markdown h3 {
-  --ifm-h3-font-size: 1.5rem;
+  --ifm-h3-font-size: 1.25rem;
 }
 
 .markdown > h3 {
-    margin-top: calc(var(--ifm-h2-vertical-rhythm-top) * var(--ifm-leading));
+  margin-top: 3rem;
 }
 
 .markdown h4 {
-  --ifm-h4-font-size: 1.2rem;
+  --ifm-h4-font-size: 1.15rem;
 }
 
 .markdown h5 {
-  --ifm-h5-font-size: 1.1rem;
+  --ifm-h5-font-size: 1.05rem;
 }
 
 .markdown h6 {
-  --ifm-h6-font-size: 1.05rem;
+  --ifm-h6-font-size: 1rem;
 }
 
 .text--bold,
@@ -781,7 +787,10 @@ a:hover {
 article,
 .index-page {
   margin: 0 auto;
-  max-width: 66ch;
+  max-width: 50rem;
+  /* adds more side padding when in column mode */
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 /* back to top button */
@@ -846,6 +855,12 @@ code {
     margin-right: 0;
     width: calc(var(--doc-sidebar-width) - 1rem);
   }
+  article,
+  .index-page {
+    /* Let content breath some on a not-huge screen */
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 
 .navbar__logo {
@@ -1077,7 +1092,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(--st-text-highlight);
 }
 
 .theme-doc-sidebar-item-category-level-1 ul li,
@@ -1109,6 +1124,7 @@ html [class*='toggleButton'] {
 }
 .menu__list-item:last-of-type {
   padding-bottom: 0.2rem;
+  margin-bottom: 0.5rem;
 }
 .menu__list-item:not(:first-child) {
   margin-top: 0;
@@ -1160,6 +1176,7 @@ html [class*='toggleButton'] {
 .menu__list-item .menu__list-item .menu__link--active {
   border-left: 3px solid var(--st-menu-link-border-active);
   margin-left: -4px;
+  color: var(--st-text-highlight);
 }
 
 .menu__list-item .menu__list-item .menu__list-item .menu__link--active {
@@ -1364,7 +1381,8 @@ details summary::before {
   --ifm-alert-border-color: var(--st-tip-accent);
 }
 
-.alert--danger, .alert--breakingchange {
+.alert--danger,
+.alert--breakingchange {
   --ifm-alert-background-color: var(--st-danger-background);
   --ifm-alert-background-color-highlight: var(--st-danger-accent);
   --ifm-alert-foreground-color: var(--st-danger-text);
@@ -1379,7 +1397,8 @@ details summary::before {
   --ifm-alert-border-color: var(--st-warning-accent);
 }
 
-.alert--v4compatible, .alert--breakingchange {
+.alert--v4compatible,
+.alert--breakingchange {
   width: fit-content;
   padding: 4px 10px;
 }
@@ -1570,8 +1589,8 @@ a.link-box strong {
   text-align: center;
 }
 
-.docs-intro h2:hover a.hash-link  {
- opacity: 0;
+.docs-intro h2:hover a.hash-link {
+  opacity: 0;
 }
 
 .docs-intro-studio,

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