jbx 2.3.0 → 2.5.0

package/roll.js

@@ -0,0 +1,235 @@
+import React, { Fragment } from 'react';
+
+// import './style.css';
+
+const SIZE = window.innerWidth > 1280 ? 16 : window.innerWidth > 640 ? 14 : 12;
+const BASE_RADIUS = SIZE / 3;
+const BASE_FONT_SIZE = SIZE;
+
+function Component(className, styleSrc = {}, config = {}) {
+  const { element = `div`, styleProps } = config;
+
+  return function MakeComponent({ children, style = {}, ...props }) {
+    const passProps = styleProps
+      ? Object.keys(props)
+        .filter((e) => !styleProps.includes(e))
+        .reduce((acc, p) => {
+          acc[p] = props[p];
+          return acc;
+        }, {})
+      : props;
+
+    const calculatedStyle = typeof styleSrc === 'function' ? styleSrc(props) : styleSrc;
+
+    return React.createElement(
+      element,
+      {
+        className,
+        style: { ...style, ...calculatedStyle },
+        ...passProps
+      },
+      children
+    );
+  };
+}
+
+const Container = Component(`jbx-container`);
+
+const Text = Component(`jbx-text`);
+
+const SmallText = Component(`jbx-small-text`);
+
+const Button = Component(`jbx-button`, {}, { element: 'button' });
+
+const Input = Component(`jbx-input`, null, { element: 'input' });
+const Range = Component(`jbx-range`, null, { element: 'input' });
+
+const HeaderH1 = Component(`jbx-h${1}`, null, { element: 'h1' });
+const HeaderH2 = Component(`jbx-h${2}`, null, { element: 'h2' });
+const HeaderH3 = Component(`jbx-h${3}`, null, { element: 'h3' });
+const HeaderH4 = Component(`jbx-h${4}`, null, { element: 'h4' });
+
+const MainHeader = function MainHeader({ children, style }) {
+  const content = String(children).split(' ');
+
+  return React.createElement(
+    Fragment,
+    {},
+    content.map((word) =>
+      React.createElement(
+        HeaderH1,
+        {
+          key: word,
+          style: {
+            fontWeight: 900,
+            display: 'inline-block',
+            width: 'auto',
+            padding: '6px',
+            margin: 0,
+            backgroundColor: 'var(--accent-color)',
+            ...style
+          }
+        },
+        word
+      )
+    )
+  );
+};
+
+const A = Component(`jbx-a`, null, { element: 'a' });
+
+const Space = Component(`jbx-space`, (props) => ({
+  display: props.inline ? 'inline-block' : 'block',
+  height: `${SIZE * props.h}px`,
+  width: `${SIZE * props.w}px`
+}));
+
+const Box = Component(`jbx-box`, ({ padding, hideOnSmall, flex, minWidth }) => {
+  return {
+    flex,
+    minWidth,
+    padding: padding
+      ? [padding]
+        .flat()
+        .map((paddingValue) => `${paddingValue * SIZE}px`)
+        .join(` `)
+      : null
+  };
+});
+
+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`
+}));
+
+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`
+//   }
+// });
+
+const Dropzone = Component(`jbx-dropzone`);
+
+const Ul = Component(
+  `jbx-ul`,
+  {
+    margin: 0,
+    padding: `0 0 0 ${BASE_FONT_SIZE / 4}px`
+  },
+  { element: 'ul' }
+);
+
+const Li = Component(
+  `jbx-li`,
+  {
+    margin: `0 0 0 ${SIZE}px`,
+    padding: `${SIZE / 4}px 0`
+  },
+  { element: 'li' }
+);
+
+const Tabs = Component(`jbx-tabs`);
+
+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'] }
+);
+
+const CodeSnippet = Component(`jbx-code-snippet`, null, { element: 'pre' });
+const CodeTextarea = Component(`jbx-code-area`, null, { element: 'textarea' });
+
+const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ checked }) => {
+  return {
+    height: SIZE * 2 - 4,
+    width: 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'
+  };
+});
+
+const Checkbox = function Checkbox({ label, checked, onChange }) {
+  return React.createElement(
+    Inline,
+    {
+      onClick: () => {
+        if (onChange) {
+          onChange(!checked);
+        }
+      },
+      style: {
+        alignItems: 'center',
+        cursor: 'pointer'
+      }
+    },
+    [
+      React.createElement(
+        CheckboxHidden,
+        {
+          key: 0,
+          checked
+        },
+        React.createElement(
+          'svg',
+          {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: SIZE * 2 - 8,
+            height: SIZE * 2 - 8,
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '2',
+            className: 'feather feather-check',
+            viewBox: '0 0 24 24',
+            color: checked ? 'white' : '#ddd'
+          },
+          React.createElement('path', {
+            d: 'M20 6L9 17 4 12'
+          })
+        )
+      ),
+      React.createElement(Space, { key: 1, w: 0.5 }),
+      React.createElement(Text, { key: 2, style: { userSelect: 'none' } }, label)
+    ]
+  );
+};
+
+export { A, Box, Button, Checkbox, CheckboxHidden, CodeSnippet, CodeTextarea, Component, Container, Dropzone, HeaderH1, HeaderH2, HeaderH3, HeaderH4, Inline, Input, Li, MainHeader, Range, SmallText, Space, Stack, Tab, Tabs, Text, Ul };

