Skip to content

Commit

Permalink
release 0.7.0
Browse files Browse the repository at this point in the history
yoshi6jp committed Feb 12, 2024
1 parent 740ac03 commit d1af68c
Showing 23 changed files with 1,116 additions and 28 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -114,10 +114,10 @@ export default (props) => {
- [x] File input
- [x] Radio
- [x] Range
- [ ] Select
- [ ] Text input
- [ ] Textarea
- [ ] Toggle
- [x] Select
- [x] Text input
- [x] Textarea
- [x] Toggle

#### Layout

2 changes: 1 addition & 1 deletion apps/web/package.json
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@
"next": "^14.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rsc-daisyui": "^0.6.0"
"rsc-daisyui": "^0.7.0"
},
"devDependencies": {
"@next/eslint-plugin-next": "^13.5.6",
2 changes: 1 addition & 1 deletion packages/rsc-daisyui/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "rsc-daisyui",
"main": "./dist/index.js",
"version": "0.6.0",
"version": "0.7.0",
"description": "daisyUI for React Server Component",
"homepage": "https://yoshi6jp.github.io/rsc-daisyui/",
"bugs": {
20 changes: 9 additions & 11 deletions packages/rsc-daisyui/src/file-input/file-input.stories.tsx
Original file line number Diff line number Diff line change
@@ -38,18 +38,16 @@ export const FormControlAndLabels: Story = {
render: (args) => {
return (
<FormControl>
<FormControl>
<Label>
<Label.Text>Pick a file</Label.Text>
<Label.TextAlt>Alt label</Label.TextAlt>
</Label>
<Label>
<Label.Text>Pick a file</Label.Text>
<Label.TextAlt>Alt label</Label.TextAlt>
</Label>

<FileInput {...args} />
<Label>
<Label.Text>Alt label</Label.Text>
<Label.TextAlt>Alt label</Label.TextAlt>
</Label>
</FormControl>
<FileInput {...args} />
<Label>
<Label.TextAlt>Alt label</Label.TextAlt>
<Label.TextAlt>Alt label</Label.TextAlt>
</Label>
</FormControl>
);
},
15 changes: 9 additions & 6 deletions packages/rsc-daisyui/src/form-control/form-control.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { classed } from "../classed.config";
import { configWithThemeFn } from "../config";
import { configWithThemeFn, VanillaDefaultVariants } from "../config";

export const FormControl = classed(
"label",
"form-control",
configWithThemeFn({})
);
export const FormControl = classed("label", "form-control", {
...configWithThemeFn({
vanilla: {
false: "w-full max-w-xs",
},
}),
...VanillaDefaultVariants,
});
FormControl.displayName = "FormControl";
2 changes: 2 additions & 0 deletions packages/rsc-daisyui/src/index.tsx
Original file line number Diff line number Diff line change
@@ -31,12 +31,14 @@ export * from "./progress";
export * from "./radial-progress";
export * from "./radio";
export * from "./range";
export * from "./select";
export * from "./skeleton";
export * from "./stat";
export * from "./steps";
export * from "./swap";
export * from "./tab";
export * from "./table";
export * from "./textarea";
export * from "./theme";
export * from "./toast";
export * from "./tooltip";
141 changes: 141 additions & 0 deletions packages/rsc-daisyui/src/input/input.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { getVariantConfig } from "@tw-classed/react";
import { toArgTypes } from "../storybook-helpers";
import { FormControl, Label } from "..";
import { Input } from ".";

const meta: Meta<typeof Input> = {
title: "Data Input/Input",
component: Input,
argTypes: toArgTypes(getVariantConfig(Input)),
};

export default meta;

type Story = StoryObj<typeof Input>;

export const Default: Story = {
args: {
placeholder: "Type here",
bordered: false,
},
render: (args) => {
return <Input {...args} />;
},
};

export const Border: Story = {
...Default,
args: {
placeholder: "Type here",
},
};

export const Ghost: Story = {
...Default,
args: {
placeholder: "Type here",
color: "ghost",
bordered: false,
},
};

export const FormControlAndLabels: Story = {
args: {
placeholder: "Type here",
},
render: (args) => {
return (
<FormControl>
<Label>
<Label.Text>What is your name?</Label.Text>
<Label.TextAlt>Top Right label</Label.TextAlt>
</Label>
<Input {...args} />
<Label>
<Label.TextAlt>Bottom Left label</Label.TextAlt>
<Label.TextAlt>Bottom Right label</Label.TextAlt>
</Label>
</FormControl>
);
},
};
export const PrimaryColor: Story = {
...Default,
args: {
placeholder: "Type here",
color: "primary",
},
};
export const SecondaryColor: Story = {
...Default,
args: {
placeholder: "Type here",
color: "secondary",
},
};
export const AccentColor: Story = {
...Default,
args: {
placeholder: "Type here",
color: "accent",
},
};
export const InfoColor: Story = {
...Default,
args: {
placeholder: "Type here",
color: "info",
},
};
export const SuccessColor: Story = {
...Default,
args: {
placeholder: "Type here",
color: "success",
},
};
export const WarningColor: Story = {
...Default,
args: {
placeholder: "Type here",
color: "warning",
},
};
export const ErrorColor: Story = {
...Default,
args: {
placeholder: "Type here",
color: "error",
},
};

export const Sizes: Story = {
args: {
placeholder: "Type here",
},
parameters: {
controls: {
exclude: ["as", "size"],
},
},
render: (args) => {
return (
<div className="flex flex-col items-center gap-4 w-full">
<Input {...args} size="xs" />
<Input {...args} size="sm" />
<Input {...args} size="md" />
<Input {...args} size="lg" />
</div>
);
},
};

export const Disabled: Story = {
...Default,
args: {
placeholder: "You can't touch this",
disabled: true,
},
};
4 changes: 4 additions & 0 deletions packages/rsc-daisyui/src/input/input.tsx
Original file line number Diff line number Diff line change
@@ -22,8 +22,12 @@ export const Input = classed("input", "input", {
sm: "input-sm",
xs: "input-xs",
},
vanilla: {
false: "w-full max-w-xs",
},
}),
defaultVariants: {
vanilla: false,
bordered: true,
},
});
6 changes: 4 additions & 2 deletions packages/rsc-daisyui/src/mask/mask.tsx
Original file line number Diff line number Diff line change
@@ -22,8 +22,10 @@ export const Mask = classed("img", "mask", {
"triangle-2": "mask-triangle-2",
"triangle-3": "mask-triangle-3",
"triangle-4": "mask-triangle-4",
"half-1": "mask-half-1",
"half-2": "mask-half-2",
},
half: {
first: "mask-half-1",
second: "mask-half-2",
},
},
});
5 changes: 3 additions & 2 deletions packages/rsc-daisyui/src/range/range-measure.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { type ComponentProps, deriveClassed } from "@tw-classed/react";
import { classed } from "../classed.config";
import { times } from "../utils";

