feat: add TypeScript support

frontend/ts/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@penpot/ts",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "type": "module",
+  "packageManager": "yarn@4.3.1"
+}

frontend/ts/src/components/test-tsx.module.css

@@ -0,0 +1,3 @@
+.title {
+  color: green;
+}

frontend/ts/src/components/test-tsx.stories.tsx

@@ -0,0 +1,16 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+import {TestTsxComponent }  from "./test-tsx";
+
+export default {
+  title: "TestTSX",
+  component: TestTsxComponent,
+  argTypes: {},
+  parameters: {},
+};
+
+export const Default = {};

frontend/ts/src/components/test-tsx.tsx

@@ -0,0 +1,11 @@
+import styles from './test-tsx.module.css';
+
+import { translate } from '../penpot-bridge';
+
+export const TestTsxComponent = () => {
+  return (
+    <div>
+        <h2 className={styles.title}>{translate("labels.delete")} xx</h2>
+    </div>
+  );
+};

frontend/ts/src/index.tsx

@@ -0,0 +1,4 @@
+/* eslint-disable */
+
+export { TestTsxComponent } from "./components/test-tsx";
+export { setTranslation } from "./penpot-bridge";

frontend/ts/src/penpot-bridge.ts

@@ -0,0 +1,7 @@
+export let translate = (key: string) => {
+  return key;
+};
+
+export function setTranslation(translations: (key: string) => string) {
+  translate = translations;
+}