add(site): Document Image, better docs

Author: natew

next.md

@@ -1,3 +1,12 @@
+- @tamagui/cli: tamagui test ./packages/site/components/OffsetBox.tsx
+
+cli to compile a file and see output:
+
+> Loading tamagui
+> Compiling OffsetBox
+  >> <YStack />
+  >> ...
+
 - for lineargradient:
   - propMapper
   - move logic to function

packages/build/tamagui-build.js

@@ -20,7 +20,7 @@ const pkgMain = pkg.main
 const pkgModule = pkg.module
 
 async function build() {
-  console.log('🥚', pkg.name)
+  console.log('»', pkg.name)
   const x = Date.now()
   let files = (await fg(['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.css'])).filter(
     (x) => !x.includes('.d.ts')

packages/loader/src/loader.ts

@@ -36,7 +36,7 @@ export function loader(this: any, source: string) {
       (options.disableDebugAttr || process.env.NODE_ENV !== 'development')
     ) {
       if (!hasLogged) {
-        console.log('🥚 Tamagui disableDebug & disableExtraction set, no parsing running')
+        console.log(' » Tamagui disableDebug & disableExtraction set, no parsing running')
         hasLogged = true
       }
       return callback(null, source)

packages/proxy-worm/index.js

@@ -0,0 +1,15 @@
+module.exports = empty()
+
+function empty() {
+  return new Proxy(
+    {},
+    {
+      get() {
+        return empty()
+      },
+      apply() {
+        return empty()
+      },
+    }
+  )
+}

packages/proxy-worm/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@tamagui/proxy-worm",
+  "version": "1.0.0-alpha.63",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "true",
+    "watch": "true"
+  }
+}

packages/site/components/MDXComponents.tsx

@@ -29,6 +29,7 @@ import { DocCodeBlock } from './DocsCodeBlock'
 import { ExternalIcon } from './ExternalIcon'
 import { HeroContainer } from './HeroContainer'
 import { Highlights } from './Highlights'
+import { OffsetBox } from './OffsetBox'
 import { Preview } from './Preview'
 import { PropsTable } from './PropsTable'
 
@@ -329,18 +330,6 @@ export const components = {
   },
 }
 
