Merge pull request #15 from Carifio24/more-stories

Add more stories to Storybook documentation

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import { setup, type Preview } from "@storybook/vue3";
+import { wwtPinia } from "@wwtelescope/engine-pinia";
 
 import { createVuetify } from 'vuetify';
 import * as components from 'vuetify/components';
@@ -10,6 +11,7 @@ const vuetify = createVuetify({
 });
 
 setup((app) => {
+  app.use(wwtPinia);
   app.use(vuetify);
 });
 

src/components/Gallery.vue

@@ -23,7 +23,7 @@
         <img
           class="noselect"
           :src="places[previewIndex] ? (getImageset(places[previewIndex])?.get_thumbnailUrl() ?? '') : ''"
-        />
+          />
       </div>
     </slot>
   </div>
@@ -69,11 +69,12 @@
 import { ref, reactive, computed, watch, onBeforeMount, toRaw } from "vue";
 import { engineStore } from "@wwtelescope/engine-pinia";
 import { Folder, Imageset, Place } from "@wwtelescope/engine";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 library.add(faTimes);
 
-import { filterInPlace } from "@/utils";
+import { filterInPlace } from "../utils";
 
 import { GalleryProps } from "../types";
 

src/components/LocationSelector.vue

@@ -8,15 +8,15 @@ import L, { CircleMarkerOptions, LeafletMouseEvent, Map } from 'leaflet';
 import "leaflet/dist/leaflet.css";
 import { notify } from "@kyvg/vue3-notification";
 
-import { useGeolocation } from "@/geolocation";
+import { useGeolocation } from "../geolocation";
 import { GeoJSONProp, LeafletMapOptions, LocationDeg, LocationSelectorProps, PlaceDeg } from "../types";
 
 
 const defaultMapOptions: LeafletMapOptions = {
   templateUrl: 'https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
   minZoom: 1,
   maxZoom: 20,
-  subdomains:['mt0','mt1','mt2','mt3'],
+  subdomains: ['mt0','mt1','mt2','mt3'],
   attribution: `&copy <a href="https://www.google.com/maps">Google Maps</a>`,
   className: 'map-tiles'
 };

src/stories/CreditLogos.stories.ts

@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
 import { Meta, StoryObj } from "@storybook/vue3";
