-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
23 changed files
with
1,116 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as Rating } from "./rating"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"; |
Oops, something went wrong.