Merge pull request #87 from Altalogy/launchpad/feature/83/a_box

feat(primitive): implement standard box

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

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import themes from '../../styles/themes'
+import Box from '.'
+
+describe('Box', () => {
+  it('should render box and children without crash', () => {
+    render(
+      <ThemeProvider theme={themes.light}>
+        <Box>
+          <p>box children</p>
+        </Box>
+      </ThemeProvider>,
+    )
+
+    const el = screen.getByText('box children')
+    expect(el).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,35 @@
+import { StyledBox } from './styles'
+
+import { BoxProps } from './types'
+
+/**
+ * A box with standardized border radius, padding etc.
+ *
+ * @prop {ReactNode} children - elements to render inside the box
+ * @prop {Gradient} gradient - optional gradient definition for box background
+ * @prop {boolean} border - whether to show box border or not
+ * @prop {CSSProperties} style - prop allowing to override all styles of the box
+ *
+ * @typedef Gradient
+ * @prop {string} start - color of gradient start
+ * @prop {string} end - color on gradient end
+ * @prop {number} rotation - gradient rotation in degress (45 by default)
+ */
+const Box = ({ children, gradient, border, style: inlineStyle }: BoxProps) => {
+  const style = {
+    border: border === false ? 'none' : undefined,
+    background:
+      gradient &&
+      `
+      linear-gradient(
+      ${gradient.rotation || 45}deg,
+      ${gradient.start} 0%,
+      ${gradient.end} 100%
+    )`,
+    ...inlineStyle,
+  }
+
+  return <StyledBox style={style}>{children}</StyledBox>
+}
+
+export default Box

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

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const StyledBox = styled.div`
+  color: ${({ theme }) => theme.primary};
+  background: ${({ theme }) => theme.background};
+  padding: ${({ theme }) => theme.spacing()};
+  margin: ${({ theme }) => theme.spacing()} 0;
+  border-radius: ${({ theme }) => theme.borderRadius()};
+  border: 1px solid ${({ theme }) => theme.borderColor};
+  min-width: 416px;
+  width: 416px;
+`

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

@@ -0,0 +1,14 @@
+import { ReactNode, CSSProperties } from 'react'
+
+type Gradient = {
+  start: string
+  end: string
+  rotation?: number
+}
+
+export type BoxProps = {
+  children: ReactNode
+  border?: boolean
+  style?: CSSProperties
+  gradient?: Gradient
+}

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

@@ -1,64 +1,65 @@
-import React from 'react'
 import { act, render, screen } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
 
 import themes from '../../styles/themes'
 import Select from './'
 
-test('renders label with select', async () => {
-  // given
-  const options = [
-    {
-      value: 'Test value',
-      key: 'test',
-      label: 'Test label',
-    },
-  ]
+describe('Select', () => {
+  it('should render label with select', async () => {
+    // given
+    const options = [
+      {
+        value: 'Test value',
+        key: 'test',
+        label: 'Test label',
+      },
+    ]
 
-  // when
-  await act(async () => {
-    render(
-      <ThemeProvider theme={themes.light}>
-        <Select
-          label='Test select label'
-          value={options[0]}
-          options={options}
-          onChange={() => null}
-        />
-      </ThemeProvider>,
-    )
+    // when
+    await act(async () => {
+      render(
+        <ThemeProvider theme={themes.light}>
+          <Select
+            label='Test select label'
+            value={options[0]}
+            options={options}
+            onChange={() => null}
+          />
+        </ThemeProvider>,
+      )
+    })
+
+    // then
+    const label = screen.getByText(/Test select label/i)
+    expect(label).toBeInTheDocument()
   })
 
-  // then
-  const label = screen.getByText(/Test select label/i)
-  expect(label).toBeInTheDocument()
-})
+  it('should render selected option', async () => {
+    // given
+    const options = [
+      {
+        value: 'Test value',
+        key: 'test',
+        label: 'Test label',
+      },
+    ]
 
-test('render selected option', async () => {
-  // given
-  const options = [
-    {
-      value: 'Test value',
-      key: 'test',
-      label: 'Test label',
-    },
-  ]
+    // when
+    await act(async () => {
+      render(
+        <ThemeProvider theme={themes.light}>
+          <Select
+            label='Test select label'
+            value={options[0]}
+            options={options}
+            onChange={() => null}
+          />
+        </ThemeProvider>,
+      )
+    })
 
-  // when
-  await act(async () => {
-    render(
-      <ThemeProvider theme={themes.light}>
-        <Select
-          label='Test select label'
-          value={options[0]}
-          options={options}
-          onChange={() => null}
-        />
-      </ThemeProvider>,
-    )
+    // then
+    const label = screen.getByText(/Test label/i)
+    expect(label).toBeInTheDocument()
   })
-
-  // then
-  const label = screen.getByText(/Test label/i)
-  expect(label).toBeInTheDocument()
 })

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

@@ -19,11 +19,8 @@ const Text = ({ type = 'defaultMedium', color, children }: TextProps) => {
     color: color,
     ...styles.typography[type],
   }
-  return (
-    <>
-      <StyledText style={textStyles}>{children}</StyledText>
-    </>
-  )
+
+  return <StyledText style={textStyles}>{children}</StyledText>
 }
 
 export default Text

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

@@ -1,3 +1,5 @@
 import styled from 'styled-components'
 
-export const StyledText = styled.p``
+export const StyledText = styled.p`
+  color: ${({ theme }) => theme.primary};
+`

applications/launchpad_v2/src/containers/BaseNodeContainer/index.tsx

@@ -1,7 +1,10 @@
 import { useEffect, useState } from 'react'
 import { invoke } from '@tauri-apps/api/tauri'
+import { useTheme } from 'styled-components'
 
 import Select from '../../components/Select'
+import Text from '../../components/Text'
+import Box from '../../components/Box'
 
 const networks = ['mainnet', 'testnet']
 const networkOptions = networks.map(network => ({
@@ -16,6 +19,7 @@ const networkOptions = networks.map(network => ({
 const BaseNodeContainer = () => {
   const [images, setImages] = useState<string[]>([])
   const [tariNetwork, setTariNetwork] = useState(networkOptions[0])
+  const theme = useTheme()
 
   useEffect(() => {
     const getFromBackend = async () => {
@@ -27,38 +31,46 @@ const BaseNodeContainer = () => {
   }, [])
 
   return (
-    <div>
-      <h2>Base Node</h2>
-      <div style={{ padding: '16px' }}>
-        <Select
-          value={tariNetwork}
-          options={networkOptions}
-          onChange={setTariNetwork}
-          label='Tari network'
-        />
-      </div>
+    <>
+      <Box
+        border={false}
+        gradient={{ start: theme.actionBackground, end: theme.accent }}
+      >
+        <Text>no border</Text>
+      </Box>
+      <Box>
+        <Text type='header'>Base Node</Text>
+        <div style={{ padding: '16px' }}>
+          <Select
+            value={tariNetwork}
+            options={networkOptions}
+            onChange={setTariNetwork}
+            label='Tari network'
+          />
+        </div>
 
-      <div style={{ backgroundColor: '#662FA1', padding: '16px' }}>
-        <Select
-          value={tariNetwork}
-          options={networkOptions}
-          onChange={setTariNetwork}
-          label='Tari network'
-          inverted
-        />
-      </div>
+        <div style={{ backgroundColor: '#662FA1', padding: '16px' }}>
+          <Select
+            value={tariNetwork}
+            options={networkOptions}
+            onChange={setTariNetwork}
+            label='Tari network'
+            inverted
+          />
+        </div>
 
-      <p>
-        available docker images:
-        <br />
-        {images.map(img => (
-          <em key={img}>
-            {img}
-            {', '}
-          </em>
-        ))}
-      </p>
-    </div>
+        <p>
+          available docker images:
+          <br />
+          {images.map(img => (
+            <em key={img}>
+              {img}
+              {', '}
+            </em>
+          ))}
+        </p>
+      </Box>
+    </>
   )
 }
 

applications/launchpad_v2/src/custom.d.ts

@@ -1,7 +1,46 @@
+import 'styled-components'
+
 declare module '*.svg' {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const content: any
   export default content
 }
 
 declare module '*.otf'
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    spacing: (count?: number) => string
+    spacingHorizontal: (count?: number) => string
+    spacingVertical: (count?: number) => string
+    borderRadius: (count?: number) => string
+    primary: string
+    secondary: string
+    background: string
+    backgroundSecondary: string
+    backgroundImage: string
+    accent: string
+    accentDark: string
+    disabledText: string
+    tariGradient: string
+    borderColor: string
+    actionBackground: string
+
+    titleBar: string
+
+    controlBackground: string
+
+    inverted: {
+      controlBackground: string
+      primary: string
+      secondary: string
+      background: string
+      backgroundSecondary: string
+      backgroundImage: string
+      accent: string
+      accentDark: string
+      disabledText: string
+      tariGradient: string
+    }
+  }
+}

applications/launchpad_v2/src/styles/styles/colors.ts

@@ -1,7 +1,3 @@
-/**
- * Color palette
- */
-
 const colors = {
   dark: {
     primary: '#20053D',
@@ -36,6 +32,7 @@ const colors = {
     infoText: '#4D6FE8',
     warning: '#FFEED3',
     warningText: '#D18A18',
+    actionBackground: '#76A59D',
   },
   darkMode: {
     modalBackground: '#141414',