add ui package

packages/ui/.gitignore

@@ -0,0 +1,5 @@
+dist/
+.DS_Store
+THUMBS_DB
+node_modules/
+types/

packages/ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@status-im/ui",
+  "version": "0.0.1",
+  "sideEffects": [
+    "*.css"
+  ],
+  "private": true,
+  "types": "dist/types/index.d.ts",
+  "main": "src/index.tsx",
+  "module:jsx": "src",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "typegen": "tsc --noEmit false --emitDeclarationOnly || true",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@tamagui/animations-react-native": "^1.0.3",
+    "@tamagui/core": "^1.0.3",
+    "@tamagui/font-inter": "^1.0.3",
+    "@tamagui/react-native-media-driver": "^1.0.3",
+    "@tamagui/shorthands": "^1.0.3",
+    "@tamagui/theme-base": "^1.0.3",
+    "tamagui": "^1.0.3"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.3"
+  }
+}

packages/ui/src/MyComponent.tsx

@@ -0,0 +1,7 @@
+import { styled, YStack } from 'tamagui'
+
+export const MyComponent = styled(YStack, {
+  backgroundColor: 'pink',
+  width: 100,
+  height: 100
+})

packages/ui/src/animations.ts

@@ -0,0 +1,21 @@
+import { createAnimations } from '@tamagui/animations-react-native'
+
+export const animations = createAnimations({
+  bouncy: {
+    type: 'spring',
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+  lazy: {
+    type: 'spring',
+    damping: 20,
+    stiffness: 60,
+  },
+  quick: {
+    type: 'spring',
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+})

packages/ui/src/global.ts

@@ -0,0 +1,9 @@
+import { config } from './tamagui.config'
+
+export type Conf = typeof config
+
+declare module 'tamagui' {
+  interface TamaguiCustomConfig extends Conf {}
+}
+
+export default config

packages/ui/src/index.tsx

@@ -0,0 +1,3 @@
+export * from './MyComponent'
+export { config } from './tamagui.config'
+export * from 'tamagui'

packages/ui/src/tamagui.config.ts

@@ -0,0 +1,99 @@
+import { createTamagui } from '@tamagui/core'
+import { themes, tokens } from '@tamagui/theme-base'
+
+export type AppConfig = typeof config
+declare module '@tamagui/core' {
+  // overrides TamaguiCustomConfig so your custom types
+  // work everywhere you import `tamagui`
+  type TamaguiCustomConfig = AppConfig
+}
+
+export const config = createTamagui({
+  fonts: {},
+  themes,
+  tokens
+})
+
+// export const styled = config
+// export default config
+
+// import { createTamagui } from 'tamagui'
+// import { createInterFont } from '@tamagui/font-inter'
+// import { shorthands } from '@tamagui/shorthands'
+// import { themes, tokens } from '@tamagui/theme-base'
+// import { createMedia } from '@tamagui/react-native-media-driver'
+
+// import { animations } from './animations'
+
+// const headingFont = createInterFont({
+//   size: {
+//     6: 15,
+//   },
+//   transform: {
+//     6: 'uppercase',
+//     7: 'none',
+//   },
+//   weight: {
+//     6: '400',
+//     7: '700',
+//   },
+//   color: {
+//     6: '$colorFocus',
+//     7: '$color',
+//   },
+//   letterSpacing: {
+//     5: 2,
+//     6: 1,
+//     7: 0,
+//     8: -1,
+//     9: -2,
+//     10: -3,
+//     12: -4,
+//     14: -5,
+//     15: -6,
+//   },
+//   face: {
+//     700: { normal: 'InterBold' },
+//   },
+// })
+
+// const bodyFont = createInterFont(
+//   {
+//     face: {
+//       700: { normal: 'InterBold' },
+//     },
+//   },
+//   {
+//     sizeSize: (size) => Math.round(size * 1.1),
+//     sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
+//   }
+// )
+
+// export const config = createTamagui({
+//   animations,
+//   shouldAddPrefersColorThemes: true,
+//   themeClassNameOnRoot: true,
+//   shorthands,
+//   fonts: {
+//     heading: headingFont,
+//     body: bodyFont,
+//   },
+//   themes,
+//   tokens,
+//   media: createMedia({
+//     xs: { maxWidth: 660 },
+//     sm: { maxWidth: 800 },
+//     md: { maxWidth: 1020 },
+//     lg: { maxWidth: 1280 },
+//     xl: { maxWidth: 1420 },
+//     xxl: { maxWidth: 1600 },
+//     gtXs: { minWidth: 660 + 1 },
+//     gtSm: { minWidth: 800 + 1 },
+//     gtMd: { minWidth: 1020 + 1 },
+//     gtLg: { minWidth: 1280 + 1 },
+//     short: { maxHeight: 820 },
+//     tall: { minHeight: 820 },
+//     hoverNone: { hover: 'none' },
+//     pointerCoarse: { pointer: 'coarse' },
+//   }),
+// })

packages/ui/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declarationDir": "dist/types"
+  },
+  "references": []
+}