(components) Release: 4.0.0 by andrewrubin · Pull Request #467 · wethegit/component-library

andrewrubin · 2026-06-18T20:50:06Z

Description

This PR bumps the wethegit-components package to version 4.0.0. It includes the following fixes and updates:

COMP: Removes barrel files (index.ts) from each component. Barrel files are known to cause circular reference issues, 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.

New grid system usage

The usual workflow, nothing new:

<Row>
  <Column span={6}>
    This is the same. Nothing new here. 
  </Column>
</Row>

Replacement for old `<Wrapper>` component:

<Row variant="block">
  Instead of the old `Wrapper` component, you now just use `Row`, passing `variant="block"`.
</Row>

Replace old `stackMedium` prop with this:

The new flexDirection prop will allow you to be more specific about your flex layouts at specific breakpoints. The snippet below is visually equivalent to the old stackMedium prop, just more expressive and powerful.

<Row flexDirection={{ md: "column", lg: "row" }}>
  <Column span={6}>
    Column content.
  </Column>
  <Column span={6}>
    Column content.
  </Column>
</Row>

Screenshots

Grid Layout basic usage

This screencap uses the new values per the WTC desgin team. It also shows the gap-based gutters, rather than the old padding-inline ones.

1.mp4

Custom values for flex direction

This example uses the following for its flexDirection prop, just to show what's possible. it's essentially "stacking" on medium and XXL+.
{ sm: "column", md: "column", lg: "row", xxl: "column" }

2.mp4

… object, due to NextJS turbopack issue with :export

…ttings per latest WTC default grid

changeset-bot · 2026-06-18T20:50:13Z

🦋 Changeset detected

Latest commit: 9421a98

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@wethegit/components	Major
@wethegit/components-cli	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…r/wrapper.module.scss Co-authored-by: Clinton <80900245+pravton@users.noreply.github.com> Signed-off-by: Andrew Rubin <30575213+andrewrubin@users.noreply.github.com>

…cific flexDirection prop, fix JSDoc

… Wrapper in favor of Row `noFlex` prop; update grid-calc utility helper to be more descriptive of what it's for

…of what it's for

…king; ensure static directory serves images correctly in prod

andrewrubin · 2026-06-19T02:56:32Z

These were technically wrong syntax for the scss imports, so I've updated 'em. Also added @use instead of @import since SASS is deprecating that.

andrewrubin · 2026-06-19T02:56:46Z

No more padding for gutters, so no need for this!

andrewrubin · 2026-06-19T02:57:26Z

Github-flavored Markdown specifically needed to be an option under storybook/addon-docs in order to work 🤷‍♂️

marlonmarcello · 2026-06-22T16:13:55Z

 "use client"

-import { useCallback, useRef } from "react"
+import { JSX, useCallback, useRef } from "react"


Do we need this JSX import?

I just did some digging and seems like the JSX name space was moved to React which caused these type errors, I have updated the type usage and removed these imports.

marlonmarcello · 2026-06-22T16:15:41Z

@@ -1,7 +1,10 @@
+import { JSX } from "react"


Here too 🤔

marlonmarcello · 2026-06-22T16:39:11Z

-import { Tag } from "@local/components/tag"
-import type { TagProps } from "@local/components/tag"
-import { buildBreakpointClassnames, classnames } from "@local/utilities"
+import { JSX } from "react"


marlonmarcello · 2026-06-22T16:40:30Z

@@ -1,8 +1,8 @@
-import type { ElementType } from "react"
+import type { ElementType, JSX } from "react"


removed here as well!

marlonmarcello · 2026-06-22T16:40:38Z

@@ -1,5 +1,5 @@
 import { forwardRef } from "react"
-import type { Ref, ReactNode, RefAttributes } from "react"
+import type { Ref, ReactNode, RefAttributes, JSX } from "react"


Co-authored-by: Marlon U. Marcello <marlon.marcello@gmail.com> Signed-off-by: Clinton <80900245+pravton@users.noreply.github.com>

…/in-view-item/in-view-item.tsx Co-authored-by: Marlon U. Marcello <marlon.marcello@gmail.com> Signed-off-by: Clinton <80900245+pravton@users.noreply.github.com>

andrewrubin added 5 commits June 18, 2026 13:23

fix(useBreakpoints): remove SCSS file in favor of hard-coded settings…

e8a8bcb

… object, due to NextJS turbopack issue with :export

feat(CSS reset): remove margin on body element by default

09f8c4d

feat(GridLayout): add new "grid margin width" variable, and update se…

0acb710

…ttings per latest WTC default grid

