feat: add mobile features

README.md

@@ -11,6 +11,17 @@ The generated target datafiles from this repository are available at these URLs:
 - `production`: https://featurevisor-example-cloudflare.pages.dev/production/featurevisor-tag-all.json
 - `staging`: https://featurevisor-example-cloudflare.pages.dev/staging/featurevisor-tag-all.json
 
+The smaller mobile target is intended for the native iOS and Android examples:
+
+- `production`: https://featurevisor-example-cloudflare.pages.dev/production/featurevisor-mobile.json
+- `staging`: https://featurevisor-example-cloudflare.pages.dev/staging/featurevisor-mobile.json
+
+The mobile target contains three focused examples:
+
+- `mobile_theme` demonstrates variations only.
+- `mobile_feed` demonstrates variables only.
+- `mobile_experience` demonstrates variations and variables together.
+
 ### Usage with Featurevisor SDK
 
 Install the SDK in your application:

attributes/appVersion.yml

@@ -0,0 +1,3 @@
+description: Semantic version of the application
+type: string
+

features/mobile_experience.yml

@@ -0,0 +1,62 @@
+description: Mobile welcome experience with localized variations
+tags:
+  - all
+  - mobile
+
+bucketBy: userId
+
+variablesSchema:
+  welcome_message:
+    type: string
+    defaultValue: Welcome
+  show_new_navigation:
+    type: boolean
+    defaultValue: false
+
+variations:
+  - value: control
+    weight: 50
+    variables:
+      welcome_message: Welcome
+      show_new_navigation: false
+
+  - value: treatment
+    weight: 50
+    variables:
+      welcome_message: Welkom
+      show_new_navigation: true
+
+force:
+  staging:
+    - segments: netherlands
+      enabled: true
+      variation: treatment
+    - conditions:
+        - attribute: country
+          operator: equals
+          value: de
+      enabled: true
+      variation: control
+
+  production:
+    - segments: netherlands
+      enabled: true
+      variation: treatment
+    - conditions:
+        - attribute: country
+          operator: equals
+          value: de
+      enabled: true
+      variation: control
+
+rules:
+  staging:
+    - key: everyone
+      segments: "*"
+      percentage: 100
+
+  production:
+    - key: everyone
+      segments: "*"
+      percentage: 100
+

features/mobile_feed.yml

@@ -0,0 +1,58 @@
+description: Mobile feed configuration demonstrating variables without variations
+tags:
+  - all
+  - mobile
+
+bucketBy: userId
+
+variablesSchema:
+  page_size:
+    type: integer
+    defaultValue: 10
+  layout:
+    type: string
+    defaultValue: compact
+  sections:
+    type: array
+    items:
+      type: string
+    defaultValue:
+      - news
+  card_style:
+    type: object
+    properties:
+      cornerRadius:
+        type: integer
+      showImage:
+        type: boolean
+    required:
+      - cornerRadius
+      - showImage
+    defaultValue:
+      cornerRadius: 8
+      showImage: false
+
+rules:
+  staging:
+    - key: everyone
+      segments: "*"
+      percentage: 100
+
+  production:
+    - key: supported-apps
+      segments: supportedMobileApp
+      percentage: 100
+      variables:
+        page_size: 20
+        layout: cards
+        sections:
+          - featured
+          - news
+          - recommended
+        card_style:
+          cornerRadius: 16
+          showImage: true
+
+    - key: older-apps
+      segments: "*"
+      percentage: 25

features/mobile_theme.yml

@@ -0,0 +1,24 @@
+description: Theme experiment demonstrating variations without variables
+tags:
+  - all
+  - mobile
+
+bucketBy: userId
+
+variations:
+  - value: light
+    weight: 50
+
+  - value: contrast
+    weight: 50
+
+rules:
+  staging:
+    - key: everyone
+      segments: "*"
+      percentage: 100
+
+  production:
+    - key: everyone
+      segments: "*"
+      percentage: 100

featurevisor.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   environments: ["staging", "production"],
-  tags: ["all"],
+  tags: ["all", "mobile"],
   prettyState: true,
 };

segments/supportedMobileApp.yml

@@ -0,0 +1,6 @@
+description: Mobile application versions receiving the complete feed experience
+conditions:
+  - attribute: appVersion
+    operator: semverGreaterThanOrEquals
+    value: 2.0.0
+

targets/mobile.yml

@@ -0,0 +1,4 @@
+description: Include features intended for the iOS and Android examples
+
+tag: mobile
+

tests/mobile_experience.spec.yml

@@ -0,0 +1,35 @@
+feature: mobile_experience
+assertions:
+  - matrix:
+      environment:
+        - staging
+        - production
+    description: Netherlands receives the localized treatment in ${{ environment }}
+    at: 50
+    environment: ${{ environment }}
+    target: mobile
+    context:
+      userId: mobile-user
+      country: nl
+    expectedToBeEnabled: true
+    expectedVariation: treatment
+    expectedVariables:
+      welcome_message: Welkom
+      show_new_navigation: true
+
+  - matrix:
+      environment:
+        - staging
+        - production
+    description: Germany receives the control experience in ${{ environment }}
+    at: 50
+    environment: ${{ environment }}
+    target: mobile
+    context:
+      userId: mobile-user
+      country: de
+    expectedToBeEnabled: true
+    expectedVariation: control
+    expectedVariables:
+      welcome_message: Welcome
+      show_new_navigation: false

tests/mobile_feed.spec.yml

@@ -0,0 +1,59 @@
+feature: mobile_feed
+assertions:
+  - at: 25
+    description: Staging serves the compact feed to all application versions
+    environment: staging
+    target: mobile
+    context:
+      appVersion: 1.5.0
+    expectedToBeEnabled: true
+    expectedVariables:
+      page_size: 10
+      layout: compact
+      sections:
+        - news
+      card_style:
+        cornerRadius: 8
+        showImage: false
+
+  - at: 75
+    description: Supported production applications receive the rich feed
+    environment: production
+    target: mobile
+    context:
+      appVersion: 2.0.0
+    expectedToBeEnabled: true
+    expectedVariables:
+      page_size: 20
+      layout: cards
+      sections:
+        - featured
+        - news
+        - recommended
+      card_style:
+        cornerRadius: 16
+        showImage: true
+
+  - at: 20
+    description: Older production applications remain in the gradual rollout
+    environment: production
+    target: mobile
+    context:
+      appVersion: 1.5.0
+    expectedToBeEnabled: true
+    expectedVariables:
+      page_size: 10
+      layout: compact
+      sections:
+        - news
+      card_style:
+        cornerRadius: 8
+        showImage: false
+
+  - at: 30
+    description: Older production applications outside the rollout are disabled
+    environment: production
+    target: mobile
+    context:
+      appVersion: 1.5.0
+    expectedToBeEnabled: false

tests/mobile_theme.spec.yml

@@ -0,0 +1,23 @@
+feature: mobile_theme
+assertions:
+  - matrix:
+      environment:
+        - staging
+        - production
+    at: 25
+    description: The first half receives the light theme in ${{ environment }}
+    environment: ${{ environment }}
+    target: mobile
+    expectedToBeEnabled: true
+    expectedVariation: light
+
+  - matrix:
+      environment:
+        - staging
+        - production
+    at: 75
+    description: The second half receives the contrast theme in ${{ environment }}
+    environment: ${{ environment }}
+    target: mobile
+    expectedToBeEnabled: true
+    expectedVariation: contrast