Merge pull request #258 from mediamonks/#257-rename-package-to-mediam…

…onksreact-kit

#257 Rename package to @mediamonks/react-kit

.github/workflows/update-docs.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Create artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: .docs/react-hooks/
+          path: .docs/react-kit/
 
   deploy:
     needs: build

README.md

@@ -1,26 +1,26 @@
-[![npm version](https://img.shields.io/npm/v/@mediamonks/react-hooks)](https://www.npmjs.com/package/@mediamonks/react-hooks)
-[![npm downloads](https://img.shields.io/npm/dm/@mediamonks/react-hooks)](https://www.npmjs.com/package/@mediamonks/react-hooks)
+[![npm version](https://img.shields.io/npm/v/@mediamonks/react-kit)](https://www.npmjs.com/package/@mediamonks/react-kit)
+[![npm downloads](https://img.shields.io/npm/dm/@mediamonks/react-kit)](https://www.npmjs.com/package/@mediamonks/react-kit)
 
-# @mediamonks/react-hooks
+# @mediamonks/react-kit
 
 Collection of commonly used React hooks.
 
 ## Getting started
 
 ### Installing
 
-Add `@mediamonks/react-hooks` to your project:
+Add `@mediamonks/react-kit` to your project:
 
 ```sh
-npm i @mediamonks/react-hooks
+npm i @mediamonks/react-kit
 ```
 
 ### Example
 
 Use a hook inside a component:
 
 ```tsx
-import { useToggle } from '@mediamonks/react-hooks';
+import { useToggle } from '@mediamonks/react-kit';
 
 function DemoComponent() {
   const [state, toggle] = useToggle(false);
@@ -36,7 +36,7 @@ function DemoComponent() {
 
 ## Docs
 
-[https://mediamonks.github.io/react-hooks/](https://mediamonks.github.io/react-hooks/)
+[https://mediamonks.github.io/react-kit/](https://mediamonks.github.io/react-kit/)
 
 ## Development
 

deploy-docs.sh

@@ -19,6 +19,6 @@ 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
+git push -f [email protected]:mediamonks/react-kit.git main:gh-pages
 
 cd -

package.json

@@ -1,12 +1,14 @@
 {
-  "name": "@mediamonks/react-hooks",
+  "name": "@mediamonks/react-kit",
   "version": "1.4.0",
-  "description": "A collection of React hooks we use at Media.Monks",
+  "description": "A collection of React hooks, components, utilities that we use at Media.Monks",
   "keywords": [
     "react",
+    "components",
+    "typescript",
     "hooks"
   ],
-  "repository": "[email protected]:mediamonks/react-hooks.git",
+  "repository": "[email protected]:mediamonks/react-kit.git",
   "author": "frontend.monks",
   "license": "MIT",
   "types": "./dist/index.d.ts",
@@ -35,7 +37,7 @@
     "test": "vitest ./src/",
     "check-types": "tsc --project tsconfig.json --noEmit --noUnusedLocals",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build -o ./.docs/react-hooks",
+    "storybook:build": "storybook build -o ./.docs/react-kit",
     "storybook:deploy": "./deploy-docs.sh",
     "prepublishOnly": "npm run build",
     "plop": "plop",

src/hooks/useMediaQuery/useMediaQuery.ts

@@ -9,9 +9,9 @@ import { useEventListener } from '../useEventListener/useEventListener.js';
  * describe media queries in your project.
  *
  * @example
- * import '@mediamonks/react-hooks';
+ * import '@mediamonks/react-kit';
  *
- * declare module '@mediamonks/react-hooks' {
+ * declare module '@mediamonks/react-kit' {
  *   interface MediaQueryVariables {
  *     '--media-query-name': never;
  *   }