Tour

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TourAtAGlance(Component):
    template = """
      <div>
        <button id="tour-save" type="button">Save project</button>
        <c-CTour>
          <c-fill name="activator" data="{ activator_attrs }">
            <c-CButton c-attrs="activator_attrs">Show tour</c-CButton>
          </c-fill>
          <c-fill name="default">
            <c-CTourStep value="welcome">
              <c-fill name="title">Welcome to the workspace</c-fill>
              <c-fill name="default">This short tour explains the primary workflow.</c-fill>
            </c-CTourStep>
            <c-CTourStep value="save" target_id="tour-save" placement="bottom-end">
              <c-fill name="title">Save your work</c-fill>
              <c-fill name="default">Use this action when the project is ready.</c-fill>
            </c-CTourStep>
          </c-fill>
        </c-CTour>
      </div>
    """


preview = TourAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TourTargets(Component):
    template = """
      <section class="tour-targets">
        <c-CButton c-attrs="{'id':'tour-filter'}" variant="outline">Filter</c-CButton>
        <c-CButton c-attrs="{'id':'tour-export'}">Export</c-CButton>
        <c-CTour>
          <c-fill name="activator" data="{ activator_attrs }">
            <c-CButton c-attrs="activator_attrs">Explain actions</c-CButton>
          </c-fill>
          <c-fill name="default">
            <c-CTourStep value="filter" target_id="tour-filter" placement="bottom-start">
              <c-fill name="title">Narrow the results</c-fill>
              <c-fill name="default">Choose filters before exporting.</c-fill>
            </c-CTourStep>
            <c-CTourStep value="export" target_id="tour-export" placement="inline-end">
              <c-fill name="title">Export the current view</c-fill>
              <c-fill name="default">The export respects the active filters.</c-fill>
            </c-CTourStep>
          </c-fill>
        </c-CTour>
      </section>
    """
    css = ":where(.tour-targets){display:flex;flex-wrap:wrap;gap:1rem;align-items:center}"


preview = TourTargets()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TourCentered(Component):
    template = """
      <c-CTour size="sm">
        <c-fill name="activator" data="{ activator_attrs }">
          <c-CButton c-attrs="activator_attrs">Open introduction</c-CButton>
        </c-fill>
        <c-fill name="default">
          <c-CTourStep value="intro" c-describe="True">
            <c-fill name="title">A focused introduction</c-fill>
            <c-fill name="default">Centered steps do not require a page target.</c-fill>
          </c-CTourStep>
          <c-CTourStep value="finish">
            <c-fill name="title">You are ready</c-fill>
            <c-fill name="default">Finish closes the modal and restores focus.</c-fill>
          </c-CTourStep>
        </c-fill>
      </c-CTour>
    """


preview = TourCentered()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TourControlled(Component):
    template = """
      <section x-data="{open:false,active:0,last:'No request'}">
        <c-CButton @click="open=true">Open controlled tour</c-CButton>
        <output x-text="last">No request</output>
        <c-CTour
          $c-props="{
            open,
            active,
            onOpenChange:(next,detail)=>{last=`Open: ${detail.reason}`;open=next},
            onActiveChange:(next,detail)=>{last=`Step: ${detail.reason}`;active=next},
          }"
        >
          <c-CTourStep value="first">
            <c-fill name="title">First controlled step</c-fill>
            <c-fill name="default">The parent accepts each requested index.</c-fill>
          </c-CTourStep>
          <c-CTourStep value="second">
            <c-fill name="title">Second controlled step</c-fill>
            <c-fill name="default">Open and active ownership are independent.</c-fill>
          </c-CTourStep>
        </c-CTour>
      </section>
    """


preview = TourControlled()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TourMissingTargets(Component):
    template = """
      <c-CTour missing_target="skip">
        <c-fill name="activator" data="{ activator_attrs }">
          <c-CButton c-attrs="activator_attrs">Show conditional tour</c-CButton>
        </c-fill>
        <c-fill name="default">
          <c-CTourStep value="intro">
            <c-fill name="title">Conditional features</c-fill>
            <c-fill name="default">Unavailable targeted steps are skipped.</c-fill>
          </c-CTourStep>
          <c-CTourStep value="optional" target_id="feature-not-rendered">
            <c-fill name="title">Optional feature</c-fill>
            <c-fill name="default">This step is skipped because its target is absent.</c-fill>
          </c-CTourStep>
          <c-CTourStep value="summary">
            <c-fill name="title">Summary</c-fill>
            <c-fill name="default">The next available centered step remains usable.</c-fill>
          </c-CTourStep>
        </c-fill>
      </c-CTour>
    """


preview = TourMissingTargets()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TourCustomization(Component):
    template = """
      <c-CTour c-class_="['ocean-tour']">
        <c-fill name="activator" data="{ activator_attrs }">
          <c-CButton c-attrs="activator_attrs">Open custom tour</c-CButton>
        </c-fill>
        <c-fill name="close"><c-CIcon name="close" /></c-fill>
        <c-fill name="default">
          <c-CTourStep value="theme">
            <c-fill name="title">Ocean theme</c-fill>
            <c-fill name="default">Variables customize the stable Tour anatomy.</c-fill>
          </c-CTourStep>
        </c-fill>
      </c-CTour>
    """
    css = """
      :where(.ocean-tour) {
        --cui-tour-background: light-dark(#eff8ff, #102a43);
        --cui-tour-border-color: light-dark(#84caff, #2e90fa);
        --cui-tour-backdrop-color: rgb(2 32 71 / 62%);
        --cui-tour-radius: 1.25rem;
      }
    """


preview = TourCustomization()
preview  # noqa: B018