jbx 2.9.0 → 2.11.0

package/src/primitives.tsx

@@ -0,0 +1,247 @@
+import React, { createElement, ReactNode, CSSProperties } from 'react';
+import { space, spacingPropsToStyle, BASE_RADIUS, SPACING_PROPS, SpacingProps } from './spacing.js';
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+
+type ComponentConfig = {
+  /** Tag to render. Defaults to `div`. */
+  element?: string;
+  /** Extra props always passed to the element. */
+  props?: Record<string, unknown>;
+  /**
+   * Props the style function consumes. They are used to compute the style and
+   * then kept off the DOM, so `<Inline gap={1} />` doesn't emit `gap="1"`.
+   */
+  styleProps?: readonly string[];
+};
+
+type StyleSource<T> = CSSProperties | ((props: T) => CSSProperties);
+
+export function Component<T>(
+  className: string,
+  styleSrc: StyleSource<T> = {},
+  config: ComponentConfig = {}
+): (props: T & { children?: ReactNode; style?: CSSProperties }) => React.JSX.Element {
+  const { element = `div`, props: otherProps, styleProps } = config;
+
+  return function MakeComponent({
+    children,
+    style,
+    ...props
+  }: T & {
+    children?: ReactNode;
+    style?: CSSProperties;
+  }) {
+    const calculatedStyle =
+      typeof styleSrc === 'function' ? styleSrc(props as unknown as T) : styleSrc;
+
+    const elementProps = styleProps
+      ? Object.fromEntries(Object.entries(props).filter(([key]) => !styleProps.includes(key)))
+      : props;
+
+    return createElement(
+      element,
+      {
+        className,
+        // The caller's `style` wins over the computed one.
+        style: { ...calculatedStyle, ...style },
+        ...otherProps,
+        ...elementProps
+      },
+      children
+    );
+  };
+}
+
+export const Container = Component<DivProps>(`jbx-container`);
+
+export const Text = Component<DivProps>(`jbx-text`);
+
+export const SmallText = Component<DivProps>(`jbx-small-text`);
+
+export const Button = Component<React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  `jbx-button`,
+  {},
+  { element: 'button' }
+);
+
+export const Input = Component<React.InputHTMLAttributes<HTMLInputElement>>(
+  `jbx-input`,
+  {},
+  { element: 'input' }
+);
+
+export const Range = Component<React.InputHTMLAttributes<HTMLInputElement>>(
+  `jbx-range`,
+  {},
+  {
+    element: 'input',
+    props: {
+      type: 'range'
+    }
+  }
+);
+
+type HeadingProps = React.HTMLAttributes<HTMLHeadingElement>;
+export const HeaderH1 = Component<HeadingProps>(`jbx-h${1}`, {}, { element: 'h1' });
+export const HeaderH2 = Component<HeadingProps>(`jbx-h${2}`, {}, { element: 'h2' });
+export const HeaderH3 = Component<HeadingProps>(`jbx-h${3}`, {}, { element: 'h3' });
+export const HeaderH4 = Component<HeadingProps>(`jbx-h${4}`, {}, { element: 'h4' });
+export const HR = Component<React.HTMLAttributes<HTMLHRElement>>(`jbx-hr`, {}, { element: 'hr' });
+
+export const MainHeader = Component<HeadingProps>(`jbx-main-h1`, {}, { element: 'h1' });
+
+export const A = Component<React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }>(
+  `jbx-a`,
+  {},
+  { element: 'a' }
+);
+
+type SpaceProps = DivProps & { inline?: boolean; h?: number; w?: number };
+export const Space = Component<SpaceProps>(
+  `jbx-space`,
+  ({ inline, h, w }) => ({
+    display: inline ? 'inline-block' : 'block',
+    height: h === undefined ? undefined : space(h),
+    width: w === undefined ? undefined : space(w)
+  }),
+  { styleProps: ['inline', 'h', 'w'] }
+);
+
+type InlineProps = DivProps & SpacingProps & { wrap?: boolean };
+export const Inline = Component<InlineProps>(
+  `jbx-inline`,
+  ({ wrap = true, ...spacing }) => ({
+    ...spacingPropsToStyle(spacing),
+    flexWrap: wrap ? 'wrap' : 'nowrap'
+  }),
+  { styleProps: [...SPACING_PROPS, 'wrap'] }
+);
+
+type StackProps = DivProps & SpacingProps;
+export const Stack = Component<StackProps>(`jbx-stack`, (props) => spacingPropsToStyle(props), {
+  styleProps: SPACING_PROPS
+});
+
+export const Dropzone = Component<DivProps>(`jbx-dropzone`);
+
+export const Ul = Component<React.HTMLAttributes<HTMLUListElement>>(
+  `jbx-ul`,
+  {
+    margin: 0,
+    padding: `0 0 0 ${space(0.25)}`
+  },
+  { element: 'ul' }
+);
+
+export const Li = Component<React.LiHTMLAttributes<HTMLLIElement>>(
+  `jbx-li`,
+  {
+    margin: `0 0 0 ${space(1)}`,
+    padding: `${space(0.25)} 0`
+  },
+  { element: 'li' }
+);
+
+export const Tabs = Component<DivProps>(`jbx-tabs`);
+
+type TabProps = DivProps & { info?: boolean; active?: boolean };
+export const Tab = Component<TabProps>(
+  `jbx-tabs--tab`,
+  ({ info, active }) => ({
+    userSelect: 'none',
+    cursor: 'pointer',
+    backgroundColor: active ? '#000' : info ? '#fff' : '#ecf0f1',
+    color: active ? '#fff' : '#000',
+    padding: space(0.5),
+    paddingLeft: info ? 0 : space(0.5)
+  }),
+  { styleProps: ['info', 'active'] }
+);
+
+export const CodeSnippet = Component<React.HTMLAttributes<HTMLPreElement>>(
+  `jbx-code-snippet`,
+  {},
+  { element: 'pre' }
+);
+
+export const CodeTextarea = Component<React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  `jbx-code-area`,
+  {},
+  { element: 'textarea' }
+);
+
+export const CheckboxHidden = Component<DivProps & { isChecked?: boolean }>(
+  `jbx-checkbox-hidden`,
+  ({ isChecked }) => ({
+    height: `calc(${space(2)} - 4px)`,
+    width: `calc(${space(2)} - 4px)`,
+    paddingTop: 2,
+    paddingLeft: 2,
+    backgroundColor: isChecked ? 'var(--accent-color)' : 'white',
+    borderRadius: BASE_RADIUS,
+    boxShadow: isChecked
+      ? 'inset rgba(0, 0, 0, 0.07) 0 0 0 1px'
+      : 'inset rgba(0, 0, 0, 0.33) 0 0 0 1.5px',
+    cursor: 'pointer'
+  }),
+  { styleProps: ['isChecked'] }
+);
+
+export function Checkbox({
+  label,
+  checked,
+  onChange
+}: {
+  label: string;
+  checked: boolean;
+  onChange?: (value: boolean) => void;
+}) {
+  function toggle() {
+    if (onChange) onChange(!checked);
+  }
+
+  return (
+    <Inline
+      role="checkbox"
+      aria-checked={checked}
+      tabIndex={0}
+      onClick={toggle}
+      onKeyDown={(event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+          toggle();
+        }
+      }}
+      style={{ alignItems: 'center', cursor: 'pointer' }}
+    >
+      <CheckboxHidden isChecked={checked}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          className="feather feather-check"
+          viewBox="0 0 24 24"
+          color={checked ? 'white' : '#ddd'}
+          style={{ height: `calc(${space(2)} - 8px)`, width: `calc(${space(2)} - 8px)` }}
+        >
+          <path d="M20 6L9 17 4 12" />
+        </svg>
+      </CheckboxHidden>
+      <Space w={0.5} />
+      <Text style={{ userSelect: 'none' }}>{label}</Text>
+    </Inline>
+  );
+}
+
+export function Bullet({ value }: { value: number }) {
+  return (
+    <div className="jbx-bullet-container">
+      <div className="jbx-bullet">{value}</div>
+    </div>
+  );
+}
+

