Skip to content

Commit

Permalink
chore: update prettier config and clean up (#39)
Browse files Browse the repository at this point in the history 
- Removed `singleQuote` field from the Prettier configuration.
- Removed `useTabs` field from the Prettier configuration.
  • Loading branch information
@halvaradop
halvaradop authored Oct 10, 2024
1 parent 12ec140 commit cd4c1d1
Show file tree
Hide file tree
Showing 18 changed files with 362 additions and 366 deletions.
34 changes: 17 additions & 17 deletions .storybook/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,26 @@ import { join, dirname } from "path"
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
const getAbsolutePath = (value: string): string => {
return dirname(require.resolve(join(value, "package.json")))
return dirname(require.resolve(join(value, "package.json")))
}

const config: StorybookConfig = {
stories: [
"../stories/**/*.mdx",
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
"../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)",
],
addons: [
getAbsolutePath("@storybook/addon-onboarding"),
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@chromatic-com/storybook"),
getAbsolutePath("@storybook/addon-interactions"),
],
framework: {
name: getAbsolutePath("@storybook/react-vite"),
options: {},
},
stories: [
"../stories/**/*.mdx",
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
"../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)",
],
addons: [
getAbsolutePath("@storybook/addon-onboarding"),
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@chromatic-com/storybook"),
getAbsolutePath("@storybook/addon-interactions"),
],
framework: {
name: getAbsolutePath("@storybook/react-vite"),
options: {},
},
}

export default config
16 changes: 8 additions & 8 deletions .storybook/preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import type { Preview } from "@storybook/react"
import "../index.css"

const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
}

