add package's docs

README.md

@@ -2,14 +2,7 @@
 
 A lightweight state management library that saves and restores state based on history.
 
-## Features
+## Packages
 
-TBW
-
-## Installation
-
-TBW
-
-## Usage
-
-TBW
+- [@location-state/core](./packages/location-state-core/README.md)
+- [@location-state/next](./packages/location-state-next/README.md)

packages/location-state-core/README.md

@@ -0,0 +1,124 @@
+# @location-state/core
+
+`@location-state/core` provides the features to save and restore state based on a specified `syncer`.
+
+## Installation
+
+```bash
+npm install @location-state/core
+# or
+yarn add @location-state/core
+# or
+pnpm add @location-state/core
+```
+
+## Usage
+
+Specify the syncer props in Provider that based on the navigation API.
+
+```tsx
+import { LocationStateProvider, NavigationSyncer } from "@location-state/core";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <LocationStateProvider syncer={new NavigationSyncer(window.navigation)}>
+      {children}
+    </LocationStateProvider>
+  );
+}
+```
+
+> [!WARNING]
+> Please note that the navigation API is not yet supported by some browsers as of 2023.
+> If you want, you can use `import { unsafeNavigation } from "@location-state/core/unsafe-navigation";` at your own risk.
+> However, this is not a perfect complement to the Navigation API.
+
+If you are using Next.js pages router, use [@location-state/next](../location-state-next/README.md).
+
+### Session storage persistence
+
+You can store history-based information in session storage by specifying `store: 'session'`, name, and default value in hooks.
+
+```tsx
+import { useLocationState, StoreName } from "@location-state/core";
+
+export function Counter({ storeName }: { storeName: StoreName }) {
+  const [counter, setCounter] = useLocationState({
+    name: "counter",
+    defaultValue: 0,
+    storeName: "session",
+  });
+
+  return <>...</>;
+}
+```
+
+### URL persistence
+
+You can store history-based information in session storage by specifying `store: 'url'`, name, and default value in hooks.
+
+```tsx
+import { useLocationState, StoreName } from "@location-state/core";
+
+export function Counter({ storeName }: { storeName: StoreName }) {
+  const [counter, setCounter] = useLocationState({
+    name: "counter",
+    defaultValue: 0,
+    storeName: "url",
+  });
+
+  return <>...</>;
+}
+```
+
+## API
+
+### <LocationStateProvider>
+
+Provider to store the state based on the history. synchronization implementation with the history can be specified in the [syncer](#syncer).
+
+```ts
+function LocationStateProvider(props: {
+  syncer?: Syncer;
+  children: ReactNode;
+}): ReactNode;
+```
+
+### Syncer
+
+Synchronization interface with history.
+
+```ts
+type Syncer = {
+  key(): string | undefined;
+  sync(arg: { listener: (key: string) => void; signal: AbortSignal }): void;
+  updateURL(url: string): void;
+};
+```
+
+#### NavigationSyncer
+
+Syncer to synchronize with history using NavigationAPI.
+
+```ts
+class NavigationSyncer implements Syncer {
+  constructor(navigation: Navigation);
+  key(): string | undefined;
+  sync(arg: { listener: (key: string) => void; signal: AbortSignal }): void;
+  updateURL(url: string): void;
+}
+```
+
+### useLocationState
+
+State hooks to synchronize with history through Syncer.
+
+```ts
+type StoreName = "session" | "url";
+
+const useLocationState = <T>(props: {
+  name: string;
+  defaultValue: T;
+  storeName: StoreName | string;
+}): [T, (value: T) => void];
+```

packages/location-state-core/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@location-state/core",
   "version": "0.0.0-alpha",
+  "license": "MIT",
+  "description": "`@location-state/core` provides the features to save and restore state based on a specified `syncer`.",
   "files": [
     "dist",
     "types",
-    "src",
     "package.json"
   ],
   "exports": {

packages/location-state-next/README.md

@@ -0,0 +1,59 @@
+# @location-state/next
+
+`@location-state/next` provides a syncer that synchronizes with the pages router in next.js.
+
+## Installation
+
+```bash
+npm install @location-state/core @location-state/next
+# or
+yarn add @location-state/core @location-state/next
+# or
+pnpm add @location-state/core @location-state/next
+```
+
+## Usage
+
+Specify provider's syncer that can be obtained with `useNextPagesSyncer()`.
+
+```tsx
+// _app.tsx
+import { LocationStateProvider } from "@location-state/core";
+import { useNextPagesSyncer } from "@location-state/next";
+import type { AppProps } from "next/app";
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  const syncer = useNextPagesSyncer();
+  return (
+    <LocationStateProvider syncer={syncer}>
+      <Component {...pageProps} />
+    </LocationStateProvider>
+  );
+}
+```
+
+Same as normal usage.Read [@location-state/core](../location-state-core/README.md).
+
+```tsx
+import { useLocationState, StoreName } from "@location-state/core";
+
+export function Counter({ storeName }: { storeName: StoreName }) {
+  const [counter, setCounter] = useLocationState({
+    name: "counter",
+    defaultValue: 0,
+    storeName: "session",
+  });
+
+  return <>...</>;
+}
+```
+
+## API
+
+### useNextPagesSyncer
+
+Can get Syncer to sync with Next.js pages router.
+
+```tsx
+function useNextPagesSyncer(): NextPagesSyncer;
+```

packages/location-state-next/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@location-state/next",
   "version": "0.0.0-alpha",
+  "license": "MIT",
+  "description": "`@location-state/next` provides a syncer that synchronizes with the pages router in next.js.",
   "files": [
     "dist",
     "types",
-    "src",
     "package.json"
   ],
   "exports": {