jbx 2.5.0 → 2.7.0

package/roll.js

@@ -1,235 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,110 +0,0 @@
-// @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/src/index.tsx

@@ -1,243 +0,0 @@
-// @ts-nocheck
-
-import React, { Fragment } from 'react';
-
-const SIZE = getSettings().size;
-const BASE_RADIUS = SIZE / 3;
-const BASE_FONT_SIZE = SIZE;
-
-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, 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
-    );
-  };
-}
-
-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 = 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' });
-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(' ');
-
-  return React.createElement(
-    Fragment,
-    {},
-    content.map((word) =>
-      React.createElement(
-        HeaderH1,
-        {
-          key: word,
-          style: {
-            display: 'inline-block',
-            width: 'auto',
-            padding: '6px',
-            margin: 0,
-            backgroundColor: 'var(--accent-color)',
-            ...style
-          }
-        },
-        word
-      )
-    )
-  );
-};
-
-export const A = Component(`jbx-a`, null, { element: 'a' });
-
-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 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`,
-  flexWrap: wrap ? 'wrap' : 'no-wrap'
-}));
-
-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 Dropzone = Component(`jbx-dropzone`);
-
-export const Ul = Component(
-  `jbx-ul`,
-  {
-    margin: 0,
-    padding: `0 0 0 ${BASE_FONT_SIZE / 4}px`
-  },
-  { element: 'ul' }
-);
-
-export const Li = Component(
-  `jbx-li`,
-  {
-    margin: `0 0 0 ${SIZE}px`,
-    padding: `${SIZE / 4}px 0`
-  },
-  { 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 = 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 {
-    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'
-  };
-});
-
-export 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 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';