package/src/components/Layout.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { classList, layoutPropsToStyles } from '../';
+
+type Box = {
+  children?: React.ReactNode;
+  smallText?: true | false;
+  padding?: number;
+  flex?: number;
+  style: any;
+};
+
+export function Box({ children, smallText, padding, flex, style }: Box) {
+  const styles = {
+    flex,
+    ...layoutPropsToStyles({ padding }),
+    ...style
+  };
+
+  const className = classList({
+    'jb-box': true,
+    'jbx-small-text': smallText
+  });
+
+  return (
+    <div className={className} style={styles}>
+      {children}
+    </div>
+  );
+}

package/src/components/MoreExperiments.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+
+import React, { Fragment } from 'react';
+import { Text, Space, Ul, Li, Inline, Box, A } from '../index';
+
+const PROJECT_DATA = [
+  {
+    name: 'PINTR',
+    description: 'Tool that turns your images into plotter-like line drawings',
+    url: 'https://javier.xyz/pintr/'
+  },
+  {
+    name: 'Visual Center',
+    description: 'Tool that help you visually center objects in a container',
+    url: 'https://javier.xyz/visual-center/'
+  },
+  {
+    name: 'Brutalita',
+    description:
+      'Grid based font editor and font. Create fonts in the browser and export OpenType files',
+    url: 'https://brutalita.com/'
+  },
+  {
+    name: 'Morphin',
+    description:
+      'Create animated CSS transitions. Add sprites and get the code ready to paste in your site',
+    url: 'https://javier.xyz/morphin/'
+  },
+  {
+    name: 'Droste Creator',
+    description: 'Create recursive images with the droste effect',
+    url: 'https://javier.xyz/droste-creator/'
+  },
+  {
+    name: 'Sombras.app',
+    description: 'Create art with shadows. Draw shadows and get 3D objects that project them.',
+    url: 'https://sombras.app/'
+  },
+  {
+    name: 'Cohesive Colors',
+    description: 'Tool that can help you to create cohesive color palettes',
+    url: 'https://javier.xyz/cohesive-colors/'
+  }
+] as const;
+
+const projects = PROJECT_DATA.filter(
+  (project) => !project.url.includes(document.location.pathname)
+);
+const projectIndex = PROJECT_DATA.findIndex(
+  (project) => !project.url.includes(document.location.pathname)
+);
+const seed = Math.floor(new Date().getTime() / (60 * 60 * 1000)) + projectIndex;
+
+export function MoreExperiments() {
+  const items = new Array(4).fill('').map((_0, idx) => {
+    const project = projects[(seed + idx) % projects.length];
+    return (
+      <Li key={project.url}>
+        <A href={project.url}>{project.name}</A>
+        {`, `}
+        {project.description}.
+      </Li>
+    );
+  });
+
+  return (
+    <Fragment>
+      <Text>More experiments</Text>
+      <Space h={1} />
+      <Ul>{items}</Ul>
+    </Fragment>
+  );
+}
+
+export function MoreExperimentsBlocks() {
+  const items = new Array(3).fill('').map((_0, idx) => {
+    const project = projects[(seed + idx) % projects.length];
+    return <MoreExperimentsBlock key={project.name} {...project} />;
+  });
+
+  return (
+    <Fragment>
+      <Text>More experiments</Text>
+      <Space h={1} />
+      <Inline wrap gap={1}>
+        {items}
+      </Inline>
+    </Fragment>
+  );
+}
+
+function MoreExperimentsBlock({
+  name,
+  description,
+  url
+}: {
+  name: string;
+  description: string;
+  url: string;
+}) {
+  return (
+    <Box smallText style={{ width: 300 }}>
+      <a className="jbx-a" href={url}>
+        {name}
+      </a>
+      <Space h={0.5} />
+      <Text>{description}.</Text>
+    </Box>
+  );
+}

package/{index.js → src/index.tsx}

@@ -1,15 +1,45 @@
-import './style.css';
+// @ts-nocheck
 
 import React, { Fragment } from 'react';
 
-const SIZE = window.innerWidth > 1280 ? 16 : window.innerWidth > 640 ? 14 : 12;
-const BASE_RADIUS = SIZE / 2;
+const SIZE = getSettings().size;
+const BASE_RADIUS = SIZE / 3;
 const BASE_FONT_SIZE = SIZE;
 
