node --version

npm --version

npm init vite@latest nombre-proyecto -- --template react

npx storybook@latest init

npm run dev

npm run storybook

import PropTypes from "prop-types";

export const Boton = ({ label }) => {
  return <button type="button">{label}</button>;
};

Boton.propTypes = {
  label: PropTypes.string.isRequired,
};

Boton.defaultProps = {
  label: "Botón",
};

import { Boton } from "./Boton";

export default {
  component: Boton,
};

export const Basic = {
  args: {
    label: "Hello world",
  },
};

import PropTypes from "prop-types";
import "./Boton.css";

export const Boton = ({ label, primary }) => {
  const botonType = primary ? "btn-primary" : "btn-secondary";
  return (
    <button type="button" className={`btn ${botonType}`}>
      {label}
    </button>
  );
};

Boton.propTypes = {
  label: PropTypes.string.isRequired,
  primary: PropTypes.bool,
};

Boton.defaultProps = {
  label: "Botón",
  primary: true,
};

.btn {
  font-family: Arial;
  border: 0;
  font-weight: 800;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
}
.btn-primary {
  background-color: #097bed;
  color: #fff;
}
.btn-secondary {
  background-color: #f0f0f0;
  color: #404040;
  border: 1px solid #404040;
}

export default {
  component: Boton,
};
export const Primary = {
  args: {
    label: "Primary",
    primary: true,
  },
};
export const Secondary = {
  args: {
    label: "Secondary",
    primary: false,
  },
};

import PropTypes from "prop-types";
import "./Boton.css";
export const Boton = ({ label, primary, size }) => {
  const botonType = primary ? "btn-primary" : "btn-secondary";
  return (
    <button type="button" 
            className={`btn ${botonType} btn-${size}`}>
      {label}
    </button>
  );
};
Boton.propTypes = {
  label: PropTypes.string.isRequired,
  primary: PropTypes.bool,
  size: PropTypes.oneOf(["small", "medium", "large"]),
};

Boton.defaultProps = {
  label: "Button",
  primary: true,
  size: "medium",
};

.btn-small {
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
}
.btn-medium {
  font-size: 0.9rem;
  padding: 0.5rem 1.2rem;
}
.btn-large {
  font-size: 1.2rem;
  padding: 0.8rem 1.5rem;
}

export const Large = {
  args: {
    label: "Large",
    primary: true,
    size: "large",
  },
};
export const Medium = {
  args: {
    label: "Medium",
    primary: true,
    size: "medium",
  },
};
export const Small = {
  args: {
    label: "Small",
    primary: true,
    size: "small",
  },
};

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { Boton } from "./stories/Boton/Boton";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank" rel="noreferrer">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

<Boton onClick={() => setCount((count) => count + 1)}>
  count is {count}
</Boton>

export default {
  component: Boton,
  title: "Componentes/Boton",
};

import { Titulo } from "./Titulo";
export default {
  component: Titulo,
  title: "Componentes/Titulo",
};
export const Primary = {
  args: {
    texto: "Titulo",
    nivel: 1,
  },
};

import PropTypes from "prop-types";
export const Titulo = ({ texto, nivel }) => {
  if (nivel === 1) return <h1>{texto}</h1>;
  if (nivel === 2) return <h2>{texto}</h2>;
  if (nivel === 3) return <h3>{texto}</h3>;
  if (nivel === 4) return <h4>{texto}</h4>;
  if (nivel === 5) return <h5>{texto}</h5>;
  if (nivel === 6) return <h6>{texto}</h6>;
};
Titulo.propTypes = {
  texto: PropTypes.string.isRequired,
  nivel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
};
Titulo.defaultProps = {
  texto: "Titulo",
  nivel: 1
};

import { Titulo } from "./Titulo";
export default {
  component: Titulo,
  title: "Componentes/Titulo",
  argTypes: {
    nivel: { control: "radio" },
  },
};