export const RangeMeasureBase = classed(
"div",
@@ -12,10 +13,10 @@ export const RangeMeasure = deriveClassed<
typeof RangeMeasureBase,
RangeMeasureProps
>(({ count, ...rest }, ref) => {
const length = Math.min(Math.max(2, Math.ceil(count)), 101);
const length = Math.min(Math.max(2, Math.floor(count)), 101);
return (
<RangeMeasureBase {...rest} ref={ref}>
{Array.from({ length }).map((_, idx) => (
{times(length).map((idx) => (
<span key={idx}>|</span>
))}
</RangeMeasureBase>
1 change: 1 addition & 0 deletions packages/rsc-daisyui/src/rating/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as Rating } from "./rating";
89 changes: 89 additions & 0 deletions packages/rsc-daisyui/src/rating/rating-item.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { Fragment } from "react";
import { type ComponentProps, deriveClassed } from "@tw-classed/react";
import { classed } from "../classed.config";
import { Mask } from "../mask";
import { times } from "../utils";

export const RatingItem = classed("input", Mask, {
defaultProps: {
type: "radio",
},
defaultVariants: {
shape: "star",
},
});
RatingItem.displayName = "RatingItem";

export const RatingHidden = classed("input", "rating-hidden", {
defaultProps: {
type: "radio",
},
});
RatingHidden.displayName = "RatingHidden";

export type RatingItemsProps = Omit<
ComponentProps<typeof RatingItem>,
"half"
> & {
hidden?: boolean;
half?: boolean;
max?: number;
value?: number;
defaultValue?: number;
name: string;
};

export const RatingItems = deriveClassed<typeof RatingItem, RatingItemsProps>(
({
shape,
hidden,
half,
max,
onChange,
name,
value,
defaultValue,
className,
}) => {
const count = Math.max(1, Math.min(10, Math.floor(max || 5)));
return (
<>
{hidden ? (
<RatingHidden name={name} onChange={onChange} value={0} />
) : null}
{times(count).map((idx) => {
const val = idx + 1;
const halfVal = val - 0.5;
return (
<Fragment key={idx}>
{half ? (
<RatingItem
checked={value === halfVal ? true : undefined}
className={className}
defaultChecked={defaultValue === halfVal ? true : undefined}
half="first"
name={name}
onChange={onChange}
shape={shape}
value={halfVal}
/>
) : null}

<RatingItem
checked={value === val ? true : undefined}
className={className}
defaultChecked={defaultValue === val ? true : undefined}
half={half ? "second" : undefined}
name={name}
onChange={onChange}
shape={shape}
value={val}
/>
</Fragment>
);
})}
</>
);
}
);
RatingItems.displayName = "RatingItems";
Loading

0 comments on commit d1af68c

Please sign in to comment.