docs: updated readme

README.md

@@ -1,16 +1,42 @@
 # Storybook Addon Render Modes
 
+This addon adds ability to emulate user CSS rendering preferences such as `prefers-reduced-motion` and others.
+
+
+<img width="682" alt="image" src="https://github.com/mnik01/rendering-modes/assets/39025497/d2d0662d-02b8-49c2-a21d-0cf3e157899f">
+
+> Initially fork of [storybook-addon-css-user-prefs](https://github.com/jonathantneal/storybook-addon-css-user-prefs) to support sb@^8.0.0
+
+List of supported modes:
+- prefers-color-scheme
+- prefers-contrast
+- prefers-reduced-data
+- prefers-reduced-motion
+- prefers-reduced-transparency
+- ~~print~~ (todo)
+- ~~noscript~~ (todo)
+
+
 ## Installation
 
 1. Package installation
-`pnpm add -D TODO`
+`pnpm add -D storybook-addon-render-modes`
 
 2. Addon registration
-TODO
+```ts
+const config: StorybookConfig = {
+  // ...yourOtherSettings
+  addons: [
+    'storybook-addon-render-modes',
+  ],
+};
+
+export default config;
+```
 
-## Features
+## Caveats
 
-Rendering modes support:
+This addon doesnt force changing of rendering mode in browser level (seems impossible).
+But instead it uses hacky approach: we go through `document.styleSheets` via JS and manually rewriting media style rules.
 
-- [ ] prefers-reduced-motion
-- [ ] print
+This approach may work not as expected in some cases. Feel fre to create an issue for such cases.

package.json

@@ -1,20 +1,39 @@
 {
   "name": "storybook-addon-render-modes",
-  "version": "0.0.8",
-  "description": "Storybook addon that adds ability to change render mode of a story",
+  "version": "0.0.9",
+  "description": "Storybook addon that adds ability to emulate render mode (css user preferences) of a story",
   "keywords": [
     "storybook-addons",
     "storybook-addon-render-modes",
     "render-modes",
-    "prefers-reduced-motion"
+    "prefers-reduced-motion",
+    "storybook-addons",
+    "conditions",
+    "css",
+    "emulate",
+    "emulates",
+    "emulation",
+    "media",
+    "query",
+    "queries",
+    "preferences",
+    "prefers-color-scheme",
+    "prefers-contrast",
+    "prefers-reduced-data",
+    "prefers-reduced-motion",
+    "prefers-reduced-transparency",
+    "prefs",
+    "toolbar",
+    "user",
+    "storybook-addons"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/mnik01/rendering-modes"
   },
   "type": "module",
   "license": "MIT",
-  "author": "Maxim Nikonov",
+  "author": "Maxim Nikonov <[email protected]>",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -115,7 +134,13 @@
   "storybook": {
     "displayName": "Render Modes",
     "supportedFrameworks": [
-      "react"
+      "react",
+      "react",
+      "vue",
+      "angular",
+      "html",
+      "svelte",
+      "preact"
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   }