docs: JOB-133379 Changelog Page Face Lift

packages/site/public/staticContent/mobileDocs.json

@@ -0,0 +1 @@
+{}

packages/site/public/staticContent/sharedDocs.json

@@ -0,0 +1 @@
+{}

packages/site/public/staticContent/webDocs.json

@@ -0,0 +1 @@
+{}

packages/site/src/content/AtlantisThemeContext/AtlantisThemeContext.stories.mdx

@@ -131,10 +131,9 @@ regardless of the main application theme. This can be done by setting the
 `dangerouslyOverrideTheme` prop to `<themeToSet>` on the
 `AtlantisThemeContextProvider`.
 
-Note: If you're using `buildThemedStyles`, any `useStyles` calls must be
-done within a _child component_ of the `AtlantisThemeContextProvider`,
-not in the same component that renders the provider. Same goes for
-`useAtlantisTheme`.
+Note: If you're using `buildThemedStyles`, any `useStyles` calls must be done
+within a _child component_ of the `AtlantisThemeContextProvider`, not in the
+same component that renders the provider. Same goes for `useAtlantisTheme`.
 
 ```tsx
 import {

packages/site/src/content/InputValidation/InputValidation.stories.mdx

@@ -7,8 +7,8 @@ import { Banner } from "@jobber/components/Banner";
 
 <Banner type="warning" dismissible={false}>
   90% of validation for inputs will be handled out-of-the-box by the{" "}
-  <a href="/components/InputText">input component&apos;s validation</a>. Check that
-  you cannot use the built-in validation before using this component.
+  <a href="/components/InputText">input component&apos;s validation</a>. Check
+  that you cannot use the built-in validation before using this component.
 </Banner>
 
 An InputValidation component is used to display validation messages for an

packages/site/src/layout/ChangelogView.tsx

@@ -0,0 +1,12 @@
+import { BaseView } from "./BaseView";
+import { ChangelogDataTable } from "../pages/changelog/ChangelogDataTable";
+
+export const ChangelogView = () => {
+  return (
+    <BaseView>
+      <BaseView.Main>
+        <ChangelogDataTable />
+      </BaseView.Main>
+    </BaseView>
+  );
+};

packages/site/src/pages/ChangelogPage.tsx

@@ -1,19 +1,26 @@
-import { PageBlock } from "../components/PageBlock";
-import { changelogList } from "../changelogList";
+import { Page } from "@jobber/components";
+import { ChangelogDataTable } from "./changelog/ChangelogDataTable";
+import { BaseView } from "../layout/BaseView";
+import usePageTitle from "../hooks/usePageTitle";
 
 export const ChangelogPage = () => {
+  usePageTitle({ title: "Changelog" });
+
   return (
-    <PageBlock
-      structure={{
-        header: {
-          title: "Changelog",
-          body: "What's new and notable",
-          imageURL: "/img-page-divider-collage.webp",
-        },
-        body: {
-          content: changelogList,
-        },
-      }}
-    />
+    <BaseView>
+      <BaseView.Main noMaxWidth={true}>
+        <div
+          style={{
+            maxWidth: "1200px",
+            margin: "0 auto",
+            padding: "var(--space-large)",
+          }}
+        >
+          <Page title="Changelog" width="fill">
+            <ChangelogDataTable />
+          </Page>
+        </div>
+      </BaseView.Main>
+    </BaseView>
   );
 };

packages/site/src/pages/changelog/ChangelogDataTable.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo, useState } from "react";
+import { Content, DataTable } from "@jobber/components";
+import {
+  CHANGE_TYPES,
+  filterChangelogEntries,
+  getAvailableChangeTypes,
+  getAvailablePackages,
+  parseAllChangelogs,
+} from "./ChangelogParser";
+import { useTableColumns } from "./useTableColumns";
+import { ChangelogFilters } from "./ChangelogFilters";
+
+const allEntries = parseAllChangelogs();
+const availableChangeTypes = getAvailableChangeTypes(allEntries);
+const availablePackages = getAvailablePackages(allEntries);
+
+export const ChangelogDataTable = () => {
+  const [filters, setFilters] = useState(() => ({
+    packages: ["components", "components-native"],
+    changeTypes: availableChangeTypes.filter(
+      type => type !== CHANGE_TYPES.VERSION_BUMP,
+    ),
+  }));
+
+  const filteredEntries = useMemo(
+    () => filterChangelogEntries(allEntries, filters),
+    [filters],
+  );
+
+  const columns = useTableColumns();
+
+  return (
+    <Content>
+      <ChangelogFilters
+        availablePackages={availablePackages}
+        selectedPackages={filters.packages}
+        onPackagesChange={packages =>
+          setFilters(prev => ({ ...prev, packages }))
+        }
+        availableChangeTypes={availableChangeTypes}
+        selectedChangeTypes={filters.changeTypes}
+        onChangeTypesChange={changeTypes =>
+          setFilters(prev => ({ ...prev, changeTypes }))
+        }
+      />
+
+      <DataTable
+        data={filteredEntries}
+        columns={columns}
+        pagination={{
+          itemsPerPage: [10, 25, 50, 100],
+          manualPagination: false,
+        }}
+        sorting={undefined}
+        stickyHeader
+      />
+    </Content>
+  );
+};

packages/site/src/pages/changelog/ChangelogFilters.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Box, Heading } from "@jobber/components";
+import { Stack } from "@jobber/components/Stack";
+import { TagCombobox } from "./TagCombobox";
+
+interface ChangelogFiltersProps {
+  readonly availablePackages: string[];
+  readonly selectedPackages: string[];
+  readonly onPackagesChange: (packages: string[]) => void;
+  readonly availableChangeTypes: string[];
+  readonly selectedChangeTypes: string[];
+  readonly onChangeTypesChange: (changeTypes: string[]) => void;
+}
+
+export const ChangelogFilters = ({
+  availablePackages,
+  selectedPackages,
+  onPackagesChange,
+  availableChangeTypes,
+  selectedChangeTypes,
+  onChangeTypesChange,
+}: ChangelogFiltersProps) => {
+  const packageOptions = availablePackages.map(pkg => ({
+    id: pkg,
+    label: pkg,
+  }));
+  const changeTypeOptions = availableChangeTypes.map(type => ({
+    id: type,
+    label: type,
+  }));
+
+  return (
+    <Stack gap="large">
+      <Box>
+        <Heading level={4}>Package Filters</Heading>
+        <TagCombobox
+          activatorIcon="add"
+          activatorLabel="Add package"
+          value={selectedPackages}
+          onChange={onPackagesChange}
+          options={packageOptions}
+        />
+      </Box>
+
+      <Box>
+        <Heading level={4}>Change Type Filters</Heading>
+        <TagCombobox
+          activatorIcon="add"
+          activatorLabel="Add change type"
+          value={selectedChangeTypes}
+          onChange={onChangeTypesChange}
+          options={changeTypeOptions}
+        />
+      </Box>
+    </Stack>
+  );
+};