mujsdev

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

mujsdev

// /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    screens: {
      xs: "320px",
      md: "768px",
      lg: "1024px",
      xl: "1440px",
    },

mujsdev

import React from "react";
import { Story } from "@storybook/react";
import { Button, ButtonProps } from "../components/Button";

export default {
  title: "Components/Button",
  component: Button,
};

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

mujsdev

.btn {
  padding: 1.6rem 2.4rem;
  background: transparent;
  border: none;
  border-radius: 1.2rem;

  font-size: 1.6rem;
  text-transform: uppercase;

  cursor: pointer;

mujsdev

import React from "react";

export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  color: "black" | "white";
  size?: "sm";
  hasBorder?: boolean;
  disabled?: boolean;
  isLoading?: boolean;
}

mujsdev

import "../src/assets/scss/main.scss";

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

mujsdev

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  /** Expose public folder to storybook as static */
  staticDirs: ["../public"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {

mujsdev

{
  "name": "storybook-holy-grail",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Muj",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",

mujsdev

{
  "compilerOptions": {
    "target": "es5",
    "module": "ES6",
    "jsx": "react",
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,

mujsdev

p {
  text-align: center;
  padding: 16px 0;
}