First version with complete setup and first hook

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+max_line_length = 100
+quote_type = single
+trim_trailing_whitespace = true
+
+[*.{md,markdown}]
+trim_trailing_whitespace = false

.github/workflows/bump-version-and-publish.yml

@@ -0,0 +1,58 @@
+# NOTE: taken from https://github.com/MylesBorins/node-osc/blob/main/.github/workflows/bump-version.yml
+
+name: Bump version, Tag & Publish
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Semver type of new version'
+        required: true
+        type: choice
+        options:
+          - major
+          - minor
+          - patch
+          - prerelease
+      prereleaseid:
+        description: 'Prerelease id (rc)'
+        required: false
+        default: ''
+
+jobs:
+  bump-version:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out source
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install npm packages
+        run: npm ci
+
+      - name: Setup Git
+        run: |
+          git config user.name github-actions
+          git config user.email [email protected]
+
+      - name: Bump Version
+        run: |
+          npm version ${{ github.event.inputs.version }} --no-git-tag-version --preid ${{ github.event.inputs.prereleaseid }}
+          git add .
+          git commit -m "v$(npm pkg get version | tr -d '"')"
+          git tag $(npm pkg get version | tr -d '"') -m "v$(npm pkg get version | tr -d '"')"
+
+      - name: Publish to NPM
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          access: "access"
+
+      - name: Push latest version
+        run: git push origin main --follow-tags

.github/workflows/update-docs.yml

@@ -0,0 +1,35 @@
+name: Update Docs
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  update-docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out source
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+          cache: 'npm'
+
+      - name: Install npm packages
+        run: npm ci
+
+      - name: Build Storybook Docs
+        run: npm run storybook:build
+
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v2
+        with:
+          target_branch: gh-pages
+          build_dir: .docs/dist
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# cypress
+/cypress/screenshots
+/cypress/videos
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.idea
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.eslintcache
+
+# npm publish artifects
+/dist
+
+# storybook dist folder
+.docs/dist

.node-version

@@ -0,0 +1 @@
+18

.nvmrc

@@ -0,0 +1 @@
+18

.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+  framework: {
+    name: '@storybook/react-vite',
+    // options: { fastRefresh: true },
+  },
+  stories: [
+    '../src/**/*.docs.mdx',
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-docs',
+    //   '@storybook/addon-links',
+    //   '@storybook/addon-essentials'
+  ],
+  staticDirs: ['../public'],
+};

.storybook/manager.js

@@ -0,0 +1,8 @@
+// import { addons } from '@storybook/addons';
+// import { themes } from '@storybook/theming';
+//
+// const hasDarkModeEnabled = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+//
+// addons.setConfig({
+//   theme: hasDarkModeEnabled ? themes.dark : themes.light,
+// });

.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<link href="./bootstrap.min.css" rel="stylesheet">
+<style>
+  @media (prefers-color-scheme: dark) {
+  html {
+    /* Don't let the user theme affect the "canvas", only the Storybook UI
+    background: white;*/
+      color: white;
+    }
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,10 @@
+import { themes } from '@storybook/theming';
+
+const hasDarkModeEnabled = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  docs: {
+    theme: hasDarkModeEnabled ? themes.dark : themes.light,
+  },
+}

CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]

README.md

@@ -0,0 +1,120 @@
+# @mediamonks/react-hooks
+
+Commonly used hooks for Muban using the Vue Composition API.
+
+## Getting started
+
+### Installing
+
+Add `@mediamonks/react-hooks` to your project:
+```sh
+npm i @mediamonks/react-hooks
+```
+
+### Example
+
+Use a hook inside a component:
+
+```tsx
+import { useToggle } from '@mediamonks/react-hooks';
+
+function DemoComponent() {
+  const [state, toggle] = useToggle(false);
+
+  return (
+    <div>
+      <div>{state} </div>
+      <button onClick={() => toggle()}>Toggle</button>
+    </div>
+  );
+}
+```
+
+## Docs
+
+[https://mediamonks.github.io/react-hooks/](https://mediamonks.github.io/react-hooks/)
+
+## Development
+
+The information below should help you develop new hooks in this library.
+
+Run `npm run test -- --watch` to run all unit tests in watch mode.
+
+Run `npm run storybook` to preview your stories and documentation.
+
+### Folder Structure
+
+`useHookName`
+* `useHookName.ts` – The Hook itself
+* `useHookName.stories.tsx` – To showcase the hook with a working UI, also used for dom testing
+* `useHookName.stories.mdx` – Documentation about the hook
+* `useHookName.test.tsx` – Unit tests for the hook
+
+### Steps for adding a new Hook:
+
+Run the `plop` script and enter your hook name starting with `use`.
+```shell
+npm run plop
+```
+
+Which will execute the following steps, where you need to fill in the content.
+
+* Create a new folder and a new `ts` file with the hook
+  * Use the `use` prefix for the name of the hook
+  * Use named exports to export the hook
+  * Enter JSDoc for description and parameters
+* Re-export the hook in the `index.ts`
+* Add a markdown file documenting the hook
+  * General description
+  * Reference for types, parameters, return type
+  * Simple and extended use cases
+* Add a story file to test out the hook
+  * Add an instructions banner at the top of the story
+  * Create a type for the StoryArgs that match the template, so it can be used when rendering
+    the Story inside tests.
+* Add unit tests for the hook
+
+
+## Writing Unit test
+
+Hooks can be tested using the `renderHook` function that now exists in `@testing-library/react`.
+
+At the time of writing, this method is undocumented. It can be used as follows:
+
+```ts
+import { renderHook } from '@testing-library/react';
+
+// init the hook
+const { result, rerender, unmount } = renderHook(useToggle, {
+  // values passed to your hook
+  initialProps: { foo: 'bar' },
+});
+
+// inspect the response of the hook
+console.log(result.current);
+```
+
+### Run Component Lifecycle
+
+To interact with your hook, you must use the `act` function.
+
+```ts
+import { act, renderHook } from '@testing-library/react';
+
+// init the hook
+const { result, rerender, unmount } = renderHook(useToggle, {
+  // values passed to your hook
+  initialProps: { foo: 'bar' },
+});
+
+// inspect the response of the hook
+console.log(result.current);
+
+await act(() => {
+  // interact with your hook
+  result.current[1]();
+});
+
+// inspect the updated value of the hook
+console.log(result.current);
+```

deploy-docs.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env sh
+
+# abort on errors
+set -e
+
+# build
+npm run storybook:build
+
+# navigate into the build output directory
+cd .docs/dist
+
+# if you are deploying to a custom domain
+# echo 'www.example.com' > CNAME
+
+git init -b main
+git config user.name github-actions
+git config user.email [email protected]
+git add -A
+git commit -m 'deploy'
+
+# if you are deploying to https://<USERNAME>.github.io/<REPO>
+git push -f [email protected]:mediamonks/react-hooks.git main:gh-pages
+
+cd -

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  // preset: 'ts-jest',
+  preset: 'ts-jest/presets/js-with-ts-esm',
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!lodash-es)'],
+  // setupFilesAfterEnv: ['<rootDir>/test-utils/setupTests.ts'],
+
+  // added "(?<!types.)" as a negative lookbehind to the default pattern
+  // to exclude .types.test.ts patterns from being picked up by jest
+  testRegex: '(/__tests__/.*|(\\.|/)(?<!types.)(test|spec))\\.[jt]sx?$',
+};