[V0_FILE]javascript:file="example-usage.js" type="code" project="React Native HTML Components" isMerged="true" import React from 'react'; import { ScrollView } from 'react-native'; import { Div, H1, H2, P, Button, Input, Ul, Li, A, Img, Card, Strong, Em } from './html-components'; export default function ExampleUsage() { return (

Welcome to HTML-like Components

This is a paragraph with emphasized text using HTML-like components in React Native.

Features List

Semantic HTML-like components
Tailwind CSS className support
Native React Native performance
Easy to use and customize

Learn more about React Native ); } [V0_FILE]json:file="package.json" { "name": "react-native-html-components", "version": "1.0.0", "description": "HTML-like components for React Native with Tailwind CSS support", "main": "lib/index.js", "module": "lib/index.esm.js", "types": "lib/index.d.ts", "files": ["lib", "src", "README.md", "LICENSE"], "scripts": { "build": "rollup -c", "build:watch": "rollup -c -w", "test": "jest", "test:watch": "jest --watch", "lint": "eslint src --ext .ts,.tsx", "lint:fix": "eslint src --ext .ts,.tsx --fix", "typecheck": "tsc --noEmit", "prepublishOnly": "npm run build", "clean": "rimraf lib" }, "keywords": ["react-native", "html", "components", "tailwind", "nativewind", "ui", "semantic", "jsx"], "author": "Your Name ", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/yourusername/react-native-html-components.git" }, "bugs": { "url": "https://github.com/yourusername/react-native-html-components/issues" }, "homepage": "https://github.com/yourusername/react-native-html-components#readme", "peerDependencies": { "react": ">=16.8.0", "react-native": ">=0.60.0" }, "devDependencies": { "@babel/core": "^7.22.0", "@babel/preset-env": "^7.22.0", "@babel/preset-react": "^7.22.0", "@babel/preset-typescript": "^7.22.0", "@rollup/plugin-babel": "^6.0.3", "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-node-resolve": "^15.1.0", "@rollup/plugin-typescript": "^11.1.0", "@testing-library/jest-native": "^5.4.2", "@testing-library/react-native": "^12.1.2", "@types/jest": "^29.5.0", "@types/react": "^18.2.0", "@types/react-native": "^0.72.0", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", "eslint": "^8.40.0", "eslint-plugin-react": "^7.32.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-native": "^4.0.0", "jest": "^29.5.0", "react": "^18.2.0", "react-native": "^0.72.0", "react-test-renderer": "^18.2.0", "rimraf": "^5.0.0", "rollup": "^3.23.0", "rollup-plugin-peer-deps-external": "^2.2.4", "typescript": "^5.0.0" }, "jest": { "preset": "react-native", "setupFilesAfterEnv": ["/jest.setup.js"], "testMatch": ["**/__tests__/**/*.(ts|tsx|js)", "**/*.(test|spec).(ts|tsx|js)"], "collectCoverageFrom": ["src/**/*.{ts,tsx}", "!src/**/*.d.ts", "!src/index.ts"] } } [V0_FILE]typescript:file="src/index.ts" // Main entry point - export all components export * from "./components/BlockElements" export * from "./components/TextElements" export * from "./components/FormElements" export * from "./components/ListElements" export * from "./components/TableElements" export * from "./components/MediaElements" export * from "./components/InteractiveElements" export * from "./components/UtilityElements" export * from "./components/QuoteElements" // Export types export * from "./types" // Default export with all components import * as BlockElements from "./components/BlockElements" import * as TextElements from "./components/TextElements" import * as FormElements from "./components/FormElements" import * as ListElements from "./components/ListElements" import * as TableElements from "./components/TableElements" import * as MediaElements from "./components/MediaElements" import * as InteractiveElements from "./components/InteractiveElements" import * as UtilityElements from "./components/UtilityElements" import * as QuoteElements from "./components/QuoteElements" export default { ...BlockElements, ...TextElements, ...FormElements, ...ListElements, ...TableElements, ...MediaElements, ...InteractiveElements, ...UtilityElements, ...QuoteElements, } [V0_FILE]typescript:file="src/types/index.ts" import type React from "react" import type { ViewProps, TextProps, TextInputProps, PressableProps, ImageProps } from "react-native" // Base component props export interface BaseViewProps extends ViewProps { className?: string } export interface BaseTextProps extends TextProps { className?: string } export interface BaseInputProps extends TextInputProps { className?: string } export interface BasePressableProps extends PressableProps { className?: string } export interface BaseImageProps extends ImageProps { className?: string } // Specific component props export interface HeadingProps extends BaseTextProps { level?: 1 | 2 | 3 | 4 | 5 | 6 } export interface ListItemProps extends BaseTextProps { ordered?: boolean index?: number } export interface LinkProps extends BasePressableProps { href?: string children: React.ReactNode } export interface SpacerProps extends BaseViewProps { height?: number width?: number } export interface ButtonProps extends BasePressableProps { children: React.ReactNode } export interface InputProps extends BaseInputProps {} export interface TextareaProps extends BaseInputProps { multiline?: boolean } [V0_FILE]typescript:file="src/components/BlockElements.tsx" import type React from "react" import { View } from "react-native" import type { BaseViewProps } from "../types" export const Div: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Section: React.FC = Div export const Article: React.FC = Div export const Aside: React.FC = Div export const Header: React.FC = Div export const Footer: React.FC = Div export const Main: React.FC = Div export const Nav: React.FC = Div export const Figure: React.FC = Div [V0_FILE]typescript:file="src/components/TextElements.tsx" import type React from "react" import { Text } from "react-native" import type { BaseTextProps } from "../types" export const H1: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const H2: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const H3: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const H4: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const H5: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const H6: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const P: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Span: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Strong: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Em: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Small: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Mark: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Code: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Figcaption: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) [V0_FILE]typescript:file="src/components/FormElements.tsx" import type React from "react" import { View, Text, TextInput, Pressable } from "react-native" import type { BaseViewProps, BaseTextProps, InputProps, TextareaProps, ButtonProps } from "../types" export const Form: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Fieldset: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Legend: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Input: React.FC = ({ className = "", style, ...props }) => ( ) export const Textarea: React.FC = ({ className = "", style, multiline = true, ...props }) => ( ) export const Label: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Button: React.FC = ({ className = "", style, children, onPress, ...props }) => ( {children} ) [V0_FILE]typescript:file="src/components/ListElements.tsx" import type React from "react" import { View, Text } from "react-native" import type { BaseViewProps, BaseTextProps, ListItemProps } from "../types" export const Ul: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Ol: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Li: React.FC = ({ className = "", style, children, ordered = false, index = 0, ...props }) => ( {ordered ? `${index + 1}. ` : "• "} {children} ) export const Dl: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Dt: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Dd: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) [V0_FILE]typescript:file="src/components/TableElements.tsx" import type React from "react" import { View, Text } from "react-native" import type { BaseViewProps, BaseTextProps } from "../types" export const Table: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Thead: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Tbody: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Tr: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Th: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Td: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) [V0_FILE]typescript:file="src/components/MediaElements.tsx" import type React from "react" import { View, Image } from "react-native" import type { BaseViewProps, BaseImageProps } from "../types" export const Img: React.FC = ({ className = "", style, ...props }) => ( ) export const Video: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Audio: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) [V0_FILE]typescript:file="src/components/InteractiveElements.tsx" import type React from "react" import { Text, TouchableOpacity, Linking } from "react-native" import type { LinkProps } from "../types" export const A: React.FC = ({ className = "", style, children, href, onPress, ...props }) => { const handlePress = () => { if (onPress) { onPress() } else if (href) { Linking.openURL(href) } } return ( {children} ) } [V0_FILE]typescript:file="src/components/UtilityElements.tsx" import type React from "react" import { View, Text, ScrollView } from "react-native" import type { BaseViewProps, SpacerProps } from "../types" export const Br: React.FC = () => {"\n"} export const Hr: React.FC = ({ className = "", style, ...props }) => ( ) export const Pre: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Container: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Spacer: React.FC = ({ height = 16, width = 0, className = "", style }) => ( ) export const Card: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) [V0_FILE]typescript:file="src/components/QuoteElements.tsx" import type React from "react" import { View, Text } from "react-native" import type { BaseViewProps, BaseTextProps } from "../types" export const Blockquote: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) export const Q: React.FC = ({ className = "", style, children, ...props }) => ( "{children}" ) export const Cite: React.FC = ({ className = "", style, children, ...props }) => ( {children} ) [V0_FILE]javascript:file="rollup.config.js" import resolve from "@rollup/plugin-node-resolve" import commonjs from "@rollup/plugin-commonjs" import typescript from "@rollup/plugin-typescript" import babel from "@rollup/plugin-babel" import peerDepsExternal from "rollup-plugin-peer-deps-external" export default { input: "src/index.ts", output: [ { file: "lib/index.js", format: "cjs", sourcemap: true, }, { file: "lib/index.esm.js", format: "esm", sourcemap: true, }, ], plugins: [ peerDepsExternal(), resolve({ browser: false, preferBuiltins: false, }), commonjs(), typescript({ tsconfig: "./tsconfig.json", declaration: true, declarationDir: "lib", rootDir: "src", }), babel({ babelHelpers: "bundled", exclude: "node_modules/**", presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"], }), ], external: ["react", "react-native"], } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "target": "es2018", "lib": ["es2018"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": false, "declaration": true, "outDir": "lib", "jsx": "react-jsx" }, "include": ["src/**/*"], "exclude": ["node_modules", "lib", "**/*.test.ts", "**/*.test.tsx"] } [V0_FILE]javascript:file="jest.setup.js" isFixed="true" isQuickEdit="true" import jest from "jest" import "@testing-library/jest-native/extend-expect" // Mock React Native modules jest.mock("react-native", () => { const RN = jest.requireActual("react-native") RN.Linking = { openURL: jest.fn(() => Promise.resolve()), } return RN }) [V0_FILE]javascript:file=".eslintrc.js" module.exports = { root: true, extends: ["@react-native-community", "@typescript-eslint/recommended"], parser: "@typescript-eslint/parser", plugins: ["@typescript-eslint"], rules: { "@typescript-eslint/no-unused-vars": "error", "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-module-boundary-types": "off", "react-native/no-inline-styles": "off", }, } [V0_FILE]markdown:file="README.md" # React Native HTML Components A comprehensive library of HTML-like components for React Native that allows you to write familiar HTML syntax while maintaining native performance and styling capabilities. ## 🚀 Features - **Familiar HTML Syntax**: Use HTML-like components (`

`, `

`, etc.) in React Native - Tailwind CSS Support: Full className support for Tailwind CSS styling - Native Performance: Built on top of React Native's core components - TypeScript Ready: Full TypeScript support with comprehensive type definitions - Semantic Elements: Support for semantic HTML elements like `
`, `
`, `
` - Form Components: Complete form elements with native input handling - Table Support: Full table structure components - Accessibility: Built-in accessibility support following React Native best practices ## 📦 Installation \`\`\`bash npm install react-native-html-components # or yarn add react-native-html-components \`\`\` ## 🎯 Quick Start \`\`\`javascript import React from 'react'; import { ScrollView } from 'react-native'; import { Div, H1, P, Button, Input, Card } from 'react-native-html-components'; export default function App() { return (
Welcome to HTML Components

Write React Native apps with familiar HTML syntax!
); } \`\`\` ## 📚 Available Components ### Block Elements - `
` - Generic container (View) - `
` - Section container - `
` - Article container - `
` - Header container - `
` - Footer container - `
` - Main content container - `
` - Navigation container ### Text Elements - `
` to `
` - Headings with appropriate sizing - `
` - Paragraph text - `` - Inline text - `` - Bold text - `` - Italic text - `` - Small text - `` - Highlighted text - `` - Inline code ### Form Elements - `
` - Form container - `` - Text input - `` - Multiline text input - `<Button>` - Pressable button - `<Label>` - Form labels - `<Fieldset>` - Form field grouping - `<Legend>` - Fieldset legend ### List Elements - `<Ul>` - Unordered list - `<Ol>` - Ordered list - `<Li>` - List item - `<Dl>` - Definition list - `<Dt>` - Definition term - `<Dd>` - Definition description ### Table Elements - `<Table>` - Table container - `<Thead>` - Table header - `<Tbody>` - Table body - `<Tr>` - Table row - `<Th>` - Table header cell - `<Td>` - Table data cell ### Media Elements - `<Img>` - Image component - `<Video>` - Video container - `<Audio>` - Audio container ### Interactive Elements - `<A>` - Link component with URL opening support ### Utility Elements - `<Br>` - Line break - `<Hr>` - Horizontal rule - `<Card>` - Card container with shadow - `<Container>` - Padded container - `<Spacer>` - Flexible spacing component ### Quote Elements - `<Blockquote>` - Block quotation - `<Q>` - Inline quotation - `<Cite>` - Citation ## 🎨 Styling All components support both `className` (for Tailwind CSS) and `style` props: \`\`\`javascript // Using Tailwind classes <Div className="bg-blue-500 p-4 rounded-lg shadow-md"> <H1 className="text-white text-2xl font-bold">Styled with Tailwind</H1> </Div> // Using inline styles <Div style={{ backgroundColor: '#3B82F6', padding: 16, borderRadius: 8 }}> <H1 style={{ color: 'white', fontSize: 24, fontWeight: 'bold' }}> Styled with inline styles </H1> </Div> \`\`\` ## 🔧 TypeScript Support This library is written in TypeScript and provides comprehensive type definitions: \`\`\`typescript import { Div, H1, P, ButtonProps } from 'react-native-html-components'; interface CustomButtonProps extends ButtonProps { variant: 'primary' | 'secondary'; } const CustomButton: React.FC<CustomButtonProps> = ({ variant, children, ...props }) => { const baseClass = variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500'; return ( <Button className={`${baseClass} p-3 rounded`} {...props}> {children} </Button> ); }; \`\`\` ## 🤝 Contributing Contributions are welcome! Please feel free to submit a Pull Request. ## 📄 License This project is licensed under the MIT License. \`\`\` ```text file="LICENSE" MIT License Copyright (c) 2024 React Native HTML Components Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. [V0_FILE]typescript:file="tests/components.test.tsx" isFixed="true" isQuickEdit="true" import { render } from "@testing-library/react-native" import { Div, H1, P, Button } from "../src" import jest from "jest" // Import jest to fix the undeclared variable error describe("React Native HTML Components", () => { test("renders Div component", () => { const { getByTestId } = render(<Div testID="test-div">Test content</Div>) expect(getByTestId("test-div")).toBeTruthy() }) test("renders H1 component with correct text", () => { const { getByText } = render(<H1>Test Heading</H1>) expect(getByText("Test Heading")).toBeTruthy() }) test("renders P component with correct text", () => { const { getByText } = render(<P>Test paragraph</P>) expect(getByText("Test paragraph")).toBeTruthy() }) test("Button component handles press events", () => { const mockPress = jest.fn() const { getByTestId } = render( <Button testID="test-button" onPress={mockPress}> <P>Press me</P> </Button>, ) const button = getByTestId("test-button") expect(button).toBeTruthy() }) test("components accept className prop", () => { const { getByTestId } = render( <Div testID="styled-div" className="bg-blue-500 p-4"> Styled content </Div>, ) const styledDiv = getByTestId("styled-div") expect(styledDiv.props.className).toBe("bg-blue-500 p-4") }) }) [V0_FILE]markdown:file="CHANGELOG.md" # Changelog All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [1.0.0] - 2024-01-XX ### Added - Initial release of React Native HTML Components - Complete set of HTML-like components for React Native - TypeScript support with comprehensive type definitions - Tailwind CSS className support - Semantic HTML elements (Header, Footer, Main, Section, Article, etc.) - Form components (Input, Textarea, Button, Form, Fieldset, Legend) - List components (Ul, Ol, Li, Dl, Dt, Dd) - Table components (Table, Thead, Tbody, Tr, Th, Td) - Text components (H1-H6, P, Span, Strong, Em, Small, Mark, Code) - Media components (Img, Video, Audio) - Interactive components (A with link support) - Utility components (Br, Hr, Card, Container, Spacer) - Quote components (Blockquote, Q, Cite) - Jest testing setup - ESLint configuration - Rollup build configuration - Comprehensive documentation [V0_FILE]plaintext:file=".gitignore" # Dependencies node_modules/ npm-debug.log* yarn-debug.log* yarn-error.log* # Build outputs lib/ dist/ build/ # Coverage coverage/ # IDE .vscode/ .idea/ .swp .swo # OS .DS_Store Thumbs.db # Logs .log # Runtime data pids .pid .seed .pid.lock # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Temporary folders tmp/ temp/ [V0_FILE]json:file=".npmignore" src/ tests/ .test.ts .test.tsx jest.setup.js rollup.config.js tsconfig.json .eslintrc.js .gitignore .npmignore CHANGELOG.md</article></body></html>