@team14/cms-library 0.1.0 → 0.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@team14/cms-library",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Library of Components for CMS Web App.",
   "repository": {
     "type": "git",
@@ -11,12 +11,16 @@
   "author": "Team 14 - EmanuelFuneS",
   "license": "MIT",
   "homepage": "https://github.com/No-Country-simulation/S03-26-Equipo-14-Web-App-Development",
+  "files": [
+    "dist"
+  ],
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },

package/dev/App.css

@@ -1,184 +0,0 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}

package/dev/App.tsx

@@ -1,29 +0,0 @@
-import reactLogo from '../public/assets/react.svg';
-import viteLogo from '../public/assets/vite.svg';
-import heroImg from '../public/assets/hero.png';
-import './App.css';
-import TestimonialCarrousel from '../src/components/TestimonialCrousel';
-
-function App() {
-  return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>CMS Library</h1>
-          <h2>Preview Components</h2>
-        </div>
-      </section>
-
-      <TestimonialCarrousel apiKey="cms-api-key:DRAG954HBGPTuML0KvR0_g:Wt1_pWvPMg22Y0x6r6poJcNygqyVUU9FDTVJ-F60XeqW2o9Nkuux4ND_1XvHah3m8OL93JRPyv1cHO0dreVWYFLPk-QhGQlTlIEQ1PAF8WgwdZnf6Km4vKQu_rcx_CpWqQ2vx4RJT9Rx-VqjNjunIQ" />
-
-      <section id="spacer"></section>
-    </>
-  );
-}
-
-export default App;

package/dev/index.css

@@ -1,114 +0,0 @@
-
-/* index.css */
-@import "tailwindcss";
-:root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
-
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-}
-
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}

package/dev/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>cms-library</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
-  </body>
-</html>

package/dev/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.js'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

package/postcss.config.mjs

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  }
-}

package/src/components/TestimonialCrousel/index.tsx

