Merge pull request #560 from keplersj/rewrite/web-component

Rewrite in Web Components

.storybook/main.cjs

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  core: {
+    builder: "storybook-builder-vite",
+  },
+  async viteFinal(config, { configType }) {
+    // customize the Vite config here
+    config.esbuild = config.esbuild || {};
+    config.esbuild.jsxFactory = "_jsx";
+    config.esbuild.jsxInject = "import {h as _jsx, css as _css} from 'atomico'";
+
+    // return the customized config
+    return config;
+  },
+};

.storybook/package.json

@@ -1,3 +1 @@
-{
-  "type": "commonjs"
-}
+{}

README.md

@@ -1,6 +1,6 @@
 # Starstuff Components
 
-Minimalistic React Components Library
+Minimalistic Web Components Library
 
 ## Philosophy
 
@@ -22,26 +22,20 @@ All components can be access via named exports on the `starstuff-components` pac
 
 ### Card
 
-```js
-import { Card } from "starstuff-components";
-
-const CardExample = () => <Card />;
+```html
+<starstuff-card>
+  <!-- Card Content -->
+</starstuff-card>
 ```
 
 ### Hyperbutton
 
-```js
-import { Hyperbutton } from "starstuff-components";
-
-const HyperbuttonExample = () => (
-  <Hyperbutton href="#">Test Hyperbutton</Hyperbutton>
-);
+```html
+<starstuff-hyperbutton href="#">Test Hyperbutton</starstuff-hyperbutton>
 ```
 
 ### Hyperlink
 
-```js
-import { Hyperlink } from "starstuff-components";
-
-const HyperlinkExample = () => <Hyperlink href="#">Test Hyperlink</Hyperlink>;
+```html
+<starstuff-hyperlink href="#">Test Hyperlink</starstuff-hyperlink>;
 ```

jest.config.cjs

@@ -12,7 +12,6 @@ module.exports = {
     {
       displayName: "test",
       preset: "ts-jest/presets/default-esm",
-      snapshotSerializers: ["@emotion/jest/serializer"],
       testPathIgnorePatterns,
       collectCoverage: true,
       globals: {
@@ -23,6 +22,8 @@ module.exports = {
       moduleNameMapper: {
         "^(\\.{1,2}/.*)\\.js$": "$1",
       },
+      testEnvironment: "jsdom",
+      snapshotSerializers: ["jest-serializer-html"],
     },
     {
       displayName: "lint:prettier",