Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Beta tremor v4 #1146

Closed
wants to merge 47 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
8fcee4c
fix: bump headlessui
severinlandolt Dec 6, 2024
866d578
fix: dialog
severinlandolt Dec 6, 2024
dfc8978
test: uts for areaChart, barChart, sparkAreaChart, Legend (#1065)
Wajahat5 Dec 6, 2024
75cb04e
fix: datepicker position
severinlandolt Dec 6, 2024
7917815
fix: selects
severinlandolt Dec 6, 2024
9020480
chore: min width date picker
severinlandolt Dec 6, 2024
442f47d
update badge
severinlandolt Dec 6, 2024
318cd4b
add vite to storybook
severinlandolt Dec 7, 2024
19c068a
storybook
severinlandolt Dec 8, 2024
a17ea45
badge, card, remove other stuff
severinlandolt Dec 8, 2024
f25039c
multiselect
severinlandolt Dec 9, 2024
5061b5d
update components
severinlandolt Dec 9, 2024
a11c9ab
callout
severinlandolt Dec 9, 2024
468b091
update
severinlandolt Dec 10, 2024
4cd43fa
switch
severinlandolt Dec 11, 2024
cb2242f
tabs
severinlandolt Dec 11, 2024
c2e2034
lint
severinlandolt Dec 11, 2024
9e9c5ac
exports
severinlandolt Dec 11, 2024
2058acf
dialog
severinlandolt Dec 11, 2024
8f5be57
accordion
severinlandolt Dec 11, 2024
444f5c0
table and legend
severinlandolt Dec 11, 2024
6d80cd1
legend
severinlandolt Dec 11, 2024
eb9126b
progress circle
severinlandolt Dec 11, 2024
edd2287
progresssbar
severinlandolt Dec 11, 2024
706d202
barlist
severinlandolt Dec 11, 2024
a970232
barlist
severinlandolt Dec 11, 2024
c4cfa7e
spark charts
severinlandolt Dec 11, 2024
ca247e6
spark exports
severinlandolt Dec 11, 2024
ea883b9
spark area chart docs
severinlandolt Dec 11, 2024
7496bde
funnel chart
severinlandolt Dec 11, 2024
e7900f3
update donut chart
severinlandolt Dec 12, 2024
85e491c
bars
severinlandolt Dec 12, 2024
a7e19db
line chart
severinlandolt Dec 12, 2024
5042df5
scatter chart
severinlandolt Dec 12, 2024
17ba6d4
bar chart
severinlandolt Dec 12, 2024
e4bc2ac
update area chart
severinlandolt Dec 12, 2024
6ac0cc7
cleanup
severinlandolt Dec 12, 2024
6d74ad1
gacp update charts
severinlandolt Dec 12, 2024
97b69eb
udpate badge
severinlandolt Dec 12, 2024
745f89a
Delete style.ts
severinlandolt Dec 12, 2024
a7d8bfa
clean up imports
severinlandolt Dec 12, 2024
4142f28
BREAKING CHANGE: Tremor v4
severinlandolt Dec 12, 2024
a5a3439
feat!: Tremor v4
severinlandolt Dec 12, 2024
573835c
feat!: Tremor v4 \n\n BREAKING CHANGE
severinlandolt Dec 12, 2024
c8582ef
fix: accordion exports
severinlandolt Dec 12, 2024
2e9753b
fix: Tremor v4 react19 (#1145)
severinlandolt Dec 13, 2024
48a767d
fix: dot stroke chart
severinlandolt Dec 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
switch
severinlandolt committed Dec 11, 2024
commit 4cd43faf26ac406285fe83b30a49ca481d162469
227 changes: 109 additions & 118 deletions src/components/input-elements/Switch/Switch.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,10 @@
"use client";
import { Switch as HeadlessSwitch } from "@headlessui/react";
import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
import { useInternalState } from "hooks";
import {
Color,
colorPalette,
getColorClassNames,
makeClassName,
mergeRefs,
tremorTwMerge,
} from "lib";
import { Color, tremorTwMerge } from "lib";

import React, { useState } from "react";

const getSwitchColors = (color?: Color) => {
return {
bgColor: color
? getColorClassNames(color, colorPalette.background).bgColor
: "bg-tremor-brand dark:bg-dark-tremor-brand",
ringColor: color
? getColorClassNames(color, colorPalette.ring).ringColor
: "ring-tremor-brand-muted dark:ring-dark-tremor-brand-muted",
};
};

const makeSwitchClassName = makeClassName("Switch");
import { tv } from "tailwind-variants";

export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
checked?: boolean;
@@ -37,110 +17,121 @@ export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
disabled?: boolean;
required?: boolean;
id?: string;
tooltip?: string;
}

const Switch = React.forwardRef<HTMLDivElement, SwitchProps>((props, ref) => {
const {
checked,
defaultChecked = false,
onChange,
color,
name,
error,
errorMessage,
disabled,
required,
tooltip,
id,
...other
} = props;
const switchColorStyles = getSwitchColors(color);
const switchColors: { [color in Color]: string } = {
brand: "bg-tremor-brand-default",
slate: "bg-slate-500",
gray: "bg-gray-500",
zinc: "bg-zinc-500",
neutral: "bg-neutral-500",
stone: "bg-stone-500",
red: "bg-red-500",
orange: "bg-orange-500",
amber: "bg-amber-500",
yellow: "bg-yellow-500",
lime: "bg-lime-500",
green: "bg-green-500",
emerald: "bg-emerald-500",
teal: "bg-teal-500",
cyan: "bg-cyan-500",
sky: "bg-sky-500",
blue: "bg-blue-500",
indigo: "bg-indigo-500",
violet: "bg-violet-500",
purple: "bg-purple-500",
fuchsia: "bg-fuchsia-500",
pink: "bg-pink-500",
rose: "bg-rose-500",
};

const badgeStyles = tv({
variants: {
color: { ...switchColors },
},
defaultVariants: {
color: "brand",
},
});

const [isChecked, setIsChecked] = useInternalState(defaultChecked, checked);
const [isFocused, setIsFocused] = useState(false);
const delay = 300;
const { tooltipProps, getReferenceProps } = useTooltip(delay);
const Switch = React.forwardRef<HTMLDivElement, SwitchProps>(
(
{
checked,
defaultChecked = false,
onChange,
color = "brand",
name,
error,
errorMessage,
disabled,
required,
id,
...other
},
ref,
) => {
const [isChecked, setIsChecked] = useInternalState(defaultChecked, checked);
const [isFocused, setIsFocused] = useState(false);

return (
<div className="flex flex-row items-center justify-start">
<Tooltip text={tooltip} {...tooltipProps} />
<div
ref={mergeRefs([ref, tooltipProps.refs.setReference])}
className={tremorTwMerge(makeSwitchClassName("root"), "relative flex h-5 flex-row")}
{...other}
{...getReferenceProps}
>
<input
type="checkbox"
className={tremorTwMerge(
makeSwitchClassName("input"),
"absolute top-0 left-0 h-5 w-5 cursor-pointer opacity-0",
)}
name={name}
required={required}
checked={isChecked}
onChange={(e) => {
e.preventDefault();
}}
/>
<HeadlessSwitch
checked={isChecked}
onChange={(e) => {
setIsChecked(e);
onChange?.(e);
}}
disabled={disabled}
className={tremorTwMerge(
makeSwitchClassName("switch"),
"group rounded-tremor-full relative inline-flex h-5 w-10 shrink-0 cursor-pointer items-center justify-center",
"focus:outline-none",
disabled ? "cursor-not-allowed" : "",
)}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
id={id}
>
<span className={tremorTwMerge(makeSwitchClassName("sr-only"), "sr-only")}>
Switch {isChecked ? "on" : "off"}
</span>
<span
aria-hidden="true"
className={tremorTwMerge(
makeSwitchClassName("background"),
isChecked ? switchColorStyles.bgColor : "bg-tremor-border dark:bg-dark-tremor-border",
"rounded-tremor-full pointer-events-none absolute mx-auto h-3 w-9 transition-colors duration-100 ease-in-out",
)}
return (
<div className="flex flex-row items-center justify-start">
<div ref={ref} className={tremorTwMerge("relative flex h-5 flex-row")} {...other}>
<input
type="checkbox"
className={tremorTwMerge("absolute top-0 left-0 h-5 w-5 cursor-pointer opacity-0")}
name={name}
required={required}
checked={isChecked}
onChange={(e) => {
e.preventDefault();
}}
/>
<span
aria-hidden="true"
<HeadlessSwitch
checked={isChecked}
onChange={(e) => {
setIsChecked(e);
onChange?.(e);
}}
disabled={disabled}
className={tremorTwMerge(
makeSwitchClassName("round"),
isChecked
? tremorTwMerge(
switchColorStyles.bgColor,
"border-tremor-background dark:border-dark-tremor-background translate-x-5",
)
: "bg-tremor-border dark:bg-dark-tremor-border border-tremor-background dark:border-dark-tremor-background translate-x-0",
"rounded-tremor-full shadow-tremor-input pointer-events-none absolute left-0 inline-block h-5 w-5 transform border-2 transition duration-100 ease-in-out",
isFocused ? tremorTwMerge("ring-2", switchColorStyles.ringColor) : "",
"group rounded-tremor-full relative inline-flex h-5 w-10 shrink-0 cursor-pointer items-center justify-center focus:outline-none",
disabled ? "cursor-not-allowed" : "",
)}
/>
</HeadlessSwitch>
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
id={id}
>
<span className={tremorTwMerge("sr-only")}>Switch {isChecked ? "on" : "off"}</span>
<span
aria-hidden="true"
className={tremorTwMerge(
"rounded-tremor-full pointer-events-none absolute mx-auto h-3 w-9 transition-colors duration-100 ease-in-out",
isChecked ? badgeStyles({ color }) : "bg-tremor-border-default",
)}
/>
<span
aria-hidden="true"
className={tremorTwMerge(
isChecked
? tremorTwMerge(
badgeStyles({ color }),
"border-tremor-background-default translate-x-5",
)
: "bg-tremor-border-default border-tremor-background-default translate-x-0",
"rounded-tremor-full shadow-tremor-input pointer-events-none absolute left-0 inline-block h-5 w-5 transform border-2 transition duration-100 ease-in-out",
isFocused ? tremorTwMerge("ring-2", "ring-blue-300 dark:ring-blue-700") : "",
)}
/>
</HeadlessSwitch>
</div>
{error && errorMessage ? (
<p className={tremorTwMerge("mt-1 text-sm text-red-500")}>{errorMessage}</p>
) : null}
</div>
{error && errorMessage ? (
<p
className={tremorTwMerge(
makeSwitchClassName("errorMessage"),
"mt-1 text-sm text-red-500",
)}
>
{errorMessage}
</p>
) : null}
</div>
);
});
);
},
);

Switch.displayName = "Switch";

4 changes: 2 additions & 2 deletions src/components/list-elements/Table/Table.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { makeClassName, tremorTwMerge } from "lib";
import React from "react";

const makeTableClassName = makeClassName("Table");

@@ -14,7 +14,7 @@ const Table = React.forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLT
className={tremorTwMerge(
makeTableClassName("table"),
// common
"w-full text-tremor-default",
"text-tremor-default w-full",
// light
"text-tremor-content",
// dark
2 changes: 1 addition & 1 deletion src/stories/icon-elements/Badge.stories.tsx
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof Badge>;
const BadgeTemplateColors: Story = {
render: () => {
return (
<div>
<div className="flex flex-col gap-2">
{Object.values(BaseColors).map((color) => (
<Badge key={color} icon={ArrowUpIcon} color={color}>
{color}
33 changes: 19 additions & 14 deletions src/stories/input-elements/Switch.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,26 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Switch } from "components";
import { SimpleSwitch, SimpleIdSwitch } from "./helpers/SimpleSwitch";
import { BaseColors } from "lib";
import React from "react";
import { SimpleIdSwitch, SimpleSwitch } from "./helpers/SimpleSwitch";

const meta: Meta<typeof Switch> = {
title: "UI/Input/Switch",
component: Switch,
};

const SwitchTemplateColors: Story = {
render: () => {
return (
<div className="flex flex-col gap-2">
{Object.values(BaseColors).map((color) => (
<Switch checked key={color} color={color} />
))}
</div>
);
},
};

export default meta;
type Story = StoryObj<typeof Switch>;

@@ -32,19 +46,6 @@ export const CustomColor: Story = {
},
};

export const Tooltip: Story = {
args: {
tooltip: "Action disabled",
},
};

export const TooltipDisabled: Story = {
args: {
tooltip: "Action disabled",
disabled: true,
},
};

export const Controlled: Story = {
render: SimpleSwitch,
};
@@ -69,3 +70,7 @@ export const Id: Story = {
required: true,
},
};

export const Colors: Story = {
...SwitchTemplateColors,
};