openuispec 0.1.45 → 0.1.47

package/examples/social-app/openuispec/screens/discover.yaml

@@ -0,0 +1,78 @@
+discover:
+  semantic: "Discover screen with search, trending topics, and suggested creators"
+  status: draft
+
+  data:
+    creators:
+      source: "api.discover.creators"
+      loading: { skeleton: true, count: 6 }
+    trends:
+      source: "api.discover.trends"
+      loading: { skeleton: true, count: 5 }
+    tags:
+      source: "api.discover.tags"
+      loading: { skeleton: true, count: 10 }
+
+  state:
+    search_query: { type: string, default: "" }
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: search_bar
+        contract: input_field
+        input_type: text
+        props:
+          label: "$t:discover.search_placeholder"
+          value: "state.search_query"
+          icon: "search"
+        action:
+          type: navigate
+          destination: "screens/search_results"
+          params: { query: "state.search_query" }
+
+      - id: trending_section
+        header: "$t:discover.trending"
+        contract: collection
+        variant: list
+        props:
+          data: "trends"
+          item_contract: data_display
+          item_props_map:
+            title: "item.label"
+            subtitle: "{item.post_count | format:number}"
+        action:
+          type: navigate
+          destination: "screens/search_results"
+          params: { query: "{item.label}", tab: "posts" }
+
+      - id: tags_section
+        header: "$t:discover.popular_tags"
+        contract: collection
+        variant: chip_row
+        props:
+          data: "tags"
+          item_contract: action_trigger
+          item_props_map:
+            label: "#{item.name}"
+        action:
+          type: navigate
+          destination: "screens/search_results"
+          params: { query: "#{item.name}", tab: "posts" }
+
+      - id: creators_section
+        header: "$t:discover.suggested_creators"
+        contract: collection
+        variant: horizontal_scroll
+        props:
+          data: "creators"
+          item_contract: data_display
+          item_props_map:
+            title: "item.display_name"
+            subtitle: "@{item.handle}"
+            body: "item.bio"
+            leading: "item.avatar_url"
+        action:
+          type: navigate
+          destination: "screens/profile_user"
+          params: { user_id: "{item.id}" }

package/examples/social-app/openuispec/screens/edit_profile.yaml

@@ -0,0 +1,78 @@
+edit_profile:
+  semantic: "Edit current user's profile fields"
+  status: draft
+
+  data:
+    profile:
+      source: "api.profiles.me"
+
+  state:
+    display_name: { type: string, default: "{profile.display_name}" }
+    handle: { type: string, default: "{profile.handle}" }
+    bio: { type: string, default: "{profile.bio}" }
+    website: { type: string, default: "{profile.website}" }
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: avatar_section
+        contract: data_display
+        variant: card
+        props:
+          title: "$t:edit_profile.avatar"
+          media: "{profile.avatar_url}"
+
+      - id: form
+        form_id: "profile_form"
+        children:
+          - contract: input_field
+            input_type: text
+            props:
+              label: "$t:edit_profile.display_name"
+              value: "state.display_name"
+              required: true
+            data_binding: "form.display_name"
+
+          - contract: input_field
+            input_type: text
+            props:
+              label: "$t:edit_profile.handle"
+              value: "state.handle"
+              required: true
+            data_binding: "form.handle"
+
+          - contract: input_field
+            input_type: text
+            props:
+              label: "$t:edit_profile.bio"
+              value: "state.bio"
+              multiline: true
+              max_length: 160
+            data_binding: "form.bio"
+
+          - contract: input_field
+            input_type: text
+            props:
+              label: "$t:edit_profile.website"
+              value: "state.website"
+              keyboard: url
+            data_binding: "form.website"
+
+      - id: save_button
+        contract: action_trigger
+        variant: primary
+        props:
+          label: "$t:edit_profile.save"
+          full_width: true
+        action:
+          type: sequence
+          actions:
+            - type: api_call
+              endpoint: "api.profiles.updateMe"
+              body:
+                display_name: "state.display_name"
+                handle: "state.handle"
+                bio: "state.bio"
+                website: "state.website"
+            - { type: feedback, variant: toast, message: "$t:edit_profile.saved" }
+            - { type: dismiss }

package/examples/social-app/openuispec/screens/home_feed.yaml