export default {
  component: Titulo,
  title: "Componentes/Titulo",
  argTypes: {
    nivel: { control: "radio" },
  },
};
export const DHL = {
  args: {
    texto: "DHL",
    nivel: 1,
    textColor: "red",
    backgroundColor: "orange",
  },
};
export const Coke = {
  args: {
    texto: "Coca-Cola",
    nivel: 3,
    textColor: "white",
    backgroundColor: "red",
  },
};

export const Titulo = (
  { texto, 
   nivel, 
   backgroundColor, 
   textColor }) => {
  const estilo = { backgroundColor, color: textColor };
  if (nivel === 1) return <h1 style={estilo}>{texto}</h1>;
  if (nivel === 2) return <h2 style={estilo}>{texto}</h2>;
  if (nivel === 3) return <h3 style={estilo}>{texto}</h3>;
  if (nivel === 4) return <h4 style={estilo}>{texto}</h4>;
  if (nivel === 5) return <h5 style={estilo}>{texto}</h5>;
  if (nivel === 6) return <h6 style={estilo}>{texto}</h6>;
};
Titulo.propTypes = {
  texto: PropTypes.string.isRequired,
  nivel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
  backgroundColor: PropTypes.string,
  textColor: PropTypes.string,
};
Titulo.defaultProps = {
  texto: "Título",
  nivel: 1,
  backgroundColor: "white",
  textColor: "black",
};

