ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2026-07-04 19:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

update jambonz-ui

Browse Source
This commit is contained in:
kitajchuk
2022-08-10 07:38:26 -07:00
parent 727bb16964
commit 336421325b
6 changed files with 89 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/jambonz-ui.yml
-1
View File
@@ -1 +0,0 @@
text: jambonz is the communications platform that brings your ideas to life. So you can bring your best to your customers every day.
markdown/docs/jambonz-ui/components.md
+61 -70
View File
@@ -1,18 +1,17 @@
# Components
The UI library would not be complete without some atomic components for use in your jambonz apps.
Currently there are components for normalized typography, iconography and buttons. As jambonz frontend
development continues to mature new use cases will become viable candidates to incorporate into this
UI kit—form elements being the most notable upcoming candidates. To see all the components in action,
visually in one place you can go [here](/jambonz-ui/).
The UI library would not be complete without some atomic components for use in your jambonz apps.
Currently there are components for normalized typography, iconography and buttons. As jambonz frontend
development continues to mature new use cases will become viable candidates to incorporate into this
UI kit—form elements being the most notable upcoming candidates.
The component library is written in [TypeScript](https://www.typescriptlang.org/) so it supports
jambonz apps also using TypeScript. Documentation on jambonz UI type definitions will be implemented
as we go.
The component library is written in [TypeScript](https://www.typescriptlang.org/) so it supports
jambonz apps also using TypeScript. it also requires that some JS peer dependencies are met in your
jambonz app. These are likely the most common, however it's worth noting that you can also use the
library with [preact](https://preactjs.com/).
The component library requires that some JS peer dependencies are met in your jambonz app. These are
likely the most common, however it's worth noting that you can also use the library with [preact](https://preactjs.com/).
In fact, this site is a `Next.js` app using `preact/compat` in place of the `React` packages.
This page has some basic overview tables of the components but the best place to check them out is
on the [storybook](https://jambonz-ui.vercel.app/) site for `jambonz-ui`.
```json
"peerDependencies": {
@@ -24,55 +23,55 @@ In fact, this site is a `Next.js` app using `preact/compat` in place of the `Rea
###### Button
| Props | Value(s) |
|-------|----------|
| children | Will render any children |
| mainStyle | Currenly the only valid value is `hollow` |
| subStyle | Valid values are `dark`, `blue`, `teal`, `purple`, `white` |
| as | Render as either `next/link` or `react-router-dom` link |
| to | Use with `react-router-dom` link |
| href | Use with `next/link` |
| ...rest | Props are spread so you can pass extra attributes like `type="submit` for buttons |
| Props | Value(s) |
| --------- | --------------------------------------------------------------------------------- |
| children | Will render any children |
| mainStyle | Currenly the only valid value is `hollow` |
| subStyle | Valid values are `dark`, `blue`, `teal`, `purple`, `white` |
| as | Render as either `next/link` or `react-router-dom` link |
| to | Use with `react-router-dom` link |
| href | Use with `next/link` |
| ...rest | Props are spread so you can pass extra attributes like `type="submit` for buttons |
###### ButtonGroup
| Props | Value(s) |
|-------|----------|
| children | Will render any children -- should be `<Button>`s |
| className | Any valid `className` string |
| Props | Value(s) |
| --------- | ------------------------------------------------- |
| children | Will render any children -- should be `<Button>`s |
| className | Any valid `className` string |
###### Icon
| Props | Value(s) |
|-------|----------|
| children | Will render any children |
| mainStyle | Currenly the only valid value is `hollow` |
| subStyle | Valid values are `dark`, `blue`, `teal`, `purple`, `white` |
| ...rest | Props are spread so you can pass extra attributes like `type="submit` for buttons |
| Props | Value(s) |
| --------- | --------------------------------------------------------------------------------- |
| children | Will render any children |
| mainStyle | Currenly the only valid value is `hollow` |
| subStyle | Valid values are `dark`, `blue`, `teal`, `purple`, `white` |
| ...rest | Props are spread so you can pass extra attributes like `type="submit` for buttons |
###### IconGroup
| Props | Value(s) |
|-------|----------|
| children | Will render any children -- should be `<Icon>`s |
| className | Any valid `className` string |
| set | Boolean, will add `ico--set` className if present |
| Props | Value(s) |
| --------- | ------------------------------------------------- |
| children | Will render any children -- should be `<Icon>`s |
| className | Any valid `className` string |
| set | Boolean, will add `ico--set` className if present |
###### Typography H[1-6], P, M, MS and MXS
All of these accept the same type of props with the exception of `M`, `MS` and `MXS` not spreading `rest` props.
| Props | Value(s) |
|-------|----------|
| children | Will render any children |
| ...rest | Props are spread so you can pass extra attributes like `className`. Note that `M`, `MS` and `MXS` don't support this. |
| Props | Value(s) |
| -------- | --------------------------------------------------------------------------------------------------------------------- |
| children | Will render any children |
| ...rest | Props are spread so you can pass extra attributes like `className`. Note that `M`, `MS` and `MXS` don't support this. |
##### Using components
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";
function MyComponent() {
return (
@@ -92,25 +91,21 @@ function MyComponent() {
##### Notes on Button as Link (polymorphic)
The `Button` component takes a few props that are specific to rendering a link element, `<a>`,
with button styles. If you just need a button, you can ignore these props. But if you would like
links to be styled like buttons (CTAs) and you want them to route within the [React](https://reactjs.org/)
context you can do that. The distinction between which one has to do with passing either the `to` or
The `Button` component takes a few props that are specific to rendering a link element, `<a>`,
with button styles. If you just need a button, you can ignore these props. But if you would like
links to be styled like buttons (CTAs) and you want them to route within the [React](https://reactjs.org/)
context you can do that. The distinction between which one has to do with passing either the `to` or
the `href` props that are passed on to the `Link` component in question.
Using the `Link` prop with [react-router-dom](https://reactrouter.com/docs/en/v6/components/link).
```jsx
import { Link } from 'react-router-dom';
import { Button } from 'jambonz-ui';
import { Link } from "react-router-dom";
import { Button } from "jambonz-ui";
function MyComponent() {
return (
<Button
as={Link}
to="/someurl/"
subStyle="dark"
>
<Button as={Link} to="/someurl/" subStyle="dark">
Some text
</Button>
);
@@ -120,16 +115,12 @@ function MyComponent() {
Using the `Link` prop with [next/link](https://nextjs.org/docs/api-reference/next/link) for [Next.js](https://nextjs.org/).
```jsx
import Link from 'next/link';
import { Button } from 'jambonz-ui';
import Link from "next/link";
import { Button } from "jambonz-ui";
function MyComponent() {
return (
<Button
as={Link}
href="/someurl/"
subStyle="dark"
>
<Button as={Link} href="/someurl/" subStyle="dark">
Some text
</Button>
);
@@ -138,18 +129,18 @@ function MyComponent() {
##### Importing your icon set
By default the UI library doesn't import any icons from [feathericons](https://feathericons.com/),
however it declares [react-feather](https://github.com/feathericons/react-feather) as a peer dependency.
This means you can import just the icons you are using in your jambonz app. This allows for
[tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) to take effect and ensures
we don't load extra bloat into our dist JS that isn't explicitly used. The `Icon` component renders a
By default the UI library doesn't import any icons from [feathericons](https://feathericons.com/),
however it declares [react-feather](https://github.com/feathericons/react-feather) as a peer dependency.
This means you can import just the icons you are using in your jambonz app. This allows for
[tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) to take effect and ensures
we don't load extra bloat into our dist JS that isn't explicitly used. The `Icon` component renders a
stylized design icon with many visual variations.
You can see how we import the feather icons used on this site
[here](https://github.com/jambonz/next-static-site/blob/main/src/components/icons.js).
You can see how we import the feather icons used on this site
[here](https://github.com/jambonz/next-static-site/blob/main/src/components/icons.js).
But for a quick reference here is a compressed example.
First we create a module in our jambonz app and import the icons we would
First we create a module in our jambonz app and import the icons we would
like to use and export them for use in the rest of the app.
```jsx
@@ -162,7 +153,7 @@ import {
Heart,
ExternalLink,
// ...
} from 'react-feather';
} from "react-feather";
export const Icons = {
X,
@@ -181,8 +172,8 @@ export default Icons;
Then we can use these icons both `inline` and with the `Icon` component for stylized designer icons.
```jsx
import { Icons } from './my-icons';
import { Icon } from 'jambonz-ui';
import { Icons } from "./my-icons";
import { Icon } from "jambonz-ui";
function MyComponent() {
return (
@@ -204,4 +195,4 @@ function MyComponent() {
<p class="flex">
<a href="/docs/jambonz-ui/styles/">Prev: Styles</a>
<span>&nbsp;</span>
</p>
</p>
markdown/docs/jambonz-ui/index.md
+20 -25
View File
@@ -1,25 +1,20 @@
# Jambonz UI
A minimal, light-weight UI design system for developing frontends for jambonz apps.
It's a kit-of-parts including fonts, a small set of CSS styles, a source set of SASS
styles and JavaScript components. Whether you're developing a custom dev stack with tools
like [vite](https://vitejs.dev/) or [webpack](https://webpack.js.org/) you should have no
issues utilizing the resources available in the Jambonz UI library package. You can view
the available UI elements from the library on this site [here](/jambonz-ui/).
A minimal, light-weight UI design system for developing frontends for jambonz apps.
It's a kit-of-parts including fonts, a small set of CSS styles, a source set of SASS
styles and JavaScript components. Whether you're developing a custom dev stack with tools
like [vite](https://vitejs.dev/) or [webpack](https://webpack.js.org/) you should have no
issues utilizing the resources available in the Jambonz UI library package.
Jambonz UI aims to provide foundational design materials like colors, fonts and typography
as well as [atomic design](https://bradfrost.com/blog/post/atomic-web-design/) materials like
buttons, icons etc. Currently the library is very lean but is expected to grow thoughtfully
as jambonz frontend development continues to mature along this line of thinking. A primary goal
of the library is to have a small footprint. Current sizes:
Jambonz UI aims to provide foundational design materials like colors, fonts and typography
as well as [atomic design](https://bradfrost.com/blog/post/atomic-web-design/) materials like
buttons, icons etc. Currently the library is very lean but is expected to grow thoughtfully
as jambonz frontend development continues to mature along this line of thinking. A primary goal
of the library is to have a small footprint.
View on [bundlephobia](https://bundlephobia.com/package/jambonz-ui)
View on [bundlephobia](https://bundlephobia.com/package/jambonz-ui).
| Output format | CSS size | JS size |
|---------------|----------|---------|
| Minified and Gzipped | `2 KB` | `725 bytes` |
| Minified | `10 KB` | `2 KB` |
| Compiled | `14 KB` | `4 KB` |
View the [storybook](https://jambonz-ui.vercel.app/).
##### Installation
@@ -31,16 +26,16 @@ npm install jambonz-ui # or yarn add jambonz-ui
##### General usage
The UI kit can be used in any typical way we pull things into our modern frontend stacks.
You can import the CSS, SASS and JS directly into your specific target entry points for bundling
or you can load them statically the good-old-fashioned way. For the latter the package provides
a singular `public` directory that consists of all static assets: CSS, JS and fonts. You can
literally just copy these assets into your jambonz applications static directory if you want.
This is also handy for serving extra static assets during development with tools like
[webpack-dev-server](https://webpack.js.org/configuration/dev-server/) and also for copying just
The UI kit can be used in any typical way we pull things into our modern frontend stacks.
You can import the CSS, SASS and JS directly into your specific target entry points for bundling
or you can load them statically the good-old-fashioned way. For the latter the package provides
a singular `public` directory that consists of all static assets: CSS, JS and fonts. You can
literally just copy these assets into your jambonz applications static directory if you want.
This is also handy for serving extra static assets during development with tools like
[webpack-dev-server](https://webpack.js.org/configuration/dev-server/) and also for copying just
the raw static assets at build time when bundling.
<p class="flex">
<span>&nbsp;</span>
<a href="/docs/jambonz-ui/fonts-and-icons/">Next: Fonts and icons</a>
</p>
</p>
package-lock.json
Generated
+7 -7
View File
@@ -10,7 +10,7 @@
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
"jambonz-ui": "^0.0.14",
"jambonz-ui": "^0.0.15",
"nanoid": "^3.1.22",
"next": "^12.1.4",
"next-plugin-preact": "^3.0.6",
@@ -3538,9 +3538,9 @@
"license": "MIT"
},
"node_modules/jambonz-ui": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/jambonz-ui/-/jambonz-ui-0.0.14.tgz",
"integrity": "sha512-628XoG/CDil9mujNOVUPAbv+/bR96U8SpR9OsQgWoTuPDYDi+bGbwOTrMetIqTxvF2F8bW5q5axZbKRYzOpdow==",
"version": "0.0.15",
"resolved": "https://registry.npmjs.org/jambonz-ui/-/jambonz-ui-0.0.15.tgz",
"integrity": "sha512-86f+grcFGWsq0O44N//pJOE+0C7Z6uOekD+OqMjGqReMVT1axmPJ+2GgFIHsgweYu1MgO1e/t9zer11Mt41QaQ==",
"engines": {
"node": ">= 14"
},
@@ -8613,9 +8613,9 @@
"dev": true
},
"jambonz-ui": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/jambonz-ui/-/jambonz-ui-0.0.14.tgz",
"integrity": "sha512-628XoG/CDil9mujNOVUPAbv+/bR96U8SpR9OsQgWoTuPDYDi+bGbwOTrMetIqTxvF2F8bW5q5axZbKRYzOpdow==",
"version": "0.0.15",
"resolved": "https://registry.npmjs.org/jambonz-ui/-/jambonz-ui-0.0.15.tgz",
"integrity": "sha512-86f+grcFGWsq0O44N//pJOE+0C7Z6uOekD+OqMjGqReMVT1axmPJ+2GgFIHsgweYu1MgO1e/t9zer11Mt41QaQ==",
"requires": {}
},
"js-tokens": {
package.json
+1 -1
View File
@@ -24,7 +24,7 @@
],
"license": "MIT",
"dependencies": {
"jambonz-ui": "^0.0.14",
"jambonz-ui": "^0.0.15",
"nanoid": "^3.1.22",
"next": "^12.1.4",
"next-plugin-preact": "^3.0.6",
pages/jambonz-ui.js
-295
View File
@@ -1,295 +0,0 @@
import Link from 'next/link';
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';
function KitOfParts({ textString }) {
return (
<section className="kop" style={{ textAlign: 'center' }}>
{/** Typography */}
<div className="kop__typography">
<div className="pad bg--black">
<div className="wrap">
<div style={{ display: 'flex', justifyContent: 'center' }}>
<H1 style={{ maxWidth: '1024px' }}><span>H1:</span> {textString}</H1>
</div>
</div>
</div>
<div className="wrap">
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<H2 style={{ maxWidth: '850px' }}><span>H2:</span> {textString}</H2>
</div>
</div>
<div className="pad bg--pink">
<div className="wrap">
<div style={{ display: 'flex', justifyContent: 'center' }}>
<H3 style={{ maxWidth: '760px' }}><span>H3:</span> {textString}</H3>
</div>
</div>
</div>
<div className="wrap">
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<H4 style={{ maxWidth: '760px' }}><span>H4:</span> {textString}</H4>
</div>
</div>
<div className="pad bg--grey">
<div className="wrap">
<div style={{ display: 'flex', justifyContent: 'center' }}>
<H5 style={{ maxWidth: '660px' }}><span>H5:</span> {textString}</H5>
</div>
</div>
</div>
<div className="wrap">
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<H6 style={{ maxWidth: '620px' }}><span>H6:</span> {textString}</H6>
</div>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P style={{ maxWidth: '600px' }}><span>P:</span> {textString}</P>
</div>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P><span>P:</span> With a <strong>strong</strong> element</P>
</div>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P><span>P:</span> With a <strong className="med">medium</strong> element</P>
</div>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P><span>P:</span> With an <em>emphasized</em> element</P>
</div>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P><span>P:</span> <span className="txt--blue">With</span> <span className="txt--teal">colored</span> <span className="txt--purple">text</span></P>
</div>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<M style={{ maxWidth: '480px' }}><span>M:</span> {textString}</M>
</div>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<MS style={{ maxWidth: '480px' }}><span>MS:</span> {textString}</MS>
</div>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<MXS style={{ maxWidth: '480px' }}><span>MXS:</span> {textString}</MXS>
</div>
</div>
</div>
{/** Icons */}
<div className="kop__icons">
<div className="pad wrap">
<IconGroup>
{Object.keys(Icons).map((icon) => {
const SvgIcon = Icons[icon];
return (
<Icon key={icon}>
<SvgIcon />
</Icon>
);
})}
</IconGroup>
</div>
<div className="pad wrap">
<IconGroup>
<Icon subStyle="dark">
<Icons.MapPin />
</Icon>
<Icon subStyle="purple">
<Icons.MapPin />
</Icon>
<Icon subStyle="teal">
<Icons.MapPin />
</Icon>
<Icon subStyle="blue">
<Icons.MapPin />
</Icon>
</IconGroup>
</div>
<div className="pad wrap">
<IconGroup>
<Icon mainStyle="hollow" subStyle="dark">
<Icons.Heart />
</Icon>
<Icon mainStyle="hollow" subStyle="purple">
<Icons.Heart />
</Icon>
<Icon mainStyle="hollow" subStyle="teal">
<Icons.Heart />
</Icon>
<Icon mainStyle="hollow" subStyle="blue">
<Icons.Heart />
</Icon>
<Icon mainStyle="hollow">
<Icons.Heart />
</Icon>
</IconGroup>
</div>
<div className="bg--dark">
<IconGroup className="pad wrap">
<Icon mainStyle="hollow" subStyle="white">
<Icons.Heart />
</Icon>
<Icon subStyle="white">
<Icons.Heart />
</Icon>
</IconGroup>
</div>
</div>
{/** Buttons */}
<div className="kop__buttons">
<div className="wrap">
<div className="pad">
<ButtonGroup>
<Button small mainStyle="hollow">Log In</Button>
<Button small mainStyle="hollow" subStyle="purple">Log In</Button>
<Button small mainStyle="hollow" subStyle="teal">Log In</Button>
<Button small mainStyle="hollow" subStyle="blue">Log In</Button>
</ButtonGroup>
</div>
<div className="pad">
<ButtonGroup>
<Button small>Log In</Button>
<Button small subStyle="purple">Log In</Button>
<Button small subStyle="teal">Log In</Button>
<Button small subStyle="blue">Log In</Button>
</ButtonGroup>
</div>
</div>
<div className="bg--dark">
<div className="wrap">
<ButtonGroup className="pad">
<Button small mainStyle="hollow" subStyle="white">Log In</Button>
<Button small mainStyle="hollow" subStyle="purple">Log In</Button>
<Button small mainStyle="hollow" subStyle="teal">Log In</Button>
<Button small mainStyle="hollow" subStyle="blue">Log In</Button>
</ButtonGroup>
<ButtonGroup className="pad">
<Button small subStyle="white">Log In</Button>
<Button small subStyle="purple">Log In</Button>
<Button small subStyle="teal">Log In</Button>
<Button small subStyle="blue">Log In</Button>
</ButtonGroup>
</div>
</div>
<div className="wrap">
<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--dark">
<div className="wrap pad">
<ButtonGroup>
<Button mainStyle="hollow" subStyle="white">styles</Button>
<Button mainStyle="hollow" subStyle="purple">styles</Button>
<Button mainStyle="hollow" subStyle="teal">styles</Button>
<Button mainStyle="hollow" subStyle="blue">styles</Button>
</ButtonGroup>
</div>
</div>
<div className="wrap">
<ButtonGroup className="pad">
<Button mainStyle="hollow" subStyle="dark">
<Icons.GitHub />
<span>github.com/jambonz</span>
</Button>
<Button mainStyle="hollow" subStyle="dark">
<Icons.GitHub />
<span>github.com/drachtio</span>
</Button>
</ButtonGroup>
<ButtonGroup className="pad">
<Button mainStyle="hollow" subStyle="purple">
<span>colors</span>
</Button>
<Button mainStyle="hollow" subStyle="teal">
<span>colors</span>
</Button>
<Button mainStyle="hollow" subStyle="blue">
<span>colors</span>
</Button>
</ButtonGroup>
<div className="pad">
<Button mainStyle="hollow">
<Icons.Send />
<span>Contact us</span>
</Button>
</div>
</div>
<div className="bg--jam">
<div className="wrap pad">
<Button subStyle="white">support@jambonz.org</Button>
</div>
</div>
</div>
</section>
);
}
export default function JambonzUI({ data }) {
return (
<Layout siteData={data.site}>
{/* 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>
<KitOfParts textString={data['jambonz-ui'].text} />
</Layout>
);
}
export async function getStaticProps() {
const data = getData('jambonz-ui');
return {
props: {
data,
},
};
}