diff --git a/_templates/new/component/prompt.js b/_templates/new/component/prompt.js index 8118044..8879d26 100644 --- 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 index 5e03f25..e69008e 100644 --- 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 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 index 9a12dce..bf29d7c 100644 --- a/apps/web/app/(site)/layout.tsx +++ b/apps/web/app/(site)/layout.tsx @@ -23,6 +23,7 @@ export default async function RootLayout({
{children}
 + ) } diff --git a/apps/web/app/components/Stack/Stack.tsx b/apps/web/app/components/Stack/Stack.tsx deleted file mode 100644 index 288106f..0000000 --- a/apps/web/app/components/Stack/Stack.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react' -import clsx from 'clsx' -import { Slot } from '@radix-ui/react-slot' - -type Gap = - | number - | { base?: number; sm?: number; md?: number; lg?: number; xl?: number } - -type TStack = React.ComponentProps<'div'> & { - asChild?: boolean - scale?: number - gap?: Gap -} - -const createGapStyles = (gap: Gap) => { - if (typeof gap === 'number') { - return { '--stack-gap': gap } - } - - return Object.entries(gap).reduce( - (acc, [key, value]) => { - if (key === 'base') { - acc[`--stack-gap`] = value - } else { - acc[`--stack-gap-${key}`] = value - } - - return acc - }, - {} as Record, - ) -} - -const createGapClassName = (gap: Gap) => { - if (typeof gap === 'number') return 'stack-gap' - - return Object.keys(gap) - .reduce((acc, key) => { - if (key === 'base') return acc - return `${acc}${key}:stack-gap ` - }, '' as string) - .trim() -} - -export const Stack = React.forwardRef, TStack>( - function Stack({ scale = 1, gap = 4, className, asChild, ...props }, ref) { - const Comp = asChild ? Slot : 'div' - const style = createGapStyles(gap) - const cx = createGapClassName(gap) - - return ( - - ) - }, -) diff --git a/apps/web/app/components/Stack/index.ts b/apps/web/app/components/Stack/index.ts deleted file mode 100644 index 177d154..0000000 --- a/apps/web/app/components/Stack/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -// export { default } from './Stack' -export * from './Stack' diff --git a/apps/web/app/components/portable/Block/Block.tsx b/apps/web/app/components/portable/Block/Block.tsx index c166e51..d6e92a0 100644 --- 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 ( -
-
-
- testing -
-
-
-
-
- -
-
-
-
-
-
hello
-
-
- +
- - return ( - -
item
- -
item
-
item
-
item
- -
item
- - ) + return } diff --git a/apps/web/package.json b/apps/web/package.json index b237010..8da4b08 100644 --- 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 index 0d4919b..008afbb 100644 --- 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
{ + 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 index 13824f3..5c42ed5 100644 --- 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 index 7a6c3c6..a1b9fab 100644 --- 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 index c3b0610..95b1487 100644 --- 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", diff --git a/packages/ui/src/componenets/Footer/Footer.spec.tsx b/packages/ui/src/componenets/Footer/Footer.spec.tsx new file mode 100644 index 0000000..be52927 --- /dev/null +++ b/packages/ui/src/componenets/Footer/Footer.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { expect, it, describe } from 'vitest' +import { render } from '@testing-library/react' +import { Footer } from './Footer' + +describe('Footer ', async () => { + it('should render', async () => { + const { getByTestId } = render(