From 5383699b4ba4abe4694019f1fe36bb13debf6155 Mon Sep 17 00:00:00 2001 From: Cormac Quaid <69508715+corquaid@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:31:35 +0200 Subject: [PATCH 1/5] feat(primitive): add text component refer issue #74 --- .../src/components/Text/index.tsx | 55 +++++++++++++++++++ .../launchpad_v2/src/components/Text/types.ts | 27 +++++++++ 2 files changed, 82 insertions(+) create mode 100644 applications/launchpad_v2/src/components/Text/index.tsx create mode 100644 applications/launchpad_v2/src/components/Text/types.ts diff --git a/applications/launchpad_v2/src/components/Text/index.tsx b/applications/launchpad_v2/src/components/Text/index.tsx new file mode 100644 index 0000000000..946e1d3578 --- /dev/null +++ b/applications/launchpad_v2/src/components/Text/index.tsx @@ -0,0 +1,55 @@ +import { createGlobalStyle } from 'styled-components' + +import { AvenirRegular, AvenirMedium, AvenirHeavy } from '../../assets/fonts/fonts' + +import { TextProps } from './types' + +import styles from '../../styles/styles' + +/** + * Global style rule to make fonts files accessible + */ +const GlobalFonts = createGlobalStyle` + @font-face { + src: url(${AvenirRegular}); + font-family: 'AvenirRegular' + } + @font-face { + src: url(${AvenirMedium}); + font-family: 'AvenirMedium' + } + @font-face { + src: url(${AvenirHeavy}); + font-family: 'AvenirHeavy' + } +` +/** + * @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 goes here... + */ + +const Text = ({ + type, + color, + children, +}: TextProps) => { + const textStyles = { + color: color, + ...styles.typography[type] + } + return ( + <> + +

{children}

