Merge pull request #41 from smartive-education/feature/refactoring-stack

feat: Refactoring Stack Component

src/components/form/form-fileinput.tsx

@@ -7,7 +7,7 @@ import { IconCheckmark } from '../icons/icon-checkmark';
 import { IconSize } from '../icons/icon-props';
 import { Paragraph, ParagraphSizes } from '../typography/paragraph';
 import { TextButton, TextButtonColor, TextButtonSize } from '../buttons/text-button';
-import { Stack, StackAlignItems, StackDirections, StackSpacings } from '../../layout/stack/stack';
+import { Stack, StackAlignItems, StackDirection, StackSpacing } from '../../layout/stack/stack';
 
 export type FileinputProps = {
   /**
@@ -84,12 +84,12 @@ export const Fileinput: FC<FileinputProps> = ({ description, errorMessage, onAdd
   const dragAreaClasses = mergeClassNames([dragAreaBaseStyle]);
 
   return (
-    <Stack direction={StackDirections.col} spacing={StackSpacings.s}>
+    <Stack direction={StackDirection.col} spacing={StackSpacing.s}>
       <FormItem id={fileinputId} errorMessage={errorMessage}>
         <input className={'hidden'} type="file" ref={inputRef} id={fileinputId} multiple={false} onChange={handleChange} />
         <label htmlFor={fileinputId} className={dragAreaClasses}>
           <div onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}>
-            <Stack direction={StackDirections.col} spacing={StackSpacings.xs} alignitems={StackAlignItems.center}>
+            <Stack direction={StackDirection.col} spacing={StackSpacing.xs} alignItems={StackAlignItems.center}>
               {!isFileSelected ? (
                 <>
                   <IconUpload size={IconSize.l} />

src/components/form/form-item.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { Label, LabelSizes } from '../typography/label';
-import { Stack, StackDirections, StackSpacings } from '../../layout/stack/stack';
+import { Stack, StackDirection, StackSpacing } from '../../layout/stack/stack';
 
 export type FormItemProps = {
   /**
@@ -27,7 +27,7 @@ export type FormItemProps = {
 
 export const FormItem: FC<FormItemProps> = ({ label, labelSize = LabelSizes.m, id, children, errorMessage }) => {
   return (
-    <Stack direction={StackDirections.col} spacing={StackSpacings.xxs}>
+    <Stack direction={StackDirection.col} spacing={StackSpacing.xxs}>
       {label && (
         <Label size={labelSize} htmlFor={id}>
           {label}

src/components/form/form.stories.tsx

@@ -3,7 +3,7 @@ import React, { useState, ChangeEvent } from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Form } from './form';
 import { Label, LabelSizes } from '../typography/label';
-import { Stack, StackDirections, StackSpacings } from '../../layout/stack/stack';
+import { Stack, StackDirection, StackSpacing } from '../../layout/stack/stack';
 import { Input, InputTypes } from './form-input';
 import { TextButton, TextButtonColor, TextButtonDisplayMode, TextButtonSize } from '../buttons/text-button';
 import { IconCancel } from '../icons/icon-cancel';
@@ -34,7 +34,7 @@ export const ExampleForm: ComponentStory<typeof Form> = () => {
   };
   return (
     <div className="text-slate-700">
-      <Form handleSubmit={action('Handle form submit')} stackDir={StackDirections.col} stackSpacing={StackSpacings.s}>
+      <Form handleSubmit={action('Handle form submit')} stackDir={StackDirection.col} stackSpacing={StackSpacing.s}>
         <Label size={LabelSizes.xl}>Persönliche Einstellungen</Label>
         <Input
           errorMessage="Error-Message"
@@ -70,7 +70,7 @@ export const ExampleForm: ComponentStory<typeof Form> = () => {
           type={InputTypes.text}
           value={form.biography}
         />
-        <Stack direction={StackDirections.row} spacing={StackSpacings.xs}>
+        <Stack direction={StackDirection.row} spacing={StackSpacing.xs}>
           <TextButton
             color={TextButtonColor.slate}
             size={TextButtonSize.m}

src/components/form/form.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, FormHTMLAttributes, FormEvent } from 'react';
-import { Stack, StackDirections, StackSpacings } from '../../layout/stack/stack';
+import { Stack, StackDirection, StackSpacing } from '../../layout/stack/stack';
 
 export type FormProps = {
   /**
@@ -13,18 +13,18 @@ export type FormProps = {
   /**
    * Stack Direction to style the form
    */
-  stackDir?: StackDirections;
+  stackDir?: StackDirection;
   /**
    * Stack Spacings to define the spacings between the form items
    */
-  stackSpacing?: StackSpacings;
+  stackSpacing?: StackSpacing;
 } & FormHTMLAttributes<HTMLFormElement>;
 
 export const Form: FC<FormProps> = ({
   children,
   handleSubmit,
-  stackDir = StackDirections.col,
-  stackSpacing = StackSpacings.s,
+  stackDir = StackDirection.col,
+  stackSpacing = StackSpacing.s,
   ...args
 }) => {
   return (

src/components/profile-picture/no-profile-picture.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 export const NoProfilePicture: FC<{ [key: string]: unknown }> = () => (
   <svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">

src/components/user/recommendation/user-recommendation.tsx

@@ -5,7 +5,7 @@ import { TextButton, TextButtonColor, TextButtonDisplayMode, TextButtonSize } fr
 import { IconMumble } from '../../icons/icon-mumble';
 import { IconLink, IconLinkColor } from '../../links/icon-link/icon-link';
 import { IconProfile } from '../../icons/icon-profile';
-import { Stack, StackAlignItems, StackDirections, StackSpacings } from '../../../layout/stack/stack';
+import { Stack, StackAlignItems, StackDirection, StackSpacing } from '../../../layout/stack/stack';
 
 export type UserRecommendationProps = {
   /**
@@ -44,10 +44,10 @@ export const UserRecommendation: FC<UserRecommendationProps> = ({
 }) => {
   return (
     <div className="p-s bg-white rounded-2xl">
-      <Stack spacing={StackSpacings.s} direction={StackDirections.col} alignitems={StackAlignItems.center}>
+      <Stack spacing={StackSpacing.s} direction={StackDirection.col} alignItems={StackAlignItems.center}>
         <ProfilePicture size={ProfilePictureSize.l} src={src} alt={alt} />
 
-        <Stack spacing={StackSpacings.xs} direction={StackDirections.col} alignitems={StackAlignItems.center}>
+        <Stack spacing={StackSpacing.xs} direction={StackDirection.col} alignItems={StackAlignItems.center}>
           <Label size={LabelSizes.l}>{displayName}</Label>
           <IconLink color={IconLinkColor.violet} href={hrefProfile} icon={<IconProfile />} target="_self">
             {username}

src/components/user/short-representation/user-short-representation.tsx

@@ -8,7 +8,7 @@ import { ProfilePicture, ProfilePictureSize } from '../../profile-picture/profil
 import { Heading, HeadingSizes } from '../../typography/heading';
 import { Label, LabelSizes } from '../../typography/label';
 import { IconLocation } from '../../icons/icon-location';
-import { Stack, StackAlignItems, StackDirections, StackSpacings } from '../../../layout/stack/stack';
+import { Stack, StackAlignItems, StackDirection, StackSpacing } from '../../../layout/stack/stack';
 
 export enum UserShortRepresentationProfilePictureSize {
   s = 's',
@@ -145,13 +145,13 @@ export const UserShortRepresentation: FC<UserShortRepresentationProps> = ({
   };
 
   return (
-    <Stack spacing={StackSpacings.xs} alignitems={StackAlignItems.center}>
+    <Stack spacing={StackSpacing.xs} alignItems={StackAlignItems.center}>
       {profilePictureSize && src && alt && (
         <ProfilePicture size={profilePictureVariantStyles[profilePictureSize]} src={src} alt={alt} />
       )}
 
-      <Stack direction={StackDirections.col} spacing={StackSpacings.xs}>
-        <Stack spacing={StackSpacings.xs} alignitems={StackAlignItems.center}>
+      <Stack direction={StackDirection.col} spacing={StackSpacing.xs}>
+        <Stack spacing={StackSpacing.xs} alignItems={StackAlignItems.center}>
           {labelVariantStyles[labelType]}
 
           {showSettings && onSettingsClick && (
@@ -160,7 +160,7 @@ export const UserShortRepresentation: FC<UserShortRepresentationProps> = ({
             </span>
           )}
         </Stack>
-        <Stack spacing={StackSpacings.s}>
+        <Stack spacing={StackSpacing.s}>
           {username && hrefProfile && (
             <IconLink color={IconLinkColor.violet} href={hrefProfile} icon={<IconProfile />} target="_self">
               {username}

src/layout/navigation/navigation.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { mergeClassNames } from '../../helpers/merge-class-names';
-import { Stack, StackAlignItems, StackJustifyContent, StackSpacings } from '../stack/stack';
+import { Stack, StackAlignItems, StackJustifyContent, StackSpacing } from '../stack/stack';
 
 export type NavigationProps = {
   /**
@@ -12,7 +12,7 @@ export type NavigationProps = {
 export const Navigation: FC<NavigationProps> = ({ children }) => {
   return (
     <nav className={mergeClassNames(['bg-violet-600', 'p-0'])}>
-      <Stack spacing={StackSpacings.m} justifycontent={StackJustifyContent.center} alignitems={StackAlignItems.center}>
+      <Stack spacing={StackSpacing.m} justifyContent={StackJustifyContent.center} alignItems={StackAlignItems.center}>
         {children}
       </Stack>
     </nav>

src/layout/page-header/page-header.stories.tsx

@@ -10,7 +10,7 @@ import { LogoutButton } from '../../components/buttons/navi-buttons/logout-butto
 import { Modal, ModalType } from '../../components/modal/modal';
 import { Label, LabelSizes } from '../../components/typography/label';
 import { Form } from '../../components/form/form';
-import { Stack, StackDirections, StackSpacings } from '../stack/stack';
+import { Stack, StackDirection, StackSpacing } from '../stack/stack';
 import { Input, InputTypes } from '../../components/form/form-input';
 import { TextButton, TextButtonColor, TextButtonSize, TextButtonDisplayMode } from '../../components/buttons/text-button';
 import { IconCancel } from '../../components/icons/icon-cancel';
@@ -22,7 +22,6 @@ export default {
   component: PageHeader,
 } as ComponentMeta<typeof PageHeader>;
 
-// todo: Animation des MumbleWhiteHorizontal Logos
 export const Default: ComponentStory<typeof PageHeader> = () => {
   const [isOpenSettings, setIsOpenSettings] = useState(false);
   const [isOpenFileUpload, setIsOpenFileUpload] = useState(false);
@@ -64,7 +63,7 @@ export const Default: ComponentStory<typeof PageHeader> = () => {
         onClose={() => setIsOpenSettings(false)}
         title="Einstellungen"
       >
-        <Form handleSubmit={action('Handle form submit')} stackDir={StackDirections.col} stackSpacing={StackSpacings.s}>
+        <Form handleSubmit={action('Handle form submit')} stackDir={StackDirection.col} stackSpacing={StackSpacing.s}>
           <Label size={LabelSizes.xl}>Persönliche Einstellungen</Label>
           <Input
             errorMessage="Error-Message"
@@ -100,7 +99,7 @@ export const Default: ComponentStory<typeof PageHeader> = () => {
             type={InputTypes.text}
             value={form.biography}
           />
-          <Stack direction={StackDirections.row} spacing={StackSpacings.xs}>
+          <Stack direction={StackDirection.row} spacing={StackSpacing.xs}>
             <TextButton
               color={TextButtonColor.slate}
               displayMode={TextButtonDisplayMode.fullWidth}
@@ -129,13 +128,13 @@ export const Default: ComponentStory<typeof PageHeader> = () => {
         title="Bild hochladen"
         onClose={() => setIsOpenFileUpload(false)}
       >
-        <Form handleSubmit={action('Handle form submit')} stackDir={StackDirections.col} stackSpacing={StackSpacings.s}>
+        <Form handleSubmit={action('Handle form submit')} stackDir={StackDirection.col} stackSpacing={StackSpacing.s}>
           <Fileinput
             description="JPEG oder PNG, maximal 50 MB"
             onAddFile={(file) => action(file.name)}
             title="Datei hierhin ziehen"
           ></Fileinput>
-          <Stack direction={StackDirections.row} spacing={StackSpacings.xs}>
+          <Stack direction={StackDirection.row} spacing={StackSpacing.xs}>
             <TextButton
               color={TextButtonColor.slate}
               displayMode={TextButtonDisplayMode.fullWidth}

src/layout/page-header/page-header.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { mergeClassNames } from '../../helpers/merge-class-names';
-import { Stack, StackAlignItems, StackJustifyContent, StackSpacings } from '../stack/stack';
+import { Stack, StackAlignItems, StackJustifyContent, StackSpacing } from '../stack/stack';
 
 export type PageHeaderProps = {
   /**
@@ -15,7 +15,7 @@ export const PageHeader: FC<PageHeaderProps> = ({ children }) => {
 
   return (
     <header className={mergeClassNames(pageHeaderBaseStyle)}>
-      <Stack spacing={StackSpacings.none} alignitems={StackAlignItems.center} justifycontent={StackJustifyContent.center}>
+      <Stack spacing={StackSpacing.none} alignItems={StackAlignItems.center} justifyContent={StackJustifyContent.center}>
         {children}
       </Stack>
     </header>

src/layout/profile-header/profile-header.stories.tsx

@@ -8,7 +8,7 @@ import {
   UserShortRepresentation,
   UserShortRepresentationLabelType,
 } from '../../components/user/short-representation/user-short-representation';
-import { Stack, StackDirections, StackSpacings } from '../stack/stack';
+import { Stack, StackDirection, StackSpacing } from '../stack/stack';
 import { Paragraph, ParagraphSizes } from '../../components/typography/paragraph';
 
 export default {
@@ -24,7 +24,7 @@ export const LoggedIn: ComponentStory<typeof ProfileHeader> = () => {
 
   return (
     <ProfileHeader>
-      <Stack spacing={StackSpacings.s} direction={StackDirections.col}>
+      <Stack spacing={StackSpacing.s} direction={StackDirection.col}>
         <div className="relative w-max">
           <ProfileBanner
             alt="Robert Vogt"
@@ -82,7 +82,7 @@ export const Stranger: ComponentStory<typeof ProfileHeader> = () => {
 
   return (
     <ProfileHeader>
-      <Stack spacing={StackSpacings.s} direction={StackDirections.col}>
+      <Stack spacing={StackSpacing.s} direction={StackDirection.col}>
         <div className="relative">
           <ProfileBanner
             alt="Robert Vogt"
@@ -138,7 +138,7 @@ export const NewUser: ComponentStory<typeof ProfileHeader> = () => {
 
   return (
     <ProfileHeader>
-      <Stack spacing={StackSpacings.s} direction={StackDirections.col}>
+      <Stack spacing={StackSpacing.s} direction={StackDirection.col}>
         <div className="relative">
           <ProfileBanner canEdit={isNewUser} onEditClick={action('onEditProfileBannerClick')} />
 

src/layout/stack/stack.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-import { Stack, StackDirections, StackSpacings } from './stack';
+import { Stack, StackAlignItems, StackDirection, StackJustifyContent, StackSpacing } from './stack';
 
 export default {
   title: 'Layouts/Stack',
@@ -12,28 +12,31 @@ export default {
   },
   parameters: {
     backgrounds: { default: 'surface' },
-    layout: 'centered',
   },
 } as ComponentMeta<typeof Stack>;
 
 const Template: ComponentStory<typeof Stack> = (args) => (
   <Stack {...args}>
     <div className="flex items-center justify-center w-16 h-16 rounded-md bg-violet-600 text-white font-bold">A</div>
-    <div className="flex items-center justify-center w-16 h-16 rounded-md bg-violet-600 text-white font-bold">B</div>
-    <div className="flex items-center justify-center w-16 h-16 rounded-md bg-violet-600 text-white font-bold">C</div>
+    <div className="flex items-center justify-center w-16 h-24 rounded-md bg-violet-600 text-white font-bold">B</div>
+    <div className="flex items-center justify-center w-16 h-32 rounded-md bg-violet-600 text-white font-bold">C</div>
   </Stack>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-  direction: StackDirections.row,
-  spacing: StackSpacings.m,
+  alignItems: StackAlignItems.unset,
+  direction: StackDirection.row,
+  justifyContent: StackJustifyContent.flexstart,
+  spacing: StackSpacing.m,
   withDivider: false,
 };
 
 export const WithDivider = Template.bind({});
 WithDivider.args = {
-  direction: StackDirections.row,
-  spacing: StackSpacings.m,
+  alignItems: StackAlignItems.unset,
+  direction: StackDirection.row,
+  justifyContent: StackJustifyContent.flexstart,
+  spacing: StackSpacing.m,
   withDivider: true,
 };