feat: add Migrations and Code Styling docs to Storybook

packages/odyssey-storybook/.storybook/preview.js

@@ -14,12 +14,12 @@ export const parameters = {
         "Welcome",
         ["Introduction (README)", "Docs Status"],
         "Installation",
-        ["Odyssey-React-MUI", "Odyssey-React-Labs"],
+        ["Migrations", "Odyssey-React-MUI", "Odyssey-React-Labs"],
         "Guidelines",
         "Contributing",
+        "Customization",
         "MUI Components",
         "Labs Components",
-        "Customization",
       ],
       locales: "",
     },

packages/odyssey-storybook/src/contributing/CodeStyling.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Contributing/Code Styling Guidelines" />
+
+# Code Styling Guidelines
+
+## Prop Naming
+
+We define every prop explicitly, rather than extending the full array of MUI props, to ensure that Odyssey components only include the features we’ve explicitly defined.
+
+We derive state from functionality whenever possible.
+
+### Callbacks
+
+All events have an `on` prefix. Events are named as `on[EVENT_NAME]`, with the event in present-tense (such as `onClick`, `onRemove`, etc).
+
+In MUI, the Chip component includes separate props for `clickable` and `onClick`. For Odyssey Tag, we’ve simplified this to only `onClick` — if `onClick` is defined, we know the tag is `cliackble`. If it isn’t defined, we know it isn’t. No need for two separate props.
+
+### Booleans
+
+Booleans are named as `isBoolean` or `hasBoolean`, such as `isDisabled`, `isVisible`, or `hasError`. This is different from MUI, which uses the simple boolean name (`disabled` or `visible`).
+
+### Terminology: Delete versus Remove
+
+We have deliberately different meanings for “Delete” and “Remove”.
+
+We use Delete for an action that makes an object permanently inaccessible, such as deleting data from a database.
+
+We use Remove for an action that removes a reference to an object, or for temporary removal, such as removing a tag from a list (assuming the tag is still available to be added to future lists).

packages/odyssey-storybook/src/installation/Migrations.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Installation/Migrations" />
+
+# Migrations
+
+## `v0.21.x` ➡️ `v0.22.x`
+
+### Component API
+
+1. // Placeholder
+
+### Deprecations
+
+1. // Placeholder
+
+## `v0.20.x` ➡️ `v0.21.x`
+
+### Component API
+
+1. // Placeholder
+
+### Deprecations
+
+1. // Placeholder
+
+## `v0.17.x` ➡️ `v0.20.x`
+
+### Component API
+
+1. // Placeholder
+
+### Deprecations
+
+1. // Placeholder
+
+## `v0.14.x` ➡️ `0.17.x`
+
+### Importing from Odyssey
+
+As of `0.15.2`, all MUI and Odyssey components are exported from `@okta/odyssey-react-mui`. No further need to maintain a separate version of MUI.
+
+If you're using components not supported by Odyssey, please get your product designers in touch with Odyssey to see what we need to do going forward.
+
+It's possible you need to still have your own MUI version, but it's possible there's an Odyssey design solution.
+
+Also, Odyssey-Labs exists for this very purpose; things that you want in Odyssey, but we haven't had a finalized design.
+
+### Theming
+
+Odyssey now includes theme components and CSP nonce built into it's `ThemeProvider` wrapper. Just like MUI's `ThemeProvider`, this needs to go at the top-level of your app and takes no props.
+
+In a later update, this component will be renamed `OdysseyProvider`.
+
+#### Custom Theming
+
+It's possible you want to customize Odyssey's theme because of your app's requirements. You'll want `OdysseyThemeProvider` (MUI and Odyssey theme wrapper) and `OdysseyCacheProvider` (Emotion Cache + Nonce).
+
+At this point, we still export `MuiThemeProvider`
+
+### `useTheme`
+
+- `typography.body` is now `typography.body1`.
+- `typography.caption` is now `typography.subtitle`.