package/src/spacing.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * One spacing unit, as a css value rather than a number, so javascript-driven
+ * spacing tracks the responsive `--size` variable in style.css the same way
+ * the stylesheet does.
+ */
+export function space(n: number): string {
+  return `calc(var(--size) * ${n})`;
+}
+
+export const BASE_RADIUS = `calc(var(--size) / 3)`;
+
+export type SpacingProps = {
+  /** Vertical margin, in spacing units. */
+  v?: number;
+  /** Horizontal margin, in spacing units. */
+  h?: number;
+  /** Gap between children, in spacing units. */
+  gap?: number;
+  /** Padding, in spacing units. An array is joined like the css shorthand. */
+  padding?: number | number[];
+};
+
+/** Keys `spacingPropsToStyle` consumes, so they can be kept off the DOM. */
+export const SPACING_PROPS = ['v', 'h', 'gap', 'padding'] as const;
+
+export function spacingPropsToStyle({ v, h, gap, padding }: SpacingProps): CSSProperties {
+  return {
+    marginLeft: h === undefined ? undefined : space(h),
+    marginRight: h === undefined ? undefined : space(h),
+    marginTop: v === undefined ? undefined : space(v),
+    marginBottom: v === undefined ? undefined : space(v),
+    gap: gap === undefined ? undefined : space(gap),
+    padding:
+      padding === undefined
+        ? undefined
+        : [padding]
+            .flat()
+            .map((value) => space(value))
+            .join(' ')
+  };
+}

