Lists

.github/actions/setup-node/action.yml

@@ -12,8 +12,9 @@ runs:
       uses: actions/setup-node@v4
       with:
         node-version-file: .node-version
-        cache: yarn
 
     - name: Install dependencies
-      run: yarn install --immutable
-      shell: bash
+      run: yarn install --no-immutable
+      shell: bash
+      env:
+        YARN_ENABLE_HARDENED_MODE: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork && '1' || '0' }}

.gitignore

@@ -27,4 +27,7 @@ storybook-static
 .tamagui
 
 # env
-.env
+.env
+
+# for monorepo use
+yarn.lock

.storybook/main.ts

@@ -30,7 +30,6 @@ export default defineMain({
 				tamaguiPlugin({
 					config: "./src/config/tamagui.config.ts",
 					components: ["tamagui"],
-					optimize: true,
 				}),
 			],
 			build: {

.vscode/settings.json

@@ -23,6 +23,8 @@
 		".tamagui": true,
 		".yarn": true
 	},
+	"typescript.preferences.importModuleSpecifier": "relative",
+
 	"explorer.fileNesting.enabled": true,
 	"explorer.fileNesting.patterns": {
 		"package.json": "package-lock.json, yarn.lock, .yarnrc.yml, cspell.config.yaml, biome.json, LICENSE, .gitignore",

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:62fea75bb5d432cf221355c3",
+  "zip": true
+}

cspell.config.yaml

@@ -8,6 +8,7 @@ words:
   - culori
   - mongolyy
   - nderscore
+  - nums
   - unplugin
 ignoreWords: []
 import: []

package.json

@@ -12,6 +12,7 @@
 	"scripts": {
 		"start": "storybook dev -p 6006 --no-open --quiet",
 		"storybook:build": "storybook build",
+		"storybook:test": "vitest --project=storybook",
 		"sync": "tsx scripts/syncFigma.ts",
 		"lint": "biome check .",
 		"format": "biome check --write .",
@@ -20,8 +21,8 @@
 	},
 	"dependencies": {
 		"@fontsource/nunito-sans": "^5.2.7",
-		"@tamagui/config": "1.137.3",
-		"@window-splitter/react": "^1.1.2",
+		"@tamagui/config": "2.0.0-rc.11",
+		"@window-splitter/react": "^1.1.3",
 		"browser-info": "^1.3.0",
 		"culori": "^4.0.2",
 		"motion": "^12.23.26",
@@ -31,18 +32,18 @@
 		"react-native-device-info": "^15.0.1",
 		"react-native-web": "^0.21.2",
 		"rtl-detect": "^1.1.2",
-		"tamagui": "1.137.3"
+		"tamagui": "2.0.0-rc.11"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.11",
-		"@chromatic-com/storybook": "^4.1.2",
+		"@chromatic-com/storybook": "^5.0.0",
 		"@storybook/addon-a11y": "^10.0.7",
 		"@storybook/addon-docs": "^10.0.7",
 		"@storybook/addon-vitest": "^10.0.7",
 		"@storybook/react-vite": "^10.0.7",
 		"@svgr/core": "^8.1.0",
 		"@svgr/plugin-jsx": "^8.1.0",
-		"@tamagui/vite-plugin": "1.137.3",
+		"@tamagui/vite-plugin": "2.0.0-rc.11",
 		"@types/culori": "^4",
 		"@types/node": "^22.10.2",
 		"@types/pluralize": "^0.0.33",
@@ -52,7 +53,7 @@
 		"@types/rtl-detect": "^1",
 		"@vitejs/plugin-react": "^5.0.4",
 		"@vitest/browser-playwright": "^4.0.8",
-		"@vitest/coverage-v8": "^4.0.8",
+		"@vitest/coverage-v8": "^4.0.17",
 		"dotenv": "^17.2.3",
 		"jsdom": "^27.0.0",
 		"patch-package": "^8.0.1",

scripts/syncFigma.ts

@@ -207,9 +207,7 @@ async function generateTypeScriptFile(
 		.map(({ name }) => `import ${name} from "./${name}"`)
 		.join("\n")
 
-	const exports = sortedIcons
-		.map(({ name }) => `\t${name}: ${name} as WebIconComponentType,`)
-		.join("\n")
+	const exports = sortedIcons.map(({ name }) => `\t${name},`).join("\n")
 
 	const attachments = sortedIcons
 		.map(({ name }) => `Icon.${name} = rawIcons.${name}`)
@@ -221,8 +219,6 @@ import { ComponentError } from "../../ComponentError"
 // Generated Icons:
 ${imports}
 
-import type { WebIconComponentType } from "../types"
-
 export const rawIcons = {
 ${exports}
 } as const

src/components/AfterText/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+
+import { Text } from "../Text"
+
+/**
+ * Text to show after an element. Used mostly for lists.
+ */
+type AfterTextProps = {
+	/**
+	 * The text to show. Note that this is rendred within a `Text` node.
+	 */
+	children: string | React.ReactNode
+}
+
+export const AfterText = React.memo(function AfterText({
+	children,
+}: AfterTextProps) {
+	return (
+		<Text
+			noUserSelect
+			style={Text.style.footnote}
+			fit={Text.fitValues.wrap}
+			px={"$edgeInset"}
+			py={"$captionVerticalMargin"}
+			color={"$secondaryColor"}
+			_style={{ flexShrink: 0 }}
+		>
+			{children}
+		</Text>
+	)
+})

src/components/Button/Pressable.tsx

@@ -0,0 +1,183 @@
+import React from "react"
+import { useTheme } from "tamagui"
+
+import { usePointerEvents } from "../../hooks/usePointerEvents"
+import { useShadow as getShadow } from "../../hooks/useShadow"
+import { MotionView, ViewContext, type ViewProps } from "../View"
+
+import type { ColorValue } from "../../utils/color"
+import type { OnPressWithRef } from "../../utils/types"
+
+export type PressableState = {
+	isHovered: boolean
+	isActive: boolean
+}
+
+export type ParadigmPressableProps = ViewProps & {
+	/**
+	 * what happens when the element is pressed?
+	 *
+	 * This is `OnPressWithRef` so its possible to find the element when needed (popups, etc.)
+	 */
+	onPress?: OnPressWithRef
+	/**
+	 * Called whenever hover or active state changes.
+	 */
+	onStateChange?: (state: PressableState) => void
+	/**
+	 * is this element important? Should only be 1 per page.
+	 */
+	isPrimary?: boolean
+	/**
+	 * Does this element have a negative effect (delete, etc.)
+	 */
+	isNegative?: boolean
+	/**
+	 * Is this element floating?
+	 */
+	isRaised?: boolean
+	/**
+	 * is this element disabled?
+	 * This will make `onPress` not work even if defined
+	 */
+	isDisabled?: boolean
+	/**
+	 * Is this element currently in a loading state.
+	 * This will disable `onPress` even if defined
+	 */
+	isLoading?: boolean
+}
+
+const { all: e1 } = getShadow({
+	shadowName: "elevation1",
+	forceBoxShadow: true,
+})
+const { all: e2 } = getShadow({
+	shadowName: "elevation2",
+	forceBoxShadow: true,
+})
+
+export const Pressable = ({
+	children,
+	onPress,
+	onStateChange,
+	isPrimary,
+	isNegative,
+	isRaised,
+	isDisabled: isMarkedDisabled = false,
+	isLoading,
+	...otherProps
+}: ParadigmPressableProps) => {
+	const theme = useTheme()
+	const { color: parentColor } = React.useContext(ViewContext)
+	const { isHovered, isActive, pointerProps } = usePointerEvents()
+
+	React.useEffect(() => {
+		onStateChange?.({ isHovered, isActive })
+	}, [isHovered, isActive, onStateChange])
+	const pressableRef = React.useRef(null)
+
+	let backgroundColor: ColorValue
+
+	// the button is disabled both when loading and when actively marked disabled
+	const isDisabled = isMarkedDisabled || isLoading
+
+	const buttonState = isDisabled
+		? isLoading
+			? "loading"
+			: "disabled"
+		: isHovered
+			? isActive
+				? "hoverActive"
+				: "hover"
+			: isActive
+				? "active"
+				: "normal"
+
+	// Background Color
+	const raisedColor = parentColor
+		? parentColor.toString() !== "$background"
+			? theme.background
+			: theme.cardStock
+		: theme.cardStock
+
+	switch (buttonState) {
+		case "loading":
+		case "disabled": {
+			backgroundColor = theme.cardStock
+			break
+		}
+		case "hover": {
+			backgroundColor = isPrimary
+				? isNegative
+					? theme.negativeHover
+					: theme.primaryHover
+				: isRaised
+					? raisedColor
+					: theme.normalHover
+			break
+		}
+		case "active":
+		case "hoverActive": {
+			backgroundColor = isPrimary
+				? isNegative
+					? theme.negativeActive
+					: theme.primaryActive
+				: isRaised
+					? raisedColor
+					: theme.normalActive
+			break
+		}
+		default: {
+			// normal
+			if (isPrimary) {
+				if (isNegative) {
+					backgroundColor = theme.destructive
+				} else {
+					backgroundColor = theme.primary
+				}
+			} else {
+				if (isRaised) {
+					backgroundColor = raisedColor
+				} else {
+					backgroundColor = theme.cardStock
+				}
+			}
+		}
+	}
+
+	return (
+		<MotionView
+			ref={pressableRef}
+			center
+			noShrink
+			color={backgroundColor}
+			_tamaguiProps={{ flexDirection: "row" }}
+			{...otherProps}
+			{...pointerProps}
+			disabled={isDisabled ?? false}
+			cursor={isDisabled ? "not-allowed" : "pointer"}
+			variants={{
+				normal: { filter: "none" },
+				raised: { y: -1, filter: e1.filter ?? "none", boxShadow: e1.boxShadow },
+				hover: { y: -3, filter: e2.filter ?? "none", boxShadow: e2.boxShadow },
+				active: { y: 0, filter: e1.filter ?? "none", boxShadow: e1.boxShadow },
+			}}
+			animate={
+				isRaised && !isDisabled
+					? isHovered
+						? isActive
+							? "active"
+							: "hover"
+						: "raised"
+					: "normal"
+			}
+			transition={{ type: "spring", visualDuration: 0.35, bounce: 0.35 }}
+			onPress={(event) => {
+				onPress?.({ ref: pressableRef, event })
+			}}
+		>
+			{children}
+		</MotionView>
+	)
+}