[v11.x.x] Fix Storybook AppProviderDecorator (#9233)

### WHY are these changes introduced?

Fix `feature` -> `features`
[typo](#9227) in the storybook
AppProviderDecorator so the toggle works on all stories. Also removed
the button toggle from the AppProvider summer editions story to avoid
confusion between two toggle mechanisms

### How to 🎩
Toggle feature in control panel

https://5d559397bae39100201eedc1-zlfuvdfzep.chromatic.com/?path=/story/all-components-appprovider--with-summer-editions-feature

Author: sophschneider

polaris-react/.storybook/preview.js

@@ -23,8 +23,8 @@ function AppProviderDecorator(Story, context) {
   if (context.args.omitAppProvider) return <Story {...context} />;
   return (
     <AppProvider
-      feature={{
-         polarisSummerEditions2023,
+      features={{
+        polarisSummerEditions2023,
       }}
       i18n={enTranslations}
     >

polaris-react/src/components/AppProvider/AppProvider.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import type {ComponentMeta} from '@storybook/react';
+import type {Args, ComponentMeta} from '@storybook/react';
 import {
   AppProvider,
   Avatar,
@@ -166,40 +166,30 @@ export function WithLinkComponent() {
   );
 }
 
-export function WithSummerEditionsFeature() {
-  const [flagStatus, setFlagStatus] = useState(false);
-  const CheckFeature = ({children}: {children: React.ReactNode}) => {
-    const {polarisSummerEditions2023} = useFeatures();
+export const WithSummerEditionsFeature = {
+  render: (_args: Args, {globals: {polarisSummerEditions2023}}) => {
+    const CheckFeature = () => {
+      const {polarisSummerEditions2023} = useFeatures();
+      return (
+        <AlphaCard>
+          <VerticalStack gap="4">
+            <Text
+              as="h2"
+              variant={polarisSummerEditions2023 ? 'headingXl' : 'bodyMd'}
+              color={polarisSummerEditions2023 ? 'critical' : undefined}
+            >
+              {`Polaris Summer Editions flag is turned ${
+                polarisSummerEditions2023 ? 'ON' : 'OFF'
+              }`}
+            </Text>
+          </VerticalStack>
+        </AlphaCard>
+      );
+    };
     return (
-      <AlphaCard>
-        <VerticalStack gap="4">
-          <Text
-            as="h2"
-            variant={polarisSummerEditions2023 ? 'headingXl' : 'bodyMd'}
-            color={polarisSummerEditions2023 ? 'critical' : undefined}
-          >
-            {`Polaris Summer Editions flag is turned ${
-              polarisSummerEditions2023 ? 'ON' : 'OFF'
-            }`}
-          </Text>
-
-          {children}
-        </VerticalStack>
-      </AlphaCard>
+      <AppProvider features={{polarisSummerEditions2023}} i18n={{}}>
+        <CheckFeature />
+      </AppProvider>
     );
-  };
-  return (
-    <AppProvider features={{polarisSummerEditions2023: flagStatus}} i18n={{}}>
-      <CheckFeature>
-        <Box>
-          <Button
-            primary
-            onClick={() => setFlagStatus((flagStatus) => !flagStatus)}
-          >
-            Toggle flag
-          </Button>
-        </Box>
-      </CheckFeature>
-    </AppProvider>
-  );
-}
+  },
+};

polaris-react/src/components/Frame/Frame.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useRef, useState} from 'react';
-import type {ComponentMeta} from '@storybook/react';
+import type {Args, ComponentMeta} from '@storybook/react';
 import {
   ActionList,
   AppProvider,
@@ -34,7 +34,19 @@ export default {
   parameters: {layout: 'fullscreen'},
 } as ComponentMeta<typeof Frame>;
 
-export function InAnApplication() {
+export const InAnApplication = {
+  render: (_args: Args, {globals: {polarisSummerEditions2023}}) => (
+    <InAnApplicationComponent
+      polarisSummerEditions2023={polarisSummerEditions2023}
+    />
+  ),
+};
+
+function InAnApplicationComponent({
+  polarisSummerEditions2023,
+}: {
+  polarisSummerEditions2023: boolean;
+}) {
   const defaultState = useRef({
     emailFieldValue: 'dharma@jadedpixel.com',
     nameFieldValue: 'Jaded Pixel',
@@ -353,6 +365,7 @@ export function InAnApplication() {
             },
           },
         }}
+        features={{polarisSummerEditions2023}}
       >
         <Frame
           logo={logo}
@@ -373,7 +386,19 @@ export function InAnApplication() {
   );
 }
 
-export function WithAnOffset() {
+export const WithAnOffset = {
+  render: (_args: Args, {globals: {polarisSummerEditions2023}}) => (
+    <WithAnOffsetComponent
+      polarisSummerEditions2023={polarisSummerEditions2023}
+    />
+  ),
+};
+
+function WithAnOffsetComponent({
+  polarisSummerEditions2023,
+}: {
+  polarisSummerEditions2023: boolean;
+}) {
   const defaultState = useRef({
     emailFieldValue: 'dharma@jadedpixel.com',
     nameFieldValue: 'Jaded Pixel',
@@ -692,6 +717,7 @@ export function WithAnOffset() {
             },
           },
         }}
+        features={{polarisSummerEditions2023}}
       >
         <Frame
           logo={logo}

polaris-react/src/utilities/features/context.ts

@@ -1,5 +1,7 @@
 import {createContext} from 'react';
 
-import type {Features} from './types';
+import type {FeaturesConfig} from './types';
 
-export const FeaturesContext = createContext<Features | undefined>(undefined);
+export const FeaturesContext = createContext<FeaturesConfig | undefined>(
+  undefined,
+);

polaris-react/src/utilities/features/tests/hooks.test.tsx

@@ -5,7 +5,6 @@ import {useFeatures} from '../hooks';
 
 function Component() {
   const features = useFeatures();
-  // @ts-expect-error There are currently no valid features, so use a fake one for testing
   return features.foo ? <div /> : null;
 }