feat: create separator ui component (#106)

packages/components/separator/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['custom/react'],
+}

packages/components/separator/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@consolelabs/separator",
+  "version": "0.0.1",
+  "sideEffects": false,
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "yarn build:fast -- --watch",
+    "lint": "eslint src/",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "clean-package": "^2.2.0",
+    "eslint-config-custom": "workspace:*",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "workspace:*"
+  },
+  "dependencies": {
+    "@consolelabs/theme": "workspace:*",
+    "@radix-ui/react-separator": "^1.0.3",
+    "clsx": "^2.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}

packages/components/separator/src/index.ts

@@ -0,0 +1 @@
+export * from './separator'

packages/components/separator/src/separator.tsx

@@ -0,0 +1,36 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import { separator as separatorClassName } from '@consolelabs/theme'
+
+const Separator = forwardRef<
+  ElementRef<typeof SeparatorPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>((props, ref) => {
+  const {
+    orientation = 'horizontal',
+    className,
+    decorative = true,
+    ...restProps
+  } = props
+
+  return (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      className={clsx(
+        separatorClassName.base,
+        {
+          [separatorClassName.horizontal]: orientation === 'horizontal',
+          [separatorClassName.vertical]: orientation === 'vertical',
+        },
+        className,
+      )}
+      {...restProps}
+    />
+  )
+})
+
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

packages/components/separator/stories/separator.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Separator } from '../src'
+
+const meta: Meta<typeof Separator> = {
+  title: 'ui/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+}
+
+export default meta
+
+export const Default: StoryObj = {
+  render() {
+    return (
+      <div>
+        <div className="space-y-1">
+          <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+          <p className="text-sm text-muted-foreground">
+            An open-source UI component library.
+          </p>
+        </div>
+        <Separator className="my-4" />
+        <div className="flex h-5 items-center space-x-4 text-sm">
+          <div>Blog</div>
+          <Separator orientation="vertical" />
+          <div>Docs</div>
+          <Separator orientation="vertical" />
+          <div>Source</div>
+        </div>
+      </div>
+    )
+  },
+}

packages/components/separator/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src", "stories", "index.ts"],
+  "exclude": ["dist", "node_modules"]
+}

packages/components/separator/tsup.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig(() => ({
+  clean: true,
+  target: 'es2019',
+  format: ['cjs', 'esm'],
+}))

packages/theme/src/components/index.ts

@@ -10,3 +10,4 @@ export * from './list'
 export * from './toggle-button'
 export * from './select'
 export * from './tabs'
+export * from './separator'

packages/theme/src/components/separator.ts

@@ -0,0 +1,11 @@
+const horizontal = 'h-[0.5px] w-full'
+const vertical = 'w-[0.5px] h-full'
+const base = 'shrink-0 bg-neutral-400 rounded-full'
+
+const separator = {
+  horizontal,
+  vertical,
+  base,
+}
+
+export { separator }

packages/ui/package.json

@@ -58,6 +58,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle-group": "^1.0.4",

packages/ui/src/separator/index.ts

@@ -0,0 +1 @@
+export * from './separator'

packages/ui/src/separator/separator.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Separator } from './separator'
+
+const meta: Meta<typeof Separator> = {
+  title: 'ui/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+}
+
+export default meta
+
+export const Default: StoryObj = {
+  render() {
+    return (
+      <div>
+        <div className="space-y-1">
+          <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+          <p className="text-sm text-muted-foreground">
+            An open-source UI component library.
+          </p>
+        </div>
+        <Separator className="my-4" />
+        <div className="flex h-5 items-center space-x-4 text-sm">
+          <div>Blog</div>
+          <Separator orientation="vertical" />
+          <div>Docs</div>
+          <Separator orientation="vertical" />
+          <div>Source</div>
+        </div>
+      </div>
+    )
+  },
+}

packages/ui/src/separator/separator.tsx

@@ -0,0 +1,35 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+
+const Separator = forwardRef<
+  ElementRef<typeof SeparatorPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>((props, ref) => {
+  const {
+    orientation = 'horizontal',
+    className,
+    decorative = true,
+    ...restProps
+  } = props
+
+  return (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      className={clsx(
+        'shrink-0 bg-neutral-400 rounded-full',
+        {
+          'h-[0.5px] w-full': orientation === 'horizontal',
+          'w-[0.5px] h-full': orientation === 'vertical',
+        },
+        className,
+      )}
+      {...restProps}
+    />
+  )
+})
+
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }