@anker-in/headless-ui 0.0.2

package/src/stories/button.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SearchIcon } from '@storybook/icons'
+
+import { Button } from '../components/index'
+import React from 'react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  // 同时定义了页面左侧菜单
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'secondary', 'link', 'ghost'],
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'base', 'lg', 'icon'],
+    },
+  },
+  args: {
+    variant: 'primary',
+    size: 'base',
+    children: 'Button',
+    asChild: false,
+    disabled: false,
+    loading: false,
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+// args 会作为 props 传递给组件
+// Story的名会作为菜单的名称 自动首字母大写并按照大写字母拆分 UseAsButton => Use As Button
+
+export const Primary: Story = {
+  args: {
+    size: 'lg',
+    children: 'Primary',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    size: 'lg',
+    variant: 'secondary',
+    children: 'Secondary',
+  },
+}
+
+export const Link: Story = {
+  args: {
+    size: 'lg',
+    variant: 'link',
+    children: 'Link',
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    size: 'lg',
+    children: (
+      <>
+        WithIcon <SearchIcon className="ml-2" />
+      </>
+    ),
+  },
+}
+
+export const Aschild: Story = {
+  args: {
+    size: 'lg',
+    asChild: true,
+    children: <a href="http://example.com">as a a tag</a>,
+  },
+}

package/src/stories/checkbox.stories.tsx

@@ -0,0 +1,16 @@
+import { Checkbox } from '../components/index'
+import React from 'react'
+
+export default { title: 'Components/Checkbox' }
+
+export const Default = () => (
+  <div className="flex items-center space-x-2">
+    <Checkbox id="terms" />
+    <label
+      htmlFor="terms"
+      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
+      Accept terms and conditions
+    </label>
+  </div>
+)

package/src/stories/dialog.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+} from '../components/index'
+
+export default { title: 'Components/Dialog' }
+
+export const Default = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <button>Edit Profile</button>
+    </DialogTrigger>
+    <DialogContent className="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
+      </DialogHeader>
+      <div className="grid gap-4 py-4">
+        <div className="grid grid-cols-4 items-center gap-4">
+          <label htmlFor="name" className="text-right">
+            Name
+          </label>
+          <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+        </div>
+        <div className="grid grid-cols-4 items-center gap-4">
+          <label htmlFor="username" className="text-right">
+            Username
+          </label>
+          <Input id="username" defaultValue="@peduarte" className="col-span-3" />
+        </div>
+      </div>
+      <DialogFooter>
+        <Button type="submit">Save changes</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+)

package/src/stories/input.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ComponentType } from 'react'
+import { Button, Input, InputSlot } from '../components/index'
+import { SearchIcon } from '@storybook/icons'
+import React from 'react'
+
+const meta = {
+  title: 'Components/Input',
+  component: Input,
+  subcomponents: { InputSlot: InputSlot as ComponentType<unknown> }, // TODO: 检查type , 去掉as类型转换
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'base', 'lg'],
+    },
+  },
+  args: {
+    size: 'base',
+  },
+} satisfies Meta<typeof Input>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithButton: Story = {
+  render() {
+    return (
+      <Input className="rounded-3xl pr-0" placeholder="Enter your email" type="text">
+        <InputSlot side="right">
+          <Button className="h-full rounded-none" size="sm">
+            subscribe
+          </Button>
+        </InputSlot>
+      </Input>
+    )
+  },
+}
+export const WithIcon: Story = {
+  render() {
+    return (
+      <Input type="text" placeholder="search in site">
+        <InputSlot side="left">
+          <SearchIcon />
+        </InputSlot>
+      </Input>
+    )
+  },
+}

