Merge pull request #65 from magicspon/dev

chore: tidy up
magicspon · May 19, 2024 · 585c356 · 585c356
2 parents d36f24e + cf35e89
commit 585c356
Show file tree

Hide file tree

Showing 21 changed files with 125 additions and 286 deletions.
diff --git a/_templates/new/component/prompt.js b/_templates/new/component/prompt.js
@@ -34,22 +34,20 @@ module.exports = {
         message: 'Package',
         choices: ['componenets', 'primitives'],
       })
-      dir = `/src/${result.uiDir}`
-      result = await prompter.prompt({
+      const result2 = await prompter.prompt({
         type: 'confirm',
         name: 'storybook',
         message: 'Do you want to include a story:',
       })
-
-      storybook = result.storybook
-
-      result = await prompter.prompt({
+      const result3 = await prompter.prompt({
         type: 'confirm',
         name: 'variants',
         message: 'Do you want to use a variants:',
       })
 
-      variants = result.variants
+      dir = `/src/${result.uiDir}`
+      storybook = result2.storybook
+      variants = result3.variants
     }
 
     const { forwardRef } = await prompter.prompt({

diff --git a/_templates/new/component/story.ejs.t b/_templates/new/component/story.ejs.t
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { <%= h.changeCase.pascalCase(name) %> } from '.'
 
 const meta = {
-	title: 'Example/<%= h.changeCase.pascalCase(name) %>',
+	title: 'ui/<%= h.changeCase.pascalCase(name) %>',
 	component: <%= h.changeCase.pascalCase(name) %>,
 	parameters: {
 		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
@@ -24,8 +24,8 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
 	args: {
-		<% if(variants){ -%>
+<% if(variants){ -%>
 		variant: "default"
-		<% } -%>
+<% } -%>
 	},
 }
diff --git a/apps/web/app/(site)/layout.tsx b/apps/web/app/(site)/layout.tsx
@@ -23,6 +23,7 @@ export default async function RootLayout({
       <ConditionalPreviewProvider>
         <main>{children}</main>
       </ConditionalPreviewProvider>
+      <footer>...</footer>
     </Providers>
   )
 }
diff --git a/apps/web/app/components/Stack/Stack.tsx b/apps/web/app/components/Stack/Stack.tsx
diff --git a/apps/web/app/components/Stack/index.ts b/apps/web/app/components/Stack/index.ts
diff --git a/apps/web/app/components/portable/Block/Block.tsx b/apps/web/app/components/portable/Block/Block.tsx
@@ -18,25 +18,7 @@ export type BlockProps = {
 
 export function Block({ block, variant }: BlockProps) {
   return (
-    <div className="grid grid-cols-site grid-flow-row">
-      <div className="col-span-5 bg-blue-500 grid grid-cols-[subgrid]">
-        <div className="col-start-4 col-span-2 grid content-center p-5 border-4 border-black">
-          testing
-        </div>
-      </div>
-      <div className="col-span-5 bg-pink-600">
-        <div className="h-56"></div>
-      </div>
-
-      <div className="col-span-5">
-        <div className="h-56"></div>
-      </div>
-      <div className="col-span-5 grid grid-cols-[subgrid]">
-        <div className="col-start-1 bg-blue-300 col-span-5 grid grid-cols-[subgrid]">
-          <div className="col-span-2 p-5 border-4 border-black">hello</div>
-        </div>
-      </div>
-
+    <div>
       <PortableText
         value={block as PortableTextProps['value']}
         components={{

diff --git a/apps/web/app/pages/HomePage/HomePage.tsx b/apps/web/app/pages/HomePage/HomePage.tsx
@@ -1,22 +1,10 @@
 import type { HomeQuery } from 'cms/queries/pages/home.query'
 import { notFound } from 'next/navigation'
 import { getFirstOrNull } from 'utils/getFirstOrNull'
-import { Stack } from '~/components/Stack'
+import { Block } from '~/components/portable/Block'
 
 export function HomePage({ data }: { data: HomeQuery }) {
   const page = getFirstOrNull(data.page)
   if (!page) notFound()
-  // return <Block variant="primary" block={page.body} />
-
-  return (
-    <Stack gap={{ base: 20, md: 60, lg: 80 }}>
-      <div>item</div>
-      <Stack scale={1.3} gap={10}>
-        <div>item</div>
-        <div>item</div>
-        <div>item</div>
-      </Stack>
-      <div>item</div>
-    </Stack>
-  )
+  return <Block variant="primary" block={page.body} />
 }
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -21,7 +21,6 @@
     "@tanstack/react-query-devtools": "^5.37.1",
     "@tanstack/react-query-next-experimental": "^5.37.1",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/react-hooks": "^8.0.1",
     "@vercel/analytics": "^1.2.2",
     "@vitejs/plugin-react": "^4.2.1",
     "class-variance-authority": "^0.7.0",

diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
@@ -1,58 +1,8 @@
 import preset from 'tailwind-config'
 import type { Config } from 'tailwindcss'
-import plugin from 'tailwindcss/plugin'
+// import plugin from 'tailwindcss/plugin'
 
 export default {
   content: ['./app/**/*.{ts,tsx}', '../../packages/ui/**/*.{ts,tsx}'],
   presets: [preset],
-
-  plugins: [
-    // this is a bit silly <div className="grid stack-[12_._._24] />
-    plugin(function ({ addBase, theme }) {
-      addBase({
-        ':root': {
-          '--stack-gap': '0',
-          '--stack-gap-sm': '0',
-          '--stack-gap-md': '0',
-          '--stack-gap-lg': '0',
-          '--stack-gap-xl': '0',
-        },
-        '.stack': {
-          display: 'grid',
-          gap: 'calc(var(--stack-gap) * var(--scale) * 1px)',
-        },
-      })
-    }),
-  ],
-
-  theme: {
-    extend: {
-      fontSize: {
-        xs: ['0.75rem', { lineHeight: '1' }],
-        sm: ['0.875rem', { lineHeight: '1.25' }],
-        base: ['1rem', { lineHeight: '1.25' }],
-        lg: ['1.125rem', { lineHeight: '1.24' }],
-        xl: ['1.25rem', { lineHeight: '1.25' }],
-        '2xl': ['1.5rem', { lineHeight: '1.25' }],
-        '3xl': ['2rem', { lineHeight: '1.15' }],
-        '4xl': ['2.5rem', { lineHeight: '1' }],
-        '5xl': ['3rem', { lineHeight: '1' }],
-        '6xl': ['3.5rem', { lineHeight: '1' }],
-        '7xl': ['4.5rem', { lineHeight: '1' }],
-        '8xl': ['6rem', { lineHeight: '1' }],
-        '9xl': ['8rem', { lineHeight: '1' }],
-      },
-      gridTemplateColumns: {
-        site: `[full-start] var(--full)
-                [feature-start] var(--feature)
-                  [popout-start] var(--popout)
-                    [content-start] 
-                      var(--columns)
-                    [content-end]
-                  var(--popout) [popout-end]
-                var(--feature) [feature-end]
-                var(--full) [full-end]`,
-      },
-    },
-  },
 } satisfies Config
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
-    "lint": "turbo lint --filter=!react-email-client && manypkg check",
+    "lint": "turbo lint && manypkg check",
     "format": "prettier --write \"**/*.{ts,tsx,md,json,css}\"",
     "prepare": "husky install",
     "storybook": "turbo run storybook --filter=ui",

diff --git a/packages/config/tailwind/lib/shadcn-plugin.ts b/packages/config/tailwind/lib/shadcn-plugin.ts
@@ -1,21 +1,20 @@
+import Color from 'utils/color'
 import plugin from 'tailwindcss/plugin'
 
+const hsl = (hex: string) => {
+  const [h, s, l] = new Color(hex)
+    .to('hsl')
+    .coords.map((v) => (isNaN(v) ? 0 : Number(v.toFixed(2))))
+
+  return `${h} ${s}% ${l}%`
+}
+
+const pxToRem = (value: number) => {
+  return `${value / 16}rem`
+}
+
 export const shadcnPlugin = plugin(
   ({ addBase }) => {
-    // colours
-    addBase({
-      ':root': {
-        '--max-width': '1200px',
-        '--count': '4',
-        '--gap': 'clamp(1rem, 1vw, 3rem)',
-        '--full': 'minmax(var(--gap), 1fr)',
-        '--popout': 'minmax(0, 1rem)',
-        '--feature': 'minmax(0, 2rem)',
-        '--columns':
-          'repeat(var(--count), minmax(auto, calc(var(--max-width) / var(--count))))',
-      },
-    })
-
     const white = '0 0% 100%' // #fff
     const dark = '240 10% 3.9%' // #09090b
     const primary = '346.8 77.2% 49.8%'
@@ -43,38 +42,10 @@ export const shadcnPlugin = plugin(
         '--ring': primary, // #e11d48
         '--radius': 'rem',
       },
-      '.purple': {
-        '--background': '20 14.3% 4.1%',
-        '--foreground': '0 0% 95%',
-        '--card': '24 9.8% 10%',
-        '--card-foreground': '0 0% 95%',
-        '--popover': '0 0% 9%',
-        '--popover-foreground': '0 0% 95%',
-        '--primary': primary, // #e11d48
-        '--primary-foreground': '355.7 100% 97.3%', // #fff1f2
-        '--secondary': '240 3.7% 15.9%',
-        '--secondary-foreground': '0 0% 98%',
-        '--muted': '0 0% 15%',
-        '--muted-foreground': '240 5% 64.9%',
-        '--accent': '12 6.5% 15.1%',
-        '--accent-foreground': '0 0% 98%',
-        '--destructive': '0 62.8% 30.6%',
-        '--destructive-foreground': '0 85.7% 97.3%',
-        '--border': '240 3.7% 15.9%',
-        '--input': '240 3.7% 15.9%',
-        '--ring': primary, // #e11d48
-      },
     })
   },
   {
     theme: {
-      container: {
-        center: true,
-        padding: '2rem',
-        screens: {
-          '2xl': '1400px',
-        },
-      },
       extend: {
         colors: {
           border: {

diff --git a/packages/config/tailwind/package.json b/packages/config/tailwind/package.json
@@ -21,6 +21,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.13",
     "@themosaad/tailwindcss-capsize": "^1.0.0",
-    "tailwindcss-animate": "^1.0.6"
+    "tailwindcss-animate": "^1.0.6",
+    "utils": "3.0.0"
   }
 }
diff --git a/packages/config/tailwind/tailwind.config.ts b/packages/config/tailwind/tailwind.config.ts
@@ -1,7 +1,7 @@
 // import fontMetrics from '@capsizecss/metrics/roboto'
 import { fontFamily } from 'tailwindcss/defaultTheme'
 import type { Config } from 'tailwindcss'
-import typography from '@tailwindcss/typography'
+// import typography from '@tailwindcss/typography'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore meh
 import capsize from '@themosaad/tailwindcss-capsize'
@@ -68,7 +68,6 @@ const config = {
       backgroundImage: {
         chevron: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
       },
-
       boxShadow: {
         '2xs': '0px 1px 2px 0px rgb(0 0 0 / 0.05)',
         xs: '0px 1px 2px 0px rgb(0 0 0 / 0.06), 0px 1px 3px 0px rgb(0 0 0 / 0.1)',
@@ -107,9 +106,6 @@ const config = {
         '8xl': ['6rem', { lineHeight: '1' }],
         '9xl': ['8rem', { lineHeight: '1' }],
       },
-      gridTemplateRows: {
-        sub: 'subgrid',
-      },
       keyframes: {
         expand: {
           '0%': { height: '0' },
@@ -179,7 +175,7 @@ const config = {
   },
   plugins: [
     containerQueries,
-    typography,
+    // typography,
     capsize,
     animate,
     shadcnPlugin,

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -6,7 +6,7 @@
   "license": "MIT",
   "scripts": {
     "lint": "tsc --pretty --noEmit --project tsconfig.json && TIMING=1 eslint \"./**/*.{js,ts,tsx}\" --fix --quiet",
-    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
@@ -21,7 +21,7 @@
     "@storybook/nextjs": "^8.1.1",
     "@storybook/react": "^8.1.1",
     "@storybook/react-webpack5": "^8.1.1",
-    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/react": "^15.0.7",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
@@ -51,7 +51,6 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
-    "@testing-library/react-hooks": "^8.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",