feat(react-router): Add react router package & update discord link at…

… documents (#110)

* feat(react-router): Add react-router package

* fix version

* Update changeset

* fix

.changeset/witty-months-run.md

@@ -0,0 +1,10 @@
+---
+'@use-funnel/react-navigation-native': patch
+'@use-funnel/react-router-dom': patch
+'@use-funnel/react-router': patch
+'@use-funnel/browser': patch
+'@use-funnel/core': patch
+'@use-funnel/next': patch
+---
+
+Add React-router package & Update README.md

.github/ISSUE_TEMPLATE/bug.yml

@@ -12,6 +12,7 @@ body:
       options:
         - '@use-funnel/core'
         - '@use-funnel/react-router-dom'
+        - '@use-funnel/react-router'
         - '@use-funnel/next'
         - '@use-funnel/react-navigation-native'
         - '@use-funnel/browser'

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -12,6 +12,7 @@ body:
       options:
         - '@use-funnel/core'
         - '@use-funnel/react-router-dom'
+        - '@use-funnel/react-router'
         - '@use-funnel/next'
         - '@use-funnel/react-navigation-native'
         - '@use-funnel/browser'

README.md

@@ -8,6 +8,8 @@
   <p style="font-size:18px;">A powerful and safe step-by-step state management library</p>
 </div>
 
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/use-funnel/blob/main/LICENSE) [![Discord Badge](https://discord.com/api/guilds/1281071127052943361/widget.png?style=shield)](https://discord.gg/vGXbVjP2nY)
+
 `@use-funnel` is a [React Hook](https://react.dev/reference/rules/rules-of-hooks) that helps you easily implement complex UI flows.
 
 ## Core Concepts
@@ -22,16 +24,14 @@ Manage states based on history, making it easy to handle backward and forward na
 
 ### Various Router Support
 
-Supports browser history, react-router-dom, next.js, @react-navigation/native, and more.
+Supports browser history, react-router, next.js, @react-navigation/native, and more.
 
 ## Example
 
-
 https://github.com/user-attachments/assets/8300d4ed-ab02-436e-a5a6-99c8d732e32f
 
-
 ```tsx
-import { useFunnel } from '@use-funnel/react-router-dom';
+import { useFunnel } from '@use-funnel/browser';
 
 export function App() {
   const funnel = useFunnel<{
@@ -47,7 +47,7 @@ export function App() {
       context: {},
     },
   });
-  
+
   return (
     <funnel.Render
       SelectJob={funnel.Render.with({
@@ -65,13 +65,13 @@ export function App() {
         },
       })}
       SelectSchool={({ history }) => (
-        <SelectSchool 
-          onNext={(school) => 
-            history.push('EnterJoinDate', (prev) => ({ 
-              ...prev, 
-              school 
+        <SelectSchool
+          onNext={(school) =>
+            history.push('EnterJoinDate', (prev) => ({
+              ...prev,
+              school,
             }))
-          } 
+          }
         />
       )}
       SelectEmployee={({ history }) => (

docs/src/components/HomePage.tsx

@@ -17,10 +17,10 @@ export const HomePage = ({
       <div className="flex flex-col md:h-full md:mr-8">
         <div className="flex flex-col flex-1 md:mb-0 mb-12">
           <Image src="/logo.png" alt="@use-funnel logo" width={140} height={140} />
-          <div className="flex flex-col gap-4 mb-12">
-            <h1 className="relative text-6xl font-bold">{title}</h1>
-            <h2 className="text-2xl leading-normal break-words">{description}</h2>
-          </div>
+          <h1 className="flex flex-col gap-4 mb-12">
+            <strong className="relative text-6xl font-bold">{title}</strong>
+            <p className="text-2xl leading-normal break-words">{description}</p>
+          </h1>
           <div>
             <Link href="/docs/overview">
               <span className="inline-block rounded-xl nx-bg-gray-100 dark:nx-bg-neutral-800 px-10 py-3 text-xl font-bold hover:bg-gray-200">

docs/src/components/UseFunnelCodeBlock.tsx

@@ -10,6 +10,10 @@ export const useFunnelPackages = [
     packageName: 'next',
     packageTitle: 'Next.js page router',
   },
+  {
+    packageName: 'react-router',
+    packageTitle: 'react-router',
+  },
   {
     packageName: 'react-router-dom',
     packageTitle: 'react-router-dom',

docs/src/pages/docs/install.en.mdx

@@ -2,9 +2,10 @@
 
 `@use-funnel` is compatible with various routers. including:
 
-- [react-router-dom](https://reactrouter.com/web/guides/quick-start)
+- [react-router](https://reactrouter.com/home)
+  - For the [react-router-dom](https://reactrouter.com/upgrading/v6), use `@use-funnel/react-router-dom` package.
 - [next.js page router](https://nextjs.org/docs/pages)
-  - For the [next.js app router](https://nextjs.org/docs/app/building-your-application), use [browser history](https://developer.mozilla.org/en-US/docs/Web/API/History).
+  - For the [next.js app router](https://nextjs.org/docs/app/building-your-application), use `@use-funnel/browser` package with `ssr: false` option.
 - [@react-navigation/native](https://reactnavigation.org/docs/getting-started)
 - [browser history](https://developer.mozilla.org/en-US/docs/Web/API/History)
 
@@ -18,10 +19,10 @@
 Select the router you want to use and install the corresponding package with the following command:
 
 ```shell npm2yarn
-npm install @use-funnel/react-router-dom --save
+npm install @use-funnel/react-router --save
 npm install @use-funnel/next --save
 npm install @use-funnel/react-navigation-native --save
 npm install @use-funnel/browser --save
 ```
 
-If the router you need isn't listed or if you prefer to manage history directly, refer to [Creating a Custom Router](/docs/custom-router).
+If the router you need isn't listed or if you prefer to manage history directly, refer to [Creating a Custom Router](/docs/custom-router).

docs/src/pages/docs/install.ko.mdx

@@ -2,9 +2,10 @@
 
 `@use-funnel`은 다양한 라우터와 호환됩니다. 다음 라우터를 지원하고 있어요.
 
-- [react-router-dom](https://reactrouter.com)
+- [react-router](https://reactrouter.com/home)
+  - [react-router-dom](https://reactrouter.com/upgrading/v6)의 경우 `@use-funnel/react-router-dom` 패키지를 사용해주세요.
 - [next.js page router](https://nextjs.org/docs/pages)
-  - [next.js app router](https://nextjs.org/docs/app/building-your-application) 는 [browser history](https://developer.mozilla.org/en-US/docs/Web/API/History)를 사용해주세요.
+  - [next.js app router](https://nextjs.org/docs/app/building-your-application) 는 `@use-funnel/browser` 패키지를 `ssr: false` 옵션과 함께 사용해주세요.
 - [@react-navigation/native](https://reactnavigation.org/)
 - [browser history](https://developer.mozilla.org/en-US/docs/Web/API/History)
 

docs/src/pages/docs/migration.en.mdx

@@ -8,7 +8,7 @@ This document explains how to migrate code from [@toss/use-funnel](https://www.s
 
 - Fixed issues where state did not follow history ([related document](https://use-funnel.slash.page/ko/docs/features#%EC%89%AC%EC%9A%B4-%ED%9E%88%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC))
 - Allows defining state for each step
-- Supports not only Next.js but also `react-router-dom` and `@react-navigation/native`
+- Supports not only Next.js but also `react-router` and `@react-navigation/native`
 
 ## Installation
 
@@ -30,14 +30,16 @@ import { useFunnel } from '@toss/use-funnel';
 
 const FUNNEL_STEPS = ['A', 'B', 'C'] as const;
 const [Funnel, setFunnel] = useFunnel(FUNNEL_STEPS);
+
 ```
+
 ```tsx showLineNumbers {3-5,8}
 import { createFunnelSteps } from '@use-funnel/next';
 
 const steps = createFunnelSteps()
   .extends(['A', 'B', 'C'])
   .build();
-  
+
 const funnel = useFunnel({
   steps,
   initial: {
@@ -46,6 +48,7 @@ const funnel = useFunnel({
   }
 });
 ```
+
 </CodeCompare>
 
 ### Migrating `<Funnel />`, `<Funnel.Step />` Components
@@ -57,7 +60,7 @@ In `@use-funnel`, you no longer need separate components to infer state types fo
 import { useFunnel } from '@toss/use-funnel';
 
 const [Funnel, setFunnel] = useFunnel([
-  'A', 'B'
+'A', 'B'
 ] as const);
 
 return (
@@ -71,8 +74,9 @@ return (
   </Funnel>
 )
 ```
+
 ```tsx
-import { useFunnel } from '@use-funnel/next';
+import {useFunnel} from '@use-funnel/next';
 
 const steps = createFunnelSteps().extends(['A', 'B']).build();
 const funnel = useFunnel({
@@ -89,7 +93,9 @@ switch (funnel.step) {
   case 'B':
     return <div>B</div>;
 }
+
 ```
+
 </CodeCompare>
 
 Alternatively, you can use `<funnel.Render />` for a more declarative approach. See the [funnel.Render component](/docs/funnel-render) for more details.
@@ -111,26 +117,30 @@ const [Funnel, state, setState] = useFunnel([
   foo: 'Hello',
   bar: 5
 });
+
 ```
+
 ```tsx showLineNumbers {3-6,12-15}
 import { useFunnel, createFunnelSteps } from '@use-funnel/next';
 
 const steps = createFunnelSteps<{
   foo?: string;
   bar?: number;
-}>().extends(['A', 'B', 'C']).build();
+}>()
+  .extends(['A', 'B', 'C'])
+  .build();
 
 const funnel = useFunnel({
   steps,
   initial: {
     step: 'A',
     context: {
       foo: 'Hello',
-      bar: 5
-    }
-  }
+      bar: 5,
+    },
+  },
 });
 ```
-</CodeCompare>
 
+</CodeCompare>
 

docs/src/pages/docs/migration.ko.mdx

@@ -8,7 +8,7 @@ import { CodeCompare } from '@/components';
 
 - 상태가 히스토리를 따라가지 않는 이슈를 수정했어요([관련 문서](https://use-funnel.slash.page/ko/docs/features#%EC%89%AC%EC%9A%B4-%ED%9E%88%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC))
 - 단계별로 상태를 만들 수 있게 되었어요.
-- Next.js 외에 `react-router-dom`, `@react-navigation/native` 를 지원해요.
+- Next.js 외에 `react-router`, `@react-navigation/native` 를 지원해요.
 
 ## 설치하기
 
@@ -30,14 +30,16 @@ import { useFunnel } from '@toss/use-funnel';
 
 const FUNNEL_STEPS = ['A', 'B', 'C'] as const;
 const [Funnel, setFunnel] = useFunnel(FUNNEL_STEPS);
+
 ```
+
 ```tsx showLineNumbers {3-5,8}
 import { createFunnelSteps } from '@use-funnel/next';
 
 const steps = createFunnelSteps()
   .extends(['A', 'B', 'C'])
   .build();
-  
+
 const funnel = useFunnel({
   steps,
   initial: {
@@ -46,6 +48,7 @@ const funnel = useFunnel({
   }
 });
 ```
+
 </CodeCompare>
 
 ### `<Funnel />`, `<Funnel.Step />` 컴포넌트 마이그레이션
@@ -71,8 +74,9 @@ return (
   </Funnel>
 )
 ```
+
 ```tsx
-import { useFunnel } from '@use-funnel/next';
+import {useFunnel} from '@use-funnel/next';
 
 const steps = createFunnelSteps().extends(['A', 'B']).build();
 const funnel = useFunnel({
@@ -89,13 +93,14 @@ switch (funnel.step) {
   case 'B':
     return <div>B</div>;
 }
+
 ```
 </CodeCompare>
 
 또는 `<funnel.Render />` 컴포넌트를 통해 더욱 더 선언적으로 구현할 수 있습니다. 자세한 내용은 [funnel.Render 컴포넌트](/docs/funnel-render) 문서를 참고해주세요.
 
 ### `withState()` 마이그레이션
-  
+
 `@toss/use-funnel` 의 `withState()` 를 통해 상태를 구현하고 있었다면 `createFunnelSteps()` 에 제네릭을 넘겨서 이를 구현할 수 있습니다.
 
 <CodeCompare>
@@ -112,25 +117,29 @@ const [Funnel, state, setState] = useFunnel([
   bar: 5
 });
 ```
+
 ```tsx showLineNumbers {3-6,12-15}
 import { useFunnel, createFunnelSteps } from '@use-funnel/next';
 
 const steps = createFunnelSteps<{
   foo?: string;
   bar?: number;
-}>().extends(['A', 'B', 'C']).build();
+}>()
+  .extends(['A', 'B', 'C'])
+  .build();
 
 const funnel = useFunnel({
   steps,
   initial: {
     step: 'A',
     context: {
       foo: 'Hello',
-      bar: 5
-    }
-  }
+      bar: 5,
+    },
+  },
 });
 ```
+
 </CodeCompare>
 
 ### stepQueryKey 진입 마이그레이션
@@ -152,6 +161,7 @@ const [Funnel, setFunnel] = useFunnel([
 });
 
 ```
+
 ```tsx showLineNumbers {8,15}
 import { useRouter } from 'next/router';
 import { useFunnel, createFunnelSteps } from '@use-funnel/next';
@@ -172,6 +182,7 @@ const funnel = useFunnel({
   }
 });
 ```
+
 </CodeCompare>
 
 ### onStepChange 마이그레이션
@@ -189,6 +200,7 @@ const [Funnel, setFunnel] = useFunnel([
     console.log(`CURRENT STEP: ${step}`);
   }
 });
+
 ```
 
 ```tsx showLineNumbers {16-18}
@@ -198,7 +210,7 @@ import { useFunnel, createFunnelSteps } from '@use-funnel/next';
 const steps = createFunnelSteps()
   .extends(['A', 'B', 'C'])
   .build();
-	
+
 const funnel = useFunnel({
   steps,
   initial: {
@@ -211,4 +223,5 @@ useEffect(() => {
   console.log(`CURRENT STEP: ${funnel.step}`);
 }, [funnel.step]);
 ```
+
 </CodeCompare>