merge

.github/workflows/chromatic.yml

@@ -8,7 +8,8 @@ on:
     branches:
       - main
   pull_request:
-    types: [assigned, ready_for_review, review_requested]
+    # Workflows will not run on pull_request activity if the pull request has a merge conflict. The merge conflict must be resolved first.
+    # By default, a workflow only runs when a pull_request event's activity type is opened, synchronize, or reopened.
     branches-ignore:
       - changeset-release/*
 
@@ -61,4 +62,5 @@ jobs:
                   projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
                   traceChanged: true
                   onlyChanged: true # TurboSnap
+                  exitOnceUploaded: true # The PRs will be marked as success/failure based on the Chromatic build status
                   skip: ${{ github.event.pull_request.draft == true }}

.storybook/main.ts

@@ -1,6 +1,9 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import turbosnap from "vite-plugin-turbosnap";
 
-const config: StorybookConfig = {
+
+const storybookConfig: StorybookConfig = {
     stories: [
         "../packages/**/*.stories.@(ts|tsx)",
         "../stories/**/*.stories.@(js|jsx|ts|tsx)"
@@ -17,7 +20,23 @@ const config: StorybookConfig = {
     },
     docs: {
         autodocs: "tag"
+    },
+    async viteFinal(config, { configType }) {
+        return mergeConfig(config, {
+            plugins:
+            configType === "PRODUCTION"
+                ? [
+                    // TurboSnap only officially support webpack (https://www.chromatic.com/docs/turbosnap/#prerequisites)
+                    // This plugin is suggested by storybook and maintained by a core storybook contributor.
+                    // This is experimental, and may not support all project and storybook configurations, yet.
+                    turbosnap({
+                    // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
+                        rootDir: config.root ?? process.cwd()
+                    })
+                ]
+                : []
+        });
     }
 };
 
-export default config;
+export default storybookConfig;

.stylelintrc.js

@@ -1,4 +1,4 @@
 /** @type {import('stylelint').Config} */
 module.exports = {
-    extends: "@workleap/stylelint-config"
+    extends: "@workleap/stylelint-configs"
 };

apps/docs/.storybook/global.css

@@ -1,4 +1,4 @@
-@import "../app/tokens.css";
+@import url("@/styles/tokens.css");
 
 .hd-container {
     width: 100vw;

apps/docs/.storybook/main.ts

@@ -1,5 +1,5 @@
-import type { StorybookConfig } from "@storybook/nextjs"
-import path = require("path");
+import type { StorybookConfig } from "@storybook/nextjs";
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 const config: StorybookConfig = {
     stories: ["../components/**/*.stories.@(ts|tsx)"],
@@ -16,11 +16,33 @@ const config: StorybookConfig = {
         autodocs: "tag",
     },
     webpackFinal: async (config) => {
-        config.resolve.alias = {
-            ...config.resolve.alias,
-            '@/components': path.resolve(__dirname, "../components"),
-            '@/configs': path.resolve(__dirname, "../configs"),
-        };
+        // Configure aliases
+        if(config.resolve) {
+            config.resolve.plugins = [
+                ...(config.resolve.plugins || []),
+                new TsconfigPathsPlugin({
+                    extensions: config.resolve.extensions,
+                }),
+            ];
+        }
+
+        // Configure SVGR
+        // taken from here: https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs#custom-webpack-config
+        config.module = config.module || {};
+        config.module.rules = config.module.rules || [];
+
+        // This modifies the existing image rule to exclude .svg files
+        // since you want to handle those files with @svgr/webpack
+        const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+        if (imageRule) {
+            imageRule['exclude'] = /\.svg$/;
+        }
+
+        // Configure .svg files to be loaded with @svgr/webpack
+        config.module.rules.push({
+            test: /\.svg$/,
+            use: ['@svgr/webpack'],
+        });
 
         return config;
     },

apps/docs/.storybook/preview.tsx

@@ -1,5 +1,5 @@
-import type { Preview } from "@storybook/react"
-
+import type { Preview } from "@storybook/react";
+import React from "react";
 import "../app/globals.css";
 
 // Storybook styles

apps/docs/CHANGELOG.md

@@ -0,0 +1,14 @@
+# docs
+
+## 0.2.0
+
+### Minor Changes
+
+- a08e2a7: Updated copy token icon color
+
+## 0.1.1
+
+### Patch Changes
+
+- d18b0f6: Patch dependency
+- b5956d0: Removed unnecessary line-height / fix rounding for some line height tokens

apps/docs/app/layout.css

@@ -23,8 +23,7 @@ html {
 }
 
 main {
-    padding-block-end: var(--hd-space-8);
-    padding-block-start: var(--hd-space-4);
+    padding-block: var(--hd-space-4) var(--hd-space-8);
     flex: 1 1 auto;
     min-width: 0;
     order: 1;

apps/docs/components/copyButton/copyButton.css

@@ -4,7 +4,7 @@
     justify-content: center;
     background-color: transparent;
     border: none;
-    stroke: var(--hd-primary-300);
+    stroke: var(--hd-icon-button-color);
     width: var(--hd-space-4);
     aspect-ratio: 1/1;
     border-radius: var(--hd-space-1);

apps/docs/components/ui/header/Header.tsx

@@ -2,16 +2,16 @@
 
 import Link from "next/link";
 
-import { useState, useEffect } from "react";
-import { navigation } from "@/configs/navigation";
 import ThemeSwitch from "@/components/themeSwitch/ThemeSwitch";
 import IconButton from "@/components/ui/iconButton/IconButton";
 import MobileMenu from "@/components/ui/mobileMenu/MobileMenu";
 import MobileMenuTrigger from "@/components/ui/mobileMenu/MobileMenuTrigger";
 import Nav from "@/components/ui/nav/Nav";
+import { navigation } from "@/configs/navigation";
+import { useEffect, useState } from "react";
 
-import "./header.css";
 import HopperLogo from "./assets/hopper-logo.svg";
+import "./header.css";
 
 const Header = () => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

apps/docs/components/ui/sectionPopover/sectionPopover.css

@@ -6,8 +6,7 @@
     border: none;
     gap: var(--hd-space-05);
     color: var(--hd-color-neutral-text-weak);
-    padding-inline-start: var(--hd-space-2);
-    padding-inline-end: var(--hd-space-1);
+    padding-inline: var(--hd-space-2) var(--hd-space-1);
     padding-block: var(--hd-space-05);
 }
 

apps/docs/contentlayer.config.js

@@ -99,9 +99,14 @@ const rehypeOptions = {
         }
     },
     onVisitHighlightedLine(node) {
-        // Each line node by default has `class="line"`.
-        node.properties.className.push("highlighted");
+        const nodeClass = node.properties.className;
+        if (nodeClass && nodeClass.length > 0) {
+            node.properties.className.push("highlighted");
+        } else {
+            node.properties.className = ["highlighted"];
+        }
     },
+
     onVisitHighlightedWord(node, id) {
         // Each word node has no className by default.
         node.properties.className = ["word"];