Merge pull request #2453 from gluestack/feat/orientation-progress

feat: added orientation prop to progress component
gluestack · Sep 6, 2024 · e37bef1 · e37bef1
2 parents fecd64e + 3419705
commit e37bef1
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 19 deletions.
diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
@@ -70,6 +70,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/unstyled/link/src'
             ),
+            '@gluestack-ui/progress': path.resolve(
+              __dirname,
+              '../../packages/unstyled/progress/src'
+            ),
             '@gluestack-ui/accordion': path.resolve(
               __dirname,
               '../../packages/unstyled/accordion/src'

diff --git a/example/storybook-nativewind/src/components/Progress/Progress.stories.tsx b/example/storybook-nativewind/src/components/Progress/Progress.stories.tsx
@@ -18,10 +18,15 @@ const ProgressMeta: ComponentMeta<typeof Progress> = {
       control: 'select',
       options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
     },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
   },
   args: {
     value: 40,
     size: 'md',
+    orientation: 'horizontal',
   },
 };
 

diff --git a/example/storybook-nativewind/src/components/Progress/Progress.tsx b/example/storybook-nativewind/src/components/Progress/Progress.tsx
@@ -6,9 +6,10 @@ import { Heading } from '@/components/ui/heading';
 import { Center } from '@/components/ui/center';
 
 const ProgressBasic = ({ ...props }: any) => {
+  // console.log('props', props);
   return (
-    <Center className="w-full">
-      <Progress className="w-[80%]" {...props}>
+    <Center className="w-[300px] h-[300px]">
+      <Progress {...props}>
         <ProgressFilledTrack />
       </Progress>
     </Center>

diff --git a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx
@@ -15,7 +15,7 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="with-nativewind/Components/Feedback/Progress" />
 
 
-import { Progress, ProgressFilledTrack, VStack, Box, Heading } from '../../core-components/nativewind';
+import { Progress, ProgressFilledTrack, VStack, Box, Heading, Center } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -34,24 +34,34 @@ This is an illustration of **Progress** component.
 
 <Wrapper>
   <CodePreview
+    _rendererWrapper={{
+        py: '$6',
+      }}
     showComponentRenderer={true}
     showArgsController={true}
     metaData={{
       code: `
-       <Progress value={40} className="w-[300px]" {...props} >
-          <ProgressFilledTrack />
-        </Progress>
+        <Center className='w-[300px] h-[300px]'>
+          <Progress value={40} {...props} >
+            <ProgressFilledTrack />
+          </Progress>
+        </Center>
       `,
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Wrapper, Progress, ProgressFilledTrack },
+      scope: { Wrapper, Progress, ProgressFilledTrack, Center },
       argsType: {
         size: {
           control: 'select',
           options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
           default: 'md',
         },
+        orientation: {
+          control: 'select',
+          options: ['horizontal', 'vertical'],
+          default: 'horizontal',
+        },
       },
     }}
   />
@@ -219,6 +229,19 @@ Progress component is created using View component from react-native. It extends
             <Table.TText>md</Table.TText>
           </Table.TD>
         </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>orientation</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>vertical | horizontal</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>horizontal</Table.TText>
+          </Table.TD>
+        </Table.TR>
       </Table.TBody>
     </Table>
   </TableContainer>

diff --git a/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
@@ -9,6 +9,7 @@ import {
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
 import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
 const SCOPE = 'PROGRESS';
 export const UIProgress = createProgress({
   Root: withStyleContext(View, SCOPE),
@@ -21,6 +22,10 @@ cssInterop(UIProgress.FilledTrack, { className: 'style' });
 const progressStyle = tva({
   base: 'bg-background-300 rounded-full w-full',
   variants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
     size: {
       'xs': 'h-1',
       'sm': 'h-2',
@@ -30,10 +35,48 @@ const progressStyle = tva({
       '2xl': 'h-6',
     },
   },
+  compoundVariants: [
+    {
+      orientation: 'vertical',
+      size: 'xs',
+      class: 'h-full w-1 justify-end',
+    },
+    {
+      orientation: 'vertical',
+      size: 'sm',
+      class: 'h-full w-2 justify-end',
+    },
+    {
+      orientation: 'vertical',
+      size: 'md',
+      class: 'h-full w-3 justify-end',
+    },
+    {
+      orientation: 'vertical',
+      size: 'lg',
+      class: 'h-full w-4 justify-end',
+    },
+
+    {
+      orientation: 'vertical',
+      size: 'xl',
+      class: 'h-full w-5 justify-end',
+    },
+    {
+      orientation: 'vertical',
+      size: '2xl',
+      class: 'h-full w-6 justify-end',
+    },
+  ],
 });
+
 const progressFilledTrackStyle = tva({
   base: 'bg-primary-500 rounded-full',
   parentVariants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
     size: {
       'xs': 'h-1',
       'sm': 'h-2',
@@ -43,6 +86,39 @@ const progressFilledTrackStyle = tva({
       '2xl': 'h-6',
     },
   },
+  parentCompoundVariants: [
+    {
+      orientation: 'vertical',
+      size: 'xs',
+      class: 'h-full w-1',
+    },
+    {
+      orientation: 'vertical',
+      size: 'sm',
+      class: 'h-full w-2',
+    },
+    {
+      orientation: 'vertical',
+      size: 'md',
+      class: 'h-full w-3',
+    },
+    {
+      orientation: 'vertical',
+      size: 'lg',
+      class: 'h-full w-4',
+    },
+
+    {
+      orientation: 'vertical',
+      size: 'xl',
+      class: 'h-full w-5',
+    },
+    {
+      orientation: 'vertical',
+      size: '2xl',
+      class: 'h-full w-6',
+    },
+  ],
 });
 
 type IProgressProps = VariantProps<typeof progressStyle> &
@@ -53,13 +129,14 @@ type IProgressFilledTrackProps = VariantProps<typeof progressFilledTrackStyle> &
 export const Progress = React.forwardRef<
   React.ElementRef<typeof UIProgress>,
   IProgressProps
->(({ className, size = 'md', ...props }, ref) => {
+>(({ className, size = 'md', orientation = 'horizontal', ...props }, ref) => {
   return (
     <UIProgress
       ref={ref}
       {...props}
-      className={progressStyle({ size, class: className })}
-      context={{ size }}
+      className={progressStyle({ size, orientation, class: className })}
+      context={{ size, orientation }}
+      orientation={orientation}
     />
   );
 });
@@ -68,14 +145,16 @@ export const ProgressFilledTrack = React.forwardRef<
   React.ElementRef<typeof UIProgress.FilledTrack>,
   IProgressFilledTrackProps
 >(({ className, ...props }, ref) => {
-  const { size: parentSize } = useStyleContext(SCOPE);
+  const { size: parentSize, orientation: parentOrientation } =
+    useStyleContext(SCOPE);
 
   return (
     <UIProgress.FilledTrack
       ref={ref}
       className={progressFilledTrackStyle({
         parentVariants: {
           size: parentSize,
+          orientation: parentOrientation,
         },
         class: className,
       })}

diff --git a/packages/unstyled/progress/src/Progress.tsx b/packages/unstyled/progress/src/Progress.tsx
@@ -6,12 +6,14 @@ const useProgress = ({
   min,
   max,
   value,
+  orientation = 'horizontal',
 }: {
   min: number;
   max: number;
   value: number;
+  orientation: 'horizontal' | 'vertical';
 }) => {
-  const valueWidth =
+  const calculatedValue =
     value < max && value > min
       ? Math.round(((value - min) / (max - min)) * 100)
       : value > min
@@ -24,9 +26,11 @@ const useProgress = ({
     'role': 'progressbar',
     'aria-valuemin': min,
     'aria-valuemax': max,
-    'aria-valuenow': valueWidth,
-    'aria-valuetext': `${valueWidth}%`,
-    valueWidth,
+    'aria-valuenow': calculatedValue,
+    'aria-valuetext': `${calculatedValue}%`,
+    'aria-orientation': orientation,
+    'valueWidth': orientation === 'horizontal' ? calculatedValue : 100,
+    'valueHeight': orientation === 'vertical' ? calculatedValue : 100,
   };
 };
 
@@ -35,10 +39,17 @@ export function Progress<StyledProgressProps>(
 ) {
   return forwardRef(
     (
-      { children, min = 0, max = 100, value = 0, ...props }: IProgressProps,
+      {
+        children,
+        min = 0,
+        max = 100,
+        value = 0,
+        orientation = 'horizontal',
+        ...props
+      }: IProgressProps,
       ref?: any
     ) => {
-      const progressProps = useProgress({ min, max, value });
+      const progressProps = useProgress({ min, max, value, orientation });
 
       return (
         <StyledProgress
@@ -50,6 +61,8 @@ export function Progress<StyledProgressProps>(
             min={min}
             max={max}
             valueWidth={progressProps.valueWidth}
+            valueHeight={progressProps.valueHeight}
+            orientation={orientation}
           >
             {children}
           </ProgressProvider>

diff --git a/packages/unstyled/progress/src/ProgressFilledTrack.tsx b/packages/unstyled/progress/src/ProgressFilledTrack.tsx
@@ -5,12 +5,18 @@ export function ProgressFilledTrack<StyledProgressFilledTrack>(
   StyledProgressFilledTrack: React.ComponentType<StyledProgressFilledTrack>
 ) {
   return forwardRef(({ style = {}, ...props }: any, ref?: any) => {
-    const { valueWidth } = useProgress('ProgressContext');
+    const { valueWidth, valueHeight, orientation } =
+      useProgress('ProgressContext');
+
+    const filledStyle =
+      orientation === 'vertical'
+        ? { height: `${valueHeight}%`, width: '100%' }
+        : { width: `${valueWidth}%`, height: '100%' };
 
     return (
       <StyledProgressFilledTrack
         {...(props as StyledProgressFilledTrack)}
-        style={[style, { width: `${valueWidth}%`, height: '100%' }]}
+        style={[style, filledStyle]}
         ref={ref}
       />
     );

diff --git a/packages/unstyled/progress/src/types.ts b/packages/unstyled/progress/src/types.ts
@@ -14,6 +14,11 @@ export interface InterfaceProgressProps {
    * @default 100
    */
   max?: number;
+  /**
+   * Orientation of the progress bar.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
   children?: any;
 }