Skip to content

Commit 618e3b7

Browse files
palkanpalkan
committed
chore: use shoelace for all components
1 parent 3ba2bf0 commit 618e3b7

File tree

6 files changed

+148
-16
lines changed

6 files changed

+148
-16
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"@bjorn3/browser_wasi_shim": "^0.2.18",
1414
"@ruby/wasm-wasi": "^2.4.1",
15+
"@shoelace-style/shoelace": "^2.13.0",
1516
"monaco-editor": "^0.45.0"
1617
},
1718
"devDependencies": {

‎src/index.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@
66
<title>Ruby Next Playground</title>
77
<link rel="stylesheet" type="text/css" href="/app.css">
88
<link rel="stylesheet" type="text/css" href="/index.css">
9-
10-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
11-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css" />
12-
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>
139
</head>
1410
<body class="w-full min-h-full">
1511
<main class="w-full h-full bg-slate-100 dark:bg-slate-900 text-slate-800 dark:text-slate-200">
@@ -53,25 +49,29 @@ <h1 class="text-2xl">Playground</h1>
5349
<span class="text-sm ml-4 h-4" id="currentVersion"></span>
5450
</div>
5551
<div class="flex flex-row space-x-2 self-center justify-center items-center px-2 align-middle">
56-
<button target="transpile-btn" class="bg-purple-500 hover:bg-purple-400 active:bg-purple-600 text-slate-50 dark:bg-purple-700 dark:hover:bg-purple-600 dark:active:bg-purple-800 dark:text-slate-100 py-2 px-4 font-semibold rounded inline-flex items-center">
57-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6 mr-2">
58-
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
59-
</svg>
60-
<span>Transpile</span>
61-
</button>
52+
<sl-button variant="primary" target="transpile-btn">
53+
<span class="flex flex-row items-center">
54+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6 mr-2">
55+
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
56+
</svg>
57+
<span>Transpile</span>
58+
</span>
59+
</sl-button>
6260
<sl-select id="versionSelect" value="2.5.0" class="w-32">
6361
<sl-option value="2.5.0">2.5.0</sl-option>
6462
<sl-option value="2.7.0">2.7.0</sl-option>
6563
<sl-option value="3.1.0">3.1.0</sl-option>
6664
<sl-option value="3.2.0">3.2.0</sl-option>
6765
<sl-option value="3.3.0">3.3.0</sl-option>
6866
</sl-select>
69-
<button target="run-btn" class="bg-green-500 hover:bg-green-400 active:bg-green-600 text-slate-50 dark:bg-green-700 dark:hover:bg-green-600 dark:active:bg-green-800 dark:text-slate-100 py-2 px-4 font-semibold rounded inline-flex items-center">
70-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2">
71-
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
72-
</svg>
73-
<span>Run</span>
74-
</button>
67+
<sl-button variant="success" target="run-btn" >
68+
<span class="flex flex-row items-center">
69+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2">
70+
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
71+
</svg>
72+
<span>Run</span>
73+
</span>
74+
</sl-button>
7575
</div>
7676
<div class="flex flex-row space-x-2 justify-center items-center px-2 mr-4">
7777
<a href="https://github.com/ruby-next/ruby-next" target="_blank" class="flex flex-row items-center space-x-1 hover:opacity-75 cursor-pointer">

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import "./shoelace.js";
2+
13
import App from "./app.js";
24

35
const loaderDone = (name) => {

‎src/shoelace.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
:root {
2+
/* Changes the primary theme color to purple using primitives */
3+
--sl-color-primary-50: var(--sl-color-purple-50);
4+
--sl-color-primary-100: var(--sl-color-purple-100);
5+
--sl-color-primary-200: var(--sl-color-purple-200);
6+
--sl-color-primary-300: var(--sl-color-purple-300);
7+
--sl-color-primary-400: var(--sl-color-purple-400);
8+
--sl-color-primary-500: var(--sl-color-purple-500);
9+
--sl-color-primary-600: var(--sl-color-purple-600);
10+
--sl-color-primary-700: var(--sl-color-purple-700);
11+
--sl-color-primary-800: var(--sl-color-purple-800);
12+
--sl-color-primary-900: var(--sl-color-purple-900);
13+
--sl-color-primary-950: var(--sl-color-purple-950);
14+
}

‎src/shoelace.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import "@shoelace-style/shoelace/dist/themes/light.css";
2+
import "@shoelace-style/shoelace/dist/themes/dark.css";
3+
import "./shoelace.css";
4+
5+
import "@shoelace-style/shoelace/dist/components/select/select.js";
6+
import "@shoelace-style/shoelace/dist/components/option/option.js";
7+
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
8+
import "@shoelace-style/shoelace/dist/components/icon/icon.js";
9+
import "@shoelace-style/shoelace/dist/components/button/button.js";

‎yarn.lock‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@
1212
resolved "https://registry.yarnpkg.com/@bjorn3/browser_wasi_shim/-/browser_wasi_shim-0.2.18.tgz#7b4274802625b58adb52b1363357af660767b963"
1313
integrity sha512-oTArSGucj3UVfzyfVX1PH0/d94XiZpRu0c0grLTv0RHjlpTqsSeqONE6se/pS03ydKFvs90liMEVD0+ZKG/9SA==
1414

15+
"@ctrl/tinycolor@^4.0.2":
16+
version "4.0.3"
17+
resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-4.0.3.tgz#c56d96ef0d7be598cf68d1ab53f990849a79f5b4"
18+
integrity sha512-e9nEVehVJwkymQpkGhdSNzLT2Lr9UTTby+JePq4Z2SxBbOQjY7pLgSouAaXvfaGQVSAaY0U4eJdwfSDmCbItcw==
19+
1520
"@esbuild/[email protected]":
1621
version "0.17.19"
1722
resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz#bafb75234a5d3d1b690e7c2956a599345e84a2fd"
@@ -122,6 +127,26 @@
122127
resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061"
123128
integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
124129

130+
"@floating-ui/core@^1.5.3":
131+
version "1.5.3"
132+
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.3.tgz#b6aa0827708d70971c8679a16cf680a515b8a52a"
133+
integrity sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==
134+
dependencies:
135+
"@floating-ui/utils" "^0.2.0"
136+
137+
"@floating-ui/dom@^1.5.3":
138+
version "1.5.4"
139+
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.4.tgz#28df1e1cb373884224a463235c218dcbd81a16bb"
140+
integrity sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==
141+
dependencies:
142+
"@floating-ui/core" "^1.5.3"
143+
"@floating-ui/utils" "^0.2.0"
144+
145+
"@floating-ui/utils@^0.2.0":
146+
version "0.2.1"
147+
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
148+
integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
149+
125150
"@isaacs/cliui@^8.0.2":
126151
version "8.0.2"
127152
resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -166,6 +191,23 @@
166191
"@jridgewell/resolve-uri" "^3.1.0"
167192
"@jridgewell/sourcemap-codec" "^1.4.14"
168193

194+
"@lit-labs/ssr-dom-shim@^1.1.2":
195+
version "1.1.2"
196+
resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz#d693d972974a354034454ec1317eb6afd0b00312"
197+
integrity sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==
198+
199+
"@lit/react@^1.0.0":
200+
version "1.0.2"
201+
resolved "https://registry.yarnpkg.com/@lit/react/-/react-1.0.2.tgz#4951ff1590d69aad912d0a950b3518d19eb7e220"
202+
integrity sha512-UJ5TQ46DPcJDIzyjbwbj6Iye0XcpCxL2yb03zcWq1BpWchpXS3Z0BPVhg7zDfZLF6JemPml8u/gt/+KwJ/23sg==
203+
204+
"@lit/reactive-element@^2.0.0":
205+
version "2.0.3"
206+
resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-2.0.3.tgz#29d7d4ee8d9b00804be957cc6937577eb4d3db63"
207+
integrity sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==
208+
dependencies:
209+
"@lit-labs/ssr-dom-shim" "^1.1.2"
210+
169211
"@nodelib/[email protected]":
170212
version "2.1.5"
171213
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -199,6 +241,35 @@
199241
dependencies:
200242
tslib "^2.6.1"
201243

244+
"@shoelace-style/animations@^1.1.0":
245+
version "1.1.0"
246+
resolved "https://registry.yarnpkg.com/@shoelace-style/animations/-/animations-1.1.0.tgz#17539abafd6dcbf2a79e089e1593175e9f7835b5"
247+
integrity sha512-Be+cahtZyI2dPKRm8EZSx3YJQ+jLvEcn3xzRP7tM4tqBnvd/eW/64Xh0iOf0t2w5P8iJKfdBbpVNE9naCaOf2g==
248+
249+
"@shoelace-style/localize@^3.1.2":
250+
version "3.1.2"
251+
resolved "https://registry.yarnpkg.com/@shoelace-style/localize/-/localize-3.1.2.tgz#2c63f16d8aa80842dbe5127845c76ed53f6a5e8e"
252+
integrity sha512-Hf45HeO+vdQblabpyZOTxJ4ZeZsmIUYXXPmoYrrR4OJ5OKxL+bhMz5mK8JXgl7HsoEowfz7+e248UGi861de9Q==
253+
254+
"@shoelace-style/shoelace@^2.13.0":
255+
version "2.13.0"
256+
resolved "https://registry.yarnpkg.com/@shoelace-style/shoelace/-/shoelace-2.13.0.tgz#33154c749487029b48b386a2abcb0e4d0725c860"
257+
integrity sha512-Po0wdJ6ApO6ix5Gd/R8RLCNyeczY16KIeELeT/Gh38gP1DDjXUi4XCEs7QRd6cRipaxNGX5FH+PlVuJZMxATzA==
258+
dependencies:
259+
"@ctrl/tinycolor" "^4.0.2"
260+
"@floating-ui/dom" "^1.5.3"
261+
"@lit/react" "^1.0.0"
262+
"@shoelace-style/animations" "^1.1.0"
263+
"@shoelace-style/localize" "^3.1.2"
264+
composed-offset-position "^0.0.4"
265+
lit "^3.0.0"
266+
qr-creator "^1.0.0"
267+
268+
"@types/trusted-types@^2.0.2":
269+
version "2.0.7"
270+
resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
271+
integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
272+
202273
ansi-regex@^5.0.1:
203274
version "5.0.1"
204275
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
@@ -371,6 +442,11 @@ commander@^4.0.0:
371442
resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
372443
integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
373444

445+
composed-offset-position@^0.0.4:
446+
version "0.0.4"
447+
resolved "https://registry.yarnpkg.com/composed-offset-position/-/composed-offset-position-0.0.4.tgz#ca8854abf15e3c235ecf4df125a27fe88af76ea4"
448+
integrity sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw==
449+
374450
[email protected]:
375451
version "0.0.1"
376452
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -905,6 +981,31 @@ lines-and-columns@^1.1.6:
905981
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
906982
integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
907983

984+
lit-element@^4.0.0:
985+
version "4.0.3"
986+
resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-4.0.3.tgz#18239840a7c1a6a6e09c6ed3b5cd3db0512ebf15"
987+
integrity sha512-2vhidmC7gGLfnVx41P8UZpzyS0Fb8wYhS5RCm16cMW3oERO0Khd3EsKwtRpOnttuByI5rURjT2dfoA7NlInCNw==
988+
dependencies:
989+
"@lit-labs/ssr-dom-shim" "^1.1.2"
990+
"@lit/reactive-element" "^2.0.0"
991+
lit-html "^3.1.0"
992+
993+
lit-html@^3.1.0:
994+
version "3.1.1"
995+
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-3.1.1.tgz#50c2e74a2074f85fc9816676ac11cf0c96f257c3"
996+
integrity sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==
997+
dependencies:
998+
"@types/trusted-types" "^2.0.2"
999+
1000+
lit@^3.0.0:
1001+
version "3.1.1"
1002+
resolved "https://registry.yarnpkg.com/lit/-/lit-3.1.1.tgz#49340c8875019a777cc83904f75a2bf7764617dc"
1003+
integrity sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==
1004+
dependencies:
1005+
"@lit/reactive-element" "^2.0.0"
1006+
lit-element "^4.0.0"
1007+
lit-html "^3.1.0"
1008+
9081009
load-json-file@^4.0.0:
9091010
version "4.0.0"
9101011
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
@@ -1162,6 +1263,11 @@ postcss@^8.4.23:
11621263
picocolors "^1.0.0"
11631264
source-map-js "^1.0.2"
11641265

1266+
qr-creator@^1.0.0:
1267+
version "1.0.0"
1268+
resolved "https://registry.yarnpkg.com/qr-creator/-/qr-creator-1.0.0.tgz#f350a8f0b5be02bd1fc1ef133a038a06ef8bc5ef"
1269+
integrity sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ==
1270+
11651271
queue-microtask@^1.2.2:
11661272
version "1.2.3"
11671273
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"

0 commit comments

Comments
 (0)