@jjlmoya/utils-textiles 1.1.0

package/src/tool/laundryGuide/component.astro

@@ -0,0 +1,486 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { TextileData } from './logic';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui = {} } = Astro.props;
+const textileData = (ui.textileData as Record<string, TextileData>) ?? {};
+const fibers = Object.entries(textileData).map(([id, data]) => ({ id, ...data }));
+---
+
+<div class="laundry-guide-container" id="laundry-guide-root">
+  <div class="guide-wrapper">
+    <div class="fibers-sidebar">
+      <h2 class="sidebar-title">
+        <Icon name="mdi:washing-machine" />
+        {ui.selectMaterialTitle || 'Select Fabric'}
+      </h2>
+      <div class="fibers-grid" id="fibers-list">
+        {fibers.map((fiber) => (
+          <button
+            class="fiber-btn"
+            data-fiber-id={fiber.id}
+            style={`--fiber-color: ${fiber.color}`}
+          >
+            <Icon name={fiber.icon} class="fiber-icon" />
+            <span class="fiber-name">{fiber.name}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+
+    <div class="guide-main">
+      <div id="welcome-state" class="welcome-message">
+        <Icon name="mdi:washing-machine" class="welcome-icon" />
+        <h3>{ui.selectMaterialPrompt || 'Select a fabric to see care instructions'}</h3>
+      </div>
+
+      <div id="care-state" class="care-display hidden">
+        <div class="care-header">
+          <div class="header-icon-bg">
+            <Icon id="header-icon" name="mdi:sheep" class="header-icon" />
+          </div>
+          <div class="header-text">
+            <h3 id="fiber-name">Wool</h3>
+            <p>{ui.careInstructions || 'Premium care instructions'}</p>
+          </div>
+        </div>
+
+        <div class="care-grid">
+          <div class="care-card">
+            <Icon name="mdi:thermometer" class="care-icon" />
+            <span class="care-label">{ui.maxTemp || 'Max Temp'}</span>
+            <span id="max-temp" class="care-value">30°C</span>
+          </div>
+
+          <div class="care-card">
+            <Icon name="mdi:iron" class="care-icon" />
+            <span class="care-label">{ui.ironing || 'Ironing'}</span>
+            <span id="ironing-info" class="care-value">Low</span>
+          </div>
+
+          <div class="care-card">
+            <Icon name="mdi:weather-sunny" class="care-icon" />
+            <span class="care-label">{ui.drying || 'Drying'}</span>
+            <span id="drying-info" class="care-value">Flat</span>
+          </div>
+        </div>
+
+        <div class="care-sections">
+          <div class="care-section">
+            <h4 class="section-title avoid-title">
+              <Icon name="mdi:close-octagon" />
+              {ui.avoidLabel || 'Things to AVOID'}
+            </h4>
+            <ul id="donts-list" class="dont-list"></ul>
+          </div>
+
+          <div class="care-section sos-section">
+            <h4 class="section-title sos-title">
+              <Icon name="mdi:lightbulb-outline" />
+              {ui.sosLabel || 'Maintenance Tip'}
+            </h4>
+            <p id="sos-info" class="sos-text">Tips will appear here</p>
+          </div>
+        </div>
+
+        <div class="description-box">
+          <p id="fiber-description"></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script define:vars={{ textileData }} is:inline>
+  window.__textileData = textileData;
+</script>
+
+<script>
+  import type { TextileData } from './logic';
+
+  function setText(id: string, value: string) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = value;
+  }
+
+  function renderFiberIcon(data: TextileData) {
+    const fIcon = document.getElementById('header-icon');
+    if (!fIcon) return;
+    fIcon.setAttribute('name', data.icon);
+    (fIcon as HTMLElement).style.color = data.color;
+  }
+
+  function renderDonts(data: TextileData) {
+    const fDonts = document.getElementById('donts-list');
+    if (!fDonts) return;
+    fDonts.innerHTML = data.donts
+      .map((d: string) => `<li><span class="dont-bullet"></span>${d}</li>`)
+      .join('');
+  }
+
+  function updateCareUI(data: TextileData) {
+    document.getElementById('welcome-state')?.classList.add('hidden');
+    document.getElementById('care-state')?.classList.remove('hidden');
+    renderFiberIcon(data);
+    setText('fiber-name', data.name);
+    setText('max-temp', data.maxTemp);
+    setText('ironing-info', data.ironing);
+    setText('drying-info', data.drying);
+    setText('sos-info', data.sos);
+    setText('fiber-description', data.description);
+    renderDonts(data);
+  }
+
+  function initLaundryGuide() {
+    const root = document.getElementById('laundry-guide-root');
+    if (!root) return;
+
+    const textileData = (window as unknown as { __textileData: Record<string, TextileData> }).__textileData;
+    const fiberBtns = document.querySelectorAll('.fiber-btn');
+
+    fiberBtns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const id = btn.getAttribute('data-fiber-id');
+        if (!id || !textileData[id]) return;
+
+        fiberBtns.forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        updateCareUI(textileData[id]);
+      });
+    });
+  }
+
+  function startInit() {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initLaundryGuide);
+    } else {
+      setTimeout(initLaundryGuide, 100);
+    }
+    document.addEventListener('astro:page-load', initLaundryGuide);
+  }
+
+  startInit();
+</script>
+
+<style>
+  .laundry-guide-container {
+    width: 100%;
+    padding: 1rem;
+  }
+
+  .guide-wrapper {
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    gap: 2rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 1.5rem;
+    overflow: hidden;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  }
+
+  .fibers-sidebar {
+    padding: 2rem;
+    border-right: 1px solid var(--border-color);
+    background: var(--bg-page);
+  }
+
+  .sidebar-title {
+    font-size: 0.9rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+    margin: 0 0 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .sidebar-title svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .fibers-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .fiber-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    color: var(--text-main);
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .fiber-btn:hover {
+    border-color: #6366f1;
+    background: rgba(99, 102, 241, 0.05);
+  }
+
+  .fiber-btn.active {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: #6366f1;
+    font-weight: 600;
+  }
+
+  .fiber-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--fiber-color);
+  }
+
+  .fiber-name {
+    font-size: 0.9rem;
+    text-align: left;
+    flex: 1;
+  }
+
+  .guide-main {
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .welcome-message {
+    text-align: center;
+    color: var(--text-muted);
+  }
+
+  .welcome-message.hidden {
+    display: none;
+  }
+
+  .welcome-icon {
+    width: 5rem;
+    height: 5rem;
+    color: var(--border-color);
+    margin-bottom: 1rem;
+  }
+
+  .welcome-message h3 {
+    font-size: 1.5rem;
+    margin: 0;
+    color: var(--text-muted);
+  }
+
+  .care-display {
+    width: 100%;
+    max-width: 600px;
+    animation: fade-in 0.3s ease;
+  }
+
+  .care-display.hidden {
+    display: none;
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .care-header {
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    color: white;
+    padding: 2rem;
+    border-radius: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .header-icon-bg {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 1rem;
+    border-radius: 0.75rem;
+    backdrop-filter: blur(10px);
+  }
+
+  .header-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: white;
+  }
+
+  .header-text h3 {
+    font-size: 1.75rem;
+    margin: 0 0 0.25rem;
+    font-weight: 900;
+  }
+
+  .header-text p {
+    margin: 0;
+    opacity: 0.9;
+    font-weight: 500;
+  }
+
+  .care-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .care-card {
+    background: var(--bg-page);
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--border-color);
+    text-align: center;
+  }
+
+  .care-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #3b82f6;
+    margin-bottom: 0.75rem;
+  }
+
+  .care-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+  }
+
+  .care-value {
+    display: block;
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: var(--text-main);
+  }
+
+  .care-sections {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .care-section {
+    background: var(--bg-page);
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--border-color);
+  }
+
+  .care-section.sos-section {
+    background: rgba(16, 185, 129, 0.05);
+    border-color: rgba(16, 185, 129, 0.2);
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    font-weight: 700;
+    margin: 0 0 1rem;
+    color: var(--text-main);
+  }
+
+  .section-title.avoid-title {
+    color: #ef4444;
+  }
+
+  .section-title.sos-title {
+    color: #10b981;
+  }
+
+  .section-title svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .dont-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .dont-list li {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+  }
+
+  .dont-bullet {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: #ef4444;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .sos-text {
+    margin: 0;
+    font-size: 0.95rem;
+    color: #059669;
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .description-box {
+    background: var(--bg-page);
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--border-color);
+  }
+
+  .description-box p {
+    margin: 0;
+    color: var(--text-muted);
+    line-height: 1.6;
+  }
+
+  @media (max-width: 768px) {
+    .guide-wrapper {
+      grid-template-columns: 1fr;
+    }
+
+    .fibers-sidebar {
+      border-right: none;
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .fibers-grid {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .fiber-btn {
+      flex: 0 1 calc(50% - 0.375rem);
+    }
+
+    .care-sections {
+      grid-template-columns: 1fr;
+    }
+
+    .care-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

package/src/tool/laundryGuide/data-en.ts

@@ -0,0 +1,166 @@
+import type { TextileData } from './logic';
+
+export const TEXTILE_CARE_DATA_EN: Record<string, TextileData> = {
+  cotton: {
+    name: "Cotton",
+    description: "Natural plant fiber, soft and breathable. The king of basics.",
+    family: "natural",
+    origin: "Cotton plant capsule",
+    breathability: 9,
+    durability: 7,
+    warmth: 4,
+    washing: "Cold or lukewarm water (shrinks with heat). Allows strong spinning.",
+    drying: "Dryer on medium heat or air dry.",
+    ironing: "High heat with steam while still damp.",
+    donts: ["Leave wet for long (mold risk)", "Excess bleach (weakens fibers)"],
+    sos: "Shrunk? Soak in lukewarm water with hair conditioner and gently stretch.",
+    icon: "mdi:tshirt-crew",
+    color: "#60A5FA",
+    maxTemp: "40-60°C",
+    isNoble: false,
+  },
+  linen: {
+    name: "Linen",
+    description: "Very strong plant fiber, fresh and with characteristic wrinkle.",
+    family: "natural",
+    origin: "Linen plant stem",
+    breathability: 10,
+    durability: 9,
+    warmth: 2,
+    washing: "Delicate cycle, don't overfill drum (needs water to avoid breaking).",
+    drying: "Air dry only. NEVER use dryer (breaks fibers).",
+    ironing: "Maximum temperature, always with very damp garment.",
+    donts: ["Strong spinning", "Always folding same way (fibers break)"],
+    sos: "Shine from ironing? Wipe with cloth dampened in white vinegar.",
+    icon: "mdi:leaf",
+    color: "#A7F3D0",
+    maxTemp: "60°C",
+    isNoble: true,
+  },
+  wool: {
+    name: "Wool / Merino",
+    description: "Protein fiber, excellent thermal insulator and elastic.",
+    family: "natural",
+    origin: "Sheep fleece",
+    breathability: 8,
+    durability: 6,
+    warmth: 10,
+    washing: "Hand wash or wool cycle. Neutral soap. NEVER hot water (felts).",
+    drying: "Flat on towel. Never hang (deforms).",
+    ironing: "Vertical steam or medium heat with cloth on top.",
+    donts: ["Hot water", "Rubbing or wringing", "Bleach (dissolves)"],
+    sos: "Felted? Almost impossible, but soaking with conditioner may help slightly.",
+    icon: "mdi:sheep",
+    color: "#FCD34D",
+    maxTemp: "30°C",
+    isNoble: true,
+  },
+  silk: {
+    name: "Silk",
+    description: "Continuous filament animal fiber. Natural sheen and dry feel.",
+    family: "natural",
+    origin: "Silkworm cocoon",
+    breathability: 7,
+    durability: 5,
+    warmth: 6,
+    washing: "Hand wash in cold water with neutral shampoo. Don't wring.",
+    drying: "Roll in towel to remove moisture. Air dry in shade.",
+    ironing: "Low heat, inside out, no direct steam.",
+    donts: ["Direct sunlight (burns)", "Perfume/Deodorant (stains)", "Water (water marks)"],
+    sos: "Water stain? Gently rub silk against itself.",
+    icon: "mdi:ticket-percent",
+    color: "#F472B6",
+    maxTemp: "20°C",
+    isNoble: true,
+  },
+  cashmere: {
+    name: "Cashmere",
+    description: "Luxury fiber from Cashmere goat. Extremely soft and warm.",
+    family: "natural",
+    origin: "Undercoat of Hircus goat",
+    breathability: 9,
+    durability: 5,
+    warmth: 10,
+    washing: "STRICTLY hand wash with baby shampoo. Cold water. Never rub.",
+    drying: "Flat on towel, shaping as it dries. Never hang.",
+    ironing: "Vertical steam without touching or mild heat with cloth.",
+    donts: ["Washing machine (even wool cycle)", "Fabric softener", "Continuous friction (pilling)"],
+    sos: "Pilling? Use specialized comb or remove by hand.",
+    icon: "mdi:crown",
+    color: "#F59E0B",
+    maxTemp: "20°C",
+    isNoble: true,
+  },
+  polyester: {
+    name: "Polyester",
+    description: "Synthetic petroleum fiber. Resistant, wrinkle-free, doesn't breathe.",
+    family: "synthetic",
+    origin: "Petroleum-derived polymers",
+    breathability: 2,
+    durability: 10,
+    warmth: 5,
+    washing: "Warm/cold water. Tolerates everything, but traps odors and oils.",
+    drying: "Low dryer or air dry. Dries very quickly.",
+    ironing: "Low/medium heat. Be careful, it melts.",
+    donts: ["Excess heat", "Fabric softener (creates waxy film that traps odor)"],
+    sos: "Persistent odor? Soak in water with vinegar before washing.",
+    icon: "mdi:oil",
+    color: "#94A3B8",
+    maxTemp: "40°C",
+    isNoble: false,
+  },
+  viscose: {
+    name: "Viscose / Rayon",
+    description: "Semi-synthetic regenerated cellulose. Silky feel, very absorbent.",
+    family: "artificial",
+    origin: "Chemically treated wood pulp",
+    breathability: 8,
+    durability: 4,
+    warmth: 3,
+    washing: "Delicate in cold. Becomes very weak when wet.",
+    drying: "Flat or padded hanger. No dryer.",
+    ironing: "Medium, inside out. No direct steam if possible.",
+    donts: ["Wring when wet (breaks)", "Long soaks"],
+    sos: "Shrunken and stiff? Iron with lots of steam to relax fibers.",
+    icon: "mdi:forest",
+    color: "#C084FC",
+    maxTemp: "30°C",
+    isNoble: false,
+  },
+  nylon: {
+    name: "Nylon (Polyamide)",
+    description: "Highly resistant to tension and abrasion.",
+    family: "synthetic",
+    origin: "Petroleum-derived (polyamide)",
+    breathability: 3,
+    durability: 10,
+    warmth: 4,
+    washing: "Normal cycle. Be careful mixing colors (absorbs dyes).",
+    drying: "Air dry. Low dryer.",
+    ironing: "Very low. Melts quickly.",
+    donts: ["Bleach (yellows)", "Direct sunlight (fades)"],
+    sos: "Grayish? Wash with oxygen-based whitener.",
+    icon: "mdi:parachute",
+    color: "#2DD4BF",
+    maxTemp: "40°C",
+    isNoble: false,
+  },
+  acrylic: {
+    name: "Acrylic",
+    description: "Synthetic wool imitation. Soft, warm, pills easily.",
+    family: "synthetic",
+    origin: "Polyacrylonitrile",
+    breathability: 4,
+    durability: 6,
+    warmth: 8,
+    washing: "Lukewarm water. Use fabric softener to reduce static.",
+    drying: "Air dry. Heat permanently deforms garment.",
+    ironing: "Don't iron",
+    donts: ["Fabric softener (breaks fibers)", "Strong wringing", "Heat"],
+    sos: "Lost elasticity? It's irreversible (fibers are broken).",
+    icon: "mdi:resize",
+    color: "#450A0A",
+    maxTemp: "30°C",
+    isNoble: false,
+  },
+};