jbx 1.7.4 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 2.0.0
+
+- Drop `styled-components` and `capsize`.
+
 # v1.7.0
 
 - Add `touch-action: pan-y;`.

package/index.js

@@ -1,205 +1,101 @@
-import React, { Fragment } from 'react';
-
-import Styled from 'styled-components';
-import capsize from 'capsize';
+import './style.css';
 
-import { createGlobalStyle } from 'styled-components';
+import React, { Fragment } from 'react';
 
 const SIZE = window.innerWidth > 1280 ? 16 : window.innerWidth > 640 ? 14 : 12;
-const BASE_SIZE = SIZE;
 const BASE_RADIUS = SIZE / 2;
-const SPACE = SIZE;
 const BASE_FONT_SIZE = SIZE;
 
-const fontMetrics = {
-  capHeight: 1364,
-  ascent: 1950,
-  descent: -494,
-  unitsPerEm: 2048
-};
-
-export const JBX = createGlobalStyle`
-  html {
-    box-sizing: border-box;
-  }
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-
-  * {
-    padding: 0;
-    margin: 0;
-    position: relative;
-  }
-
-  body {
-    touch-action: manipulation;
-    touch-action: pan-y;
-  }
-
-  body,
-  input,
-  textarea {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
-  }
-
-  body {
-    background: #fcfcfd;
-    color: #000;
-  }
-
-  :root {
-    --accent-color: ${(props) => props.accent};
-  }
-`;
-
-const BaseText = Styled.div({});
-
-function textProps(capsizeConfig) {
-  const capsizeComputed = {
-    fontMetrics,
-    lineGap: BASE_FONT_SIZE * 0.618,
-    ...capsizeConfig
+function Component(className, styleSrc, config = {}) {
+  const { element = `div`, styleProps } = config;
+
+  return function MakeComponent({ children, ...props }) {
+    const passProps = styleProps
+      ? Object.keys(props)
+          .filter((e) => !styleProps.includes(e))
+          .reduce((acc, p) => {
+            acc[p] = props[p];
+            return acc;
+          }, {})
+      : props;
+
+    return React.createElement(
+      element,
+      {
+        className,
+        style: typeof styleSrc === 'function' ? styleSrc(props) : styleSrc,
+        ...passProps
+      },
+      children
+    );
   };
-
-  return capsize(capsizeComputed);
 }
 
-export const Container = Styled.div({
-  maxWidth: '1080px',
-  margin: '0 auto',
-  padding: `${SIZE * 2.5}px ${SIZE * 1.5}px ${SIZE * 4}px`
-});
-
-export const Text = Styled(BaseText)({
-  ...textProps({
-    capHeight: BASE_FONT_SIZE
-  })
-});
-
-export const SmallText = Styled(BaseText)({
-  ...textProps({
-    capHeight: BASE_FONT_SIZE * 0.8,
-    lineGap: BASE_FONT_SIZE / 3
-  })
-});
-
-export const ButtonContainer = Styled.button({
-  appearance: 'none',
-  userSelect: 'none',
-  cursor: 'pointer',
-  display: 'inline-block',
-  backgroundColor: '#eee',
-  boxShadow: '3px 3px 0 #ccc',
-  padding: `0 ${SPACE / 2}px`,
-  border: 'none',
-  height: SPACE * 2.5,
-  '&:active': {
-    top: 1,
-    left: 1,
-    boxShadow: '2px 2px 0 #ccc'
-  }
-});
-
-export const Button = function Button(props) {
-  const { children, ...other } = props;
-  return React.createElement(ButtonContainer, other, React.createElement(Text, {}, children));
-};
-
-export const Input = Styled.input({
-  '-webkit-text-fill-color': '#777',
-  opacity: 1,
-  flex: 1,
-  display: 'block',
-  appearance: 'none',
-  border: 'none',
-  borderRadius: 0,
-  height: SPACE * 2.5,
-  backgroundColor: '#eee',
-  ...textProps({
-    capHeight: (BASE_FONT_SIZE * 3) / 3
-  }),
-  padding: `0 ${SPACE / 2}px`,
-  boxShadow: `inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0`,
-  color: '#777'
-});
-
-export const Range = Styled.input({
-  flex: 1,
-  width: '100%',
-  appearance: 'none',
-  backgroundColor: 'var(--accent-color)',
-  height: SPACE,
-  borderRadius: 0,
-  '&::-webkit-slider-thumb': {
-    appearance: 'none',
-    boxShadow: 'none',
-    borderRadius: 0,
-    height: SPACE * 2,
-    width: SPACE,
-    backgroundColor: '#000',
-    border: 'none'
-  },
-  '&::-moz-range-thumb': {
-    appearance: 'none',
-    boxShadow: 'none',
-    borderRadius: 0,
-    height: SPACE * 2,
-    width: SPACE,
-    backgroundColor: '#000',
-    border: 'none'
-  },
-  '&::-webkit-slider-runnable-track': {
-    appearance: 'none'
-  },
-  ':focus': {
-    outline: 'none'
-  }
-});
-
-export const HeaderH4 = Styled.h4({
-  margin: 0,
-
-  letterSpacing: -0.11,
-  fontWeight: 700,
-  ...textProps({
-    capHeight: BASE_FONT_SIZE,
-    lineGap: BASE_FONT_SIZE
-  })
-});
-export const HeaderH3 = Styled.h3({
-  margin: 0,
-
-  letterSpacing: -0.22,
-  fontWeight: 500,
-  ...textProps({
-    capHeight: BASE_FONT_SIZE * 1 * 1.25,
-    lineGap: BASE_FONT_SIZE
-  })
-});
-export const HeaderH2 = Styled.h2({
-  margin: 0,
-
-  letterSpacing: -0.33,
-  fontWeight: 500,
-  ...textProps({
-    capHeight: BASE_FONT_SIZE * 1.5,
-    lineGap: 12
-  })
-});
-export const HeaderH1 = Styled.h1({
-  letterSpacing: -1,
-  margin: '2px 0',
-  fontWeight: 700,
-  ...textProps({
-    capHeight: BASE_FONT_SIZE * 3 - 4,
-    lineGap: BASE_FONT_SIZE
-  })
-});
-
-export const MainHeader = function MainHeader({ children }) {
+export const Container = Component(`jbx-container`);
+
+export const Text = Component(`jbx-text`);
+
+export const SmallText = Component(`jbx-small-text`);
+
+export const Button = Component(`jbx-button`, {}, { element: 'button' });
+
+// export const Input = Styled.input({
+//   '-webkit-text-fill-color': '#777',
+//   opacity: 1,
+//   flex: 1,
+//   display: 'block',
+//   appearance: 'none',
+//   border: 'none',
+//   borderRadius: 0,
+//   height: SPACE * 2.5,
+//   backgroundColor: '#eee',
+//   ...textProps({
+//     capHeight: (BASE_FONT_SIZE * 3) / 3
+//   }),
+//   padding: `0 ${SPACE / 2}px`,
+//   boxShadow: `inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0`,
+//   color: '#777'
+// });
+
+// export const Range = Styled.input({
+//   flex: 1,
+//   width: '100%',
+//   appearance: 'none',
+//   backgroundColor: 'var(--accent-color)',
+//   height: SPACE,
+//   borderRadius: 0,
+//   '&::-webkit-slider-thumb': {
+//     appearance: 'none',
+//     boxShadow: 'none',
+//     borderRadius: 0,
+//     height: SPACE * 2,
+//     width: SPACE,
+//     backgroundColor: '#000',
+//     border: 'none'
+//   },
+//   '&::-moz-range-thumb': {
+//     appearance: 'none',
+//     boxShadow: 'none',
+//     borderRadius: 0,
+//     height: SPACE * 2,
+//     width: SPACE,
+//     backgroundColor: '#000',
+//     border: 'none'
+//   },
+//   '&::-webkit-slider-runnable-track': {
+//     appearance: 'none'
+//   },
+//   ':focus': {
+//     outline: 'none'
+//   }
+// });
+
+export const HeaderH1 = Component(`jbx-h${1}`, null, { element: 'h1' });
+export const HeaderH2 = Component(`jbx-h${2}`, null, { element: 'h2' });
+export const HeaderH3 = Component(`jbx-h${3}`, null, { element: 'h3' });
+export const HeaderH4 = Component(`jbx-h${4}`, null, { element: 'h4' });
+
+export const MainHeader = function MainHeader({ children, style }) {
   const content = String(children).split(' ');
 
   return React.createElement(
@@ -216,7 +112,8 @@ export const MainHeader = function MainHeader({ children }) {
             width: 'auto',
             padding: '6px',
             margin: 0,
-            backgroundColor: 'var(--accent-color)'
+            backgroundColor: 'var(--accent-color)',
+            ...style
           }
         },
         word
@@ -225,139 +122,130 @@ export const MainHeader = function MainHeader({ children }) {
   );
 };
 
-export const A = Styled.a({
-  color: '#000',
-  boxShadow: 'var(--accent-color) 0 2px 0, inset var(--accent-color) 0 -2px 0',
-  fontWeight: 700,
-  textDecoration: 'none',
-  '&:hover': {
-    color: '#34495e'
-  }
-});
-
-export const Space = Styled.div({
-  display: (props) => (props.inline ? 'inline-block' : 'block'),
-  height: (props) => `${SPACE * props.h}px`,
-  width: (props) => `${SPACE * props.w}px`
-});
-
-export const Box = Styled.div({
-  flex: (props) => props.flex,
-  minWidth: (props) => props.minWidth,
-  padding: ({ padding }) => {
-    if (!padding) return `0`;
-
-    const paddingArr = [padding].flat();
-
-    return paddingArr.map((paddingValue) => `${paddingValue * SPACE}px`).join(` `);
-  },
-
-  '@media (max-width: 768px)': {
-    display: ({ hideOnSmall }) => (hideOnSmall ? 'none' : undefined)
-  },
-
-  '@media (max-width: 1080px)': {
-    display: ({ hideOnMedium }) => (hideOnMedium ? 'none' : undefined)
-  }
-});
+export const A = Component(`jbx-a`, null, { element: 'a' });
 
-export const Inline = Styled.div({
-  display: 'flex',
-  flexWrap: 'wrap',
-  marginLeft: ({ h }) => `${h * SPACE}px`,
-  marginRight: ({ h }) => `${h * SPACE}px`,
-  marginTop: ({ v }) => `${v * SPACE}px`,
-  marginBottom: ({ v }) => `${v * SPACE}px`
-});
+export const Space = Component(`jbx-space`, (props) => ({
+  display: props.inline ? 'inline-block' : 'block',
+  height: `${SIZE * props.h}px`,
+  width: `${SIZE * props.w}px`
+}));
 
-export const LinkButton = Styled.a({
-  capHeight: BASE_FONT_SIZE,
-  color: '#3498db',
-  cursor: 'pointer',
-  borderRadius: 5,
-  borderTop: '1px solid #3498db10',
-  borderBottom: '1px solid #0000',
-  backgroundColor: '#3498db20',
-  height: BASE_FONT_SIZE * 2,
-  display: 'flex',
-  alignItems: 'center',
-  alignContent: 'center',
-  justifyContent: 'center',
-  padding: 0,
-  '&:hover': {
-    boxShadow: `rgba(0, 0, 0, 0.1) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 3px 12px`
-  }
+export const Box = Component(`jbx-box`, ({ hideOnSmall, flex, minWidth }) => {
+  return {
+    flex,
+    minWidth,
+    padding: padding
+      ? [padding]
+          .flat()
+          .map((paddingValue) => `${paddingValue * SIZE}px`)
+          .join(` `)
+      : null
+  };
 });
 
-export const Dropzone = Styled.div({
-  height: '120px',
-  flex: 1,
-  'max-width': '320px',
-  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',
-  '& span': {
-    width: '100%',
-    cursor: 'pointer'
+export const Inline = Component(`jbx-inline`, ({ v, h, gap }) => ({
+  marginLeft: `${h * SIZE}px`,
+  marginRight: `${h * SIZE}px`,
+  marginTop: `${v * SIZE}px`,
+  marginBottom: `${v * SIZE}px`,
+  gap: `${gap * SIZE}px`
+}));
+
+export const Stack = Component(`jbx-stack`, ({ v, h, gap }) => ({
+  marginLeft: `${h * SIZE}px`,
+  marginRight: `${h * SIZE}px`,
+  marginTop: `${v * SIZE}px`,
+  marginBottom: `${v * SIZE}px`,
+  gap: `${gap * SIZE}px`
+}));
+
+// export const LinkButton = Styled.a({
+//   capHeight: BASE_FONT_SIZE,
+//   color: '#3498db',
+//   cursor: 'pointer',
+//   borderRadius: 5,
+//   borderTop: '1px solid #3498db10',
+//   borderBottom: '1px solid #0000',
+//   backgroundColor: '#3498db20',
+//   height: BASE_FONT_SIZE * 2,
+//   display: 'flex',
+//   alignItems: 'center',
+//   alignContent: 'center',
+//   justifyContent: 'center',
+//   padding: 0,
+//   '&:hover': {
+//     boxShadow: `rgba(0, 0, 0, 0.1) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 3px 12px`
+//   }
+// });
+
+// export const Dropzone = Styled.div({
+//   height: '120px',
+//   flex: 1,
+//   'max-width': '320px',
+//   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',
+//   '& span': {
+//     width: '100%',
+//     cursor: 'pointer'
+//   },
+//   '&:hover': {
+//     'border-color': '#999'
+//   },
+//   '& input': {
+//     position: 'absolute',
+//     top: '0',
+//     left: '0',
+//     height: '100%',
+//     width: '100%',
+//     opacity: '0',
+//     cursor: 'pointer'
+//   }
+// });
+
+export const Ul = Component(
+  `jbx-ul`,
+  {
+    margin: 0,
+    padding: `0 0 0 ${BASE_FONT_SIZE / 4}px`
   },
-  '&:hover': {
-    'border-color': '#999'
+  { element: 'ul' }
+);
+
+export const Li = Component(
+  `jbx-li`,
+  {
+    margin: `0 0 0 ${SIZE}px`,
+    padding: `${SIZE / 4}px 0`
   },
-  '& input': {
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    height: '100%',
-    width: '100%',
-    opacity: '0',
-    cursor: 'pointer'
-  }
-});
-
-export const Ul = Styled.ul({
-  margin: 0,
-  padding: `0 0 0 ${BASE_FONT_SIZE / 4}px`
-});
-
-export const Li = Styled.li({
-  margin: `0 0 0 ${SIZE}px`,
-  padding: `${SIZE / 4}px 0`
-});
-
-export const Tabs = Styled.div({});
-
-export const Tab = Styled.div({
-  userSelect: 'none',
-  padding: SIZE / 2,
-  cursor: 'pointer',
-  backgroundColor: (props) => (props.active ? '#000' : props.info ? '#fff' : '#ecf0f1'),
-  color: (props) => (props.active ? '#fff' : '#000'),
-  paddingLeft: (props) => (props.info ? 0 : undefined)
-});
+  { element: 'li' }
+);
+
+export const Tabs = Component(`jbx-tabs`);
+
+export const Tab = Component(
+  `jbx-tabs--tab`,
+  ({ info, active }) => ({
+    userSelect: 'none',
+    cursor: 'pointer',
+    backgroundColor: active ? '#000' : info ? '#fff' : '#ecf0f1',
+    color: active ? '#fff' : '#000',
+    padding: SIZE / 2,
+    paddingLeft: info ? 0 : SIZE / 2
+  }),
+  { styleProps: ['info', 'active'] }
+);
 
-export const CodeSnippet = Styled.pre({
-  borderRadius: BASE_RADIUS,
-  'font-family': 'monaco, monospace',
-  border: 'none',
-  width: '100%',
-  'font-size': SIZE - 2,
-  'line-height': '1.5',
-  padding: SIZE,
-  background: '#ecf0f1',
-  color: '#34495e',
-  ':focus': {
-    outline: 'none'
-  }
-});
+export const CodeSnippet = Component(`jbx-code-snippet`, null, { element: 'pre' });
 
-export const CheckboxHidden = Styled.div(({ checked }) => {
+export const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ checked }) => {
   return {
     height: BASE_SIZE * 2 - 4,
     width: BASE_SIZE * 2 - 4,
@@ -397,8 +285,8 @@ export const Checkbox = function Checkbox({ label, checked, onChange }) {
           'svg',
           {
             xmlns: 'http://www.w3.org/2000/svg',
-            width: 12 + BASE_SIZE,
-            height: 12 + BASE_SIZE,
+            width: BASE_SIZE * 2 - 8,
+            height: BASE_SIZE * 2 - 8,
             fill: 'none',
             stroke: 'currentColor',
             strokeLinecap: 'round',
@@ -418,18 +306,3 @@ export const Checkbox = function Checkbox({ label, checked, onChange }) {
     ]
   );
 };
-
-export const Code = Styled.textarea({
-  'font-family': 'monaco, monospace',
-  border: 'none',
-  width: '100%',
-  height: '256px',
-  'font-size': '12px',
-  'line-height': '1.309',
-  padding: '16px 18px',
-  background: '#ecf0f1',
-  color: '#34495e',
-  ':focus': {
-    outline: 'none'
-  }
-});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbx",
-  "version": "1.7.4",
+  "version": "2.0.0",
   "description": "",
   "main": "index.js",
   "author": "hi@javier.xyz",

package/style.css

@@ -0,0 +1,136 @@
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+:root {
+  --size: 16px;
+  --base-font-size: 24px;
+  --base-radius: #95a5a6;
+}
+
+* {
+  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;
+}
+
+/* base text */
+body,
+.jbx-button {
+  font-size: var(--base-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) - 2px);
+  line-height: 1.5;
+  padding: var(--size);
+  background: #ecf0f1;
+  color: #34495e;
+}
+.jbx-code-snippet:focus {
+  outline: none;
+}
+
+.jbx-button {
+  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);
+}
+.jbx-button:active {
+  top: 1;
+  left: 1;
+  box-shadow: 2px 2px 0 #ccc;
+}
+
+.jbx-a {
+  color: #000;
+  box-shadow: var(--accent-color) 0 2px 0, inset var(--accent-color) 0 -2px 0;
+  font-weight: 700;
+  text-decoration: none;
+}
+.jbx-a:hover {
+  color: '#34495e';
+}
+
+.jbx-h1,
+.jbx-h2,
+.jbx-h3,
+.jbx-h4 {
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  font-weight: 400;
+}
+
+.jbx-h4 {
+  font-size: calc(var(--base-font-size));
+  letter-spacing: -0.11px;
+}
+.jbx-h3 {
+  font-size: calc(var(--base-font-size) * 1.25);
+  letter-spacing: -0.22px;
+}
+.jbx-h2 {
+  font-size: calc(var(--base-font-size) * 1.5);
+  letter-spacing: -0.33px;
+}
+.jbx-h1 {
+  font-size: calc(var(--base-font-size) * 2.5);
+  letter-spacing: -1px;
+}
+
+.jbx-small-text {
+  font-size: calc(var(--base-font-size) * 0.8);
+  line-height: calc(var(--base-font-size) * 0.6);
+}
+
+.jbx-container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);
+}
+
+.jbx-inline {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.jbx-stack {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}