feat: update jambonz-ui:0.0.20 (#53)

* feat: update jambonz-ui:0.0.20

* feat: update jambonz-ui:0.0.20

* feat: update @jambonz/ui-kit version

* fixes for new ui-kit

* update references to jambonz-ui

---------

Co-authored-by: Quan HL <quanluuhoang8@gmail.com>
Co-authored-by: Dave Horton <daveh@beachdognet.com>

markdown/docs/jambonz-ui/components.md

@@ -71,7 +71,7 @@ All of these accept the same type of props with the exception of `M`, `MS` and `
 You can import available components from the package into your jambonz app JS.
 
 ```jsx
-import { ButtonGroup, Button, Icon } from "jambonz-ui";
+import { ButtonGroup, Button, Icon } from "@jambonz/ui-kit";
 
 function MyComponent() {
   return (
@@ -101,7 +101,7 @@ Using the `Link` prop with [react-router-dom](https://reactrouter.com/docs/en/v6
 
 ```jsx
 import { Link } from "react-router-dom";
-import { Button } from "jambonz-ui";
+import { Button } from "@jambonz/ui-kit";
 
 function MyComponent() {
   return (
@@ -116,7 +116,7 @@ Using the `Link` prop with [next/link](https://nextjs.org/docs/api-reference/nex
 
 ```jsx
 import Link from "next/link";
-import { Button } from "jambonz-ui";
+import { Button } from "@jambonz/ui-kit";
 
 function MyComponent() {
   return (
@@ -173,7 +173,7 @@ Then we can use these icons both `inline` and with the `Icon` component for styl
 
 ```jsx
 import { Icons } from "./my-icons";
-import { Icon } from "jambonz-ui";
+import { Icon } from "@jambonz/ui-kit";
 
 function MyComponent() {
   return (

markdown/docs/jambonz-ui/fonts-and-icons.md

@@ -46,7 +46,7 @@ script in the `package.json` file. We are also opting to ignore the `fonts` dire
 ```json
 {
   "scripts": {
-    "postinstall": "rm -rf public/fonts && cp -R ./node_modules/jambonz-ui/public/fonts ./public/fonts"
+    "postinstall": "rm -rf public/fonts && cp -R ./node_modules/@jambonz/ui-kit/public/fonts ./public/fonts"
   }
 }
 ```
@@ -63,7 +63,7 @@ Example of dev server config:
 module.exports = {
   // ...
   devServer: {
-    static: [path.resolve(__dirname, 'node_modules/jambonz-ui/public')],
+    static: [path.resolve(__dirname, 'node_modules/@jambonz/ui-kit/public')],
   },
 };
 ```
@@ -77,7 +77,7 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: path.resolve(__dirname, 'node_modules/jambonz-ui/public'),
+          from: path.resolve(__dirname, 'node_modules/@jambonz/ui-kit/public'),
           // If you would like to omit the CSS/JS and only copy fonts
           globOptions: {
             ignore: ['**/css/**', '**/js/**'],

markdown/docs/jambonz-ui/index.md

@@ -21,7 +21,7 @@ View the [storybook](https://jambonz-ui.vercel.app/).
 Installing the package is easy. You can use any typical package manager for frontend stacks.
 
 ```shell
-npm install jambonz-ui # or yarn add jambonz-ui
+npm install @jambonz/ui-kit # or yarn add @jambonz/ui-kit
 ```
 
 ##### General usage

markdown/docs/jambonz-ui/styles.md

@@ -77,10 +77,10 @@ already using SASS for your jambonz app the recommendation would be to just load
 ```scss
 // This loads the entire SASS lib
 // You should use this in your root SASS entry point
-@use 'jambonz-ui/src/styles/index';
+@use '@jambonz/ui-kit/src/styles/index';
 
 // In your local SASS modules you can use the vars and mixins from the UI library
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/styles/vars' as ui-vars;
 
 .some-thing {
   color: ui-vars.$jambonz;

package-lock.json

@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "jambonz-ui": "^0.0.17",
+        "@jambonz/ui-kit": "^0.0.21",
         "nanoid": "^3.1.22",
         "next": "^12.1.4",
         "next-plugin-preact": "^3.0.6",
@@ -392,6 +392,19 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@jambonz/ui-kit": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.21.tgz",
+      "integrity": "sha512-tv0sPhzxS/ctJbgUxLVNY+7IjJb3OAhqrdYpmeW3lmEHi7+sHxpO2oMjaVTPFCN4vYh+QzyzT4eLQjpEUDd6sA==",
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.2",
+        "react-dom": ">=17.0.2",
+        "react-feather": ">=2.0.9"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -3888,19 +3901,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/jambonz-ui": {
-      "version": "0.0.17",
-      "resolved": "https://registry.npmjs.org/jambonz-ui/-/jambonz-ui-0.0.17.tgz",
-      "integrity": "sha512-zu3gDhqKMFEhwyICppgLlA9EMpps9VmGX/O6QcRdK5joluejlbFggsfgE6rnIW7V1NaKsuGlm3rLDbfTnOByww==",
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "react": ">=17.0.2",
-        "react-dom": ">=17.0.2",
-        "react-feather": ">=2.0.9"
-      }
-    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -7323,6 +7323,12 @@
       "version": "1.2.1",
       "dev": true
     },
+    "@jambonz/ui-kit": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.21.tgz",
+      "integrity": "sha512-tv0sPhzxS/ctJbgUxLVNY+7IjJb3OAhqrdYpmeW3lmEHi7+sHxpO2oMjaVTPFCN4vYh+QzyzT4eLQjpEUDd6sA==",
+      "requires": {}
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -9586,12 +9592,6 @@
       "version": "0.1.2",
       "dev": true
     },
-    "jambonz-ui": {
-      "version": "0.0.17",
-      "resolved": "https://registry.npmjs.org/jambonz-ui/-/jambonz-ui-0.0.17.tgz",
-      "integrity": "sha512-zu3gDhqKMFEhwyICppgLlA9EMpps9VmGX/O6QcRdK5joluejlbFggsfgE6rnIW7V1NaKsuGlm3rLDbfTnOByww==",
-      "requires": {}
-    },
     "jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "prepare": "husky install",
-    "postinstall": "rm -rf public/fonts && cp -R ./node_modules/jambonz-ui/public/fonts ./public/fonts",
+    "postinstall": "rm -rf public/fonts && cp -R ./node_modules/@jambonz/ui-kit/public/fonts ./public/fonts",
     "dev": "next",
     "lint": "next lint",
     "start": "next start",
@@ -24,7 +24,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "jambonz-ui": "^0.0.17",
+    "@jambonz/ui-kit": "^0.0.21",
     "nanoid": "^3.1.22",
     "next": "^12.1.4",
     "next-plugin-preact": "^3.0.6",

pages/index.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 import { nanoid } from 'nanoid';
 import { useState, useEffect, useRef } from 'react';
-import { Icon, Button, H4, H3, H2, P, MS, classNames, IconGroup } from 'jambonz-ui';
+import { Icon, Button, H4, H3, H2, P, MS, classNames, IconGroup } from '@jambonz/ui-kit';
 
 import { getData } from '../src/lib/data';
 import { Icons } from '../src/components/icons';

pages/pricing.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 import { nanoid } from 'nanoid';
-import { Icon, Button, H2, P } from 'jambonz-ui';
+import { Icon, Button, H2, P } from '@jambonz/ui-kit';
 
 import { getData } from '../src/lib/data';
 import { Icons } from '../src/components/icons';

pages/regions.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 
 import { nanoid } from 'nanoid';
-import { Icon, P } from 'jambonz-ui';
+import { Icon, P } from '@jambonz/ui-kit';
 
 import { getData } from '../src/lib/data';
 import { Icons } from '../src/components/icons';

pages/why.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 import { nanoid } from 'nanoid';
-import { Icon, Button, H3, H2, P, ButtonGroup } from 'jambonz-ui';
+import { Icon, Button, H3, H2, P, ButtonGroup } from '@jambonz/ui-kit';
 
 import { getData } from '../src/lib/data';
 import { Icons } from '../src/components/icons';

src/components/footer.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 import { nanoid } from 'nanoid';
-import { Button, classNames } from 'jambonz-ui';
+import { Button, classNames } from '@jambonz/ui-kit';
 
 import { rSlash } from './utils';
 import { useActiveNavi } from './hooks';

src/components/layout.js

@@ -2,7 +2,7 @@ import Head from 'next/head';
 import Link from 'next/link';
 
 import { nanoid } from 'nanoid';
-import { classNames, H1, H2, H3, Button } from 'jambonz-ui';
+import { classNames, H1, H2, H3, Button } from '@jambonz/ui-kit';
 
 import Navi from './navi';
 import Footer from './footer';

src/components/markdown.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 
 import { useState } from 'react';
 import { nanoid } from 'nanoid';
-import { classNames, Icon } from 'jambonz-ui';
+import { classNames, Icon } from '@jambonz/ui-kit';
 
 import { Icons } from './icons';
 import { rSlash } from './utils';

src/components/navi.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 import { nanoid } from 'nanoid';
 import { useState } from 'react';
-import { Button, Icon, classNames } from 'jambonz-ui';
+import { Button, Icon, classNames } from '@jambonz/ui-kit';
 
 import { Icons } from './icons';
 import { rSlash } from './utils';

src/styles/_footer.scss

@@ -1,4 +1,4 @@
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
 
 .foot {
   padding: 96px 0;

src/styles/_layout.scss

@@ -1,8 +1,8 @@
 @use 'vars';
 @use 'mixins';
 
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
-@use 'jambonz-ui/src/styles/mixins' as ui-mixins;
+@use '@jambonz/ui-kit/src/styles/mixins' as ui-mixins;
 
 /******************************************************************************
  * Extend jambonz-ui classes

src/styles/_markdown.scss

@@ -1,5 +1,5 @@
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
-@use 'jambonz-ui/src/styles/mixins' as ui-mixins;
+@use '@jambonz/ui-kit/src/styles/mixins' as ui-mixins;
 
 .markdown {
   padding-top: 64px;

src/styles/_mixins.scss

@@ -1,4 +1,4 @@
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
 
 @mixin cta() {
   margin-top: 96px;

src/styles/_navi.scss

@@ -1,6 +1,6 @@
 @use 'vars';
 
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
 
 .navi {
   height: vars.$navi-height;

src/styles/_text-layout.scss

@@ -1,5 +1,5 @@
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
-@use 'jambonz-ui/src/styles/mixins' as ui-mixins;
+@use '@jambonz/ui-kit/src/styles/mixins' as ui-mixins;
 
 .text-layout {
   max-width: ui-vars.$width-tablet-2;

src/styles/global.scss

@@ -1,4 +1,4 @@
-@use 'jambonz-ui/src/styles/index';
+@use '@jambonz/ui-kit/src/styles/index';
 
 @use 'layout';
 @use 'text-layout';

src/styles/pages/_home.scss

@@ -1,6 +1,6 @@
 @use '../mixins';
 
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
 
 /******************************************************************************
  * App screenshot

src/styles/pages/_pricing.scss

@@ -1,6 +1,6 @@
 @use '../mixins';
 
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
 
 /******************************************************************************
  * Pricing structure

src/styles/pages/_regions.scss

@@ -1,6 +1,6 @@
 @use '../mixins';
 
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
 
 /******************************************************************************
  * Regions

src/styles/pages/_why.scss

@@ -1,6 +1,6 @@
 @use '../mixins';
 
-@use 'jambonz-ui/src/styles/vars' as ui-vars;
+@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
 
 /******************************************************************************
  * Jambonz Facts