docs: add documentation website

- setup docusaurus
- integrate deployment into CI
- use typedoc for API generation
- update logo
- fix husky
- add Illustrator original to repo

.github/workflows/deploy-docs.yml

@@ -0,0 +1,61 @@
+name: Deploy to GitHub Pages
+
+defaults:
+  run:
+    working-directory: ./docs
+
+on:
+  push:
+    branches:
+      - main
+    # Review gh actions docs if you want to further define triggers, paths, etc
+    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
+
+jobs:
+  build:
+    name: Build Docusaurus
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9          
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: pnpm
+
+      - name: Install dependencies for toolkit
+        run: cd .. && pnpm install --frozen-lockfile          
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build website
+        run: pnpm build
+
+      - name: Upload Build Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/build
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.husky/commit-msg

@@ -1,4 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
-npx --no -- commitlint --edit ${1}
+pnpm --no -- commitlint --edit ${1}

.lintstagedrc

@@ -1,3 +1,3 @@
 {
-   "*.{js,ts,json,html,scss}": ["prettier --write"]
+   "*.{js,ts,json,html,scss,md}": ["prettier --write"]
 }

README.md

@@ -2,9 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/%40angular-architects%2Fngrx-toolkit.svg)](https://www.npmjs.com/package/%40angular-architects%2Fngrx-toolkit)
 
-<p align="center">
-<img src="https://raw.githubusercontent.com/angular-architects/ngrx-toolkit/main/logo.png" width="320" style="text-align: center">
-</p>
+<img src="https://raw.githubusercontent.com/angular-architects/ngrx-toolkit/main/logo.png" width="320" style="text-align: center" />
 
 NgRx Toolkit is an extension to the NgRx Signals Store. **It is still in beta** but already offers features, like:
 

docs/.gitignore

@@ -0,0 +1,21 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/docs/api/

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> 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.

docs/docs/create-redux-state.md

@@ -0,0 +1,133 @@
+
+The Redux Connector it is not an extension but turns any `signalStore()` into a Global State Management Slice following the Redux pattern.
+
+It is available as secondary entry point, i.e. `import { createReduxState } from '@angular-architects/ngrx-toolkit/redux-connector'` and has a dependency to `@ngrx/store`.
+
+An extension without dependency to `@ngrx/store` is available with [`withRedux()`](./with-redux).
+
+It supports:
+
+✅ Well-known NgRx Store Actions
+✅ Global Action `dispatch()`
+✅ Angular Lazy Loading
+✅ Auto-generated `provideNamedStore()` & `injectNamedStore()` Functions
+✅ Global Action to Store Method Mappers
+
+### Use a present Signal Store
+
+```typescript
+export const FlightStore = signalStore(
+  // State
+  withEntities({ entity: type<Flight>(), collection: 'flight' }),
+  withEntities({ entity: type<number>(), collection: 'hide' }),
+  // Selectors
+  withComputed(({ flightEntities, hideEntities }) => ({
+    filteredFlights: computed(() => flightEntities()
+      .filter(flight => !hideEntities().includes(flight.id))),
+    flightCount: computed(() => flightEntities().length),
+  })),
+  // Updater
+  withMethods(store => ({
+    setFlights: (state: { flights: Flight[] }) => patchState(store,
+      setAllEntities(state.flights, { collection: 'flight' })),
+    updateFlight: (state: { flight: Flight }) => patchState(store,
+      updateEntity({ id: state.flight.id, changes: state.flight }, { collection: 'flight' })),
+    clearFlights: () => patchState(store,
+      removeAllEntities({ collection: 'flight' })),
+  })),
+  // Effects
+  withMethods((store, flightService = inject(FlightService)) => ({
+    loadFlights: reduxMethod<FlightFilter, { flights: Flight[] }>(pipe(
+      switchMap(filter => from(
+        flightService.load({ from: filter.from, to: filter.to })
+      )),
+      map(flights => ({ flights })),
+    ), store.setFlights),
+  })),
+);
+```
+
+### Use well-known NgRx Store Actions
+
+```typescript
+export const ticketActions = createActionGroup({
+  source: 'tickets',
+  events: {
+    'flights load': props<FlightFilter>(),
+    'flights loaded': props<{ flights: Flight[] }>(),
+    'flights loaded by passenger': props<{ flights: Flight[] }>(),
+    'flight update': props<{ flight: Flight }>(),
+    'flights clear': emptyProps()
+  }
+});
+```
+
+### Map Actions to Methods
+
+```typescript
+export const { provideFlightStore, injectFlightStore } =
+  createReduxState('flight', FlightStore, store => withActionMappers(
+      mapAction(
+        // Filtered Action
+        ticketActions.flightsLoad,
+        // Side-Effect
+        store.loadFlights,
+        // Result Action
+        ticketActions.flightsLoaded),
+      mapAction(
+        // Filtered Actions
+        ticketActions.flightsLoaded, ticketActions.flightsLoadedByPassenger,
+        // State Updater Method (like Reducers)
+        store.setFlights
+      ),
+      mapAction(ticketActions.flightUpdate, store.updateFlight),
+      mapAction(ticketActions.flightsClear, store.clearFlights),
+    )
+  );
+```
+
+### Register an Angular Dependency Injection Provider
+
+```typescript
+export const appRoutes: Route[] = [
+  {
+    path: 'flight-search-redux-connector',
+    providers: [provideFlightStore()],
+    component: FlightSearchReducConnectorComponent
+  },
+];
+```
+
+### Use the Store in your Component
+
+```typescript
+@Component({
+  standalone: true,
+  imports: [
+    JsonPipe,
+    RouterLink,
+    FormsModule,
+    FlightCardComponent
+  ],
+  selector: 'demo-flight-search-redux-connector',
+  templateUrl: './flight-search.component.html',
+})
+export class FlightSearchReducConnectorComponent {
+  private store = injectFlightStore();
+
+  protected flights = this.store.flightEntities;
+
+  protected search() {
+    this.store.dispatch(
+      ticketActions.flightsLoad({
+        from: this.localState.filter.from(),
+        to: this.localState.filter.to()
+      })
+    );
+  }
+
+  protected reset(): void {
+    this.store.dispatch(ticketActions.flightsClear());
+  }
+}
+```

docs/docs/extensions.md

@@ -0,0 +1,17 @@
+---
+title: Extensions
+---
+
+The NgRx Toolkit is a set of extensions to the NgRx SignalsStore.
+
+It offers extensions like:
+
+- [⭐️ Devtools](./with-devtools): Integration into Redux Devtools
+- [Redux](./with-redux): Possibility to use the Redux Pattern (Reducer, Actions, Effects)
+- [Storage Sync](./with-storage-sync): Synchronize the Store with Web Storage
+
+To install it, run
+
+```shell
+npm i @angular-architects/ngrx-toolkit
+```