From 25ac52fa43126cae774e9a89b00616426ec44f9b Mon Sep 17 00:00:00 2001 From: Bryce Kalow Date: Wed, 12 Apr 2023 12:06:57 -0500 Subject: [PATCH] feat: removes global TW styles (#80) --- package-lock.json | 82 ++++++++++++++++++- .../swingset-theme-hashicorp/package.json | 7 +- .../src/components.tsx | 7 ++ .../src/components/heading.tsx | 32 ++++++++ .../src/components/link.tsx | 16 ++++ .../src/css/styles.css | 22 ----- .../swingset-theme-hashicorp/src/index.tsx | 2 +- .../swingset-theme-hashicorp/src/page.tsx | 3 +- .../swingset-theme-hashicorp/tsup.config.ts | 2 +- 9 files changed, 144 insertions(+), 29 deletions(-) create mode 100644 packages/swingset-theme-hashicorp/src/components/heading.tsx create mode 100644 packages/swingset-theme-hashicorp/src/components/link.tsx diff --git a/package-lock.json b/package-lock.json index ff00e99..53a4291 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3890,6 +3890,22 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "node_modules/class-variance-authority": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.5.2.tgz", + "integrity": "sha512-j7Qqw3NPbs4IpO80gvdACWmVvHiLLo5MECacUBLnJG17CrLpWaQ7/4OaWX6P0IO1j2nvZ7AuSfBS/ImtEUZJGA==", + "funding": { + "url": "https://joebell.co.uk" + }, + "peerDependencies": { + "typescript": ">= 4.5.5 < 6" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", @@ -13797,7 +13813,7 @@ "version": "4.9.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "dev": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -15273,8 +15289,12 @@ }, "packages/swingset-theme-hashicorp": { "version": "0.0.0", + "dependencies": { + "class-variance-authority": "^0.5.2" + }, "devDependencies": { "autoprefixer": "^10.4.13", + "globby": "^13.1.4", "next": "^13.1.6", "postcss": "^8.4.21", "postcss-cli": "^10.1.0", @@ -15287,6 +15307,25 @@ "swingset": "*" } }, + "packages/swingset-theme-hashicorp/node_modules/globby": { + "version": "13.1.4", + "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz", + "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==", + "dev": true, + "dependencies": { + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.11", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^4.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "packages/swingset-theme-hashicorp/node_modules/postcss": { "version": "8.4.21", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", @@ -15311,6 +15350,18 @@ "node": "^10 || ^12 || >=14" } }, + "packages/swingset-theme-hashicorp/node_modules/slash": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", + "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "packages/swingset/node_modules/globby": { "version": "13.1.3", "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz", @@ -18312,6 +18363,12 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "class-variance-authority": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.5.2.tgz", + "integrity": "sha512-j7Qqw3NPbs4IpO80gvdACWmVvHiLLo5MECacUBLnJG17CrLpWaQ7/4OaWX6P0IO1j2nvZ7AuSfBS/ImtEUZJGA==", + "requires": {} + }, "cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", @@ -24971,6 +25028,8 @@ "version": "file:packages/swingset-theme-hashicorp", "requires": { "autoprefixer": "^10.4.13", + "class-variance-authority": "^0.5.2", + "globby": "^13.1.4", "next": "^13.1.6", "postcss": "^8.4.21", "postcss-cli": "^10.1.0", @@ -24980,6 +25039,19 @@ "tailwindcss": "^3.2.7" }, "dependencies": { + "globby": { + "version": "13.1.4", + "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz", + "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==", + "dev": true, + "requires": { + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.11", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^4.0.0" + } + }, "postcss": { "version": "8.4.21", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", @@ -24990,6 +25062,12 @@ "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } + }, + "slash": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", + "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", + "dev": true } } }, @@ -25625,7 +25703,7 @@ "version": "4.9.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "dev": true + "devOptional": true }, "ufo": { "version": "1.0.1", diff --git a/packages/swingset-theme-hashicorp/package.json b/packages/swingset-theme-hashicorp/package.json index 844325b..3f9b709 100644 --- a/packages/swingset-theme-hashicorp/package.json +++ b/packages/swingset-theme-hashicorp/package.json @@ -32,11 +32,14 @@ "devDependencies": { "autoprefixer": "^10.4.13", "next": "^13.1.6", - "postcss-cli": "^10.1.0", "postcss": "^8.4.21", - "react-dom": "^18.2.0", + "postcss-cli": "^10.1.0", "react": "^18.2.0", + "react-dom": "^18.2.0", "swingset": "file:../swingset", "tailwindcss": "^3.2.7" + }, + "dependencies": { + "class-variance-authority": "^0.5.2" } } diff --git a/packages/swingset-theme-hashicorp/src/components.tsx b/packages/swingset-theme-hashicorp/src/components.tsx index 074b041..f8d555a 100644 --- a/packages/swingset-theme-hashicorp/src/components.tsx +++ b/packages/swingset-theme-hashicorp/src/components.tsx @@ -1,6 +1,13 @@ import { PropsTable } from './components/props-table' +import { Heading } from './components/heading' export default { + h1: (props: any) => , + h2: (props: any) => , + h3: (props: any) => , + h4: (props: any) => , + h5: (props: any) => , + h6: (props: any) => , p: (props: any) =>

, pre: (props: any) => 

,
   PropsTable,
diff --git a/packages/swingset-theme-hashicorp/src/components/heading.tsx b/packages/swingset-theme-hashicorp/src/components/heading.tsx
new file mode 100644
index 0000000..c20e452
--- /dev/null
+++ b/packages/swingset-theme-hashicorp/src/components/heading.tsx
@@ -0,0 +1,32 @@
+import { type HTMLAttributes } from 'react'
+import { cx, cva } from 'class-variance-authority'
+
+type HeadingProps = HTMLAttributes & {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+const headingStyles = cva('m-0 p0', {
+  variants: {
+    as: {
+      h1: 'ss-text-3xl',
+      h2: 'ss-text-2xl',
+      h3: 'ss-text-xl',
+      h4: 'ss-text-lg',
+      h5: 'ss-text-md',
+      h6: 'ss-text-md',
+    },
+  },
+  defaultVariants: {
+    as: 'h2',
+  },
+})
+
+export function Heading({ as = 'h2', className, ...restProps }: HeadingProps) {
+  const Component = as
+  return (
+    
+  )
+}
diff --git a/packages/swingset-theme-hashicorp/src/components/link.tsx b/packages/swingset-theme-hashicorp/src/components/link.tsx
new file mode 100644
index 0000000..3595cd0
--- /dev/null
+++ b/packages/swingset-theme-hashicorp/src/components/link.tsx
@@ -0,0 +1,16 @@
+import { type ComponentProps } from 'react'
+import NextLink from 'next/link'
+import { cx } from 'class-variance-authority'
+
+type NextLinkProps = ComponentProps
+
+export type LinkProps = NextLinkProps & { className?: string }
+
+export function Link({ className, ...restProps }: LinkProps) {
+  return (
+    
+  )
+}
diff --git a/packages/swingset-theme-hashicorp/src/css/styles.css b/packages/swingset-theme-hashicorp/src/css/styles.css
index 4aa8ede..b5c61c9 100644
--- a/packages/swingset-theme-hashicorp/src/css/styles.css
+++ b/packages/swingset-theme-hashicorp/src/css/styles.css
@@ -1,25 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  h1 {
-    @apply ss-text-3xl;
-  }
-
-  h2 {
-    @apply ss-text-2xl;
-  }
-
-  h3 {
-    @apply ss-text-xl;
-  }
-
-  h4 {
-    @apply ss-text-lg;
-  }
-
-  a {
-    @apply ss-text-blue-500 ss-underline;
-  }
-}
diff --git a/packages/swingset-theme-hashicorp/src/index.tsx b/packages/swingset-theme-hashicorp/src/index.tsx
index a9e80de..4df772c 100644
--- a/packages/swingset-theme-hashicorp/src/index.tsx
+++ b/packages/swingset-theme-hashicorp/src/index.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
 // @ts-expect-error -- this should be resolved once the theme is externalized
 import { meta, categories } from 'swingset/meta'
+import { Link } from './components/link'
 
 import Page from './page'
 
diff --git a/packages/swingset-theme-hashicorp/src/page.tsx b/packages/swingset-theme-hashicorp/src/page.tsx
index 7cdd7ab..9ef4541 100644
--- a/packages/swingset-theme-hashicorp/src/page.tsx
+++ b/packages/swingset-theme-hashicorp/src/page.tsx
@@ -1,3 +1,4 @@
+import { Heading } from './components/heading'
 import { OpenInEditor } from './components/open-in-editor'
 
 export default async function Page({
@@ -9,7 +10,7 @@ export default async function Page({
 }) {
   return (
     <>
-      
{data?.frontmatter?.title ?? data?.slug}

+      {data?.frontmatter?.title ?? data?.slug}
       
{data?.frontmatter?.description}

       {content}
       

diff --git a/packages/swingset-theme-hashicorp/tsup.config.ts b/packages/swingset-theme-hashicorp/tsup.config.ts
index 3477cf3..e1a7210 100644
--- a/packages/swingset-theme-hashicorp/tsup.config.ts
+++ b/packages/swingset-theme-hashicorp/tsup.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from 'tsup'
 import { Buffer } from 'node:buffer'
+import { defineConfig } from 'tsup'
 
 /**
  * Ensure that the "use client"; directive for RSC is always at the top of the output file even after the build is finished.