+ + ) +} + +export default Text diff --git a/applications/launchpad_v2/src/components/Text/types.ts b/applications/launchpad_v2/src/components/Text/types.ts new file mode 100644 index 0000000000..17cd2652eb --- /dev/null +++ b/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 +} + + From c6482bfbeaeed6f43c36e5e495796f735fd2756b Mon Sep 17 00:00:00 2001 From: Cormac Quaid <69508715+corquaid@users.noreply.github.com> Date: Wed, 20 Apr 2022 14:21:51 +0200 Subject: [PATCH 2/5] refactor: move globalStyles, set default Text type --- applications/launchpad_v2/src/App.tsx | 39 ++++++++++--------- .../src/components/Text/index.tsx | 28 ++----------- .../src/components/Text/styles.ts | 3 ++ .../launchpad_v2/src/components/Text/types.ts | 4 +- .../launchpad_v2/src/styles/globalStyles.ts | 24 ++++++++++++ .../launchpad_v2/src/styles/styles/index.ts | 2 +- .../src/styles/{ => styles}/typography.ts | 0 7 files changed, 54 insertions(+), 46 deletions(-) create mode 100644 applications/launchpad_v2/src/components/Text/styles.ts create mode 100644 applications/launchpad_v2/src/styles/globalStyles.ts rename applications/launchpad_v2/src/styles/{ => styles}/typography.ts (100%) diff --git a/applications/launchpad_v2/src/App.tsx b/applications/launchpad_v2/src/App.tsx index 9f60b6d80c..7522368632 100644 --- a/applications/launchpad_v2/src/App.tsx +++ b/applications/launchpad_v2/src/App.tsx @@ -4,6 +4,7 @@ import {invoke} from '@tauri-apps/api/tauri' import logo from './logo.svg' import './App.css' import { ThemeProvider } from 'styled-components' +import GlobalStyle from './styles/globalStyles' function App() { const [images, setImages] = useState([]) @@ -18,26 +19,28 @@ function App() { return ( -
-
- logo -

+ + <> +

+
+ logo +

Edit src/App.tsx and save to reload. -

- +

+ Learn React - - -

available docker images:
- {images.map(img => {img}{', '})} -

-
-
+ +

available docker images:
+ {images.map(img => {img}{', '})} +

+
+
+ ) } diff --git a/applications/launchpad_v2/src/components/Text/index.tsx b/applications/launchpad_v2/src/components/Text/index.tsx index 946e1d3578..2153fdc7e7 100644 --- a/applications/launchpad_v2/src/components/Text/index.tsx +++ b/applications/launchpad_v2/src/components/Text/index.tsx @@ -1,28 +1,7 @@ -import { createGlobalStyle } from 'styled-components' - -import { AvenirRegular, AvenirMedium, AvenirHeavy } from '../../assets/fonts/fonts' - +import { StyledText } from './styles' import { TextProps } from './types' - import styles from '../../styles/styles' -/** - * Global style rule to make fonts files accessible - */ -const GlobalFonts = createGlobalStyle` - @font-face { - src: url(${AvenirRegular}); - font-family: 'AvenirRegular' - } - @font-face { - src: url(${AvenirMedium}); - font-family: 'AvenirMedium' - } - @font-face { - src: url(${AvenirHeavy}); - font-family: 'AvenirHeavy' - } -` /** * @name Text * @@ -36,7 +15,7 @@ const GlobalFonts = createGlobalStyle` */ const Text = ({ - type, + type = 'defaultMedium', color, children, }: TextProps) => { @@ -46,8 +25,7 @@ const Text = ({ } return ( <> - -

{children}

+ {children} ) } diff --git a/applications/launchpad_v2/src/components/Text/styles.ts b/applications/launchpad_v2/src/components/Text/styles.ts new file mode 100644 index 0000000000..14facf9446 --- /dev/null +++ b/applications/launchpad_v2/src/components/Text/styles.ts @@ -0,0 +1,3 @@ +import styled from 'styled-components' + +export const StyledText = styled.p`` \ No newline at end of file diff --git a/applications/launchpad_v2/src/components/Text/types.ts b/applications/launchpad_v2/src/components/Text/types.ts index 17cd2652eb..0e7f41c85b 100644 --- a/applications/launchpad_v2/src/components/Text/types.ts +++ b/applications/launchpad_v2/src/components/Text/types.ts @@ -2,13 +2,13 @@ import { ReactNode } from 'react' /** * @typedef TextProps - * @prop {'header' | 'subheader' | 'defaultHeavy' | 'defaultMedium' | 'defaultUnder' | 'smallHeavy' | 'smallMedium' | 'smallUnder' | 'microHeavy' | 'microRegular' | 'microOblique' } type - text 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 */ export interface TextProps { - type: + type?: | 'header' | 'subheader' | 'defaultHeavy' diff --git a/applications/launchpad_v2/src/styles/globalStyles.ts b/applications/launchpad_v2/src/styles/globalStyles.ts new file mode 100644 index 0000000000..b8de206a53 --- /dev/null +++ b/applications/launchpad_v2/src/styles/globalStyles.ts @@ -0,0 +1,24 @@ +import { createGlobalStyle } from 'styled-components' + +import { AvenirRegular, AvenirMedium, AvenirHeavy } from '../assets/fonts/fonts' + +/** + * Global styles + */ + +const GlobalStyle = createGlobalStyle` + @font-face { + src: url(${AvenirRegular}); + font-family: 'AvenirRegular' + } + @font-face { + src: url(${AvenirMedium}); + font-family: 'AvenirMedium' + } + @font-face { + src: url(${AvenirHeavy}); + font-family: 'AvenirHeavy' + } +` + +export default GlobalStyle \ No newline at end of file diff --git a/applications/launchpad_v2/src/styles/styles/index.ts b/applications/launchpad_v2/src/styles/styles/index.ts index df6030f9fa..5489c8585d 100644 --- a/applications/launchpad_v2/src/styles/styles/index.ts +++ b/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, diff --git a/applications/launchpad_v2/src/styles/typography.ts b/applications/launchpad_v2/src/styles/styles/typography.ts similarity index 100% rename from applications/launchpad_v2/src/styles/typography.ts rename to applications/launchpad_v2/src/styles/styles/typography.ts From a4399a003017691d95fa925f419cab0ae0fed2d2 Mon Sep 17 00:00:00 2001 From: Cormac Quaid <69508715+corquaid@users.noreply.github.com> Date: Wed, 20 Apr 2022 16:19:49 +0200 Subject: [PATCH 3/5] remove unnecessary fragment, formatting --- applications/launchpad_v2/src/App.tsx | 36 +++++++++---------- .../launchpad_v2/src/styles/styles/index.ts | 2 +- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/applications/launchpad_v2/src/App.tsx b/applications/launchpad_v2/src/App.tsx index 7522368632..3a109283b2 100644 --- a/applications/launchpad_v2/src/App.tsx +++ b/applications/launchpad_v2/src/App.tsx @@ -20,27 +20,25 @@ function App() { return ( - <> -
-
- logo -

+

+
+ logo +

Edit src/App.tsx and save to reload. -

- +

+ Learn React - -

available docker images:
- {images.map(img => {img}{', '})} -

-
-
- + +

available docker images:
+ {images.map(img => {img}{', '})} +

+
+
) } diff --git a/applications/launchpad_v2/src/styles/styles/index.ts b/applications/launchpad_v2/src/styles/styles/index.ts index 5489c8585d..e10959fc84 100644 --- a/applications/launchpad_v2/src/styles/styles/index.ts +++ b/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, From b47295e81813c4644ec623d7966affeea62c8f56 Mon Sep 17 00:00:00 2001 From: Cormac Quaid <69508715+corquaid@users.noreply.github.com> Date: Thu, 21 Apr 2022 16:44:36 +0200 Subject: [PATCH 4/5] Fixed CI tests, refactor d.ts files --- applications/launchpad_v2/src/App.test.tsx | 4 ++-- .../launchpad_v2/src/components/TitleBar/TitleBar.test.tsx | 2 +- applications/launchpad_v2/src/custom.d.ts | 4 +++- applications/launchpad_v2/src/fonts.d.ts | 1 - 4 files changed, 6 insertions(+), 5 deletions(-) delete mode 100644 applications/launchpad_v2/src/fonts.d.ts diff --git a/applications/launchpad_v2/src/App.test.tsx b/applications/launchpad_v2/src/App.test.tsx index 1610784778..75b2281bb0 100644 --- a/applications/launchpad_v2/src/App.test.tsx +++ b/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' diff --git a/applications/launchpad_v2/src/components/TitleBar/TitleBar.test.tsx b/applications/launchpad_v2/src/components/TitleBar/TitleBar.test.tsx index f57c8ddf5a..7852253953 100644 --- a/applications/launchpad_v2/src/components/TitleBar/TitleBar.test.tsx +++ b/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' diff --git a/applications/launchpad_v2/src/custom.d.ts b/applications/launchpad_v2/src/custom.d.ts index b8fea7c2ad..b659576318 100644 --- a/applications/launchpad_v2/src/custom.d.ts +++ b/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 -} \ No newline at end of file +} + +declare module '*.otf' \ No newline at end of file diff --git a/applications/launchpad_v2/src/fonts.d.ts b/applications/launchpad_v2/src/fonts.d.ts deleted file mode 100644 index 611cf37e17..0000000000 --- a/applications/launchpad_v2/src/fonts.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module '*.otf' From bf1ebe628621df928b8aa0ea279532481f98e84b Mon Sep 17 00:00:00 2001 From: Cormac Quaid <69508715+corquaid@users.noreply.github.com> Date: Thu, 21 Apr 2022 17:08:16 +0200 Subject: [PATCH 5/5] Removed GlobalStyle, moved fonts to App.css --- applications/launchpad_v2/src/App.tsx | 2 -- .../launchpad_v2/src/assets/fonts/fonts.ts | 4 ---- applications/launchpad_v2/src/styles/App.css | 15 ++++++++++++ .../launchpad_v2/src/styles/globalStyles.ts | 24 ------------------- 4 files changed, 15 insertions(+), 30 deletions(-) delete mode 100644 applications/launchpad_v2/src/assets/fonts/fonts.ts delete mode 100644 applications/launchpad_v2/src/styles/globalStyles.ts diff --git a/applications/launchpad_v2/src/App.tsx b/applications/launchpad_v2/src/App.tsx index b6c696cabb..6d2059d48a 100644 --- a/applications/launchpad_v2/src/App.tsx +++ b/applications/launchpad_v2/src/App.tsx @@ -6,7 +6,6 @@ import { selectThemeConfig } from './store/app/selectors' import HomePage from './pages/home' import './styles/App.css' -import GlobalStyle from './styles/globalStyles' const AppContainer = styled.div` background: ${({ theme }) => theme.background}; @@ -21,7 +20,6 @@ const App = () => { return ( - diff --git a/applications/launchpad_v2/src/assets/fonts/fonts.ts b/applications/launchpad_v2/src/assets/fonts/fonts.ts deleted file mode 100644 index c26f604dc6..0000000000 --- a/applications/launchpad_v2/src/assets/fonts/fonts.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as AvenirRegular } from './AvenirLTStd-Book.otf' -export { default as AvenirMedium } from './AvenirLTStd-Medium.otf' -export { default as AvenirHeavy } from './AvenirLTStd-Heavy.otf' - diff --git a/applications/launchpad_v2/src/styles/App.css b/applications/launchpad_v2/src/styles/App.css index ffc8816a42..fa6da3850a 100644 --- a/applications/launchpad_v2/src/styles/App.css +++ b/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' +} diff --git a/applications/launchpad_v2/src/styles/globalStyles.ts b/applications/launchpad_v2/src/styles/globalStyles.ts deleted file mode 100644 index b8de206a53..0000000000 --- a/applications/launchpad_v2/src/styles/globalStyles.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { createGlobalStyle } from 'styled-components' - -import { AvenirRegular, AvenirMedium, AvenirHeavy } from '../assets/fonts/fonts' - -/** - * Global styles - */ - -const GlobalStyle = createGlobalStyle` - @font-face { - src: url(${AvenirRegular}); - font-family: 'AvenirRegular' - } - @font-face { - src: url(${AvenirMedium}); - font-family: 'AvenirMedium' - } - @font-face { - src: url(${AvenirHeavy}); - font-family: 'AvenirHeavy' - } -` - -export default GlobalStyle \ No newline at end of file