Complete redesign

Author: mcjazzyfunky

.prettierignore

@@ -1 +0,0 @@
-README.md

.prettierrc

@@ -4,4 +4,4 @@
   "semi": false,
   "singleQuote": true,
   "arrow-parens": "avoid"
-}
+}

.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
-  stories: ['../src/stories/**/*.stories.js*'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  stories: [
+    '../src/stories/**/*.stories.mdx',
+    '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/stories/index.stories.tsx'
+  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials']
 }

.storybook/manager.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

.storybook/preview.js

@@ -18,7 +18,14 @@ module.exports = ({ config }) => {
     __dirname,
     '../src/main/js-elements-hooks.ts'
   )
-
+  alias['js-elements/types$'] = path.resolve(
+    __dirname,
+    '../src/main/js-elements-types.ts'
+  )
+  alias['js-elements/utils$'] = path.resolve(
+    __dirname,
+    '../src/main/js-elements-utils.ts'
+  )
   config.resolve.alias = alias
   config.resolve.extensions.push('.ts', '.tsx')
 

.storybook/webpack.config.js

@@ -9,83 +9,93 @@ and btw: It is currently not meant to ever be used in production.
 
 ## Examples
 
-### Stateless component (not a real API difference to stateful components - just a pattern)
+### Example 1
 
 ```jsx
-import { component, h, prop, render } from 'js-elements'
-
-const SayHello = component('say-hello', {
-  props: {
-    salutation: prop.str.opt('Hello'),
-    name: prop.str.opt('World')
+import { element, h, prop, render } from 'js-elements'
+
+@element('say-hello')
+class SayHello {
+  @prop()
+  salutation = 'Hello'
+
+  @prop()
+  name = 'World'
+
+  static main(self) {
+    return () => (
+      <div>
+        {self.salutation}, {self.name}!
+      </div>
+    )
   }
-})((c, props) => {
-  return () => (
-    <div>
-      {props.salutation}, {props.name}!
-    </div>
-  )
-})
+}
 
 render(<SayHello salutation="Hi" name="Jane Doe" />, '#app')
 ```
 
-### Stateful component
+### Example 2
 
 ```jsx
-import { component, h, prop, render } from 'js-elements'
-import { useEffect, useState, useStyles } from 'js-elements/hooks'
+import { element, h, prop, render } from 'js-elements'
+import { useEffect, useOnMount, useState, useStyles } from 'js-elements/hooks'
 import counterStyles from './counter.css'
 
-const Counter = component('demo-counter', {
-  props: {
-    initialCount: prop.num.opt(0),
-    label: prop.str.opt('Counter')
+@element('demo-counter')
+class Counter {
+  @prop()
+  initialCount = 0
+
+  @prop()
+  label = 'Counter'
+
+  static main(self) {
+    const [state, setState] = useState({
+      count: props.initialCount
+    })
+
+    const onClick = () => setState('count', (it) => it + 1)
+
+    useStyles(counterStyles)
+
+    useOnMount(() => {
+      console.log(`"${self.label}" has been mounted`)
+
+      return () => console.log(`Unmounting "${self.label}"`)
+    })
+
+    useEffect(
+      () => console.log(`Value of "${self.label}": ${state.count}`),
+      () => [state.count]
+    )
+
+    return () => (
+      <div class="counter">
+        <label class="label">{self.label}: </label>
+        <button class="button" onClick={onClick}>
+          {state.count}
+        </button>
+      </div>
+    )
   }
-})((c, props) => {
-  const [state, setState] = useState(c, {
-    count: props.initialCount
-  })
-
-  const onClick = () => setState('count', it => it + 1)
-
-  useStyles(c, counterStyles)
-  
-  useOnMount(c, () => {
-    console.log(`"${props.label}" has been mounted`)
-  
-    return () => console.log(`Unmounting "${props.label}"`)
-  })
-
-  useEffect(c)(
-    () => console.log(`Value of "${props.label}": ${count}`),
-    () => [count]
-  )
-
-  return () => (
-    <div class="counter">
-      <label class="label">{props.label}: </label>
-      <button class="button" onClick={onClick}>
-        {count}
-      </button>
-    </div>
-  )
-})
+}
 
 render(<Counter />, '#app')
 ```
 
-_js-elements_ supports so-called "hooks" which are
-functions similar to React hooks (but without all the magic).
-All of those "hooks" can be written completely in userland
-(means there are no such things like "core hooks").
+### Example 3
 
 ```jsx
-import { component, h } from 'js-elements'
+import { element, h, render } from 'js-elements'
 import { useTime } from 'js-elements/hooks'
 
-const Clock = component('demo-clock', (c) => {
-  const getTime = useTime(c, 1000, () => new Date().toLocaleTimeString())
-  return () => <div>Current time: {getTime()}</div>
-})
+@element('demo-clock')
+class DemoClock {
+  static main() {
+    const getTime = useTime(1000, () => new Date().toLocaleTimeString())
+    return () => <div>Current time: {getTime()}</div>
+  }
+}
+
+render(<DemoClock />, '#app')
 ```