EdwardIrby

CONTAINER_NAME=monorepo

ENTRYPOINT=yarn

STORYBOOK_PORT=6006

TAG=v1.40.0-jammy

EdwardIrby

MIT License

Copyright (c) 2016 Luke Childs, 2017 Ulysse Buonomo, 2019 Edward Irby

Copyright for portions of yarn-completion are held by Edward irby (2019) as
part of project zsh-better-npm-completion. All other copyright for project
yarn-completion held by Luke Childs (2016) and Ulysse Buonomo (2017).

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

EdwardIrby

/**
 * @param {(ShadowRoot|HTMLElement)} shadowRoot
 * @param  {...string} strings
 */
export const createFragment = (root, ...strings) => {
  removeChildren(root);
  const range = document.createRange();
  range.setStart(root, 0);
  return range.createContextualFragment(
    [...strings]

EdwardIrby

/* eslint-disable no-shadow */
import multiEntry from 'rollup-plugin-multi-entry';
import path from 'path';
import resolve from 'rollup-plugin-node-resolve';

const rollup = require('rollup');

export const withBundle = async (...entries) => {
  const inputOptions = {
    input: entries.length > 1

EdwardIrby

/**
 * @param {...{}} objs - object containing camelCased style properties or css custom properties
 * @returns {<{'--prop': 'value'}>} containing prefixed css custom properties to be inlined.
 * @example Simple
 * <Textblock style={tokens({
*    lineHeight: 1.2,
*    fontSize: rem(47.78),
*  })} />
 * @example Conditional Example
 * <Textblock style={tokens(

EdwardIrby

.Textblock {
  display: var(--display);
}

EdwardIrby

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value: props.value,
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    const { value } = e.target;

EdwardIrby

export const LightDomUsage = (props) => {
    return (
      <ShadowDom lightDom={
        () => (
          <Fragment>
            <span>I'm some light dom </span>
            <span slot='span' className='text'>I'm some slottedlight dom </span>
          </Fragment>
        )
      }>

EdwardIrby

export const BasicUsage = (props) => {
    const { text } = props;
    return (
      <ShadowDom className={ className}>
        <span>{ children }</span>
      </ShadowDom>
    )
}

EdwardIrby

import React, { Component, Fragment, Children } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import PropTypes from 'prop-types';

export class ShadowDom extends Component {
  constructor(props){
    super(props)
    this.getTargetRef = this.getTargetRef.bind(this);
  }
  componentDidMount() {