package/src/stories/popover.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Popover, PopoverContent, PopoverTrigger } from '../components/index'
+
+export default { title: 'Components/Popover' }
+
+export const Default = () => (
+  <Popover>
+    <PopoverTrigger asChild>
+      <button>Open popover</button>
+    </PopoverTrigger>
+    <PopoverContent className="w-80">
+      <div className="grid gap-4">
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
+          make a type specimen book. It has survived not only five centuries, but also the leap into electronic
+          typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
+          sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+          PageMaker including versions of Lorem Ipsum.
+        </p>
+      </div>
+    </PopoverContent>
+  </Popover>
+)

package/src/stories/radio.stories.tsx

@@ -0,0 +1,19 @@
+import { RadioGroup, RadioGroupItem } from '../components/index'
+import React from 'react'
+
+export default { title: 'Components/Radio' }
+
+export const Default = () => (
+  <div className="flex h-40 w-48 items-center justify-center">
+    <RadioGroup defaultValue="option-one">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-one" id="option-one" />
+        <label htmlFor="option-one">Option One</label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-two" id="option-two" />
+        <label htmlFor="option-two">Option Two</label>
+      </div>
+    </RadioGroup>
+  </div>
+)

package/src/stories/skeleton.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Skeleton } from '../components/index'
+import React from 'react'
+
+const meta = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Example: Story = {
+  render() {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <div className="flex w-full justify-between">
+          <Skeleton className="size-12 rounded-full" />
+          <Skeleton className="h-12 w-[70%] " />
+        </div>
+        <Skeleton className="mt-2 h-40 w-[200px]" />
+      </div>
+    )
+  },
+}

package/src/styles/global.css