@@ -1,115 +0,0 @@
-import type { ComponentProps, Testimonial } from '../../types/common';
-import useFetchTestimonials from '../../hooks/fetchTestimonials';
-import { useState } from 'react';
-
-import QuoteCard from '../UI/QuoteCard';
-import VideoCard from '../UI/VideoCard';
-import CaseCard from '../UI/CaseCard';
-import { AnimatePresence, motion } from 'framer-motion';
-import { cn } from '../../lib/index';
-
-const variants = {
-  enter: (direction: number) => ({
-    x: direction > 0 ? 300 : -300,
-    opacity: 0,
-  }),
-  center: { x: 0, opacity: 1 },
-  exit: (direction: number) => ({
-    x: direction > 0 ? -300 : 300,
-    opacity: 0,
-  }),
-};
-
-const TestimonialCarrousel = ({ apiKey, length = 2, className }: ComponentProps) => {
-  const { isLoading, testimonials } = useFetchTestimonials({ apiKey });
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [direction, setDirection] = useState(1);
-
-  const data = testimonials?.slice(0, length) ?? [];
-
-  const paginate = (newDirection: number) => {
-    setDirection(newDirection);
-    setCurrentIndex((prev) => (prev + newDirection + data.length) % data.length);
-  };
-
-  const renderCard = (testimonial: Testimonial) => {
-    switch (testimonial.type) {
-      case 'case':
-        return <CaseCard data={testimonial} />;
-      case 'video':
-        return <VideoCard data={testimonial} />;
-      default:
-        return <QuoteCard data={testimonial} />;
-    }
-  };
-
-  return (
-    <div className={cn("w-full flex flex-col my-10", className)}>
-      <div className="flex items-center justify-center px-4">
-        {isLoading ? (
-          <div className="text-muted-foreground">Cargando testimonios...</div>
-        ) : (
-          <div className="w-full max-w-3xl flex flex-col gap-8">
-            {/* Card animada */}
-            <div className="min-h-70 flex items-center">
-              <AnimatePresence custom={direction} mode="wait">
-                <motion.div
-                  key={currentIndex}
-                  custom={direction}
-                  variants={variants}
-                  initial="enter"
-                  animate="center"
-                  exit="exit"
-                  transition={{ duration: 0.5, ease: 'easeInOut' }}
-                  className="w-full"
-                >
-                  {data[currentIndex] && renderCard(data[currentIndex])}
-                </motion.div>
-              </AnimatePresence>
-            </div>
-
-            
-            <div className="flex items-center justify-center gap-8">
-              <button
-                onClick={() => paginate(-1)}
-                className="w-11 h-11 flex items-center justify-center rounded-full border border-border bg-card hover:bg-accent hover:text-accent-foreground transition-colors shadow-sm"
-                aria-label="Anterior"
-              >
-                ←
-              </button>
-
-              <div className="flex gap-3">
-                {data.map((_, idx) => (
-                  <button
-                    key={idx}
-                    onClick={() => {
-                      setDirection(idx - currentIndex);
-                      setCurrentIndex(idx);
-                    }}
-                    className={cn(
-                      "w-3.5 h-3.5 rounded-full transition-all",
-                      idx === currentIndex
-                        ? "bg-primary scale-125"
-                        : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
-                    )}
-                    aria-label={`Ir al testimonio ${idx + 1}`}
-                  />
-                ))}
-              </div>
-
-              <button
-                onClick={() => paginate(1)}
-                className="w-11 h-11 flex items-center justify-center rounded-full border border-border bg-card hover:bg-accent hover:text-accent-foreground transition-colors shadow-sm"
-                aria-label="Siguiente"
-              >
-                →
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default TestimonialCarrousel;

package/src/components/UI/CaseCard.tsx

@@ -1,44 +0,0 @@
-import type { Testimonial } from '../../types/common';
-import { cn } from '../../lib/index';
-
-interface CaseCardProps {
-  data: Testimonial;
-  className?: string;
-}
-
-const CaseCard = ({ data, className }: CaseCardProps) => {
-  return (
-    <div
-      className={cn(
-        'border border-border bg-card text-card-foreground rounded-2xl p-8 shadow-sm',
-        'flex flex-col min-h-60',
-        className,
-      )}
-    >
-      <div className="flex-1 text-lg leading-relaxed text-foreground">
-        “{data.content}”
-      </div>
-
-      <div className="mt-8 flex items-center gap-4">
-        <div className="w-12 h-12 rounded-full bg-muted shrink-0 overflow-hidden border border-border">
-          {data.author_photo ? (
-            <img
-              src={data.author_photo}
-              alt={data.author}
-              className="w-full h-full object-cover"
-            />
-          ) : (
-            <div className="w-full h-full bg-primary/10" />
-          )}
-        </div>
-
-        <div>
-          <p className="font-semibold text-foreground">{data.author}</p>
-          <p className="text-sm text-muted-foreground">{data.author_role}</p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CaseCard;

package/src/components/UI/QuoteCard.tsx

@@ -1,11 +0,0 @@
-import type { Testimonial } from '../../types/common';
-
-interface QuoteCardProps {
-  data: Testimonial;
-}
-
-const QuoteCard = ({}: QuoteCardProps) => {
-  return <div>QuoteCard</div>;
-};
-
-export default QuoteCard;

package/src/components/UI/VideoCard.tsx

@@ -1,11 +0,0 @@
-import type { Testimonial } from '../../types/common';
-
-interface VideoCardProps {
-  data: Testimonial;
-}
-
-const VideoCard = ({}: VideoCardProps) => {
-  return <div>VideoCard</div>;
-};
-
-export default VideoCard;

package/src/hooks/fetchTestimonials.tsx

@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { Testimonial } from '../types/common';
-
-interface useFetchTestimonialsProps {
-  apiKey?: string;
-}
-
-const useFetchTestimonials = ({ apiKey }: useFetchTestimonialsProps) => {
-  const [testimonials, setTestimonials] = useState<Testimonial[]>();
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    const fetchTestimonials = async () => {
-      if (!apiKey) return;
-      const result = await fetch(
-        'https://s03-26-equipo-14-web-app-development.onrender.com/embed',
-        {
-          method: 'Get',
-          headers: {
-            'x-embed-key': apiKey,
-          },
-        },
-      );
-      const response = await result.json();
-      if (response.success) setIsLoading(false);
-      setTestimonials(response.data);
-    };
-
-    fetchTestimonials();
-  }, []);
-  return {
-    testimonials,
-    isLoading,
-  };
-};
-
-export default useFetchTestimonials;

package/src/index.ts

@@ -1,4 +0,0 @@
-import TestimonialCarrousel from './components/TestimonialCrousel';
-import '../dev/index.css';
-export { TestimonialCarrousel };
-

package/src/lib/index.tsx

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/types/common.ts

@@ -1,18 +0,0 @@
-export interface ComponentProps {
-  apiKey: string;
-  length?: number;
-  className?: string;
-}
-
-export interface Testimonial {
-  id: string;
-  type: string;
-  title: string;
-  content: string;
-  author: string;
-  author_photo: string;
-  author_role: string;
-  media_url: string;
-  media_description: string;
-  rating: string;
-}

package/tsconfig.app.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "module": "esnext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src", "dev"]
-}

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}