Bump versions

.gitignore

@@ -4,4 +4,5 @@ node_modules
 .pnp.*
 **/dist/*
 **/.turbo/*
-**/coverage/*
+**/coverage/*
+*storybook.log

.storybook/main.js

@@ -6,5 +6,9 @@ module.exports = {
       title: 'Svelte',
       url: 'http://localhost:6006',
     },
+    vue: {
+      title: 'Vue',
+      url: 'http://localhost:6007',
+    },
   },
 }

README.md

@@ -4,10 +4,19 @@
 
 **Teiler** is an open source library that simplifies the creation of stylish components for various frameworks.
 
-Currently in the **alpha phase**, the library is actively being developed and improved. It currently provides support solely for Svelte CSR (Client-Side Rendering).
+Currently in the **alpha phase**, the library is actively being developed and improved.
 
 Join our community on our [Discord Server](https://discord.gg/J6Sv9sQ64t) to stay informed about the latest developments, exchange ideas, and connect with fellow developers. We are continuously working on expanding our support to include more frameworks, allowing developers to effortlessly create components across various environments. 
 
+## Features
+
+- 🧰 **Multiple** frameworks support
+- 🪡 **Patterns system** for UI libraries
+- 🚉 **Server-Side Rendering** (SSR)*
+- ⚡ **Babel** not required
+
+\* Not all frameworks, more details [here](#frameworks)
+
 ### Example
 
 ```typescript
@@ -37,92 +46,16 @@ const Button = component.button<{
 
 These are the frameworks we are currently working on and planning to support in the future.
 
-| Framework     | CSR   | SSR  |
-| :---          | :---- | :--- |
-| Svelte        | ✓     | ✕    |
-| React         | ✕     | ✕    |
-| VueJS         | ✕     | ✕    |
-| SolidJS       | ✕     | ✕    |
-
-*CSR - Client Side Rendering*\
-*SSR - Server Side Rendering*
-
-## Keyframes
-
-```typescript
-import { component, keyframes } from '@teiler/svelte'
-
-const bouncing = keyframes`
-  from, 20%, 53%, 80%, to {
-    transform: translate3d(0,0,0);
-  }
-
-  40%, 43% {
-    transform: translate3d(0, -40px, 0);
-  }
-
-  70% {
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    transform: translate3d(0,-4px,0);
-  }
-`
-
-const Button = component.button<{}>`
-  animation: ${bouncing} 1s ease infinite;
-  display: inline-block;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  line-height: 1.5rem;
-  background: transparent;
-  box-shadow: 0 0 0 3px #CBCBCB inset;
-`
-```
-
-## Theme
-
-Example how to use themes.
-
-```typescript
-// Main component inside application (`App.svelte`)
-<script context="module" lang="ts">
-  export type CustomTheme = {
-    fontColor: string,
-  }
-</script>
-<script lang="ts">
-  import ThemeProvider from '../src/ThemeProvider.svelte'
-  import { Component } from './theme'
-
-  export let theme: CustomTheme = {
-    fontColor: 'red',
-  }
-</script>
+| Framework     | CSR   | SSR  | More details |
+| :---          | :---- | :--- | :----------- |
+| Svelte v4     | ✓     | ✕    | [README](https://github.com/nerdslabs/teiler/blob/master/packages/svelte/README.md) |
+| VueJS         | ✓     | ✓    | [README](https://github.com/nerdslabs/teiler/blob/master/packages/vue/README.md) |
+| SolidJS       | ✕     | ✕    | ---          |
+| React         | ✕     | ✕    | ---          |
 
-<ThemeProvider {theme}>
-  <Component>Some test text</Component>
-</ThemeProvider>
-
-// Component with theme usage
-import { component } from '@teiler/svelte'
-
-const Component = component.div`
-  color: ${({ theme }) => theme.fontColor};
-`
-
-export { Component }
-```
-
-To add typing for Typescript applications you need to add `extend` inside declaration file (`d.ts`)
-```typescript
-import type { CustomTheme } from "./App.svelte";
-
-declare module '@teiler/core' {
-  export interface DefaultTheme extends CustomTheme {}
-}
-```
+> [!NOTE]
+> CSR - Client Side Rendering*\
+> SSR - Server Side Rendering*
 
 ## Sew a Pattern
 
@@ -148,7 +81,7 @@ export default ButtonPattern
 // Usage of Pattern
 import { ButtonPattern } from 'some-uikit-library'
 import { sew } from '@teiler/core'
-import { createComponent } from '@teiler/svelte'
+import { createComponent } from '@teiler/framework'
 
 const Button = sew(ButtonPattern, createComponent)
 

package.json

@@ -15,6 +15,7 @@
     "wait": "wait-on tcp:6006 && wait-on tcp:6007"
   },
   "devDependencies": {
+    "@changesets/changelog-github": "^0.5.0",
     "@storybook/html-vite": "^8.1.1",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",

packages/core/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @teiler/core
 
+## 0.0.22
+
+### Patch Changes
+
+- Make `theme` in `Arguments` optional
+
+- Fix `compile` function when property is object
+
+- Fix typings
+
 ## 0.0.21
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teiler/core",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "repository": {
     "type": "git",
     "url": "github:nerdslabs/teiler"

packages/svelte/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @teiler/svelte
 
+## 0.0.22
+
+### Patch Changes
+
+- Add tests
+
+- Updated dependencies []:
+  - @teiler/core@0.0.22
+
 ## 0.0.21
 
 ### Patch Changes

packages/svelte/README.md

@@ -1 +1,142 @@
-# svelte
+# Teiler 🪡 (ˈteɪlər - tailor)
+
+![Discord](https://img.shields.io/discord/1125416414069661698?logo=discord&link=https%3A%2F%2Fdiscord.gg%2FJ6Sv9sQ64t)
+
+**Teiler** is an open source library that simplifies the creation of stylish components for various frameworks.
+
+Currently in the **alpha phase**, the library is actively being developed and improved. It currently provides support solely for Svelte CSR (Client-Side Rendering).
+
+Join our community on our [Discord Server](https://discord.gg/J6Sv9sQ64t) to stay informed about the latest developments, exchange ideas, and connect with fellow developers. We are continuously working on expanding our support to include more frameworks, allowing developers to effortlessly create components across various environments. 
+
+### Example
+
+```typescript
+import { component } from '@teiler/svelte'
+
+const Button = component.button<{
+  _primary: boolean
+}>`
+  display: inline-block;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  line-height: 1.5rem;
+  background: transparent;
+  box-shadow: 0 0 0 3px #CBCBCB inset;
+
+  ${({ _primary }) =>
+    _primary && `
+      color: #fff;
+      box-shadow: none;
+      background: #CBCBCB;
+    `
+  }
+`
+```
+
+## Keyframes
+
+```typescript
+import { component, keyframes } from '@teiler/svelte'
+
+const bouncing = keyframes`
+  from, 20%, 53%, 80%, to {
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    transform: translate3d(0, -40px, 0);
+  }
+
+  70% {
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    transform: translate3d(0,-4px,0);
+  }
+`
+
+const Button = component.button<{}>`
+  animation: ${bouncing} 1s ease infinite;
+  display: inline-block;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  line-height: 1.5rem;
+  background: transparent;
+  box-shadow: 0 0 0 3px #CBCBCB inset;
+`
+```
+
+## Theme
+
+Example how to use themes.
+
+```typescript
+// Main component inside application (`App.svelte`)
+<script context="module" lang="ts">
+  export type CustomTheme = {
+    fontColor: string,
+  }
+</script>
+<script lang="ts">
+  import { ThemeProvider } from '@teiler/svelte'
+  import { Component } from './theme'
+
+  export let theme: CustomTheme = {
+    fontColor: 'red',
+  }
+</script>
+
+<ThemeProvider {theme}>
+  <Component>Some test text</Component>
+</ThemeProvider>
+
+// Component with theme usage
+import { component } from '@teiler/svelte'
+
+const Component = component.div`
+  color: ${({ theme }) => theme.fontColor};
+`
+
+export { Component }
+```
+
+To add typing for Typescript applications you need to add `extend` inside declaration file (`d.ts`)
+```typescript
+import type { CustomTheme } from "./App.svelte";
+
+declare module '@teiler/core' {
+  export interface DefaultTheme extends CustomTheme {}
+}
+```
+
+## Sew a Pattern
+
+This tool simplifies the creation of consistent and reusable visual styles for components across various web frameworks. It provides a pattern-based approach, where patterns serve as blueprints for defining the visual style of components.
+
+### Example
+
+```typescript
+// Pattern file in ui kit library
+import { pattern } from '@teiler/core'
+
+const ButtonPattern = pattern.button`
+  display: inline-block;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  line-height: 1.5rem;
+  background: transparent;
+  box-shadow: 0 0 0 3px #CBCBCB inset;
+`
+
+export default ButtonPattern
+
+// Usage of Pattern
+import { ButtonPattern } from 'some-uikit-library'
+import { sew } from '@teiler/core'
+import { createComponent } from '@teiler/svelte'
+
+const Button = sew(ButtonPattern, createComponent)
+
+export default Button
+```

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teiler/svelte",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "repository": {
     "type": "git",
     "url": "github:nerdslabs/teiler"
@@ -24,7 +24,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@teiler/core": "0.0.21",
+    "@teiler/core": "0.0.22",
     "svelte": "^4.2.10"
   },
   "devDependencies": {

packages/vue/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @teiler/vue
+
+## 0.0.1
+
+### Patch Changes
+
+- Vue support

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teiler/vue",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "repository": {
     "type": "git",
     "url": "github:nerdslabs/teiler"
@@ -24,7 +24,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@teiler/core": "0.0.21"
+    "@teiler/core": "0.0.22"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.4",