jbx 2.0.1 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# 2.3.0
+
+- Add CodeTextarea.
+
+# 2.2.0
+
+- Restore `Dropzone`.
+
+# 2.1.0
+
+- Restore `input` and `range`.
+- Export `Component`.
+
 # 2.0.1
 
 - Restore responsive text size.

package/index.js

@@ -6,7 +6,7 @@ const SIZE = window.innerWidth > 1280 ? 16 : window.innerWidth > 640 ? 14 : 12;
 const BASE_RADIUS = SIZE / 2;
 const BASE_FONT_SIZE = SIZE;
 
-function Component(className, styleSrc, config = {}) {
+export function Component(className, styleSrc, config = {}) {
   const { element = `div`, styleProps } = config;
 
   return function MakeComponent({ children, ...props }) {
@@ -39,56 +39,8 @@ 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 Input = Component(`jbx-input`, null, { element: 'input' });
+export const Range = Component(`jbx-range`, null, { element: 'input' });
 
 export const HeaderH1 = Component(`jbx-h${1}`, null, { element: 'h1' });
 export const HeaderH2 = Component(`jbx-h${2}`, null, { element: 'h2' });
@@ -130,7 +82,7 @@ export const Space = Component(`jbx-space`, (props) => ({
   width: `${SIZE * props.w}px`
 }));
 
-export const Box = Component(`jbx-box`, ({ hideOnSmall, flex, minWidth }) => {
+export const Box = Component(`jbx-box`, ({ padding, hideOnSmall, flex, minWidth }) => {
   return {
     flex,
     minWidth,
@@ -178,37 +130,7 @@ export const Stack = Component(`jbx-stack`, ({ v, h, gap }) => ({
 //   }
 // });
 
-// 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 Dropzone = Component(`jbx-dropzone`);
 
 export const Ul = Component(
   `jbx-ul`,
@@ -244,6 +166,7 @@ export const Tab = Component(
 );
 
 export const CodeSnippet = Component(`jbx-code-snippet`, null, { element: 'pre' });
+export const CodeTextarea = Component(`jbx-code-area`, null, { element: 'textarea' });
 
 export const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ checked }) => {
   return {

package/package.json

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

package/style.css

@@ -49,7 +49,8 @@ body {
 /* base text */
 html,
 body,
-.jbx-button {
+.jbx-button,
+.jbx-input {
   font-size: var(--base-font-size);
   line-height: 1;
 }
@@ -59,16 +60,34 @@ body,
   font-family: monaco, monospace;
   border: none;
   width: 100%;
-  font-size: calc(var(--size) - 2px);
-  line-height: 1.5;
-  padding: var(--size);
+  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 {
   appearance: none;
   user-select: none;
@@ -103,7 +122,7 @@ body,
   line-height: 1;
   padding: 0;
   margin: 0;
-  font-weight: 400;
+  font-weight: 600;
 }
 
 .jbx-h4 {
@@ -147,3 +166,101 @@ body,
   flex-wrap: wrap;
   flex-direction: column;
 }
+
+.jbx-input {
+  color: #777;
+  -webkit-text-fill-color: #777;
+  opacity: 1;
+  flex: 1;
+  display: block;
+  appearance: none;
+  border: none;
+  border-radius: 0;
+  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;
+  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;
+}
+.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;
+}
+
+/*export const Dropzone = Styled.div({
+
+
+
+  },
+  '& 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: var(--accent-color);
+  height: var(--size);
+  border-radius: 0;
+}
+
+.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;
+}
+.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;
+}
+.jbx-range::-webkit-slider-runnable-track {
+  appearance: none;
+}
+.jbx-range:focus {
+  outline: none;
+}