Converts props into css variables in styled-components
import React from 'react'
import styled from '@xstyled/styled-components'
import { cx, getCSSVars } from 'utils'
const StyledIconBase = styled.i`| // styles of an external object which is placed | |
| // next to a node from the outside | |
| .diagram-node__satelite { | |
| transform: translate(100px) var(--transform-y, ); | |
| } |
| const removeStyleProp = (elm, prop) => | |
| elm.style.cssText = elm.style.cssText // cssText automatically (luckily) adds spaces between declarations | |
| .split('; ') | |
| .filter(p => !p.startsWith(prop) ) | |
| .join(';'); |
| /** | |
| * Concatenates N arrays without dups. | |
| * If an array's item is an Object, compare by `value` | |
| * @param {*} k | |
| */ | |
| export const concatWithoutDups = (...key) => { | |
| const result = (...args) => { | |
| const newArr = [], | |
| existingObj = {}; |
| import { Meta, Description, Props, Source, Canvas } from '@storybook/addon-docs/blocks'; | |
| import Comp from './Comp'; | |
| import CompRaw from '!raw-loader!./Comp.jsx'; | |
| import readme from '!raw-loader!./readme.md'; | |
| <Meta | |
| title="Comp/MDX" | |
| component={Comp} | |
| /> |
| /** | |
| * positions a DOM element next to a certain position | |
| * @param {HTMLElement} elm DOM element node | |
| * @param {Object} pos x,y which should probably be within the viewport visible area | |
| */ | |
| export default (elm, pos) => { | |
| const overflowOffset = 20; | |
| const pageSize = { | |
| w: document.documentElement.clientWidth, |
| // usage: Math.clamp(min, number, max) | |
| Math.clamp = Math.clamp || ((a,b,c) => Math.max(a,Math.min(b,c))) |
| import React, { useState, useEffect } from 'react' | |
| const ShowIf = ({ children, breakpoint = 420, math = '>' }) => { | |
| const [width, setWidth] = useState(window.innerWidth) | |
| useEffect(() => { | |
| const resizeObserver = new ResizeObserver(() => setWidth(window.innerWidth)) | |
| resizeObserver.observe(document.body) | |
| return () => resizeObserver.unobserve(document.body) |
| function extend( o, o1, o2) { | |
| if( !(o instanceof Object) ) o = {}; | |
| copy(o, o1); | |
| if( o2 ) | |
| copy(o, o2) | |
| function copy(a,b){ | |
| // copy o2 to o | |
| for( var key in b ) |
| const isObject = obj => (obj+"") === "[object Object]" |