willmendesneto

node_modules/
  @myapp/
    buttons/index.js <-- final button with all components, even if you're using only 1 of them
    icons/index.js <-- final bundle with all icons, even the ones you're not using

willmendesneto

/**
 * Usage
 *  downloadFileSync('file-url', {name: 'filename', iframeName: 'my-amazing-iframe-name' })
 */
const downloadFileSync = (
  url: string,
  filename?: string;
) => {
  const iframeName = options?.iframeName ?? 'reusable-iframe';
  const link = document.createElement('a');

willmendesneto

/**
 * Helper for CSS-In-JS Media Query integration on Components
 *
 * Usage:
 *  // It's using `styled-components` package, but it can be used in any CSS-IN-JS package solution
 *
 *  import styled from 'styled-components';
 *.
 *. const MyDiv = styled.div`
      display: inline-block;

willmendesneto

const aws = require('aws-sdk');
const { writeFileSync, statSync, createReadStream } = require('fs');
const fetch = require('node-fetch');
const FormData = require('form-data');

exports.handler = async (event, context) => {
  const { numberOfCalls = 0, url } = event;

  const lambda = new aws.Lambda();

willmendesneto

function toggleSiteTheme(e) {
  const html = document.getElementsByTagName("html");
  const className = html[0].classList.value;

  /** Gets the target by checking if it was triggered by clicking on the switch or if via OS configuration changes */
  const target =
    e && e.target ? e.target : document.getElementById("theme-switch");

  const isLightMode = target.className === "" || className === "light-mode";

willmendesneto

function toggleSiteTheme(e) {
  var html = document.getElementsByTagName("html");
  var className = html[0].classList.value;

  /** Gets the target by checking if it was triggered by 
    clicking on the switch or if via OS configuration changes */
  var target = document.getElementById("theme-switch");

  var isLightMode = target.className === "" || className === "light-mode";
  /** Adds the class into our HTML to determine if it will be light or dark mode */

willmendesneto

function toggleSiteTheme(e) {
  var html = document.getElementsByTagName("html");
  var className = html[0].classList.value;

  /** Gets the target by checking if it was triggered by 
    clicking on the switch or if via OS configuration changes */
  var target = document.getElementById("theme-switch");

  var isLightMode = target.className === "" || className === "light-mode";
  /** Adds the class into our HTML to determine if it will be light or dark mode */

willmendesneto

<!-- Adding dark-mode switch toggle in your page -->
<div class="switch-toggle">
  <input type="checkbox" id="switch-checkbox" />
  <label for="switch" id="theme-switch"
    >Enable/disable Dark Mode Theme</label
  >
</div>

willmendesneto

/** Common CSS */
html {
  background: #FFFFFF;
}

html.dark-mode {
  filter: invert(100%);
}

willmendesneto

html {    
  background: #FFFFFF;
}

// Detect if the user has requested the system
// use a light or dark color theme.
// More details about `prefers-color-scheme` in https://web.dev/prefers-color-scheme/
@media (prefers-color-scheme: "dark") {
  html {    
    filter: invert(100%);