@@ -0,0 +1,138 @@
+home_feed:
+  semantic: "Main feed with stories carousel, post list, and create post action"
+  status: draft
+
+  data:
+    feed:
+      source: "api.feed.list"
+      params:
+        filter: "state.active_filter"
+        search: "state.search_query"
+        cursor: "state.cursor"
+      loading: { skeleton: true, count: 5 }
+      empty: { message: "$t:home.empty_feed" }
+    stories:
+      source: "api.feed.stories"
+      loading: { skeleton: true, count: 8 }
+
+  state:
+    active_filter:
+      type: enum
+      values: [all, following, popular]
+      default: all
+    search_query: { type: string, default: "" }
+    cursor: { type: string, default: "" }
+
+  navigation:
+    contract: nav_container
+    props:
+      items:
+        - id: "home"
+          label: "$t:nav.home"
+          icon: "home"
+          destination: "screens/home_feed"
+        - id: "discover"
+          label: "$t:nav.discover"
+          icon: "discover"
+          destination: "screens/discover"
+        - id: "notifications"
+          label: "$t:nav.notifications"
+          icon: "notifications"
+          destination: "screens/notifications"
+          badge:
+            count: "api.notifications.unreadCount"
+        - id: "profile"
+          label: "$t:nav.profile"
+          icon: "profile"
+          destination: "screens/profile_self"
+    adaptive:
+      compact: { variant: tab_bar }
+      expanded: { variant: sidebar }
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: stories_bar
+        contract: collection
+        variant: horizontal_scroll
+        props:
+          data: "stories"
+          item_contract: data_display
+          item_props_map:
+            title: "item.author.display_name"
+            media: "item.preview_url"
+        action:
+          type: navigate
+          destination: "screens/post_detail"
+          params: { post_id: "{item.id}" }
+
+      - id: filter_chips
+        contract: collection
+        variant: chip_row
+        props:
+          data: "state.active_filter"
+          item_contract: action_trigger
+          item_props_map:
+            label: "item.label"
+          options:
+            - { value: "all", label: "$t:home.filter_all" }
+            - { value: "following", label: "$t:home.filter_following" }
+            - { value: "popular", label: "$t:home.filter_popular" }
+
+      - id: post_list
+        contract: collection
+        variant: list
+        props:
+          data: "feed"
+          item_contract: data_display
+          item_props_map:
+            title: "item.author.display_name"
+            subtitle: "@{item.author.handle}"
+            body: "item.body"
+            media: "item.media_url"
+            leading: "item.author.avatar_url"
+            metadata:
+              like_count: "{item.like_count | format:number}"
+              comment_count: "{item.comment_count | format:number}"
+              timestamp: "{item.published_at | format:date_relative}"
+          item_actions:
+            - id: like
+              icon: "like"
+              icon_active: "like_fill"
+              action: { type: api_call, endpoint: "api.posts.toggleLike", params: { id: "{item.id}" } }
+            - id: comment
+              icon: "comment"
+              action: { type: navigate, destination: "screens/post_detail", params: { post_id: "{item.id}" } }
+            - id: share
+              icon: "share"
+              action: { type: share, content: "{item.body}" }
+            - id: save
+              icon: "bookmark"
+              icon_active: "bookmark_fill"
+              action: { type: api_call, endpoint: "api.posts.save", params: { id: "{item.id}" } }
+        action:
+          type: navigate
+          destination: "screens/post_detail"
+          params: { post_id: "{item.id}" }
+        pagination:
+          type: infinite_scroll
+          cursor_field: "cursor"
+
+      - id: create_fab
+        contract: action_trigger
+        variant: fab
+        position: "floating"
+        props:
+          icon: "create_post"
+          label: "$t:nav.create"
+          aria_label: "$t:nav.create"
+        action:
+          type: navigate
+          destination: "flows/create_post"
+        adaptive:
+          compact:
+            position: "bottom-right"
+            inset: { bottom: 80, right: 16 }
+          expanded:
+            position: "bottom-right"
+            inset: { bottom: 32, right: 32 }

package/examples/social-app/openuispec/screens/messages_inbox.yaml