export default preview
8 changes: 2 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,8 @@
},
"prettier": {
"semi": false,
"jsxSingleQuote": false,
"singleQuote": false,
"printWidth": 120,
"tabWidth": 4,
"useTabs": true,
"printWidth": 120,
"trailingComma": "es5",
"overrides": [
{
Expand All @@ -92,8 +89,7 @@
"**/*.yaml"
],
"options": {
"tabWidth": 2,
"useTabs": false
"tabWidth": 2
}
},
{
Expand Down
76 changes: 38 additions & 38 deletions packages/ui-button/src/button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,73 +2,73 @@ import type { Meta, StoryObj } from "@storybook/react"
import { Button } from "./index.jsx"

const meta: Meta = {
title: "ui-button",
component: Button,
tags: ["autodocs"],
args: {
children: "Button",
},
parameters: {
layout: "centered",
},
title: "ui-button",
component: Button,
tags: ["autodocs"],
args: {
children: "Button",
},
parameters: {
layout: "centered",
},
} satisfies Meta<typeof Button>

type Story = StoryObj<typeof meta>

export const Base: Story = {
args: {
variant: "base",
},
args: {
variant: "base",
},
}

export const Ghost: Story = {
args: {
variant: "ghost",
},
args: {
variant: "ghost",
},
}

export const Link: Story = {
args: {
variant: "link",
},
args: {
variant: "link",
},
}

export const Destructive: Story = {
args: {
variant: "destructive",
},
args: {
variant: "destructive",
},
}

export const Outline: Story = {
args: {
variant: "outline",
},
args: {
variant: "outline",
},
}

export const Small: Story = {
args: {
size: "sm",
},
args: {
size: "sm",
},
}

export const Medium: Story = {
args: {
size: "md",
},
args: {
size: "md",
},
}

export const Large: Story = {
args: {
size: "lg",
},
args: {
size: "lg",
},
}

export const AsAnchor: Story = {
render: () => (
<Button variant="link" asChild>
<a href="">Link</a>
</Button>
),
render: () => (
<Button variant="link" asChild>
<a href="">Link</a>
</Button>
),
}

export default meta
70 changes: 35 additions & 35 deletions packages/ui-button/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,48 @@ import { merge, Slot, SlotProps } from "@halvaradop/ui-core"
export type ButtonProps<T extends ArgsFunction> = SlotProps<"button"> & VariantProps<T>

export const buttonVariants = cva("flex items-center justify-center font-semibold border transition hover:border-transparent hover:bg-opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", {
variants: {
variant: {
base: "text-white border-black bg-black focus-visible:ring-black",
ghost: "text-black border-transparent bg-transparent hover:text-white hover:bg-black/90 focus-visible:text-white focus-visible:bg-black/90 focus-visible:ring-0 focus-visible:ring-offset-0 ",
link: "text-black border-none hover:underline hover:underline-offset-4 hover:decoration-black focus-visible:underline focus-visible:underline-offset-4 focus:decoration-black focus-visible:ring-0 focus-visible:ring-offset-0",
destructive: "text-white border-red-500 bg-red-500 focus-visible:ring-red-500",
outline: "text-black border-black hover:border-black focus-visible:ring-black",
},
size: {
sm: "h-9 px-3 text-sm rounded-md",
base: "h-10 px-4 text-base rounded-md",
md: "h-10 px-4 text-base rounded-md",
lg: "h-11 px-4 text-lg rounded-lg",
},
fullWidth: {
true: "w-full",
false: "w-fit",
},
fullRounded: {
true: "rounded-full",
false: "rounded",
},
},
defaultVariants: {
variant: "base",
size: "base",
fullWidth: false,
fullRounded: false,
},
variants: {
variant: {
base: "text-white border-black bg-black focus-visible:ring-black",
ghost: "text-black border-transparent bg-transparent hover:text-white hover:bg-black/90 focus-visible:text-white focus-visible:bg-black/90 focus-visible:ring-0 focus-visible:ring-offset-0 ",
link: "text-black border-none hover:underline hover:underline-offset-4 hover:decoration-black focus-visible:underline focus-visible:underline-offset-4 focus:decoration-black focus-visible:ring-0 focus-visible:ring-offset-0",
destructive: "text-white border-red-500 bg-red-500 focus-visible:ring-red-500",
outline: "text-black border-black hover:border-black focus-visible:ring-black",
},
size: {
sm: "h-9 px-3 text-sm rounded-md",
base: "h-10 px-4 text-base rounded-md",
md: "h-10 px-4 text-base rounded-md",
lg: "h-11 px-4 text-lg rounded-lg",
},
fullWidth: {
true: "w-full",
false: "w-fit",
},
fullRounded: {
true: "rounded-full",
false: "rounded",
},
},
defaultVariants: {
variant: "base",
size: "base",
fullWidth: false,
fullRounded: false,
},
})

/**
* The Button component is a versatile and customizable button element.
* It supports various variants, sizes, and additional props to enhance its appearance and functionality.
*/
export const Button = forwardRef<HTMLButtonElement, ButtonProps<typeof buttonVariants>>(({ className, variant, size, fullWidth, fullRounded, asChild, children, ...props }, ref) => {
const SlotComponent = asChild ? Slot : "button"
return (
<SlotComponent className={merge(buttonVariants({ className, variant, size, fullWidth, fullRounded }))} ref={ref} role="button" {...props}>
{children}
</SlotComponent>
)
const SlotComponent = asChild ? Slot : "button"
return (
<SlotComponent className={merge(buttonVariants({ className, variant, size, fullWidth, fullRounded }))} ref={ref} role="button" {...props}>
{children}
</SlotComponent>
)
})

Button.displayName = "Button"
18 changes: 9 additions & 9 deletions packages/ui-core/src/slot.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { type ReactNode, Children, isValidElement, cloneElement, ComponentProps } from "react"

export const Slot = ({ children, ...props }: { children: React.ReactNode }) => {
if (isValidElement(children)) {
return cloneElement(children, { ...props, ...children.props })
}
if (Children.count(children) > 1) {
Children.only(null)
}
return null
if (isValidElement(children)) {
return cloneElement(children, { ...props, ...children.props })
}
if (Children.count(children) > 1) {
Children.only(null)
}
return null
}

export type SlotWithAsChild<
Component extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<unknown>,
Component extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<unknown>,
> = ({ asChild?: false } & ComponentProps<Component>) | { asChild: true; children: ReactNode }

export type SlotProps<Component extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<unknown>> =
SlotWithAsChild<Component> & { className?: string }
SlotWithAsChild<Component> & { className?: string }
12 changes: 6 additions & 6 deletions packages/ui-core/src/tsup.config.base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { Options } from "tsup"
* Base tsup configuration for all packages.
*/
export const tsupConfig: Options = {
entry: ["src", "!src/**/*.stories.tsx"],
format: ["esm", "cjs"],
dts: true,
clean: true,
minify: true,
external: ["vite", "tailwindcss"],
entry: ["src", "!src/**/*.stories.tsx"],
format: ["esm", "cjs"],
dts: true,
clean: true,
minify: true,
external: ["vite", "tailwindcss"],
}
Loading

0 comments on commit cd4c1d1

Please sign in to comment.