changeset

a7ffc70

fix(changeset): remove lies

e46fc45

andrewrubin requested review from NicholasLancey, consolecmnd, liamegan, marlonmarcello, meteoratlas, pravton and saugatmalla June 18, 2026 20:50

marlonmarcello reviewed Jun 18, 2026

View reviewed changes

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

pravton reviewed Jun 18, 2026

View reviewed changes

Comment thread packages/wethegit-components/src/components/grid-layout/wrapper/wrapper.module.scss Outdated

andrewrubin and others added 10 commits June 18, 2026 15:29

Update packages/wethegit-components/src/components/grid-layout/wrappe…

a2837a1

…r/wrapper.module.scss Co-authored-by: Clinton <80900245+pravton@users.noreply.github.com> Signed-off-by: Andrew Rubin <30575213+andrewrubin@users.noreply.github.com>

feat(COMP: Flex): remove reverse prop, add support for breakpoint-spe…

3892cdb

…cific flexDirection prop, fix JSDoc

feat(COMP: grid-layout): update to use gap instead of padding; remove…

243e15a

… Wrapper in favor of Row `noFlex` prop; update grid-calc utility helper to be more descriptive of what it's for

refactor(COMP: grid-calc): renames the utility to be more indicative …

71526f9

…of what it's for

fix(COMP: Storybook): ensure GitHub-flavored Markdown is actually wor…

17a1bb5

…king; ensure static directory serves images correctly in prod

fix(COMP: useBreakpoints): fix markdown table

69af776

fix(CLI: registry): fix typos on CSS import notices

7db5cb3

fix(COMP: Flex): remove references to barrel files

e6b629f

fix(COMP: Grid Layout): update new version for "deep" aka nested grids

16c277e

fix(build): stylelint error

21c8650

andrewrubin commented Jun 19, 2026

View reviewed changes

andrewrubin requested review from marlonmarcello and pravton June 19, 2026 03:01

pravton mentioned this pull request Jun 19, 2026

[CHORE]: Removes barrel files and updates the imports #468

Merged

andrewrubin and others added 17 commits June 19, 2026 17:34

refactor(COMP: Row): "noFlex" to "variant" prop instead

95668af

chore: removes all barrel files

30c6a98

chore: updates back to top

cdf2599

chore: updates breakpoint snipe

c664a3c

chore: updates grid-layout components

fc0924c

chore: updates icon components

ae79cc5

chore: updates image group components

5bac9a2

chore: updates in-view components

0e938bb

chore: updates navigation components

f4034a1

chore: updates tag components

c1231e0

chore: updates text component

605cd45

chore: updates visually-hidden components

0b3583b

chore: updates modal component

d8956fb

chore: updates utils

84f4af6

chore: lock update and type fix

d1b73f0

chore: adds wrapper module back

3221337

chore: removes wrapper to match the base changes

cf343c8

andrewrubin changed the title ~~(components) fix/patch: various updates and improvements~~ (components) Release: 4.0.0 Jun 20, 2026

update changeset to include CLI patch version

3eb267e

marlonmarcello reviewed Jun 22, 2026

View reviewed changes

marlonmarcello requested changes Jun 22, 2026

View reviewed changes

pravton and others added 3 commits June 23, 2026 13:39

Update packages/wethegit-components/src/components/in-view/in-view.tsx

053f02d

Co-authored-by: Marlon U. Marcello <marlon.marcello@gmail.com> Signed-off-by: Clinton <80900245+pravton@users.noreply.github.com>

Update packages/wethegit-components/src/components/in-view/components…

a411cae

…/in-view-item/in-view-item.tsx Co-authored-by: Marlon U. Marcello <marlon.marcello@gmail.com> Signed-off-by: Clinton <80900245+pravton@users.noreply.github.com>

chore: removed JSX import and updated the type usage

41bf5d0

pravton requested a review from marlonmarcello June 23, 2026 17:54

chore: removed JSX import

9421a98

		@@ -1,8 +1,8 @@
		import type { ElementType } from "react"
		import type { ElementType, JSX } from "react"

Conversation

andrewrubin commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

New grid system usage

The usual workflow, nothing new:

Replacement for old <Wrapper> component:

Replace old stackMedium prop with this:

Screenshots

Grid Layout basic usage

Custom values for flex direction

Uh oh!

changeset-bot Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

andrewrubin commented Jun 18, 2026 •

edited

Loading

Replacement for old `<Wrapper>` component:

Replace old `stackMedium` prop with this:

changeset-bot Bot commented Jun 18, 2026 •

edited

Loading