@streamlinedfi/div 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Streamlined Finance - www.streamlined.finance
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# div
+Streamlined Div is a styled-components extension of the html div for building products with speed

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@streamlinedfi/div",
+  "version": "0.1.0",
+  "description": "Streamlined Div is a styled-components extension of the html div for building products with speed",
+  "author": "Streamlined Finance",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/streamlinedfi/div.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/streamlinedfi/div/issues"
+  },
+  "homepage": "https://github.com/streamlinedfi/div#readme",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "styled-components": "^6.1.19"
+  }
+}

package/src/Div.js

@@ -0,0 +1,132 @@
+import styled from 'styled-components';
+import { cssWhiteList, divRules } from './rules';
+import {
+  getMediaPropRegex,
+  getRuleIndex,
+  kebabCase,
+  upperFirst,
+} from './utils';
+
+const { keys } = Object;
+
+/**
+ * @example
+ * <Div
+ *   $w={690}
+ *   $h={420}
+ *   $mobile$w={320}
+ * />
+ */
+
+export function renderCss(props, rules) {
+  let css = '';
+
+  const ruleIndex = getRuleIndex(rules);
+  const mediaPropRegex = getMediaPropRegex(props.theme);
+
+  let i = -1;
+  const propKeys = keys(props);
+  while (++i < propKeys.length) {
+    const propExt = propKeys[i];
+
+    if (/^\$/.test(propExt)) {
+      const value = props[propExt];
+
+      if (value !== false) {
+        const match = propExt.match(mediaPropRegex) || [];
+        const [, media, mediaPropExt] = match;
+
+        const cleanProp = (mediaPropExt || propExt).slice(1);
+        const parts = cleanProp.split('$');
+        const prop = parts[0];
+        const extensions = parts.slice(1);
+
+        const foundRule =
+          ruleIndex[prop] || (cssWhiteList[prop] && kebabCase(prop));
+
+        if (foundRule) {
+          const config = foundRule;
+          const outputValue =
+            config.withTheme && typeof value === 'function'
+              ? value(props.theme)
+              : value;
+          const formattedValue = config.format
+            ? config.format(outputValue, props.theme)
+            : outputValue;
+
+          let ruleCss = '';
+          if (typeof config === 'string') {
+            ruleCss = config;
+          } else if (typeof config === 'function') {
+            ruleCss = config(props, media, extensions);
+          } else if (typeof config.css === 'function') {
+            ruleCss = config.css(props, media, extensions);
+          } else {
+            ruleCss = config.css;
+          }
+
+          let cssString = '';
+          const colons = ruleCss.match(/:/g);
+          if (colons && colons.length > 1) {
+            cssString = ruleCss;
+          } else if (colons === null) {
+            cssString = `${ruleCss}: ${formattedValue};`;
+          } else {
+            cssString = `${ruleCss.replace(/;$/, '')};`;
+          }
+
+          if (extensions.includes('important')) {
+            cssString = cssString.replace(/;/g, ' !important;');
+          }
+
+          if (extensions.includes('hover') && !extensions.includes('focus')) {
+            cssString = `&:hover,&:focus { ${cssString} }`;
+          }
+
+          if (extensions.includes('hover') && extensions.includes('focus')) {
+            cssString = `&:hover { ${cssString} }`;
+          }
+
+          if (extensions.includes('focus')) {
+            cssString = `&:focus { ${cssString} }`;
+          }
+
+          if (extensions.includes('active')) {
+            cssString = `&:active { ${cssString} }`;
+          }
+
+          if (extensions.includes('last')) {
+            cssString = `&:last-child { ${cssString} }`;
+          }
+
+          if (extensions.includes('odd')) {
+            cssString = `&:nth-child(odd) { ${cssString} }`;
+          }
+
+          if (extensions.includes('even')) {
+            cssString = `&:nth-child(even) { ${cssString} }`;
+          }
+
+          if (media) {
+            const cssMedia = props.theme.Breakpoints.getCssMedia(
+              props.theme.Breakpoints[upperFirst(media)],
+            );
+            cssString = `${cssMedia} { ${cssString} }`;
+          }
+
+          css += cssString;
+        }
+      }
+    }
+  }
+
+  return css;
+}
+
+export const divMixin = props => renderCss(props, divRules);
+
+const Div = styled.div`
+  ${props => divMixin(props)}
+`;
+
+export default Div;

package/src/createUISystem.js