@@ -0,0 +1,43 @@
+messages_inbox:
+  semantic: "Conversations list with search and unread indicators"
+  status: draft
+
+  data:
+    conversations:
+      source: "api.messages.list"
+      params:
+        search: "state.search_query"
+      loading: { skeleton: true, count: 6 }
+      empty: { message: "$t:messages.empty_inbox" }
+
+  state:
+    search_query: { type: string, default: "" }
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: search
+        contract: input_field
+        input_type: text
+        props:
+          label: "$t:messages.search_placeholder"
+          value: "state.search_query"
+          icon: "search"
+
+      - id: conversation_list
+        contract: collection
+        variant: list
+        props:
+          data: "conversations"
+          item_contract: data_display
+          item_props_map:
+            title: "item.participant.display_name"
+            subtitle: "item.last_message.body"
+            leading: "item.participant.avatar_url"
+            metadata:
+              timestamp: "{item.last_message.created_at | format:date_relative}"
+              unread_count: "{item.unread_count}"
+        action:
+          type: navigate
+          destination: "screens/chat_detail"
+          params: { conversation_id: "{item.id}" }

package/examples/social-app/openuispec/screens/notifications.yaml

@@ -0,0 +1,29 @@
+notifications:
+  semantic: "Notification list with mark-as-read"
+  status: draft
+
+  data:
+    notifications:
+      source: "api.notifications.list"
+      loading: { skeleton: true, count: 8 }
+      empty: { message: "$t:notifications.empty" }
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: notification_list
+        contract: collection
+        variant: list
+        props:
+          data: "notifications"
+          item_contract: data_display
+          item_props_map:
+            title: "item.actor.display_name"
+            subtitle: "item.message"
+            leading: "item.actor.avatar_url"
+            metadata:
+              timestamp: "{item.created_at | format:date_relative}"
+        action:
+          type: api_call
+          endpoint: "api.notifications.markRead"
+          params: { id: "{item.id}" }

package/examples/social-app/openuispec/screens/post_detail.yaml

@@ -0,0 +1,86 @@
+post_detail:
+  semantic: "Full post view with comments thread and interaction actions"
+  status: draft
+
+  params:
+    post_id: { type: string, required: true }
+
+  data:
+    post:
+      source: "api.posts.getById"
+      params: { id: "params.post_id" }
+      loading: { skeleton: true }
+    comments:
+      source: "api.posts.comments"
+      params: { id: "params.post_id" }
+      loading: { skeleton: true, count: 3 }
+      empty: { message: "$t:post.no_comments" }
+
+  state:
+    comment_text: { type: string, default: "" }
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: post_content
+        contract: data_display
+        variant: hero
+        props:
+          title: "{post.author.display_name}"
+          subtitle: "@{post.author.handle}"
+          body: "{post.body}"
+          media: "{post.media_url}"
+          leading: "{post.author.avatar_url}"
+          metadata:
+            like_count: "{post.like_count | format:number}"
+            comment_count: "{post.comment_count | format:number}"
+            timestamp: "{post.published_at | format:date}"
+        action:
+          type: navigate
+          destination: "screens/profile_user"
+          params: { user_id: "{post.author_id}" }
+
+      - id: post_actions
+        contract: action_trigger
+        variant: secondary
+        props:
+          label: "$t:post.like_action"
+          icon: "like"
+        action:
+          type: api_call
+          endpoint: "api.posts.toggleLike"
+          params: { id: "params.post_id" }
+
+      - id: comments_list
+        header: "$t:post.comments_header"
+        contract: collection
+        variant: list
+        props:
+          data: "comments"
+          item_contract: data_display
+          item_props_map:
+            title: "item.author.display_name"
+            body: "item.body"
+            leading: "item.author.avatar_url"
+            metadata:
+              timestamp: "{item.created_at | format:date_relative}"
+        action:
+          type: navigate
+          destination: "screens/profile_user"
+          params: { user_id: "{item.author_id}" }
+
+      - id: comment_input
+        contract: input_field
+        input_type: text
+        props:
+          label: "$t:post.comment_placeholder"
+          value: "state.comment_text"
+          multiline: true
+          trailing_action:
+            icon: "send"
+            action:
+              type: sequence
+              actions:
+                - { type: api_call, endpoint: "api.posts.comments", method: POST, body: { body: "state.comment_text", post_id: "params.post_id" } }
+                - { type: set_state, key: "comment_text", value: "" }
+                - { type: feedback, variant: toast, message: "$t:post.comment_sent" }

package/examples/social-app/openuispec/screens/profile_self.yaml

