@titan-design/react-ui 0.1.0 → 0.2.5

package/src/theme/elevation.stories.tsx

@@ -0,0 +1,346 @@
+/**
+ * Elevation System Stories
+ * 
+ * Demonstrates the elevation hierarchy system with:
+ * - All elevation levels (-2 to +5)
+ * - Light and dark mode base colors
+ * - Custom base colors from theme (orange, steel, etc.)
+ * - Stacked layers with inset elements
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import {
+  getElevationConfig,
+  getElevationSurface,
+  getElevationShadow,
+  getBaseSurfaceColor,
+  type ElevationLevel,
+} from './elevation'
+import { useTheme } from '../utils/useTheme'
+import { Card, CardContent, CardInset } from '../components/ui/card/Card'
+
+const meta: Meta = {
+  title: 'Theme/Elevation System',
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Helper component to display an elevation level
+function ElevationBox({
+  level,
+  baseColor,
+  theme,
+  label,
+}: {
+  level: ElevationLevel
+  baseColor: string
+  theme: 'light' | 'dark'
+  label?: string
+}) {
+  const config = getElevationConfig(level)
+  const surfaceColor = getElevationSurface(baseColor, level, theme)
+  const shadowStyle = getElevationShadow(baseColor, level, theme)
+  
+  return (
+    <View className="items-center gap-2">
+      <View
+        className="w-24 h-24 rounded-lg items-center justify-center"
+        style={[
+          { backgroundColor: surfaceColor },
+          shadowStyle,
+        ]}
+      >
+        <Text className="text-xs font-semibold text-text-primary">
+          {level}
+        </Text>
+      </View>
+      <View className="items-center">
+        <Text className="text-xs font-medium text-text-primary">
+          {label || config.name}
+        </Text>
+        <Text className="text-[10px] text-text-secondary mt-0.5">
+          {surfaceColor}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+// Helper to show all elevations for a base color
+function ElevationShowcase({
+  baseColor,
+  baseColorName,
+  theme,
+}: {
+  baseColor: string
+  baseColorName: string
+  theme: 'light' | 'dark'
+}) {
+  const levels: ElevationLevel[] = [-2, -1, 0, 1, 2, 3, 4, 5]
+  
+  return (
+    <View className="mb-8">
+      <View className="mb-4">
+        <Text className="text-lg font-semibold text-text-primary mb-1">
+          {baseColorName}
+        </Text>
+        <Text className="text-sm text-text-secondary">
+          Base: {baseColor} ({theme} mode)
+        </Text>
+      </View>
+      <View className="flex-row flex-wrap gap-6 justify-center">
+        {levels.map((level) => (
+          <ElevationBox
+            key={level}
+            level={level}
+            baseColor={baseColor}
+            theme={theme}
+          />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+export const ElevationLevels: Story = {
+  render: function Render() {
+    const theme = useTheme()
+    const baseColor = getBaseSurfaceColor(theme)
+    const modeName = theme === 'light' ? 'Light' : 'Dark'
+
+    return (
+      <View className="p-6 min-h-screen bg-background-base">
+        <View className="max-w-6xl mx-auto">
+          <Text className="text-2xl font-bold text-text-primary mb-2">
+            {modeName} Mode Base Color
+          </Text>
+          <Text className="text-sm text-text-secondary mb-6">
+            Base color: {baseColor} ({theme} mode) — toggle the Storybook theme to see the other mode.
+          </Text>
+          <ElevationShowcase
+            baseColor={baseColor}
+            baseColorName={`${modeName} Mode Base`}
+            theme={theme}
+          />
+        </View>
+      </View>
+    )
+  },
+}
+
+export const CustomColors: Story = {
+  render: function Render() {
+    const theme = useTheme()
+    const customColors = [
+      { name: 'Orange', color: '#FF7900' },
+      { name: 'Steel', color: '#406D87' },
+      { name: 'Teal', color: '#14B8A6' },
+      { name: 'Neutral Gray', color: '#6B7280' },
+    ]
+    
+    return (
+      <View className="p-6 min-h-screen bg-background-base">
+        <View className="max-w-6xl mx-auto">
+          <Text className="text-2xl font-bold text-text-primary mb-2">
+            Custom Base Colors
+          </Text>
+          <Text className="text-sm text-text-secondary mb-6">
+            Elevation system works with any base color. These examples show how
+            different colors create elevation hierarchies.
+          </Text>
+          {customColors.map(({ name, color }) => (
+            <ElevationShowcase
+              key={name}
+              baseColor={color}
+              baseColorName={name}
+              theme={theme}
+            />
+          ))}
+        </View>
+      </View>
+    )
+  },
+}
+
+export const StackedLayers: Story = {
+  render: function Render() {
+    const theme = useTheme()
+
+    return (
+      <View className="p-6 min-h-screen bg-background-base">
+
+        <View className="max-w-4xl mx-auto gap-6">
+          <Text className="text-2xl font-bold text-text-primary mb-2">
+            Stacked Layers - All Elevations
+          </Text>
+          <Text className="text-sm text-text-secondary mb-6">
+            Cards at all 5 positive elevations (1-5) stacked to show the full hierarchy.
+          </Text>
+          
+          {/* Stack all 5 elevations */}
+          {([1, 2, 3, 4, 5] as const).map((elevation) => {
+            const config = getElevationConfig(elevation)
+            return (
+              <Card key={elevation} elevation={elevation} className="p-6">
+                <CardContent className="p-0">
+                  <Text className="text-lg font-semibold text-text-primary mb-2">
+                    Elevation {elevation} - {config.name}
+                  </Text>
+                  <Text className="text-sm text-text-secondary mb-4">
+                    {config.description}
+                  </Text>
+                  {elevation >= 2 && (
+                    <CardInset elevation={-1} className="p-4">
+                      <Text className="text-sm text-text-secondary">
+                        Inset element at elevation -1 (shallow inset)
+                      </Text>
+                    </CardInset>
+                  )}
+                </CardContent>
+              </Card>
+            )
+          })}
+          
+          {/* Example with nested insets */}
+          <Card elevation={3} className="p-6">
+            <CardContent className="p-0">
+              <Text className="text-lg font-semibold text-text-primary mb-4">
+                Nested Inset Elements
+              </Text>
+              <CardInset elevation={-1} className="p-4 mb-4">
+                <Text className="text-sm text-text-secondary mb-2">
+                  Outer inset at -1
+                </Text>
+                <CardInset elevation={-2} className="p-3">
+                  <Text className="text-xs text-text-secondary">
+                    Inner inset at -2
+                  </Text>
+                </CardInset>
+              </CardInset>
+            </CardContent>
+          </Card>
+        </View>
+      </View>
+    )
+  },
+}
+
+export const ElevationComparison: Story = {
+  render: function Render() {
+    const theme = useTheme()
+    const baseColor = getBaseSurfaceColor(theme)
+
+    return (
+      <View className="p-6 min-h-screen bg-background-base">
+
+        <View className="max-w-6xl mx-auto">
+          <Text className="text-2xl font-bold text-text-primary mb-2">
+            Elevation Comparison
+          </Text>
+          <Text className="text-sm text-text-secondary mb-6">
+            Side-by-side comparison of all elevation levels showing the visual hierarchy.
+          </Text>
+          
+          <View className="flex-row flex-wrap gap-8 justify-center">
+            {([-2, -1, 0, 1, 2, 3, 4, 5] as ElevationLevel[]).map((level) => {
+              const config = getElevationConfig(level)
+              const surfaceColor = getElevationSurface(baseColor, level, theme)
+              const shadowStyle = getElevationShadow(baseColor, level, theme)
+              
+              return (
+                <View key={level} className="items-center gap-3">
+                  <View
+                    className="w-32 h-32 rounded-xl items-center justify-center p-4"
+                    style={[
+                      { backgroundColor: surfaceColor },
+                      shadowStyle,
+                    ]}
+                  >
+                    <Text className="text-2xl font-bold mb-1 text-text-primary">
+                      {level}
+                    </Text>
+                    <Text className="text-xs text-center text-text-secondary">
+                      {config.name}
+                    </Text>
+                  </View>
+                  <View className="items-center">
+                    <Text className="text-xs font-medium text-text-primary text-center">
+                      {config.description}
+                    </Text>
+                    <Text className="text-[10px] text-text-secondary mt-1 text-center">
+                      {surfaceColor}
+                    </Text>
+                  </View>
+                </View>
+              )
+            })}
+          </View>
+        </View>
+      </View>
+    )
+  },
+}
+
+export const ComponentElevationRanges: Story = {
+  render: function Render() {
+    const theme = useTheme()
+    const baseColor = getBaseSurfaceColor(theme)
+
+    const componentRanges = [
+      { name: 'Button', elevations: [2] as const },
+      { name: 'Card', elevations: [1, 2, 3] as const },
+      { name: 'Input', elevations: [-2, -1, 0] as const },
+      { name: 'Overlay', elevations: [4, 5] as const },
+    ]
+    
+    return (
+      <View className="p-6 min-h-screen bg-background-base">
+        <View className="max-w-6xl mx-auto">
+          <Text className="text-2xl font-bold text-text-primary mb-2">
+            Component Elevation Ranges
+          </Text>
+          <Text className="text-sm text-text-secondary mb-6">
+            Each component type has a specific range of allowed elevations for visual consistency.
+          </Text>
+          
+          {componentRanges.map(({ name, elevations }) => (
+            <View key={name} className="mb-8">
+              <Text className="text-lg font-semibold text-text-primary mb-4">
+                {name}
+              </Text>
+              <View className="flex-row flex-wrap gap-6">
+                {elevations.map((level) => {
+                  const config = getElevationConfig(level)
+                  const surfaceColor = getElevationSurface(baseColor, level, theme)
+                  const shadowStyle = getElevationShadow(baseColor, level, theme)
+                  
+                  return (
+                    <View key={level} className="items-center gap-2">
+                      <View
+                        className="w-20 h-20 rounded-lg items-center justify-center"
+                        style={[
+                          { backgroundColor: surfaceColor },
+                          shadowStyle,
+                        ]}
+                      >
+                        <Text className="text-lg font-bold text-text-primary">
+                          {level}
+                        </Text>
+                      </View>
+                      <Text className="text-xs text-text-secondary">
+                        {config.name}
+                      </Text>
+                    </View>
+                  )
+                })}
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+    )
+  },
+}

package/src/theme/elevation.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { getGlowShadow } from './elevation'
+
+describe('getGlowShadow', () => {
+  it('returns shadow style for valid hex color', () => {
+    const style = getGlowShadow('#FF7900', 'medium')
+    expect(style).toBeDefined()
+    expect(Object.keys(style).length).toBeGreaterThan(0)
+  })
+
+  it('returns empty object for invalid color', () => {
+    const style = getGlowShadow('not-a-color')
+    expect(style).toEqual({})
+  })
+
+  it('scales intensity across levels', () => {
+    const subtle = getGlowShadow('#FF7900', 'subtle')
+    const strong = getGlowShadow('#FF7900', 'strong')
+    expect(subtle).not.toEqual(strong)
+  })
+
+  it('defaults to medium intensity', () => {
+    const defaultStyle = getGlowShadow('#FF7900')
+    const mediumStyle = getGlowShadow('#FF7900', 'medium')
+    expect(defaultStyle).toEqual(mediumStyle)
+  })
+})