@@ -0,0 +1,58 @@
+import { upperFirst } from './utils';
+
+const { keys, entries, fromEntries } = Object;
+
+const getDefaultWidth = () => {
+  return typeof window !== 'undefined' && typeof document !== 'undefined'
+    ? document.body.clientWidth
+    : 0;
+};
+
+const createBreakpoints = breakpoints => {
+  return {
+    getCssMedia: ({ min, max }) => {
+      if (min && max) {
+        return `@media (min-width: ${min}px) and (max-width: ${max}px)`;
+      }
+
+      if (min) {
+        return `@media (min-width: ${min}px)`;
+      }
+
+      return `@media (max-width: ${max}px)`;
+    },
+    keys: keys(breakpoints),
+    ...fromEntries(
+      entries(breakpoints).map(([key, { min, max }]) => {
+        return [upperFirst(key), { min, max }];
+      }),
+    ),
+    ...fromEntries(
+      entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {
+        return [
+          `is${upperFirst(key)}`,
+          (width = getDefaultWidth()) =>
+            width !== 0 && width >= min && width <= max,
+        ];
+      }),
+    ),
+  };
+};
+
+const createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>
+  (multiplier || 1) * spacingUnit + adjuster + (usePx ? 'px' : 0);
+
+function createUISystem({ theme, breakpoints, spacingUnit }) {
+  const Breakpoints = createBreakpoints(breakpoints);
+
+  return {
+    theme: {
+      ...theme,
+      Breakpoints,
+      spacing: createSpacing(spacingUnit),
+    },
+    Breakpoints,
+  };
+}
+
+export default createUISystem;

package/src/index.js

@@ -0,0 +1,6 @@
+import Div from './Div';
+import createUISystem from './createUISystem';
+
+export default Div;
+
+export { createUISystem };

package/src/rules.js

