feat: implement Premium features page using shadcn/ui and Tailwind #15094

jaaydenh · 2024-10-15T17:39:28Z

This is a proof of concept to showcase the use of Tailwind + shadcn/ui. The goal here was to implement a lower complexity page to reduce the initial risk and highlight the specific global changes needed.

Changes:

Create a separate version of Premium features content for Enterprise and OSS users
Use shadcn/ui button component and setup styling and variants to match the buttons defined in the Coder Kit Figma. https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756
Setup theming using CSS variables and custom Tailwind colors by using the dark class name on the root element.
CSS variable design token naming and colors defined in Figma. https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=1-2

aslilac · 2024-11-01T19:53:02Z

what's the difference between the two screen shots? I recognize the first design from figma, but I don't understand the second screenshot

aslilac · 2024-11-01T19:54:06Z

site/components.json

+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"


I have a feeling these are all very wrong

This is the default generation by shadcn when running pnpm dlx shadcn@latest init . components.json is only used when using the shadcn cli. I haven't really decided what to do about this yet.

For example, one question is if we should keep shadcn components in a separate folder currently its ui to make it clear which ones they are? or just place them in components with everything else.

aslilac · 2024-11-01T19:54:40Z

site/package.json

@@ -49,6 +50,8 @@
 		"@mui/system": "5.16.7",
 		"@mui/utils": "5.16.6",
 		"@mui/x-tree-view": "7.18.0",
+		"@radix-ui/react-icons": "1.3.0",


we're using radix icons and lucide?

So both were added when doing the shadcn installation, lucide is used by the default style and radix icons is used by the new-york style. Since we are going to use neither style, I need to update this for the icon library we are using going forward.

Since it looks like Christin is using Lucide icons in Figma, I am going to update this to use those.

aslilac · 2024-11-01T19:55:20Z

site/postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}


I thought tailwind was moving away from postcss. am I misremembering?

postcss seems to required when using vite

Yeah, the have their own custom parser, so they're slowly moving away from PostCSS. But they're still supporting it for now

aslilac · 2024-11-01T19:56:32Z

site/vite.config.mts

