#427 WIP add basic histoire setup for later + type fixes

Author: andrewtavis

CONTRIBUTING.md

@@ -256,6 +256,19 @@ You can then visit http://localhost:8000/ to see the development backend build o
 </p>
 </details>
 
+<!-- <a id="component-stories"></a>
+
+### Component stories [`⇧`](#contents)
+
+activist uses [histoire](https://histoire.dev/) for stories so that frontend components and their documentation are all written in Vue. To view the stories, enter the following in the command line:
+
+```bash
+cd frontend
+yarn run story:dev
+```
+
+From there you'll be able to visit http://localhost:6006/ to view the documentation. Contributions are very welcome! -->
+
 <a id="style-guide"></a>
 
 ## Style guide [`⇧`](#contents)

backend/backend/custom_settings.py

@@ -1,9 +1,9 @@
 '''
-This file contains granular settings specifically related to the Activists project.
-For more general settings strictly related to the functioning of Django and its components, 
-check the path: backend/backend/settings.py
+This file contains granular settings specifically related to the activist project.
+For more general settings strictly related to the functioning of Django and its components,
+please check the path: backend/backend/settings.py
 '''
 
 # Pagination settings
-PAGINATION_PAGE_SIZE = 20 
-PAGINATION_MAX_PAGE_SIZE = 100
+PAGINATION_PAGE_SIZE = 20
+PAGINATION_MAX_PAGE_SIZE = 100

frontend/components/PasswordStrengthIndicator.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="h-4">
-    <div class="h-1 bg-light-distinct-text dark:bg-dark-distinct-text rounded-md">
+    <div
+      class="h-1 bg-light-distinct-text dark:bg-dark-distinct-text rounded-md"
+    >
       <div
         class="h-1 transition-width ease-in duration-500 rounded-md"
         :class="!!passwordValue.length ? `${color}` : ''"

frontend/components/btn/route/BtnRouteInternal.vue

@@ -20,5 +20,7 @@ import { getBtnDynamicClass } from "~/utils/btnUtils";
 
 const props = defineProps<BtnRoute>();
 
+const localePath = useLocalePath();
+
 const btnDynamicClass = getBtnDynamicClass(props.cta, props.fontSize);
 </script>

frontend/components/card/CardConnect.vue

@@ -90,10 +90,20 @@
               <PopupNewField
                 @on-cta-clicked="emit('on-new-account', account)"
                 @on-close-clicked="onClose(close)"
-                :title="'Add Account'"
-                :fieldNamePrompt="'Link to account'"
-                :ctaBtnLabel="'Add'"
-                :ctaBtnAriaLabel="'Add a new field'"
+                :title="$t('components.card-connect.app-account-popup-title')"
+                :fieldNamePrompt="
+                  $t(
+                    'components.card-connect.app-account-popup-field-name-prompt'
+                  )
+                "
+                :ctaBtnLabel="
+                  $t('components.card-connect.app-account-popup-cta-btn-label')
+                "
+                :ctaBtnAriaLabel="
+                  $t(
+                    'components.card-connect.app-account-popup-cta-btn-aria-label'
+                  )
+                "
               />
             </PopoverPanel>
           </transition>
@@ -107,7 +117,7 @@
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 
 const props = defineProps<{
-  socialLinks: string[];
+  socialLinks?: string[];
   userIsAdmin?: boolean;
 }>();
 

frontend/components/card/CardDangerZone.vue

@@ -58,7 +58,7 @@
 <script setup lang="ts">
 defineProps<{
   description: string;
-  ctaBtnText: { type: string; required: true };
+  ctaBtnText: string;
   ctaBtnAriaLabel: string;
 }>();
 </script>

frontend/components/card/CardDatePicker.vue

@@ -36,7 +36,6 @@
       />
     </div>
     <DatePicker
-      v-model="dateArray"
       :first-day-of-week="2"
       trim-weeks
       expanded

frontend/components/card/CardGetInvolved.vue

@@ -50,7 +50,7 @@
       <p>
         {{ $t("components.card-get-involved.legal-disclaimer-subtext") }}
       </p>
-      <CardLegalDisclaimer :disclaimer="disclaimer" />
+      <CardLegalDisclaimer v-if="disclaimer" :disclaimer="disclaimer" />
       <div class="flex pt-2 w-max">
         <BtnRouteInternal
           class="w-full"

frontend/components/card/CardMetric.vue

@@ -6,7 +6,7 @@
     <div
       class="pb-1 text-3xl font-bold tracking-tighter sm:text-4xl md:text-3xl xl:text-4xl"
     >
-      {{ number }}
+      {{ number.toString() }}
     </div>
     <div class="text-lg font-bold xl:text-xl">
       {{ text }}
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 defineProps<{
   text: string;
-  number: string;
+  number: number;
   textColor: string;
   borderColor: string;
   backgroundColor: string;

frontend/components/card/CardMetricsOverview.vue

@@ -9,28 +9,28 @@
     <div class="h-full grid grid-cols-2 gap-3 lg:gap-4 lg:grid-cols-4">
       <CardMetric
         :text="$t('_global.events')"
-        number="123"
+        :number="metrics['total events']"
         textColor="text-light-text dark:text-dark-text"
         borderColor="border-light-text dark:border-dark-text"
         backgroundColor="bg-light-distinct dark:bg-dark-distinct hover:bg-light-highlight dark:hover:bg-dark-highlight active:bg-light-distinct active:dark:bg-dark-distinct"
       />
       <CardMetric
         :text="$t('components.card-metrics-overview.action')"
-        number="100"
+        :number="metrics['action events']"
         textColor="text-light-text dark:text-dark-action-red"
         borderColor="border-light-text dark:border-dark-action-red"
         backgroundColor="bg-light-action-red/60 dark:bg-dark-action-red/20 hover:bg-light-action-red/50 hover:dark:bg-dark-action-red/30 active:bg-light-action-red/60 active:dark:bg-dark-action-red/20"
       />
       <CardMetric
         :text="$t('components.card-metrics-overview.learn')"
-        number="23"
+        :number="metrics['learn events']"
         textColor="text-light-text dark:text-dark-learn-blue"
         borderColor="border-light-text dark:border-dark-learn-blue"
         backgroundColor="bg-light-learn-blue/60 dark:bg-dark-learn-blue/20 hover:bg-light-learn-blue/50 hover:dark:bg-dark-learn-blue/30 active:bg-light-learn-blue/60 active:dark:bg-dark-learn-blue/20"
       />
       <CardMetric
         :text="$t('components.card-metrics-overview.new-organizations')"
-        number="10"
+        :number="metrics['new orgs']"
         textColor="text-light-text dark:text-dark-accepted-green"
         borderColor="border-light-text dark:border-dark-accepted-green"
         backgroundColor="bg-light-accepted-green/60 dark:bg-dark-accepted-green/20 hover:bg-light-accepted-green/50 dark:hover:bg-dark-accepted-green/30 active:bg-light-accepted-green/60 active:dark:bg-dark-accepted-green/20"
@@ -40,7 +40,11 @@
 </template>
 
 <script setup lang="ts">
+interface Metrics {
+  [key: string]: number;
+}
+
 defineProps<{
-  metrics: string[];
+  metrics: Metrics;
 }>();
 </script>