(components) fix/patch: various updates and improvements

.changeset/plenty-swans-behave.md

@@ -0,0 +1,12 @@
+---
+"@wethegit/components": major
+---
+
+- 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.
+- Overhauls the flex `grid-layout` system:
+  - Removes `Wrapper` component in favor of the new `noFlex` 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.
+  - 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.
+- 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.
+- Adds `margin: 0` to the `body` element in the CSS resets stylesheet.

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/.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/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/flex/index.tsx

@@ -2,7 +2,9 @@ export { Flex } from "./flex"
 export type {
   AlignBreakpoints,
   BooleanBreakpoints,
+  DirectionBreakpoints,
   FlexAlign,
+  FlexDirection,
   FlexJustify,
   FlexProps,
   JustifyBreakpoints,

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;

packages/wethegit-components/src/components/grid-layout/column/column.stories.tsx

@@ -65,58 +65,33 @@ export const Default: Story = {
   ),
 }
 
-export const GutterVisualizer: Story = {
-  name: "Gutter visualizer",
-  render: (args) => (
-    <Row className="gutterVisualizer">
-      <Column className="gutterVisualizer">
-        <p>
-          The left or right padding on a <code>Row</code> or a <code>Column</code> is
-          equivalent to half of a gutter's width, within your flex-layout. As shown here,
-          when these components butt-up against one another, they form a gap of exactly
-          one gutter's width.
-        </p>
-        <p>Use the controls to adjust the width of this column.</p>
-        <p>
-          🚀 Note that the padding still applies at the <code>small</code> breakpoint,
-          despite the lack of a flex-layout there, creating "automatic" gutters for your
-          content.
-        </p>
-      </Column>
-      <Column className="gutterVisualizer" {...args}>
-        {howManyColumns(args.span)}
-      </Column>
-    </Row>
-  ),
-}
-
 export const NestedColumns: Story = {
   name: "Nested columns",
-  render: (args) => (
-    <Row className="gutterVisualizer">
-      <Column className="gutterVisualizer" {...args}>
+  render: () => (
+    <Row>
+      <Column span={5}>
+        {howManyColumns(5)}
         <p>
           Nesting columns is easy. Just add another <code>Row</code>, more{" "}
           <code>Column</code> components and don't forget to set the <code>deep</code>{" "}
           prop on the nested <code>Column</code> components.
         </p>
-        {howManyColumns(args.span)}
       </Column>
-      <Column className="gutterVisualizer" span={7}>
-        <p>
-          This spans <code>7</code> columns
-        </p>
-        <Row className="gutterVisualizer">
-          <Column className="gutterVisualizer" deep>
+      <Column span={7}>
+        {howManyColumns(7)}
+        <Row>
+          <Column span={6}>
+            {howManyColumns(6)}
             <p>
               Notice how the text touches the edge and they don't have an internal
-              padding.
+              left/right gutter.
             </p>
           </Column>
-          <Column className="gutterVisualizer" deep>
+          <Column span={6}>
+            {howManyColumns(6)}
             <p>
               Notice how the text touches the edge and they don't have an internal
-              padding.
+              left/right gutter.
             </p>
           </Column>
         </Row>

packages/wethegit-components/src/components/grid-layout/column/column.tsx

@@ -1,17 +1,15 @@
 import type { ElementType, ForwardedRef } from "react"
 
-import { Tag } from "@local/components"
-import type { TagProps } from "@local/components"
-import { fixedForwardRef, buildBreakpointClassnames, classnames } from "@local/utilities"
+import { Tag } from "@local/components/tag/tag"
+import type { TagProps } from "@local/components/tag/tag"
+import { fixedForwardRef } from "@local/utilities/fixed-forward-ref/fixed-forward-ref"
+import { buildBreakpointClassnames } from "@local/utilities/build-breakpoint-classnames/build-breakpoint-classnames"
+import { classnames } from "@local/utilities/classnames/classnames"
 
 import styles from "./column.module.scss"
 
 export type ColumnBreakpoints = Partial<Omit<Breakpoints<number>, "sm">>
 export type ColumnProps<TAs extends ElementType> = TagProps<TAs> & {
-  /**
-   * Remove gutter padding. Useful for nested flex-layouts
-   */
-  deep?: boolean
   /**
    * Number of flex-layout columns to span. Accepts a `number` or a `breakpoint-object`
    */
@@ -21,23 +19,17 @@ export type ColumnProps<TAs extends ElementType> = TagProps<TAs> & {
 /**
  * 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 but does not apply to the `small` breakpoint as at that size, the columns will always span the full width of the container.
+ * Supports mobile-first, breakpoint-specific settings but does not apply to the `sm` breakpoint, since at that size, the columns will always span the full width of the container.
  *
  * If no `span` prop is provided, the columns will fill the available space.
  */
 export const Column = fixedForwardRef(function Column<TAs extends ElementType = "div">(
-  { deep = false, span, className, ...props }: ColumnProps<TAs>,
+  { span, className, ...props }: ColumnProps<TAs>,
   ref: ForwardedRef<unknown>
 ) {
-  // build classnames from span prop
   const breakpointClassNames = buildBreakpointClassnames<number>(span, styles, "span")
 
-  const classes = classnames([
-    styles.column,
-    deep && styles.deep,
-    breakpointClassNames,
-    className,
-  ])
+  const classes = classnames([styles.column, breakpointClassNames, className])
 
   return <Tag className={classes} ref={ref} {...props} />
 })

packages/wethegit-components/src/components/grid-layout/index.tsx

@@ -1,3 +1,2 @@
 export * from "./column"
 export * from "./row"
-export * from "./wrapper"

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

@@ -1,21 +1,17 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
 .row {
-  display: block;
-  inline-size: min(var(--wtc-row-width, 1440px), 100%);
+  column-gap: var(--wtc-gutter-width);
+  inline-size: min(100%, var(--wtc-row-width, 1440px));
   list-style: none;
   margin-inline: auto;
-  padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
-}
+  padding-inline: var(--wtc-grid-margin-width);
 
-@media #{$md-up} {
-  .row:not(.stackMedium) {
-    display: flex;
+  .row {
+    padding-inline: 0;
   }
 }
 
-@media #{$lg-up} {
-  .stackMedium {
-    display: flex;
-  }
+.noFlex {
+  display: block;
 }