3edf752bf0
- Add en/about-camgirl.json, about-fangirl.json, about-performer.json - Update landing-home locales for en/es - Improve makeI18n hook and type definitions - Add storybook docs imports for zname components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
130 lines
3.3 KiB
TypeScript
130 lines
3.3 KiB
TypeScript
// @ts-nocheck
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
import React from "react";
|
|
import { View, Text, StyleSheet } from "react-native";
|
|
import { ZName } from "./react-native";
|
|
|
|
const meta = {
|
|
title: "ZName/ReactNative",
|
|
component: ZName,
|
|
parameters: {
|
|
layout: "padded",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
name: {
|
|
control: "select",
|
|
options: [
|
|
"base",
|
|
"dropdown",
|
|
"header",
|
|
"sidebar",
|
|
"overlay",
|
|
"modal",
|
|
"notification",
|
|
"tooltip",
|
|
],
|
|
},
|
|
zIndex: {
|
|
control: "number",
|
|
},
|
|
},
|
|
} satisfies Meta<typeof ZName>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
const Box = ({ color, label }: { color: string; label: string }) => (
|
|
<View style={[styles.box, { backgroundColor: color }]}>
|
|
<Text style={styles.text}>{label}</Text>
|
|
</View>
|
|
);
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
name: "modal",
|
|
children: <Box color="#8e44ad" label="Modal Layer" />,
|
|
},
|
|
};
|
|
|
|
export const LayersDemo: Story = {
|
|
render: () => (
|
|
<View style={styles.container}>
|
|
<ZName name="base">
|
|
<Box color="#e74c3c" label="Base (z=1)" />
|
|
</ZName>
|
|
<ZName name="dropdown" style={styles.offset1}>
|
|
<Box color="#e67e22" label="Dropdown (z=11)" />
|
|
</ZName>
|
|
<ZName name="header" style={styles.offset2}>
|
|
<Box color="#f1c40f" label="Header (z=21)" />
|
|
</ZName>
|
|
<ZName name="sidebar" style={styles.offset3}>
|
|
<Box color="#2ecc71" label="Sidebar (z=31)" />
|
|
</ZName>
|
|
<ZName name="overlay" style={styles.offset4}>
|
|
<Box color="#3498db" label="Overlay (z=41)" />
|
|
</ZName>
|
|
<ZName name="modal" style={styles.offset5}>
|
|
<Box color="#9b59b6" label="Modal (z=51)" />
|
|
</ZName>
|
|
<ZName name="notification" style={styles.offset6}>
|
|
<Box color="#34495e" label="Notification (z=61)" />
|
|
</ZName>
|
|
<ZName name="tooltip" style={styles.offset7}>
|
|
<Box color="#16a085" label="Tooltip (z=71)" />
|
|
</ZName>
|
|
</View>
|
|
),
|
|
};
|
|
|
|
export const CustomZIndex: Story = {
|
|
args: {
|
|
name: "modal",
|
|
zIndex: 999,
|
|
children: <Box color="#e74c3c" label="Custom z-index (999)" />,
|
|
},
|
|
};
|
|
|
|
export const WithCustomConfig: Story = {
|
|
render: () => (
|
|
<View style={styles.container}>
|
|
<ZName name="modal" config={{ base: 100, step: 100 }}>
|
|
<Box color="#3498db" label="Modal with custom config (z=600)" />
|
|
</ZName>
|
|
</View>
|
|
),
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
position: "relative",
|
|
minHeight: 400,
|
|
},
|
|
box: {
|
|
padding: 20,
|
|
borderRadius: 8,
|
|
position: "absolute",
|
|
minWidth: 200,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
},
|
|
text: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
offset1: { position: "absolute", top: 20, left: 20 },
|
|
offset2: { position: "absolute", top: 40, left: 40 },
|
|
offset3: { position: "absolute", top: 60, left: 60 },
|
|
offset4: { position: "absolute", top: 80, left: 80 },
|
|
offset5: { position: "absolute", top: 100, left: 100 },
|
|
offset6: { position: "absolute", top: 120, left: 120 },
|
|
offset7: { position: "absolute", top: 140, left: 140 },
|
|
});
|