From e8eefa1fc94ec337f2adee5bbe41cfa139d2ec44 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 13 Dec 2023 11:54:16 -0500
Subject: [PATCH] Basic sidebar stories

---
 src/pages/app/fixtures/me.json                | 32 +++++++++++++++++++
 src/pages/app/sidebar/Projects.svelte         |  1 -
 .../sidebar/stories/Project.stories.svelte    | 16 ++++++++++
 .../stories/ProjectFilters.stories.svelte     | 28 ++++++++++++++++
 .../sidebar/stories/Projects.stories.svelte   | 28 ++++++++++++++++
 .../sidebar/stories/Sidebar.stories.svelte    | 28 ++++++++++++++++
 src/pages/app/stories/mock.js                 |  4 +++
 7 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/app/fixtures/me.json
 create mode 100644 src/pages/app/sidebar/stories/Project.stories.svelte
 create mode 100644 src/pages/app/sidebar/stories/ProjectFilters.stories.svelte
 create mode 100644 src/pages/app/sidebar/stories/Projects.stories.svelte
 create mode 100644 src/pages/app/sidebar/stories/Sidebar.stories.svelte

diff --git a/src/pages/app/fixtures/me.json b/src/pages/app/fixtures/me.json
new file mode 100644
index 000000000..509ba9dc0
--- /dev/null
+++ b/src/pages/app/fixtures/me.json
@@ -0,0 +1,32 @@
+{
+  "id": 1020,
+  "avatar_url": "https://cdn.muckrock.com/media/avatars/20140211-0O1A7147-2.jpg",
+  "feature_level": 2,
+  "is_staff": true,
+  "name": "Chris Amico",
+  "organization": {
+    "id": 125,
+    "avatar_url": "https://cdn.muckrock.com/media/org_avatars/logo.png",
+    "individual": false,
+    "name": "MuckRock",
+    "slug": "muckrock",
+    "uuid": "97109cc6-e52e-41e7-adb7-834ab7c6819c",
+    "monthly_credits": 7083,
+    "purchased_credits": 0,
+    "credit_reset_date": "2023-12-16",
+    "monthly_credit_allowance": 10000,
+    "plan": "Admin"
+  },
+  "organizations": [
+    19198,
+    170,
+    125
+  ],
+  "admin_organizations": [
+    19198,
+    170
+  ],
+  "username": "chrisamico",
+  "uuid": "800bbb85-ea7a-46e9-8f56-16f862e66e52",
+  "verified_journalist": true
+}
diff --git a/src/pages/app/sidebar/Projects.svelte b/src/pages/app/sidebar/Projects.svelte
index f83c2606d..b2fa254e4 100644
--- a/src/pages/app/sidebar/Projects.svelte
+++ b/src/pages/app/sidebar/Projects.svelte
@@ -7,7 +7,6 @@
 
   import { projects } from "@/manager/projects.js";
   import { newProject } from "@/manager/layout.js";
-  import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
 
   function sort(projects) {
     if (projects === null) return [];
diff --git a/src/pages/app/sidebar/stories/Project.stories.svelte b/src/pages/app/sidebar/stories/Project.stories.svelte
new file mode 100644
index 000000000..7b2b411ae
--- /dev/null
+++ b/src/pages/app/sidebar/stories/Project.stories.svelte
@@ -0,0 +1,16 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Project from "../Project.svelte";
+
+  import projects from "../../fixtures/projects.json";
+
+  export const meta = {
+    title: "App / Sidebar / Project",
+    component: Project,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story name="default">
+  <Project project={projects.results[0]} />
+</Story>
diff --git a/src/pages/app/sidebar/stories/ProjectFilters.stories.svelte b/src/pages/app/sidebar/stories/ProjectFilters.stories.svelte
new file mode 100644
index 000000000..03b7def0b
--- /dev/null
+++ b/src/pages/app/sidebar/stories/ProjectFilters.stories.svelte
@@ -0,0 +1,28 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ProjectFilters from "../ProjectFilters.svelte";
+
+  import * as mock from "../../stories/mock.js";
+
+  export const meta = {
+    title: "App / Sidebar / Project Filters",
+    component: ProjectFilters,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story
+  name="default"
+  parameters={{
+    msw: {
+      handlers: [
+        mock.users.data,
+        mock.users.me,
+        mock.organizations.data,
+        mock.projects.data,
+      ],
+    },
+  }}
+>
+  <ProjectFilters />
+</Story>
diff --git a/src/pages/app/sidebar/stories/Projects.stories.svelte b/src/pages/app/sidebar/stories/Projects.stories.svelte
new file mode 100644
index 000000000..661f03b6c
--- /dev/null
+++ b/src/pages/app/sidebar/stories/Projects.stories.svelte
@@ -0,0 +1,28 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Projects from "../Projects.svelte";
+
+  import * as mock from "../../stories/mock.js";
+
+  export const meta = {
+    title: "App / Sidebar / Projects",
+    component: Projects,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story
+  name="default"
+  parameters={{
+    msw: {
+      handlers: [
+        mock.users.data,
+        mock.users.me,
+        mock.organizations.data,
+        mock.projects.data,
+      ],
+    },
+  }}
+>
+  <Projects />
+</Story>
diff --git a/src/pages/app/sidebar/stories/Sidebar.stories.svelte b/src/pages/app/sidebar/stories/Sidebar.stories.svelte
new file mode 100644
index 000000000..588251425
--- /dev/null
+++ b/src/pages/app/sidebar/stories/Sidebar.stories.svelte
@@ -0,0 +1,28 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Sidebar from "../Sidebar.svelte";
+
+  import * as mock from "../../stories/mock.js";
+
+  export const meta = {
+    title: "App / Sidebar / Sidebar",
+    component: Sidebar,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story
+  name="default"
+  parameters={{
+    msw: {
+      handlers: [
+        mock.users.data,
+        mock.users.me,
+        mock.organizations.data,
+        mock.projects.data,
+      ],
+    },
+  }}
+>
+  <Sidebar expanded />
+</Story>
diff --git a/src/pages/app/stories/mock.js b/src/pages/app/stories/mock.js
index 921e2a86f..287a8fe9d 100644
--- a/src/pages/app/stories/mock.js
+++ b/src/pages/app/stories/mock.js
@@ -4,9 +4,11 @@ import { baseApiUrl } from "../../../api/base.js";
 import usersFixture from "../fixtures/users.json";
 import orgFixtures from "../fixtures/organizations.json";
 import projectFixtures from "../fixtures/projects.json";
+import meFixture from "../fixtures/me.json";
 
 const urls = {
   users: new URL("users/", baseApiUrl).toString(),
+  me: new URL("users/me/", baseApiUrl).toString(),
   organizations: new URL("organizations", baseApiUrl).toString(),
   projects: new URL("projects/", baseApiUrl).toString(),
 };
@@ -14,6 +16,8 @@ const urls = {
 export const users = {
   data: rest.get(urls.users, (req, res, ctx) => res(ctx.json(usersFixture))),
 
+  me: rest.get(urls.me, (req, res, ctx) => res(ctx.json(meFixture))),
+
   loading: rest.get(urls.users, (req, res, ctx) => ctx.delay("infinite")),
 
   error: rest.get(urls.users, (req, res, ctx) =>