fedek6

const typography = {
  primary: {
    family: "Lato"
  },
  secondary: {
    family: "Roboto"
  }
};

const aliases = Object.entries(typography)

fedek6

export type PrimarySet = Record<keyof typeof primary, string>; 

export const primary = {
  primary200: "--primary-200",
  primary300: "--primary-300",
  primary400: "--primary-400",
  primary500: "--primary-500",
}

export const primaryShades: PrimarySet = {

fedek6

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  previewTabs: {
    canvas: {

fedek6

You must use Storybook with webpack5!

npx sb@next init --builder webpack5

Remember to install all nedded packages because debugging babel deps might be tricky.

Enjoy!

fedek6

module.exports = function (source) {
  console.log("The original file was here:", this.resourcePath);
  console.log(source);

  return source;
};

fedek6

/* eslint-disable no-console */
/* eslint-disable react-hooks/exhaustive-deps */
import { useState, useEffect } from "react";

export const useLocalStorage = <T>(key: string, initialValue: T) => {
  const [storedValue, setStoredValue] = useState<T | undefined>();

  const setValue = (value: T) => {
    window.localStorage.setItem(key, JSON.stringify(value));
  };

fedek6

browser-sync start --proxy "localhost:3000" --no-ui --port 3001

fedek6

// src/index.ts
import { lubiePlacki } from "./placki";

function printMessage(msg: string): void {
  console.log(`Message: ${msg}`);
}

printMessage("Hello, TypeScript");
debugger;
lubiePlacki();

fedek6

{
    "compilerOptions": {
        "target": "es2018",
        "outDir": "./dist",
        "rootDir": "./src",
        "noEmitOnError": true,
        "module": "commonjs"
    }
}

fedek6

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "plugin:react/recommended",
    "airbnb",
    "plugin:import/typescript",
    "prettier",