@@ -0,0 +1,53 @@
+profile_self:
+  semantic: "Current user's own profile with posts, stats, and edit action"
+  status: draft
+
+  data:
+    profile:
+      source: "api.profiles.me"
+      loading: { skeleton: true }
+    posts:
+      source: "api.profiles.myPosts"
+      loading: { skeleton: true, count: 3 }
+      empty: { message: "$t:profile.no_posts_self" }
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: profile_header
+        contract: data_display
+        variant: hero
+        props:
+          title: "{profile.display_name}"
+          subtitle: "@{profile.handle}"
+          body: "{profile.bio}"
+          leading: "{profile.avatar_url}"
+          trailing:
+            contract: action_trigger
+            variant: secondary
+            props:
+              label: "$t:profile.edit_button"
+              icon: "edit"
+            action:
+              type: navigate
+              destination: "screens/edit_profile"
+
+      - id: user_posts
+        header: "$t:profile.posts_header"
+        contract: collection
+        variant: list
+        props:
+          data: "posts"
+          item_contract: data_display
+          item_props_map:
+            title: "item.author.display_name"
+            body: "item.body"
+            media: "item.media_url"
+            metadata:
+              like_count: "{item.like_count | format:number}"
+              comment_count: "{item.comment_count | format:number}"
+              timestamp: "{item.published_at | format:date_relative}"
+        action:
+          type: navigate
+          destination: "screens/post_detail"
+          params: { post_id: "{item.id}" }

package/examples/social-app/openuispec/screens/profile_user.yaml

@@ -0,0 +1,60 @@
+profile_user:
+  semantic: "Another user's profile with their posts and follow action"
+  status: draft
+
+  params:
+    user_id: { type: string, required: true }
+
+  data:
+    profile:
+      source: "api.profiles.getById"
+      params: { id: "params.user_id" }
+      loading: { skeleton: true }
+    posts:
+      source: "api.profiles.posts"
+      params: { id: "params.user_id" }
+      loading: { skeleton: true, count: 3 }
+      empty: { message: "$t:profile.no_posts_user" }
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: profile_header
+        contract: data_display
+        variant: hero
+        props:
+          title: "{profile.display_name}"
+          subtitle: "@{profile.handle}"
+          body: "{profile.bio}"
+          leading: "{profile.avatar_url}"
+          trailing:
+            contract: action_trigger
+            variant: primary
+            props:
+              label: "$t:profile.follow_button"
+            action:
+              type: api_call
+              endpoint: "api.profiles.follow"
+              params: { id: "params.user_id" }
+
+      - id: user_posts
+        header: "$t:profile.posts_header"
+        contract: collection
+        variant: list
+        props:
+          data: "posts"
+          item_contract: data_display
+          item_props_map:
+            title: "item.author.display_name"
+            subtitle: "@{item.author.handle}"
+            body: "item.body"
+            media: "item.media_url"
+            leading: "item.author.avatar_url"
+            metadata:
+              like_count: "{item.like_count | format:number}"
+              comment_count: "{item.comment_count | format:number}"
+              timestamp: "{item.published_at | format:date_relative}"
+        action:
+          type: navigate
+          destination: "screens/post_detail"
+          params: { post_id: "{item.id}" }

package/examples/social-app/openuispec/screens/search_results.yaml

@@ -0,0 +1,62 @@
+search_results:
+  semantic: "Search results with tabbed views for posts, people, and tags"
+  status: draft
+
+  params:
+    query: { type: string, required: true }
+    tab: { type: string, default: "posts" }
+
+  data:
+    results:
+      source: "api.discover.search"
+      params:
+        query: "params.query"
+        tab: "state.active_tab"
+      loading: { skeleton: true, count: 5 }
+      empty: { message: "$t:search.no_results" }
+
+  state:
+    active_tab:
+      type: enum
+      values: [posts, people, tags]
+      default: "params.tab"
+
+  layout:
+    type: scroll_vertical
+    sections:
+      - id: search_bar
+        contract: input_field
+        input_type: text
+        props:
+          label: "$t:search.placeholder"
+          value: "params.query"
+          icon: "search"
+
+      - id: tab_bar
+        contract: collection
+        variant: chip_row
+        props:
+          data: "state.active_tab"
+          item_contract: action_trigger
+          item_props_map:
+            label: "item.label"
+          options:
+            - { value: "posts", label: "$t:search.tab_posts" }
+            - { value: "people", label: "$t:search.tab_people" }
+            - { value: "tags", label: "$t:search.tab_tags" }
+
+      - id: results_list
+        contract: collection
+        variant: list
+        props:
+          data: "results"
+          item_contract: data_display
+          item_props_map:
+            title: "item.title"
+            subtitle: "item.subtitle"
+            body: "item.body"
+            leading: "item.avatar_url"
+        action:
+          type: navigate
+          destination: "screens/post_detail"
+          params: { post_id: "{item.id}" }