(components) Release: 4.0.0

.changeset/hungry-books-change.md

@@ -0,0 +1,19 @@
+---
+"@wethegit/components": major
+"@wethegit/components-cli": patch
+---
+
+- COMP: Removes barrel files (`index.ts`) from each component. Barrel files are known to cause circular reference issues, and so we've opted to remove them in favor of explicit imports.
+- COMP: Removes the CSS modules file from `useBreakpoints`, due to Next JS and Turbopack no longer supporting the `:export` feature. Instead, this value is hard-coded in the `use-breakpoints.ts` file now.
+- COMP: Overhauls the flex `grid-layout` system:
+  - Removes `Wrapper` component in favor of the new `variant` prop on the `Row` component.
+  - Removes inline padding from `Column` components, in favor of flexbox's `gap` property. Way less of a learning curve here now for newcomers.
+  - Adds a `flexDirection` prop to the `Flex` (and therefore the `Row`) component, to allow users to specify per-breakpoint flex directions.
+    - This removes the need for the `reverse` prop, so that's now gone.
+  - Refactors and renames the `grid-calc(n)` SCSS utility to be `get-column-width(n)`. This is more indicative of what it's used for.
+- COMP: Updates the `grid-layout` system to use the latest standards created by We the Collective's Design Team. This introduces a `--grid-margin-width` CSS custom property, and updates the `Row` component's width and margin calculations to take the new value into account.
+- COMP: Adds `margin: 0` to the `body` element in the CSS resets stylesheet.
+- COMP: Fixes Github-flavored Markdown not working in Storybook
+- COMP: Fixes static asset path on deployed Storybook (image group examples have broken images)
+- CLI: Fixes SCSS import instructions syntax on the CLI after adding components
+- CLI: Supports `deno` package manager.

packages/wethegit-components-cli/src/registry-index.ts

@@ -91,7 +91,7 @@ const TEXT: Registry = {
     "https://wethegit.github.io/component-library/?path=/docs/components-text-readme--overview",
   postInstallMessages: [
     `The ${chalk.bold("Text")} component requires a ${chalk.italic("CSS")} file to work properly. Add the following line to your global styles:`,
-    '@import "@local/components/text/styles/text.scss";',
+    '@use "@local/components/text/styles/text";',
   ],
 }
 
@@ -115,7 +115,7 @@ const GRID_LAYOUT: Registry = {
     "https://wethegit.github.io/component-library/?path=/docs/components-grid-layout-readme--overview",
   postInstallMessages: [
     `The ${chalk.bold("grid")} requires a CSS file to work properly. Add the following line to your global styles:`,
-    '@import "@local/components/grid-layout/styles/grid-layout.scss";',
+    '@use "@local/components/grid-layout/styles/grid-layout";',
   ],
 }
 

packages/wethegit-components-cli/src/utils/get-package-manager.ts

