@streamlinedfi/div 0.1.1 → 0.2.0

package/src/rules.js

@@ -1,371 +0,0 @@
-/* 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

@@ -1,107 +0,0 @@
-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;
-}
-
-export function colorMixin(color, theme) {
-  if (color) {
-    if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {
-      return `color: ${theme[`fill${color}`]};`;
-    }
-
-    if (typeof color === 'string') {
-      if (theme[color]) {
-        return `color: ${theme[color]};`;
-      }
-      return `color: ${color};`;
-    }
-  }
-
-  return '';
-}
-
-export const sizeFormatter = value => {
-  if (typeof value === 'number') {
-    return `${value}px`;
-  }
-  return value;
-};

package/test-app/README.md

@@ -1,16 +0,0 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

package/test-app/eslint.config.js

@@ -1,29 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-    },
-  },
-])

package/test-app/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>test-app</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>