phobon

import React from 'react';
import PropTypes from 'prop-types';
import { makeDecorator } from '@storybook/addons';
import reactElementToJSXString from 'react-element-to-jsx-string'
import base64url from 'base64-url';

const renderJsx = (code, options = {}) => {
  if (typeof code === 'undefined') {
    return console.warn('Undefined component');
  }

phobon

// default template
module.exports = ({
  name,
  viewBox,
  pathData
}) => `import React from 'react'

const ${name}Icon = ({
  size,
  color,

phobon

function fetchLedBrands = async () => {
  // This can be sourced from anything, an api endpoint etc.
  //[
  //  { id: 1, label: "a" },
  //  { id: 2, label: "b" },
  //  { id: 3, label: "c" },
  //  { id: 4, label: "d" },
  //  { id: 5, label: "e" },
  //];
  

phobon

const dataAtom = atom({});

const Form = ({ code, name, categories, dimensions, setData, ...props }) => {
  const [code, setCode] = useState(() => code);
  const [name, setName] = useState(() => name);
  const [categories, setCategories] = useState(() => categories);
  const [dimensions, setDimensions] = useState(() => dimensions);
  
  const updateData = e => setData({
    code,

phobon

export const ParentComponent = ({ ...props }) => {
  const name = useState(null);
  const address = useState(null);
  const other = useState(null);
  
  const fields = [name, address, other];

  return (
    <form>
      {fields.map(([field, setField], index) => (

phobon

// App.js
import { Provider } from "jotai";

import { Layout } from "./Layout";

const App = ({ children }) => {
  return (
    <Provider>
      <Layout>
        {children}

phobon

/** @jsx jsx */
import { jsx } from "@emotion/react";
import { useRef, useEffect } from "react";
import { Box, BoxProps, Image } from "@phobon/base";
import { motion } from "framer-motion";

const MotionImage = motion.custom(Image);

export interface IShiftImageProps {
  loading?: "eager" | "lazy";

phobon

const balancedSum = (arr) => {
  // Find the left and right parts of the array, start from the middle cos it's as good a place as any
  let i = Math.floor(arr.length / 2)
  let left = arr.slice(0, i).reduce((a, b) => a + b, 0)
  let right = arr.slice(i + 1).reduce((a, b) => a + b, 0)

  // If they're equal, you beauty
  if (left === right) {
    return i
  }

phobon

import styled from 'styled-components'

const variants = ({ variant }) => {
  const allVariants = {
    danger: {
      backgroundColor: 'red',
    },
    warning: {
      backgroundColor: 'orange',
    },

phobon

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable max-len */
import { StitchesCss, createCss } from '@stitches/react'

export const config = createCss({
  prefix: '',
  theme: {
    colors: {
      grey50: '#F9F9F9',
      grey100: '#EAEDF0',