@@ -0,0 +1,371 @@
+/* eslint-disable no-nested-ternary */
+import { getPropValue, isPropPresent, pixelate, spacing } from './utils';
+
+const { fromEntries } = Object;
+
+export const cssWhiteList = fromEntries(
+  [
+    'display',
+    'align',
+    'vAlign',
+    'alignItems',
+    'alignContent',
+    'alignSelf',
+    'justifyContent',
+    'justifySelf',
+    'flexDirection',
+    'flexBasis',
+    'flexWrap',
+    'pointerEvents',
+    'cursor',
+    'position',
+    'opacity',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundSize',
+    'backgroundPosition',
+    'backgroundRepeat',
+    'transform',
+    'transformOrigin',
+    'textDecoration',
+    'textWrap',
+    'animation',
+    'fontWeight',
+    'gap',
+    'gridTemplateColumns',
+    'gridTemplateRows',
+    'wordBreak',
+    'whiteSpace',
+    'textOverflow',
+    'overflow',
+    'overflowX',
+    'overflowY',
+    'textAlign',
+    'transitionDelay',
+    'filter',
+    'listStyle',
+    'objectFit',
+    'objectPosition',
+    'willChange',
+    'boxSizing',
+  ].map(prop => [prop, 1]),
+);
+
+// short hand rules for the div component
+export const divRules = {
+  inline: 'display: inline',
+  block: 'display: block',
+  flex: `
+    display: flex;
+    width: 100%;
+  `,
+  autoFlex: `
+    display: flex;
+    width: auto;
+  `,
+  grid: `
+    display: grid;
+  `,
+  hide: 'display: none',
+  inlineBlock: 'display: inline-block',
+  inlineFlex: 'display: inline-flex',
+  'column|col': 'flex-direction: column;',
+  row: 'flex-direction: row;',
+  spaceBetween: 'justify-content: space-between;',
+  wrap: 'flex-wrap: wrap;',
+  innerCenter: (props, media) =>
+    isPropPresent(props, media, 'flex', 'inlineFlex')
+      ? `
+          justify-content: center;
+          align-items: center;
+        `
+      : `
+          text-align: center;
+          ${
+            isPropPresent(props, media, 'h', 'height')
+              ? `line-height: ${getPropValue(props, media, 'h', 'height')};`
+              : ''
+          }
+        `,
+  innerLeft: (props, media) =>
+    isPropPresent(props, media, 'flex', 'inlineFlex')
+      ? isPropPresent(props, media, 'column', 'col')
+        ? 'align-items: flex-start;'
+        : 'justify-content: flex-start;'
+      : 'text-align: left;',
+  innerRight: (props, media) =>
+    isPropPresent(props, media, 'flex', 'inlineFlex')
+      ? isPropPresent(props, media, 'column', 'col')
+        ? 'align-items: flex-end;'
+        : 'justify-content: flex-end;'
+      : 'text-align: right;',
+  innerTop: (props, media) => {
+    return isPropPresent(props, media, 'flex', 'inlineFlex')
+      ? isPropPresent(props, media, 'column', 'col')
+        ? 'justify-content: flex-start;'
+        : 'align-items: flex-start;'
+      : '';
+  },
+  innerBottom: (props, media) =>
+    isPropPresent(props, media, 'flex', 'inlineFlex')
+      ? isPropPresent(props, media, 'column', 'col')
+        ? 'justify-content: flex-end;'
+        : 'align-items: flex-end;'
+      : '',
+  outerCenter: `
+    margin-left: auto;
+    margin-right: auto;
+  `,
+  grow: {
+    css: 'flex-grow',
+    format: Number,
+  },
+  shrink: {
+    css: 'flex-shrink',
+  },
+  'colReverse|columnReverse': {
+    css: 'flex-direction: column-reverse;',
+  },
+  reverse: {
+    css: 'flex-direction: row-reverse;',
+  },
+
+  // dimensions
+  'width|w': {
+    css: 'width',
+    format: pixelate,
+  },
+  'minWidth|minW': {
+    css: 'min-width',
+    format: pixelate,
+  },
+  'maxWidth|maxW': {
+    css: (props, media) => `
+      width: 100%;
+      max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};
+    `,
+  },
+  'height|h': {
+    css: 'height',
+    format: pixelate,
+  },
+  'minHeight|minH': {
+    css: 'min-height',
+    format: pixelate,
+  },
+  'maxHeight|maxH': {
+    css: (props, media) => `
+      height: 100%;
+      max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};
+    `,
+  },
+  'lineHeight|lineH|lh': {
+    css: 'line-height',
+    format: pixelate,
+  },
+  pointer: 'cursor: pointer;',
+
+  // position
+  relative: 'position: relative',
+  absolute: 'position: absolute',
+  fixed: 'position: fixed',
+  static: 'position: static',
+  cover: `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  `,
+  'zIndex|z': {
+    css: 'z-index',
+    withTheme: true,
+  },
+  top: {
+    css: 'top',
+    format: pixelate,
+  },
+  right: {
+    css: 'right',
+    format: pixelate,
+  },
+  bottom: {
+    css: 'bottom',
+    format: pixelate,
+  },
+  left: {
+    css: 'left',
+    format: pixelate,
+  },
+
+  'padding|p': {
+    css: 'padding',
+    format: spacing,
+  },
+  'paddingTop|pt': {
+    css: 'padding-top',
+    format: spacing,
+  },
+  'paddingRight|pr': {
+    css: 'padding-right',
+    format: spacing,
+  },
+  'paddingBottom|pb': {
+    css: 'padding-bottom',
+    format: spacing,
+  },
+  'paddingLeft|pl': {
+    css: 'padding-left',
+    format: spacing,
+  },
+  'paddingX|px': {
+    css: (props, media) => `
+      padding-left: ${spacing(getPropValue(props, media, 'paddingX', 'px'))};
+      padding-right: ${spacing(getPropValue(props, media, 'paddingX', 'px'))};
+    `,
+  },
+  'paddingY|py': {
+    css: (props, media) => `
+      padding-top: ${spacing(getPropValue(props, media, 'paddingY', 'py'))};
+      padding-bottom: ${spacing(getPropValue(props, media, 'paddingY', 'py'))};
+    `,
+  },
+  'margin|m': {
+    css: 'margin',
+    format: spacing,
+  },
+  'marginTop|mt': {
+    css: 'margin-top',
+    format: spacing,
+  },
+  'marginRight|mr': {
+    css: 'margin-right',
+    format: spacing,
+  },
+  'marginBottom|mb': {
+    css: 'margin-bottom',
+    format: spacing,
+  },
+  'marginLeft|ml': {
+    css: 'margin-left',
+    format: spacing,
+  },
+  'marginX|mx': {
+    css: (props, media) => `
+      margin-left: ${spacing(getPropValue(props, media, 'marginX', 'mx'))};
+      margin-right: ${spacing(getPropValue(props, media, 'marginX', 'mx'))};
+    `,
+  },
+  'marginY|my': {
+    css: (props, media) => `
+      margin-top: ${spacing(getPropValue(props, media, 'marginY', 'my'))};
+      margin-bottom: ${spacing(getPropValue(props, media, 'marginY', 'my'))};
+    `,
+  },
+
+  // style
+  'background|bg': {
+    css: 'background',
+    withTheme: true,
+  },
+  'borderRadius|radius': {
+    css: (props, media) => {
+      const radius = getPropValue(props, media, 'borderRadius', 'radius');
+      if (Array.isArray(radius)) {
+        return `
+          border-top-left-radius: ${pixelate(radius[0])};
+          border-top-right-radius: ${pixelate(radius[1])};
+          border-bottom-right-radius: ${pixelate(radius[2])};
+          border-bottom-left-radius: ${pixelate(radius[3])};
+        `;
+      }
+      return `border-radius: ${pixelate(radius)}`;
+    },
+  },
+  borderTopLeftRadius: {
+    css: 'border-top-left-radius',
+    format: pixelate,
+  },
+  borderTopRightRadius: {
+    css: 'border-top-right-radius',
+    format: pixelate,
+  },
+  borderBottomRightRadius: {
+    css: 'border-bottom-right-radius',
+    format: pixelate,
+  },
+  borderBottomLeftRadius: {
+    css: 'border-bottom-left-radius',
+    format: pixelate,
+  },
+  borderColor: {
+    css: 'border-color',
+    withTheme: true,
+  },
+  borderImage: {
+    css: 'border-image',
+    withTheme: true,
+  },
+  ...[
+    ['border', 'border'],
+    ['borderTop', 'border-top'],
+    ['borderRight', 'border-right'],
+    ['borderBottom', 'border-bottom'],
+    ['borderLeft', 'border-left'],
+  ].reduce(
+    (rules, [jsKey, cssKey]) => ({
+      ...rules,
+      [jsKey]: {
+        css: (props, media, extensions) => {
+          const propValue = getPropValue(
+            props,
+            media,
+            extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,
+          );
+
+          // withTheme
+          const value =
+            typeof propValue === 'function'
+              ? propValue(props.theme)
+              : propValue;
+
+          if (!/^\d/.test(value)) {
+            return `${cssKey}: 1px solid ${value}`;
+          }
+          return `${cssKey}: ${value}`;
+        },
+      },
+    }),
+    {},
+  ),
+  transition: (props, media) => {
+    const value = getPropValue(props, media, 'transition');
+    return typeof value === 'string'
+      ? `transition: ${value}`
+      : 'transition: all .2s';
+  },
+  'boxShadow|shadow': {
+    css: 'box-shadow',
+    withTheme: true,
+  },
+  textShadow: {
+    css: 'text-shadow',
+    withTheme: true,
+  },
+  color: {
+    css: 'color',
+    withTheme: true,
+  },
+  fill: {
+    css: 'fill',
+    withTheme: true,
+  },
+  fontSize: {
+    css: 'font-size',
+    format: pixelate,
+  },
+  outline: {
+    css: 'outline',
+    withTheme: true,
+  },
+};

