prefer localStorage over window.localStorage (graphql#3646)

add `packageManager` field in `package.json` (graphql#3654)

[graphiql] add `className` prop. Additional class names which will be appended to the GraphiQL container element (graphql#3643)

disable shrinking while changing the operation name

Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

.changeset/lazy-beers-confess.md

@@ -0,0 +1,5 @@
+---
+"graphiql": minor
+---
+
+add `className` prop. Additional class names which will be appended to the GraphiQL container element

.changeset/light-geckos-vanish.md

@@ -0,0 +1,5 @@
+---
+"@graphiql/toolkit": patch
+---
+
+prefer `localStorage` over `window.localStorage`

.eslintrc.js

@@ -133,7 +133,14 @@ module.exports = {
         'no-octal-escape': 'error',
         'no-param-reassign': 'error',
         'no-proto': 'error',
-        'no-restricted-properties': 'off',
+        'no-restricted-properties': [
+          'error',
+          {
+            object: 'window',
+            property: 'localStorage',
+            message: 'Use `localStorage` instead',
+          },
+        ],
         'no-return-assign': 'error',
         'no-return-await': 'error',
         'no-script-url': 'error',

package.json

@@ -29,9 +29,7 @@
       "pre-commit": "lint-staged"
     }
   },
-  "engines": {
-    "npm": "please_use_yarn_instead"
-  },
+  "packageManager": "yarn@1.22.22",
   "scripts": {
     "build": "yarn build-clean && yarn tsc && yarn build:nontsc",
     "build-bundles": "yarn prebuild-bundles && yarn wsrun:noexamples --stages build-bundles",

packages/graphiql-react/package.json

@@ -59,7 +59,7 @@
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.12",
     "copy-to-clipboard": "^3.2.0",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^11.0.0",
     "graphql-language-service": "^5.2.1",
     "markdown-it": "^14.1.0",
     "set-value": "^4.1.0"

packages/graphiql-react/src/ui/tabs.css

@@ -4,7 +4,7 @@
   gap: var(--px-8);
   padding: var(--px-8) 0;
   margin: 0 var(--px-8)
-    /* when using padding while scrolling tab items will overflow to padding area */;
+    /* when using padding while scrolling, tab items will overflow to padding area */;
   overflow-x: auto;
   list-style: none;
 }
@@ -17,6 +17,11 @@
 .graphiql-tab {
   background: hsla(var(--color-neutral), var(--alpha-background-light));
 
+  /* disable shrinking while changing the operation name */
+  &:not(:focus-within) {
+    transform: none !important;
+  }
+
   .graphiql-tab-wrapper {
     position: relative;
     display: flex;

packages/graphiql-toolkit/src/storage/base.ts

@@ -64,13 +64,13 @@ export class StorageAPI {
       this.storage = null;
     } else {
       this.storage = {
-        getItem: window.localStorage.getItem.bind(window.localStorage),
-        setItem: window.localStorage.setItem.bind(window.localStorage),
-        removeItem: window.localStorage.removeItem.bind(window.localStorage),
+        getItem: localStorage.getItem.bind(localStorage),
+        setItem: localStorage.setItem.bind(localStorage),
+        removeItem: localStorage.removeItem.bind(localStorage),
 
         get length() {
           let keys = 0;
-          for (const key in window.localStorage) {
+          for (const key in localStorage) {
             if (key.indexOf(`${STORAGE_NAMESPACE}:`) === 0) {
               keys += 1;
             }
@@ -80,9 +80,9 @@ export class StorageAPI {
 
         clear() {
           // We only want to clear the namespaced items
-          for (const key in window.localStorage) {
+          for (const key in localStorage) {
             if (key.indexOf(`${STORAGE_NAMESPACE}:`) === 0) {
-              window.localStorage.removeItem(key);
+              localStorage.removeItem(key);
             }
           }
         },

packages/graphiql-toolkit/src/storage/custom.ts

@@ -25,7 +25,7 @@ export function createLocalStorage({
     removeItem: key => localStorage.removeItem(getStorageKey(key)),
     get length() {
       let keys = 0;
-      for (const key in window.localStorage) {
+      for (const key in localStorage) {
         if (key.indexOf(storageKeyPrefix) === 0) {
           keys += 1;
         }
@@ -35,9 +35,9 @@ export function createLocalStorage({
 
     clear() {
       // We only want to clear the namespaced items
-      for (const key in window.localStorage) {
+      for (const key in localStorage) {
         if (key.indexOf(storageKeyPrefix) === 0) {
-          window.localStorage.removeItem(key);
+          localStorage.removeItem(key);
         }
       }
     },

packages/graphiql/src/components/GraphiQL.tsx

@@ -225,6 +225,10 @@ export type GraphiQLInterfaceProps = WriteableEditorProps &
      * rendered with a specific theme
      */
     forcedTheme?: (typeof THEMES)[number];
+    /**
+     * Additional class names which will be appended to the container element.
+     */
+    className?: string;
   };
 
 const THEMES = ['light', 'dark', 'system'] as const;
@@ -454,9 +458,14 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
 
   const hasMultipleTabs = editorContext.tabs.length > 1;
 
+  const className = props.className ? ` ${props.className}` : '';
+
   return (
     <Tooltip.Provider>
-      <div data-testid="graphiql-container" className="graphiql-container">
+      <div
+        data-testid="graphiql-container"
+        className={`graphiql-container${className}`}
+      >
         <div className="graphiql-sidebar">
           <div className="graphiql-sidebar-section">
             {pluginContext?.plugins.map((plugin, index) => {

packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx

@@ -29,7 +29,7 @@ const simpleIntrospection = {
 };
 
 beforeEach(() => {
-  window.localStorage.clear();
+  localStorage.clear();
 });
 
 describe('GraphiQL', () => {