fedek6

Props naming

• Array – use plural nouns. e.g. items
• Number – use prefix num or postfix count, index etc that can imply a number. e.g. numItems, itemCount, itemIndex
• Bool – use prefix is, can, has
  • is: for visual/behavior variations. e.g. isVisible, isEnable, isActive
  • can: fore behavior variations or conditional visual variations. e.g. canToggle, canExpand, canHaveCancelButton
  • has: for toggling UI elements. e.g. hasCancelButton, hasHeader
• Object – use noun. e.g. item
• Node – use prefix node. containerNode

fedek6

/**
 * @param {string} USERNAME User name to access the page
 * @param {string} PASSWORD Password to access the page
 * @param {string} REALM A name of an area (a page or a group of pages) to protect.
 * Some browsers may show "Enter user name and password to access REALM"
 */
const USERNAME = 'demouser'
const PASSWORD = 'demopassword'
const REALM = 'Secure Area'

fedek6

const fs = require("fs");
const path = require("path");
const md5 = require("md5");
const util = require("util");
const glob = require("glob");

/**
 * Cache busting
 */
const hash = md5(`${new Date().getTime()}`);

fedek6

RewriteCond %{REMOTE_ADDR} !=95.160.157.10
RewriteCond %{REQUEST_URI} !=/maintenance.html
RewriteRule ^(.*)$ /maintenance.html [L]

fedek6

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_URI} ^/wp-content/uploads/[^\/]*/.*$
  RewriteRule ^(.*)$ https://producion.com/$1 [QSA,L]
</IfModule>

fedek6

import ts from "rollup-plugin-ts";
import { nodeResolve } from "@rollup/plugin-node-resolve";
// import peerDepsExternal from "rollup-plugin-peer-deps-external";
import svgr from "@svgr/rollup";
import { terser } from "rollup-plugin-terser";
import commonjs from "@rollup/plugin-commonjs";
import externals from "rollup-plugin-node-externals";
// import postcss from "rollup-plugin-postcss";
// import autoprefixer from "autoprefixer";

fedek6

const path = require("path");

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",

fedek6

import React from "react";
import { DocsContainer as BaseContainer } from "@storybook/addon-docs/blocks";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";

export const DocsContainer = ({ children, context }) => {
  const dark = useDarkMode();

  return (
    <BaseContainer

fedek6

Aspect Ratio	Padding-Bottom
1:1	100%
16:9	56.25%
4:3	75%
3:2	66.66%
8:5	62.5%

fedek6

// Init DOM
const consoleContainer = document.createElement("div");
consoleContainer.classList.add("console");
const legend = document.createElement("small");
legend.textContent = "Console";
consoleContainer.append(legend);
const vConsole = document.createElement("pre");
consoleContainer.append(vConsole);

window.addEventListener('DOMContentLoaded', (event) => {