Skip to content

Instantly share code, notes, and snippets.

import { promises as fs } from 'node:fs'
import * as path from 'node:path'
import { exec } from 'node:child_process'
import os from 'node:os'
interface PackageJson {
profile?: { [key: string]: any }
[key: string]: any
}
@natew
natew / AnimatedNumbers.tsx
Last active March 8, 2024 00:27
AnimatePresence number ticker
const AnimatedNumbers = () => {
const [numbers, setNumbers] = useState(100_000)
const len = `${numbers}`.length
return (
<YStack gap="$5">
<XStack gap="$2">
<Button
onPress={() => {
@natew
natew / tamagui_example_themebuilder_themes.ts
Last active November 7, 2024 21:23
Code showing Tamagui ThemeBuilder generating the site theme suite
import {
blue,
blueDark,
gray,
grayDark,
green,
greenDark,
orange,
orangeDark,
pink,
@natew
natew / settings.json
Created August 10, 2023 23:54
my customize ui vscode
{
"apc.activityBar": {
"position": "bottom",
"hideSettings": true,
"size": 20
},
"apc.statusBar": {
"position": "editor-bottom",
"height": 22,
import { getSize, getSpace } from '@tamagui/get-token'
import { Moon } from '@tamagui/lucide-icons'
import {
GetProps,
SizeTokens,
Stack,
Text,
createStyledContext,
styled,
useTheme,
import { animation, Button, Card, Geometry, Row, Title, View } from '@o/ui'
import React from 'react'
export const TestCarousel = () => {
const apps = [{ title: 'ok' }, { title: 'ok2' }, { title: 'ok3' }, { title: 'o4' }]
const carousel = animation(() => ({
scrollLeft: 0,
zoomed: false,
}))
/**
import { always, AppDefinition, AppIcon, createUsableStore, ensure, getAppDefinition, react, shallow, Templates, useReaction } from '@o/kit'
import { AppBit } from '@o/models'
import { Card, CardProps, fuzzyFilter, idFn, Row, useIntersectionObserver, useNodeSize, useParentNodeSize, useTheme, View } from '@o/ui'
import { numberBounder, numberScaler } from '@o/utils'
import React, { createRef, memo, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { to, useSpring, useSprings } from 'react-spring'
import { useGesture } from 'react-use-gesture'
import { om, useOm } from '../../om/om'
import { queryStore } from '../../om/stores'
@natew
natew / example.tsx
Created March 8, 2019 19:32
tree list example
import { ensure, useReaction } from '@mcro/use-store'
import { getTargetValue, List, searchBits, TreeList, useTreeList } from '@o/kit'
import { Button, InputRow, Panel, preventDefault, useToggle, View } from '@o/ui'
import { flow } from 'lodash'
import React, { useState } from 'react'
export function ListsAppIndex() {
const treeList = useTreeList('list')
const [addQuery, setAddQuery] = useState('')
const [showSearch, toggleShowSearch] = useToggle(false)
This file has been truncated, but you can view the full file.
➜ orbit-app git:(nate/dev) ✗ PUNDLE=true npm start
> @mcro/[email protected] start /Users/nw/projects/motion/orbit/app/orbit-app
> ./scripts/start.sh
Process on port 3002 killed
start w pundle
Starting Dev Server at http://localhost:3002/ (with resetted cache)
Static mappings:
/ ~> /Users/nw/projects/motion/orbit/app/orbit-app/public
import r2 from '@mcro/r2'
import puppeteer from 'puppeteer'
import * as _ from 'lodash'
const sleep = ms => new Promise(res => setTimeout(res, ms))
const onFocus = page => {
return page.evaluate(() => {
return new Promise(res => {
if (document.hasFocus()) {
res()