From bd5a5078925c9886a198ef6c68993f87ab16defe Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 23 Feb 2022 15:32:27 +0100
Subject: [PATCH] Add Playground example
---
examples/playground/.postcssrc | 6 ++++++
examples/playground/index.html | 19 +++++++++++++++++
examples/playground/index.tsx | 29 ++++++++++++++++++++++++++
examples/playground/package.json | 23 ++++++++++++++++++++
examples/playground/styles.css | 8 +++++++
examples/playground/tailwind.config.js | 8 +++++++
6 files changed, 93 insertions(+)
create mode 100644 examples/playground/.postcssrc
create mode 100644 examples/playground/index.html
create mode 100644 examples/playground/index.tsx
create mode 100644 examples/playground/package.json
create mode 100644 examples/playground/styles.css
create mode 100644 examples/playground/tailwind.config.js
diff --git a/examples/playground/.postcssrc b/examples/playground/.postcssrc
new file mode 100644
index 0000000..380d676
--- /dev/null
+++ b/examples/playground/.postcssrc
@@ -0,0 +1,6 @@
+{
+ "plugins": {
+ "tailwindcss": {},
+ "autoprefixer": {}
+ }
+}
diff --git a/examples/playground/index.html b/examples/playground/index.html
new file mode 100644
index 0000000..896cbc2
--- /dev/null
+++ b/examples/playground/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+ Playground | Status
+
+
+
+
+
+
+
diff --git a/examples/playground/index.tsx b/examples/playground/index.tsx
new file mode 100644
index 0000000..dc9af50
--- /dev/null
+++ b/examples/playground/index.tsx
@@ -0,0 +1,29 @@
+import React, { render } from 'react-dom';
+import { GroupChat, lightTheme, darkTheme } from '@status-im/react';
+import { StrictMode, useState } from 'react';
+
+const App = () => {
+ const [theme, setTheme] = useState(lightTheme);
+
+ return (
+
+
+
+
+
+ );
+};
+
+render(
+
+
+ ,
+ document.getElementById('root')
+);
diff --git a/examples/playground/package.json b/examples/playground/package.json
new file mode 100644
index 0000000..c5447ac
--- /dev/null
+++ b/examples/playground/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "playground",
+ "version": "0.0.0",
+ "source": "./index.html",
+ "scripts": {
+ "dev": "parcel",
+ "build": "parcel build"
+ },
+ "dependencies": {
+ "@status-im/react": "^0.0.0",
+ "react": "^17.0.0",
+ "react-dom": "^17.0.0"
+ },
+ "devDependencies": {
+ "autoprefixer": "^10.4.2",
+ "postcss": "^8.4.6",
+ "tailwindcss": "^3.0.0",
+ "@types/react": "^17.0.0",
+ "@types/react-dom": "^17.0.0",
+ "parcel": "^2.0.0",
+ "typescript": "^4.0.0"
+ }
+}
diff --git a/examples/playground/styles.css b/examples/playground/styles.css
new file mode 100644
index 0000000..b924ba0
--- /dev/null
+++ b/examples/playground/styles.css
@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+ height: 100%;
+}
diff --git a/examples/playground/tailwind.config.js b/examples/playground/tailwind.config.js
new file mode 100644
index 0000000..f1799a5
--- /dev/null
+++ b/examples/playground/tailwind.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+ content: ["./**/*.{html,js,ts,jsx,tsx}"],
+ theme: {
+ extend: {},
+ },
+ variants: {},
+ plugins: [],
+};