Skip to content

Commit

Permalink
more docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@huntabyte
huntabyte committed Jul 25, 2024
1 parent b5b49af commit 4d27f56
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 145 deletions.
79 changes: 40 additions & 39 deletions sites/docs/src/lib/content/api-reference/toggle-group.ts
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,54 @@
import type { ToggleGroupItemPropsWithoutHTML, ToggleGroupRootPropsWithoutHTML } from "bits-ui";
import { enums, union, withChildProps } from "$lib/content/api-reference/helpers.js";
import {
createApiSchema,
createBooleanProp,
createEnumProp,
createFunctionProp,
createStringProp,
createUnionProp,
enums,
union,
withChildProps,
} from "$lib/content/api-reference/helpers.js";
import * as C from "$lib/content/constants.js";
import type { APISchema } from "$lib/types/index.js";

const root: APISchema<ToggleGroupRootPropsWithoutHTML> = {
const root = createApiSchema<ToggleGroupRootPropsWithoutHTML>({
title: "Root",
description: "The root component which contains the toggle group items.",
props: {
value: {
type: union(C.STRING, "string[]"),
type: createEnumProp({
options: ["single", "multiple"],
description: "The type of toggle group.",
required: true,
}),
value: createUnionProp({
options: ["string", "string[]"],
description:
"The value of the toggle group. If the type is multiple, this will be an array of strings, otherwise it will be a string.",
"The value of the toggle group. If the `type` is `'multiple'`, this will be an array of strings, otherwise it will be a string.",
bindable: true,
},
onValueChange: {
type: {
type: C.FUNCTION,
definition: union("(value: string) => void", "(value: string[]) => void"),
},
}),
onValueChange: createFunctionProp({
definition: union("(value: string) => void", "(value: string[]) => void"),
description:
"A callback function called when the value of the toggle group changes. The type of the value is dependent on the type of the toggle group.",
},
disabled: {
}),
disabled: createBooleanProp({
default: C.FALSE,
type: C.BOOLEAN,
description: "Whether or not the switch is disabled.",
},
loop: {
}),
loop: createBooleanProp({
default: C.TRUE,
type: C.BOOLEAN,
description: "Whether or not the toggle group should loop when navigating.",
},
orientation: {
}),
orientation: createEnumProp({
options: [C.HORIZONTAL, C.VERTICAL],
default: C.HORIZONTAL,
type: enums(C.HORIZONTAL, C.VERTICAL),
description: "The orientation of the toggle group.",
},
rovingFocus: {
}),
rovingFocus: createBooleanProp({
default: C.TRUE,
type: C.BOOLEAN,
description: "Whether or not the toggle group should use roving focus when navigating.",
},
type: {
default: "single",
description: "The type of toggle group.",
type: enums("single", "multiple"),
},
}),
...withChildProps({ elType: "HTMLDivElement" }),
},
dataAttributes: [
Expand All @@ -58,21 +61,19 @@ const root: APISchema<ToggleGroupRootPropsWithoutHTML> = {
description: "Present on the root element.",
},
],
};
});

const item: APISchema<ToggleGroupItemPropsWithoutHTML> = {
const item = createApiSchema<ToggleGroupItemPropsWithoutHTML>({
title: "Item",
description: "An individual toggle item within the group.",
props: {
value: {
type: C.STRING,
value: createStringProp({
description: "The value of the item.",
},
disabled: {
}),
disabled: createBooleanProp({
default: C.FALSE,
type: C.BOOLEAN,
description: "Whether or not the switch is disabled.",
},
}),
...withChildProps({ elType: "HTMLButtonElement" }),
},
dataAttributes: [
Expand All @@ -99,6 +100,6 @@ const item: APISchema<ToggleGroupItemPropsWithoutHTML> = {
description: "Present on the item elements.",
},
],
};
});

export const toggleGroup = [root, item];
32 changes: 16 additions & 16 deletions sites/docs/src/lib/content/api-reference/toggle.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
import type { ToggleRootPropsWithoutHTML } from "bits-ui";
import { enums, withChildProps } from "$lib/content/api-reference/helpers.js";
import {
createApiSchema,
createBooleanProp,
createFunctionProp,
enums,
withChildProps,
} from "$lib/content/api-reference/helpers.js";
import * as C from "$lib/content/constants.js";
import type { APISchema } from "$lib/types/index.js";

const root: APISchema<ToggleRootPropsWithoutHTML> = {
const root = createApiSchema<ToggleRootPropsWithoutHTML>({
title: "Root",
description: "The toggle button.",
props: {
pressed: {
pressed: createBooleanProp({
default: C.FALSE,
type: C.BOOLEAN,
description: "Whether or not the toggle button is pressed.",
bindable: true,
},
onPressedChange: {
type: {
type: C.FUNCTION,
definition: "(checked: boolean) => void",
},
}),
onPressedChange: createFunctionProp({
definition: "(checked: boolean) => void",
description: "A callback function called when the pressed state of the toggle changes.",
},
disabled: {
}),
disabled: createBooleanProp({
default: C.FALSE,
type: C.BOOLEAN,
description: "Whether or not the switch is disabled.",
},
}),
...withChildProps({ elType: "HTMLButtonElement" }),
},
dataAttributes: [
Expand All @@ -43,6 +43,6 @@ const root: APISchema<ToggleRootPropsWithoutHTML> = {
description: "Present on the root element.",
},
],
};
});

