diff --git a/README.md b/README.md index 2f066d979..a9b1beb09 100644 --- a/README.md +++ b/README.md @@ -116,4 +116,4 @@ We are always looking for new ideas or other ways to improve Tremor. If you have [Apache License 2.0](https://github.com/tremorlabs/tremor/blob/main/License) -Copyright © 2023 Tremor. All rights reserved. +Copyright © 2024 Tremor. All rights reserved. diff --git a/package.json b/package.json index 36d5c5969..6c641d6ac 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,8 @@ "homepage": "https://github.com/tremorlabs/tremor#readme", "dependencies": { "@floating-ui/react": "^0.19.2", - "@headlessui/react": "^1.7.17", - "@headlessui/tailwindcss": "^0.1.3", + "@headlessui/react": "^1.7.18", + "@headlessui/tailwindcss": "^0.2.0", "date-fns": "^2.30.0", "react-day-picker": "^8.9.1", "react-transition-group": "^4.4.5", @@ -59,7 +59,7 @@ "@storybook/react-webpack5": "^7.6.3", "@storybook/testing-library": "^0.2.2", "@storybook/theming": "^7.6.3", - "@tailwindcss/forms": "^0.5.6", + "@tailwindcss/forms": "^0.5.7", "@testing-library/react": "^13.4.0", "@types/jest": "^27.5.2", "@types/node": "^20.10.2", @@ -97,7 +97,7 @@ "storybook": "^7.6.3", "storybook-source-link": "^4.0.1", "style-loader": "^3.3.3", - "tailwindcss": "^3.3.5", + "tailwindcss": "^3.4.1", "tslib": "^2.6.2", "typescript": "^4.9.5", "webpack": "^5.89.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2b990ae17..b7f0ac521 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,11 +9,11 @@ dependencies: specifier: ^0.19.2 version: 0.19.2(react-dom@18.2.0)(react@18.2.0) '@headlessui/react': - specifier: ^1.7.17 - version: 1.7.17(react-dom@18.2.0)(react@18.2.0) + specifier: ^1.7.18 + version: 1.7.18(react-dom@18.2.0)(react@18.2.0) '@headlessui/tailwindcss': - specifier: ^0.1.3 - version: 0.1.3(tailwindcss@3.3.6) + specifier: ^0.2.0 + version: 0.2.0(tailwindcss@3.4.1) date-fns: specifier: ^2.30.0 version: 2.30.0 @@ -107,8 +107,8 @@ devDependencies: specifier: ^7.6.3 version: 7.6.3(react-dom@18.2.0)(react@18.2.0) '@tailwindcss/forms': - specifier: ^0.5.6 - version: 0.5.6(tailwindcss@3.3.6) + specifier: ^0.5.7 + version: 0.5.7(tailwindcss@3.4.1) '@testing-library/react': specifier: ^13.4.0 version: 13.4.0(react-dom@18.2.0)(react@18.2.0) @@ -221,8 +221,8 @@ devDependencies: specifier: ^3.3.3 version: 3.3.3(webpack@5.89.0) tailwindcss: - specifier: ^3.3.5 - version: 3.3.6 + specifier: ^3.4.1 + version: 3.4.1 tslib: specifier: ^2.6.2 version: 2.6.2 @@ -1982,25 +1982,26 @@ packages: /@floating-ui/utils@0.1.6: resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} - /@headlessui/react@1.7.17(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==} + /@headlessui/react@1.7.18(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==} engines: {node: '>=10'} peerDependencies: react: ^16 || ^17 || ^18 react-dom: ^16 || ^17 || ^18 dependencies: + '@tanstack/react-virtual': 3.0.1(react-dom@18.2.0)(react@18.2.0) client-only: 0.0.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: false - /@headlessui/tailwindcss@0.1.3(tailwindcss@3.3.6): - resolution: {integrity: sha512-3aMdDyYZx9A15euRehpppSyQnb2gIw2s/Uccn2ELIoLQ9oDy0+9oRygNWNjXCD5Dt+w1pxo7C+XoiYvGcqA4Kg==} + /@headlessui/tailwindcss@0.2.0(tailwindcss@3.4.1): + resolution: {integrity: sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==} engines: {node: '>=10'} peerDependencies: tailwindcss: ^3.0 dependencies: - tailwindcss: 3.3.6 + tailwindcss: 3.4.1 dev: false /@humanwhocodes/config-array@0.11.13: @@ -4490,15 +4491,30 @@ packages: resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==} dev: true - /@tailwindcss/forms@0.5.6(tailwindcss@3.3.6): - resolution: {integrity: sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==} + /@tailwindcss/forms@0.5.7(tailwindcss@3.4.1): + resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==} peerDependencies: tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1' dependencies: mini-svg-data-uri: 1.4.4 - tailwindcss: 3.3.6 + tailwindcss: 3.4.1 dev: true + /@tanstack/react-virtual@3.0.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-IFOFuRUTaiM/yibty9qQ9BfycQnYXIDHGP2+cU+0LrFFGNhVxCXSQnaY6wkX8uJVteFEBjUondX0Hmpp7TNcag==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@tanstack/virtual-core': 3.0.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@tanstack/virtual-core@3.0.0: + resolution: {integrity: sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==} + dev: false + /@testing-library/dom@8.20.0: resolution: {integrity: sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==} engines: {node: '>=12'} @@ -13064,8 +13080,8 @@ packages: resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==} dev: false - /tailwindcss@3.3.6: - resolution: {integrity: sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==} + /tailwindcss@3.4.1: + resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==} engines: {node: '>=14.0.0'} hasBin: true dependencies: diff --git a/src/assets/ArrowDownHeadIcon.tsx b/src/assets/ArrowDownHeadIcon.tsx index eecce14b5..9b613784a 100644 --- a/src/assets/ArrowDownHeadIcon.tsx +++ b/src/assets/ArrowDownHeadIcon.tsx @@ -1,15 +1,8 @@ import React from "react"; const ArrowDownHeadIcon = ({ ...props }) => ( - - + + ); diff --git a/src/assets/ArrowDownIcon.tsx b/src/assets/ArrowDownIcon.tsx index a3c558e60..8f7ff9285 100644 --- a/src/assets/ArrowDownIcon.tsx +++ b/src/assets/ArrowDownIcon.tsx @@ -1,12 +1,8 @@ import React from "react"; const ArrowDownIcon = ({ ...props }) => ( - - - + + ); diff --git a/src/assets/ArrowDownRightIcon.tsx b/src/assets/ArrowDownRightIcon.tsx index a481d9b06..e83a05b99 100644 --- a/src/assets/ArrowDownRightIcon.tsx +++ b/src/assets/ArrowDownRightIcon.tsx @@ -1,12 +1,8 @@ import React from "react"; const ArrowDownRightIcon = ({ ...props }) => ( - - - + + ); diff --git a/src/assets/ArrowLeftHeadIcon.tsx b/src/assets/ArrowLeftHeadIcon.tsx index 666292855..25bcbe879 100644 --- a/src/assets/ArrowLeftHeadIcon.tsx +++ b/src/assets/ArrowLeftHeadIcon.tsx @@ -1,15 +1,8 @@ import React from "react"; const ArrowLeftHeadIcon = ({ ...props }) => ( - - + + ); diff --git a/src/assets/ArrowRightHeadIcon.tsx b/src/assets/ArrowRightHeadIcon.tsx index 49aa3dc7a..e38c4aa7f 100644 --- a/src/assets/ArrowRightHeadIcon.tsx +++ b/src/assets/ArrowRightHeadIcon.tsx @@ -1,15 +1,8 @@ import React from "react"; const ArrowRightHeadIcon = ({ ...props }) => ( - - + + ); diff --git a/src/assets/ArrowRightIcon.tsx b/src/assets/ArrowRightIcon.tsx index ab7aba7f0..84fc809a7 100644 --- a/src/assets/ArrowRightIcon.tsx +++ b/src/assets/ArrowRightIcon.tsx @@ -1,13 +1,8 @@ -/* eslint-disable max-len */ import React from "react"; const ArrowRightIcon = ({ ...props }) => ( - - - + + ); diff --git a/src/assets/ArrowUpHeadIcon.tsx b/src/assets/ArrowUpHeadIcon.tsx index f3b6515fc..0ee742ced 100644 --- a/src/assets/ArrowUpHeadIcon.tsx +++ b/src/assets/ArrowUpHeadIcon.tsx @@ -1,15 +1,8 @@ import React from "react"; const ArrowUpHeadIcon = ({ ...props }) => ( - - + + ); diff --git a/src/assets/ArrowUpIcon.tsx b/src/assets/ArrowUpIcon.tsx index e75c2dca7..2430b1102 100644 --- a/src/assets/ArrowUpIcon.tsx +++ b/src/assets/ArrowUpIcon.tsx @@ -1,12 +1,8 @@ import React from "react"; const ArrowUpIcon = ({ ...props }) => ( - - - + + ); diff --git a/src/assets/ArrowUpRightIcon.tsx b/src/assets/ArrowUpRightIcon.tsx index 02a5a204b..885644a0d 100644 --- a/src/assets/ArrowUpRightIcon.tsx +++ b/src/assets/ArrowUpRightIcon.tsx @@ -1,12 +1,8 @@ import React from "react"; const ArrowUpRightIcon = ({ ...props }) => ( - - - + + ); diff --git a/src/assets/DoubleArrowLeftHeadIcon.tsx b/src/assets/DoubleArrowLeftHeadIcon.tsx index c2a8b32f2..e0dc65566 100644 --- a/src/assets/DoubleArrowLeftHeadIcon.tsx +++ b/src/assets/DoubleArrowLeftHeadIcon.tsx @@ -1,15 +1,8 @@ import React from "react"; const DoubleArrowLeftHeadIcon = ({ ...props }) => ( - - + + ); diff --git a/src/assets/DoubleArrowRightHeadIcon.tsx b/src/assets/DoubleArrowRightHeadIcon.tsx index 4f51300e9..791af472f 100644 --- a/src/assets/DoubleArrowRightHeadIcon.tsx +++ b/src/assets/DoubleArrowRightHeadIcon.tsx @@ -1,15 +1,8 @@ import React from "react"; const DoubleArrowRightHeadIcon = ({ ...props }) => ( - - + + ); diff --git a/src/assets/ExclamationFilledIcon.tsx b/src/assets/ExclamationFilledIcon.tsx index b14bfe07d..d5b709c5c 100644 --- a/src/assets/ExclamationFilledIcon.tsx +++ b/src/assets/ExclamationFilledIcon.tsx @@ -1,12 +1,8 @@ import React from "react"; const ExclamationFilledIcon = ({ ...props }) => ( - - + + ); diff --git a/src/assets/EyeIcon.tsx b/src/assets/EyeIcon.tsx index f394911e1..f79cd4170 100644 --- a/src/assets/EyeIcon.tsx +++ b/src/assets/EyeIcon.tsx @@ -1,13 +1,8 @@ import React from "react"; const EyeIcon = ({ ...props }) => ( - - - + + ); diff --git a/src/assets/EyeOffIcon.tsx b/src/assets/EyeOffIcon.tsx index 5d6bff73f..1937a9861 100644 --- a/src/assets/EyeOffIcon.tsx +++ b/src/assets/EyeOffIcon.tsx @@ -1,13 +1,8 @@ import React from "react"; const EyeOffIcon = ({ ...props }) => ( - - - + + ); diff --git a/src/assets/MinusIcon.tsx b/src/assets/MinusIcon.tsx index fac155ca3..77c87e02b 100644 --- a/src/assets/MinusIcon.tsx +++ b/src/assets/MinusIcon.tsx @@ -9,7 +9,7 @@ const MinusIcon = ({ ...props }) => ( stroke="currentColor" strokeWidth="2.5" > - + ); diff --git a/src/assets/PlusIcon.tsx b/src/assets/PlusIcon.tsx index d4fba958f..1a2b5d186 100644 --- a/src/assets/PlusIcon.tsx +++ b/src/assets/PlusIcon.tsx @@ -9,7 +9,7 @@ const PlusIcon = ({ ...props }) => ( stroke="currentColor" strokeWidth="2.5" > - + ); diff --git a/src/assets/SearchIcon.tsx b/src/assets/SearchIcon.tsx index f0762d3ca..e384c3a3b 100644 --- a/src/assets/SearchIcon.tsx +++ b/src/assets/SearchIcon.tsx @@ -1,12 +1,8 @@ import React from "react"; const SearchIcon = ({ ...props }) => ( - - + + ); diff --git a/src/assets/XCircleIcon.tsx b/src/assets/XCircleIcon.tsx index b06663627..b084d125f 100644 --- a/src/assets/XCircleIcon.tsx +++ b/src/assets/XCircleIcon.tsx @@ -1,13 +1,8 @@ -/* eslint-disable max-len */ import React from "react"; const XCircleIcon = ({ ...props }) => ( - - + + ); diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx index 6188c6992..15a9b038d 100644 --- a/src/components/chart-elements/AreaChart/AreaChart.tsx +++ b/src/components/chart-elements/AreaChart/AreaChart.tsx @@ -77,6 +77,7 @@ const AreaChart = React.forwardRef((props, ref) enableLegendSlider = false, customTooltip, rotateLabelX, + tickGap = 5, ...other } = props; const CustomTooltip = customTooltip; @@ -182,7 +183,7 @@ const AreaChart = React.forwardRef((props, ref) interval={startEndOnly ? "preserveStartEnd" : intervalType} tickLine={false} axisLine={false} - minTickGap={5} + minTickGap={tickGap} angle={rotateLabelX?.angle} dy={rotateLabelX?.verticalShift} height={rotateLabelX?.xAxisHeight} diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx index 3cc32b828..661ad2f13 100644 --- a/src/components/chart-elements/BarChart/BarChart.tsx +++ b/src/components/chart-elements/BarChart/BarChart.tsx @@ -88,10 +88,11 @@ const BarChart = React.forwardRef((props, ref) => allowDecimals = true, noDataText, onValueChange, + enableLegendSlider = false, customTooltip, rotateLabelX, + tickGap = 5, className, - enableLegendSlider = false, ...other } = props; const CustomTooltip = customTooltip; @@ -195,6 +196,7 @@ const BarChart = React.forwardRef((props, ref) => angle={rotateLabelX?.angle} dy={rotateLabelX?.verticalShift} height={rotateLabelX?.xAxisHeight} + minTickGap={tickGap} /> ) : ( ((props, ref) => tickLine={false} axisLine={false} tickFormatter={valueFormatter} - minTickGap={5} + minTickGap={tickGap} allowDecimals={allowDecimals} angle={rotateLabelX?.angle} dy={rotateLabelX?.verticalShift} diff --git a/src/components/chart-elements/DonutChart/DonutChartTooltip.tsx b/src/components/chart-elements/DonutChart/DonutChartTooltip.tsx index 428bbc6f5..fea2f45ed 100644 --- a/src/components/chart-elements/DonutChart/DonutChartTooltip.tsx +++ b/src/components/chart-elements/DonutChart/DonutChartTooltip.tsx @@ -1,9 +1,7 @@ -import { tremorTwMerge } from "lib"; import React from "react"; +import { tremorTwMerge, ValueFormatter } from "lib"; import { ChartTooltipFrame, ChartTooltipRow } from "components/chart-elements/common/ChartTooltip"; -import { spacing } from "lib"; -import { ValueFormatter } from "../../../lib/inputTypes"; export interface DonutChartTooltipProps { active: boolean | undefined; @@ -16,7 +14,7 @@ export const DonutChartTooltip = ({ active, payload, valueFormatter }: DonutChar const payloadRow = payload?.[0]; return ( -
+
((props, ref) enableLegendSlider = false, customTooltip, rotateLabelX, + tickGap = 5, ...other } = props; const CustomTooltip = customTooltip; @@ -178,7 +179,7 @@ const LineChart = React.forwardRef((props, ref) )} tickLine={false} axisLine={false} - minTickGap={5} + minTickGap={tickGap} angle={rotateLabelX?.angle} dy={rotateLabelX?.verticalShift} height={rotateLabelX?.xAxisHeight} diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx index 8b1569edc..61ea11195 100644 --- a/src/components/chart-elements/ScatterChart/ScatterChart.tsx +++ b/src/components/chart-elements/ScatterChart/ScatterChart.tsx @@ -79,6 +79,7 @@ export interface ScatterChartProps verticalShift: number; xAxisHeight: number; }; + tickGap?: number; } const renderShape = (props: any, activeNode: any | undefined, activeLegend: string | undefined) => { @@ -138,6 +139,7 @@ const ScatterChart = React.forwardRef((props, rotateLabelX, className, enableLegendSlider = false, + tickGap = 5, ...other } = props; const CustomTooltip = customTooltip; @@ -238,7 +240,7 @@ const ScatterChart = React.forwardRef((props, tickLine={false} tickFormatter={valueFormatter.x} axisLine={false} - minTickGap={5} + minTickGap={tickGap} domain={xAxisDomain as AxisDomain} allowDataOverflow={true} angle={rotateLabelX?.angle} diff --git a/src/components/chart-elements/ScatterChart/ScatterChartTooltip.tsx b/src/components/chart-elements/ScatterChart/ScatterChartTooltip.tsx index fd477419c..31512f8a6 100644 --- a/src/components/chart-elements/ScatterChart/ScatterChartTooltip.tsx +++ b/src/components/chart-elements/ScatterChart/ScatterChartTooltip.tsx @@ -1,20 +1,24 @@ import React from "react"; -import { Color, defaultValueFormatter, tremorTwMerge } from "../../../lib"; import { ScatterChartValueFormatter } from "components/chart-elements/ScatterChart/ScatterChart"; -import { BaseColors, border, getColorClassNames, sizing, spacing } from "lib"; -import { colorPalette } from "lib/theme"; +import { + BaseColors, + getColorClassNames, + Color, + defaultValueFormatter, + tremorTwMerge, + colorPalette, +} from "lib"; export const ChartTooltipFrame = ({ children }: { children: React.ReactNode }) => (
{children} @@ -82,20 +86,17 @@ const ScatterChartTooltip = ({

-
+
{payload.map(({ value, name }: { value: number; name: string }, idx: number) => { const valueFormatterKey = Object.keys(axis).find((key) => axis[key] === name) ?? ""; const valueFormatterFn = diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx index 63bb632fb..b139a45ef 100644 --- a/src/components/chart-elements/common/BaseChartProps.tsx +++ b/src/components/chart-elements/common/BaseChartProps.tsx @@ -40,6 +40,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes< verticalShift?: number; xAxisHeight?: number; }; + tickGap?: number; } export default BaseChartProps; diff --git a/src/components/chart-elements/common/ChartTooltip.tsx b/src/components/chart-elements/common/ChartTooltip.tsx index 5ef22b0b4..4596d70f9 100644 --- a/src/components/chart-elements/common/ChartTooltip.tsx +++ b/src/components/chart-elements/common/ChartTooltip.tsx @@ -1,20 +1,22 @@ import React from "react"; -import { tremorTwMerge } from "../../../lib"; - -import { BaseColors, border, getColorClassNames, sizing, spacing } from "lib"; -import { colorPalette } from "lib/theme"; -import { Color, ValueFormatter } from "../../../lib"; +import { + BaseColors, + getColorClassNames, + tremorTwMerge, + Color, + ValueFormatter, + colorPalette, +} from "lib"; export const ChartTooltipFrame = ({ children }: { children: React.ReactNode }) => (
{children} @@ -33,15 +35,12 @@ export const ChartTooltipRow = ({ value, name, color }: ChartTooltipRowProps) =>

-
+
{filteredPayload.map(({ value, name }: { value: number; name: string }, idx: number) => ( ((props, ref) => { ((props, re className={tremorTwMerge( makeBadgeDeltaClassName("icon"), "shrink-0", - children - ? tremorTwMerge(spacing.twoXs.negativeMarginLeft, spacing.xs.marginRight) - : iconSizes[size].height, + children ? tremorTwMerge("-ml-1 mr-1.5") : iconSizes[size].height, iconSizes[size].width, )} /> diff --git a/src/components/icon-elements/BadgeDelta/styles.ts b/src/components/icon-elements/BadgeDelta/styles.ts index 1e1e32aa1..0c340922f 100644 --- a/src/components/icon-elements/BadgeDelta/styles.ts +++ b/src/components/icon-elements/BadgeDelta/styles.ts @@ -1,4 +1,4 @@ -import { BaseColors, DeltaTypes, fontSize, getColorClassNames, Sizing, sizing, spacing } from "lib"; +import { BaseColors, DeltaTypes, getColorClassNames, colorPalette } from "lib"; import { ArrowDownIcon, @@ -7,7 +7,6 @@ import { ArrowUpIcon, ArrowUpRightIcon, } from "assets"; -import { colorPalette } from "lib/theme"; export type BadgeProportionTypes = { paddingX: string; @@ -19,29 +18,29 @@ export const badgeProportionsIconOnly: { [char: string]: BadgeProportionTypes; } = { xs: { - paddingX: spacing.sm.paddingX, - paddingY: spacing.threeXs.paddingY, - fontSize: fontSize.xs, + paddingX: "px-2", + paddingY: "py-0.5", + fontSize: "text-xs", }, sm: { - paddingX: spacing.md.paddingX, - paddingY: spacing.twoXs.paddingY, - fontSize: fontSize.sm, + paddingX: "px-2.5", + paddingY: "py-1", + fontSize: "text-sm", }, md: { - paddingX: spacing.lg.paddingX, - paddingY: spacing.xs.paddingY, - fontSize: fontSize.md, + paddingX: "px-3", + paddingY: "py-1.5", + fontSize: "text-md", }, lg: { - paddingX: spacing.xl.paddingX, - paddingY: spacing.xs.paddingY, - fontSize: fontSize.lg, + paddingX: "px-3.5", + paddingY: "py-1.5", + fontSize: "text-lg", }, xl: { - paddingX: spacing.xl.paddingX, - paddingY: spacing.xs.paddingY, - fontSize: fontSize.xl, + paddingX: "px-3.5", + paddingY: "py-1.5", + fontSize: "text-xl", }, }; @@ -49,52 +48,57 @@ export const badgeProportionsWithText: { [char: string]: BadgeProportionTypes; } = { xs: { - paddingX: spacing.sm.paddingX, - paddingY: spacing.threeXs.paddingY, - fontSize: fontSize.xs, + paddingX: "px-2", + paddingY: "py-0.5", + fontSize: "text-xs", }, sm: { - paddingX: spacing.md.paddingX, - paddingY: spacing.threeXs.paddingY, - fontSize: fontSize.sm, + paddingX: "px-2.5", + paddingY: "py-0.5", + fontSize: "text-sm", }, md: { - paddingX: spacing.lg.paddingX, - paddingY: spacing.threeXs.paddingY, - fontSize: fontSize.md, + paddingX: "px-3", + paddingY: "py-0.5", + fontSize: "text-md", }, lg: { - paddingX: spacing.xl.paddingX, - paddingY: spacing.threeXs.paddingY, - fontSize: fontSize.lg, + paddingX: "px-3.5", + paddingY: "py-0.5", + fontSize: "text-lg", }, xl: { - paddingX: spacing.twoXl.paddingX, - paddingY: spacing.twoXs.paddingY, - fontSize: fontSize.xl, + paddingX: "px-4", + paddingY: "py-1", + fontSize: "text-xl", }, }; -export const iconSizes: { [size: string]: Sizing } = { +export const iconSizes: { + [size: string]: { + height: string; + width: string; + }; +} = { xs: { - height: sizing.md.height, - width: sizing.md.width, + height: "h-4", + width: "w-4", }, sm: { - height: sizing.md.height, - width: sizing.md.width, + height: "h-4", + width: "w-4", }, md: { - height: sizing.md.height, - width: sizing.md.width, + height: "h-4", + width: "w-4", }, lg: { - height: sizing.lg.height, - width: sizing.lg.width, + height: "h-5", + width: "w-5", }, xl: { - height: sizing.xl.height, - width: sizing.xl.width, + height: "h-6", + width: "w-6", }, }; diff --git a/src/components/icon-elements/Icon/Icon.tsx b/src/components/icon-elements/Icon/Icon.tsx index 267d0171e..38ff29995 100644 --- a/src/components/icon-elements/Icon/Icon.tsx +++ b/src/components/icon-elements/Icon/Icon.tsx @@ -1,9 +1,8 @@ "use client"; -import { tremorTwMerge } from "lib"; import React from "react"; import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip"; -import { makeClassName, mergeRefs, Sizes } from "lib"; +import { makeClassName, mergeRefs, Sizes, tremorTwMerge } from "lib"; import { Color, IconVariant, Size } from "../../../lib"; import { getIconColors, iconSizes, shape, wrapperProportions } from "./styles"; diff --git a/src/components/icon-elements/Icon/styles.ts b/src/components/icon-elements/Icon/styles.ts index 1c57e32cf..43b6019f6 100644 --- a/src/components/icon-elements/Icon/styles.ts +++ b/src/components/icon-elements/Icon/styles.ts @@ -1,7 +1,4 @@ -import { border, getColorClassNames, Sizing, sizing, spacing, tremorTwMerge } from "lib"; - -import { colorPalette } from "lib/theme"; -import { Color, IconVariant } from "../../../lib/inputTypes"; +import { getColorClassNames, tremorTwMerge, colorPalette, Color, IconVariant } from "lib"; export type WrapperProportionTypes = { paddingX: string; @@ -10,47 +7,52 @@ export type WrapperProportionTypes = { export const wrapperProportions: { [size: string]: WrapperProportionTypes } = { xs: { - paddingX: spacing.xs.paddingX, - paddingY: spacing.xs.paddingY, + paddingX: "px-1.5", + paddingY: "py-1.5", }, sm: { - paddingX: spacing.xs.paddingX, - paddingY: spacing.xs.paddingY, + paddingX: "px-1.5", + paddingY: "py-1.5", }, md: { - paddingX: spacing.sm.paddingX, - paddingY: spacing.sm.paddingY, + paddingX: "px-2", + paddingY: "py-2", }, lg: { - paddingX: spacing.sm.paddingX, - paddingY: spacing.sm.paddingY, + paddingX: "px-2", + paddingY: "py-2", }, xl: { - paddingX: spacing.md.paddingX, - paddingY: spacing.md.paddingY, + paddingX: "px-2.5", + paddingY: "py-2.5", }, }; -export const iconSizes: { [size: string]: Sizing } = { +export const iconSizes: { + [size: string]: { + height: string; + width: string; + }; +} = { xs: { - height: sizing.sm.height, - width: sizing.sm.width, + height: "h-3", + width: "w-3", }, sm: { - height: sizing.lg.height, - width: sizing.lg.width, + height: "h-5", + width: "w-5", }, md: { - height: sizing.lg.height, - width: sizing.lg.width, + height: "h-5", + width: "w-5", }, lg: { - height: sizing.twoXl.height, - width: sizing.twoXl.width, + height: "h-7", + width: "w-7", }, xl: { - height: sizing.threeXl.height, - width: sizing.threeXl.width, + height: "h-9", + width: "w-9", }, }; @@ -76,19 +78,19 @@ export const shape: { [style: string]: ShapeTypes } = { }, shadow: { rounded: "rounded-tremor-default", - border: border.sm.all, + border: "border", ring: "", shadow: "shadow-tremor-card dark:shadow-dark-tremor-card", }, solid: { rounded: "rounded-tremor-default", - border: border.md.all, + border: "border-2", ring: "ring-1", shadow: "", }, outlined: { rounded: "rounded-tremor-default", - border: border.sm.all, + border: "border", ring: "ring-2", shadow: "", }, diff --git a/src/components/input-elements/BaseInput.tsx b/src/components/input-elements/BaseInput.tsx index 919fd2367..f75d13921 100644 --- a/src/components/input-elements/BaseInput.tsx +++ b/src/components/input-elements/BaseInput.tsx @@ -1,8 +1,8 @@ "use client"; +import React, { ReactNode, useCallback, useRef, useState } from "react"; import { ExclamationFilledIcon, EyeIcon, EyeOffIcon } from "assets"; import { getSelectButtonColors, hasValue } from "components/input-elements/selectUtils"; -import { border, mergeRefs, sizing, spacing, tremorTwMerge } from "lib"; -import React, { ReactNode, useCallback, useRef, useState } from "react"; +import { mergeRefs, tremorTwMerge } from "lib"; export interface BaseInputProps extends React.InputHTMLAttributes { type?: "text" | "password" | "email" | "url" | "number"; @@ -78,7 +78,7 @@ const BaseInput = React.forwardRef((props, ref className={tremorTwMerge( makeInputClassName("root"), // common - "relative w-full flex items-center min-w-[10rem] outline-none rounded-tremor-default transition duration-100", + "relative w-full flex items-center min-w-[10rem] outline-none rounded-tremor-default transition duration-100 border", // light "shadow-tremor-input", // dark @@ -93,7 +93,6 @@ const BaseInput = React.forwardRef((props, ref // light "dark:border-dark-tremor-brand-subtle dark:ring-dark-tremor-brand-muted", ), - border.sm.all, className, )} > @@ -102,14 +101,11 @@ const BaseInput = React.forwardRef((props, ref className={tremorTwMerge( makeInputClassName("icon"), // common - "shrink-0", + "shrink-0 h-5 w-5 ml-2.5", // light "text-tremor-content-subtle", // light "dark:text-dark-tremor-content-subtle", - sizing.lg.height, - sizing.lg.width, - spacing.md.marginLeft, )} /> ) : null} @@ -121,15 +117,14 @@ const BaseInput = React.forwardRef((props, ref className={tremorTwMerge( makeInputClassName("input"), // common - "w-full focus:outline-none focus:ring-0 border-none bg-transparent text-tremor-default rounded-tremor-default transition duration-100", + "w-full focus:outline-none focus:ring-0 border-none bg-transparent text-tremor-default rounded-tremor-default transition duration-100 py-2", // light "text-tremor-content-emphasis", // dark "dark:text-dark-tremor-content-emphasis", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", - Icon ? spacing.sm.paddingLeft : spacing.lg.paddingLeft, - error ? spacing.lg.paddingRight : spacing.twoXl.paddingRight, - spacing.sm.paddingY, + Icon ? "pl-2" : "pl-3", + error ? "pr-3" : "pr-4", disabled ? "placeholder:text-tremor-content-subtle dark:placeholder:text-dark-tremor-content-subtle" : "placeholder:text-tremor-content dark:placeholder:text-dark-tremor-content", @@ -181,10 +176,7 @@ const BaseInput = React.forwardRef((props, ref ) : null} diff --git a/src/components/input-elements/Button/Button.tsx b/src/components/input-elements/Button/Button.tsx index 79ef572f2..90afc4269 100644 --- a/src/components/input-elements/Button/Button.tsx +++ b/src/components/input-elements/Button/Button.tsx @@ -1,10 +1,9 @@ "use client"; import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip"; -import { tremorTwMerge } from "lib"; import React from "react"; import { Transition } from "react-transition-group"; -import { border, HorizontalPositions, makeClassName, mergeRefs, Sizes, sizing, spacing } from "lib"; +import { HorizontalPositions, makeClassName, mergeRefs, Sizes, tremorTwMerge } from "lib"; import { LoadingSpinner } from "assets"; import { ButtonVariant, Color, HorizontalPosition, Size } from "../../../lib"; @@ -34,10 +33,10 @@ export const ButtonIconOrSpinner = ({ const margin = !needMargin ? "" : iconPosition === HorizontalPositions.Left - ? tremorTwMerge(spacing.twoXs.negativeMarginLeft, spacing.xs.marginRight) - : tremorTwMerge(spacing.twoXs.negativeMarginRight, spacing.xs.marginLeft); + ? tremorTwMerge("-ml-1", "mr-1.5") + : tremorTwMerge("-mr-1", "ml-1.5"); - const defaultSpinnerSize = tremorTwMerge(sizing.none.width, sizing.none.height); + const defaultSpinnerSize = tremorTwMerge("w-0 h-0"); const spinnerSize: { [key: string]: any } = { default: defaultSpinnerSize, entering: defaultSpinnerSize, @@ -102,12 +101,11 @@ const Button = React.forwardRef((props, ref) => variant !== "light" ? tremorTwMerge( // common - "rounded-tremor-default", + "rounded-tremor-default border", // light "shadow-tremor-input", // dark "dark:shadow-dark-tremor-input", - border.sm.all, ) : ""; const buttonColorStyles = getButtonColors(variant, color); @@ -159,7 +157,10 @@ const Button = React.forwardRef((props, ref) => ) : null} {showLoadingText || children ? ( {showLoadingText ? loadingText : children} diff --git a/src/components/input-elements/Button/styles.ts b/src/components/input-elements/Button/styles.ts index 17c1bd2f4..eec702d24 100644 --- a/src/components/input-elements/Button/styles.ts +++ b/src/components/input-elements/Button/styles.ts @@ -1,28 +1,30 @@ -import { fontSize, getColorClassNames, Sizing, sizing, spacing, tremorTwMerge } from "lib"; +import { getColorClassNames, tremorTwMerge, ButtonVariant, Color, colorPalette } from "lib"; -import { colorPalette } from "lib/theme"; -import { ButtonVariant, Color } from "../../../lib/inputTypes"; - -export const iconSizes: { [size: string]: Sizing } = { +export const iconSizes: { + [size: string]: { + height: string; + width: string; + }; +} = { xs: { - height: sizing.md.height, - width: sizing.md.width, + height: "h-4", + width: "w-4", }, sm: { - height: sizing.lg.height, - width: sizing.lg.width, + height: "h-5", + width: "w-5", }, md: { - height: sizing.lg.height, - width: sizing.lg.width, + height: "h-5", + width: "w-5", }, lg: { - height: sizing.xl.height, - width: sizing.xl.width, + height: "h-6", + width: "w-6", }, xl: { - height: sizing.xl.height, - width: sizing.xl.width, + height: "h-6", + width: "w-6", }, }; @@ -30,29 +32,29 @@ export const getButtonProportions = (variant: ButtonVariant) => { if (!(variant === "light")) { return { xs: { - paddingX: spacing.md.paddingX, - paddingY: spacing.xs.paddingY, - fontSize: fontSize.xs, + paddingX: "px-2.5", + paddingY: "py-1.5", + fontSize: "text-xs", }, sm: { - paddingX: spacing.twoXl.paddingX, - paddingY: spacing.sm.paddingY, - fontSize: fontSize.sm, + paddingX: "px-4", + paddingY: "py-2", + fontSize: "text-sm", }, md: { - paddingX: spacing.twoXl.paddingX, - paddingY: spacing.sm.paddingY, - fontSize: fontSize.md, + paddingX: "px-4", + paddingY: "py-2", + fontSize: "text-md", }, lg: { - paddingX: spacing.twoXl.paddingX, - paddingY: spacing.md.paddingY, - fontSize: fontSize.lg, + paddingX: "px-4", + paddingY: "py-2.5", + fontSize: "text-lg", }, xl: { - paddingX: spacing.twoXl.paddingX, - paddingY: spacing.lg.paddingY, - fontSize: fontSize.xl, + paddingX: "px-4", + paddingY: "py-3", + fontSize: "text-xl", }, }; } @@ -60,27 +62,27 @@ export const getButtonProportions = (variant: ButtonVariant) => { xs: { paddingX: "", paddingY: "", - fontSize: fontSize.xs, + fontSize: "text-xs", }, sm: { paddingX: "", paddingY: "", - fontSize: fontSize.sm, + fontSize: "text-sm", }, md: { paddingX: "", paddingY: "", - fontSize: fontSize.md, + fontSize: "text-md", }, lg: { paddingX: "", paddingY: "", - fontSize: fontSize.lg, + fontSize: "text-lg", }, xl: { paddingX: "", paddingY: "", - fontSize: fontSize.xl, + fontSize: "text-xl", }, }; }; diff --git a/src/components/input-elements/Calendar/NavButton.tsx b/src/components/input-elements/Calendar/NavButton.tsx index 7c4f826e9..f62a6e956 100644 --- a/src/components/input-elements/Calendar/NavButton.tsx +++ b/src/components/input-elements/Calendar/NavButton.tsx @@ -17,7 +17,7 @@ export const NavButton = ({ onClick, icon, ...other }: NavButtonProps) => { )} {...other} > - + ); }; diff --git a/src/components/input-elements/DatePicker/DatePicker.tsx b/src/components/input-elements/DatePicker/DatePicker.tsx index 965f6b8df..19b4ef4bb 100644 --- a/src/components/input-elements/DatePicker/DatePicker.tsx +++ b/src/components/input-elements/DatePicker/DatePicker.tsx @@ -1,6 +1,6 @@ "use client"; -import { border, sizing, spacing, tremorTwMerge } from "lib"; import React, { useMemo } from "react"; +import { tremorTwMerge } from "lib"; import { DayPickerSingleProps } from "react-day-picker"; import { startOfMonth, startOfToday } from "date-fns"; @@ -95,30 +95,23 @@ const DatePicker = React.forwardRef((props, ref disabled={disabled} className={tremorTwMerge( // common - "w-full outline-none text-left whitespace-nowrap truncate focus:ring-2 transition duration-100 rounded-tremor-default flex flex-nowrap", + "w-full outline-none text-left whitespace-nowrap truncate focus:ring-2 transition duration-100 rounded-tremor-default flex flex-nowrap border pl-3 py-2", // light "border-tremor-border shadow-tremor-input text-tremor-content-emphasis focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted", // dark "dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:text-dark-tremor-content-emphasis dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted", - spacing.lg.paddingLeft, - isClearEnabled ? spacing.fourXl.paddingRight : spacing.twoXl.paddingRight, - spacing.sm.paddingY, - border.sm.all, + isClearEnabled ? "pr-8" : "pr-4", getSelectButtonColors(hasValue(selectedValue), disabled), )} >
- + - {/* coditionally showed XCircle */} + {/* coditionally displayed XCircle */} {hasSelection && !disabled ? ( @@ -242,39 +219,32 @@ const MultiSelect = React.forwardRef((props, r
@@ -285,12 +255,11 @@ const MultiSelect = React.forwardRef((props, r placeholder={placeholderSearch} className={tremorTwMerge( // common - "w-full focus:outline-none focus:ring-none bg-transparent text-tremor-default", + "w-full focus:outline-none focus:ring-none bg-transparent text-tremor-default py-2", // light "text-tremor-content-emphasis", // dark "dark:text-dark-tremor-content-emphasis", - spacing.sm.paddingY, )} onKeyDown={(e) => { if (e.code === "Space" && (e.target as HTMLInputElement).value !== "") { diff --git a/src/components/input-elements/MultiSelect/MultiSelectItem.tsx b/src/components/input-elements/MultiSelect/MultiSelectItem.tsx index 344f2c23b..a7348b182 100644 --- a/src/components/input-elements/MultiSelect/MultiSelectItem.tsx +++ b/src/components/input-elements/MultiSelect/MultiSelectItem.tsx @@ -1,10 +1,7 @@ "use client"; import { SelectedValueContext } from "contexts"; -import { tremorTwMerge } from "lib"; import React, { useContext } from "react"; - -import { isValueInArray, makeClassName, spacing } from "lib"; - +import { isValueInArray, makeClassName, tremorTwMerge } from "lib"; import { Listbox } from "@headlessui/react"; const makeMultiSelectItemClassName = makeClassName("MultiSelectItem"); @@ -24,14 +21,12 @@ const MultiSelectItem = React.forwardRef((p className={tremorTwMerge( makeMultiSelectItemClassName("root"), // common - "flex justify-start items-center cursor-default text-tremor-default", + "flex justify-start items-center cursor-default text-tremor-default p-2.5", // light // "ui-active:bg-tremor-background-muted ui-active:text-tremor-content-strong ui-selected:text-tremor-content-strong ui-selected:bg-tremor-background-muted text-tremor-content-emphasis", "ui-active:bg-tremor-background-muted ui-active:text-tremor-content-strong ui-selected:text-tremor-content-strong text-tremor-content-emphasis", // dark "dark:ui-active:bg-dark-tremor-background-muted dark:ui-active:text-dark-tremor-content-strong dark:ui-selected:text-dark-tremor-content-strong dark:ui-selected:bg-dark-tremor-background-muted dark:text-dark-tremor-content-emphasis", - spacing.md.paddingX, - spacing.md.paddingY, className, )} ref={ref} @@ -44,12 +39,11 @@ const MultiSelectItem = React.forwardRef((p className={tremorTwMerge( makeMultiSelectItemClassName("checkbox"), // common - "flex-none focus:ring-none focus:outline-none cursor-pointer", + "flex-none focus:ring-none focus:outline-none cursor-pointer mr-2.5", // light "accent-tremor-brand", // dark "dark:accent-dark-tremor-brand", - spacing.md.marginRight, )} checked={isSelected} readOnly={true} diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx index ca5303e63..ae8caa274 100644 --- a/src/components/input-elements/SearchSelect/SearchSelect.tsx +++ b/src/components/input-elements/SearchSelect/SearchSelect.tsx @@ -1,11 +1,9 @@ "use client"; -import { useInternalState } from "hooks"; -import { tremorTwMerge } from "lib"; import React, { isValidElement, useMemo, useState } from "react"; - +import { useInternalState } from "hooks"; import { Combobox, Transition } from "@headlessui/react"; import { ArrowDownHeadIcon, XCircleIcon } from "assets"; -import { border, makeClassName, sizing, spacing } from "lib"; +import { makeClassName, tremorTwMerge } from "lib"; import { constructValueToNameMapping, getFilteredOptions, @@ -90,21 +88,18 @@ const SearchSelect = React.forwardRef((props, {Icon && ( @@ -113,14 +108,12 @@ const SearchSelect = React.forwardRef((props, ((props, onChange={(event) => setSearchQuery(event.target.value)} displayValue={(value: string) => valueToNameMapping.get(value) ?? ""} /> -
+
@@ -154,10 +140,7 @@ const SearchSelect = React.forwardRef((props, {enableClear && selectedValue ? ( @@ -191,14 +172,11 @@ const SearchSelect = React.forwardRef((props, {filteredOptions} diff --git a/src/components/input-elements/SearchSelect/SearchSelectItem.tsx b/src/components/input-elements/SearchSelect/SearchSelectItem.tsx index db1383da7..229f52d69 100644 --- a/src/components/input-elements/SearchSelect/SearchSelectItem.tsx +++ b/src/components/input-elements/SearchSelect/SearchSelectItem.tsx @@ -1,10 +1,7 @@ "use client"; -import { tremorTwMerge } from "lib"; import React from "react"; -import { makeClassName } from "lib"; -import { sizing } from "lib/sizing"; -import { spacing } from "lib/spacing"; +import { makeClassName, tremorTwMerge } from "lib"; import { Combobox } from "@headlessui/react"; @@ -24,13 +21,11 @@ const SearchSelectItem = React.forwardRef( className={tremorTwMerge( makeSearchSelectItemClassName("root"), // common - "flex justify-start items-center cursor-default text-tremor-default", + "flex justify-start items-center cursor-default text-tremor-default p-2.5", // light "ui-active:bg-tremor-background-muted ui-active:text-tremor-content-strong ui-selected:text-tremor-content-strong ui-selected:bg-tremor-background-muted text-tremor-content-emphasis", // dark "dark:ui-active:bg-dark-tremor-background-muted dark:ui-active:text-dark-tremor-content-strong dark:ui-selected:text-dark-tremor-content-strong dark:ui-selected:bg-dark-tremor-background-muted dark:text-dark-tremor-content-emphasis", - spacing.md.paddingX, - spacing.md.paddingY, className, )} ref={ref} @@ -43,14 +38,11 @@ const SearchSelectItem = React.forwardRef( className={tremorTwMerge( makeSearchSelectItemClassName("icon"), // common - "flex-none", + "flex-none h-5 w-5 mr-3", // light "text-tremor-content-subtle", // dark "dark:text-dark-tremor-content-subtle", - sizing.lg.height, - sizing.lg.width, - spacing.lg.marginRight, )} /> )} diff --git a/src/components/input-elements/Select/Select.tsx b/src/components/input-elements/Select/Select.tsx index ed4e70776..4b3051de5 100644 --- a/src/components/input-elements/Select/Select.tsx +++ b/src/components/input-elements/Select/Select.tsx @@ -1,13 +1,12 @@ "use client"; -import { ArrowDownHeadIcon, XCircleIcon } from "assets"; -import { border, makeClassName, sizing, spacing } from "lib"; import React, { isValidElement, useMemo } from "react"; +import { ArrowDownHeadIcon, XCircleIcon } from "assets"; +import { makeClassName, tremorTwMerge } from "lib"; import { constructValueToNameMapping, getSelectButtonColors, hasValue } from "../selectUtils"; import { Listbox, Transition } from "@headlessui/react"; import { useInternalState } from "hooks"; -import { tremorTwMerge } from "lib"; const makeSelectClassName = makeClassName("Select"); @@ -74,36 +73,30 @@ const Select = React.forwardRef((props, ref) => { {Icon && ( @@ -111,23 +104,16 @@ const Select = React.forwardRef((props, ref) => { {value ? valueToNameMapping.get(value) ?? placeholder : placeholder} - + @@ -135,10 +121,7 @@ const Select = React.forwardRef((props, ref) => { {enableClear && selectedValue ? ( @@ -171,14 +152,11 @@ const Select = React.forwardRef((props, ref) => { {children} diff --git a/src/components/input-elements/Select/SelectItem.tsx b/src/components/input-elements/Select/SelectItem.tsx index b7e17c66f..a331129dd 100644 --- a/src/components/input-elements/Select/SelectItem.tsx +++ b/src/components/input-elements/Select/SelectItem.tsx @@ -1,11 +1,7 @@ "use client"; -import { tremorTwMerge } from "lib"; import React from "react"; - import { Listbox } from "@headlessui/react"; -import { makeClassName } from "lib"; -import { sizing } from "lib/sizing"; -import { spacing } from "lib/spacing"; +import { makeClassName, tremorTwMerge } from "lib"; const makeSelectItemClassName = makeClassName("SelectItem"); @@ -24,13 +20,11 @@ const SelectItem = React.forwardRef((props, ref) className={tremorTwMerge( makeSelectItemClassName("root"), // common - "flex justify-start items-center cursor-default text-tremor-default", + "flex justify-start items-center cursor-default text-tremor-default px-2.5 py-2.5", // light "ui-active:bg-tremor-background-muted ui-active:text-tremor-content-strong ui-selected:text-tremor-content-strong ui-selected:bg-tremor-background-muted text-tremor-content-emphasis", // dark "dark:ui-active:bg-dark-tremor-background-muted dark:ui-active:text-dark-tremor-content-strong dark:ui-selected:text-dark-tremor-content-strong dark:ui-selected:bg-dark-tremor-background-muted dark:text-dark-tremor-content-emphasis", - spacing.md.paddingX, - spacing.md.paddingY, className, )} ref={ref} @@ -43,13 +37,11 @@ const SelectItem = React.forwardRef((props, ref) className={tremorTwMerge( makeSelectItemClassName("icon"), // common - "flex-none", + "flex-none w-5 h-5 mr-1.5", // light "text-tremor-content-subtle", // dark "dark:text-dark-tremor-content-subtle", - sizing.lg.width, - spacing.xs.marginRight, )} /> )} diff --git a/src/components/input-elements/Tabs/Tab.tsx b/src/components/input-elements/Tabs/Tab.tsx index ee198efdb..51ba0d34d 100644 --- a/src/components/input-elements/Tabs/Tab.tsx +++ b/src/components/input-elements/Tabs/Tab.tsx @@ -1,13 +1,6 @@ "use client"; import { Tab as HeadlessTab } from "@headlessui/react"; -import { - colorPalette, - getColorClassNames, - tremorTwMerge, - makeClassName, - sizing, - spacing, -} from "lib"; +import { colorPalette, getColorClassNames, tremorTwMerge, makeClassName } from "lib"; import React, { useContext } from "react"; import { TabVariant, TabVariantContext } from "components/input-elements/Tabs/TabList"; @@ -21,7 +14,7 @@ function getVariantStyles(tabVariant: TabVariant, color?: Color) { case "line": return tremorTwMerge( // common - "ui-selected:border-b-2 hover:border-b-2 border-transparent transition duration-100", + "ui-selected:border-b-2 hover:border-b-2 border-transparent transition duration-100 -mb-px px-2 py-2", // light "hover:border-tremor-content hover:text-tremor-content-emphasis text-tremor-content", // dark @@ -30,14 +23,11 @@ function getVariantStyles(tabVariant: TabVariant, color?: Color) { color ? getColorClassNames(color, colorPalette.border).selectBorderColor : "ui-selected:border-tremor-brand dark:ui-selected:border-dark-tremor-brand", - spacing.px.negativeMarginBottom, - spacing.sm.paddingX, - spacing.sm.paddingY, ); case "solid": return tremorTwMerge( // common - "border-transparent border rounded-tremor-small", + "border-transparent border rounded-tremor-small px-2.5 py-1", // light "ui-selected:border-tremor-border ui-selected:bg-tremor-background ui-selected:shadow-tremor-input hover:text-tremor-content-emphasis ui-selected:text-tremor-brand", // dark @@ -46,8 +36,6 @@ function getVariantStyles(tabVariant: TabVariant, color?: Color) { color ? getColorClassNames(color, colorPalette.text).selectTextColor : "text-tremor-content dark:text-dark-tremor-content", - spacing.md.paddingX, - spacing.twoXs.paddingY, ); } } @@ -84,10 +72,8 @@ const Tab = React.forwardRef((props, ref) => { ) : null} diff --git a/src/components/input-elements/Tabs/TabList.tsx b/src/components/input-elements/Tabs/TabList.tsx index 168b140a1..2e2987db6 100644 --- a/src/components/input-elements/Tabs/TabList.tsx +++ b/src/components/input-elements/Tabs/TabList.tsx @@ -1,12 +1,10 @@ "use client"; -import { tremorTwMerge } from "lib"; import React, { createContext } from "react"; import { BaseColorContext } from "contexts"; import { Tab } from "@headlessui/react"; -import { border, makeClassName, spacing } from "lib"; -import { Color } from "../../../lib"; +import { makeClassName, tremorTwMerge, Color } from "lib"; const makeTabListClassName = makeClassName("TabList"); @@ -17,22 +15,19 @@ export const TabVariantContext = createContext("line"); const variantStyles: { [key in TabVariant]: string } = { line: tremorTwMerge( // common - "flex", + "flex border-b space-x-4", // light "border-tremor-border", // dark "dark:border-dark-tremor-border", - spacing.twoXl.spaceX, - border.sm.bottom, ), solid: tremorTwMerge( // common - "inline-flex p-0.5 rounded-tremor-default", + "inline-flex p-0.5 rounded-tremor-default space-x-1.5", // light "bg-tremor-background-subtle", // dark "dark:bg-dark-tremor-background-subtle", - spacing.xs.spaceX, ), }; diff --git a/src/components/input-elements/TextInput/TextInput.tsx b/src/components/input-elements/TextInput/TextInput.tsx index 6811b2f80..ce316591f 100644 --- a/src/components/input-elements/TextInput/TextInput.tsx +++ b/src/components/input-elements/TextInput/TextInput.tsx @@ -1,6 +1,6 @@ "use client"; -import { makeClassName } from "lib"; import React from "react"; +import { makeClassName } from "lib"; import BaseInput, { BaseInputProps } from "../BaseInput"; export type TextInputProps = Omit & { diff --git a/src/components/input-elements/Textarea/Textarea.tsx b/src/components/input-elements/Textarea/Textarea.tsx index f80f81fe4..499bceb2a 100644 --- a/src/components/input-elements/Textarea/Textarea.tsx +++ b/src/components/input-elements/Textarea/Textarea.tsx @@ -1,7 +1,7 @@ "use client"; import { getSelectButtonColors, hasValue } from "components/input-elements/selectUtils"; import { useInternalState } from "hooks"; -import { border, makeClassName, mergeRefs, tremorTwMerge } from "lib"; +import { makeClassName, mergeRefs, tremorTwMerge } from "lib"; import React, { useRef } from "react"; export interface TextareaProps extends React.TextareaHTMLAttributes { @@ -44,7 +44,7 @@ const Textarea = React.forwardRef((props, re className={tremorTwMerge( makeTextareaClassName("Textarea"), // common - "w-full flex items-center outline-none rounded-tremor-default px-3 py-2 text-tremor-default focus:ring-2 transition duration-100", + "w-full flex items-center outline-none rounded-tremor-default px-3 py-2 text-tremor-default focus:ring-2 transition duration-100 border", // light "shadow-tremor-input focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted", // dark @@ -53,7 +53,6 @@ const Textarea = React.forwardRef((props, re disabled ? "placeholder:text-tremor-content-subtle dark:placeholder:text-dark-tremor-content-subtle" : "placeholder:text-tremor-content dark:placeholder:text-dark-tremor-content", - border.sm.all, className, )} data-testid="text-area" diff --git a/src/components/layout-elements/Accordion/Accordion.tsx b/src/components/layout-elements/Accordion/Accordion.tsx index 6c8f0a748..3e367e3c5 100644 --- a/src/components/layout-elements/Accordion/Accordion.tsx +++ b/src/components/layout-elements/Accordion/Accordion.tsx @@ -1,7 +1,7 @@ "use client"; import { Disclosure } from "@headlessui/react"; import { RootStylesContext } from "contexts"; -import { border, makeClassName, tremorTwMerge } from "lib"; +import { makeClassName, tremorTwMerge } from "lib"; import React, { createContext, useContext } from "react"; const makeAccordionClassName = makeClassName("Accordion"); @@ -21,7 +21,7 @@ const Accordion = React.forwardRef((props, ref) const { defaultOpen = false, children, className, ...other } = props; const rootStyles = - useContext(RootStylesContext) ?? tremorTwMerge(border.sm.all, "rounded-tremor-default"); + useContext(RootStylesContext) ?? tremorTwMerge("rounded-tremor-default border"); return ( {children} @@ -47,13 +43,12 @@ const AccordionHeader = React.forwardRef< diff --git a/src/components/layout-elements/Accordion/AccordionList.tsx b/src/components/layout-elements/Accordion/AccordionList.tsx index 22242b28e..0a7bed599 100644 --- a/src/components/layout-elements/Accordion/AccordionList.tsx +++ b/src/components/layout-elements/Accordion/AccordionList.tsx @@ -1,9 +1,9 @@ "use client"; -import { tremorTwMerge } from "lib"; + import React from "react"; import { RootStylesContext } from "contexts"; -import { border, makeClassName } from "lib"; +import { makeClassName, tremorTwMerge } from "lib"; const makeAccordionListClassName = makeClassName("AccordionList"); @@ -33,15 +33,7 @@ const AccordionList = React.forwardRef((prop {React.Children.map(children, (child, idx) => { if (idx === 0) { return ( - + {React.cloneElement(child)} ); @@ -49,21 +41,14 @@ const AccordionList = React.forwardRef((prop if (idx === numChildren - 1) { return ( {React.cloneElement(child)} ); } return ( - + {React.cloneElement(child)} ); diff --git a/src/components/layout-elements/Card/Card.tsx b/src/components/layout-elements/Card/Card.tsx index ba0251010..aace6307c 100644 --- a/src/components/layout-elements/Card/Card.tsx +++ b/src/components/layout-elements/Card/Card.tsx @@ -1,10 +1,14 @@ import React from "react"; -import { tremorTwMerge } from "../../../lib"; - -import { border, getColorClassNames, makeClassName, spacing } from "lib"; +import { + getColorClassNames, + makeClassName, + tremorTwMerge, + Color, + HorizontalPosition, + VerticalPosition, +} from "lib"; import { HorizontalPositions, VerticalPositions } from "lib/constants"; import { colorPalette } from "lib/theme"; -import { Color, HorizontalPosition, VerticalPosition } from "../../../lib"; const makeCardClassName = makeClassName("Card"); @@ -12,13 +16,13 @@ const parseDecorationAlignment = (decorationAlignment: string) => { if (!decorationAlignment) return ""; switch (decorationAlignment) { case HorizontalPositions.Left: - return border.lg.left; + return "border-l-4"; case VerticalPositions.Top: - return border.lg.top; + return "border-t-4"; case HorizontalPositions.Right: - return border.lg.right; + return "border-r-4"; case VerticalPositions.Bottom: - return border.lg.bottom; + return "border-b-4"; default: return ""; } @@ -37,7 +41,7 @@ const Card = React.forwardRef((props, ref) => { className={tremorTwMerge( makeCardClassName("root"), // common - "relative w-full text-left ring-1 rounded-tremor-default", + "relative w-full text-left ring-1 rounded-tremor-default p-6", // light "bg-tremor-background ring-tremor-ring shadow-tremor-card", // dark @@ -47,7 +51,6 @@ const Card = React.forwardRef((props, ref) => { ? getColorClassNames(decorationColor, colorPalette.border).borderColor : "border-tremor-brand dark:border-dark-tremor-brand", parseDecorationAlignment(decoration), - spacing.threeXl.paddingAll, className, )} {...other} diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx new file mode 100644 index 000000000..f04e0de5c --- /dev/null +++ b/src/components/layout-elements/Dialog/Dialog.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { Dialog as HeadlessuiDialog, Transition } from "@headlessui/react"; +import { makeClassName, tremorTwMerge } from "lib"; + +const makeDisplayClassName = makeClassName("dialog"); + +type Without = { [P in Exclude]?: never }; +type XOR = T | U extends object ? (Without & U) | (Without & T) : T | U; + +export type DialogProps = React.HTMLAttributes & { + open: boolean; + onClose: (val: boolean) => void; + role?: "dialog" | "alertdialog"; +} & XOR<{ unmount?: boolean }, { static?: boolean }>; + +const Dialog = React.forwardRef((props, ref) => { + const { children, className, ...other } = props; + return ( + + + +
+
+ +
+
{children}
+
+
+
+ ); +}); + +Dialog.displayName = "Dialog"; + +export default Dialog; diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx new file mode 100644 index 000000000..6c5fcec56 --- /dev/null +++ b/src/components/layout-elements/Dialog/DialogPanel.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { Dialog as HeadlessuiDialog, Transition } from "@headlessui/react"; +import { makeClassName, tremorTwMerge } from "lib"; +import { RootStylesContext } from "contexts"; + +const makeDisplayClassName = makeClassName("dialog"); + +export type DialogPanelProps = React.HTMLAttributes; + +const DialogPanel = React.forwardRef((props, ref) => { + const { children, className, ...other } = props; + const rootStyles = + React.useContext(RootStylesContext) ?? tremorTwMerge("rounded-tremor-default p-6"); + + return ( + + + {children} + + + ); +}); + +DialogPanel.displayName = "DialogPanel"; + +export default DialogPanel; diff --git a/src/components/layout-elements/Dialog/index.ts b/src/components/layout-elements/Dialog/index.ts new file mode 100644 index 000000000..945dcab0a --- /dev/null +++ b/src/components/layout-elements/Dialog/index.ts @@ -0,0 +1,2 @@ +export { default as Dialog, type DialogProps } from "./Dialog"; +export { default as DialogPanel, type DialogPanelProps } from "./DialogPanel"; diff --git a/src/components/layout-elements/index.ts b/src/components/layout-elements/index.ts index 3dcdb29c7..c92f948a4 100644 --- a/src/components/layout-elements/index.ts +++ b/src/components/layout-elements/index.ts @@ -3,3 +3,4 @@ export * from "./Card"; export * from "./Divider"; export * from "./Flex"; export * from "./Grid"; +export * from "./Dialog"; diff --git a/src/components/list-elements/List/ListItem.tsx b/src/components/list-elements/List/ListItem.tsx index f2de16358..92a840e84 100644 --- a/src/components/list-elements/List/ListItem.tsx +++ b/src/components/list-elements/List/ListItem.tsx @@ -1,7 +1,5 @@ -import { tremorTwMerge } from "lib"; import React from "react"; - -import { makeClassName, spacing } from "lib"; +import { makeClassName, tremorTwMerge } from "lib"; const makeListItemClassName = makeClassName("ListItem"); @@ -15,8 +13,7 @@ const ListItem = React.forwardRef((props, ref) => { ref={ref} className={tremorTwMerge( makeCalloutClassName("root"), - "flex flex-col overflow-hidden rounded-tremor-default text-tremor-default", + "flex flex-col overflow-hidden rounded-tremor-default text-tremor-default border-l-4 py-3 pr-3 pl-4", color ? tremorTwMerge( getColorClassNames(color, colorPalette.background).bgColor, @@ -36,10 +33,6 @@ const Callout = React.forwardRef((props, ref) => { // dark "dark:bg-dark-tremor-brand-muted/70 dark:border-dark-tremor-brand-emphasis dark:text-dark-tremor-brand-emphasis", ), - spacing.lg.paddingY, - spacing.lg.paddingRight, - spacing.twoXl.paddingLeft, - border.lg.left, className, )} {...other} @@ -47,13 +40,7 @@ const Callout = React.forwardRef((props, ref) => {
{Icon ? ( ) : null}

{title}

@@ -62,7 +49,7 @@ const Callout = React.forwardRef((props, ref) => { className={tremorTwMerge( makeCalloutClassName("body"), "overflow-y-auto", - children ? spacing.sm.marginTop : "", + children ? "mt-2" : "", )} > {children} diff --git a/src/components/text-elements/Legend/Legend.tsx b/src/components/text-elements/Legend/Legend.tsx index 6193cade1..7f1b930e3 100644 --- a/src/components/text-elements/Legend/Legend.tsx +++ b/src/components/text-elements/Legend/Legend.tsx @@ -1,14 +1,6 @@ import React, { useEffect, useCallback } from "react"; -import { - getColorClassNames, - makeClassName, - sizing, - spacing, - themeColorRange, - Color, - tremorTwMerge, -} from "lib"; +import { getColorClassNames, makeClassName, themeColorRange, Color, tremorTwMerge } from "lib"; import { colorPalette } from "lib/theme"; import { ChevronLeftFill, ChevronRightFill } from "assets"; @@ -44,11 +36,8 @@ const LegendItem = ({ name, color, onClick, activeLegend }: LegendItemProps) => > { @@ -83,13 +83,11 @@ const Tooltip = ({ text, open, x, y, refs, strategy, getFloatingProps }: Tooltip
((props, ref) => { const widths = getWidthsFromValues(data.map((item) => item.value)); - const rowHeight = sizing.threeXl.height; + const rowHeight = "h-9"; return (
((props, ref) => { ? getColorClassNames(item.color ?? (color as Color), colorPalette.background) .bgColor : "bg-tremor-brand-subtle dark:bg-dark-tremor-brand-subtle dark:bg-opacity-30", - idx === data.length - 1 ? spacing.none.marginBottom : spacing.sm.marginBottom, + idx === data.length - 1 ? "mb-0" : "mb-2", )} style={{ width: `${widths[idx]}%`, transition: showAnimation ? "all 1s" : "", }} > -
+
{Icon ? ( ) : null} @@ -152,7 +146,7 @@ const BarList = React.forwardRef((props, ref) => { makeBarListClassName("labelWrapper"), "flex justify-end items-center", rowHeight, - idx === data.length - 1 ? spacing.none.marginBottom : spacing.sm.marginBottom, + idx === data.length - 1 ? "mb-0" : "mb-2", )} >

{ className={tremorTwMerge( makeCategoryBarClassName("labels"), // common - "relative flex w-full text-tremor-default", + "relative flex w-full text-tremor-default h-5 mb-2", // light "text-tremor-content", // dark "dark:text-dark-tremor-content", - spacing.sm.marginBottom, - sizing.lg.height, )} > {values.slice(0, values.length).map((widthPercentage, idx) => { @@ -75,10 +70,8 @@ const BarLabels = ({ values }: { values: number[] }) => {

); })} -
- 0 -
-
+
0
+
{sumValues}
@@ -122,8 +115,7 @@ const CategoryBar = React.forwardRef((props, r
((props, r ref={tooltipProps.refs.setReference} className={tremorTwMerge( makeCategoryBarClassName("markerWrapper"), - "absolute right-1/2 -translate-x-1/2", - sizing.lg.width, + "absolute right-1/2 -translate-x-1/2 w-5", )} style={{ left: `${markerValue}%`, @@ -165,14 +156,12 @@ const CategoryBar = React.forwardRef((props, r className={tremorTwMerge( makeCategoryBarClassName("marker"), // common - "ring-2 mx-auto rounded-tremor-full", + "ring-2 mx-auto rounded-tremor-full h-4 w-1", // light "ring-tremor-brand-inverted", // dark "dark:ring-dark-tremor-brand-inverted", markerBgColor, - sizing.md.height, - sizing.twoXs.width, )} />
diff --git a/src/components/vis-elements/DeltaBar/DeltaBar.tsx b/src/components/vis-elements/DeltaBar/DeltaBar.tsx index ed233c69e..54743067c 100644 --- a/src/components/vis-elements/DeltaBar/DeltaBar.tsx +++ b/src/components/vis-elements/DeltaBar/DeltaBar.tsx @@ -1,9 +1,7 @@ "use client"; -import { tremorTwMerge } from "lib"; import React from "react"; - import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip"; -import { DeltaTypes, makeClassName, mapInputsToDeltaType, sizing } from "lib"; +import { DeltaTypes, makeClassName, mapInputsToDeltaType, tremorTwMerge } from "lib"; import { colors } from "./styles"; const makeDeltaBarClassName = makeClassName("DeltaBar"); @@ -38,12 +36,11 @@ const DeltaBar = React.forwardRef((props, ref) => className={tremorTwMerge( makeDeltaBarClassName("root"), // common - "relative flex items-center w-full rounded-tremor-full", + "relative flex items-center w-full rounded-tremor-full h-2", // light "bg-tremor-background-subtle", // dark "dark:bg-dark-tremor-background-subtle", - sizing.xs.height, className, )} {...other} @@ -74,13 +71,11 @@ const DeltaBar = React.forwardRef((props, ref) => className={tremorTwMerge( makeDeltaBarClassName("separator"), // common - "ring-2 z-10 rounded-tremor-full", + "ring-2 z-10 rounded-tremor-full h-4 w-1", // light "ring-tremor-brand-inverted bg-tremor-background-emphasis", // dark "dark:ring-dark-tremor-brand-inverted dark:bg-dark-tremor-background-emphasis", - sizing.md.height, - sizing.twoXs.width, )} />
((props, ref) className={tremorTwMerge( makeMarkerBarClassName("root"), // common - "relative flex items-center w-full rounded-tremor-full", + "relative flex items-center w-full rounded-tremor-full h-2", // light "bg-tremor-background-subtle", // dark "dark:bg-dark-tremor-background-subtle", - sizing.xs.height, className, )} {...other} @@ -81,8 +79,7 @@ const MarkerBar = React.forwardRef((props, ref) ref={markerTooltipProps.refs.setReference} className={tremorTwMerge( makeMarkerBarClassName("markerWrapper"), - "absolute right-1/2 -translate-x-1/2", - sizing.lg.width, // wide transparent wrapper for tooltip activation + "absolute right-1/2 -translate-x-1/2 w-5", )} style={{ left: `${value}%`, @@ -93,14 +90,12 @@ const MarkerBar = React.forwardRef((props, ref)
diff --git a/src/components/vis-elements/ProgressBar/ProgressBar.tsx b/src/components/vis-elements/ProgressBar/ProgressBar.tsx index 125eb141e..a4875bfda 100644 --- a/src/components/vis-elements/ProgressBar/ProgressBar.tsx +++ b/src/components/vis-elements/ProgressBar/ProgressBar.tsx @@ -2,7 +2,7 @@ import React from "react"; import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip"; -import { getColorClassNames, makeClassName, sizing, spacing, tremorTwMerge } from "lib"; +import { getColorClassNames, makeClassName, tremorTwMerge } from "lib"; import { colorPalette } from "lib/theme"; import { Color } from "../../../lib/inputTypes"; @@ -36,11 +36,10 @@ const ProgressBar = React.forwardRef((props, r ref={tooltipProps.refs.setReference} className={tremorTwMerge( makeProgressBarClassName("progressBarWrapper"), - "relative flex items-center w-full rounded-tremor-full bg-opacity-20", + "relative flex items-center w-full rounded-tremor-full bg-opacity-20 h-2", color ? getColorClassNames(color, colorPalette.background).bgColor : "bg-tremor-brand-muted/50 dark:bg-dark-tremor-brand-muted", - sizing.xs.height, )} {...getReferenceProps} > @@ -64,12 +63,11 @@ const ProgressBar = React.forwardRef((props, r className={tremorTwMerge( makeProgressBarClassName("labelWrapper"), // common - "w-16 truncate text-right", + "w-16 truncate text-right ml-2", // light "text-tremor-content-emphasis", // dark "dark:text-dark-tremor-content-emphasis", - spacing.sm.marginLeft, )} >

((props, ref={mergeRefs([ref, tooltipProps.refs.setReference])} className={tremorTwMerge( makeTrackerClassName("trackingBlock"), - // "w-full h-full rounded-tremor-small", "w-full h-full rounded-[1px] first:rounded-l-[4px] last:rounded-r-[4px]", getColorClassNames(color ?? "gray", colorPalette.background).bgColor, )} @@ -49,9 +48,7 @@ const Tracker = React.forwardRef((props, ref) => { ref={ref} className={tremorTwMerge( makeTrackerClassName("root"), - // "w-full flex items-center h-10", - "h-10 flex items-center", - spacing.threeXs.spaceX, + "h-10 flex items-center space-x-0.5", className, )} {...other} diff --git a/src/lib/font.ts b/src/lib/font.ts deleted file mode 100644 index 53bb1dc01..000000000 --- a/src/lib/font.ts +++ /dev/null @@ -1,14 +0,0 @@ -export const fontSize = { - xs: "text-xs", - sm: "text-sm", - md: "text-base", - lg: "text-lg", - xl: "text-xl", - threeXl: "text-3xl", -}; - -export const fontWeight = { - sm: "font-normal", - md: "font-medium", - lg: "font-semibold", -}; diff --git a/src/lib/index.ts b/src/lib/index.ts index 5db7263d8..4bccf16dc 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,9 +1,5 @@ export * from "./constants"; -export * from "./font"; export * from "./inputTypes"; -export * from "./shape"; -export * from "./sizing"; -export * from "./spacing"; export * from "./theme"; export * from "./tremorTwMerge"; export * from "./utils"; diff --git a/src/lib/inputTypes.ts b/src/lib/inputTypes.ts index c1d458794..b306ee355 100644 --- a/src/lib/inputTypes.ts +++ b/src/lib/inputTypes.ts @@ -58,6 +58,7 @@ const colorValues = [ ] as const; export type Color = (typeof colorValues)[number]; +export type CustomColor = Color | string; export const getIsBaseColor = (color: Color | string) => colorValues.includes(color as Color); const justifyContentValues = ["start", "end", "center", "between", "around", "evenly"] as const; diff --git a/src/lib/shape.ts b/src/lib/shape.ts deleted file mode 100644 index f5e02a1b5..000000000 --- a/src/lib/shape.ts +++ /dev/null @@ -1,75 +0,0 @@ -export const borderRadius = { - none: { - left: "rounded-l-none", - top: "rounded-t-none", - right: "rounded-r-none", - bottom: "rounded-b-none", - all: "rounded-none", - }, - sm: { - left: "rounded-l", - top: "rounded-t", - right: "rounded-r", - bottom: "rounded-b", - all: "rounded", - }, - md: { - left: "rounded-l-md", - top: "rounded-t-md", - right: "rounded-r-md", - bottom: "rounded-b-md", - all: "rounded-md", - }, - lg: { - left: "rounded-l-lg", - top: "rounded-t-lg", - right: "rounded-r-lg", - bottom: "rounded-b-lg", - all: "rounded-lg", - }, - full: { - left: "rounded-l-full", - top: "rounded-t-full", - right: "rounded-r-full", - bottom: "rounded-b-full", - all: "rounded-full", - }, -}; - -export const boxShadow = { - none: "shadow-none", - sm: "shadow-sm", - md: "shadow", - lg: "shadow-lg", -}; - -export const border = { - none: { - left: "border-l-0", - top: "border-t-0", - right: "border-r-0", - bottom: "border-b-0", - all: "border-0", - }, - sm: { - left: "border-l", - top: "border-t", - right: "border-r", - bottom: "border-b", - all: "border", - }, - md: { - left: "border-l-2", - top: "border-t-2", - right: "border-r-2", - bottom: "border-b-2", - all: "border-2", - }, - lg: { - left: "border-l-4", - top: "border-t-4", - right: "border-r-4", - bottom: "border-b-4", - all: "border-4", - }, -}; diff --git a/src/lib/sizing.ts b/src/lib/sizing.ts deleted file mode 100644 index a27eb14df..000000000 --- a/src/lib/sizing.ts +++ /dev/null @@ -1,47 +0,0 @@ -export type Sizing = { - height: string; - width: string; -}; - -export const sizing = { - none: { - height: "h-0", - width: "w-0", - }, - threeXs: { - height: "h-0.5", - width: "w-0.5", - }, - twoXs: { - height: "h-1", - width: "w-1", - }, - xs: { - height: "h-2", - width: "w-2", - }, - sm: { - height: "h-3", - width: "w-3", - }, - md: { - height: "h-4", - width: "w-4", - }, - lg: { - height: "h-5", - width: "w-5", - }, - xl: { - height: "h-6", - width: "w-6", - }, - twoXl: { - height: "h-7", - width: "w-7", - }, - threeXl: { - height: "h-9", - width: "w-9", - }, -}; diff --git a/src/lib/spacing.ts b/src/lib/spacing.ts deleted file mode 100644 index 0d2806ace..000000000 --- a/src/lib/spacing.ts +++ /dev/null @@ -1,264 +0,0 @@ -export const spacing = { - none: { - paddingLeft: "pl-0", - paddingTop: "pt-0", - paddingRight: "pr-0", - paddingBottom: "pb-0", - paddingX: "px-0", - paddingY: "py-0", - paddingAll: "p-0", - marginLeft: "ml-0", - marginTop: "mt-0", - marginRight: "mr-0", - marginBottom: "mb-0", - negativeMarginLeft: "-ml-0", - negativeMarginRight: "-mr-0", - negativeMarginTop: "-mt-0", - negativeMarginBottom: "-mb-0", - left: "left-0", - right: "right-0", - top: "top-0", - bottom: "bottom-0", - spaceX: "space-x-0", - }, - px: { - paddingLeft: "pl-px", - paddingTop: "pt-px", - paddingRight: "pr-px", - paddingBottom: "pb-px", - paddingX: "px-px", - paddingY: "py-px", - paddingAll: "p-px", - marginLeft: "ml-px", - marginTop: "mt-px", - marginRight: "mr-px", - marginBottom: "mb-px", - negativeMarginLeft: "-ml-px", - negativeMarginRight: "-mr-px", - negativeMarginTop: "-mt-px", - negativeMarginBottom: "-mb-px", - left: "left-px", - right: "right-px", - top: "top-px", - bottom: "bottom-px", - spaceX: "space-x-px", - }, - threeXs: { - paddingLeft: "pl-0.5", - paddingTop: "pt-0.5", - paddingRight: "pr-0.5", - paddingBottom: "pb-0.5", - paddingX: "px-0.5", - paddingY: "py-0.5", - paddingAll: "p-0.5", - marginLeft: "ml-0.5", - marginTop: "mt-0.5", - marginRight: "mr-0.5", - marginBottom: "mb-0.5", - negativeMarginLeft: "-ml-0.5", - negativeMarginRight: "-mr-0.5", - negativeMarginTop: "-mt-0.5", - negativeMarginBottom: "-mb-0.5", - left: "left-0.5", - right: "right-0.5", - top: "top-0.5", - bottom: "bottom-0.5", - spaceX: "space-x-0.5", - }, - twoXs: { - paddingLeft: "pl-1", - paddingTop: "pt-1", - paddingRight: "pr-1", - paddingBottom: "pb-1", - paddingX: "px-1", - paddingY: "py-1", - paddingAll: "p-1", - marginLeft: "ml-1", - marginTop: "mt-1", - marginRight: "mr-1", - marginBottom: "mb-1", - negativeMarginLeft: "-ml-1", - negativeMarginRight: "-mr-1", - left: "left-1", - right: "right-1", - top: "top-1", - bottom: "bottom-1", - spaceX: "space-x-1", - }, - xs: { - paddingLeft: "pl-1.5", - paddingTop: "pt-1.5", - paddingRight: "pr-1.5", - paddingBottom: "pb-1.5", - paddingX: "px-1.5", - paddingY: "py-1.5", - paddingAll: "p-1.5", - marginLeft: "ml-1.5", - marginTop: "mt-1.5", - marginRight: "mr-1.5", - marginBottom: "mb-1.5", - negativeMarginLeft: "-ml-1.5", - negativeMarginRight: "-mr-1.5", - negativeMarginTop: "-mt-1.5", - negativeMarginBottom: "-mb-1.5", - left: "left-1.5", - right: "right-1.5", - top: "top-1.5", - bottom: "bottom-1.5", - spaceX: "space-x-1.5", - }, - sm: { - paddingLeft: "pl-2", - paddingTop: "pt-2", - paddingRight: "pr-2", - paddingBottom: "pb-2", - paddingX: "px-2", - paddingY: "py-2", - paddingAll: "p-2", - marginLeft: "ml-2", - marginTop: "mt-2", - marginRight: "mr-2", - marginBottom: "mb-2", - negativeMarginLeft: "-ml-2", - negativeMarginRight: "-mr-2", - negativeMarginTop: "-mt-2", - negativeMarginBottom: "-mb-2", - left: "left-2", - right: "right-2", - top: "left-2", - bottom: "bottom-2", - spaceX: "space-x-2", - }, - md: { - paddingLeft: "pl-2.5", - paddingTop: "pt-2.5", - paddingRight: "pr-2.5", - paddingBottom: "pb-2.5", - paddingX: "px-2.5", - paddingY: "py-2.5", - paddingAll: "p-2.5", - marginLeft: "ml-2.5", - marginTop: "mt-2.5", - marginRight: "mr-2.5", - marginBottom: "mb-2.5", - negativeMarginLeft: "-ml-2.5", - negativeMarginRight: "-mr-2.5", - negativeMarginTop: "-mt-2.5", - negativeMarginBottom: "-mb-2.5", - left: "left-2.5", - right: "right-2.5", - top: "top-2.5", - bottom: "bottom-2.5", - spaceX: "space-x-2.5", - }, - lg: { - paddingLeft: "pl-3", - paddingTop: "pt-3", - paddingRight: "pr-3", - paddingBottom: "pb-3", - paddingX: "px-3", - paddingY: "py-3", - paddingAll: "p-3", - marginLeft: "ml-3", - marginTop: "mt-3", - marginRight: "mr-3", - marginBottom: "mb-3", - negativeMarginLeft: "-ml-3", - negativeMarginRight: "-mr-3", - negativeMarginTop: "-mt-3", - negativeMarginBottom: "-mb-3", - left: "left-3", - right: "right-3", - top: "top-3", - bottom: "bottom-3", - spaceX: "space-x-3", - }, - xl: { - paddingLeft: "pl-3.5", - paddingTop: "pt-3.5", - paddingRight: "pr-3.5", - paddingBottom: "pb-3.5", - paddingX: "px-3.5", - paddingY: "py-3.5", - paddingAll: "p-3.5", - marginLeft: "ml-3.5", - marginTop: "mt-3.5", - marginRight: "mr-3.5", - marginBottom: "mb-3.5", - negativeMarginLeft: "-ml-3.5", - negativeMarginRight: "-mr-3.5", - negativeMarginTop: "-mt-3.5", - negativeMarginBottom: "-mb-3.5", - left: "left-3.5", - right: "right-3.5", - top: "top-3.5", - bottom: "bottom-3.5", - spaceX: "space-x-3.5", - }, - twoXl: { - paddingLeft: "pl-4", - paddingTop: "pt-4", - paddingRight: "pr-4", - paddingBottom: "pb-4", - paddingX: "px-4", - paddingY: "py-4", - paddingAll: "p-4", - marginLeft: "ml-4", - marginTop: "mt-4", - marginRight: "mr-4", - marginBottom: "mb-4", - negativeMarginLeft: "-ml-4", - negativeMarginRight: "-mr-4", - negativeMarginTop: "-mt-4", - negativeMarginBottom: "-mb-4", - left: "left-4", - right: "right-4", - top: "top-4", - bottom: "bottom-4", - spaceX: "space-x-4", - }, - threeXl: { - paddingLeft: "pl-6", - paddingTop: "pt-6", - paddingRight: "pr-6", - paddingBottom: "pb-6", - paddingX: "px-6", - paddingY: "py-6", - paddingAll: "p-6", - marginLeft: "ml-6", - marginTop: "mt-6", - marginRight: "mr-6", - marginBottom: "mb-6", - negativeMarginLeft: "-ml-6", - negativeMarginRight: "-mr-6", - negativeMarginTop: "-mt-6", - negativeMarginBottom: "-mb-6", - left: "left-6", - right: "right-6", - top: "top-6", - bottom: "bottom-6", - spaceX: "space-x-6", - }, - fourXl: { - paddingLeft: "pl-8", - paddingTop: "pt-8", - paddingRight: "pr-8", - paddingBottom: "pb-8", - paddingX: "px-8", - paddingY: "py-8", - paddingAll: "p-8", - marginLeft: "ml-8", - marginTop: "mt-8", - marginRight: "mr-8", - marginBottom: "mb-8", - negativeMarginLeft: "-ml-8", - negativeMarginRight: "-mr-8", - negativeMarginTop: "-mt-8", - negativeMarginBottom: "-mb-8", - left: "left-8", - right: "right-8", - top: "top-8", - bottom: "bottom-8", - spaceX: "space-x-8", - }, -}; diff --git a/src/stories/input-elements/helpers/SimpleMultiSelect.tsx b/src/stories/input-elements/helpers/SimpleMultiSelect.tsx index 85e295ccb..523468c8e 100644 --- a/src/stories/input-elements/helpers/SimpleMultiSelect.tsx +++ b/src/stories/input-elements/helpers/SimpleMultiSelect.tsx @@ -40,11 +40,7 @@ export const SimpleMultiSelectControlled = () => { return (

- + One Two Three @@ -56,11 +52,7 @@ export const SimpleMultiSelectControlled = () => { Nine Ten - + One Two Three diff --git a/src/stories/layout-elements/Dialog.stories.tsx b/src/stories/layout-elements/Dialog.stories.tsx new file mode 100644 index 000000000..ec5ab7f74 --- /dev/null +++ b/src/stories/layout-elements/Dialog.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Dialog } from "components"; +import SimpleDialog from "./helpers/SimpleDialog"; + +const meta: Meta = { + title: "UI/Layout/Dialog", + component: Dialog, + parameters: { + sourceLink: + "https://github.com/tremorlabs/tremor/tree/main/src/components/layout-elements/Dialog", + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: SimpleDialog, + parameters: {}, +}; diff --git a/src/stories/layout-elements/helpers/SimpleDialog.tsx b/src/stories/layout-elements/helpers/SimpleDialog.tsx new file mode 100644 index 000000000..e48349ac7 --- /dev/null +++ b/src/stories/layout-elements/helpers/SimpleDialog.tsx @@ -0,0 +1,26 @@ +import React, { useState } from "react"; +import { Dialog, DialogPanel, Button, Title } from "components"; + +const SimpleDialog = () => { + const [isOpen, setIsOpen] = useState(false); + return ( + <> +
+ +
+ setIsOpen(val)} static={true}> + + Account Created Successfully + Your account has been created successfully. You can now login to your account. For more + information, please contact us. +
+ +
+
+
+ + ); +}; +export default SimpleDialog; diff --git a/src/stories/text-elements/Legend.stories.tsx b/src/stories/text-elements/Legend.stories.tsx index 01720a3b8..aa87324c5 100644 --- a/src/stories/text-elements/Legend.stories.tsx +++ b/src/stories/text-elements/Legend.stories.tsx @@ -68,7 +68,7 @@ export const ManyCategories: Story = { }, }; -export const ManyCategoriesWithoutScroll: Story = { +export const ManyCategoriesWithScroll: Story = { ...LegendTemplate, args: { categories: [ @@ -81,7 +81,7 @@ export const ManyCategoriesWithoutScroll: Story = { "Category C", "Category D", ], - enableLegendSlider: false, + enableLegendSlider: true, }, }; diff --git a/src/stories/vis-elements/Tracker.stories.tsx b/src/stories/vis-elements/Tracker.stories.tsx index 6afa12dd0..fd5c8bda5 100644 --- a/src/stories/vis-elements/Tracker.stories.tsx +++ b/src/stories/vis-elements/Tracker.stories.tsx @@ -130,3 +130,18 @@ export const MaxWidthXs: Story = { ), }; + +export const CustomColors: Story = { + args: { + data: [ + { color: "#32a852", tooltip: "Tracker Info" }, + { color: "#fcba03", tooltip: "Tracker Info" }, + { color: "orange-500", tooltip: "Tracker Info" }, + { color: "purple-100", tooltip: "Tracker Info" }, + { color: "purple-300", tooltip: "Tracker Info" }, + { color: "purple-500", tooltip: "Tracker Info" }, + { color: "purple-700", tooltip: "Tracker Info" }, + { color: "purple-900", tooltip: "Tracker Info" }, + ], + }, +}; diff --git a/src/tests/layout-elements/Dialog.test.tsx b/src/tests/layout-elements/Dialog.test.tsx new file mode 100644 index 000000000..4058ed172 --- /dev/null +++ b/src/tests/layout-elements/Dialog.test.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { act, render } from "@testing-library/react"; + +import { Dialog, DialogPanel } from "components"; + +describe("Dialog", () => { + test("renders the Dialog component", async () => { + const { findByText } = render( + {}}> + Test + , + ); + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 300)); + }); + const message = await findByText("Test"); + expect(message.textContent).toBe("Test"); + }); +});