@@ -5,7 +5,7 @@ import { detect } from "@antfu/ni"
  */
 export async function getPackageManager(
   targetDir: string
-): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
+): Promise<"yarn" | "pnpm" | "bun" | "npm" | "deno"> {
   const packageManager = await detect({ programmatic: true, cwd: targetDir })
 
   if (packageManager === "yarn@berry") return "yarn"

packages/wethegit-components/.storybook/main.ts

@@ -7,7 +7,7 @@ const config: StorybookConfig = {
   staticDirs: ["../public"],
   addons: [
     {
-      name: getAbsolutePath("@storybook/addon-essentials"),
+      name: "@storybook/addon-docs",
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
@@ -16,6 +16,7 @@ const config: StorybookConfig = {
         },
       },
     },
+    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-interactions"),

packages/wethegit-components/.storybook/styles/global-story-styles.scss

@@ -50,15 +50,6 @@ a {
   @include dashed-outline;
 }
 
-.gutterVisualizer {
-  @include dashed-outline;
-  @include gutter-highlight(rgb(83 198 82 / 34%), calc(var(--wtc-gutter-width) * 0.5));
-}
-
-.gutterVisualizerFull {
-  @include gutter-highlight(rgb(83 198 82 / 34%), var(--wtc-gutter-width));
-}
-
 .childSpacing {
   > * + * {
     margin-top: 2rem !important;

packages/wethegit-components/.stylelintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: ["stylelint-config-custom/base"],
+  rules: {
+    "scss/operator-no-newline-after": null,
+  },
 }

packages/wethegit-components/package.json

@@ -18,7 +18,7 @@
     ".": "./src/index.ts"
   },
   "scripts": {
-    "build": "storybook build --docs",
+    "build": "storybook build --docs --output-dir storybook-static",
     "clean": "rm -rf ./.turbo ./node_modules ./dist ./storybook-static",
     "start": "storybook dev -p 6006",
     "lint": "eslint src/",
@@ -40,7 +40,6 @@
     "@storybook/addon-actions": "^8.1.10",
     "@storybook/addon-docs": "^8.1.5",
     "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
     "@storybook/addon-links": "^8.1.11",
     "@storybook/addon-themes": "^8.1.5",
     "@storybook/blocks": "^8.5.8",
@@ -62,7 +61,7 @@
     "lint-staged-config": "*",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "sass": "^1.81.0",
     "storybook": "^8.5.8",
     "stylelint": "^16.8.0",

packages/wethegit-components/src/components/back-to-top/back-to-top.stories.tsx

@@ -1,7 +1,9 @@
 import { expect, userEvent, within, waitFor } from "@storybook/test"
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { BackToTop, Text } from "@local/components"
+import { Text } from "@local/components/text/text"
+
+import { BackToTop } from "./back-to-top"
 
 const meta: Meta<typeof BackToTop> = {
   title: "components/back-to-top",

packages/wethegit-components/src/components/back-to-top/back-to-top.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useRef } from "react"
 import { useUserPrefs, useInView } from "@wethegit/react-hooks"
 
-import { classnames } from "@local/utilities"
+import { classnames } from "@local/utilities/classnames"
 
 import styles from "./back-to-top.module.scss"
 
@@ -41,7 +41,7 @@ export function BackToTop({
   className,
   children,
   ...props
-}: BackToTopProps): JSX.Element {
+}: BackToTopProps): React.JSX.Element {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const { prefersReducedMotion } = useUserPrefs()
   const [setReferenceRef, referenceIsInView] = useInView(0, false, false)
@@ -93,7 +93,7 @@ export function BackToTop({
       {/* this is a reference element, so that we know when to show the button */}
       <div
         className={styles.viewportReference}
-        ref={setReferenceRef}
+        ref={(e: HTMLDivElement) => setReferenceRef(e)}
         style={{ "--reveal-threshold": revealThreshold } as React.CSSProperties}
       />
 

packages/wethegit-components/src/components/breakpoint-snipe/breakpoint-snipe.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { BreakpointSnipe } from "@local/components"
+import { BreakpointSnipe } from "./breakpoint-snipe"
 
 const meta = {
   title: "components/breakpoint-snipe",

packages/wethegit-components/src/components/breakpoint-snipe/breakpoint-snipe.tsx

@@ -1,7 +1,7 @@
 "use client"
 
+import { classnames } from "@local/utilities/classnames"
 import { useBreakpoints } from "@local/hooks"
-import { classnames } from "@local/utilities"
 
 import styles from "./breakpoint-snipe.module.scss"
 

packages/wethegit-components/src/components/flex/flex.module.scss

@@ -49,12 +49,16 @@
     flex-wrap: nowrap;
   }
 
-  .reverse#{$prefix}-true {
+  .direction#{$prefix}-row {
+    flex-direction: row;
+  }
+
+  .direction#{$prefix}-row-reverse {
     flex-direction: row-reverse;
   }
 
-  .reverse#{$prefix}-false {
-    flex-direction: row;
+  .direction#{$prefix}-column {
+    flex-direction: column;
   }
 }
 

packages/wethegit-components/src/components/flex/flex.tsx

@@ -1,8 +1,10 @@
 import type { ElementType, ForwardedRef } from "react"
 
-import { Tag } from "@local/components"
-import type { TagProps } from "@local/components"
-import { buildBreakpointClassnames, classnames, fixedForwardRef } from "@local/utilities"
+import { Tag } from "@local/components/tag/tag"
+import type { TagProps } from "@local/components/tag/tag"
+import { buildBreakpointClassnames } from "@local/utilities/build-breakpoint-classnames/build-breakpoint-classnames"
+import { classnames } from "@local/utilities/classnames/classnames"
+import { fixedForwardRef } from "@local/utilities/fixed-forward-ref/fixed-forward-ref"
 
 import styles from "./flex.module.scss"
 
@@ -21,6 +23,10 @@ export type JustifyBreakpoints = Partial<Breakpoints<FlexJustify>>
 
 export type BooleanBreakpoints = Partial<Breakpoints<boolean>>
 
+export type FlexDirection = "column" | "row" | "row-reverse"
+
+export type DirectionBreakpoints = Partial<Breakpoints<FlexDirection>>
+
 export type FlexProps<TAs extends ElementType> = TagProps<TAs> & {
   /**
    * Alignment on the cross axis. Accepts a `string` or a `breakpoint-object`
@@ -31,28 +37,26 @@ export type FlexProps<TAs extends ElementType> = TagProps<TAs> & {
    */
   justify?: FlexJustify | JustifyBreakpoints
   /**
-   * Whether or not to wrap children. Accepts a `boolean` or a `breakpoint-object`
+   * Flex-direction. Accepts a string or a `breakpoint-object`
    */
-  wrap?: boolean | BooleanBreakpoints
+  flexDirection?: FlexDirection | DirectionBreakpoints
   /**
-   * Whether or not to reverse the order of children. Accepts a `boolean` or a `breakpoint-object`
+   * Whether or not to wrap children. Accepts a `boolean` or a `breakpoint-object`
    */
-  reverse?: boolean | BooleanBreakpoints
+  wrap?: boolean | BooleanBreakpoints
 }
 
 /**
- * Spans the specified number of columns within the component library's grid layout system. Intended to be used as a child of the `<Row>` component. Supports mobile-first, breakpoint-specific settings.
- *
- * The grid layout system does not apply to the `small` breakpoint.
+ * Simple, flexbox-based container component. Allows for breakpoint-specific settings for common things like justify-content, align-items, and more.
  *
  * Learn more about [Breakpoints](https://wethegit.github.io/component-library/?path=/docs/core-breakpoints--overview).
  */
 export const Flex = fixedForwardRef(function Flex<TAs extends ElementType = "div">(
   {
     align = "center",
     justify = "center",
+    flexDirection,
     wrap = true,
-    reverse = false,
     className,
     ...props
   }: FlexProps<TAs>,
@@ -66,16 +70,20 @@ export const Flex = fixedForwardRef(function Flex<TAs extends ElementType = "div
     "justify"
   )
 
-  const wrapClassnames = buildBreakpointClassnames<boolean>(wrap, styles, "wrap")
+  const directionClassnames = buildBreakpointClassnames<FlexDirection>(
+    flexDirection,
+    styles,
+    "direction"
+  )
 
-  const reverseClassnames = buildBreakpointClassnames<boolean>(reverse, styles, "reverse")
+  const wrapClassnames = buildBreakpointClassnames<boolean>(wrap, styles, "wrap")
 
   const classes = classnames([
     styles.flex,
     alignClassnames,
     justifyClassnames,
+    directionClassnames,
     wrapClassnames,
-    reverseClassnames,
     className,
   ])
 

packages/wethegit-components/src/components/grid-layout/column/column.module.scss

@@ -10,20 +10,17 @@
 
   @for $i from 1 through 12 {
     .#{$base-class}-#{$i} {
-      flex: 0 0 layout.grid-calc($i);
+      flex: 0 0 layout.get-column-width($i);
     }
   }
 }
 
 .column {
   flex: 1;
+  inline-size: 100%;
   list-style: none;
   margin: 0;
-  padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
-}
-
-.deep {
-  padding-inline: 0;
+  min-inline-size: 0;
 }
 
 @include make-column-classnames;