Merge pull request #92 from Altalogy/launchpad/feature/7/base_node

feat: base node tab

applications/launchpad_v2/.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
   plugins: ['react', '@typescript-eslint', 'prettier'],
   rules: {
     'prettier/prettier': 'error',
-    indent: ['error', 2, { SwitchCase: 1 }],
+    indent: ['warn', 2, { SwitchCase: 1 }],
     'linebreak-style': ['error', 'unix'],
     'no-console': 1,
     quotes: ['error', 'single'],

applications/launchpad_v2/src/components/Button/index.tsx

@@ -1,11 +1,9 @@
-import { useContext } from 'react'
-import { CSSProperties, ThemeContext } from 'styled-components'
-
 import { ButtonText, IconWrapper, StyledButton, StyledLink } from './styles'
 import { ButtonProps } from './types'
 
 const Button = ({
   children,
+  disabled,
   style,
   variant,
   type = 'button',
@@ -14,29 +12,6 @@ const Button = ({
   rightIcon,
   onClick,
 }: ButtonProps) => {
-  const theme = useContext(ThemeContext)
-
-  let baseStyle: CSSProperties = {}
-
-  switch (variant) {
-    case 'text':
-      baseStyle = {
-        background: 'transparent',
-        color: theme.secondary,
-      }
-      break
-    default:
-      baseStyle = {
-        background: theme.tariGradient,
-        color: theme.primary,
-      }
-      break
-  }
-
-  if (style) {
-    baseStyle = { ...baseStyle, ...style }
-  }
-
   const btnContent = (
     <>
       {leftIcon ? <IconWrapper>{leftIcon}</IconWrapper> : null}
@@ -47,21 +22,19 @@ const Button = ({
 
   if (type === 'link' || href) {
     return (
-      <StyledLink
-        href={href}
-        onClick={() => onClick && onClick()}
-        style={baseStyle}
-      >
+      <StyledLink href={href} onClick={onClick} style={style} variant={variant}>
         {btnContent}
       </StyledLink>
     )
   }
 
   return (
     <StyledButton
+      disabled={disabled}
       type={type}
-      onClick={() => onClick && onClick()}
-      style={baseStyle}
+      onClick={onClick}
+      style={style}
+      variant={variant}
     >
       {btnContent}
     </StyledButton>

applications/launchpad_v2/src/components/Button/styles.ts

@@ -1,13 +1,80 @@
 import styled from 'styled-components'
 
-export const StyledButton = styled.button`
-  border-radius: 8px;
+import { ButtonProps } from './types'
+
+export const StyledButton = styled.button<
+  Pick<ButtonProps, 'variant' | 'type'>
+>`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  border-radius: ${({ theme }) => theme.tightBorderRadius()};
+  border: ${({ theme, variant, type }) => {
+    if (variant === 'text') {
+      return 'none'
+    }
+
+    if (type === 'reset') {
+      return '1px solid transparent'
+    }
+
+    return `1px solid ${theme.accent}`
+  }};
   box-shadow: none;
-  border-width: 0;
+  padding: ${({ theme }) => theme.spacingVertical()}
+    ${({ theme }) => theme.spacingHorizontal()};
+  cursor: pointer;
+  background: ${({ variant, type, theme }) => {
+    if (type === 'reset') {
+      return theme.resetBackground
+    }
+
+    return variant === 'text' ? 'transparent' : theme.tariGradient
+  }};
+  color: ${({ variant, theme }) =>
+    variant === 'text' ? theme.secondary : theme.primary};
+  outline: none;
+
+  & * {
+    color: inherit;
+  }
+
+  &:hover {
+    background: ${({ variant, theme, type }) => {
+      if (variant === 'text') {
+        return 'auto'
+      }
+
+      if (type === 'reset') {
+        return theme.resetBackgroundDark
+      }
+
+      return theme.accent
+    }};
+  }
 `
 
-export const StyledLink = styled.a``
+export const StyledLink = styled.a<Pick<ButtonProps, 'variant'>>`
+  background: ${({ variant, theme }) =>
+    variant === 'text' ? 'transparent' : theme.tariGradient};
+  color: ${({ variant, theme }) =>
+    variant === 'text' ? theme.secondary : theme.primary};
+`
 
 export const ButtonText = styled.span``
 
-export const IconWrapper = styled.span``
+export const IconWrapper = styled.span`
+  color: inherit;
+  width: 0;
+  height: 1em;
+  position: relative;
+  & > * {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    width: ${({ theme }) => theme.spacing(0.66)};
+    height: ${({ theme }) => theme.spacing(0.66)};
+    transform: translateY(-50%);
+    color: inherit;
+  }
+`

applications/launchpad_v2/src/components/Button/types.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react'
-import { CSSProperties } from 'styled-components'
+import { ReactNode, CSSProperties } from 'react'
 
 export type ButtonVariantType = 'primary' | 'text'
 
 export interface ButtonProps {
+  disabled?: boolean
   children?: ReactNode
   style?: CSSProperties
   type?: 'link' | 'button' | 'submit' | 'reset'

applications/launchpad_v2/src/components/Loading/index.tsx

@@ -0,0 +1,20 @@
+import LoadingIcon from '../../styles/Icons/Loading'
+
+import { StyledSpan } from './styles'
+
+/**
+ * Loading
+ * renders a spinning loading indicator
+ *
+ * @prop {boolean} loading - controls whether the indicator should be shown or not
+ * @prop {string} [testId] - optional testId to assign for testing purposes
+ */
+
+const Loading = ({ loading, testId }: { loading?: boolean; testId?: string }) =>
+  loading ? (
+    <StyledSpan data-testid={testId || 'loading-indicator'}>
+      <LoadingIcon />
+    </StyledSpan>
+  ) : null
+
+export default Loading

applications/launchpad_v2/src/components/Loading/styles.ts

@@ -0,0 +1,14 @@
+import styled, { keyframes } from 'styled-components'
+
+const spinKeyframes = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+export const StyledSpan = styled.span`
+  animation: ${spinKeyframes} infinite 2s linear;
+`

applications/launchpad_v2/src/components/Loading/test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import themes from '../../styles/themes'
+import Loading from '.'
+
+describe('Loading', () => {
+  it('should render loading indicator when loading=true', () => {
+    const testId = 'loading=true'
+    render(
+      <ThemeProvider theme={themes.light}>
+        <Loading loading={true} testId={testId} />
+      </ThemeProvider>,
+    )
+
+    const el = screen.getByTestId(testId)
+    expect(el).toBeInTheDocument()
+  })
+
+  it('should NOT render loading indicator when loading=false', () => {
+    const testId = 'loading=false'
+    render(
+      <ThemeProvider theme={themes.light}>
+        <Loading loading={false} testId={testId} />
+      </ThemeProvider>,
+    )
+
+    const el = screen.queryByTestId(testId)
+    expect(el).not.toBeInTheDocument()
+  })
+})

applications/launchpad_v2/src/components/Select/index.tsx

@@ -4,6 +4,7 @@ import { Listbox } from '@headlessui/react'
 import ArrowBottom from '../../styles/Icons/ArrowBottom1'
 
 import {
+  StyledListbox,
   Label,
   SelectButton,
   SelectorIcon,
@@ -22,23 +23,33 @@ import { SelectProps } from './types'
  * @prop {Option[]} options - options shown in the select dropdown
  * @prop {Option} value - selected value
  * @prop {function} onChange - called when selected value changes
+ * @prop {boolean?} disabled - disables the the control
  *
  * @typedef Option
  * @prop {string} value - value of the option
  * @prop {string} label - label shown in option
  * @prop {string} key - key to be used in react map
  */
-const Select = ({ value, options, onChange, inverted, label }: SelectProps) => {
+const Select = ({
+  value,
+  options,
+  onChange,
+  inverted,
+  label,
+  disabled,
+}: SelectProps) => {
   return (
-    <Listbox value={value} onChange={onChange}>
+    <StyledListbox value={value} onChange={onChange} disabled={disabled}>
       {({ open }) => (
         <>
           <Label inverted={inverted}>{label}</Label>
-          <SelectButton open={open} inverted={inverted}>
+          <SelectButton open={open} inverted={inverted} disabled={disabled}>
             <span>{(value || {}).label || ''}</span>
-            <SelectorIcon inverted={inverted}>
-              <ArrowBottom />
-            </SelectorIcon>
+            {!disabled && (
+              <SelectorIcon inverted={inverted}>
+                <ArrowBottom />
+              </SelectorIcon>
+            )}
           </SelectButton>
           <OptionsContainer inverted={inverted}>
             {options.map(option => (
@@ -57,7 +68,7 @@ const Select = ({ value, options, onChange, inverted, label }: SelectProps) => {
           </OptionsContainer>
         </>
       )}
-    </Listbox>
+    </StyledListbox>
   )
 }
 

applications/launchpad_v2/src/components/Select/styles.tsx

@@ -3,6 +3,8 @@ import { Listbox } from '@headlessui/react'
 
 import { SelectInternalProps } from './types'
 
+export const StyledListbox = styled(Listbox)``
+
 export const SelectorIcon = styled.div<SelectInternalProps>`
   position: absolute;
   top: 0;
@@ -17,6 +19,7 @@ export const SelectorIcon = styled.div<SelectInternalProps>`
 `
 
 export const SelectButton = styled(Listbox.Button)<SelectInternalProps>`
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
   color: ${({ theme, inverted }) =>
     inverted ? theme.inverted.primary : theme.primary};
@@ -33,7 +36,7 @@ export const SelectButton = styled(Listbox.Button)<SelectInternalProps>`
   outline: none;
   border: none;
   border: 1px solid;
-  border-radius: ${({ theme }) => theme.borderRadius()};
+  border-radius: ${({ theme }) => theme.tightBorderRadius()};
   border-color: ${({ theme, inverted, open }) =>
     open
       ? inverted
@@ -51,7 +54,7 @@ const FloatingOptions = styled.ul<SelectInternalProps>`
   padding: 0;
   width: 100%;
   border: 1px solid;
-  border-radius: ${({ theme }) => theme.borderRadius()};
+  border-radius: ${({ theme }) => theme.tightBorderRadius()};
   border-color: ${({ theme, open }) =>
     open ? theme.accent : theme.borderColor};
   background-color: ${({ theme }) => theme.background};
@@ -92,7 +95,7 @@ export const Option = styled.li<
   }
 `
 
-export const Label = styled(Listbox.Label)`
+export const Label = styled(Listbox.Label)<SelectInternalProps>`
   font-size: 1em;
   display: inline-block;
   margin-bottom: ${({ theme }) => theme.spacingVertical()};

applications/launchpad_v2/src/components/Select/types.ts

@@ -1,16 +1,18 @@
 import { ReactNode } from 'react'
 
 export type SelectInternalProps = {
+  disabled?: boolean
   inverted?: boolean
   children?: ReactNode
   open?: boolean
 }
 
 type Option = { value: string; label: string; key: string }
 export type SelectProps = {
+  disabled?: boolean
   inverted?: boolean
   label: string
-  value: Option
+  value?: Option
   options: Option[]
   onChange: (option: Option) => void
 }

applications/launchpad_v2/src/components/Tag/index.tsx

@@ -12,7 +12,7 @@ import { TagContainer, IconWrapper } from './styles'
  *
  * @prop {ReactNode} [children] - text content to display
  * @prop {CSSProperties} [style] - optional component styles
- * @prop {'blue' | 'running' | 'warning' | 'expert'} [type] - tag types to determine color settings
+ * @prop {'info' | 'running' | 'warning' | 'expert'} [type] - tag types to determine color settings
  * @prop {ReactNode} [icon] - optional SVG icon
  * @prop {ReactNode} [subText] - optional additional tag text
  *

applications/launchpad_v2/src/components/Text/index.tsx

@@ -1,6 +1,7 @@
+import styles from '../../styles/styles'
+
 import { StyledText } from './styles'
 import { TextProps } from './types'
-import styles from '../../styles/styles'
 
 /**
  * @name Text
@@ -9,6 +10,7 @@ import styles from '../../styles/styles'
  * @prop {'header' | 'subheader' | 'defaultHeavy' | 'defaultMedium' | 'defaultUnder' | 'smallHeavy' | 'smallMedium' | 'smallUnder' | 'microHeavy' | 'microRegular'  | 'microOblique' } type - text styles
  * @prop {ReactNode} children - text content to display
  * @prop {string} [color] - font color
+ * @prop {CSSProperties} [style] - styles that will override default styling
  *
  * @example
  * <Text type='defaultMedium' color={styles.colors.dark.primary}>...text goes here...</Text>
@@ -26,6 +28,7 @@ const Text = ({
     color,
     ...style,
     ...styles.typography[type],
+    ...style,
   }
 
   return (