Merge pull request #381 from MuckRock/380-sidebar-storybook

Basic sidebar stories

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
+}

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 [];

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>

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>

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>

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>

src/pages/app/stories/mock.js

@@ -4,16 +4,20 @@ 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(),
 };
 
 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) =>