@generation/icons 1.1.6 → 1.1.8

package/packages/demo/src/index.css

@@ -1,11 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
-  color-scheme: light dark;
-  color: #303135;
-  background-color: #ffffff;
   font-family: 'azo-sans-web', sans-serif;
   font-size: 16px;
 }
-
-body {
-  margin: 0;
-}

package/packages/demo/tailwind.config.js

@@ -0,0 +1,130 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        blue: {
+          '01': '#006AEB',
+          '02': '#005CC4',
+        },
+        charcoal: '#303135',
+        current: 'currentColor',
+        green: {
+          '00': '#01836B',
+        },
+        gray: {
+          '00': '#303135',
+          '01': '#474747',
+          '02': '#737373',
+          '03': '#999999',
+          '04': '#DDDDDD',
+          '05': '#F3F3F3',
+          '06': '#FAFAFA',
+        },
+        orange: {
+          '00': '#E95400',
+        },
+        red: {
+          '00': '#D91222',
+        },
+        transparent: 'transparent',
+        white: '#FFFFFF',
+      },
+      screens: {
+        // => @media (min-width: 6768px) { ... }
+        // VALERIA DIJO QUE ESTO ESTABA BIEN
+        sm: '480px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px', // Esta es la vista de 1440px
+      },
+      fontSize: {
+        'title-sm-bold': [
+          '20px',
+          {
+            lineHeight: '28px',
+            letterSpacing: '0',
+            fontWeight: '700',
+          },
+        ],
+        'title-md-bold': [
+          '24px',
+          {
+            lineHeight: '28px',
+            letterSpacing: '0',
+            fontWeight: '700',
+          },
+        ],
+        'title-lg-bold': [
+          '28px',
+          {
+            lineHeight: '32px',
+            letterSpacing: '0',
+            fontWeight: '700',
+          },
+        ],
+        'body-xs-bold': [
+          '12px',
+          {
+            lineHeight: '16px',
+            letterSpacing: '0',
+            fontWeight: '700',
+          },
+        ],
+        'body-xs-regular': [
+          '12px',
+          {
+            lineHeight: '16px',
+            letterSpacing: '0',
+            fontWeight: '400',
+          },
+        ],
+        'body-sm-bold': [
+          '14px',
+          {
+            lineHeight: '20px',
+            letterSpacing: '0',
+            fontWeight: '700',
+          },
+        ],
+        'body-sm-regular': [
+          '14px',
+          {
+            lineHeight: '20px',
+            letterSpacing: '0',
+            fontWeight: '400',
+          },
+        ],
+        'body-md-regular': [
+          '16px',
+          {
+            lineHeight: '24px',
+            letterSpacing: '0',
+            fontWeight: '400',
+          },
+        ],
+        'body-md-bold': [
+          '16px',
+          {
+            lineHeight: '24px',
+            letterSpacing: '0',
+            fontWeight: '700',
+          },
+        ],
+        'body-lg-bold': [
+          '20px',
+          {
+            lineHeight: '26px',
+            letterSpacing: '0',
+            fontWeight: '700',
+          },
+        ],
+      },
+    },
+  },
+  plugins: [],
+};

package/scripts/create-full.mjs

@@ -14,29 +14,83 @@ const iconNames = Array.from(
   (match) => match[1]
 );
 
-// Construir el contenido del archivo Gallery.jsx
+// Construir el contenido del archivo Gallery.jsx con toggle y búsqueda
 const galleryContent = `
-import React from 'react';
-import './styles.css';
+import React, { useState } from 'react';
+import { Code } from '../Code';
 import {
   ${iconNames.join(',\n  ')}
 } from '@generation/icons';
 
-const Gallery = () => (
-  <div className="gallery">
-    ${iconNames
-      .map(
-        (icon) => `
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <${icon} />
+const icons = {
+  ${iconNames.map((icon) => `${icon}`).join(',\n  ')}
+};
+
+const Gallery = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Filtrar iconos según el término de búsqueda
+  const filteredIcons = Object.entries(icons).filter(([name]) =>
+    name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Estilos dinámicos según el modo (oscuro o claro)
+  const containerClass = isDarkMode ? 'bg-black text-white' : 'bg-white text-black';
+
+  return (
+    <div className={\`p-8 min-h-screen transition-colors duration-300 \${containerClass}\`}>
+    <div className="text-blue-01 text-title-lg-bold py-2 text-center">Generation Icons</div>
+      <div>
+        <Code />
       </div>
-      <span>${icon}</span>
-    </div>`
-      )
-      .join('\n    ')}
-  </div>
-);
+      <div className="flex justify-between items-center mb-6">
+        <input
+          type="text"
+          className="w-full max-w-md p-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-charcoal"
+          placeholder="Search icons..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <button
+          className={\`relative inline-flex items-center cursor-pointer\`}
+          onClick={() => setIsDarkMode((prev) => !prev)}
+        >
+          <span className="sr-only">Modo Oscuro</span>
+          <span
+            className={\`block w-14 h-8 rounded-full \${isDarkMode ? 'bg-green-500' : 'bg-blue-500'}\`}
+          ></span>
+          <span
+            className={\`absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform duration-300 ease-in-out transform \${isDarkMode ? 'translate-x-6' : 'translate-x-0'}\`}
+          ></span>
+        </button>
+      </div>
+      <div
+        className="grid gap-4 text-center"
+        style={{
+          gridTemplateColumns: 'repeat(auto-fill, minmax(90px, 1fr))',
+          gridAutoRows: 'auto',
+        }}
+      >
+        {filteredIcons.length > 0 ? (
+          filteredIcons.map(([name, IconComponent]) => (
+            <div
+              key={name}
+              className="flex flex-col items-center justify-center gap-1 text-center"
+            >
+              <div className={\`min-h-[64px] flex items-center justify-center border-2 border-transparent rounded shadow-md w-full text-[32px] \${isDarkMode ? 'bg-gray-900' : 'bg-white'}\`}>
+                <IconComponent />
+              </div>
+              <span className="text-[10px]">{name}</span>
+            </div>
+          ))
+        ) : (
+          <p className="col-span-full text-gray-500">No se encontraron iconos</p>
+        )}
+      </div>
+    </div>
+  );
+};
 
 export default Gallery;
 `;

package/packages/demo/src/App.css

@@ -1,13 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.title {
-  margin-bottom: 2rem;
-  text-align: center;
-  font-weight: 400;
-  font-size: 24px;
-  left: 20px;
-}

package/packages/demo/src/components/Gallery/styles.css

@@ -1,38 +0,0 @@
-.gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(90px,1fr));
-  grid-auto-rows: auto;
-  text-align: center;
-  row-gap: 1rem;
-  column-gap: 1rem;
-}
-
-.gallery-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  justify-content: center;
-  align-items: center;
-}
-
-.gallery-item > span {
-  font-size: 9px;
-}
-
-.gallery-item > span::selection {
-  color: red;
-  background: yellow;
-}
-
-.gallery-svg {
-  min-height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff;
-  border-radius: 2px;
-  box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
-  border: 2px solid transparent;
-  width: 100%;
-  font-size: 2rem;
-}