chore: update tasty playground (#1073)

Author: tenphi

.changeset/nine-plants-shop.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Update tasty to 0.8.1

package.json

@@ -73,7 +73,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/tasty": "0.8.0",
+    "@tenphi/tasty": "0.9.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",

pnpm-lock.yaml

@@ -57,7 +57,8 @@ const ContentElement = tasty({
       },
       placeSelf: 'stretch',
       scrollbar: {
-        '': 'thin',
+        '': 'auto',
+        'scrollbar=thin': 'thin',
         'scrollbar=tiny | scrollbar=none': 'none',
       },
 

src/components/content/Layout/LayoutContent.tsx

@@ -135,7 +135,7 @@ function PlaygroundComponent() {
           <PlaygroundPreview component={component} styles={styles} />
         ) : undefined
       }
-      output={<PlaygroundOutput styles={styles} />}
+      output={<PlaygroundOutput styles={styles} resetKey={exampleIndex} />}
     />
   );
 }

src/stories/playground/Playground.stories.tsx

@@ -1,14 +1,14 @@
 import { renderStyles, tasty } from '@tenphi/tasty';
 import copy from 'clipboard-copy';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { Button } from '../../components/actions/Button';
 import { Layout } from '../../components/content/Layout';
 import { PrismCode } from '../../components/content/PrismCode/PrismCode';
 import { useToast } from '../../components/overlays/Toast';
 import { CopyIcon } from '../../icons';
 
