From dd97cf3e16884b2c6c248843d45527d767c03184 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 25 Jan 2024 18:16:42 +0100 Subject: [PATCH 1/4] feat: query-paramiters persisting when opening a story on a full-view-mode --- .storybook/preview.jsx | 5 +++- package-lock.json | 52 ++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 57 insertions(+), 1 deletion(-) diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index f16f46663..8a4c1934b 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,6 +1,7 @@ import '../src/tailwind.css' import './sb-theming.css' import { ToC } from '@docs/helpers/ToC' +import queryString from 'query-string' import { DocsContainer } from '@storybook/blocks' import { withThemeByDataAttribute } from '@storybook/addon-styling' @@ -8,6 +9,7 @@ import { Icon } from '@spark-ui/icon' import { ShareExpand } from '@spark-ui/icons/dist/icons/ShareExpand' const ExampleContainer = ({ children, ...props }) => { + console.log(props) return (
{children}
@@ -51,12 +53,13 @@ export const decorators = [ attributeName: 'data-theme', }), (storyFn, { id, viewMode }) => { + const {globals} = queryString.parse(window.top?.location.search) return (
{viewMode === 'docs' && (
diff --git a/package-lock.json b/package-lock.json index 0bfad530e..32acc961d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -89,6 +89,7 @@ "postcss": "8.4.31", "prettier": "3.2.4", "prettier-plugin-tailwindcss": "0.5.11", + "query-string": "^8.1.0", "react": "18.2.0", "react-dom": "18.2.0", "react-live": "3.2.0", @@ -2399,6 +2400,7 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", + "extraneous": true, "inBundle": true, "license": "MIT", "engines": { @@ -15390,6 +15392,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/decode-uri-component": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz", + "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==", + "dev": true, + "engines": { + "node": ">=14.16" + } + }, "node_modules/dedent": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", @@ -17826,6 +17837,18 @@ "node": ">=8" } }, + "node_modules/filter-obj": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz", + "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==", + "dev": true, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/finalhandler": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", @@ -27848,6 +27871,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/query-string": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.1.0.tgz", + "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==", + "dev": true, + "dependencies": { + "decode-uri-component": "^0.4.1", + "filter-obj": "^5.1.0", + "split-on-first": "^3.0.0" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/querystringify": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", @@ -29958,6 +29998,18 @@ "node": "*" } }, + "node_modules/split-on-first": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz", + "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/split2": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz", diff --git a/package.json b/package.json index 8456f9818..6c0060e39 100644 --- a/package.json +++ b/package.json @@ -109,6 +109,7 @@ "postcss": "8.4.31", "prettier": "3.2.4", "prettier-plugin-tailwindcss": "0.5.11", + "query-string": "^8.1.0", "react": "18.2.0", "react-dom": "18.2.0", "react-live": "3.2.0", From e554fd554e3317cdfaa0d6947ebcfb442b8a6d4b Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 25 Jan 2024 18:18:03 +0100 Subject: [PATCH 2/4] fix: rmeove unnecesary console.log --- .storybook/preview.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 8a4c1934b..c72dcaebf 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -9,7 +9,6 @@ import { Icon } from '@spark-ui/icon' import { ShareExpand } from '@spark-ui/icons/dist/icons/ShareExpand' const ExampleContainer = ({ children, ...props }) => { - console.log(props) return (
{children}
From 6f91682f9aed96759d885fb3c36926f2805ee3f9 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 25 Jan 2024 18:22:01 +0100 Subject: [PATCH 3/4] fix: sort dependencies --- .storybook/preview.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index c72dcaebf..109eda7ec 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,13 +1,13 @@ -import '../src/tailwind.css' -import './sb-theming.css' -import { ToC } from '@docs/helpers/ToC' import queryString from 'query-string' - import { DocsContainer } from '@storybook/blocks' import { withThemeByDataAttribute } from '@storybook/addon-styling' import { Icon } from '@spark-ui/icon' import { ShareExpand } from '@spark-ui/icons/dist/icons/ShareExpand' +import '../src/tailwind.css' +import './sb-theming.css' +import { ToC } from '@docs/helpers/ToC' + const ExampleContainer = ({ children, ...props }) => { return ( @@ -52,13 +52,13 @@ export const decorators = [ attributeName: 'data-theme', }), (storyFn, { id, viewMode }) => { - const {globals} = queryString.parse(window.top?.location.search) + const { globals } = queryString.parse(window.top?.location.search) return (
{viewMode === 'docs' && (
From 28736a8c8c319c49ed3af8005bb68a8fc03a73fa Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 29 Jan 2024 17:48:15 +0100 Subject: [PATCH 4/4] chore: remove query-string dependency --- .storybook/preview.jsx | 7 +++--- package-lock.json | 51 ------------------------------------------ package.json | 1 - 3 files changed, 4 insertions(+), 55 deletions(-) diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 109eda7ec..4cb807d3e 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,4 +1,3 @@ -import queryString from 'query-string' import { DocsContainer } from '@storybook/blocks' import { withThemeByDataAttribute } from '@storybook/addon-styling' import { Icon } from '@spark-ui/icon' @@ -52,13 +51,15 @@ export const decorators = [ attributeName: 'data-theme', }), (storyFn, { id, viewMode }) => { - const { globals } = queryString.parse(window.top?.location.search) + const params = new URLSearchParams(window.top?.location.search) + params.set('id', id) + params.delete('path') return (
{viewMode === 'docs' && (
diff --git a/package-lock.json b/package-lock.json index 0c7da8f71..c79896a88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -89,7 +89,6 @@ "postcss": "8.4.31", "prettier": "3.2.4", "prettier-plugin-tailwindcss": "0.5.11", - "query-string": "^8.1.0", "react": "18.2.0", "react-dom": "18.2.0", "react-live": "3.2.0", @@ -15392,15 +15391,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/decode-uri-component": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz", - "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==", - "dev": true, - "engines": { - "node": ">=14.16" - } - }, "node_modules/dedent": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", @@ -17837,18 +17827,6 @@ "node": ">=8" } }, - "node_modules/filter-obj": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz", - "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==", - "dev": true, - "engines": { - "node": ">=14.16" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/finalhandler": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", @@ -27871,23 +27849,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/query-string": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.1.0.tgz", - "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==", - "dev": true, - "dependencies": { - "decode-uri-component": "^0.4.1", - "filter-obj": "^5.1.0", - "split-on-first": "^3.0.0" - }, - "engines": { - "node": ">=14.16" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/querystringify": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", @@ -29998,18 +29959,6 @@ "node": "*" } }, - "node_modules/split-on-first": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz", - "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/split2": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz", diff --git a/package.json b/package.json index 6c0060e39..8456f9818 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,6 @@ "postcss": "8.4.31", "prettier": "3.2.4", "prettier-plugin-tailwindcss": "0.5.11", - "query-string": "^8.1.0", "react": "18.2.0", "react-dom": "18.2.0", "react-live": "3.2.0",