Polish the example app (#10)

- Adds some styling to the example app - Adds some media for the docs - Adjust package name
gigs · Mar 6, 2024 · b15c2e0 · b15c2e0
1 parent cce2cd9
commit b15c2e0
Show file tree

Hide file tree

Showing 19 changed files with 4,185 additions and 7,537 deletions.
diff --git a/.github/banner.png b/.github/banner.png
diff --git a/.github/porting-embed-demo.mp4 b/.github/porting-embed-demo.mp4
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -40,16 +40,6 @@ npm run storybook
 
 The [storybook](/storybook/) is used to develop the UI of an embed without having to initialize it. Changes to the library's JavaScript code will be reflected in Storybook without a rebuild.
 
-## Publishing to npm
-
-We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc.
-
-To publish new versions, run the following:
-
-```sh
-npm run release
-```
-
 ## Linting
 
 Make sure your code passes TypeScript and ESLint. Run the following to verify:

diff --git a/README.md b/README.md
@@ -1,14 +1,16 @@
 # Gigs Embeds for JavaScript (Web)
 
+<img width="600" height="390" src=".github/banner.png" alt="Gigs Embeds">
+
 Embeddable prebuilt and highly customizable UI components to use in your own JavaScript apps for web.
 
 > [!NOTE]
-> This library is currently under development.
+> This is currently a v0.x release. Anything may change at any time.
 
 ## Installation
 
 ```sh
-npm install @gigs/gigs-embeds-js
+npm install @gigscom/embeds-js
 ```
 
 ## Getting started

diff --git a/docs/porting-embed.md b/docs/porting-embed.md
@@ -14,6 +14,10 @@ Each step will only be shown if the porting requires these fields, and if the us
 > [!IMPORTANT]  
 > The Porting Embed currently only supports portings in the status of `informationRequired`.
 
+## Demo
+
+https://github.com/gigs/gigs-embeds-js/assets/4227520/0f51d5e1-ff03-4b85-b661-8f4851b63d49
+
 ## Minimal example
 
 The embed mounts into an element on your site. Add a `<div id="portingEmbed">` to your site wherever the embed should be mounted to.
@@ -29,9 +33,9 @@ You have to specify your Gigs Project ID when initializing the embed.
 
 ```js
 // Optional. Adds styling to the embed.
-import '@gigs/gigs-embeds-js/style.css'
+import '@gigscom/embeds-js/style.css'
 
-import { PortingEmbed } from '@gigs/gigs-embeds-js'
+import { PortingEmbed } from '@gigscom/embeds-js'
 
 // Fetch a new ConnectSession from an internal API endpoint, or any other way
 // to obtain a new ConnectSession.
@@ -48,7 +52,13 @@ embed.on('completed', ({ porting }) => {
 })
 ```
 
+## Example app
+
+See [`src/PortingEmbedExample.tsx`](/src/PortingEmbedExample.tsx) for a full example implementation.
+
+- [Demo](#demo)
 - [Minimal example](#minimal-example)
+- [Example app](#example-app)
 - [Usage](#usage)
   - [Show a loading spinner while the embed is initializing](#show-a-loading-spinner-while-the-embed-is-initializing)
   - [Show UI depending on the current step](#show-ui-depending-on-the-current-step)
@@ -118,7 +128,7 @@ See also:
 The embed ships with default styles which you can import in your app.
 
 ```js
-import '@gigs/gigs-embeds-js/style.css'
+import '@gigscom/embeds-js/style.css'
 ```
 
 ### CSS customization

diff --git a/index.html b/index.html
@@ -4,11 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Gigs Embeds Playground</title>
   </head>
-  <body>
+  <body class="bg-gray-50">
     <div id="root"></div>
-    <div id="welcomeEmbed"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/lib/styles/styles.css b/lib/styles/styles.css
@@ -1,5 +1,7 @@
 @import './preflight.css';
 
+@config "../tailwind.config.js";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/lib/tailwind.config.js b/lib/tailwind.config.js
@@ -0,0 +1,13 @@
+import forms from '@tailwindcss/forms'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [forms({ strategy: 'class' })],
+}