feat(website): bootstrap docs with Docusaurus

website/.gitignore

@@ -0,0 +1,16 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+.docusaurus

website/.prettierrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  proseWrap: 'always',
+  singleQuote: true,
+  trailingComma: 'es5',
+  importOrder: [
+    // React
+    '^react$',
+    // Docusaurus
+    '^@docusaurus/(.*)$',
+    '^@site/(.*)$',
+    '^@theme/(.*)$',
+    // Internals
+    '^pages/(.*)$',
+    '^components/(.*)$',
+    '^utils/(.*)$',
+    '^styles/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};

website/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/.docusaurus": true
+  },
+  "files.exclude": {
+    "**/node_modules": true,
+    "**/.docusaurus": true
+  },
+  "editor.formatOnSave": true
+}

website/README.md

@@ -0,0 +1,37 @@
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern
+static website generator.
+
+## Installation
+
+```console
+yarn install
+```
+
+## Local Development
+
+```console
+yarn start
+```
+
+This command starts a local development server and open up a browser window.
+Most changes are reflected live without having to restart the server.
+
+## Build
+
+```console
+yarn build
+```
+
+This command generates static content into the `build` directory and can be
+served using any static contents hosting service.
+
+## Deployment
+
+```console
+GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to
+build the website and push to the `gh-pages` branch.

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

website/blog/2022-01-31-why-react-matchez.md

@@ -0,0 +1,51 @@
+---
+slug: why-react-matchez
+title: Why react-matchez?
+author: Matheus Albuquerque
+image: https://avatars.githubusercontent.com/u/2644563?v=4
+author_url: https://www.ythecombinator.space
+author_image_url: https://avatars.githubusercontent.com/u/2644563?v=4
+---
+
+Unfortunately, JavaScript and TypeScript weren’t designed with pattern matching
+in mind. Fortunately, there are some great initiatives to address it, e.g.:
+
+- [Daggy](https://github.com/fantasyland/daggy) gives you the ability to define
+  a type and values of this type (sum types) that you can then pattern match to
+  declare an action depending on the value of this type.
+
+- [ts-pattern](https://github.com/gvergnaud/ts-pattern) gives you exhaustive
+  pattern matching with great type inference; being 100% tailored to bring
+  declarative code branching to JavaScript/TypeScript—by the way, this library
+  was some heavy inspiration to our API.
+
+- Last but not least, there's even a
+  [TC39 proposal](https://github.com/tc39/proposal-pattern-matching) from 2017
+  to add pattern matching to the EcmaScript specification.
+
+Even though there are some interesting efforts in bringing pattern matching at a
+language level, what we lack are React/JSX abstractions for this.
+
+React itself shifted our mindsets from imperatively manipulating the DOM to
+declaratively expressing what the DOM should look like for a given state. So
+it's only fair we take this even further with declarative render branching.
+
+Unfortunately, most of the existing alternatives (like
+[react-pattern-matching](https://github.com/joshblack/react-pattern-matching) or
+[react-pattern-match](https://github.com/tkh44/react-pattern-match)) lack
+features, have poor/zero typing, and are unmaintained.
+
+What we have, though, are domain-specific matching/branching solutions, for
+example:
+
+- [react-router](https://github.com/remix-run/react-router): Declarative
+  matching for routes
+- [react-device-detect](https://github.com/duskload/react-device-detect):
+  Declarative matching for device type
+- [react-matches](https://github.com/souporserious/react-matches): Declarative
+  matching for media queries
+
+> **react-matchez** then comes as a first-class-React, generic, strongly-typed,
+> solution that you can use to build your own domain-specific matching
+> solutions—and reduce drastically the `if`/`else`/`switch` boilerplate from
+> your components.

website/docs/CHANGELOG.md

@@ -0,0 +1,4 @@
+---
+id: changelog
+title: Changelog
+---

website/docs/advanced_usage.md

@@ -0,0 +1,93 @@
+---
+id: advanced-usage
+title: Advanced Usage
+sidebar_label: Advanced Usage
+---
+
+## Using the original components + providing type parameters
+
+This approach is ideal when you have multiple `Match`—or `Switch`—occurrences
+within your component.
+
+The downside is that you'll have to manually pass type parameters to all of your
+cases (`With`, `When`, etc.).
+
+Here's an example:
+
+```tsx
+import { Match, Otherwise, With } from 'react-matchez';
+
+// First shape to be branched
+type FirstShape =
+  | {
+      type: 'ok';
+      data: { type: 'text'; content?: string } | { type: 'img'; src?: string };
+    }
+  | { type: 'cancel'; error?: Error };
+
+const firstResult: FirstShape = { type: 'ok', data: { type: 'img' } };
+
+// Second shape to be branched
+type SecondShape =
+  | { type: 'text'; content?: string }
+  | { type: 'img'; extension?: string };
+
+const secondResult: SecondShape = { type: 'img', extension: 'jpg' };
+
+// Your component
+const Component = () => {
+  return (
+    <>
+      <Match value={firstResult}>
+        <With<FirstShape, false> type="cancel">Cancel</With>
+        <With<FirstShape, false> type="ok" data={{ type: 'text' }}>OK - Text</With>
+        <With<FirstShape, false> type="ok" data={{ type: 'img' }}>OK - Image</With>
+
+        <Otherwise>Fallback</Otherwise>
+      </Match>
+
+      <Match value={secondResult}>
+        <With<SecondShape, false> type="img">Image - Any</With>
+        <With<SecondShape, false> type="img" extension="jpg">Image - JPG</Exact>
+        <With<SecondShape, false> type="img" extension="png">Image - PNG</Exact>
+
+        <Otherwise>Fallback</Otherwise>
+      </Match>
+    </>
+  );
+};
+```
+
+## Using with React.Suspense + React.lazy()
+
+This library plays really well with Suspense/lazy in scenarios of
+feature/browser/OS detection.
+
+Combine the three of them and you'll have your users downloading **only the
+actual component bundle** that matches your condition.
+
+Here's an example:
+
+```tsx
+const supportsSensor = () => Boolean(window.AmbientLightSensor);
+
+const AmbientLight = React.lazy(() => import('./AmbientLight'));
+const Fallback = React.lazy(() => import('./Fallback'));
+
+const MyComponent = () => {
+  const { Match, When, Otherwise } = usePatternMatch();
+
+  return (
+    <Suspense fallback={'Loading'}>
+      <Match>
+        <When predicate={supportsSensor}>
+          <AmbientLight />
+        </When>
+        <Otherwise>
+          <Fallback />
+        </Otherwise>
+      </Match>
+    </Suspense>
+  );
+};
+```

website/docs/api/_category_.yml

@@ -0,0 +1 @@
+label: "API"

website/docs/api/functions/Exact.md

@@ -0,0 +1,29 @@
+---
+id: "Exact"
+title: "Function: Exact"
+sidebar_label: "Exact"
+sidebar_position: 0
+custom_edit_url: null
+---
+
+▸ **Exact**<`Shape`\>(`props`): `Element`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Shape` | extends `Object` |
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`ExactProps`](../types/ExactProps)<`Shape`\> |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/Exact/Exact.tsx:13](https://github.com/ythecombinator/react-matchez/blob/7c6b6bd/src/components/Exact/Exact.tsx#L13)

website/docs/api/functions/Match.md

@@ -0,0 +1,29 @@
+---
+id: "Match"
+title: "Function: Match"
+sidebar_label: "Match"
+sidebar_position: 0
+custom_edit_url: null
+---
+
+▸ **Match**<`Shape`\>(`props`): `FunctionComponentElement`<{}\>
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Shape` | extends `Object` |
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`MatchProps`](../interfaces/MatchProps)<`Shape`\> |
+
+#### Returns
+
+`FunctionComponentElement`<{}\>
+
+#### Defined in
+
+[src/components/Match/Match.tsx:36](https://github.com/ythecombinator/react-matchez/blob/7c6b6bd/src/components/Match/Match.tsx#L36)

website/docs/api/functions/Otherwise.md

@@ -0,0 +1,23 @@
+---
+id: "Otherwise"
+title: "Function: Otherwise"
+sidebar_label: "Otherwise"
+sidebar_position: 0
+custom_edit_url: null
+---
+
+▸ **Otherwise**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`OtherwiseProps`](../interfaces/OtherwiseProps) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/Otherwise/Otherwise.tsx:11](https://github.com/ythecombinator/react-matchez/blob/7c6b6bd/src/components/Otherwise/Otherwise.tsx#L11)

website/docs/api/functions/Switch.md

@@ -0,0 +1,29 @@
+---
+id: "Switch"
+title: "Function: Switch"
+sidebar_label: "Switch"
+sidebar_position: 0
+custom_edit_url: null
+---
+
+▸ **Switch**<`Shape`\>(`props`): `Element`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Shape` | extends `Object` |
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`SwitchProps`](../types/SwitchProps)<`Shape`\> |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/Switch/Switch.tsx:10](https://github.com/ythecombinator/react-matchez/blob/7c6b6bd/src/components/Switch/Switch.tsx#L10)

website/docs/api/functions/When.md

@@ -0,0 +1,29 @@
+---
+id: "When"
+title: "Function: When"
+sidebar_label: "When"
+sidebar_position: 0
+custom_edit_url: null
+---
+
+▸ **When**<`Shape`\>(`props`): `Element`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Shape` | extends `Object` |
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`WhenProps`](../interfaces/WhenProps)<`Shape`\> |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/When/When.tsx:15](https://github.com/ythecombinator/react-matchez/blob/7c6b6bd/src/components/When/When.tsx#L15)