export const toggle = [root];
97 changes: 47 additions & 50 deletions sites/docs/src/lib/content/api-reference/toolbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,32 @@ import type {
ToolbarLinkPropsWithoutHTML,
ToolbarRootPropsWithoutHTML,
} from "bits-ui";
import { enums, union, withChildProps } from "$lib/content/api-reference/helpers.js";
import {
createApiSchema,
createBooleanProp,
createEnumProp,
createFunctionProp,
createStringProp,
createUnionProp,
enums,
union,
withChildProps,
} from "$lib/content/api-reference/helpers.js";
import * as C from "$lib/content/constants.js";
import type { APISchema } from "$lib/types/index.js";

const root: APISchema<ToolbarRootPropsWithoutHTML> = {
const root = createApiSchema<ToolbarRootPropsWithoutHTML>({
title: "Root",
description: "The root component which contains the toolbar.",
props: {
loop: {
loop: createBooleanProp({
default: C.TRUE,
type: C.BOOLEAN,
description: "Whether or not the toolbar should loop when navigating.",
},
orientation: {
}),
orientation: createEnumProp({
options: [C.HORIZONTAL, C.VERTICAL],
default: C.HORIZONTAL,
type: {
type: C.ENUM,
definition: enums(C.HORIZONTAL, C.VERTICAL),
},
description: "The orientation of the toolbar.",
},
}),
...withChildProps({ elType: "HTMLDivElement" }),
},
dataAttributes: [
Expand All @@ -38,17 +43,16 @@ const root: APISchema<ToolbarRootPropsWithoutHTML> = {
description: "Present on the root element.",
},
],
};
});

const button: APISchema<ToolbarButtonPropsWithoutHTML> = {
const button = createApiSchema<ToolbarButtonPropsWithoutHTML>({
title: "Button",
description: "A button in the toolbar.",
props: {
disabled: {
disabled: createBooleanProp({
default: C.FALSE,
type: C.BOOLEAN,
description: "Whether or not the button is disabled.",
},
}),
...withChildProps({ elType: "HTMLButtonElement" }),
},
dataAttributes: [
Expand All @@ -57,9 +61,9 @@ const button: APISchema<ToolbarButtonPropsWithoutHTML> = {
description: "Present on the button element.",
},
],
};
});

const link: APISchema<ToolbarLinkPropsWithoutHTML> = {
const link = createApiSchema<ToolbarLinkPropsWithoutHTML>({
title: "Link",
description: "A link in the toolbar.",
props: withChildProps({ elType: "HTMLAnchorElement" }),
Expand All @@ -69,38 +73,32 @@ const link: APISchema<ToolbarLinkPropsWithoutHTML> = {
description: "Present on the link element.",
},
],
};
});

const group: APISchema<ToolbarGroupPropsWithoutHTML> = {
const group = createApiSchema<ToolbarGroupPropsWithoutHTML>({
title: "Group",
description: "A group of toggle items in the toolbar.",
props: {
value: {
type: {
type: C.UNION,
definition: union(C.STRING, "string[]"),
},
type: createEnumProp({
options: ["single", "multiple"],
default: "'single'",
description: "The type of toggle group.",
required: true,
}),
value: createUnionProp({
options: ["string", "string[]"],
description:
"The value of the toggle group. If the type is multiple, this will be an array of strings, otherwise it will be a string.",
bindable: true,
},
onValueChange: {
type: C.FUNCTION,
}),
onValueChange: createFunctionProp({
definition: union("(value: string) => void", "(value: string[]) => void"),
description: "A callback function called when the value changes.",
},
disabled: {
}),
disabled: createBooleanProp({
default: C.FALSE,
type: C.BOOLEAN,
description: "Whether or not the switch is disabled.",
},
type: {
default: "single",
description: "The type of toggle group.",
type: {
type: C.ENUM,
definition: enums("single", "multiple"),
},
},
}),
...withChildProps({ elType: "HTMLDivElement" }),
},
dataAttributes: [
Expand All @@ -109,22 +107,21 @@ const group: APISchema<ToolbarGroupPropsWithoutHTML> = {
description: "Present on the group element.",
},
],
};
});

const groupItem: APISchema<ToolbarGroupItemPropsWithoutHTML> = {
const groupItem = createApiSchema<ToolbarGroupItemPropsWithoutHTML>({
title: "GroupItem",
description: "A toggle item in the toolbar toggle group.",
props: {
value: {
type: C.STRING,
value: createStringProp({
description:
"The value of the toolbar toggle group item. When the toolbar toggle group item is selected, toolbar the toggle group's value will be set to this value if in single mode, or this value will be pushed to the toggle group's array value if in multiple mode.",
},
disabled: {
required: true,
}),
disabled: createBooleanProp({
default: C.FALSE,
type: C.BOOLEAN,
description: "Whether or not the item is disabled.",
},
}),
...withChildProps({ elType: "HTMLButtonElement" }),
},
dataAttributes: [
Expand All @@ -147,6 +144,6 @@ const groupItem: APISchema<ToolbarGroupItemPropsWithoutHTML> = {
description: "Present on the item element.",
},
],
};
});

export const toolbar = [root, button, link, group, groupItem];
Loading

0 comments on commit 4d27f56

Please sign in to comment.