-export function Component(className, styleSrc, config = {}) {
+export function getSettings() {
+  const sizeSrc = getComputedStyle(document.documentElement).getPropertyValue('--size');
+
+  return {
+    size: parseInt(sizeSrc)
+  };
+}
+
+export function classList(classes: any[] | Record<string, any>) {
+  if (Array.isArray(classes)) {
+    return classes.filter((e) => e).join(' ');
+  } else {
+    return Object.keys(classes)
+      .filter((e) => classes[e])
+      .join(' ');
+  }
+}
+
+export function layoutPropsToStyles({ padding }: { padding?: number }): { [prop: string]: string } {
+  let newStyles: { [prop: string]: string } = {};
+  if (padding) {
+    newStyles.padding = `${getSettings().size * padding}px`;
+  }
+  return newStyles;
+}
+
+export function Component(
+  className: string,
+  styleSrc = {},
+  config: { element?: string; styleProps?: any } = {}
+) {
   const { element = `div`, styleProps } = config;
 
-  return function MakeComponent({ children, ...props }) {
+  return function MakeComponent({ children, style = {}, ...props }) {
     const passProps = styleProps
       ? Object.keys(props)
           .filter((e) => !styleProps.includes(e))
@@ -19,11 +49,13 @@ export function Component(className, styleSrc, config = {}) {
           }, {})
       : props;
 
+    const calculatedStyle = typeof styleSrc === 'function' ? styleSrc(props) : styleSrc;
+
     return React.createElement(
       element,
       {
         className,
-        style: typeof styleSrc === 'function' ? styleSrc(props) : styleSrc,
+        style: { ...style, ...calculatedStyle },
         ...passProps
       },
       children
@@ -46,6 +78,7 @@ 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 HR = Component(`jbx-hr`, null, { element: 'hr' });
 
 export const MainHeader = function MainHeader({ children, style }) {
   const content = String(children).split(' ');
@@ -59,7 +92,6 @@ export const MainHeader = function MainHeader({ children, style }) {
         {
           key: word,
           style: {
-            fontWeight: 900,
             display: 'inline-block',
             width: 'auto',
             padding: '6px',
@@ -82,25 +114,13 @@ export const Space = Component(`jbx-space`, (props) => ({
   width: `${SIZE * props.w}px`
 }));
 
-export const Box = Component(`jbx-box`, ({ padding, hideOnSmall, flex, minWidth }) => {
-  return {
-    flex,
-    minWidth,
-    padding: padding
-      ? [padding]
-          .flat()
-          .map((paddingValue) => `${paddingValue * SIZE}px`)
-          .join(` `)
-      : null
-  };
-});
-
-export const Inline = Component(`jbx-inline`, ({ v, h, gap }) => ({
+export const Inline = Component(`jbx-inline`, ({ v, h, gap, wrap = false }) => ({
   marginLeft: `${h * SIZE}px`,
   marginRight: `${h * SIZE}px`,
   marginTop: `${v * SIZE}px`,
   marginBottom: `${v * SIZE}px`,
-  gap: `${gap * SIZE}px`
+  gap: `${gap * SIZE}px`,
+  flexWrap: wrap ? 'wrap' : 'no-wrap'
 }));
 
 export const Stack = Component(`jbx-stack`, ({ v, h, gap }) => ({
@@ -111,25 +131,6 @@ export const Stack = Component(`jbx-stack`, ({ v, h, gap }) => ({
   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 = Component(`jbx-dropzone`);
 
 export const Ul = Component(
@@ -170,8 +171,8 @@ export const CodeTextarea = Component(`jbx-code-area`, null, { element: 'textare
 
 export const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ checked }) => {
   return {
-    height: BASE_SIZE * 2 - 4,
-    width: BASE_SIZE * 2 - 4,
+    height: SIZE * 2 - 4,
+    width: SIZE * 2 - 4,
     paddingTop: 2,
     paddingLeft: 2,
     backgroundColor: checked ? 'var(--accent-color)' : 'white',
@@ -208,8 +209,8 @@ export const Checkbox = function Checkbox({ label, checked, onChange }) {
           'svg',
           {
             xmlns: 'http://www.w3.org/2000/svg',
-            width: BASE_SIZE * 2 - 8,
-            height: BASE_SIZE * 2 - 8,
+            width: SIZE * 2 - 8,
+            height: SIZE * 2 - 8,
             fill: 'none',
             stroke: 'currentColor',
             strokeLinecap: 'round',
@@ -229,3 +230,14 @@ export const Checkbox = function Checkbox({ label, checked, onChange }) {
     ]
   );
 };
+
+export function Bullet({ value }: { value: string }) {
+  return (
+    <div className="jbx-bullet-container">
+      <div className="jbx-bullet">{value}</div>
+    </div>
+  );
+}
+
+export { Box } from './components/Layout';
+export { MoreExperiments } from './components/MoreExperiments';