package/src/utils.js

@@ -0,0 +1,83 @@
+const { entries } = Object;
+
+export const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);
+
+export const kebabCase = (string = '') =>
+  string
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    ?.map(x => x.toLowerCase())
+    ?.join('-') ?? '';
+
+export function spacing(val, theme) {
+  if (/(px|%)$/.test(val)) {
+    return val;
+  }
+
+  if (typeof val === 'string') {
+    return val;
+  }
+
+  if (val === 0) {
+    return val;
+  }
+
+  return theme.spacing(val);
+}
+
+export function pixelate(val) {
+  if (typeof val === 'number') {
+    return `${val}px`;
+  }
+  return val;
+}
+
+export function getPropValue(props, media, ...propKeys) {
+  let value;
+  for (let i = 0; i < propKeys.length; i++) {
+    const key = propKeys[i];
+    if (media) {
+      const mediaVal = props[`$${media}$${key}`];
+      if (mediaVal) {
+        value = mediaVal;
+        break;
+      }
+    }
+    const val = props[`$${key}`];
+    if (val) {
+      value = val;
+      break;
+    }
+  }
+
+  return value;
+}
+
+export function isPropPresent(props, media, ...propKeys) {
+  return !!getPropValue(props, media, ...propKeys);
+}
+
+let ruleIndex = null;
+export function getRuleIndex(rules) {
+  if (ruleIndex) return ruleIndex;
+
+  const index = {};
+  entries(rules).forEach(([ruleProp, config]) => {
+    ruleProp.split('|').forEach(prop => {
+      index[prop] = config;
+    });
+  });
+  ruleIndex = index;
+
+  return index;
+}
+
+let mediaPropRegex = null;
+export function getMediaPropRegex(theme) {
+  if (mediaPropRegex) return mediaPropRegex;
+
+  mediaPropRegex = new RegExp(
+    `^\\$(${theme.Breakpoints.keys.join('|')})(\\$.*)`,
+  );
+
+  return mediaPropRegex;
+}