-const OffsetBox = (props: StackProps & { size?: 'hero' }) => {
-  return (
-    <YStack
-      {...(props.size === 'hero' && {
-        $gtSm: { mx: '$-5' },
-        $gtMd: { mx: '$-10' },
-      })}
-      {...props}
-    />
-  )
-}
-
 const LinkHeading = ({ id, children, ...props }: { id: string } & StackProps) => (
   <XStack
     tag="a"

packages/site/components/OffsetBox.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { StackProps, YStack } from 'tamagui'
+
+export const OffsetBox = (props: StackProps & { size?: 'hero' }) => {
+  return (
+    <YStack
+      {...(props.size === 'hero' && {
+        $gtSm: { mx: '$-5' },
+        $gtMd: { mx: '$-10' },
+      })}
+      {...props}
+    />
+  )
+}

packages/site/components/demos/ButtonDemo.tsx

@@ -19,13 +19,13 @@ function Buttons(props) {
   return (
     <YStack elevation="$6" w={180} bc="$bg" p="$3" br="$2" space="$2" {...props}>
       <Button>Plain</Button>
-      <Button themeIcon icon={Airplay} size="$6">
+      <Button icon={Airplay} size="$6">
         Large
       </Button>
-      <Button themeInverse themeIcon iconAfter={Gift} size="$2">
+      <Button themeInverse iconAfter={Gift} size="$2">
         Small Inversed
       </Button>
-      <Button themeIcon icon={Activity} size="$1">
+      <Button icon={Activity} size="$1">
         XS
       </Button>
       <InteractiveContainer>

packages/site/components/demos/ImageDemo.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Image, XStack } from 'tamagui'
+
+export function ImageDemo() {
+  return (
+    <XStack space>
+      <Image source="http://placekitten.com/200/300" width={200} height={300} />
+    </XStack>
+  )
+}

packages/site/components/demos/index.tsx

@@ -11,3 +11,4 @@ export { MenuDemo } from './MenuDemo'
 export { SeparatorDemo } from './SeparatorDemo'
 export { PopoverDemo } from './PopoverDemo'
 export { HoverablePopoverDemo } from './HoverablePopoverDemo'
+export { ImageDemo } from './ImageDemo'

packages/site/data/docs/components/image/1.0.0-alpha.mdx

@@ -0,0 +1,23 @@
+---
+title: Image
+description: React Native Web Image + Tamagui style props.
+name: html
+---
+
+# Image
+
+<Description>React Native Web Image + Tamagui style props.</Description>
+
+<HeroContainer>
+  <ImageDemo />
+</HeroContainer>
+
+```jsx hero template=Image
+
+```
+
+<Highlights features={['Works on native and web.', 'Accepts Tamagui style props.']} />
+
+## Props
+
+See the [Tamagui props](/docs/intro/props) with the [React Native Web Image props](https://necolas.github.io/react-native-web/docs/image/) merged onto them.

packages/site/data/docs/guides/design-systems.mdx

@@ -162,7 +162,7 @@ export default () => (
 When it compiles you should see something like:
 
 ```bash
-🥚                  app.tsx  16ms ׁ·    1 optimized · 1 flattened
+»                  app.tsx  16ms ׁ·    1 optimized · 1 flattened
 ```
 
 To get more information on any extraction, use the `// debug` pragma:

packages/site/lib/docsRoutes.ts

@@ -19,6 +19,7 @@ export const docsRoutes = [
       { title: 'Paragraph', route: '/docs/components/text' },
       { title: 'Button', route: '/docs/components/button' },
       { title: 'Headings', route: '/docs/components/headings' },
+      { title: 'Image', route: '/docs/components/image' },
       { title: 'Forms', route: '/docs/components/forms' },
       { title: 'Separator', route: '/docs/components/separator' },
       { title: 'Popover', route: '/docs/components/popover' },

packages/site/next.config.js

@@ -21,6 +21,7 @@ const transform = withPlugins(
       logTimings: true,
       // disableExtraction: false,
       disableExtraction: process.env.NODE_ENV === 'development',
+      excludeReactNativeWebExports: ['Switch', 'ProgressBar', 'Picker'],
     }),
     // // template for modifying webpack further:
     // (nextConfig = {}) => {

packages/test/README.md packages/test-playground/README.md

@@ -3916,6 +3916,7 @@ __metadata:
   resolution: "@tamagui/next-plugin@workspace:packages/next-plugin"
   dependencies:
     "@tamagui/build": ^1.0.0-alpha.58
+    "@tamagui/proxy-worm": ^1.0.0-alpha.63
     "@tamagui/static": ^1.0.0-alpha.63
     browserslist: ^4.19.1
     css-minimizer-webpack-plugin: ^3.1.3
@@ -3943,6 +3944,12 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/proxy-worm@^1.0.0-alpha.63, @tamagui/proxy-worm@workspace:packages/proxy-worm":
+  version: 0.0.0-use.local
+  resolution: "@tamagui/proxy-worm@workspace:packages/proxy-worm"
+  languageName: unknown
+  linkType: soft
+
 "@tamagui/site@workspace:packages/site":
   version: 0.0.0-use.local
   resolution: "@tamagui/site@workspace:packages/site"
@@ -4042,9 +4049,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@tamagui/test@workspace:packages/test":
+"@tamagui/test@workspace:packages/test-playground":
   version: 0.0.0-use.local
-  resolution: "@tamagui/test@workspace:packages/test"
+  resolution: "@tamagui/test@workspace:packages/test-playground"
   dependencies:
     "@tamagui/core": ^1.0.0-alpha.63
     "@tamagui/helpers": ^1.0.0-alpha.63