{"_id":"@consensys/ds3-playground","_rev":"5-522dee478ad61edf6120077d69bd9432","name":"@consensys/ds3-playground","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.2":{"name":"@consensys/ds3-playground","version":"0.0.2","keywords":[],"author":"","license":"ISC","_id":"@consensys/ds3-playground@0.0.2","maintainers":[{"name":"gustavorssilva","email":"gustavorssilva09@gmail.com"},{"name":"stanleyyuen","email":"stanley.yuen@consensys.net"},{"name":"jones.ho","email":"jones.ho@consensys.net"},{"name":"rizedr","email":"it@consensys.net"},{"name":"pmkowalski","email":"patrick.kowalski@consensys.net"},{"name":"klejeune-consensys","email":"kevin.le-jeune@consensys.net"},{"name":"victorien-gauch","email":"victorien.gauch@consensys.net"},{"name":"wantedsystem","email":"amine.harty@consensys.net"},{"name":"leo.wang","email":"leo.wang@consensys.net"},{"name":"becali12","email":"nicula.cristi14@gmail.com"},{"name":"andreolf","email":"francesco.andreoli@consensys.net"},{"name":"marioac","email":"marioac.dev@gmail.com"},{"name":"jluque-npm","email":"jose.luque@consensys.net"},{"name":"consensys-npm","email":"codefi-infra@consensys.net"},{"name":"consensys_jb","email":"belelieu.jonathan@consensys.net"},{"name":"cxalem1","email":"alejandro.gonzalez-ext@consensys.net"},{"name":"leifdejong","email":"leifdejong@gmail.com"}],"homepage":"https://github.com/Consensys-Network-State/ds3#readme","bugs":{"url":"https://github.com/Consensys-Network-State/ds3/issues"},"dist":{"shasum":"6e55ab92d61418138cb045ce720338326ec89da5","tarball":"https://registry.npmjs.org/@consensys/ds3-playground/-/ds3-playground-0.0.2.tgz","fileCount":37,"integrity":"sha512-jwpAk9zvMlOO4CSib8dpGCXgDKgDLKk13DWpkywElzJ2tsQexBySIVv2+6no0O15IhcxuAJs0qSlYx7aPXrgRQ==","signatures":[{"sig":"MEYCIQCbnX6Q8fQ9BDju7eZ+PZv4/CYnBq8PsY6B89QHgqU8QgIhAJwILCVeGbn/YhfrxZhBtPetwLz54YHRNWztTkJIWZcL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":175034},"main":"./src/index.ts","_from":"file:consensys-ds3-playground-0.0.2.tgz","types":"./src/index.ts","module":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts","require":"./src/index.ts"},"./src/*":"./src/*"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","type-check":"tsc -b --noEmit"},"_npmUser":{"name":"leifdejong","actor":{"name":"leifdejong","type":"user","email":"leifdejong@gmail.com"},"email":"leifdejong@gmail.com"},"_resolved":"/private/var/folders/vs/qfxb4_pj0q5dc0twy9nzk6f40000gn/T/288ad508427da54c27edd99132ffc448/consensys-ds3-playground-0.0.2.tgz","_integrity":"sha512-jwpAk9zvMlOO4CSib8dpGCXgDKgDLKk13DWpkywElzJ2tsQexBySIVv2+6no0O15IhcxuAJs0qSlYx7aPXrgRQ==","repository":{"url":"git+https://github.com/Consensys-Network-State/ds3.git","type":"git","directory":"packages/playground"},"_npmVersion":"10.9.0","description":"DS3 Playground for interactive component examples","directories":{},"sideEffects":false,"_nodeVersion":"22.11.0","dependencies":{"zod":"^3.24.1","@consensys/ds3":"0.0.6","react-hook-form":"^7.54.1","@babel/standalone":"7.27.6","react-native-marked":"7.0.2","prism-react-renderer":"^2.3.1","react-native-webview":"13.12.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.3.3","@types/react":"^18.3.11","@tsconfig/recommended":"^1.0.8","@tsconfig/react-native":"^3.0.5"},"peerDependencies":{"react":"*","react-native":"*","react-native-web":"*","react-native-safe-area-context":"*"},"peerDependenciesMeta":{"react-native":{"optional":true},"react-native-web":{"optional":true},"react-native-safe-area-context":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ds3-playground_0.0.2_1752171939448_0.0998469068548975","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@consensys/ds3-playground","version":"0.0.3","keywords":[],"author":"","license":"ISC","_id":"@consensys/ds3-playground@0.0.3","maintainers":[{"name":"gustavorssilva","email":"gustavorssilva09@gmail.com"},{"name":"stanleyyuen","email":"stanley.yuen@consensys.net"},{"name":"jones.ho","email":"jones.ho@consensys.net"},{"name":"rizedr","email":"it@consensys.net"},{"name":"pmkowalski","email":"patrick.kowalski@consensys.net"},{"name":"klejeune-consensys","email":"kevin.le-jeune@consensys.net"},{"name":"victorien-gauch","email":"victorien.gauch@consensys.net"},{"name":"wantedsystem","email":"amine.harty@consensys.net"},{"name":"leo.wang","email":"leo.wang@consensys.net"},{"name":"becali12","email":"nicula.cristi14@gmail.com"},{"name":"andreolf","email":"francesco.andreoli@consensys.net"},{"name":"marioac","email":"marioac.dev@gmail.com"},{"name":"jluque-npm","email":"jose.luque@consensys.net"},{"name":"consensys-npm","email":"codefi-infra@consensys.net"},{"name":"consensys_jb","email":"belelieu.jonathan@consensys.net"},{"name":"cxalem1","email":"alejandro.gonzalez-ext@consensys.net"},{"name":"leifdejong","email":"leifdejong@gmail.com"}],"homepage":"https://github.com/Consensys-Network-State/ds3#readme","bugs":{"url":"https://github.com/Consensys-Network-State/ds3/issues"},"dist":{"shasum":"861ea6bee2e06e6e3e3335f411b339c05d45891a","tarball":"https://registry.npmjs.org/@consensys/ds3-playground/-/ds3-playground-0.0.3.tgz","fileCount":37,"integrity":"sha512-7lVOnwF2jyQ19SUBoy7neDKOuxAe75MCDIqK2HLlp0FxA335IQQz646e73UAkmB6USVwwKYFhFGrwKNy0goLsw==","signatures":[{"sig":"MEQCIHW+4huqfVzGe7DalzOt6FrXHY/XC9dpYlFrUFxg9Fo+AiAGItl/RjG3ZzxyvD4FtoIZAKNFDHcBefTMfBzOqNb7FA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":175034},"main":"./src/index.ts","_from":"file:consensys-ds3-playground-0.0.3.tgz","types":"./src/index.ts","module":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts","require":"./src/index.ts"},"./src/*":"./src/*"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","type-check":"tsc -b --noEmit"},"_npmUser":{"name":"leifdejong","email":"leifdejong@gmail.com"},"_resolved":"/private/var/folders/vs/qfxb4_pj0q5dc0twy9nzk6f40000gn/T/c4da6d853785dcd34009f1fd2b146b2d/consensys-ds3-playground-0.0.3.tgz","_integrity":"sha512-7lVOnwF2jyQ19SUBoy7neDKOuxAe75MCDIqK2HLlp0FxA335IQQz646e73UAkmB6USVwwKYFhFGrwKNy0goLsw==","repository":{"url":"git+https://github.com/Consensys-Network-State/ds3.git","type":"git","directory":"packages/playground"},"_npmVersion":"10.9.0","description":"DS3 Playground for interactive component examples","directories":{},"sideEffects":false,"_nodeVersion":"22.11.0","dependencies":{"zod":"^3.24.1","@consensys/ds3":"0.0.7","react-hook-form":"^7.54.1","@babel/standalone":"7.27.6","react-native-marked":"7.0.2","prism-react-renderer":"^2.3.1","react-native-webview":"13.12.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.3.3","@types/react":"^18.3.11","@tsconfig/recommended":"^1.0.8","@tsconfig/react-native":"^3.0.5"},"peerDependencies":{"react":"*","react-native":"*","react-native-web":"*","react-native-safe-area-context":"*"},"peerDependenciesMeta":{"react-native":{"optional":true},"react-native-web":{"optional":true},"react-native-safe-area-context":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ds3-playground_0.0.3_1752253095418_0.30905120525443763","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-07-10T18:25:39.297Z","modified":"2026-06-10T20:39:52.772Z","0.0.2":"2025-07-10T18:25:39.637Z","0.0.3":"2025-07-11T16:58:15.598Z"},"bugs":{"url":"https://github.com/Consensys-Network-State/ds3/issues"},"license":"ISC","homepage":"https://github.com/Consensys-Network-State/ds3#readme","keywords":[],"repository":{"url":"git+https://github.com/Consensys-Network-State/ds3.git","type":"git","directory":"packages/playground"},"description":"DS3 Playground for interactive component examples","maintainers":[{"email":"gustavorssilva09@gmail.com","name":"gustavorssilva"},{"email":"stanley.yuen@consensys.net","name":"stanleyyuen"},{"email":"jones.ho@consensys.net","name":"jones.ho"},{"email":"it@consensys.net","name":"rizedr"},{"email":"kevin.le-jeune@consensys.net","name":"klejeune-consensys"},{"email":"victorien.gauch@consensys.net","name":"victorien-gauch"},{"email":"amine.harty@consensys.net","name":"wantedsystem"},{"email":"leo.wang@consensys.net","name":"leo.wang"},{"email":"nicula.cristi14@gmail.com","name":"becali12"},{"email":"francesco.andreoli@consensys.net","name":"andreolf"},{"email":"jose.luque@consensys.net","name":"jluque-npm"},{"email":"codefi-infra@consensys.net","name":"consensys-npm"},{"email":"belelieu.jonathan@consensys.net","name":"consensys_jb"},{"email":"alejandro.gonzalez-ext@consensys.net","name":"cxalem1"}],"readme":"# Playground\n\n> 🚧 **Note**: This package is under active development. While we're working hard to make it production-ready, please be aware that APIs and features may change. We welcome your feedback and contributions as we continue to improve!\n\n🎮 **Interactive playground for DS3 components with live code editing and real-time preview**\n\nBuild, test, and explore DS3 components in real-time with a powerful interactive playground that supports live code editing, syntax highlighting, and instant preview across all platforms.\n\n```tsx\n// Interactive playground with live preview\nimport { Playground, CodeBlock, Markdown } from '@consensys/ds3-playground';\n```\n\n## ✨ Features\n\n🎮 **Interactive Playground** - Real-time component testing with live code editing and instant preview\n\n📝 **Live Code Execution** - Write, edit, and execute JSX code directly in the browser with instant feedback\n\n🎨 **Syntax Highlighting** - Beautiful code display with Prism.js integration and DS3 theme support\n\n📖 **Markdown Rendering** - Rich markdown support with live code blocks and custom styling\n\n🔍 **Component Examples** - Comprehensive library of DS3 component examples organized by category\n\n## 🚀 Get Started\n\n```bash\npnpm add @consensys/ds3-playground\n```\n\n## 📚 Components\n\n### Core Components\n\n- [**Playground**](src/Playground.tsx) - Main interactive playground with category navigation and live editing\n- [**CodeBlock**](src/components/code-block) - Syntax-highlighted code display with optional live preview\n- [**Markdown**](src/components/markdown) - Rich markdown rendering with live code execution\n- [**Highlight**](src/components/highlight) - Syntax highlighting component with Prism.js integration\n\n### Example Library\n\nThe playground includes a comprehensive collection of DS3 component examples:\n\n- [**Buttons**](src/examples/buttons.ts) - Interactive button variants and compositions\n- [**Inputs**](src/examples/inputs.ts) - Form input examples with validation states\n- [**Checkboxes**](src/examples/checkboxes.ts) - Selection controls with various configurations\n- [**Switches**](src/examples/switches.ts) - Toggle controls and state management\n- [**Fields**](src/examples/fields.ts) - Form field components with validation\n- [**Icons**](src/examples/icons.ts) - Icon usage patterns and styling\n- [**Typography**](src/examples/typography.ts) - Text components and hierarchy\n- [**Colors**](src/examples/colors.ts) - Color system and theme tokens\n- [**Design**](src/examples/design.ts) - Design system fundamentals\n\n## 🎯 Quick Examples\n\n### Basic Playground\n\n```tsx\nimport { Playground } from '@consensys/ds3-playground';\n\nfunction App() {\n  return <Playground />;\n}\n```\n\n## 🛠️ Development\n\n```bash\n# Install dependencies\npnpm i\n\n# Type checking\npnpm type-check\n```\n\n## 📖 Documentation\n\nFor detailed component documentation, see the individual README files:\n\n- [CodeBlock Documentation](src/components/code-block/README.md)\n- [Markdown Documentation](src/components/markdown/README.md)\n- [Highlight Documentation](src/components/highlight/README.md)\n- [Examples Documentation](src/examples/README.md)\n\n## 🤝 Contributing\n\nWe welcome contributions! Check out our [Contributing Guidelines](../ui/CONTRIBUTING.md) for detailed information on our development workflow, code standards, and how to submit changes.\n\n## 📜 License\n\nMIT\n","readmeFilename":"README.md"}