https://github.com/user-attachments/assets/5255164a-2e40-4cb6-bbfd-ab72e33437d1

Key Features

• Using nanostores for convenient configuration
• Automatic generation of configuration parameters
  • Just create the atoms in the configuration file
• Pre-installed and configured Tailwind + Prettier
• Dark/Light mode

How To Use

Creation of a new laboratory:

# npm
$ npm create shqlab@latest

# bun
$ bun create shqlab@latest

Creating configuration values in config.ts:

// src/config.ts
export const $show = atom<boolean>(true);
export const $scale = atom<number>(1);
export const $text = atom<string>('text');

const config: ConfigItem[] = [
	{ id: 'showCube', name: 'Show Cube', type: 'switch', value: $show },
  {
    id: 'sizeCube',
    name: 'Size',
    type: 'slider',
    value: $scale,
    min: 1,
    max: 5,
    step: 0.5,
  },
  {
    id: 'text',
    name: 'Text',
    type: 'text',
    value: $text,
  }
];

And usage this values in your example/test:

// src/App.tsx
export default function App() {
  const show = useStore($show);
  const scale = useStore($scale);
  const text = useStore($text);

  return (
    <main className="relative flex h-full w-full items-center justify-center">
      <AnimatePresence initial={false}>
        {show && (
          <motion.div
            key="cube"
            transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
            initial={{ transform: `scale(${0})` }}
            animate={{ transform: `scale(${scale})` }}
            exit={{ transform: `scale(${0})` }}
            className="flex size-45 items-center justify-center rounded-4xl bg-amber-600"
          >
            <span className="text-2xl text-neutral-900">{text}</span>
          </motion.div>
        )}
      </AnimatePresence>
    </main>
  );
}

Credits

This lab uses the following packages:

• tailwind
• prettier
• nanostores
• motion
• clsx
• tailwind-merge

Inspired the creation of @jh3yy