fix: broken stackblitz

razorpay · Nov 29, 2024 · b60fcf3 · b60fcf3
1 parent 4e80f18
commit b60fcf3
Show file tree

Hide file tree

Showing 54 changed files with 106 additions and 114 deletions.
diff --git a/packages/blade/src/components/ActionList/ActionList.stories.tsx b/packages/blade/src/components/ActionList/ActionList.stories.tsx
@@ -50,7 +50,7 @@ const Page = (): React.ReactElement => {
               Button 
           } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
               return (
                   <Box backgroundColor="surface.background.gray.intense">
                   <ActionList>

diff --git a/packages/blade/src/components/ActionList/docs/stories.ts b/packages/blade/src/components/ActionList/docs/stories.ts
@@ -17,7 +17,7 @@ const Playground = `
     Button 
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
     <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
@@ -62,7 +62,7 @@ const Playground = `
 const ActionList = `
   import { Box, ActionList, ActionListItem } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
     <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
@@ -88,7 +88,7 @@ const ActionListItem = `
     HomeIcon 
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
     <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
@@ -121,7 +121,7 @@ const ActionListSection = `
     ActionListSection,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
     <Box backgroundColor="surface.background.gray.intense">
       <ActionList>

diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx
@@ -33,7 +33,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Amount } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return <Amount value={10000} />;
         }
         export default App;

diff --git a/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx b/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx
@@ -25,7 +25,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Avatar } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Avatar name="Nitin Kumar" src="https://avatars.githubusercontent.com/u/46647141?v=4" />
           )

diff --git a/packages/blade/src/components/Avatar/docs/AvatarGroup.stories.tsx b/packages/blade/src/components/Avatar/docs/AvatarGroup.stories.tsx
@@ -21,7 +21,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Avatar, AvatarGroup } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <AvatarGroup>
               <Avatar color="primary" name="Kamlesh Chandnani" />

diff --git a/packages/blade/src/components/Badge/Badge.stories.tsx b/packages/blade/src/components/Badge/Badge.stories.tsx
@@ -22,7 +22,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Badge, InfoIcon } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Badge color="neutral" icon={InfoIcon}>
               Boop

diff --git a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -84,7 +84,7 @@ const Page = (): React.ReactElement => {
             Text,
           } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             const [isOpen, setIsOpen] = React.useState(false);
 
             return (

diff --git a/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx b/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx
@@ -118,7 +118,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
           {`
             import { Box, Text } from '@razorpay/blade/components'
 
-            function App(): React.ReactElement {
+            function App() {
               return (
                 <Box 
                   as="section" // renders as <section> tag instead of <div>
@@ -185,7 +185,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
             {`
               import { Box, Text } from '@razorpay/blade/components'
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   <>
                     <Box 
@@ -238,7 +238,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
             code={`
              import { Box, Text } from '@razorpay/blade/components';
 
-             function App(): React.ReactElement {
+             function App() {
                return (
                 <>
                   <Box display={{ base: 'none', m: 'block' }}><Text>🖥 Desktop View</Text></Box>
@@ -310,7 +310,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
           {`
                 import { Text } from '@razorpay/blade/components'
 
-                function App(): React.ReactElement {
+                function App() {
                   return (
                     <>
                       {/** ❌ No need of Box wrappers */}

diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -31,7 +31,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Box, Breadcrumb, BreadcrumbItem, HomeIcon } from '@razorpay/blade/components';
 
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Box padding="spacing.4">
               <Breadcrumb>

diff --git a/packages/blade/src/components/Button/Button/Button.stories.tsx b/packages/blade/src/components/Button/Button/Button.stories.tsx
@@ -32,7 +32,7 @@ const Page = (): ReactElement => {
         {`
         import { Button } from '@razorpay/blade/components'
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             // Try changing variant here to secondary
             <Button 

diff --git a/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx b/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx
@@ -30,7 +30,7 @@ const Page = (): React.ReactElement => {
           DownloadIcon,
         } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <ButtonGroup>
               <Button icon={RefreshIcon}>Sync</Button>

diff --git a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
@@ -23,7 +23,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Checkbox } from '@razorpay/blade/components'
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             // Check console
             <Checkbox onChange={(e) => console.log(e.isChecked)}>

diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -23,7 +23,7 @@ const Page = (): React.ReactElement => {
         {`
           import { CheckboxGroup, Checkbox } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <CheckboxGroup 
                 label="Where do you want to collect payments?"

diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx
@@ -46,7 +46,7 @@ const Page = (): React.ReactElement => {
         {`
           import { Box, Chip, ChipGroup, Text } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Box>
                 <ChipGroup

diff --git a/packages/blade/src/components/Counter/Counter.stories.tsx b/packages/blade/src/components/Counter/Counter.stories.tsx
@@ -21,7 +21,7 @@ const Page = (): ReactElement => {
         {`
           import { Counter } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               // Change values to anything less than 99 to see change
               <Counter max={99} value={140} />

diff --git a/packages/blade/src/components/DatePicker/DatePicker.stories.tsx b/packages/blade/src/components/DatePicker/DatePicker.stories.tsx
@@ -87,7 +87,7 @@ export default {
             {`
               import { DatePicker } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   <DatePicker 
                     label="Name"

diff --git a/packages/blade/src/components/Divider/Divider.stories.tsx b/packages/blade/src/components/Divider/Divider.stories.tsx
@@ -32,7 +32,7 @@ const Page = (): React.ReactElement => {
             CardBody
           } from "@razorpay/blade/components";
           
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Card>
                 <CardBody>

diff --git a/packages/blade/src/components/Drawer/docs/stories.ts b/packages/blade/src/components/Drawer/docs/stories.ts
@@ -435,7 +435,7 @@ const DrawerWithTableStory = `import React, { useState } from 'react';
     );
   };
 
-  function App(): React.ReactElement {
+  function App() {
     const [selectedItem, setSelectedItem] = useState<Item | undefined>(undefined);
     const [showDrawer, setShowDrawer] = useState(false);
     const { theme } = useTheme();

diff --git a/packages/blade/src/components/Dropdown/docs/autoCompleteStories.tsx b/packages/blade/src/components/Dropdown/docs/autoCompleteStories.tsx
@@ -13,7 +13,7 @@ export const getSimpleAutoComplete = (
     ActionListItem,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Dropdown 
         selectionType="${selectionType}"
@@ -265,7 +265,7 @@ export const tagsOutside = `
     Tag,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [selections, setSelections] = React.useState([]);
 
     return (
@@ -354,7 +354,7 @@ export const responsiveBottomSheet = `
     )
   }
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Box>
         <Text textAlign="center" marginBottom="spacing.8">Change the <Code>isMobile</Code> flag in code and refresh the sandbox preview</Text>
@@ -592,7 +592,7 @@ export const withErrorState = `
 
   const cities = ['Mumbai', 'Pune', 'Bangalore', 'Mysore'];
 
-  function App(): React.ReactElement {
+  function App() {
     const [isError, setIsError] = React.useState(false);
     const [currentInputValue, setCurrentInputValue] = React.useState('');
     const [isDismissed, setIsDismissed] = React.useState(false);
@@ -655,7 +655,7 @@ import {
   Box,
 } from '@razorpay/blade/components';
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box>
       <Heading size="medium" marginBottom="spacing.3">

diff --git a/packages/blade/src/components/Dropdown/docs/stories.ts b/packages/blade/src/components/Dropdown/docs/stories.ts
@@ -23,7 +23,7 @@ const Playground = `
     Button
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Dropdown 
         // Uncomment next line to make it multiselectable
@@ -89,7 +89,7 @@ const getSimpleSelectCode = (selectionType: DropdownProps['selectionType']): str
     ActionListItem,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Dropdown 
         selectionType="${selectionType}"
@@ -140,7 +140,7 @@ const WithHeaderFooterScroll = `
     Button
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
 
     return (
@@ -248,7 +248,7 @@ const WithValueDisplayStory = `
     Box,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [currentSelections, setCurrentSelections] = React.useState([]);
     
     console.log({currentSelections});
@@ -302,7 +302,7 @@ const WithHTMLFormSubmissionStory = `
     Text,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [submissionValues, setSubmissionValues] = React.useState('');
     
     return (
@@ -362,7 +362,7 @@ const WithValidationStateStory = `
   } from '@razorpay/blade/components';
   import type { SelectInputProps } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [validationState, setValidationState] = React.useState<SelectInputProps['validationState']>('none');
 
     return (
@@ -424,7 +424,7 @@ const WithRefUsageStory = `
     Text
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const selectRef = React.useRef<HTMLElement>(null);
 
 
@@ -478,7 +478,7 @@ const WithMultipleDropdownsStory = `
   } from '@razorpay/blade/components';
 
 
-  function App(): React.ReactElement {  
+  function App() {  
     return (
       <Box display="flex" flexDirection="row" minHeight="300px" gap="spacing.2">
         <Box flex={1}>
@@ -618,7 +618,7 @@ const WithAutoPositioningSelectStory = `
     Box,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Box>
         <Box
@@ -816,7 +816,7 @@ const WithControlledMenuStory = `
     CloseIcon
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [status, setStatus] = React.useState<string | undefined>();
 
     return (
@@ -881,7 +881,7 @@ const WithControlledMultiSelectMenuStory = `
     Tag,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [filters, setFilters] = React.useState<string[]>([]);
 
     const toggleSelection = ({ name, value }: { name: string; value?: boolean }): void => {
@@ -1025,7 +1025,7 @@ import {
   Heading,
 } from '@razorpay/blade/components';
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box>
       <Heading size="medium" marginBottom="spacing.3">