feat: button, spinner, icon

interlay · Feb 29, 2024 · efa0621 · efa0621
1 parent 81e6afc
commit efa0621
Show file tree

Hide file tree

Showing 26 changed files with 401 additions and 145 deletions.
diff --git a/packages/components/src/Button/Button.stories.tsx b/packages/components/src/Button/Button.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { XMark } from '@interlay/icons';
 
 import { Button, ButtonProps } from '.';
 
@@ -15,7 +16,15 @@ export default {
 
 export const Solid: StoryObj<ButtonProps> = {
   args: {
-    variant: 'solid'
+    variant: 'solid',
+    loading: true
+  }
+};
+
+export const Icon: StoryObj<ButtonProps> = {
+  args: {
+    isIconOnly: true,
+    children: <XMark />
   }
 };
 

diff --git a/packages/components/src/Button/Button.style.tsx b/packages/components/src/Button/Button.style.tsx
@@ -8,6 +8,7 @@ type StyledButtonProps = {
   $color: ButtonColors;
   $variant: ButtonVariants;
   $isFocusVisible?: boolean;
+  $isIconOnly?: boolean;
 };
 
 const StyledButton = styled.button<StyledButtonProps>`
@@ -23,14 +24,20 @@ const StyledButton = styled.button<StyledButtonProps>`
   appearance: none;
   user-select: none;
 
-  ${({ theme, $size, $variant, $color, $isFocusVisible }) => {
+  ${({ theme, $size, $variant, $color, $isFocusVisible, $isIconOnly }) => {
     const { active, disabled, hover, focus, focusVisible } = theme.button.variant[$variant].color[$color];
 
     return css`
       ${theme.button.base}
       ${theme.button.size[$size]}
       ${theme.button.variant[$variant].color[$color].base}
       ${$isFocusVisible && focusVisible}
+      ${$isIconOnly &&
+      css`
+        padding: 0;
+        width: ${theme.button.size[$size].height};
+      `}
+      
 
       &:hover:not([disabled]) {
         ${hover}

diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
@@ -4,23 +4,41 @@ import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import { PressEvent } from '@react-types/shared';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
-import { ButtonVariants, ButtonSizes, ButtonColors } from '@interlay/themev2';
+import { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/themev2';
+
+import { Flex } from '../Flex';
+import { Spinner } from '../Spinner';
 
 import { StyledButton } from './Button.style';
 
-// const loadingSizes: Record<ButtonSizes, IconSize> = {
-//   'x-small': 'xs',
-//   small: 'xs',
-//   medium: 's',
-//   large: 's'
-// };
+const spinnerSizeMap: Record<ButtonSizes, SpinnerSizes> = {
+  s: 's',
+  md: 's',
+  lg: 'md',
+  xl: 'md',
+  '2xl': 'lg'
+};
+
+const spinnerColorMap: Record<ButtonColors, Record<ButtonVariants, SpinnerColors>> = {
+  default: {
+    ghost: 'default',
+    outline: 'default',
+    solid: 'default'
+  },
+  primary: {
+    ghost: 'primary',
+    outline: 'primary',
+    solid: 'default'
+  }
+};
 
 type Props = {
   variant?: ButtonVariants;
   fullWidth?: boolean;
   size?: ButtonSizes;
   color?: ButtonColors;
   loading?: boolean;
+  isIconOnly?: boolean;
   onPress?: (e: PressEvent) => void;
 };
 
@@ -38,6 +56,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       size = 'md',
       color = 'default',
       fullWidth,
+      isIconOnly,
       onPress,
       onClick,
       ...props
@@ -57,22 +76,18 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         $color={color}
         $fullWidth={fullWidth}
         $isFocusVisible={isFocusVisible}
+        $isIconOnly={isIconOnly}
         $size={size}
         $variant={variant}
         disabled={isDisabled}
         {...mergeProps(props, buttonProps, focusProps, { onClick })}
       >
-        {/* {loading && (
-          <LoadingWrapper>
-            <StyledSpinner
-              $variant={variant}
-              aria-label='Loading...'
-              size={loadingSizes[size]}
-              thickness={size === 'large' ? 3 : 2}
-            />
-          </LoadingWrapper>
-        )} */}
-        {children}
+        {loading && (
+          <Flex elementType='span' marginRight={isIconOnly ? undefined : 'spacing2'}>
+            <Spinner aria-label='Loading...' color={spinnerColorMap[color][variant]} size={spinnerSizeMap[size]} />
+          </Flex>
+        )}
+        {isIconOnly ? (loading ? undefined : children) : children}
       </StyledButton>
     );
   }

diff --git a/packages/components/src/Spinner/Spinner.stories.tsx b/packages/components/src/Spinner/Spinner.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { SpinnerSizes } from '@interlay/themev2';
 
 import { Spinner, SpinnerProps } from '.';
 
@@ -8,6 +9,9 @@ export default {
   parameters: {
     layout: 'centered'
   },
+  argTypes: {
+    size: { control: 'radio', options: ['xs', 's', 'md', 'lg', 'xl', '2xl', '3xl'] as SpinnerSizes[] }
+  },
   decorators: [
     (Story) => (
       <div style={{ display: 'flex' }}>
@@ -17,4 +21,4 @@ export default {
   ]
 } as Meta;
 
-export const Default: StoryObj<SpinnerProps> = {};
+export const Default: StoryObj<SpinnerProps> = { args: {} };
diff --git a/packages/components/src/Spinner/Spinner.style.tsx b/packages/components/src/Spinner/Spinner.style.tsx
@@ -1,27 +1,30 @@
-import styled from 'styled-components';
-import { IconSize, theme } from '@interlay/theme';
-import { CTAVariants } from '@interlay/theme';
+import { SpinnerColors, SpinnerSizes } from '@interlay/themev2';
+import styled, { css } from 'styled-components';
 
 interface StyledSpinnerProps {
-  $size: IconSize | string;
+  $size: SpinnerSizes | string;
   $thickness: number;
-  $color: CTAVariants;
+  $color: SpinnerColors;
 }
 
 const StyledSpinner = styled.span<StyledSpinnerProps>`
   display: inline-flex;
-  width: ${({ $size }) => theme.spinner.sizes?.[$size as IconSize] || `${$size}px`};
-  height: ${({ $size }) => theme.spinner.sizes?.[$size as IconSize] || `${$size}px`};
   position: relative;
   text-indent: -9999em;
   border-style: solid;
   border-width: ${(props) => props.$thickness}px;
   border-radius: 100%;
-  border-color: ${({ $color }) =>
-    `${theme.spinner[$color].color} ${theme.spinner[$color].bg} ${theme.spinner[$color].bg}`};
   transform: translateZ(0);
   animation: loadIndeterminate 1.1s infinite linear;
 
+  ${({ theme, $size, $color }) => {
+    return css`
+      width: ${theme.spinner.size[$size as SpinnerSizes]?.width || `${$size}px`};
+      height: ${theme.spinner.size[$size as SpinnerSizes]?.height || `${$size}px`};
+      ${theme.spinner.color[$color]}
+    `;
+  }}
+
   @-webkit-keyframes loadIndeterminate {
     0% {
       transform: rotate(0deg);
@@ -41,5 +44,5 @@ const StyledSpinner = styled.span<StyledSpinnerProps>`
   }
 `;
 
-export type { StyledSpinnerProps };
 export { StyledSpinner };
+export type { StyledSpinnerProps };
diff --git a/packages/components/src/Spinner/Spinner.tsx b/packages/components/src/Spinner/Spinner.tsx
@@ -1,20 +1,36 @@
 import { HTMLAttributes } from 'react';
-import { CTAVariants, IconSize } from '@interlay/theme';
+import { SpinnerColors, SpinnerSizes } from '@interlay/themev2';
 
 import { StyledSpinner } from './Spinner.style';
 
+const thicknessMap: Record<SpinnerSizes, number> = {
+  xs: 3,
+  s: 3,
+  md: 3,
+  lg: 4.5,
+  xl: 5,
+  '2xl': 6,
+  '3xl': 7
+};
+
 type Props = {
   thickness?: number;
-  color?: CTAVariants;
-  size?: IconSize | string;
+  color?: SpinnerColors;
+  size?: SpinnerSizes | string;
 };
 
 type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
 
 type SpinnerProps = Props & NativeAttrs;
 
-const Spinner = ({ size = 'md', thickness = 4, color = 'primary', ...props }: SpinnerProps): JSX.Element => (
-  <StyledSpinner {...props} $color={color} $size={size} $thickness={thickness} role='progressbar' />
+const Spinner = ({ size = 'md', thickness, color = 'default', ...props }: SpinnerProps): JSX.Element => (
+  <StyledSpinner
+    {...props}
+    $color={color}
+    $size={size}
+    $thickness={thickness || thicknessMap[size as SpinnerSizes] || 4}
+    role='progressbar'
+  />
 );
 
 export { Spinner };

diff --git a/packages/core/themeV2/src/components/button.ts b/packages/core/themeV2/src/components/button.ts
@@ -1,16 +1,16 @@
-import { Styles } from 'styled-components/dist/types';
+import { StyledObject } from 'styled-components/dist/types';
 
 type ButtonSizes = 's' | 'md' | 'lg' | 'xl' | '2xl';
 
 type ButtonColors = 'default' | 'primary';
 
 type ButtonColorsParams = {
-  base: Styles<object>;
-  hover: Styles<object>;
-  active: Styles<object>;
-  focus?: Styles<object>;
-  focusVisible?: Styles<object>;
-  disabled: Styles<object>;
+  base: StyledObject<object>;
+  hover: StyledObject<object>;
+  active: StyledObject<object>;
+  focus?: StyledObject<object>;
+  focusVisible?: StyledObject<object>;
+  disabled: StyledObject<object>;
 };
 
 type ButtonVariantParams = {
@@ -20,8 +20,8 @@ type ButtonVariantParams = {
 type ButtonVariants = 'solid' | 'outline' | 'ghost';
 
 type ButtonTheme = {
-  base: Styles<object>;
-  size: Record<ButtonSizes, Styles<object>>;
+  base: StyledObject<object>;
+  size: Record<ButtonSizes, StyledObject<object>>;
   variant: Record<ButtonVariants, ButtonVariantParams>;
 };
 

diff --git a/packages/core/themeV2/src/components/index.ts b/packages/core/themeV2/src/components/index.ts
@@ -9,3 +9,4 @@ export * from './drawer';
 export * from './list';
 export * from './radio';
 export * from './switch';
+export * from './spinner';
diff --git a/packages/core/themeV2/src/components/input.ts b/packages/core/themeV2/src/components/input.ts
@@ -1,34 +1,14 @@
-import { FontSize, Rounded } from '../core';
+import { StyledObject } from 'styled-components';
 
 type InputSizes = 's' | 'md' | 'lg';
 
-type InputSizeParams = {
-  text: FontSize;
-};
-
-// TODO: missing paddings
 type InputTheme = {
-  color: string;
-  bg: string;
-  rounded: Rounded;
-  placeholder: string;
-  hover: {
-    border: string;
-  };
-  focus: {
-    border: string;
-    boxShadow: string;
-  };
-  error: {
-    color: string;
-    border: string;
-  };
-  disabled: {
-    color: string;
-    bg: string;
-    border: string;
-  };
-  size: Record<InputSizes, InputSizeParams>;
+  base: StyledObject<object>;
+  hover: StyledObject<object>;
+  focus: StyledObject<object>;
+  error: StyledObject<object>;
+  disabled: StyledObject<object>;
+  size: Record<InputSizes, StyledObject<object>>;
 };
 
-export type { InputTheme, InputSizes };
+export type { InputSizes, InputTheme };
diff --git a/packages/core/themeV2/src/components/spinner.ts b/packages/core/themeV2/src/components/spinner.ts
@@ -0,0 +1,14 @@
+import { StyledObject } from 'styled-components/dist/types';
+
+type SpinnerSizes = 'xs' | 's' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
+type SpinnerColors = 'default' | 'primary';
+
+type SpinnerColorsParams = StyledObject<object>;
+
+type SpinnerTheme = {
+  size: Record<SpinnerSizes, StyledObject<object>>;
+  color: Record<SpinnerColors, SpinnerColorsParams>;
+};
+
+export type { SpinnerColors, SpinnerSizes, SpinnerTheme };
diff --git a/packages/core/themeV2/src/core/colors.ts b/packages/core/themeV2/src/core/colors.ts
@@ -1,6 +1,6 @@
 type ColorHue = keyof Colors;
 
-type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type ColorShade = 50 | 75 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
 type Colors = {
   light: string;
@@ -12,4 +12,15 @@ type Colors = {
   // error: Color;
 };
 
+const color =
+  (colors: Colors) =>
+  (hue: ColorHue, shade: ColorShade = 500) => {
+    if (hue === 'light' || hue === 'dark') {
+      return colors[hue];
+    }
+
+    return colors[hue][shade];
+  };
+
+export { color };
 export type { Colors, ColorHue, ColorShade };