feat(docs/website): move integrations to extensions (#2261)

docs/integrations/cache.mdx → docs/extensions/cache.mdx

@@ -1,6 +1,6 @@
 ---
 title: Cache
-description: This doc describes cache integration.
+description: This doc describes cache extension.
 nav: 4.07
 keywords: cache
 ---

docs/integrations/immer.mdx → docs/extensions/immer.mdx

@@ -1,6 +1,6 @@
 ---
 title: Immer
-description: This doc describes Immer integration.
+description: This doc describes Immer extension.
 nav: 4.04
 keywords: immer
 ---

docs/integrations/location.mdx → docs/extensions/location.mdx

@@ -1,6 +1,6 @@
 ---
 title: Location
-description: This doc describes window.location integration.
+description: This doc describes window.location extension.
 nav: 4.06
 keywords: location,hash
 ---

docs/integrations/optics.mdx → docs/extensions/optics.mdx

@@ -1,6 +1,6 @@
 ---
 title: Optics
-description: This doc describes Optics-ts integration.
+description: This doc describes Optics-ts extension.
 nav: 4.09
 keywords: optics
 ---

docs/integrations/query.mdx → docs/extensions/query.mdx

@@ -1,6 +1,6 @@
 ---
 title: Query
-description: This doc describes TanStack Query integration.
+description: This doc describes TanStack Query extension.
 nav: 4.02
 keywords: tanstack,query
 ---
@@ -11,11 +11,11 @@ From the [Overview docs](https://tanstack.com/query/v4/docs/overview):
 
 > React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes **fetching, caching, synchronizing and updating server state** in your React applications a breeze.
 
-[jotai-tanstack-query](https://github.com/jotai-labs/jotai-tanstack-query) is a Jotai integration library for TanStack Query. It provides a wonderful interface with all of the TanStack Query features, providing you the ability to use those features in combination with your existing Jotai state.
+[jotai-tanstack-query](https://github.com/jotai-labs/jotai-tanstack-query) is a Jotai extension library for TanStack Query. It provides a wonderful interface with all of the TanStack Query features, providing you the ability to use those features in combination with your existing Jotai state.
 
 ### Install
 
-In addition to `jotai`, you have to install `jotai-tanstack-query` and `@tanstack/query-core` to use the integration.
+In addition to `jotai`, you have to install `jotai-tanstack-query` and `@tanstack/query-core` to use the extension.
 
 ```bash
 yarn add jotai-tanstack-query @tanstack/query-core

docs/integrations/redux.mdx → docs/extensions/redux.mdx

@@ -1,7 +1,7 @@
 ---
 title: Redux
-description: This doc describes Redux integration.
-nav: 4.99
+description: This doc describes Redux extension.
+nav: 4.98
 keywords: redux
 published: false
 ---

docs/integrations/relay.mdx → docs/extensions/relay.mdx

@@ -1,7 +1,7 @@
 ---
 title: Relay
-description: This doc describes Relay integration.
-nav: 4.99
+description: This doc describes Relay extension.
+nav: 4.98
 keywords: relay
 published: false
 ---

docs/integrations/scope.mdx → docs/extensions/scope.mdx

@@ -1,6 +1,6 @@
 ---
 title: Scope
-description: This doc describes scope integration.
+description: This doc describes scope extension.
 nav: 4.08
 keywords: scope
 ---

docs/integrations/trpc.mdx → docs/extensions/trpc.mdx

@@ -1,6 +1,6 @@
 ---
 title: tRPC
-description: This doc describes tRPC integration.
+description: This doc describes tRPC extension.
 nav: 4.01
 keywords: rpc,trpc,typescript,t3
 ---
@@ -9,7 +9,7 @@ You can use Jotai with [tRPC](https://trpc.io).
 
 ### Install
 
-You have to install `jotai-trpc`, `@trpc/client` and `@trpc/server` to use the integration.
+You have to install `jotai-trpc`, `@trpc/client` and `@trpc/server` to use the extension.
 
 ```
 yarn add jotai-trpc @trpc/client @trpc/server

docs/integrations/urql.mdx → docs/extensions/urql.mdx

@@ -1,6 +1,6 @@
 ---
 title: URQL
-description: This doc describes URQL integration.
+description: This doc describes URQL extension.
 nav: 4.03
 keywords: urql
 ---
@@ -11,11 +11,11 @@ From the [Overview docs](https://formidable.com/open-source/urql/docs/):
 
 > urql is a highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow. It's built to be both easy to use for newcomers to GraphQL, and extensible, to grow to support dynamic single-app applications and highly customized GraphQL infrastructure. In short, urql prioritizes usability and adaptability.
 
-[jotai-urql](https://github.com/jotaijs/jotai-urql) is a Jotai integration library for URQL. It offers a cohesive interface that incorporates all of URQL's GraphQL features, allowing you to leverage these functionalities alongside your existing Jotai state.
+[jotai-urql](https://github.com/jotaijs/jotai-urql) is a Jotai extension library for URQL. It offers a cohesive interface that incorporates all of URQL's GraphQL features, allowing you to leverage these functionalities alongside your existing Jotai state.
 
 ### Install
 
-You have to install `jotai-urql`, `@urql/core` and `wonka` to use the integration.
+You have to install `jotai-urql`, `@urql/core` and `wonka` to use the extension.
 
 ```
 yarn add jotai-urql @urql/core wonka

docs/integrations/valtio.mdx → docs/extensions/valtio.mdx

@@ -1,7 +1,7 @@
 ---
 title: Valtio
-description: This doc describes Valtio integration.
-nav: 4.99
+description: This doc describes Valtio extension.
+nav: 4.98
 keywords: valtio,proxy
 published: false
 ---

docs/integrations/xstate.mdx → docs/extensions/xstate.mdx

@@ -1,6 +1,6 @@
 ---
 title: XState
-description: This doc describes XState integration.
+description: This doc describes XState extension.
 nav: 4.05
 keywords: xstate,machine,atomwithmachine
 ---

docs/integrations/zustand.mdx → docs/extensions/zustand.mdx

@@ -1,7 +1,7 @@
 ---
 title: Zustand
-description: This doc describes Zustand integration.
-nav: 4.99
+description: This doc describes Zustand extension.
+nav: 4.98
 keywords: zustand
 published: false
 ---

docs/guides/debugging.mdx

@@ -62,7 +62,7 @@ to inspect atoms, with many features like Time-travelling and value dispatching.
 
 ### [useAtomDevtools](https://jotai.org/docs/api/devtools#use-atom-devtools)
 
-> `useAtomDevtools` is a React hook that manages ReduxDevTools integration for a particular atom.
+> `useAtomDevtools` is a React hook that manages ReduxDevTools extension for a particular atom.
 
 If you have a specific atom in mind that you may want to debug, `useAtomDevtools` can be a good option.
 

docs/guides/initialize-atom-on-render.mdx

@@ -92,4 +92,4 @@ This behavior is due to our child components looking for the lowest commmon `Pro
 
 For more information on `Provider` behavior, please read the docs [here](../core/provider.mdx).
 
-For more complex use cases, check out [Scope integration](../integrations/scope.mdx).
+For more complex use cases, check out [Scope extension](../extensions/scope.mdx).

docs/introduction.mdx

@@ -9,7 +9,7 @@ Welcome to the Jotai v2 documentation! Jotai's atomic approach to global React s
 ## Features
 
 - Minimal core API (2kb)
-- Many utilities and integrations
+- Many utilities and extensions
 - TypeScript oriented
 - Works with Next.js, Gatsby, Remix, and React Native
 - React Fast Refresh with SWC and Babel plugins
@@ -26,11 +26,11 @@ Jotai also includes a `jotai/utils` bundle with a variety of extra utility funct
 
 <TOC section="utilities" />
 
-## Integrations
+## Extensions
 
-Jotai has separate bundles for many official integrations including `atomWithQuery` for React Query and `atomWithMachine` for XState, among many others.
+Jotai has separate bundles for many official extensions including `atomWithQuery` for React Query and `atomWithMachine` for XState, among many others.
 
-<TOC section="integrations" />
+<TOC section="extensions" />
 
 ## Tools
 

docs/recipes/custom-useatom-hooks.mdx

@@ -50,7 +50,7 @@ export function useSplitAtom(anAtom) {
 }
 ```
 
-### integrations
+### extensions
 
 #### useFocusAtom
 

docs/recipes/large-objects.mdx

@@ -42,7 +42,7 @@ const initialData = {
 
 ## focusAtom
 
-> `focusAtom` creates a new atom, based on the focus that you pass to it. [jotai-optics](../integrations/optics.mdx#focus-atom)
+> `focusAtom` creates a new atom, based on the focus that you pass to it. [jotai-optics](../extensions/optics.mdx#focus-atom)
 
 We use this utility to focus an atom and create an atom from a specific part of the data. For example we may need to consume the people property of the above data, Here's how we do it:
 

docs/tools/devtools.mdx

@@ -192,7 +192,7 @@ const App = () => (
 
 ## useAtomDevtools
 
-`useAtomDevtools` is a React hook that manages ReduxDevTools integration for a particular atom.
+`useAtomDevtools` is a React hook that manages ReduxDevTools extension for a particular atom.
 
 ```ts
 function useAtomDevtools<Value>(

readme.md

@@ -17,7 +17,7 @@ visit [jotai.org](https://jotai.org) or `npm i jotai`
 Jotai scales from a simple useState replacement to an enterprise TypeScript application.
 
 - Minimal core API (2kb)
-- Many utilities and integrations
+- Many utilities and extensions
 - No string keys (compared to Recoil)
 
 Examples: [Demo 1](https://codesandbox.io/s/jotai-demo-47wvh) |

website/gatsby-node.js

@@ -7,18 +7,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: false,
   });
 
-  createRedirect({
-    fromPath: `/docs/utils/*`,
-    toPath: `/docs/utilities/*`,
-    isPermanent: false,
-  });
-
-  createRedirect({
-    fromPath: `/docs/advanced-recipes/*`,
-    toPath: `/docs/recipes/*`,
-    isPermanent: false,
-  });
-
   createRedirect({
     fromPath: `/docs/api/babel`,
     toPath: `/docs/tools/babel`,
@@ -68,7 +56,7 @@ exports.createPages = ({ actions }) => {
 
   createRedirect({
     fromPath: `/docs/utils/atom-with-hash`,
-    toPath: `/docs/integrations/location`,
+    toPath: `/docs/extensions/location`,
     isPermanent: false,
   });
 
@@ -167,4 +155,88 @@ exports.createPages = ({ actions }) => {
     toPath: `/docs/core/use-atom`,
     isPermanent: false,
   });
+
+  createRedirect({
+    fromPath: `/docs/integrations/cache`,
+    toPath: `/docs/extensions/cache`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/effect`,
+    toPath: `/docs/extensions/effect`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/immer`,
+    toPath: `/docs/extensions/immer`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/location`,
+    toPath: `/docs/extensions/location`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/optics`,
+    toPath: `/docs/extensions/optics`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/query`,
+    toPath: `/docs/extensions/query`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/redux`,
+    toPath: `/docs/extensions/redux`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/relay`,
+    toPath: `/docs/extensions/relay`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/scope`,
+    toPath: `/docs/extensions/scope`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/trpc`,
+    toPath: `/docs/extensions/trpc`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/urql`,
+    toPath: `/docs/extensions/urql`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/valtio`,
+    toPath: `/docs/extensions/valtio`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/xstate`,
+    toPath: `/docs/extensions/xstate`,
+    isPermanent: false,
+  });
+
+  createRedirect({
+    fromPath: `/docs/integrations/zustand`,
+    toPath: `/docs/extensions/zustand`,
+    isPermanent: false,
+  });
 };

website/src/components/integrations-demo.js → website/src/components/extensions-demo.js

@@ -3,7 +3,7 @@ import { countAtom } from '../atoms/index.js';
 import { Button } from '../components/button.js';
 import { Code } from '../components/code.js';
 
-export const IntegrationsDemo = () => {
+export const ExtensionsDemo = () => {
   const [count, setCount] = useAtom(countAtom);
 
   const increment = () => setCount((c) => (c = c + 1));

website/src/pages/index.js

@@ -1,8 +1,8 @@
 import { Code } from '../components/code.js';
 import { CoreDemo } from '../components/core-demo.js';
+import { ExtensionsDemo } from '../components/extensions-demo.js';
 import { Headline } from '../components/headline.js';
 import { InlineCode } from '../components/inline-code.js';
-import { IntegrationsDemo } from '../components/integrations-demo.js';
 import { Intro } from '../components/intro.js';
 import { LogoCloud } from '../components/logo-cloud.js';
 import { Meta } from '../components/meta.js';
@@ -26,7 +26,7 @@ export default function HomePage() {
           <p>
             It scales from a simple <InlineCode>useState</InlineCode> replacement to an enterprise
             TypeScript application with complex requirements. Plus there are plenty of utilities and
-            integrations to help you along the way!
+            extensions to help you along the way!
           </p>
           <p>Jotai is trusted in production at innovative companies like these.</p>
           <LogoCloud />
@@ -88,22 +88,22 @@ const apiTabs = {
       <UtilitiesDemo />
     </section>
   ),
-  Integrations: (
+  Extensions: (
     <section>
       <p>
-        There are also separate packages for each official integration: tRPC, Immer, Query, XState,
+        There are also separate packages for each official extension: tRPC, Immer, Query, XState,
         URQL, Optics, Relay, location, molecules, cache, and more.
       </p>
       <p>
-        Some integrations provide new atom types with alternate write functions such as{' '}
+        Some extensions provide new atom types with alternate write functions such as{' '}
         <InlineCode>atomWithImmer</InlineCode> (Immer) or <InlineCode>atomWithMachine</InlineCode>{' '}
         (XState).
       </p>
       <p>
         Others provide new atom types with two-way data binding such as{' '}
         <InlineCode>atomWithLocation</InlineCode> or <InlineCode>atomWithHash</InlineCode>.
       </p>
-      <IntegrationsDemo />
+      <ExtensionsDemo />
     </section>
   ),
 };