Merge pull request #77 from Altalogy/launchpad/feature/text-component

feat(primitive): add text component

applications/launchpad_v2/src/App.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { act, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { randomFillSync } from 'crypto'
-import { mockIPC, clearMocks } from '@tauri-apps/api/mocks'
+import { clearMocks } from '@tauri-apps/api/mocks'
 import { ThemeProvider } from 'styled-components'
 
 import App from './App'

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

@@ -0,0 +1,33 @@
+import { StyledText } from './styles' 
+import { TextProps } from './types'
+import styles from '../../styles/styles'
+
+/**
+ * @name Text
+ * 
+ * @typedef TextProps
+ * @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 
+ * 
+ * @example
+ * <Text type='defaultMedium' color={styles.colors.dark.primary}>...text goes here...</Text>
+ */
+
+const Text = ({
+  type = 'defaultMedium',
+  color,
+  children,
+}: TextProps) => {
+  const textStyles = {
+    color: color,
+    ...styles.typography[type]
+  }
+  return (
+    <>
+      <StyledText style={textStyles}>{children}</StyledText>
+    </>
+  )
+}
+
+export default Text

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

@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const StyledText = styled.p``

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react'
+
+/**
+ * @typedef TextProps
+ * @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
+ */
+
+export interface TextProps {
+  type?:
+    | 'header'
+    | 'subheader'
+    | 'defaultHeavy'
+    | 'defaultMedium'
+    | 'defaultUnder'
+    | 'smallHeavy'
+    | 'smallMedium'
+    | 'smallUnder'
+    | 'microHeavy'
+    | 'microRegular'
+    | 'microOblique'
+  children: ReactNode
+  color?: string
+}
+
+

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

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { Provider } from 'react-redux'
 import { randomFillSync } from 'crypto'
 import { mockIPC, clearMocks } from '@tauri-apps/api/mocks'

applications/launchpad_v2/src/custom.d.ts

@@ -2,4 +2,6 @@ declare module '*.svg' {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const content: any
   export default content
-}
+}
+
+declare module '*.otf'

applications/launchpad_v2/src/styles/App.css

@@ -20,3 +20,18 @@ div#root {
   overflow: hidden;
   background: transparent;
 }
+
+@font-face {
+  src: url('../assets/fonts/AvenirLTStd-Book.otf');
+  font-family: 'AvenirRegular'
+}
+
+@font-face {
+  src: url('../assets/fonts/AvenirLTStd-Medium.otf');
+  font-family: 'AvenirMedium'
+}
+
+@font-face {
+  src: url('../assets/fonts/AvenirLTStd-Heavy.otf');
+  font-family: 'AvenirHeavy'
+}

applications/launchpad_v2/src/styles/styles/index.ts

@@ -1,6 +1,6 @@
 import colors from './colors'
 import gradients from './gradients'
-import typography from '../typography'
+import typography from './typography'
 
 const styles = {
   colors,