export const Boton = ({ label, primary, size, onClick }) => {
  const botonType = primary ? "btn-primary" : "btn-secondary";
  return (
    <button
      type="button"
      className={`btn ${botonType} btn-${size}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
};
Boton.propTypes = {
  label: PropTypes.string.isRequired,
  primary: PropTypes.bool,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  onClick: PropTypes.func,
};

Boton.defaultProps = {
  label: "Button",
  primary: true,
  size: "medium",
  onClick: undefined,
};

import { Boton } from "../Boton/Boton";
import { Titulo } from "../Titulo/Titulo";
import "./Toolbar.css";

export const Toolbar = () => {
  return (
    <div className="toolbar">
      <div>
        <Titulo texto="Frontend" />
      </div>
      <div className="toolbar-btns">
        <Boton label="inicio" />
        <Boton label="servicios" />
        <Boton label="contacto" primary={false} />
      </div>
    </div>
  );
};

export default Toolbar;

import { Toolbar } from "./Toolbar";

export default {
  component: Toolbar,
  title: "Componentes/Toolbar",
};

export const Primary = { };

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #606060;
  margin: 0;
}

.toolbar-btns {
  display: flex;
  gap: 5px;
}

const preview = {
  parameters: {
    options: {
      storySort: {
        order: ["pages", "atoms", "examples"]
      }
    }
    ...
};

export default {
  component: Boton,
  tags: ["autodocs"],
  title: "Atoms/Boton",
};

Boton.propTypes = {
  /**
   * Texto a mostrar en el botón
   */
  label: PropTypes.string.isRequired,
  /**
   * Este botón es primario?
   */
  primary: PropTypes.bool,
  /**
   * Qué tan grande será el botón?
   */
  size: PropTypes.oneOf(["small", "medium", "large"]),
  /**
   * Handler opcional para el evento onClick
   */
  onClick: PropTypes.func,
};

import { Meta, Description, Canvas, Controls } 
from "@storybook/blocks";
import * as BotonStories from "./Boton.stories";
import Code from "../assets/code-brackets.svg";

<Meta of={BotonStories} name="Docs" />
<Description of={BotonStories} />

<style>
  {`
.warning {
    border: 1px solid orange;
    padding: 1rem;
    color: orange;
    font-weight: bold;
    margin-bottom: 2rem;
}
`}
</style>

# Componente Botón
El componente botón está diseñado para funcionar 
dentro de cualquier componente de la aplicación.

<div class="warning">Esta es una alerta</div>

## Subtitulo
lorem ipsum dolor sit amet, consectetur

- Item 1
- Item 2
- Item 3

<img src={Code} alt="Code" />

{/* Este es un comentario */}

### Código fuente
Este es un ejemplo de una `variable`.
Se pueden usar expresiones como en JSX: {1 + 2}

```js
console.log("Hello world");
```

<Canvas
  of={BotonStories.Advanced}
  sourceState="shown"
  source={{ type: "code" }}
/>

<Controls of={BotonStories.Basic} />

import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";

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

import { INITIAL_VIEWPORTS } 
from "@storybook/addon-viewport";
const customViewports = {
  laptop: {
    name: "Laptop",
    styles: {
      width: "1024px",
      height: "800px",
    },
  },
  desktop: {
    name: "Desktop",
    styles: {
      width: "1025px",
      height: "800px",
    },
  },
};
const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    viewport: {
      viewports: {
        ...INITIAL_VIEWPORTS,
        ...customViewports,
      },
    },
  },
};

import PropTypes from "prop-types";
import "./Pill.css";
export const Pill = ({ 
  label, 
  backgroundColor, textColor }) => {
  const estilo = { backgroundColor, 
                  color: textColor };
  return (
    <a className="pill" style={estilo} href="#">
      {label}
    </a>
  );
};
Pill.propTypes = {
  label: PropTypes.string.isRequired,
  backgroundColor: PropTypes.string,
  textColor: PropTypes.string,
};
Pill.defaultProps = {
  label: "Pill",
  backgroundColor: "blue",
  textColor: "white",
};
export default Pill;

import { Pill } from "./Pill";
export default {
  component: Pill,
  tags: ["autodocs"],
  title: "Atoms/Pill",
};
export const Primary = {
  args: {
    label: "Primary",
  },
};

.pill {
  font-family: "Helvetica Neue";
  text-decoration: none;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .pill {
    border: 4px solid red;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .pill {
    border: 4px solid green;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .pill {
    border: 4px solid magenta;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  .pill {
    border: 4px solid orange;
  }
}
@media only screen and (min-width: 1201px) {
  .pill {
    border: 4px solid cyan;
  }
}

import PropTypes from "prop-types";
import "./Pill.css";

export const Pill = ({ icon, 
                      label, 
                      backgroundColor, 
                      textColor }) => {
  const estilo = { backgroundColor, color: textColor };

  return (
    <button className="pill" style={estilo} href="#">
      <div className="icon">{icon}</div>
      <div className="label">{label}</div>
    </button>
  );
};

Pill.propTypes = {
  icon: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  backgroundColor: PropTypes.string,
  textColor: PropTypes.string,
};
Pill.defaultProps = {
  icon: "",
  label: "pill",
  backgroundColor: "blue",
  textColor: "white",
};

export default Pill;

import { Pill } from "./Pill";

export default {
  component: Pill,
  tags: ["autodocs"],
  title: "Atoms/Pill",
};

export const France = {
  args: {
    icon: "🇫🇷",
    label: "France",
    backgroundColor: "#1c1c9f",
    textColor: "white",
  },
};
export const Spain = {
  args: {
    icon: "🇪🇸",
    label: "Spain",
    backgroundColor: "#f5a60c",
    textColor: "white",
  },
};

.pill {
  font-family: "Helvetica Neue";
  text-decoration: none;
  padding: 0.3rem 1rem;
  border: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pill .icon {
  font-size: 1rem;
}
.pill .label {
  font-size: 1.1rem;
}
/* Mobile */
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .pill {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    gap: 0;
    justify-content: center;
  }
  .pill .icon {
    font-size: 1.5rem;
  }
  .pill .label {
    display: none;
  }
}

/* Tablet */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .pill {
    border-radius: 5px;
    padding: 0.4rem 2rem;
  }
  .pill .icon {
    font-size: 1.5rem;
  }
  .pill .label {
    font-size: 0.9rem;
  }
}
/* Laptop */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .pill {
    padding: 0.5rem 2rem;
    border-radius: 9999px;
  }
}
/* Desktop */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  .pill {
    border-radius: 9999px;
    flex-direction: column;
    gap: 0;
    padding-bottom: 1.2rem;
  }
  .pill .icon {
    font-size: 2.5rem;
    padding: 0;
  }
  .pill .label {
    margin: -10px;
    font-size: 0.8rem;
  }
}
/* Large screens & TV */
@media only screen and (min-width: 1201px) {
  .pill {
    padding: 0.5rem 1.5rem;
  }
}