docs: updated readme and stories

.storybook/preview.js

@@ -9,7 +9,7 @@ export const parameters = {
     layout: 'padded',
     options: {
         storySort: {
-            order: ['Introduction', 'Data Entry', ['Coded Text', ['Introduction']], 'Utility'],
+            order: ['Introduction', 'Getting Started', 'Data Entry', ['Coded Text', ['Introduction']], 'Utility'],
         }
     }
 

README.md

@@ -2,27 +2,11 @@
 
 # Medblocks UI
 
-Web Components for rapid development of openEHR systems.
+Web Components for rapid development of openEHR and FHIR systems.
 
 [![Medblocks UI Web components demo](https://img.youtube.com/vi/ng9lkQKa2KE/0.jpg)](https://www.youtube.com/watch?v=ng9lkQKa2KE)
 
-More more information read the [storybook documentation](https://medblocks-ui.vercel.app/).
-## Installation
-
-```bash
-npm i medblocks-ui
-```
-
-## Usage
-
-```html
-<script type="module">
-  import '@shoelace-style/shoelace/dist/themes/base.css'; //Customize this to change the theme
-  import 'medblocks-ui/medblocks.js';
-</script>
-
-<mb-form></mb-form>
-```
+More more information read the [documentation](https://medblocks-ui.vercel.app/).
 
 ## Testing with Web Test Runner
 

stories/getting-started.stories.mdx

@@ -0,0 +1,86 @@
+import { Meta } from '@web/storybook-prebuilt/addon-docs/blocks';
+
+<Meta title="Getting Started" />
+
+# Getting started
+
+Medblocks UI is packaged as an ES Module and needs a modern bundler to work with your framework of choice. [Vite](https://vitejs.dev/) is blazing fast, and we'll be using that in this guide. [Snowpack](https://www.snowpack.dev/) is another alternative.
+
+```
+npm init @vitejs/app
+```
+Give your project a name
+You are free to choose any framework, but for this tutorial we'll cover [Svelte](https://svelte.dev/) and [Vue](https://vuejs.org/) since they have excellent [support for web components](https://custom-elements-everywhere.com/). So it is recommended that you choose one of those.
+
+`cd` into the directory you just created once vite has finished the setup and do `npm install`.
+
+Install Medblocks UI:
+```
+npm install medblocks-ui
+```
+
+The next steps will look a little different based on the framework you choose, but it should be mostly the same.
+
+## Svelte
+
+Navigate to `src/App.svelte`
+
+Include the following in the `<script>`
+```jsx
+<script>
+    ...other content
+    import Counter from './lib/Counter.svelte'
+
+    import 'medblocks-ui/dist/medblocks'
+    import '@shoelace-style/shoelace/dist/themes/base.css'
+</script>
+```
+
+Now in the template let's include an `mb-input` element under `main`
+
+```jsx
+<main>
+    <mb-input label="Hello world!"></mb-input>
+    .
+    .
+    .
+    ...other content
+</main>
+```
+and it should render an input like so:
+
+<mb-input label="Hello world!"></mb-input>
+
+The alignment may be different because of the default css, but once you fix that, you're good to go!
+
+## Vue
+
+Navigate to `src/App.vue`
+
+Include the following in the `<script>`
+```jsx
+<script>
+    import 'medblocks-ui/dist/medblocks'
+    import '@shoelace-style/shoelace/dist/themes/base.css'
+
+    import { defineComponent } from 'vue'
+    ...other content
+</script>
+```
+
+Now in the template let's include an `mb-input` element in the `template`
+
+```jsx
+<template>
+    <mb-input label="Hello world!" :data.prop="`Property bound in Vue`"></mb-input>
+    .
+    .
+    .
+    ...other content
+</template>
+```
+and it should render an input like so:
+
+<mb-input label="Hello world!" data="Property bound in Vue"></mb-input>
+
+The alignment may be different because of the default css, but once you fix that, you're good to go!

stories/medblocks.stories.mdx

@@ -6,90 +6,51 @@ import { Meta, Story, Canvas } from '@web/storybook-prebuilt/addon-docs/blocks';
 
 # Medblocks UI
 
-Medblocks UI is a set of web components to be used for data capture in helathcare applications. It primarily supports converting openEHR templates into web components using the [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=tornadoalert.medblocks-ui).
+Medblocks UI is a set of web components to be used for data capture in helathcare applications. It primarily supports converting openEHR templates into web components using the [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=tornadoalert.medblocks-ui). There is experimental support for FHIR Resources. 
 
 ## Installation
 
-For the time being, we recommend that you start with the open-wc and lit-element application to get started with web components.
-
-```
-npm init @open-wc
-```
-## Installation
-
-For the time being, we recommend that you start with the open-wc application to get started with web components.
-
-```
-npm init @open-wc
-```
-
-Select Application, and then install medblocks-ui
-
-```
-npm install medblocks-ui
-```
-## Installation
-
-For the time being, we recommend that you start with the open-wc application to use these web components. Documentation for other frameworks will be added soon.
-
-```
-npm init @open-wc
-```
-
-Select "Application", and select other features that you want. Then install medblocks-ui:
-
 ```
 npm install medblocks-ui
 ```
 
-
-
 ## Concepts
 
-All components are built on the [web components standard](https://developer.mozilla.org/en-US/docs/Web/Web_Components) using [Lit](https://lit.dev/). They are published using the [open-wc guidelines](https://open-wc.org/) and are published as modules compiled for ES2015. You will need to include polyfills and compile it down into bundles before using it in your projects.
+All components are built on the [web components standard](https://developer.mozilla.org/en-US/docs/Web/Web_Components) using [Lit](https://lit.dev/). They are published using the [open-wc guidelines](https://open-wc.org/) and are published as ES modules. You will need to include polyfills, compile it and make transformations before using it in your projects. Look at the [getting started](?path=/story/getting-started--page) guide for more information.
 
-You can use web components in any framework that [supports it](https://custom-elements-everywhere.com/). React is well known to not support web components too well. However, there is a work around using [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react). But as mentioned above, starting with an open-wc application will is the fastest way to get up and running.
+You can use web components in any framework that [supports it](https://custom-elements-everywhere.com/). React is well known to not support web components too well. However, there is a work around using [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react).
 
-Medblocks UI consists of three parts:
 
+### Importing all
 
-### Form
-
-The `mb-form` component is the most important one, and helps generate data from other components as structured openEHR compositions. There are no external dependencies and you can just import the `mb-form` module into your framework of choice:
+This will import everything that medblocks has to offer. This includes a set of default UI components for each data type build using [Shoelace.style](https://shoelace.style/) and Medblocks Forms.
 
 ```js
-import 'medblocks-ui/dist/form';
-```
-
-or as a named import:
-
-```js
-import MbForm from 'medblocks-ui/dist/form';
+import `@shoelace-style/shoelace/dist/themes/base.css`
+import 'medblocks-ui'
 ```
 
-This will import and register `mb-form` as a custom element.
+You can customize these elements by changing the css variables in the `base.css` file [from shoelace](https://shoelace.style/getting-started/customizing). Note that Medblocks UI components depends on the css file and will NOT work properly without including this.
 
-### Data Entry
+### Cherry-picking
 
-A set of default UI components for each data type build using [Shoelace.style](https://shoelace.style/). To use these components, you will have to import the shoelace base css first and then import all components like so:
+The `mb-form` component is the most important one, and helps generate data from other components as structured openEHR or FHIR compositions. There are no external dependencies and you can just import the `mb-form` module into your framework of choice:
 
 ```js
-import `@shoelace-style/shoelace/dist/themes/base.css`
-import 'medblocks-ui/dist/medblocks'
+import 'medblocks-ui/dist/src/medblocks/form/form.js';
 ```
-
-This will import the `mb-form` component as well. If you plan on cherry-picking components you want to use, you will have to import it from the `src` directory. For example, to import `mb-input`, we need to import the base styles then import like so:
+or for the form with the FHIR plugin:
 
 ```js
-import `@shoelace-style/shoelace/dist/themes/base.css`
-import 'medblocks-ui/dist/src/medblocks/text/input'
+import 'medblocks-ui/dist/src/medblocks/form/fhirForm.js';
 ```
 
-You can customize these elements by changing the css variables in the `base.css` file [from shoelace](https://shoelace.style/getting-started/customizing).
-
-### Utility
+This will import and register `mb-form` or `mb-fhir-form` as a custom element.
 
-A few utility functions and components that help handling data and submitting forms. These will be documented in their own section.
+Similarly for the `mb-input` element:
+```
+import 'medblocks-ui/dist/src/medblocks/text/input.js'
+```
 
 ## How to use this Storybook