Create ui package

package.json

@@ -8,7 +8,8 @@
     "lint": "turbo run lint",
     "test": "turbo run test",
     "clean": "turbo run clean && pnpm store prune && rm -rf .turbo node_modules",
-    "web": "pnpm --filter @helixbridge/web",
+    "build:web": "pnpm run build --filter @helixbridge/web",
+    "build:ui": "pnpm run build --filter @helixbridge/ui",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,yaml}\"",
     "changeset": "changeset",
     "version-packages": "changeset version",

packages/config-tamagui/src/animations.ts

@@ -0,0 +1,36 @@
+import { createAnimations } from "@tamagui/animations-react-native";
+
+export const animations = createAnimations({
+  "100ms": {
+    type: "timing",
+    duration: 100,
+  },
+  bouncy: {
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  lazy: {
+    damping: 18,
+    stiffness: 50,
+  },
+  medium: {
+    damping: 15,
+    stiffness: 120,
+    mass: 1,
+  },
+  slow: {
+    damping: 15,
+    stiffness: 40,
+  },
+  quick: {
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  tooltip: {
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+});

packages/config-tamagui/src/tamagui.config.ts

@@ -4,7 +4,7 @@ import { shorthands } from "@tamagui/shorthands";
 import { tokens, themes } from "@tamagui/config/v3";
 import { createMedia } from "@tamagui/react-native-media-driver";
 
-// import { animations } from '@my/ui/src/animations'
+import { animations } from "./animations";
 
 const headingFont = createInterFont({
   size: {
@@ -52,7 +52,7 @@ const bodyFont = createInterFont(
 
 export const config = createTamagui({
   defaultFont: "body",
-  // animations,
+  animations,
   shouldAddPrefersColorThemes: true,
   themeClassNameOnRoot: true,
 

packages/ui/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@helixbridge/ui",
+  "version": "0.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "clean": "rm -rf node_modules .turbo dist",
+    "build": "tamagui-build --skip-types",
+    "watch": "tamagui-build --skip-types --watch"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@tamagui/get-token": "^1.110.1",
+    "@tamagui/web": "^1.110.1",
+    "react": "^18.2.0",
+    "tamagui": "^1.110.1"
+  },
+  "devDependencies": {
+    "@helixbridge/tamagui-config": "workspace:*",
+    "@tamagui/build": "^1.110.1"
+  }
+}

packages/ui/src/Button.tsx

@@ -0,0 +1,91 @@
+import { getSize, getSpace } from "@tamagui/get-token";
+import {
+  GetProps,
+  SizeTokens,
+  View,
+  Text,
+  createStyledContext,
+  styled,
+  useTheme,
+  withStaticProperties,
+} from "@tamagui/web";
+import { isValidElement, cloneElement, useContext } from "react";
+
+export const ButtonContext = createStyledContext({
+  size: "$md" as SizeTokens,
+});
+
+export const ButtonFrame = styled(View, {
+  name: "Button",
+  context: ButtonContext,
+  backgroundColor: "$background",
+  alignItems: "center",
+  flexDirection: "row",
+
+  hoverStyle: {
+    backgroundColor: "$backgroundHover",
+  },
+
+  pressStyle: {
+    backgroundColor: "$backgroundPress",
+  },
+
+  variants: {
+    size: {
+      "...size": (name, { tokens }) => {
+        return {
+          height: tokens.size[name],
+          borderRadius: tokens.radius[name],
+          // note the getSpace and getSize helpers will let you shift down/up token sizes
+          // whereas with gap we just multiply by 0.2
+          // this is a stylistic choice, and depends on your design system values
+          gap: tokens.space[name].val * 0.2,
+          paddingHorizontal: getSpace(name, {
+            shift: -1,
+          }),
+        };
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: "$md" as SizeTokens,
+  },
+});
+
+type ButtonProps = GetProps<typeof ButtonFrame>;
+
+export const ButtonText = styled(Text, {
+  name: "ButtonText",
+  context: ButtonContext,
+  color: "$color",
+  userSelect: "none",
+
+  variants: {
+    size: {
+      "...fontSize": (name, { font }) => ({
+        fontSize: font?.size[name],
+      }),
+    },
+  } as const,
+});
+
+const ButtonIcon = (props: { children: any }) => {
+  const { size } = useContext(ButtonContext.context);
+  const smaller = getSize(size, {
+    shift: -2,
+  });
+  const theme = useTheme();
+  return isValidElement(props.children)
+    ? cloneElement(props.children, {
+        size: smaller.val * 0.5,
+        color: theme?.color?.get(),
+      })
+    : null;
+};
+
+export const Button = withStaticProperties(ButtonFrame, {
+  Props: ButtonContext.Provider,
+  Text: ButtonText,
+  Icon: ButtonIcon,
+});

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

packages/ui/src/types.d.ts

@@ -0,0 +1,7 @@
+import { config } from "@helixbridge/tamagui-config";
+
+export type Conf = typeof config;
+
+declare module "tamagui" {
+  interface TamaguiCustomConfig extends Conf {}
+}