fix: transpile to js

package.json

@@ -2,7 +2,13 @@
   "name": "@coradion/ui",
   "version": "0.0.0",
   "description": "A component library for Coradion sites and apps",
-  "main": "dist/index.ts",
+  "main": "dist/index.js",
+  "type": "module",
+  "exports": {
+    "./styles.css": "./dist/styles.css",
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist/**/*"
   ],
@@ -21,7 +27,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-tailwind": "npx tailwindcss -i ./src/styles.css -o ./dist/styles.css",
-    "build": "copyfiles -u 1 -e src/styles.css \"src/**/*\" dist && npm run build-tailwind"
+    "build-components": "tsc --build",
+    "build": "npm run build-components && npm run build-tailwind"
   },
   "author": "Coradion",
   "license": "AGPL-3.0-or-later",
@@ -34,28 +41,25 @@
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-interactions": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",
+    "@storybook/addon-styling": "^1.0.0-next.1",
     "@storybook/blocks": "^7.0.2",
     "@storybook/react": "^7.0.2",
     "@storybook/react-webpack5": "^7.0.2",
     "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.2",
     "@tsconfig/strictest": "^2.0.0",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^8.3.0",
     "postcss": "^8.4.21",
-    "prop-types": "^15.8.1",
+    "postcss-loader": "^7.2.4",
     "storybook": "^7.0.2",
-    "tailwindcss": "^3.3.1"
+    "tailwindcss": "^3.3.1",
+    "typescript": "^5.0.4"
   },
   "dependencies": {
-    "@fontsource/public-sans": "^4.5.10",
-    "@storybook/addon-styling": "^1.0.0-next.1",
-    "@storybook/theming": "^7.0.2",
     "@types/react": "^18.0.33",
-    "copyfiles": "^2.4.1",
-    "postcss-loader": "^7.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.0.4"
+    "react-dom": "^18.2.0"
   },
   "release": {
     "branches": [

src/components/Button.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent, useMemo } from "react";
+import React, { useMemo } from "react";
+import type { FunctionComponent } from "react";
 
 const getSizeClasses = (size: "small" | "medium" | "large") => {
   switch (size) {

src/index.ts

@@ -1,2 +1 @@
-import "./styles.css";
 export * from "./components/Button";

src/styles.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  #__next {
+    display: contents;
+  }
+}

stories/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Button } from "../src/components/Button";
+import { Button } from "../src";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 export default {

tailwind.config.ts

@@ -0,0 +1,17 @@
+import { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./src/**/*.tsx"],
+  darkMode: ["class", '[data-mode="dark"]'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-main)", "sans-serif"],
+        coradion: ["var(--font-coradion)"],
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

tsconfig.json

@@ -2,9 +2,17 @@
   "extends": "@tsconfig/strictest/tsconfig.json",
   "compilerOptions": {
     "baseUrl": "src",
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react",
     "module": "ESNext",
-    "jsx": "preserve",
-    "moduleResolution": "Node"
+    "moduleResolution": "Node",
+    "outDir": "dist",
+    "rootDir": "src",
+    "sourceMap": true,
+    "sourceRoot": "src",
+    "target": "ESNext"
   },
-  "include": ["src/**/*", "stories/**/*"]
+  "include": ["src/**/*"]
 }