Merge pull request #4 from Bland-UI/feat/chip

Feat/chip

.changeset/tender-fans-applaud.md

@@ -0,0 +1,5 @@
+---
+"@blandui/blandui-react": patch
+---
+
+Chip component added and font weight medium added to Typograhy

apps/storybook-react/stories/Chip.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chip } from '@blandui/blandui-react';
+
+const meta: Meta<typeof Chip> = {
+	title:     'Component/Chip',
+	component: Chip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+const max = 10000;
+const min = 0;
+
+export const Default: Story = {
+	render: () => {
+		const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+
+		return (
+				<div className="flex flex-col gap-lg items-start justify-center">
+					<div className="flex gap-md">
+						<Chip size="sm" type="empty">Small</Chip>
+						<Chip size="md" type="empty">Medium</Chip>
+					</div>
+
+					<div className="flex gap-md">
+						<Chip size="sm" type="cancellable">Small</Chip>
+						<Chip size="md" type="cancellable">Medium</Chip>
+					</div>
+
+					<div className="flex gap-md">
+						<Chip size="sm" type="countable" count={randomNumber}>Small</Chip>
+						<Chip size="md" type="countable" count={randomNumber}>Medium</Chip>
+					</div>
+				</div>
+		);
+	},
+};

packages/blandui-react/package.json

@@ -41,6 +41,7 @@
 	"dependencies": {
 		"@blandui/blandui": "workspace:*",
 		"clsx": "^2.1.1",
+		"lucide-react": "^0.395.0",
 		"tailwind-merge": "^2.3.0"
 	},
 	"devDependencies": {

packages/blandui-react/src/components/Chip/Chip.tsx

@@ -0,0 +1,85 @@
+import { ComponentProps, forwardRef } from 'react';
+import { X } from 'lucide-react';
+import cn from '../../utils/cn';
+
+type ChipSize = 'sm' | 'md';
+type ChipType = 'empty' | 'cancellable' | 'countable';
+
+export interface ChipProps extends ComponentProps<'div'> {
+	className?: string;
+	size?: ChipSize;
+	type?: ChipType;
+
+	cancellableClassName?: string;
+
+	countableClassName?: string;
+	count?: number;
+}
+
+export const Chip = forwardRef<HTMLDivElement, ChipProps>((
+	{
+		children,
+		className,
+
+		size = 'md',
+		type = 'empty',
+
+		cancellableClassName,
+
+		countableClassName,
+		count = 0,
+		...props
+	},
+	ref,
+) => {
+	const baseCn = 'flex items-center gap-sm border border-subtle rounded-sm bg-surface-4 body-md text-bold';
+
+	const typeCn = {
+		empty:       'px-sm',
+		cancellable: 'pl-sm pr-xs',
+		countable:   'pl-sm pr-xs',
+
+	};
+
+	const sizeCn = {
+		sm: 'h-xl',
+		md: 'h-2xl',
+	};
+
+	const chipCn = cn(
+		baseCn,
+		typeCn[type],
+		sizeCn[size],
+		className,
+	);
+
+	const baseExtraCn = 'flex items-center justify-center p-2xs rounded-xs bg-surface-3 body-sm text-subtle font-semibold';
+
+	const cancellableCn = cn(
+		baseExtraCn,
+		'cursor-pointer',
+		cancellableClassName,
+	);
+
+	const countableCn = cn(
+		baseExtraCn,
+		'min-w-lg',
+		countableClassName,
+	);
+
+	return (
+		<div className={chipCn} ref={ref} {...props}>
+			{ children }
+
+			{ type === 'cancellable' && <span className={cancellableCn}>
+				<X size="0.75rem" className="text-subtle" />
+			</span>}
+
+			{ type === 'countable' && <span className={countableCn}>
+				{ count }
+			</span>}
+		</div>
+	);
+});
+
+Chip.displayName = 'Chip';

packages/blandui-react/src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip';

packages/blandui-react/src/components/Typography/Typography.tsx

@@ -16,11 +16,17 @@ const classMap = {
 	body:    { lg: 'body-lg', md: 'body-md', sm: 'body-sm' },
 };
 
+const weightMap = {
+	regular: 'font-normal',
+	medium:  'font-medium',
+	bold:    'font-semibold',
+};
+
 export interface TypographyProps extends PropsWithChildren {
 	className?: string;
 	size?: 'sm' | 'md' | 'lg';
 	type?: 'display' | 'heading' | 'title' | 'body';
-	weight?: 'regular' | 'bold';
+	weight?: 'regular' | 'medium' | 'bold';
 	as?: ElementType;
 }
 
@@ -38,7 +44,7 @@ export const Typography = forwardRef(
 		ref,
 	) => {
 		const Component = as || elementMap[type][size];
-		const classes = cn(classMap[type][size], weight === 'bold' ? 'font-semibold' : 'font-normal', className);
+		const classes = cn(classMap[type][size], weightMap[weight], className);
 
 		return (
 			<Component ref={ref} className={classes} {...props}>

packages/blandui-react/src/index.ts

@@ -1,6 +1,7 @@
 export * from './components/Badge';
 export * from './components/Button';
 export * from './components/Checkbox';
+export * from './components/Chip';
 export * from './components/SegmentedBar';
 export * from './components/Typography';
 export * from './components/TextInput';