From 131ed14bd57c10dcab59276e7027a352821b4b94 Mon Sep 17 00:00:00 2001 From: Edouard Wautier <4435185+Duncid@users.noreply.github.com> Date: Fri, 15 Nov 2024 10:54:27 +0100 Subject: [PATCH] Polishing Rainbow (#8660) --- sparkle/package-lock.json | 4 +-- sparkle/package.json | 2 +- ...RainbowEffectDiv.tsx => RainbowEffect.tsx} | 19 ++++++------ sparkle/src/components/index.ts | 2 +- sparkle/src/stories/AnimatedText.stories.tsx | 2 +- .../stories/ConfettiBackground.stories.tsx | 2 +- sparkle/src/stories/RainbowEffect.stories.tsx | 29 ++++++++++++++++++ .../src/stories/RainbowEffectDiv.stories.tsx | 30 ------------------- sparkle/tailwind.config.js | 4 +-- 9 files changed, 47 insertions(+), 47 deletions(-) rename sparkle/src/components/{RainbowEffectDiv.tsx => RainbowEffect.tsx} (60%) create mode 100644 sparkle/src/stories/RainbowEffect.stories.tsx delete mode 100644 sparkle/src/stories/RainbowEffectDiv.stories.tsx diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json index 6fd7c684cfa1..fbafa26eec27 100644 --- a/sparkle/package-lock.json +++ b/sparkle/package-lock.json @@ -1,12 +1,12 @@ { "name": "@dust-tt/sparkle", - "version": "0.2.311", + "version": "0.2.312", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@dust-tt/sparkle", - "version": "0.2.311", + "version": "0.2.312", "license": "ISC", "dependencies": { "@emoji-mart/data": "^1.1.2", diff --git a/sparkle/package.json b/sparkle/package.json index b30f7667918b..fc871cab91b6 100644 --- a/sparkle/package.json +++ b/sparkle/package.json @@ -1,6 +1,6 @@ { "name": "@dust-tt/sparkle", - "version": "0.2.311", + "version": "0.2.312", "scripts": { "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs", "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css", diff --git a/sparkle/src/components/RainbowEffectDiv.tsx b/sparkle/src/components/RainbowEffect.tsx similarity index 60% rename from sparkle/src/components/RainbowEffectDiv.tsx rename to sparkle/src/components/RainbowEffect.tsx index 639a3bf1200e..49881c860b84 100644 --- a/sparkle/src/components/RainbowEffectDiv.tsx +++ b/sparkle/src/components/RainbowEffect.tsx @@ -2,21 +2,20 @@ import * as React from "react"; import { cn } from "@sparkle/lib/utils"; -interface RainbowEffectDivProps { +interface RainbowEffectProps { disabled?: boolean; className?: string; - outerClassName?: string; + containerClassName?: string; children: React.ReactNode; - backgroundColor?: string; - borderColor?: string; } -export function RainbowEffectDiv({ +export function RainbowEffect({ children, disabled, className, + containerClassName, ...props -}: RainbowEffectDivProps) { +}: RainbowEffectProps) { if (disabled) { return (
@@ -26,12 +25,14 @@ export function RainbowEffectDiv({ } const rainbowClassBlur = - "s-absolute s-bottom-[20%] s-left-1/2 s-z-0 s-h-1/5 s-w-4/5 s--translate-x-1/2 s-animate-rainbow s-bg-rainbow-gradient s-bg-[length:200%] [filter:blur(calc(1.5*1rem))]"; + "s-absolute s-bottom-[14%] s-left-1/2 s-z-0 s-h-1/5 s-w-4/5 s--translate-x-1/2 s-animate-rainbow s-bg-rainbow-gradient s-bg-[length:200%] [filter:blur(calc(1.5*1rem))]"; return ( -
+
-
{children}
+
+ {children} +
); } diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts index dc213cd0d5b2..3d73b351fcd7 100644 --- a/sparkle/src/components/index.ts +++ b/sparkle/src/components/index.ts @@ -86,7 +86,7 @@ export { export { Popup } from "./Popup"; export { PriceTable } from "./PriceTable"; export { RadioGroup, RadioGroupChoice, RadioGroupItem } from "./RadioGroup"; -export { RainbowEffectDiv } from "./RainbowEffectDiv"; +export { RainbowEffect } from "./RainbowEffect"; export { ScrollArea, ScrollBar } from "./ScrollArea"; export type { SearchbarProps } from "./Searchbar"; export { Searchbar } from "./Searchbar"; diff --git a/sparkle/src/stories/AnimatedText.stories.tsx b/sparkle/src/stories/AnimatedText.stories.tsx index dedf7f8ec1c8..ce78750f86cb 100644 --- a/sparkle/src/stories/AnimatedText.stories.tsx +++ b/sparkle/src/stories/AnimatedText.stories.tsx @@ -4,7 +4,7 @@ import React from "react"; import { AnimatedText } from "../index_with_tw_base"; const meta = { - title: "Primitives/AnimatedText", + title: "Effects/AnimatedText", component: AnimatedText, } satisfies Meta; diff --git a/sparkle/src/stories/ConfettiBackground.stories.tsx b/sparkle/src/stories/ConfettiBackground.stories.tsx index 26a6843fc0f5..c4c5dd57b90d 100644 --- a/sparkle/src/stories/ConfettiBackground.stories.tsx +++ b/sparkle/src/stories/ConfettiBackground.stories.tsx @@ -4,7 +4,7 @@ import React, { useRef } from "react"; import { ConfettiBackground } from "@sparkle/index"; const meta = { - title: "Components/ConfettiBackground", + title: "Effects/ConfettiBackground", component: ConfettiBackground, } satisfies Meta; diff --git a/sparkle/src/stories/RainbowEffect.stories.tsx b/sparkle/src/stories/RainbowEffect.stories.tsx new file mode 100644 index 000000000000..68fc0b29abe3 --- /dev/null +++ b/sparkle/src/stories/RainbowEffect.stories.tsx @@ -0,0 +1,29 @@ +import { Meta } from "@storybook/react"; +import React from "react"; + +import { cn, RainbowEffect } from "../index_with_tw_base"; + +const meta = { + title: "Effects/RainbowEffect", + component: RainbowEffect, +} satisfies Meta; + +export default meta; + +const Example = () => ( +
+ +
+ Hello +
+ +
+); + +export const Demo = () => ; diff --git a/sparkle/src/stories/RainbowEffectDiv.stories.tsx b/sparkle/src/stories/RainbowEffectDiv.stories.tsx deleted file mode 100644 index 1058d553fdee..000000000000 --- a/sparkle/src/stories/RainbowEffectDiv.stories.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Meta } from "@storybook/react"; -import React from "react"; - -import { RainbowEffectDiv } from "../index_with_tw_base"; - -const meta = { - title: "Primitives/RainbowEffect", - component: RainbowEffectDiv, -} satisfies Meta; - -export default meta; - -const DivExample = () => ( - -
-
Text in a div too
-
-
but
-
many
-
children
-
-
- -); - -export const RainbowEffectExamples = () => ( -
- -
-); diff --git a/sparkle/tailwind.config.js b/sparkle/tailwind.config.js index abbe6b3a6f23..35f89e2e984b 100644 --- a/sparkle/tailwind.config.js +++ b/sparkle/tailwind.config.js @@ -69,7 +69,7 @@ module.exports = { ...theme("spacing"), }), backgroundImage: { - "rainbow-gradient": `linear-gradient(90deg, ${colors.red[500]}, ${colors.pink[500]}, ${colors.amber[500]}, ${colors.emerald[500]}, ${colors.sky[500]}, ${colors.blue[500]}, ${colors.purple[500]})`, + "rainbow-gradient": `linear-gradient(90deg, ${colors.sky[300]}, ${colors.purple[700]}, ${colors.blue[500]}, ${colors.indigo[300]}, ${colors.sky[600]}, ${colors.blue[500]}, ${colors.purple[300]})`, }, keyframes: { pulse: { @@ -192,7 +192,7 @@ module.exports = { "breathing-scale": "breathing-scale 3s infinite ease-in-out", "cursor-blink": "cursor-blink 0.9s infinite;", "move-square": "move-square 3s ease-out infinite", - rainbow: "rainbow var(--speed, 8s) infinite linear", + rainbow: "rainbow var(--speed, 6s) infinite linear", }, colors: { brand: {