feat: connect inter font 400 width from google fonts

app/entrypoints/renderer/package.json

@@ -11,6 +11,7 @@
 	},
 	"dependencies": {
 		"@emotion/react": "11.9.3",
+		"@ui/input": "workspace:*",
 		"@ui/theme": "workspace:*",
 		"next": "14.1.0",
 		"react": "18.2.0",

app/entrypoints/renderer/src/app/page.tsx

@@ -2,14 +2,12 @@
 
 import React             from 'react'
 
-import { Input }         from '@ui/input'
-import { Switch }        from '@ui/switch'
 import { ThemeProvider } from '@ui/theme'
+import {Input}  from '@ui/input'
 
 const Page = () => (
   <ThemeProvider>
-    <Input placeholder='input-placeholder' />
-    <Switch />
+	<Input placeholder='placeholder'/>
   </ThemeProvider>
 )
 

ui/input/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@ui/input",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "main": "src/index.ts",
+  "dependencies": {
+    "@atls-ui-parts/input": "0.1.1",
+    "@ui/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.0",
+    "@types/styled-system": "^5",
+    "styled-system": "5.1.5",
+    "styled-tools": "1.7.2"
+  },
+  "peerDependencies": {
+    "@emotion/react": "*",
+    "@emotion/styled": "*",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-system": "*",
+    "styled-tools": "*"
+  }
+}

ui/input/src/index.ts

@@ -0,0 +1,2 @@
+export * from './input.component'
+export * from './input.interfaces'

ui/input/src/input.component.tsx

@@ -0,0 +1,31 @@
+import styled                       from '@emotion/styled'
+
+import React                        from 'react'
+import { ForwardRefRenderFunction } from 'react'
+import { forwardRef }               from 'react'
+
+import { RawInput }                 from '@atls-ui-parts/input'
+import { useChangeValue }           from '@atls-ui-parts/input'
+
+import { InputProps }               from './input.interfaces'
+
+import { baseStyles }               from './input.styles'
+import { shapeStyles }              from './input.styles'
+import { appearanceStyles }         from './input.styles'
+
+export const InputElement = styled.div(baseStyles, shapeStyles, appearanceStyles)
+
+export const InputWithoutRef: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
+  { size, value, disabled, onChange, onChangeNative, ...props },
+  ref
+) => {
+  const changeValue = useChangeValue(disabled, onChange, onChangeNative)
+
+  return (
+    <InputElement {...props} size={size}>
+      <RawInput ref={ref} {...props} disabled={disabled} value={value} onChange={changeValue} />
+    </InputElement>
+  )
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(InputWithoutRef)

ui/input/src/input.interfaces.ts

@@ -0,0 +1,5 @@
+import { InputProps as BaseInputProps } from '@atls-ui-parts/input'
+
+export interface InputProps extends BaseInputProps {
+  errorText?: string
+}

ui/input/src/input.styles.ts

@@ -0,0 +1,29 @@
+import { prop }                   from 'styled-tools'
+import { switchProp }             from 'styled-tools'
+
+import { createBaseStyles }       from '@atls-ui-parts/input'
+import { createShapeStyles }      from '@atls-ui-parts/input'
+import { createAppearanceStyles } from '@atls-ui-parts/input'
+
+export const shapeStyles = createShapeStyles({
+  fontFamily: prop('theme.fonts.primary'),
+  size: 52,
+  fontWeight: 400,
+  fontSize: 13,
+  rounding: 9,
+  paddingLeft: 18,
+  paddingRight: 18,
+})
+
+export const baseStyles = createBaseStyles()
+export const appearanceStyles = createAppearanceStyles({
+  backgroundColor: 'white',
+  fontColor: 'black',
+  borderColor: '#DADEED',
+})
+
+// export const shapeStyles = switchProp(prop('size', 'normal'), {
+//   small: smallNormalSizeStyles,
+//   normal: shapeNormalSizeStyles,
+//   large: largeNormalSizeStyles,
+// })

ui/theme/src/global.styles.tsx

@@ -0,0 +1,15 @@
+import { Global }                 from '@emotion/react'
+import { css }                    from '@emotion/react'
+
+import React                      from 'react'
+import { useEffect }              from 'react'
+
+export const GlobalStyles = () => {
+  return (
+    <Global
+      styles={css`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
+      `}
+    />
+  )
+}

ui/theme/src/theme.provider.tsx

@@ -3,7 +3,11 @@ import * as theme                                from './theme'
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
 
 import React                                     from 'react'
+import { GlobalStyles }                          from './global.styles'
 
 export const ThemeProvider = ({ children }) => (
+<>
+    <GlobalStyles />
   <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
+</>
 )

ui/utils/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@ui/utils",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atls-utils/use-hover": "0.0.2",
+    "react-laag": "2.0.5"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

ui/utils/src/index.ts

@@ -0,0 +1 @@
+export * from '@atls-utils/use-hover'