-import type { StyleResult, Styles } from '@tenphi/tasty';
+import type { KeyframesSteps, StyleResult, Styles } from '@tenphi/tasty';
 
 const OutputContent = tasty({
   styles: {
@@ -23,6 +23,31 @@ const OutputContent = tasty({
 
 export interface PlaygroundOutputProps {
   styles: Styles;
+  resetKey?: number | string;
+}
+
+function formatKeyframes(keyframes: Record<string, KeyframesSteps>): string {
+  const blocks: string[] = [];
+
+  for (const [name, steps] of Object.entries(keyframes)) {
+    const stepLines: string[] = [];
+
+    for (const [step, value] of Object.entries(steps)) {
+      if (typeof value === 'string') {
+        stepLines.push(`  ${step} {\n    ${value};\n  }`);
+      } else {
+        const decls = Object.entries(value)
+          .map(([prop, val]) => `${prop}: ${val}`)
+          .join(';\n    ');
+
+        stepLines.push(`  ${step} {\n    ${decls};\n  }`);
+      }
+    }
+
+    blocks.push(`@keyframes ${name} {\n${stepLines.join('\n')}\n}`);
+  }
+
+  return blocks.join('\n\n');
 }
 
 function formatStyleResults(results: StyleResult[]): string {
@@ -76,18 +101,34 @@ function formatStyleResults(results: StyleResult[]): string {
   return lines.join('\n\n');
 }
 
-export function PlaygroundOutput({ styles }: PlaygroundOutputProps) {
+export function PlaygroundOutput({ styles, resetKey }: PlaygroundOutputProps) {
   const toast = useToast();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo(0, 0);
+  }, [resetKey]);
 
   const cssOutput = useMemo(() => {
     if (!styles || Object.keys(styles).length === 0) {
       return '/* Enter styles in the editor to see generated CSS */';
     }
 
     try {
-      // Use a demo selector for display purposes
+      const parts: string[] = [];
+
+      const keyframesDef = styles['@keyframes'] as
+        | Record<string, KeyframesSteps>
+        | undefined;
+
+      if (keyframesDef && typeof keyframesDef === 'object') {
+        parts.push(formatKeyframes(keyframesDef));
+      }
+
       const results = renderStyles(styles, '.demo');
-      return formatStyleResults(results as StyleResult[]);
+      parts.push(formatStyleResults(results as StyleResult[]));
+
+      return parts.filter(Boolean).join('\n\n');
     } catch (e) {
       return `/* Error generating CSS: ${(e as Error).message} */`;
     }
@@ -111,7 +152,7 @@ export function PlaygroundOutput({ styles }: PlaygroundOutputProps) {
         />
       </Layout.Toolbar>
       <Layout.Content padding={0}>
-        <OutputContent>
+        <OutputContent ref={scrollRef}>
           <PrismCode code={cssOutput} language="css" />
         </OutputContent>
       </Layout.Content>

src/stories/playground/PlaygroundOutput.tsx

@@ -4,7 +4,9 @@ import { Layout } from '../../components/content/Layout';
 
 import { Button } from './components/Button';
 import { Card } from './components/Card';
+import { ListCard } from './components/ListCard';
 import { ScrollProgress } from './components/ScrollProgress';
+import { StructuredCard } from './components/StructuredCard';
 
 import type { Styles } from '@tenphi/tasty';
 
@@ -54,7 +56,12 @@ const ButtonColumn = tasty({
 });
 
 export interface PlaygroundPreviewProps {
-  component: 'card' | 'button' | 'scroll-progress';
+  component:
+    | 'card'
+    | 'button'
+    | 'scroll-progress'
+    | 'structured-card'
+    | 'list-card';
   styles: Styles;
 }
 
@@ -97,6 +104,10 @@ export function PlaygroundPreview({
       <Layout.Content padding={0}>
         <PreviewContent>
           {component === 'card' && <Card styles={styles} />}
+          {component === 'structured-card' && (
+            <StructuredCard styles={styles} />
+          )}
+          {component === 'list-card' && <ListCard styles={styles} />}
           {component === 'scroll-progress' && (
             <ScrollProgress styles={styles} />
           )}

src/stories/playground/PlaygroundPreview.tsx

@@ -22,7 +22,21 @@ export function Card({ styles, children }: CardProps) {
         <>
           <div style={{ fontWeight: 600, marginBottom: '8px' }}>Card Title</div>
           <div style={{ opacity: 0.7 }}>
-            This is a simple card component for demonstrating tasty styles.
+            <p style={{ margin: '0 0 8px' }}>
+              This is a simple card component for demonstrating tasty styles.
+            </p>
+            <p style={{ margin: '0 0 8px' }}>
+              Cards are one of the most common UI patterns. They group related
+              content and actions, providing a clear visual boundary.
+            </p>
+            <p style={{ margin: '0 0 8px' }}>
+              Try adjusting padding, radius, fill, border, and shadow properties
+              in the editor to see how the card changes.
+            </p>
+            <p style={{ margin: 0 }}>
+              You can also experiment with overflow-related features like
+              scrollbar styling and fade edges using this content.
+            </p>
           </div>
         </>
       )}

src/stories/playground/components/Card.tsx

@@ -0,0 +1,36 @@
+import { tasty } from '@tenphi/tasty';
+
+import type { Styles } from '@tenphi/tasty';
+
+const ListCardElement = tasty({
+  qa: 'PlaygroundListCard',
+  styles: {
+    display: 'block',
+  },
+});
+
+export interface ListCardProps {
+  styles?: Styles;
+}
+
+export function ListCard({ styles }: ListCardProps) {
+  return (
+    <ListCardElement styles={styles}>
+      <div data-element="Title">Tasks</div>
+      <div data-element="Item">
+        <div data-element="Icon">&#9679;</div>
+        <span>Review pull request</span>
+      </div>
+      <div data-element="Item">
+        <span>Write documentation</span>
+      </div>
+      <div data-element="Item">
+        <div data-element="Icon">&#9679;</div>
+        <span>Deploy to staging</span>
+      </div>
+      <div data-element="Item">
+        <span>Send weekly update</span>
+      </div>
+    </ListCardElement>
+  );
+}

src/stories/playground/components/ListCard.tsx

@@ -0,0 +1,33 @@
+import { tasty } from '@tenphi/tasty';
+
+import type { Styles } from '@tenphi/tasty';
+
+const StructuredCardElement = tasty({
+  qa: 'PlaygroundStructuredCard',
+  styles: {
+    display: 'block',
+  },
+});
+
+export interface StructuredCardProps {
+  styles?: Styles;
+}
+
+export function StructuredCard({ styles }: StructuredCardProps) {
+  return (
+    <StructuredCardElement styles={styles}>
+      <div data-element="Header">
+        <div data-element="Title">Card Title</div>
+        <div data-element="Subtitle">Updated 2 hours ago</div>
+      </div>
+      <div data-element="Body">
+        This card demonstrates sub-element styling. Each section is targeted via
+        capitalized keys in the styles object and matched by data-element
+        attributes in the DOM.
+      </div>
+      <div data-element="Footer">
+        <span>Footer action area</span>
+      </div>
+    </StructuredCardElement>
+  );
+}