@@ -92,6 +92,7 @@ export default defineConfig({
 			testHelpers: path.resolve(__dirname, "./src/testHelpers"),
 			theme: path.resolve(__dirname, "./src/theme"),
 			utils: path.resolve(__dirname, "./src/utils"),
+			"@": path.resolve(__dirname, "./src"),


we already have aliases for all of the top level folders, let's not add multiple ways to do things pls

This is a left over piece from the shadcn installation

aslilac · 2024-11-01T19:57:33Z

site/tsconfig.json

-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules/", "_jest"],
-  "types": ["@emotion/react", "@testing-library/jest-dom", "jest", "node"]
+	"compilerOptions": {


idk how this wasn't tabs already, but thank you!

aslilac · 2024-11-01T19:58:28Z

site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx

+							Template Permissions
+						</span>
+						<br />
+						<span className=" font-medium">


Suggested change

<span className=" font-medium">

<span className="font-medium">

Once we get Tailwind class sorting figured out, this shouldn't happen anymore.

aslilac · 2024-11-01T19:59:41Z

site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx

+export const PremiumPageView: FC<PremiumPageViewProps> = ({ isEnterprise }) => {
+	return isEnterprise ? <EnterpriseVersion /> : <OSSVersion />;
+};


oh weird. I don't remember seeing this in the designs. did sales ask for this or something?

Yes, It was requested and the designs have been updated since then.

aslilac · 2024-11-01T20:00:56Z

site/src/contexts/ThemeProvider.tsx

@@ -55,6 +55,17 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
 	// The janky casting here is find because of the much more type safe fallback
 	// We need to support `themePreference` being wrong anyway because the database
 	// value could be anything, like an empty string.
+
+	useEffect(() => {
+		const root = window.document.documentElement;


Suggested change

const root = window.document.documentElement;

const root = document.documentElement;

aslilac · 2024-11-01T20:05:35Z

site/src/components/ui/button.tsx

+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";


I think we're gonna wanna change this path to fit in with what we've already got. maybe modules/classes.ts or utils/classes.ts? I'd lean towards modules as I don't really like the name "utils", everything is a util but nothing should just be a util, y'know?

aslilac · 2024-11-01T20:06:32Z

site/src/App.tsx

-				{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
-			</QueryClientProvider>
-		</HelmetProvider>
+		<CacheProvider value={cache}>


could this provider actually go inside ThemeProvider instead, since it's already doing emotion related stuff?

yes, seems like that is fine.

jaaydenh · 2024-11-01T20:12:57Z

what's the difference between the two screen shots? I recognize the first design from figma, but I don't understand the second screenshot

The first is for Enterprise users, the second for OSS users.

Parkreiner

Wasn't sure if you were looking for feedback, or want to treat this as a "100% real" PR, and need approval. Approving just in case, because I don't see anything egregious

I left a comment about one pattern that I'm not a huge fan of, but in practice, it might not be a huge deal. Mainly worried about dev experience, and making sure the right props are getting applied to the right elements

Parkreiner · 2024-11-02T12:28:02Z

site/postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}


Yeah, the have their own custom parser, so they're slowly moving away from PostCSS. But they're still supporting it for now

Parkreiner · 2024-11-02T12:30:50Z

site/src/components/ui/button.tsx

+		);
+	},
+);
+Button.displayName = "Button";


@jaaydenh @aslilac Should we make a rule to add explicit displayName properties to each component? I know that these just help with debugging, but it would feel weird to do it for some components, but not others

Seems like a good idea, although if its required we will have to add it to all existing components. shadcn components always have the displayName

Parkreiner · 2024-11-02T12:34:09Z

site/src/contexts/ThemeProvider.tsx

+	useEffect(() => {
+		const root = document.documentElement;
+		root.classList.remove("light", "dark");
+		if (themePreference === "auto") {
+			root.classList.add(preferredColorScheme);
+		} else {
+			root.classList.add(themePreference);
+		}
+	}, [themePreference, preferredColorScheme]);


I'm not as familiar with the logic for the theme. Is there a reason we're not attaching the remove functionality to a cleanup function?

Thats a good idea to add the cleanup function. I originally only wanted to add or remove the dark class as thats all that needed and not touch the light class but I think this code is a bit simpler considering preferredColorScheme

Parkreiner · 2024-11-02T12:35:30Z

site/src/contexts/ThemeProvider.tsx

+const cache = createCache({
+	key: "css",
+	prepend: true,
+});


Could we add a comment on why we're defining a custom cache override? I'm guessing this is to make Emotion and Tailwind play nicely with each other, but I'm not 100% sure

This is to allow using Tailwind on MUI components as described here: https://mui.com/material-ui/integrations/interoperability/#tailwind-css

This is actually not needed if never use Tailwind on MUI components and only use Tailwind with new components. I was adding it here just in case it is useful but actually maybe its better we don't add this. Any opinions either way?

Parkreiner · 2024-11-02T12:37:36Z

site/src/index.css

+		--surface-error: #450a0a;
+		--border-default: #e4e4e7;
+		--border-error: #ef4444;
+		--radius: 0.5rem;


Making sure I'm understanding this correctly: does this bind the border radius value to the root em for the browser?

If so, do we want to do that? If the user ever increases or decreases their default font size, that would cause the borders to increase/decrease roundness and potentially look wonky, right?

--radius is used in the tailwind config here,

borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", },

by default Tailwind uses border-radius: 0.5rem; for rounded-lg so nothing is changing there. Changing the zoom level in the browser should by fine as well.

These were both added by the shadcn installation. I was keeping this for now until we know exactly why shadcn is adding this override to Tailwind for md and sm.

Parkreiner · 2024-11-02T12:40:22Z

site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx

+
+const EnterpriseVersion: FC = () => {
+	return (
+		<div className="max-w-4xl">


Should this be max-w-prose?

This max width is used to set the position of the button. using max-w-prose doesn't push the button far enough to the right.

Parkreiner · 2024-11-02T12:50:57Z

site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx

+				<Button asChild>
+					<a href="https://coder.com/contact/sales" className="no-underline">
+						Upgrade
+					</a>
+				</Button>


This code might be perfectly fine, but seeing this immediately makes me a little worried. Part of the reason why I haven't liked MUI is because they've tried really hard to blur the lines of links and buttons, and the resulting props are kind of a mess, and the actual function component is weirdly megamorphic

I'd need to look into exactly how Radix's Slot component works under the hood, but I'm okay with this if the developer experience is still good, and there's no risk of "mixing metaphors" by putting button-exclusive props onto anchors

Parkreiner · 2024-11-02T12:52:51Z

site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx

+					href={docs("/admin/users/organizations")}
+				>
+					<span className="flex items-center">
+						<h2 className="text-sm font-semibold m-0">


Should there be a need for an m-0? Seeing that makes me think that Tailwind's default reset isn't being applied correctly. Though I'm not sure if that's actually expected while we're migrating off MUI

in the tailwind config the css reset is turned off.

corePlugins: { preflight: false, },

So we are going to need to do things like this in the short-term or maybe we can find another workaround

Parkreiner · 2024-11-02T12:56:15Z

site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx

+	);
+};
+
+const OSSVersion: FC = () => {


The spacing on this version seems a little off, and doesn't really line up with what's happening in the Premium version

In Figma, there are really 2 separate designs for OSS/Enterprise with different spacings.

Parkreiner · 2024-11-02T12:58:02Z

site/tailwind.config.js

+			},
+			colors: {
+				content: {
+					primary: "var(--content-primary)",


Wondering if it might be good to define default values for the var calls, just in the off chance that a variable isn't defined

Then we have potentially 2 sources of truth for the colors. I would imagine that once this setup, it would rarely change.

Parkreiner · 2024-11-02T13:03:25Z

Now that I think about it, I wonder if it might be good to see if we can request copies of Refactoring UI for everyone. Tailwind is basically all the ideas in that book turned into a library, so reading through it might help make some of the ways Tailwind does things seem feel less arbitrary

BrunoQuaresma · 2024-11-04T14:54:04Z

.vscode/settings.json

+		"editor.defaultFormatter": "biomejs.biome",
+		"editor.codeActionsOnSave": {
+			"quickfix.biome": "explicit"
+			//   "source.organizeImports.biome": "explicit"


Nit: should we just remove it?

@aslilac Were you keeping this around for some reason?

I was hoping to re-enable it after Biome pushed a couple more bug fix releases. Enabling this would mean that it'd sort imports on file save (and avoid annoying CI failures) but someone (I think Asher?) encountered a really nasty bug with it. It's been a few months though, so maybe we should enable it!

BrunoQuaresma

It looks really nice!

github-actions · 2024-11-04T18:18:37Z

🚀 Deploying PR 15094 ...

chrifro

Could you adjust the text to use sentence case instead of title case? So only sentence starts and proper names are spelled with a capital letter. This applies to the text and the button. FYI, Matt agreed to the change [1]. I also updated the copy in Figma

Note: unfortunately, I the PR deployment didn't work for me so I was unable to review the UI. Atif is working on fixing that [1] 🙇‍♀️

jaaydenh self-assigned this Oct 15, 2024

jaaydenh changed the title ~~Tailwind Experiment~~ feat: run tailwind experiment Oct 15, 2024

jaaydenh force-pushed the tailwind-experiment branch from a8f0643 to 45daf0a Compare October 16, 2024 17:42

github-actions bot added the stale This issue is like stale bread. label Oct 24, 2024

github-actions bot closed this Oct 27, 2024

jaaydenh reopened this Oct 28, 2024

github-actions bot removed the stale This issue is like stale bread. label Oct 29, 2024

jaaydenh force-pushed the tailwind-experiment branch 2 times, most recently from c020034 to 18da110 Compare November 1, 2024 16:29

jaaydenh changed the title ~~feat: run tailwind experiment~~ feat: Implement Premium features page using shadcn/ui and Tailwind Nov 1, 2024

jaaydenh force-pushed the tailwind-experiment branch from 18da110 to f08bee2 Compare November 1, 2024 16:58

jaaydenh requested a review from Parkreiner November 1, 2024 16:59

jaaydenh changed the title ~~feat: Implement Premium features page using shadcn/ui and Tailwind~~ feat: implement Premium features page using shadcn/ui and Tailwind Nov 1, 2024

jaaydenh requested a review from aslilac November 1, 2024 19:44

aslilac reviewed Nov 1, 2024

View reviewed changes

jaaydenh marked this pull request as ready for review November 1, 2024 21:10

Parkreiner approved these changes Nov 2, 2024

View reviewed changes

jaaydenh force-pushed the tailwind-experiment branch from 40ce761 to 0e364fc Compare November 2, 2024 18:00

jaaydenh requested a review from BrunoQuaresma November 2, 2024 18:00

BrunoQuaresma reviewed Nov 4, 2024

View reviewed changes

BrunoQuaresma approved these changes Nov 4, 2024

View reviewed changes

jaaydenh force-pushed the tailwind-experiment branch from cff53e6 to 0614f57 Compare November 4, 2024 17:13

jaaydenh force-pushed the tailwind-experiment branch from 230244e to 87fd564 Compare November 5, 2024 14:53

jaaydenh added 3 commits November 5, 2024 23:32

wip

459a028

fix

169c4f5

update lock file

24c97dc

jaaydenh added 22 commits November 5, 2024 23:32

wip

4134d90

revert css

15eded8

fix: import index.css

9dba1c8

feat: changes for premium page

579ced7

feat: implement Premium page with Tailwind and shadcn button

ae3bd9d

fix: fix lock file

f977408

chore: updates to button styles

71826a8

chore: update variant

093d947

chore: update colors

58fbeb3

chore: move CacheProvider to ThemeProvider

4e6daaf

chore: update paths for shadcn

287a67a

fix: fix format

1310637

feat: use Lucide instead of Radix icons

281ec8a

fix: add useEffect cleanup function

25cbb87

chore: add comment

42e82b6

fix: fix format

4ae065d

feat: show premium tab if no premium license

fd045a6

fix: fix format

e015d20

fix: use rem for font overrides

3eba3af

fix: remove fontSize

162ad19

fix: fix lockfile

fcb4c2a

chore: add font sizes to Tailwind config

962045c

jaaydenh force-pushed the tailwind-experiment branch from 302ca4f to 962045c Compare November 5, 2024 23:32

feat: add icons for OSS version

09c5844

chrifro reviewed Nov 6, 2024

View reviewed changes

fix: use sentence case

ef4b261

jaaydenh merged commit d4131ba into main Nov 6, 2024
30 checks passed

jaaydenh deleted the tailwind-experiment branch November 6, 2024 17:53

	<span className=" font-medium">
	<span className="font-medium">

	const root = window.document.documentElement;
	const root = document.documentElement;

feat: implement Premium features page using shadcn/ui and Tailwind #15094

feat: implement Premium features page using shadcn/ui and Tailwind #15094

Conversation

jaaydenh commented Oct 15, 2024 • edited Loading

aslilac commented Nov 1, 2024

Choose a reason for hiding this comment

jaaydenh Nov 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aslilac Nov 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaaydenh commented Nov 1, 2024

Parkreiner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaaydenh Nov 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Parkreiner commented Nov 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BrunoQuaresma left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 4, 2024 • edited Loading

🚀 Deploying PR 15094 ...

chrifro left a comment

Choose a reason for hiding this comment

jaaydenh commented Oct 15, 2024 •

edited

Loading

jaaydenh Nov 1, 2024 •

edited

Loading

aslilac Nov 1, 2024 •

edited

Loading

jaaydenh Nov 3, 2024 •

edited

Loading

Parkreiner commented Nov 2, 2024 •

edited

Loading

github-actions bot commented Nov 4, 2024 •

edited

Loading