Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat setup env test headless ui #49

Merged
merged 4 commits into from
Jan 17, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: update storybook
khoilen committed Jan 17, 2025
commit 370f4c409b0af517bb491ee17620ff7fe34153dc
4 changes: 0 additions & 4 deletions apps/nt-headless-ui/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -2,23 +2,19 @@ import { dirname, join } from 'path'

module.exports = {
stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],

addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-interactions'),
getAbsolutePath('@chromatic-com/storybook'),
],

framework: {
name: getAbsolutePath('@storybook/nextjs'),
options: {},
},

docs: {
autodocs: true,
},

typescript: {
reactDocgen: 'react-docgen-typescript',
},
4 changes: 0 additions & 4 deletions apps/nt-headless-ui/app/globals.css
Original file line number Diff line number Diff line change
@@ -2,10 +2,6 @@
@tailwind components;
@tailwind utilities;

body {
font-family: Arial, Helvetica, sans-serif;
}

@layer base {
:root {
--radius: 0.5rem;
32 changes: 11 additions & 21 deletions apps/nt-headless-ui/components/ui/button/button.stories.tsx
Original file line number Diff line number Diff line change
@@ -12,16 +12,16 @@ const Template: StoryFn<ButtonProps> = (args: ButtonProps) => (
<Button {...args}>Button</Button>
)

export const Default: StoryFn<ButtonProps> = Template.bind({})
Default.args = {
export const Primary: StoryFn<ButtonProps> = Template.bind({})
Primary.args = {
onClick: () => alert('Button clicked!'),
variant: 'default',
variant: 'primary',
}

export const Destructive: StoryFn<ButtonProps> = Template.bind({})
Destructive.args = {
export const Secondary: StoryFn<ButtonProps> = Template.bind({})
Secondary.args = {
onClick: () => alert('Button clicked!'),
variant: 'destructive',
variant: 'seconadry',
}

export const Outline: StoryFn<ButtonProps> = Template.bind({})
@@ -30,20 +30,10 @@ Outline.args = {
variant: 'outline',
}

export const Secondary: StoryFn<ButtonProps> = Template.bind({})
Secondary.args = {
onClick: () => alert('Button clicked!'),
variant: 'secondary',
}

export const Ghost: StoryFn<ButtonProps> = Template.bind({})
Ghost.args = {
onClick: () => alert('Button clicked!'),
variant: 'ghost',
}

export const Link: StoryFn<ButtonProps> = Template.bind({})
Link.args = {
export const OutlineSecondary: StoryFn<ButtonProps> = Template.bind(
{},
)
OutlineSecondary.args = {
onClick: () => alert('Button clicked!'),
variant: 'link',
variant: 'outline-secondary',
}
24 changes: 11 additions & 13 deletions apps/nt-headless-ui/components/ui/button/button.tsx
Original file line number Diff line number Diff line change
@@ -4,30 +4,28 @@ import { cva, type VariantProps } from 'class-variance-authority'
import * as React from 'react'

const buttonVariants = cva(
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300',
'inline-flex items-center justify-center rounded-badge text-sm font-medium shadow-md',
{
variants: {
variant: {
default:
'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90',
destructive:
'bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90',
primary:
'bg-primary text-white hover:bg-shade-primary-80 active:bg-shade-primary-110 disabled:bg-shade-primary-20 disabled:text-white',
seconadry:
'bg-shade-secondary-1 text-white hover:bg-shade-secondary-1-80 active:bg-shade-secondary-1-110 disabled:bg-shade-secondary-1-20 disabled:text-white',
outline:
'border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
secondary:
'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80',
ghost: 'hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
link: 'text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50',
'border border-primary text-primary hover:shadow active:bg-shade-primary-10 disabled:bg-primary-20 disabled:text-white',
'outline-secondary':
'border border-shade-secondary-1 text-shade-secondary-1 hover:shadow active:bg-shade-secondary-10 disabled:bg-shade-secondary-20 disabled:text-white',
},
size: {
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
sm: 'h-8 px-3 text-xs',
lg: 'h-10 px-8',
icon: 'h-9 w-9',
},
},
defaultVariants: {
variant: 'default',
variant: 'primary',
size: 'default',
},
},
9 changes: 4 additions & 5 deletions apps/nt-headless-ui/package.json
Original file line number Diff line number Diff line change
@@ -3,15 +3,13 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"storybook": "storybook dev -p 6006 -c .storybook",
"dev": "storybook dev -p 6006 -c .storybook",
"build-storybook": "storybook -c .storybook -o dist/storybook"
},
"dependencies": {
"@nashtech/stylesheet": "^1.0.3",
"@radix-ui/react-slot": "^1.1.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -21,7 +19,6 @@
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^2.6.0",
"tailwindcss": "^3.4.16",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
@@ -35,7 +32,9 @@
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17",
"typescript": "^5",
"webpack": "5"
}
Loading