Merge pull request #265 from gluestack/feat/typings-spinner

feat: typings in spinner fixed

Author: makkarMeenu

example/storybook/src/components/Feedback/Spinner/Spinner.stories.tsx

@@ -7,7 +7,7 @@ const SpinnerMeta: ComponentMeta<typeof Spinner> = {
   argTypes: {
     size: {
       control: 'select',
-      options: ['xs', 'small', 'md', 'large', 'xl'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       description: 'The size of the button.',
       table: {
         defaultValue: { summary: 'md' },

example/storybook/src/components/Feedback/Spinner/Spinner.tsx

@@ -5,7 +5,7 @@ import { Spinner } from '../../../ui-components';
 export const SpinnerStory = ({ ...props }) => {
   return (
     <Wrapper>
-      <Spinner color="$primary500" {...props} size="small" />
+      <Spinner color="$primary500" {...props} />
     </Wrapper>
   );
 };

example/storybook/src/ui-components/Spinner/index.tsx

@@ -1,6 +1,2 @@
-import { createSpinner } from '@gluestack-ui/spinner';
-import { Root } from './styled-components';
-
-export const Spinner = createSpinner({
-  Root,
-}) as any;
+import { Spinner } from './styled-components';
+export { Spinner };

example/storybook/src/ui-components/Spinner/styled-components/index.tsx

@@ -1 +1,3 @@
-export { default as Root } from './Root';
+import Root from './Root';
+import { createSpinner } from '@gluestack-ui/spinner';
+export const Spinner = createSpinner({ Root });

packages/spinner/src/Spinner.tsx

@@ -1,12 +1,10 @@
 import React, { forwardRef } from 'react';
-
-export function Spinner<StyledSpinnerProps>(
-  StyledSpinner: React.ComponentType<StyledSpinnerProps>
-) {
-  return forwardRef(({ ...props }: StyledSpinnerProps, ref: any) => {
+import type { ActivityIndicatorProps } from 'react-native';
+export function Spinner<T>(StyledSpinner: React.ComponentType<T>) {
+  return forwardRef(({ ...props }: T & ActivityIndicatorProps, ref: any) => {
     return (
       <StyledSpinner
-        {...(props as StyledSpinnerProps)}
+        {...props}
         ref={ref}
         accessible
         accessibilityLabel="loading"