-import { CreditLogosProps } from "../types";
-import CreditLogos from "../components/CreditLogos.vue";
+import { CreditLogos, CreditLogosProps } from "..";
 
 const meta: Meta<typeof CreditLogos> = {
   component: CreditLogos,

src/stories/FundingAcknowledgement.stories.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FundingAcknowledgement, FundingAcknowledgementProps } from "..";
+
+const meta: Meta<typeof FundingAcknowledgement> = {
+  component: FundingAcknowledgement,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof FundingAcknowledgement>;
+
+export const Primary: Story = {
+  render: (args: FundingAcknowledgementProps) => ({
+    components: { FundingAcknowledgement },
+    template: `<FundingAcknowledgement v-bind="args" />`,
+    setup() {
+      return { args };
+    }
+  }),
+  args: {
+    color: "#E0E0E0",
+    backgroundColor: "#0C3D91",
+  }
+};

src/stories/Gallery.stories.ts

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { Meta, StoryObj } from "@storybook/vue3";
+import { Gallery, GalleryProps } from "..";
+import { WWTComponent } from "@wwtelescope/engine-pinia";
+
+const meta: Meta<typeof Gallery> = {
+  component: Gallery,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Gallery>;
+
+export const Primary: Story = {
+  render: (args: GalleryProps) => ({
+    components: { Gallery, WWTComponent },
+    template: `
+      <div>
+        <WWTComponent
+          :wwtNamespace="storybook"
+          style="display: none"
+        />
+        <Gallery v-bind="args" />
+      </div>
+    `,
+    setup() {
+      return { args };
+    },
+  }),
+  args: {
+    wtmlUrl: "https://raw.githubusercontent.com/johnarban/wwt_interactives/main/images/m101/gallery.wtml",
+    columns: 2,
+    width: "500px",
+    maxHeight: "500px",
+    title: "Example Gallery",
+    selectedColor: "#1E90FF",
+    singleSelect: true,
+    highlightLastOnly: true,
+    previewIndex: 0,
+    closedText: "Open the gallery!",
+  },
+};

src/stories/IconButton.stories.ts

@@ -2,7 +2,7 @@
 
 import { Meta, StoryObj } from "@storybook/vue3";
 import { IconButtonProps } from "../types";
-import IconButton from "../components/IconButton.vue";
+import { IconButton } from "..";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBookOpen } from "@fortawesome/free-solid-svg-icons";

src/stories/LocationSelector.stories.ts

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { Meta, StoryObj } from "@storybook/vue3";
+import { LocationSelector, LocationSelectorProps } from "..";
+import { ref } from "vue";
+
+const meta: Meta<typeof LocationSelector> = {
+  component: LocationSelector,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof LocationSelector>;
+
+// Default location is Harvard College Observatory
+const location = ref({
+  latitudeDeg: 42.3814,
+  longitudeDeg: -71.1281,
+});
+console.log(location);
+export const Primary: Story = {
+  render: (args: LocationSelectorProps) => ({
+    components: { LocationSelector },
+    template: `
+      <LocationSelector
+        style="width: 300px; height: 400px;"
+        v-bind="args"
+      />`,
+    setup() {
+      return { args };
+    }
+  }),
+  decorators: [
+    () => {
+      return { template: `<div style="display: flex; justify-content: center"><story /></div>` };
+    }
+  ],
+  args: {
+    activatorColor: "#ffffff",
+    detectLocation: true,
+    modelValue: location,
+    mapOptions: {
+      templateUrl: 'https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
+      minZoom: 1,
+      maxZoom: 20,
+      subdomains:['mt0','mt1','mt2','mt3'],
+      attribution: `&copy <a href="https://www.google.com/maps">Google Maps</a>`,
+      className: 'map-tiles',
+    },
+    places: [],
+    placeCircleOptions: {
+      color: "#0000FF",
+      fillColor: "#3333FF",
+      fillOpacity: 0.5,
+      radius: 150,
+    },
+    placeSelectable: true,
+    selectable: true,
+    selectedCircleOptions: {
+      color: "#FF0000",
+      fillColor: "#FF0033",
+      fillOpacity: 0.5,
+      radius: 200,
+    },
+    selectionEvent: "click",
+    worldRadii: true,
+    geoJsonFiles: [],
+    layers: [],
+  }
+};

src/stories/WwtHud.stories.ts

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { Meta, StoryObj } from "@storybook/vue3";
+import { engineStore, WWTComponent } from "@wwtelescope/engine-pinia";
+import { WwtHud, WwtHUDProps } from "..";
+
+const meta: Meta<typeof WwtHud> = {
+  component: WwtHud,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof WwtHud>;
+
+export const Primary: Story = {
+  render: (args: WwtHUDProps) => {
+    const store = engineStore();
+    return {
+      components: { WwtHud, WWTComponent },
+      template: `
+        <div style="width: 300px; height: 600px">
+          <WWTComponent
+            :wwtNamespace="storybook"
+            style="display: none"
+          />
+          <WwtHud v-bind="args" :store="store" />
+        </div>
+      `,
+      setup() {
+        return { args, store };
+      }
+    };
+  },
+  args: {
+    location: {
+      top: "50%",
+      left: "50%",
+    },
+    offsetCenter: {
+      x: 0.5,
+      y: 0.5,
+    },
+    otherVariables: {},
+    fontSize: "14pt",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    textShadow: null,
+  }
+};

src/stories/assets/gallery.wtml

@@ -0,0 +1,120 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<Folder Browseable="True"
+  Group="Explorer"
+  Name="Folder"
+  Searchable="True">
+  <Place
+    Name="Discovery Image (Koichi Itagaki)"
+    RA="14.054307666666666"
+    Dec="54.312844"
+    ZoomLevel="0.6815819999999999"
+    DataSetType="Sky"
+    Opacity="100"
+    Thumbnail="https://johnarban.github.io/wwt_interactives/images/m101/discovery_thumb.jpg"
+    Constellation="">
+    <ForegroundImageSet>
+          <ImageSet DataSetType="Sky"
+            BandPass="Visible"
+            Url="https://johnarban.github.io/wwt_interactives/images/m101/m101_discovery.jpg"
+            TileLevels="0"
+            WidthFactor="2"
+            Rotation="-2.8000000000000114"
+            Projection="SkyImage"
+            FileType=".tif"
+            CenterY="54.312844"
+            CenterX="210.814615"
+            BottomsUp="False"
+            OffsetX="443.6"
+            OffsetY="198"
+            BaseTileLevel="0"
+            BaseDegreesPerTile="0.0003442333333333333">
+        <Credits>Koichi Itagaki</Credits>
+        <CreditsUrl>https://www.wis-tns.org/object/2023ixf/discovery-cert</CreditsUrl>
+        <ThumbnailUrl>https://johnarban.github.io/wwt_interactives/images/m101/discovery_thumb.jpg</ThumbnailUrl>
+      </ImageSet>
+    </ForegroundImageSet>
+  </Place>
+  <Place Angle="0"
+    AngularSize="0"
+    Constellation="UMA"
+    DataSetType="Sky"
+    Dec="54.35401801671693"
+    Magnitude="0"
+    Name="Hubble image from before the Supernova"
+    Opacity="100"
+    RA="14.052657702093098"
+    Rotation="0"
+    Thumbnail="https://johnarban.github.io/wwt_interactives/images/m101/hubble_m101/thumb.jpg"
+    ZoomLevel="3.009844396799986">
+    <ForegroundImageSet>
+      <ImageSet BandPass="Visible"
+        BaseDegreesPerTile="0.4028863610879981"
+        BaseTileLevel="0"
+        BottomsUp="False"
+        CenterX="210.76050104577"
+        CenterY="54.34032252248"
+        DataSetType="Sky"
+        ElevationModel="False"
+        FileType=".png"
+        Generic="False"
+        Name="Pinwheel Galaxy (Hubble)"
+        OffsetX="-0.017180822476658673"
+        OffsetY="0.013613773026242323"
+        Projection="Tan"
+        QuadTreeMap=""
+        Rotation="0.28497719299999946"
+        Sparse="True"
+        StockSet="False"
+        TileLevels="5"
+        Url="https://johnarban.github.io/wwt_interactives/images/m101/hubble_m101/{1}/{3}/{3}_{2}.png"
+        WidthFactor="2">
+        <Credits>NASA, ESA, K. Kuntz (JHU), F. Bresolin (University of Hawaii), J. Trauger (Jet Propulsion Lab), J. Mould (NOAO), Y.-H. Chu (University of Illinois, Urbana), and STScI</Credits>
+        <CreditsUrl>https://hubblesite.org/contents/news-releases/2009/news-2009-07</CreditsUrl>
+        <Description>Messier 101 has a pancake-like shape that we view face-on. This perspective shows off the spiral structure that gives it the nickname the Pinwheel Galaxy. In this Hubble image, taken in visible light, the bright blue clumps are regions where new stars have formed. The yellowish core consists mainly of old stars. The dark brown dust lanes are colder and denser regions where interstellar clouds may collapse to form new stars. All of these features are shaped into a beautiful spiral pattern by a combination of gravity and rotation. Astronomers use visible light to study where and how stars form in spiral galaxies.</Description>
+        <ThumbnailUrl>https://johnarban.github.io/wwt_interactives/images/m101/hubble_m101/thumb.jpg</ThumbnailUrl>
+      </ImageSet>
+    </ForegroundImageSet>
+  </Place>
+  <Place Angle="0"
+    AngularSize="0"
+    Constellation="UMA"
+    DataSetType="Sky"
+    Dec="54.31814483807457"
+    Magnitude="0"
+    Name="Gemini Observatory"
+    Opacity="100"
+    RA="14.054180763541849"
+    Rotation="0"
+    Thumbnail="https://johnarban.github.io/wwt_interactives/images/m101/gemini_m101/thumb.jpg"
+    ZoomLevel="0.9104310121605126">
+    <ForegroundImageSet>
+      <ImageSet BandPass="Visible"
+        BaseDegreesPerTile="0.18390368809964985"
+        BaseTileLevel="0"
+        BottomsUp="False"
+        CenterX="210.81274987346"
+        CenterY="54.318122349753"
+        DataSetType="Sky"
+        ElevationModel="False"
+        FileType=".png"
+        Generic="False"
+        Name="SN 2023ixf (Gemini Obs.)"
+        OffsetX="4.489836135245358e-05"
+        OffsetY="2.244918067622679e-05"
+        Projection="Tan"
+        QuadTreeMap=""
+        Rotation="0.09999999999999926"
+        Sparse="True"
+        StockSet="False"
+        TileLevels="4"
+        Url="https://johnarban.github.io/wwt_interactives/images/m101/gemini_m101/{1}/{3}/{3}_{2}.png"
+        WidthFactor="2">
+        <Credits>International Gemini Observatory/NOIRLab/NSF/AURA Image Processing: J. Miller (Gemini Observatory/NSF’s NOIRLab), M. Rodriguez (Gemini Observatory/NSF’s NOIRLab), M. Zamani (NSF’s NOIRLab), T.A. Rector (University of Alaska Anchorage/NSF’s NOIRLab) &amp; D. de Martin (NSF’s NOIRLab). Astronomical processing done with DRAGONS 3.1.  </Credits>
+        <CreditsUrl>https://noirlab.edu/public/images/noirlab2315a/</CreditsUrl>
+        <Description>Gemini North, part of the International Gemini Observatory operated by NSF’s NOIRLab, is back observing the night sky following the repair and refurbishment of its primary mirror. The telescope’s debut observation captured the supernova dubbed SN 2023ixf (lower left), which was discovered on 19 May by Japanese astronomer Koichi Itagaki. This dazzling point of light, the closest supernova seen in the past five years, is located along one of the spiral arms of the Pinwheel Galaxy (Messier 101). </Description>
+        <ThumbnailUrl>https://johnarban.github.io/wwt_interactives/images/m101/gemini_m101/thumb.jpg</ThumbnailUrl>
+      </ImageSet>
+    </ForegroundImageSet>
+  </Place>
+
+</Folder>