Initial refactor of jambonz-ui package library (#39)

* Initial refactor of jambonz-ui package library

* Delete public/fonts directory

* Jambonz UI test-app and some refinements

* next lint

* working on jambonz ui docs

* Update package.json

* Update package.json

* Update package.json

* Create package.json

* typescript

* Update components.tsx

* Update components.tsx

* Update utils.ts

* Update icons.ts

* Update components.tsx

* Update components.tsx

* Update icons.ts

* Update components.tsx

* Update _icons.scss

* Update components.tsx

* Update components.tsx

* fix some thangs and compile all

* wrap up the docs

* Update tsconfig.json

* icons refactor

* refine docs

* update readmes

* update readme

* fix props interfaces and test in TS app

* Update components.tsx

* button up some things

* change package name...

* include readme in pkg dist

* use published package

pages/404.js

@@ -1,6 +1,5 @@
-import Layout from '../src/components/layout';
-import { Hero } from '../src/components/jambonz-ui';
 import { getData } from '../src/lib/data';
+import Layout, { Hero } from '../src/components/layout';
 
 export default function Page404({ data }) {
   return (

pages/_app.js

@@ -1,5 +1,5 @@
 import '../src/styles/global.scss';
 
-export default function App({Component, pageProps}) {
+export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }

pages/docs/[[...slug]].js

@@ -1,6 +1,5 @@
-import { useEffect } from 'react';
-
 import Prism from 'prismjs';
+import { useEffect } from 'react';
 
 import Layout from '../../src/components/layout';
 import Markdown from '../../src/components/markdown';

pages/index.js

@@ -1,10 +1,14 @@
-import { nanoid } from 'nanoid';
-import classNames from 'classnames';
-import { useState, useEffect, useRef } from 'react';
+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 Layout from '../src/components/layout';
-import { Latest, Hero, Icon, Button, H4, H3, H2, P, MS, normalizeSubtext, normalizeSlug, useMobileMedia } from '../src/components/jambonz-ui';
 import { getData } from '../src/lib/data';
+import { Icons } from '../src/components/icons';
+import { useMobileMedia } from '../src/components/hooks';
+import Layout, { Latest, Hero } from '../src/components/layout';
+import { normalizeSubtext, normalizeSlug } from '../src/components/utils';
 
 function Tech({data}) {
   return (
@@ -92,7 +96,7 @@ function Dilemma({data}) {
                 <div className="dilemma__table__title" onClick={() => handleToggle(slug)}>
                   {table.logo ? <img src={table.logo} width="128" height="42" alt="jambonz" /> : <P><strong>{table.title}</strong></P>}
                   <span className="dilemma__table__toggle" >
-                    {isActiveToggle ? <Icon name="ChevronUp" /> : <Icon name="ChevronDown" />}
+                    {isActiveToggle ? <Icons.ChevronUp /> : <Icons.ChevronDown />}
                   </span>
                 </div>
                 <div className={classNames(pointsClasses)}>
@@ -101,10 +105,11 @@ function Dilemma({data}) {
                       'dilemma__table__point': true,
                       [point.icon.toLowerCase()]: true,
                     };
+                    const SvgIcon = Icons[point.icon];
 
                     return (
                       <div key={nanoid()} className={classNames(classes)}>
-                        <Icon name={point.icon} />
+                        <SvgIcon />
                         <MS>
                           {normalizeSubtext(point.text).map((text) => {
                             return <div key={nanoid()}>{text}</div>;
@@ -133,11 +138,16 @@ function BYO({data}) {
         <div className="byo__subtext">
           <H3 className="h5">{data.subtext}</H3>
         </div>
-        <div className="byo__icons icons">
+        <IconGroup className="byo__icons">
           {data.icons.map((icon) => {
-            return <Icon key={nanoid()} name={icon} mainStyle="fill" />;
+            const SvgIcon = Icons[icon];
+            return (
+              <Icon key={nanoid()} mainStyle="fill">
+                <SvgIcon />
+              </Icon>
+            );
           })}
-        </div>
+        </IconGroup>
         <div className="byo__comment">
           <H4 className="h5">
             {/* Use dangerouslySetInnerHTML to render inline link from YAML data */}
@@ -145,7 +155,7 @@ function BYO({data}) {
           </H4>
         </div>
         <div className="byo__cta">
-          <Button href={data.url} subStyle="dark">{data.cta}</Button>
+          <Button as={Link} href={data.url} subStyle="dark">{data.cta}</Button>
         </div>
       </div>
     </section>

pages/jambonz-ui.js

@@ -1,104 +1,100 @@
 import Link from 'next/link';
 
-import Layout from '../src/components/layout';
-import Icons from '../src/components/icons';
-import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon, Hero } from '../src/components/jambonz-ui';
+import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Icon, Button, IconGroup, ButtonGroup } from 'jambonz-ui';
+
 import { getData } from '../src/lib/data';
+import { Icons } from '../src/components/icons';
+import Layout, { Hero } from '../src/components/layout';
 
 export default function JambonzUI({ data }) {
-  const pageData = data['jambonz-ui'];
-
   return (
     <Layout siteData={data.site}>
-      <div className="jambonz-ui">
-        {/* High-level design information */}
-        <Hero subStyle="jambonz-ui" altStyle="pink">
-          <div className="wrap">
-            <H1>
-              <div>Jambonz UI</div>
-              <div>&nbsp;</div>
-            </H1>
-            <H2 className="h5">
-              <div><strong>font</strong></div>
-              <div>Objectivity (os, large family—16 styles)</div>
-              <div>
-                <Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
-                  <a className="i" target="_blank">
-                    <span>design</span>
-                    <Icon name="ExternalLink" />
-                  </a>
-                </Link>
-              </div>
-              <div>
-                <Link href="https://www.fontsquirrel.com/fonts/objectivity">
-                  <a className="i" target="_blank">
-                    <span>specimen</span>
-                    <Icon name="ExternalLink" />
-                  </a>
-                </Link>
-              </div>
-              <div>&nbsp;</div>
-              <div><strong>icons</strong></div>
-              <div>Feather (os, large set—286 icons)</div>
-              <div>
-                <Link href="https://feathericons.com">
-                  <a className="i" target="_blank">
-                    <span>specimen</span>
-                    <Icon name="ExternalLink" />
-                  </a>
-                </Link>
-              </div>
-              <div>
-                <Link href="https://github.com/feathericons/react-feather">
-                  <a className="i" target="_blank">
-                    <span>react-feather</span>
-                    <Icon name="ExternalLink" />
-                  </a>
-                </Link>
-              </div>
-            </H2>
-          </div>
-        </Hero>
-        {/* Show black background style */}
+      {/* High-level design information */}
+      <Hero subStyle="jambonz-ui" altStyle="pink">
+        <div className="wrap">
+          <H1>
+            <div>Jambonz UI</div>
+            <div>&nbsp;</div>
+          </H1>
+          <H2 className="h5">
+            <div><strong>font</strong></div>
+            <div>Objectivity (os, large family—16 styles)</div>
+            <div>
+              <Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
+                <a className="i" target="_blank">
+                  <span>design</span>
+                  <Icons.ExternalLink />
+                </a>
+              </Link>
+            </div>
+            <div>
+              <Link href="https://www.fontsquirrel.com/fonts/objectivity">
+                <a className="i" target="_blank">
+                  <span>specimen</span>
+                  <Icons.ExternalLink />
+                </a>
+              </Link>
+            </div>
+            <div>&nbsp;</div>
+            <div><strong>icons</strong></div>
+            <div>Feather (os, large set—286 icons)</div>
+            <div>
+              <Link href="https://feathericons.com">
+                <a className="i" target="_blank">
+                  <span>specimen</span>
+                  <Icons.ExternalLink />
+                </a>
+              </Link>
+            </div>
+            <div>
+              <Link href="https://github.com/feathericons/react-feather">
+                <a className="i" target="_blank">
+                  <span>react-feather</span>
+                  <Icons.ExternalLink />
+                </a>
+              </Link>
+            </div>
+          </H2>
+        </div>
+      </Hero>
+      <div className="kit-of-parts">
         <div className="pad bg--black">
           <div className="wrap">
             <div className="wrap-text">
-              <H1>H1: {pageData.text}</H1>
+              <H1>H1: {data['jambonz-ui'].text}</H1>
             </div>
           </div>
         </div>
         <div className="wrap">
           <div className="wrap-text pad">
-            <H2>H2: {pageData.text}</H2>
+            <H2>H2: {data['jambonz-ui'].text}</H2>
           </div>
         </div>
-        {/* Show pink background style */}
         <div className="pad bg--pink">
           <div className="wrap">
             <div className="wrap-text">
-              <H3>H3: {pageData.text}</H3>
+              <H3>H3: {data['jambonz-ui'].text}</H3>
             </div>
           </div>
         </div>
         <div className="wrap">
           <div className="wrap-text pad">
-            <H4>H4: {pageData.text}</H4>
+            <H4>H4: {data['jambonz-ui'].text}</H4>
           </div>
         </div>
-        {/* Show grey background style */}
         <div className="pad bg--grey">
           <div className="wrap">
             <div className="wrap-text">
-              <H5>H5: {pageData.text}</H5>
+              <H5>H5: {data['jambonz-ui'].text}</H5>
             </div>
           </div>
         </div>
         <div className="wrap">
           <div className="wrap-text pad">
-            <H6>H6: {pageData.text}</H6>
+            <H6>H6: {data['jambonz-ui'].text}</H6>
           </div>
           <div className="wrap-text pad">
-            <P>P: {pageData.text}</P>
+            <P>P: {data['jambonz-ui'].text}</P>
           </div>
           <div className="wrap-text pad">
             <P>P: With a <strong>strong</strong> element</P>
@@ -113,80 +109,109 @@ export default function JambonzUI({ data }) {
             <P>P: <span className="color--blue">With</span> <span className="color--teal">colored</span> <span className="color--purple">text</span></P>
           </div>
           <div className="wrap-text pad">
-            <M>M: {pageData.text}</M>
+            <M>M: {data['jambonz-ui'].text}</M>
           </div>
           <div className="wrap-text pad">
-            <MS>MS: {pageData.text}</MS>
+            <MS>MS: {data['jambonz-ui'].text}</MS>
           </div>
           <div className="wrap-text pad">
-            <MXS>MXS: {pageData.text}</MXS>
+            <MXS>MXS: {data['jambonz-ui'].text}</MXS>
           </div>
+        </div>
+        <div className="wrap">
           <div className="pad">
-            <div className="icons icons--set">
+            <IconGroup set>
               {Object.keys(Icons).map((icon) => {
-                return <Icon key={icon} mainStyle="fill" name={icon} />;
+                const SvgIcon = Icons[icon];
+                return (
+                  <Icon key={icon} mainStyle="fill">
+                    <SvgIcon />
+                  </Icon>
+                );
               })}
-            </div>
+            </IconGroup>
           </div>
           <div className="pad">
-            <div className="icons icons--set">
-              <Icon mainStyle="fill" subStyle="dark" name="MapPin" />
-              <Icon mainStyle="fill" subStyle="purple" name="MapPin" />
-              <Icon mainStyle="fill" subStyle="teal" name="MapPin" />
-              <Icon mainStyle="fill" subStyle="blue" name="MapPin" />
-            </div>
+            <IconGroup set>
+              <Icon mainStyle="fill" subStyle="dark">
+                <Icons.MapPin />
+              </Icon>
+              <Icon mainStyle="fill" subStyle="purple">
+                <Icons.MapPin />
+              </Icon>
+              <Icon mainStyle="fill" subStyle="teal">
+                <Icons.MapPin />
+              </Icon>
+              <Icon mainStyle="fill" subStyle="blue">
+                <Icons.MapPin />
+              </Icon>
+            </IconGroup>
           </div>
           <div className="pad">
-            <div className="icons icons--set">
-              <Icon mainStyle="pill" subStyle="dark" name="Heart" />
-              <Icon mainStyle="pill" subStyle="purple" name="Heart" />
-              <Icon mainStyle="pill" subStyle="teal" name="Heart" />
-              <Icon mainStyle="pill" subStyle="blue" name="Heart" />
-              <Icon mainStyle="pill" name="Heart" />
-            </div>
+            <IconGroup set>
+              <Icon mainStyle="pill" subStyle="dark">
+                <Icons.Heart />
+              </Icon>
+              <Icon mainStyle="pill" subStyle="purple">
+                <Icons.Heart />
+              </Icon>
+              <Icon mainStyle="pill" subStyle="teal">
+                <Icons.Heart />
+              </Icon>
+              <Icon mainStyle="pill" subStyle="blue">
+                <Icons.Heart />
+              </Icon>
+              <Icon mainStyle="pill">
+                <Icons.Heart />
+              </Icon>
+            </IconGroup>
           </div>
           <div className="pad">
-            <img src="/svg/drachtio.svg" width="313" height="71" alt="drachtio" />
-          </div>
-          <div className="pad">
-            <Button href="/regions/?redirect=login" mainStyle="login">Log In</Button>
+            <Button mainStyle="login">Log In</Button>
           </div>
         </div>
         <div className="bg--charcoal">
           <div className="pad">
-            <Button href="/regions/?redirect=login" mainStyle="login" subStyle="white">Log In</Button>
+            <Icon mainStyle="pill" subStyle="white">
+              <Icons.Heart />
+            </Icon>
+          </div>
+        </div>
+        <div className="bg--charcoal">
+          <div className="pad">
+            <Button mainStyle="login" subStyle="white">Log In</Button>
           </div>
         </div>
         <div className="wrap">
-          <div className="btns pad">
-            <Button href="/regions/?redirect=register">Sign up for free</Button>
-            <Button href="/regions/?redirect=register" subStyle="dark">Get started for free</Button>
-          </div>
-          <div className="btns pad">
-            <Button href="/regions/?redirect=register" subStyle="purple">Do it</Button>
-            <Button href="/regions/?redirect=register" subStyle="teal">Do it</Button>
-            <Button href="/regions/?redirect=register" subStyle="blue">Do it</Button>
-          </div>
+          <ButtonGroup className="pad">
+            <Button>Sign up for free</Button>
+            <Button subStyle="dark">Get started for free</Button>
+          </ButtonGroup>
+          <ButtonGroup className="pad">
+            <Button subStyle="purple">Do it</Button>
+            <Button subStyle="teal">Do it</Button>
+            <Button subStyle="blue">Do it</Button>
+          </ButtonGroup>
         </div>
         <div className="bg--jambonz">
           <div className="pad">
-            <Button href="mailto:support@jambonz.org?subject=Jambonz Support" subStyle="light" target="_blank">support@jambonz.org</Button>
+            <Button subStyle="light">support@jambonz.org</Button>
           </div>
         </div>
         <div className="wrap">
-          <div className="btns pad">
-            <Button href="https://github.com/jambonz" target="_blank" mainStyle="pill">
-              <Icon name="GitHub" />
+          <ButtonGroup className="pad">
+            <Button mainStyle="pill">
+              <Icons.GitHub />
               <span>github.com/jambonz</span>
             </Button>
-            <Button href="https://github.com/drachtio" target="_blank" mainStyle="pill">
-              <Icon name="GitHub" />
+            <Button mainStyle="pill">
+              <Icons.GitHub />
               <span>github.com/drachtio</span>
             </Button>
-          </div>
+          </ButtonGroup>
           <div className="pad">
-            <Button href="mailto:support@jambonz.org?subject=Additional Services Support" mainStyle="pill" subStyle="jambonz" target="_blank">
-              <Icon name="Send" />
+            <Button mainStyle="pill" subStyle="jambonz">
+              <Icons.Send />
               <span>Contact us</span>
             </Button>
           </div>

pages/open-source/[[...slug]].js

@@ -1,6 +1,5 @@
-import { useEffect } from 'react';
-
 import Prism from 'prismjs';
+import { useEffect } from 'react';
 
 import Layout from '../../src/components/layout';
 import Markdown from '../../src/components/markdown';

pages/pricing.js

@@ -1,10 +1,15 @@
-import { nanoid } from 'nanoid';
+import Link from 'next/link';
+
+import { nanoid } from 'nanoid';
+import { Icon, Button, H2, P } from 'jambonz-ui';
 
-import Layout from '../src/components/layout';
-import { Hero, Icon, Button, H2, P, normalizeSubtext } from '../src/components/jambonz-ui';
 import { getData } from '../src/lib/data';
+import { Icons } from '../src/components/icons';
+import Layout, { Hero } from '../src/components/layout';
+import { normalizeSubtext } from '../src/components/utils';
 
 function Structure({data}) {
+  const CtaIcon = Icons[data.cta.icon];
   return (
     <section className="structure">
       <div className="wrap structure__text">
@@ -16,8 +21,8 @@ function Structure({data}) {
       </div>
       <div className="wrap structure__cta">
         <P>{data.cta.text}</P>
-        <Button href={`${data.cta.url}?subject=Additional Services Support`} target="_blank" mainStyle="pill" subStyle="jambonz">
-          <Icon name={data.cta.icon} />
+        <Button as={Link} href={`${data.cta.url}?subject=Additional Services Support`} target="_blank" mainStyle="pill" subStyle="jambonz">
+          <CtaIcon />
           <span>{data.cta.cta}</span>
         </Button>
       </div>
@@ -26,6 +31,7 @@ function Structure({data}) {
 }
 
 function Services({data}) {
+  const SvgIcon = Icons[data.icon];
   return (
     <section className="bg--pink services pad">
       <div className="wrap services__wrap">
@@ -39,7 +45,7 @@ function Services({data}) {
                 <P>
                   <a className="i" href={`${data.url}?subject=${service.title} Support`} target="_blank" rel="noreferrer">
                     <strong>{service.title}</strong>
-                    <Icon name="ExternalLink" />
+                    <Icons.ExternalLink />
                   </a>
                 </P>
                 <P>{service.text}</P>
@@ -48,8 +54,8 @@ function Services({data}) {
           })}
         </div>
         <div className="services__cta">
-          <Button href={`${data.url}?subject=Additional Services Support`} target="_blank" mainStyle="pill" subStyle="jambonz">
-            <Icon name={data.icon} />
+          <Button as={Link} href={`${data.url}?subject=Additional Services Support`} target="_blank" mainStyle="pill" subStyle="jambonz">
+            <SvgIcon />
             <span>{data.cta}</span>
           </Button>
         </div>

pages/privacy.js

@@ -1,5 +1,4 @@
-import Layout from '../src/components/layout';
-import { Hero, TextLayout } from '../src/components/jambonz-ui';
+import Layout, { Hero, TextLayout } from '../src/components/layout';
 import { getData, getParsedMarkdown } from '../src/lib/data';
 import path from 'path';
 

pages/regions.js

@@ -1,10 +1,12 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { nanoid } from 'nanoid';
 
-import Layout from '../src/components/layout';
-import { Hero, Icon, P } from '../src/components/jambonz-ui';
+import { nanoid } from 'nanoid';
+import { Icon, P } from 'jambonz-ui';
+
 import { getData } from '../src/lib/data';
+import { Icons } from '../src/components/icons';
+import Layout, { Hero } from '../src/components/layout';
 
 function Regions({ data }) {
   const router = useRouter();
@@ -14,11 +16,14 @@ function Regions({ data }) {
     <section className="regions">
       {data.regions.map((region) => {
         const href = (redirect === 'login') ? region.url : region.altUrl;
+        const SvgIcon = Icons[region.icon];
 
         return (
           <div key={nanoid()} className="wrap regions__wrap">
             <div className="regions__icon">
-              <Icon name={region.icon} subStyle={region.color} mainStyle="fill" />
+              <Icon subStyle={region.color} mainStyle="fill">
+                <SvgIcon />
+              </Icon>
             </div>
             <div className="regions__title">
               <P className={`med color--${region.color}`}>
@@ -30,7 +35,7 @@ function Regions({ data }) {
                 <Link href={href}>
                   <a className="i" title={`jambonz ${region.title}`}>
                     <span className="regions__text">{region.text}</span>
-                    <Icon name="ExternalLink" />
+                    <Icons.ExternalLink />
                   </a>
                 </Link>
               </P>

pages/terms.js

@@ -1,5 +1,4 @@
-import Layout from '../src/components/layout';
-import { Hero, TextLayout } from '../src/components/jambonz-ui';
+import Layout, { Hero, TextLayout } from '../src/components/layout';
 import { getData, getParsedMarkdown } from '../src/lib/data';
 import path from 'path';
 

pages/why.js

@@ -1,8 +1,11 @@
-import { nanoid } from 'nanoid';
+import Link from 'next/link';
+
+import { nanoid } from 'nanoid';
+import { Icon, Button, H3, H2, P, ButtonGroup } from 'jambonz-ui';
 
-import Layout from '../src/components/layout';
-import { Hero, Icon, Button, H3, H2, P } from '../src/components/jambonz-ui';
 import { getData } from '../src/lib/data';
+import { Icons } from '../src/components/icons';
+import Layout, { Hero } from '../src/components/layout';
 
 function Facts({data}) {
   return (
@@ -10,9 +13,12 @@ function Facts({data}) {
       <div className="wrap facts__wrap">
         <div className="facts__items">
           {data.map((fact) => {
+            const FactIcon = Icons[fact.icon];
             return (
               <div key={nanoid()} className="facts__item">
-                <Icon name={fact.icon} mainStyle="fill" />
+                <Icon mainStyle="fill">
+                  <FactIcon />
+                </Icon>
                 <div className="facts__text">
                   <P className="h5"><strong>{fact.title}</strong></P>
                   <P>{fact.text}</P>
@@ -38,25 +44,26 @@ function OS({data}) {
         <div className="os__subtext">
           <H3 className="h5">{data.subtext}</H3>
         </div>
-        <div className="btns os__btns">
+        <ButtonGroup className="os__btns">
           {data.buttons.map((button) => {
+            const BtnIcon = Icons[button.icon];
             return (
-              <Button key={nanoid()} href={button.url} target="_blank" mainStyle="pill">
-                <Icon name={button.icon} />
+              <Button as={Link} key={nanoid()} href={button.url} target="_blank" mainStyle="pill">
+                <BtnIcon />
                 <span>{button.text}</span>
               </Button>
             );
           })}
-        </div>
+        </ButtonGroup>
         <div className="os__logo">
           <img src={data.logo} width="313" height="71" alt="drachtio" />
-          <Button href="https://github.com/sponsors/drachtio/" target="_blank" mainStyle="pill" subStyle="jambonz">
-            <Icon name="Heart" />
+          <Button as={Link} href="https://github.com/sponsors/drachtio/" target="_blank" mainStyle="pill" subStyle="jambonz">
+            <Icons.Heart />
             <span>Sponsor</span>
           </Button>
         </div>
         <div className="os__cta">
-          <Button href={data.url} subStyle="dark" >{data.cta}</Button>
+          <Button as={Link} href={data.url} subStyle="dark" >{data.cta}</Button>
         </div>
       </div>
     </section>