Adding Chromatic action

.github/workflows/chromatic.yml

@@ -0,0 +1,29 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'yarn'
+      # FIXME: Because the setup-node action is dumb, we have to manually
+      #        install the dependencies ourselves. See: https://github.com/actions/setup-node/issues/182
+      - name: Install dependencies
+        run: yarn install
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitOnceUploaded: true

.storybook/preview.tsx

@@ -1,11 +1,10 @@
+import { csa, css, cx } from '@/lib/css';
+import { theme } from '@/theme';
 import type { Preview } from '@storybook/react';
 import 'ress';
 import 'unfonts.css';
 import { withRouter } from 'storybook-addon-remix-react-router';
 
-import { csa, css, cx } from '@lib/css';
-import { theme } from '@theme';
-
 const preview: Preview = {
   parameters: {
     controls: {

.yarnrc.yml

@@ -1,3 +1,5 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+nodeLinker: node-modules

package.json

@@ -12,7 +12,7 @@
     "build-storybook": "storybook build",
     "generate:github": "ts-node ./scripts/github",
     "generate:medium": "ts-node ./scripts/medium",
-    "chromatic": "npx chromatic --project-token=chpt_0a69331ccacaeaf"
+    "chromatic": "chromatic"
   },
   "dependencies": {
     "@linaria/atomic": "^6.0.0",
@@ -83,5 +83,5 @@
     "vite-imagetools": "^7.0.4",
     "vite-plugin-markdown": "^2.2.0"
   },
-  "packageManager": "yarn@3.6.4"
+  "packageManager": "yarn@4.4.1"
 }

src/.stories/components/corner.stories.tsx

@@ -1,7 +1,6 @@
+import { GithubCorner } from '@/components/github';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { GithubCorner } from '@components/github';
-
 const meta: Meta<typeof GithubCorner> = {
   title: 'Components/Github/Corner',
   component: GithubCorner,

src/.stories/components/footer.stories.tsx

@@ -1,7 +1,6 @@
+import { Footer as Component } from '@/components/layout';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Footer as Component } from '@components/layout';
-
 const meta: Meta<typeof Component> = {
   title: 'Components/Layout/Footer',
   component: Component,

src/.stories/components/grid.stories.tsx

@@ -1,11 +1,10 @@
+import { Layout as Component } from '@/components/layout';
+import { csa, cx } from '@/lib/css';
+import { useDimensions } from '@/lib/hooks';
+import { theme } from '@/theme';
 import type { Meta, StoryObj } from '@storybook/react';
 import type { ReactNode } from 'react';
 
-import { Layout as Component } from '@components/layout';
-import { csa, cx } from '@lib/css';
-import { useDimensions } from '@lib/hooks';
-import { theme } from '@theme';
-
 const meta: Meta = {
   title: 'Components/Layout/Layout',
 };

src/.stories/components/loc.stories.tsx → src/.stories/components/loc._.tsx

@@ -1,7 +1,6 @@
+import { LOC } from '@/components/github';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { LOC } from '@components/github/loc';
-
 const meta: Meta<typeof LOC> = {
   title: 'Components/Github/Lines of Code',
   component: LOC,

src/.stories/components/people_line.stories.tsx

@@ -1,7 +1,6 @@
+import { PeopleLine as Component, Person, type PersonProps } from '@/components/people_line';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { PeopleLine as Component, Person, type PersonProps } from '@components/people_line';
-
 const meta: Meta<typeof Component> = {
   title: 'Components/People Line',
   component: Component,

src/.stories/components/section.stories.tsx

@@ -1,9 +1,8 @@
+import { Section as Component, type SectionProps } from '@/components/layout';
+import type { SectionHeaderProps } from '@/components/layout/section/section_header';
+import { csa } from '@/lib/css';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Section as Component, type SectionProps } from '@components/layout';
-import type { SectionHeaderProps } from '@components/layout/section/section_header';
-import { csa } from '@lib/css';
-
 const meta: Meta<typeof Component> = {
   title: 'Components/Layout/Section',
   component: Component,

src/.stories/components/stats.stories.tsx

@@ -1,7 +1,6 @@
+import { GithubStats } from '@/components/github';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { GithubStats } from '@components/github';
-
 const meta: Meta<typeof GithubStats> = {
   title: 'Components/Github/Stats',
   component: GithubStats,

src/.stories/components/timeline.stories.tsx

@@ -1,8 +1,7 @@
+import type { TimelineItemProps } from '@/components/timeline';
+import { Timeline as Component, TimelineItem } from '@/components/timeline';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import type { TimelineItemProps } from '@components/timeline';
-import { Timeline as Component, TimelineItem } from '@components/timeline';
-
 const meta: Meta<typeof Component> = {
   title: 'Components/Timeline',
   component: Component,

src/.stories/home/about.stories.tsx

@@ -1,7 +1,6 @@
+import { Home } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Home } from '@home';
-
 const meta: Meta<typeof Home.About> = {
   title: 'Home/About',
   component: Home.About,

src/.stories/home/career.stories.tsx

@@ -1,7 +1,6 @@
+import { Home } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Home } from '@home';
-
 const meta: Meta<typeof Home.Career> = {
   title: 'Home/Career',
   component: Home.Career,

src/.stories/home/home.stories.tsx

@@ -1,7 +1,6 @@
+import { Home as Component } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Home as Component } from '@home';
-
 const meta: Meta<typeof Home> = {
   title: 'Pages/Home',
   component: Component,

src/.stories/home/medium.stories.tsx

@@ -1,7 +1,6 @@
+import { Home } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Home } from '@home';
-
 const meta: Meta<typeof Home.Medium> = {
   title: 'Home/Medium',
   component: Home.Medium,

src/.stories/home/portfolio.stories.tsx

@@ -1,7 +1,6 @@
+import { Home } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Home } from '@home';
-
 const meta: Meta<typeof Home.Portfolio> = {
   title: 'Home/Portfolio',
   component: Home.Portfolio,

src/.stories/theme/font.stories.tsx

@@ -1,8 +1,7 @@
+import { csa } from '@/lib/css';
+import { theme } from '@/theme';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { csa } from '@lib/css';
-import { theme } from '@theme';
-
 const meta: Meta = {
   title: 'Theme/Font',
 };

src/.stories/theme/icons.stories.tsx

@@ -1,8 +1,7 @@
+import { toProps } from '@/lib/css';
+import { theme } from '@/theme';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { toProps } from '@lib/css';
-import { theme } from '@theme';
-
 const meta: Meta = {
   title: 'Theme/Icons',
 };

src/.stories/theme/spacing.stories.tsx

@@ -1,10 +1,9 @@
+import { csa, cx } from '@/lib/css';
+import { useDimensions } from '@/lib/hooks';
+import { theme } from '@/theme';
+import { type UtopiaSize } from '@/theme/spacing';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { csa, cx } from '@lib/css';
-import { useDimensions } from '@lib/hooks';
-import { theme } from '@theme';
-import { type UtopiaSize } from '@theme/spacing';
-
 const meta: Meta = {
   title: 'Theme/Spacing',
 };

src/App.tsx

@@ -1,4 +1,4 @@
-import { GithubCorner } from '@components/github/corner';
+import { GithubCorner } from '@/components/github/corner';
 
 function App() {
   return (

src/components/github/corner.styles.ts

@@ -1,4 +1,4 @@
-import { csa, cx, toProps } from '@lib/css';
+import { csa, cx, toProps } from '@/lib/css';
 
 const svgRoot = toProps(csa`
   fill: #fff;

src/components/github/index.ts

@@ -1,2 +1,3 @@
 export { GithubCorner } from './corner';
+export { LOC } from './loc';
 export { GithubStats } from './stats';

src/components/github/loc_language.styles.ts

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { vars, css } = theme;
 

src/components/github/loc_language.tsx

@@ -1,7 +1,6 @@
+import { languageColors } from '@/lib/github_language_colors';
 import numeral from 'numeral';
 
-import { languageColors } from '@lib/github_language_colors';
-
 import styles from './loc_language.styles';
 
 export const Language = ({ loc, overallTotal }: { loc: LinesOfCode; overallTotal: number }) => {

src/components/github/numbers.styles.ts

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { vars, css } = theme;
 

src/components/github/Stats.tsx → src/components/github/stats.tsx

@@ -1,4 +1,4 @@
-import { loc, user } from '@content/github.json';
+import { loc, user } from '@/content/github.json';
 
 import { LOC } from './loc';
 import { Numbers } from './numbers';

src/components/layout/footer/footer.styles.ts

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { vars } = theme;
 

src/components/layout/footer/footer.tsx

@@ -1,4 +1,4 @@
-import { useResume } from '@lib/hooks';
+import { useResume } from '@/lib/hooks';
 
 import { SiteCredits } from './site_credits';
 import { SiteLogo } from './site_logo';

src/components/layout/footer/site_credits.styles.ts

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { vars, css } = theme;
 

src/components/layout/footer/site_logo.styles.ts

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { vars } = theme;
 

src/components/layout/footer/social_profiles.styles.ts

@@ -1,6 +1,6 @@
-import { csa, type CSSProps, cx, toProps } from '@lib/css';
-import { theme } from '@theme';
-import type { IconSocial } from '@theme/icons';
+import { csa, type CSSProps, cx, toProps } from '@/lib/css';
+import { theme } from '@/theme';
+import type { IconSocial } from '@/theme/icons';
 
 const { vars, icons, css } = theme;
 

src/components/layout/footer/social_profiles.tsx

@@ -1,4 +1,4 @@
-import type { IconSocial } from '@theme/icons';
+import type { IconSocial } from '@/theme/icons';
 
 import styles from './social_profiles.styles';
 

src/components/layout/layout.styles.ts

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const outer = toProps(
   csa`

src/components/layout/layout.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { cx } from '@lib/css';
+import { cx } from '@/lib/css';
 
 import { Footer } from './footer';
 

src/components/layout/section/section.styles.ts

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { vars } = theme;
 

src/components/layout/section/section.tsx

@@ -1,9 +1,8 @@
+import { Layout } from '@/components/layout';
+import { cx } from '@/lib/css';
+import { slot, useSlots } from '@/lib/hooks';
 import type { ReactNode } from 'react';
 
-import { Layout } from '@components/layout';
-import { cx } from '@lib/css';
-import { slot, useSlots } from '@lib/hooks';
-
 import { SectionDivider as Divider } from './section_divider';
 import { SectionHeader } from './section_header';
 import { SectionLink as Link } from './section_link';

src/components/layout/section/section_divider.styles.ts

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { vars } = theme;
 

src/components/layout/section/section_header.styles.ts

@@ -1,5 +1,5 @@
-import { csa, cx, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, cx, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { css, vars } = theme;
 

src/components/layout/section/section_header.tsx

@@ -1,4 +1,4 @@
-import { cx } from '@lib/css';
+import { cx } from '@/lib/css';
 
 import styles from './section_header.styles';
 

src/components/layout/section/section_link.styles.tsx

@@ -1,5 +1,5 @@
-import { csa, toProps } from '@lib/css';
-import { theme } from '@theme';
+import { csa, toProps } from '@/lib/css';
+import { theme } from '@/theme';
 
 const { css, vars } = theme;