package/src/style.css

@@ -0,0 +1,369 @@
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+:root {
+  --size: 16px;
+  --font-size: 16px;
+  --font-size-small: 17px;
+  --radius-small: 2px;
+}
+
+@media screen and (max-width: 1200px) {
+  :root {
+    --font-size: 18px;
+    --font-size-small: 16px;
+    --size: 14px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  :root {
+    --font-size: 16px;
+    --font-size-small: 14px;
+  }
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+body {
+  touch-action: pan-y;
+}
+
+body,
+input,
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+body {
+  background: #fcfcfd;
+  color: #000;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1;
+  padding: 0;
+  font-variation-settings: 'wght' 600;
+  font-weight: 600;
+  color: var(--base-font-color-bright);
+}
+h1 {
+  font-variation-settings: 'wdth' 107, 'wght' 650;
+  font-weight: 650;
+}
+
+strong,
+b {
+  font-weight: 500;
+}
+
+.jbx-main-h1 {
+  display: inline-block;
+  background-color: var(--accent-color);
+  font-size: calc(var(--font-size) * 2);
+  padding: 8px;
+}
+
+.jbx-h1 {
+  font-size: calc(var(--font-size) * 2);
+  font-weight: 700;
+}
+.jbx-h2 {
+  font-size: calc(var(--font-size) * 1.25);
+}
+.jbx-h3 {
+  font-size: calc(var(--font-size) * 1.125);
+}
+.jbx-h4 {
+  font-size: var(--font-size-small);
+  text-transform: uppercase;
+}
+
+/* base text */
+html,
+body,
+.jbx-button,
+.jbx-input {
+  font-size: var(--font-size);
+  line-height: 1;
+}
+
+.jbx-code-snippet {
+  border-radius: var(--size);
+  font-family: monaco, monospace;
+  border: none;
+  width: 100%;
+  font-size: calc(var(--size) - 3px);
+  line-height: 1.33;
+  padding: var(--size) calc(var(--size) * 1.2);
+  background: #ecf0f1;
+  color: #34495e;
+  resize: none;
+}
+.jbx-code-snippet:focus {
+  outline: none;
+}
+
+.jbx-code-area {
+  border-radius: var(--size);
+  font-family: monaco, monospace;
+  border: none;
+  width: 100%;
+  font-size: calc(var(--size) - 3px);
+  line-height: 1.33;
+  padding: var(--size) calc(var(--size) * 1.2);
+  background: #ecf0f1;
+  color: #34495e;
+  resize: none;
+  min-height: 120px;
+}
+.jbx-code-area:focus {
+  outline: none;
+}
+
+.jbx-button {
+  color: #000;
+  border-radius: var(--radius-small);
+  appearance: none;
+  user-select: none;
+  cursor: pointer;
+  display: inline-block;
+  background-color: #eee;
+  box-shadow: 3px 3px 0 #ccc;
+  padding: 0 calc(var(--size) / 2);
+  border: none;
+  height: calc(var(--size) * 2.5);
+  transition: top 0.1s, left 0.1s, box-shadow 0.05s;
+}
+.jbx-button:active {
+  top: 1px;
+  left: 1px;
+  box-shadow: 1px 1px 0 #ccc;
+}
+
+/* LINKS */
+.jbx-a {
+  cursor: pointer;
+  color: #000;
+  box-shadow: #0002 0 2px 0;
+  font-weight: 500;
+  text-decoration: none;
+}
+.jbx-a::after {
+  content: '↗';
+  color: #0004;
+  font-size: var(--font-size-small);
+  position: relative;
+  top: -1px;
+  right: -1px;
+  transition: top 0.3s, right 0.3s, color 0.3s;
+}
+.jbx-a:hover,
+.jbx-block-link:hover .jbx-a {
+  box-shadow: var(--accent-color) 0 2px 0;
+}
+.jbx-a:hover::after,
+.jbx-block-link:hover .jbx-a::after {
+  top: -3px;
+  right: -3px;
+  color: var(--accent-color);
+}
+
+.jbx-block-link {
+  min-width: 300px;
+  flex: 1;
+  text-decoration: none;
+  color: #000;
+  display: inline-block;
+  padding: var(--size);
+}
+a.jbx-a::before,
+.jbx-block-link::before {
+  content: '';
+  display: block;
+  position: absolute;
+  background-color: #ecf0f1;
+  z-index: -1;
+  transition: transform 0.2s, opacity 0.2s;
+  transform: scale(0.98) translatey(4px);
+  opacity: 0;
+  top: -4px;
+  left: -6px;
+  right: -6px;
+  bottom: -4px;
+}
+.jbx-block-link::before {
+  border-radius: 16px;
+}
+a.jbx-a::before {
+  border-radius: 8px;
+}
+a.jbx-a:hover::before,
+.jbx-block-link:hover::before {
+  transform: scale(1) translatey(0);
+  opacity: 1;
+}
+
+.jbx-a {
+  display: inline-block;
+}
+
+/* /LINKS */
+
+.jbx-small-text {
+  font-size: var(--font-size-small);
+}
+
+.jbx-container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);
+}
+
+.jbx-box {
+  flex: 1;
+}
+
+.jbx-inline {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.jbx-stack {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
+.jbx-text {
+  line-height: 1.4;
+}
+
+.jbx-input {
+  color: #777;
+  -webkit-text-fill-color: #777;
+  opacity: 1;
+  flex: 1;
+  display: block;
+  appearance: none;
+  border: none;
+  border-radius: var(--radius-small);
+  height: calc(var(--size) * 2.5);
+  background-color: #eee;
+  padding: 0 calc(var(--size) * 0.5);
+  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
+}
+
+.jbx-dropzone {
+  height: 120px;
+  flex: 1;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  flex-direction: column;
+  border: 2px dashed #000;
+  color: #000;
+  padding: 0;
+  cursor: pointer;
+}
+.jbx-dropzone:hover {
+  border-color: #999;
+}
+.jbx-dropzone span {
+  width: 100%;
+  cursor: pointer;
+}
+.jbx-dropzone input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.jbx-range {
+  flex: 1;
+  width: 100%;
+  appearance: none;
+  background-color: #bdc3c780;
+  height: var(--size);
+  border-radius: 0;
+  border-radius: var(--radius-small);
+}
+
+.jbx-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  box-shadow: none;
+  border-radius: 0;
+  height: calc(var(--size) * 2);
+  width: var(--size);
+  background-color: #000;
+  border: none;
+  border-radius: var(--radius-small);
+}
+.jbx-range::-moz-range-thumb {
+  appearance: none;
+  box-shadow: none;
+  border-radius: 0;
+  height: calc(var(--size) * 2);
+  width: var(--size);
+  background-color: #000;
+  border: none;
+  border-radius: var(--radius-small);
+}
+.jbx-range::-webkit-slider-runnable-track {
+  appearance: none;
+}
+.jbx-range:focus {
+  outline: none;
+}
+
+.jbx-bullet-container {
+  display: inline-block;
+  margin: -8px 4px -8px 0;
+}
+
+.jbx-bullet {
+  border: 1px solid #0001;
+  color: #000;
+  background-color: #0001;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(var(--font-size-small) - 3px);
+  height: calc(var(--size) * 1.25);
+  width: calc(var(--size) * 1.25);
+  border-radius: 100%;
+  top: -2px;
+  margin-right: 2px;
+}
+
+.jbx-hr {
+  margin: calc(var(--size) * 2) auto;
+  width: 38.2%;
+  border-radius: 0;
+  border: none;
+  border-top: 2px solid #ecf0f1;
+}