From cc2008bf5639c7b787ad4d0eac3fb6c1805f5532 Mon Sep 17 00:00:00 2001
From: Justin Poehnelt <jpoehnelt@google.com>
Date: Wed, 15 Jan 2025 11:30:11 -0700
Subject: [PATCH] docs: improve embedding and add link to codesandbox

---
 .storybook/page.mdx                 |  2 +-
 README.md                           |  4 ++++
 src/stories/drive-picker.stories.ts | 18 +++---------------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/.storybook/page.mdx b/.storybook/page.mdx
index b81dd8b..b5e5bf5 100644
--- a/.storybook/page.mdx
+++ b/.storybook/page.mdx
@@ -5,6 +5,6 @@ import "./page.css";
 
 <Canvas/>
 
-{ new URL(window.location.href).searchParams.has("hideControls") ? null :<Controls/> }
+{ new URL(window.location.href).searchParams.get("hideControls") === "true" ? null :<Controls/> }
 
 <Stories includePrimary={false}/>
\ No newline at end of file
diff --git a/README.md b/README.md
index 0bcc5fe..6e9194f 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,10 @@ The Google Picker API is a JavaScript API that allows users to select or upload
 
 Explore the [storybook demo](https://googleworkspace.github.io/drive-picker-element/?path=/docs/stories-drive-picker--docs) to see the component in action.
 
+See the framework specific demos:
+
+- [React](https://codesandbox.io/p/sandbox/xenodochial-leaf-j2xtdq)
+
 ## Index
 
 - [Install](#install)
diff --git a/src/stories/drive-picker.stories.ts b/src/stories/drive-picker.stories.ts
index eeef7d7..cecb39a 100644
--- a/src/stories/drive-picker.stories.ts
+++ b/src/stories/drive-picker.stories.ts
@@ -33,8 +33,9 @@ const argsAllowedFromParams = [
 	...Object.keys(elementArgTypes["drive-picker"]),
 	...Object.keys(elementArgTypes["drive-picker-docs-view"]),
 ];
+const searchParamsArgs = JSON.parse(searchParams.get("args") || "{}");
 const argValuesFromParams = Object.fromEntries(
-	argsAllowedFromParams.map((arg) => [arg, searchParams.get(arg) || undefined]),
+	argsAllowedFromParams.map((arg) => [arg, searchParamsArgs[arg] || undefined]),
 );
 
 const postHeightToParent = () => {
@@ -126,20 +127,7 @@ const render = ({ ...args }) => {
 
 	// Use a template to show the drive-picker element only when the user clicks the preview button
 	const template = document.createElement("template");
-	const withBundlers = document.createElement("script");
-	withBundlers.textContent = `
-import "@googleworkspace/drive-picker-element";
-`;
-	const withoutBundlers = document.createElement("script");
-	withoutBundlers.src =
-		"https://unpkg.com/@googleworkspace/drive-picker-element@0/dist/index.iife.min.js";
-	template.innerHTML = [
-		"<!-- Using JavaScript bundler or CDN -->",
-		withBundlers.outerHTML,
-		`<!-- ${withoutBundlers.outerHTML} -->`,
-		"", // Add a newline for better readability
-		drivePicker.outerHTML,
-	].join("\n");
+	template.innerHTML = drivePicker.outerHTML;
 	lazyPreviewElement.appendChild(template);
 
 	return lazyPreviewElement;