@@ -0,0 +1,196 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --btn-bg-color: #00a7e1;
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: #00a7e1;
+  --btn-bg-disabled-color: #ccdfe8;
+
+  --btn-bg-secondary-color: #ffffff;
+  --btn-text-secondary-color: #333333;
+  --btn-bg-secondary-active-color: #555555;
+  --btn-bg-secondary-disabled-color: #f5f5f5;
+
+  --btn-radius: 0;
+
+  --radius: 3em;
+
+  --brand-color-1: #005d8e;
+  --brand-color-2: ##337da5;
+  --brand-color-3: ##669ebb;
+  --brand-color-4: #99bed2;
+  --brand-color-5: #ccdfe8;
+
+  --secondary-brand-color-1: #042637;
+  --secondary-brand-color-2: #b3ecfb;
+  --secondary-brand-color-3: #f8f7f6;
+
+  --success-color-1: #34c759;
+  --success-color-2: #5dd27a;
+  --success-color-3: #85dd9b;
+  --success-color-4: #aee9bd;
+  --success-color-5: #d6f4de;
+
+  --warning-color-1: #ffc24d;
+  --warning-color-2: #fdcc6e;
+  --warning-color-3: #fbd68f;
+  --warning-color-4: #f8e0af;
+  --warning-color-5: #f6ead0;
+
+  --error-color-1: #ff4d4d;
+  --error-color-2: #fd6e6e;
+  --error-color-3: #fb908f;
+  --error-color-4: #f8b1af;
+  --error-color-5: #f6d3d0;
+
+  --primary-color: #333333;
+  --secondary-color: #666666;
+  --tertiary-color: #999999;
+  --quaternary-color: #cccccc;
+  --white-color: #ffffff;
+  --white-disable-color: hsla(0, 0%, 96%, 0.5);
+
+  --container-primary-color: #ffffff;
+  --container-secondary-color: #f4f4f1;
+
+  --bg-color-1: #f4f4f1;
+  --bg-color-2: #efefec;
+
+  --line-color: #e9e9e9;
+
+  --masks-color-1: hsla(0, 0%, 0%, 0.5);
+  --masks-color-2: hsla(0, 0%, 0%, 0.85);
+}
+
+:root[data-brand-theme='anker'] {
+  --btn-bg-color: #00a7e1;
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: #02b8f4;
+  --btn-bg-disabled-color: #ccdfe8;
+
+  --btn-bg-secondary-color: #ffffff;
+  --btn-text-secondary-color: #333333;
+  --btn-bg-secondary-active-color: #555555;
+  --btn-bg-secondary-disabled-color: #f5f5f5;
+
+  --btn-radius: 9999px;
+
+  --radius: 0em;
+}
+
+:root[data-brand-theme='eufy'] {
+  --btn-bg-color: #005d8e;
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: #669ebb;
+  --btn-bg-disabled-color: #ccdfe8;
+
+  --btn-bg-secondary-color: #ffffff;
+  --btn-text-secondary-color: #333333;
+  --btn-bg-secondary-active-color: #555555;
+  --btn-bg-secondary-disabled-color: #f5f5f5;
+
+  --btn-radius: 40px;
+
+  --radius: 40px;
+
+  --brand-color-1: #005d8e;
+  --brand-color-2: ##337da5;
+  --brand-color-3: ##669ebb;
+  --brand-color-4: #99bed2;
+  --brand-color-5: #ccdfe8;
+
+  --secondary-brand-color-1: #042637;
+  --secondary-brand-color-2: #b3ecfb;
+  --secondary-brand-color-3: #f8f7f6;
+
+  --success-color-1: #34c759;
+  --success-color-2: #5dd27a;
+  --success-color-3: #85dd9b;
+  --success-color-4: #aee9bd;
+  --success-color-5: #d6f4de;
+
+  --warning-color-1: #ffc24d;
+  --warning-color-2: #fdcc6e;
+  --warning-color-3: #fbd68f;
+  --warning-color-4: #f8e0af;
+  --warning-color-5: #f6ead0;
+
+  --error-color-1: #ff4d4d;
+  --error-color-2: #fd6e6e;
+  --error-color-3: #fb908f;
+  --error-color-4: #f8b1af;
+  --error-color-5: #f6d3d0;
+
+  --primary-color: #333333;
+  --secondary-color: #666666;
+  --tertiary-color: #999999;
+  --quaternary-color: #cccccc;
+  --white-color: #ffffff;
+  --white-disable-color: hsla(0, 0%, 96%, 0.5);
+
+  --container-primary-color: #ffffff;
+  --container-secondary-color: #f4f4f1;
+
+  --bg-color-1: #f4f4f1;
+  --bg-color-2: #efefec;
+
+  --line-color: #e9e9e9;
+
+  --masks-color-1: hsla(0, 0%, 0%, 0.5);
+  --masks-color-2: hsla(0, 0%, 0%, 0.85);
+}
+
+:root[data-brand-theme='nebula'] {
+  --btn-bg-color: #e42d46;
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: #ff3d5a;
+
+  --btn-radius: 0;
+
+  --radius: 0em;
+
+  --brand-color-1: #e42d46;
+}
+
+/* TODO:   */
+:root[data-brand-theme='soundCore'] {
+  --btn-bg-color: #17bbef;
+  --btn-text-color: #ffffff;
+  --btn-bg-color-active: #48cffa;
+  --btn-bg-disabled-color: #ccdfe8;
+
+  --btn-bg-secondary-color: #ffffff;
+  --btn-text-secondary-color: #333333;
+  --btn-bg-secondary-active-color: #555555;
+  --btn-bg-secondary-disabled-color: #f5f5f5;
+
+  --btn-radius: 30px;
+
+  --radius: 0em;
+
+  --brand-color-1: #17bbef;
+}
+
+:root[data-brand-theme='ankerWork'] {
+  --btn-bg-color: #00a7e1;
+  --btn-text-color: ##fff;
+  --btn-bg-active-color: #606060;
+
+  --btn-radius: 0px;
+  --radius: 0em;
+
+  --brand-color-1: #00a7e1;
+}
+
+:root[data-brand-theme='ankerMake'] {
+  --btn-bg-color: #88f387;
+  --btn-text-color: #333333;
+  --btn-bg-active-color: #88f387;
+
+  --btn-radius: 9999px;
+  --radius: 0em;
+
+  --brand-color-1: #88f387;
+}