feat: add sandbox to test components

greeeg · Mar 19, 2023 · 56a85a8 · 56a85a8
1 parent 6a495f9
commit 56a85a8
Show file tree

Hide file tree

Showing 7 changed files with 1,195 additions and 11 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true,
+}
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
   ],
   "main": "./lib/index.js",
   "scripts": {
+    "start": "yarn parcel sandbox/index.html",
     "prebuild": "npm run clean",
     "build": "concurrently npm:build:generate-colors-types npm:build:generate-icons && npm run build:generate-index && npm run build:js && npm run build:add-js-extension-to-relative-module-paths && npm run build:copy-non-ts-files",
     "build:generate-colors-types": "tsx scripts/generate-colors-types.ts",
@@ -67,7 +68,9 @@
     "fs-extra": "11.1.0",
     "globby": "13.1.3",
     "mkdirp": "1.0.4",
+    "parcel": "2.8.3",
     "prettier": "2.8.1",
+    "process": "0.11.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",

diff --git a/sandbox/index.html b/sandbox/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="index.tsx"></script>
+  </body>
+</html>
diff --git a/sandbox/index.tsx b/sandbox/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './src/App'
+
+import '../src/css/theme.css'
+import '../src/css/base.css'
+import '../src/css/menu.module.css'
+
+const container = document.getElementById('app')!
+const root = createRoot(container)
+root.render(<App />)
diff --git a/sandbox/src/App.css b/sandbox/src/App.css
@@ -0,0 +1,15 @@
+#app {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+}
+
+.container {
+  width: 300px;
+  height: 300px;
+  overflow-y: auto;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-color: var(--figma-color-bg);
+}
diff --git a/sandbox/src/App.tsx b/sandbox/src/App.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Text } from '../../lib'
+
+import './App.css'
+
+export const App = () => {
+  return (
+    <div className="container figma-light">
+      <Text>Hello Sandbox</Text>
+    </div>
+  )
+}