jbx 1.3.0 → 1.7.0

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "singleQuote": true,
+  "printWidth": 100,
+  "editor.formatOnSave": true,
+  "proseWrap": "always",
+  "tabWidth": 2,
+  "requireConfig": false,
+  "useTabs": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "semi": true
+}

package/CHANGELOG.md

@@ -1,11 +1,33 @@
-# 1.3.0
+# v1.7.0
+
+- Add `touch-action: pan-y;`.
+
+# v1.6.0
+
+- `Button` now moves when clicked.
+
+# v1.5.0
+
+- Add `SmallText`.
+- Add `MainHeader`.
+- Prevent `Checkbox` from resizing from responsive `size`.
+
+# v1.3.0
+
+- Add `Checkbox`.
+
+# v1.3.0
+
 - Add `CodeSnippet` component.
 
-# 1.2.0
+# v1.2.0
+
 - Increase padding of `Container`.
 
-# 1.1.0
+# v1.1.0
+
 - Add padding to `Container`.
 
-# 1.0.0
+# v1.0.0
+
 - Initial release

package/README.md

@@ -5,38 +5,22 @@ npm i jbx@latest capsize@latest styled-components@latest
 ```
 
 ```jsx
-import {
-  JBX,
-  HeaderH1,
-  Text,
-  Space,
-  Container,
-} from 'jbx';
+import { JBX, MainHeader, Text, Space, Container } from "jbx";
 
 function App() {
   return (
     <Container>
-      <JBX accent={'#eb4d4b'} />
-      <HeaderH1
-        style={{
-          fontWeight: 900,
-          display: 'inline-block',
-          width: 'auto',
-          padding: '6px',
-          backgroundColor: 'var(--accent-color)'
-        }}
-      >
-        React Blur
-      </HeaderH1>
+      <JBX accent={"#eb4d4b"} />
+      <MainHeader>React Blur</MainHeader>
       <Space h={1} />
       <Text>
-        Tool that creates animated CSS transitions. Add sprites and get the code ready to paste in
-        your site.
+        Tool that creates animated CSS transitions. Add sprites and get the code
+        ready to paste in your site.
       </Text>
       <Space h={2} />
       <Text>
-        Tool that creates animated CSS transitions. Add sprites and get the code ready to paste in
-        your site.
+        Tool that creates animated CSS transitions. Add sprites and get the code
+        ready to paste in your site.
       </Text>
     </Container>
   );
@@ -44,4 +28,3 @@ function App() {
 
 export default App;
 ```
-

package/index.js

@@ -1,9 +1,22 @@
-import React from "react";
+import { createElement, Fragment } from 'react';
 
-import Styled from "styled-components";
-import capsize from "capsize";
+import Styled from 'styled-components';
+import capsize from 'capsize';
 
-import { createGlobalStyle } from "styled-components";
+import { createGlobalStyle } from 'styled-components';
+
+const BASE_SIZE = 16;
+const SIZE = window.innerHeight > 640 ? 16 : 14;
+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 {
@@ -23,12 +36,14 @@ export const JBX = createGlobalStyle`
 
   body {
     touch-action: manipulation;
+    touch-action: pan-y;
   }
 
   body,
   input,
   textarea {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+    font-size: 16px;
   }
 
   body {
@@ -41,109 +56,108 @@ export const JBX = createGlobalStyle`
   }
 `;
 
-const SIZE = window.innerHeight > 640 ? 16 : 14;
-
-const SPACE = SIZE;
-const BASE_FONT_SIZE = SIZE;
-
-const fontMetrics = {
-  capHeight: 1364,
-  ascent: 1950,
-  descent: -494,
-  unitsPerEm: 2048,
-};
-
 const BaseText = Styled.div({});
 
 function textProps(capsizeConfig) {
   const capsizeComputed = {
     fontMetrics,
     lineGap: BASE_FONT_SIZE * 0.618,
-    ...capsizeConfig,
+    ...capsizeConfig
   };
 
   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`,
+  maxWidth: '1080px',
+  margin: '0 auto',
+  padding: `${SIZE * 2.5}px ${SIZE * 1.5}px ${SIZE * 4}px`
 });
 
 export const Text = Styled(BaseText)({
-  margin: "0",
   ...textProps({
-    capHeight: (BASE_FONT_SIZE * 3) / 3,
-  }),
+    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",
+  appearance: 'none',
+  userSelect: 'none',
+  cursor: 'pointer',
+  display: 'inline-block',
+  backgroundColor: '#eee',
+  boxShadow: '3px 3px 0 #ccc',
   padding: `0 ${SPACE / 2}px`,
-  border: "none",
+  border: 'none',
   height: SPACE * 2.5,
+  '&:active': {
+    top: 1,
+    left: 1,
+    boxShadow: '2px 2px 0 #ccc'
+  }
 });
 
-export const Button = function (props) {
+export const Button = function Button(props) {
   const { children, ...other } = props;
-  return React.createElement(ButtonContainer, other, React.createElement(Text, {}, children));
+  return createElement(ButtonContainer, other, createElement(Text, {}, children));
 };
 
 export const Input = Styled.input({
-  "-webkit-text-fill-color": "#777",
+  '-webkit-text-fill-color': '#777',
   opacity: 1,
   flex: 1,
-  display: "block",
-  appearance: "none",
-  border: "none",
+  display: 'block',
+  appearance: 'none',
+  border: 'none',
   borderRadius: 0,
   height: SPACE * 2.5,
-  backgroundColor: "#eee",
+  backgroundColor: '#eee',
   ...textProps({
-    capHeight: (BASE_FONT_SIZE * 3) / 3,
+    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",
+  color: '#777'
 });
 
 export const Range = Styled.input({
   flex: 1,
-  width: "100%",
-  appearance: "none",
-  backgroundColor: "var(--accent-color)",
+  width: '100%',
+  appearance: 'none',
+  backgroundColor: 'var(--accent-color)',
   height: SPACE,
   borderRadius: 0,
-  "&::-webkit-slider-thumb": {
-    appearance: "none",
-    boxShadow: "none",
+  '&::-webkit-slider-thumb': {
+    appearance: 'none',
+    boxShadow: 'none',
     borderRadius: 0,
     height: SPACE * 2,
     width: SPACE,
-    backgroundColor: "#000",
-    border: "none",
+    backgroundColor: '#000',
+    border: 'none'
   },
-  "&::-moz-range-thumb": {
-    appearance: "none",
-    boxShadow: "none",
+  '&::-moz-range-thumb': {
+    appearance: 'none',
+    boxShadow: 'none',
     borderRadius: 0,
     height: SPACE * 2,
     width: SPACE,
-    backgroundColor: "#000",
-    border: "none",
+    backgroundColor: '#000',
+    border: 'none'
   },
-  "&::-webkit-slider-runnable-track": {
-    appearance: "none",
-  },
-  ":focus": {
-    outline: "none",
+  '&::-webkit-slider-runnable-track': {
+    appearance: 'none'
   },
+  ':focus': {
+    outline: 'none'
+  }
 });
 
 export const HeaderH4 = Styled.h4({
@@ -153,8 +167,8 @@ export const HeaderH4 = Styled.h4({
   fontWeight: 700,
   ...textProps({
     capHeight: BASE_FONT_SIZE,
-    lineGap: BASE_FONT_SIZE,
-  }),
+    lineGap: BASE_FONT_SIZE
+  })
 });
 export const HeaderH3 = Styled.h3({
   margin: 0,
@@ -163,8 +177,8 @@ export const HeaderH3 = Styled.h3({
   fontWeight: 500,
   ...textProps({
     capHeight: BASE_FONT_SIZE * 1 * 1.25,
-    lineGap: BASE_FONT_SIZE,
-  }),
+    lineGap: BASE_FONT_SIZE
+  })
 });
 export const HeaderH2 = Styled.h2({
   margin: 0,
@@ -173,35 +187,59 @@ export const HeaderH2 = Styled.h2({
   fontWeight: 500,
   ...textProps({
     capHeight: BASE_FONT_SIZE * 1.5,
-    lineGap: 12,
-  }),
+    lineGap: 12
+  })
 });
 export const HeaderH1 = Styled.h1({
   letterSpacing: -1,
-  margin: "2px 0",
+  margin: '2px 0',
   fontWeight: 700,
   ...textProps({
     capHeight: BASE_FONT_SIZE * 3 - 4,
-    lineGap: BASE_FONT_SIZE,
-  }),
+    lineGap: BASE_FONT_SIZE
+  })
 });
 
+export const MainHeader = function MainHeader({ children }) {
+  const content = String(children).split(' ');
+
+  return createElement(
+    Fragment,
+    {},
+    content.map((word) =>
+      createElement(
+        HeaderH1,
+        {
+          key: word,
+          style: {
+            fontWeight: 900,
+            display: 'inline-block',
+            width: 'auto',
+            padding: '6px',
+            margin: 0,
+            backgroundColor: 'var(--accent-color)'
+          }
+        },
+        word
+      )
+    )
+  );
+};
+
 export const A = Styled.a({
-  // color: "#2980b9",
-  color: "#000",
-  // backgroundColor: "rgba(32,32,32,0.1)",
-  boxShadow: "var(--accent-color) 0 2px 0, inset var(--accent-color) 0 -2px 0",
+  color: '#000',
+  boxShadow: 'var(--accent-color) 0 2px 0, inset var(--accent-color) 0 -2px 0',
   fontWeight: 700,
-  textDecoration: "none",
-  "&:hover": {
-    color: "#34495e",
-  },
+  textDecoration: 'none',
+  '&:hover': {
+    color: '#34495e'
+  }
 });
 
 export const Space = Styled.div({
-  display: (props) => (props.inline ? "inline-block" : "block"),
+  display: (props) => (props.inline ? 'inline-block' : 'block'),
   height: (props) => `${SPACE * props.h}px`,
-  width: (props) => `${SPACE * props.w}px`,
+  width: (props) => `${SPACE * props.w}px`
 });
 
 export const Box = Styled.div({
@@ -215,122 +253,184 @@ export const Box = Styled.div({
     return paddingArr.map((paddingValue) => `${paddingValue * SPACE}px`).join(` `);
   },
 
-  "@media (max-width: 768px)": {
-    display: ({ hideOnSmall }) => (hideOnSmall ? "none" : undefined),
+  '@media (max-width: 768px)': {
+    display: ({ hideOnSmall }) => (hideOnSmall ? 'none' : undefined)
   },
 
-  "@media (max-width: 1080px)": {
-    display: ({ hideOnMedium }) => (hideOnMedium ? "none" : undefined),
-  },
+  '@media (max-width: 1080px)': {
+    display: ({ hideOnMedium }) => (hideOnMedium ? 'none' : undefined)
+  }
 });
 
 export const Inline = Styled.div({
-  display: "flex",
-  flexWrap: "wrap",
+  display: 'flex',
+  flexWrap: 'wrap',
   marginLeft: ({ h }) => `${h * SPACE}px`,
   marginRight: ({ h }) => `${h * SPACE}px`,
   marginTop: ({ v }) => `${v * SPACE}px`,
-  marginBottom: ({ v }) => `${v * SPACE}px`,
+  marginBottom: ({ v }) => `${v * SPACE}px`
 });
 
 export const LinkButton = Styled.a({
   capHeight: BASE_FONT_SIZE,
-  color: "#3498db",
-  cursor: "pointer",
+  color: '#3498db',
+  cursor: 'pointer',
   borderRadius: 5,
-  borderTop: "1px solid #3498db10",
-  borderBottom: "1px solid #0000",
-  backgroundColor: "#3498db20",
+  borderTop: '1px solid #3498db10',
+  borderBottom: '1px solid #0000',
+  backgroundColor: '#3498db20',
   height: BASE_FONT_SIZE * 2,
-  display: "flex",
-  alignItems: "center",
-  alignContent: "center",
-  justifyContent: "center",
+  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`,
-  },
+  '&: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",
+  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",
+  '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'
   },
-  "& input": {
-    position: "absolute",
-    top: "0",
-    left: "0",
-    height: "100%",
-    width: "100%",
-    opacity: "0",
-    cursor: "pointer",
+  '&:hover': {
+    'border-color': '#999'
   },
+  '& 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`,
+  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`,
+  padding: `${SIZE / 4}px 0`
 });
 
 export const Tabs = Styled.div({});
 
 export const Tab = Styled.div({
-  userSelect: "none",
+  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),
+  cursor: 'pointer',
+  backgroundColor: (props) => (props.active ? '#000' : props.info ? '#fff' : '#ecf0f1'),
+  color: (props) => (props.active ? '#fff' : '#000'),
+  paddingLeft: (props) => (props.info ? 0 : undefined)
 });
 
 export const CodeSnippet = Styled.pre({
-  borderRadius: SIZE / 2,
-  "font-family": "monaco, monospace",
-  border: "none",
-  width: "100%",
-  "font-size": SIZE - 2,
-  "line-height": "1.5",
+  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",
-  },
+  background: '#ecf0f1',
+  color: '#34495e',
+  ':focus': {
+    outline: 'none'
+  }
+});
+
+export const CheckboxHidden = Styled.div(({ checked }) => {
+  return {
+    height: BASE_SIZE * 2 - 4,
+    width: BASE_SIZE * 2 - 4,
+    paddingTop: 2,
+    paddingLeft: 2,
+    backgroundColor: checked ? 'var(--accent-color)' : 'white',
+    borderRadius: BASE_RADIUS,
+    boxShadow: checked
+      ? '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'
+  };
 });
 
+export const Checkbox = function Checkbox({ label, checked, onChange }) {
+  return createElement(
+    Inline,
+    {
+      onClick: () => {
+        if (onChange) {
+          onChange(!checked);
+        }
+      },
+      style: {
+        alignItems: 'center',
+        cursor: 'pointer'
+      }
+    },
+    [
+      createElement(
+        CheckboxHidden,
+        {
+          key: 0,
+          checked
+        },
+        createElement(
+          'svg',
+          {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: '24',
+            height: '24',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '2',
+            className: 'feather feather-check',
+            viewBox: '0 0 24 24',
+            color: checked ? 'white' : '#ddd'
+          },
+          createElement('path', {
+            d: 'M20 6L9 17 4 12'
+          })
+        )
+      ),
+      createElement(Space, { key: 1, w: 0.5 }),
+      createElement(Text, { key: 2, style: { userSelect: 'none' } }, label)
+    ]
+  );
+};
+
 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",
-  },
+  '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,17 +1,8 @@
 {
   "name": "jbx",
-  "version": "1.3.0",
+  "version": "1.7.0",
   "description": "",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "peerDependencies": {
-    "capsize": "^1.1.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "styled-components": "^5.2.0"
-  },
-  "author": "",
-  "license": "ISC"
+  "author": "hi@javier.xyz",
+  "license": "Unlicensed"
 }