@ikas/component-cli 0.93.0 → 0.95.0

package/templates/create-full/src/components/BlogHome/components/BlogCard/styles.css

@@ -0,0 +1,121 @@
+/* ===== BlogCard ===== */
+.kombos-blog-card {
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--kombos-gray-200);
+}
+
+/* Image link */
+.kombos-blog-card__image-link {
+  display: block;
+  text-decoration: none;
+}
+
+/* Image wrapper */
+.kombos-blog-card__image-wrap {
+  position: relative;
+  overflow: hidden;
+  background: var(--kombos-gray-100);
+}
+
+.kombos-blog-card__image {
+  width: 100%;
+  height: 100%;
+}
+
+/* Content area */
+.kombos-blog-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  flex: 1;
+}
+
+/* Category badge link */
+.kombos-blog-card__category {
+  display: inline-block;
+  align-self: flex-start;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 100px;
+  padding: 0.25rem 0.75rem;
+  text-decoration: none;
+  color: var(--kombos-gray-700);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  transition: background-color 0.15s ease, color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.kombos-blog-card__category:hover {
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  border-color: var(--kombos-gray-900);
+}
+
+/* Title — 2 line clamp */
+.kombos-blog-card__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Description — 3 line clamp */
+.kombos-blog-card__desc {
+  margin: 0;
+  color: var(--kombos-gray-500);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Footer */
+.kombos-blog-card__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: auto;
+  padding-top: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .kombos-blog-card__footer {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+/* Meta (date + author) */
+.kombos-blog-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--kombos-gray-500);
+}
+
+.kombos-blog-card__dot {
+  color: var(--kombos-gray-400);
+}
+
+/* Read more link */
+.kombos-blog-card__read-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--kombos-gray-700);
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.kombos-blog-card__read-more:hover {
+  text-decoration: underline;
+}

package/templates/create-full/src/components/BlogHome/index.tsx

@@ -0,0 +1,124 @@
+import {
+  IkasBlogList,
+  IkasBlog,
+  getBlogListPage,
+  getBlogListPageCount,
+  hasBlogListPrevPage,
+  hasBlogListNextPage,
+  getIkasBlogCategoryHref,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../utils/cx";
+import Pagination from "../../sub-components/Pagination";
+import BlogCard from "./components/BlogCard";
+import { Props } from "./types";
+
+export function BlogHome({
+  blogList,
+  blogCategoryList,
+  title = "Blog",
+  description,
+  allCategoriesText = "Tümünü Gör",
+  readMoreText = "Devamını Oku",
+  emptyMessage = "Henüz blog yazısı bulunmuyor.",
+  aspectRatio,
+  objectFit,
+}: Props) {
+  if (!blogList) return null;
+
+  const activeCategoryId = blogList.filterCategoryId;
+  const categories = blogCategoryList?.data ?? [];
+  const blogs = blogList.data ?? [];
+
+  return (
+    <section className="kombos-blog-home">
+      <div className="kombos-container">
+        <div className="kombos-blog-home__header">
+          <h1 className="kombos-blog-home__title text-xl-semibold md:display-xs-semibold">
+            {title}
+          </h1>
+          {description && (
+            <p className="kombos-blog-home__description text-md-regular">
+              {description}
+            </p>
+          )}
+        </div>
+
+        {categories.length > 0 && (
+          <div className="kombos-blog-home__categories">
+            <a
+              href="/blog"
+              className={cx(
+                "kombos-blog-home__cat-btn",
+                "text-sm-medium",
+                !activeCategoryId && "kombos-blog-home__cat-btn--active",
+              )}
+            >
+              {allCategoriesText}
+            </a>
+            {categories.map((cat) => (
+              <a
+                key={cat.id}
+                href={getIkasBlogCategoryHref(cat)}
+                className={cx(
+                  "kombos-blog-home__cat-btn",
+                  "text-sm-medium",
+                  activeCategoryId === cat.id &&
+                    "kombos-blog-home__cat-btn--active",
+                )}
+              >
+                {cat.name}
+              </a>
+            ))}
+          </div>
+        )}
+
+        {blogs.length === 0 ? (
+          <p className="kombos-blog-home__empty text-md-semibold">
+            {emptyMessage}
+          </p>
+        ) : (
+          <div className="kombos-blog-home__grid">
+            {blogs.map((blog: IkasBlog) => (
+              <BlogCard
+                key={blog.id}
+                blog={blog}
+                readMoreText={readMoreText}
+                aspectRatio={aspectRatio}
+                objectFit={objectFit}
+              />
+            ))}
+          </div>
+        )}
+
+        <BlogPagination blogList={blogList} />
+      </div>
+    </section>
+  );
+}
+
+const BlogPagination = observer(function BlogPagination({
+  blogList,
+}: {
+  blogList: IkasBlogList;
+}) {
+  const currentPage = blogList.page ?? 1;
+  const totalPages = getBlogListPageCount(blogList);
+
+  const goToPage = (page: number) => {
+    getBlogListPage(blogList, page);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <Pagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      hasPrev={hasBlogListPrevPage(blogList)}
+      hasNext={hasBlogListNextPage(blogList)}
+      onPageChange={goToPage}
+    />
+  );
+});
+
+export default BlogHome;

package/templates/create-full/src/components/BlogHome/styles.css

@@ -0,0 +1,118 @@
+/* ===== BlogHome Section ===== */
+.kombos-blog-home {
+  width: 100%;
+  padding: 2rem 0;
+}
+
+.kombos-blog-home .kombos-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Header (title + description) */
+.kombos-blog-home__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+.kombos-blog-home__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-blog-home__description {
+  margin: 0;
+  color: var(--kombos-gray-500);
+}
+
+/* Category navigation */
+.kombos-blog-home__categories {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 0.25rem;
+}
+
+.kombos-blog-home__categories::-webkit-scrollbar {
+  display: none;
+}
+
+.kombos-blog-home__cat-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 100px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.15s ease, color 0.15s ease,
+    border-color 0.15s ease;
+  background: transparent;
+  color: var(--kombos-gray-700);
+  text-decoration: none;
+}
+
+.kombos-blog-home__cat-btn:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-blog-home__cat-btn--active {
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-blog-home__cat-btn--active:hover {
+  background: var(--kombos-gray-800);
+  border-color: var(--kombos-gray-800);
+}
+
+/* Empty state */
+.kombos-blog-home__empty {
+  text-align: center;
+  color: var(--kombos-gray-900);
+  padding: 3rem 0;
+  margin: 0;
+}
+
+/* Blog grid */
+.kombos-blog-home__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+}
+
+/* Pagination spacing */
+.kombos-blog-home .kombos-pagination {
+  padding-top: 1rem;
+}
+
+@media (min-width: 768px) {
+  .kombos-blog-home {
+    padding: 2.5rem 0;
+  }
+
+  .kombos-blog-home__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-blog-home {
+    padding: 3rem 0;
+  }
+
+  .kombos-blog-home .kombos-container {
+    gap: 2.5rem;
+  }
+
+  .kombos-blog-home__grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

package/templates/create-full/src/components/BlogHome/types.ts

@@ -0,0 +1,15 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasBlogList, IkasBlogCategoryList } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  blogList: IkasBlogList;
+  blogCategoryList?: IkasBlogCategoryList;
+  title?: string;
+  allCategoriesText?: string;
+  readMoreText?: string;
+  emptyMessage?: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  description?: string;
+}

package/templates/create-full/src/components/BlogPost/index.tsx

@@ -0,0 +1,128 @@
+import {
+  getIkasBlogFormattedDate,
+  getIkasBlogCategoryHref,
+  getDefaultSrc,
+} from "@ikas/bp-storefront";
+
+import { Props } from "./types";
+import Breadcrumb, { BreadcrumbItem } from "../../sub-components/Breadcrumb";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import { getFullName } from "../../utils/fullName";
+
+export function BlogPost({
+  blogPost,
+  homeText = "Ana Sayfa",
+  blogText = "Blog Yazıları",
+  tagsTitle = "Etiketler",
+  aspectRatio,
+  objectFit,
+}: Props) {
+  if (!blogPost) return null;
+
+  const heroSrc = blogPost.image ? getDefaultSrc(blogPost.image) : "";
+  const date = getIkasBlogFormattedDate(blogPost);
+  const categoryName = blogPost.category?.name;
+  const categoryHref = blogPost.category
+    ? getIkasBlogCategoryHref(blogPost.category)
+    : "";
+  const tags = blogPost.tags ?? [];
+  const hasContent = blogPost.blogContent?.content;
+
+  const writerName = getFullName(blogPost.writer?.firstName, blogPost.writer?.lastName);
+
+  const breadcrumbItems: BreadcrumbItem[] = [
+    { label: homeText, href: "/" },
+    { label: blogText, href: "/blog" },
+  ];
+  if (categoryName && categoryHref) {
+    breadcrumbItems.push({ label: categoryName, href: categoryHref });
+  }
+  breadcrumbItems.push({ label: blogPost.title });
+
+  return (
+    <section className="kombos-bp">
+      <div className="kombos-container">
+        <div className="kombos-bp__article">
+          <Breadcrumb items={breadcrumbItems} size="xs" />
+
+          {heroSrc && (
+            <div className="kombos-bp__hero-wrap">
+              <img
+                src={heroSrc}
+                alt={blogPost.title}
+                className="kombos-bp__hero-img"
+                style={{
+                  aspectRatio: resolveAspectRatio(aspectRatio),
+                  objectFit: resolveObjectFit(objectFit),
+                }}
+              />
+            </div>
+          )}
+
+          <div className="kombos-bp__header">
+            <div className="kombos-bp__meta">
+              {categoryName && categoryHref && (
+                <a
+                  href={categoryHref}
+                  className="kombos-bp__category text-xs-semibold"
+                >
+                  {categoryName}
+                </a>
+              )}
+              {date && (
+                <span className="kombos-bp__date text-xs-regular">{date}</span>
+              )}
+              {writerName && (
+                <span className="kombos-bp__author text-xs-regular">
+                  {writerName}
+                </span>
+              )}
+            </div>
+
+            <h1 className="kombos-bp__title text-xl-semibold md:display-xs-semibold">
+              {blogPost.title}
+            </h1>
+
+            {blogPost.shortDescription && (
+              <p className="kombos-bp__desc text-md-regular">
+                {blogPost.shortDescription}
+              </p>
+            )}
+          </div>
+
+          {hasContent && (
+            <div
+              className="kombos-bp__content kombos-richtext"
+              dangerouslySetInnerHTML={{
+                __html: blogPost.blogContent.content,
+              }}
+            />
+          )}
+
+          {tags.length > 0 && (
+            <>
+              <hr className="kombos-bp__divider" />
+              <div className="kombos-bp__tags">
+                <span className="kombos-bp__tags-label text-sm-semibold">
+                  {tagsTitle}
+                </span>
+                <div className="kombos-bp__tags-list">
+                  {tags.map((tag) => (
+                    <span
+                      key={tag.id}
+                      className="kombos-bp__tag text-xs-medium"
+                    >
+                      {tag.name}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default BlogPost;

package/templates/create-full/src/components/BlogPost/styles.css

@@ -0,0 +1,120 @@
+.kombos-bp {
+  width: 100%;
+}
+
+.kombos-bp__article {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 2rem 0;
+}
+
+/* Hero image */
+.kombos-bp__hero-wrap {
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.kombos-bp__hero-img {
+  width: 100%;
+  height: 100%;
+}
+
+/* Header group (meta + title + description) */
+.kombos-bp__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Meta row */
+.kombos-bp__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.kombos-bp__category {
+  color: var(--kombos-gray-900);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.kombos-bp__category:hover {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bp__date {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bp__author {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-bp__meta > * + *::before {
+  content: "\00B7";
+  margin-right: 0.5rem;
+  color: var(--kombos-gray-300);
+}
+
+/* Title */
+.kombos-bp__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+/* Description */
+.kombos-bp__desc {
+  margin: 0;
+  color: var(--kombos-gray-500);
+}
+
+/* Divider */
+.kombos-bp__divider {
+  border: none;
+  border-top: 1px solid var(--kombos-gray-200);
+  margin: 0;
+}
+
+/* Content */
+.kombos-bp__content {
+  line-height: 1.7;
+}
+
+/* Tags */
+.kombos-bp__tags {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.kombos-bp__tags-label {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-bp__tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.kombos-bp__tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 100px;
+  color: var(--kombos-gray-700);
+}
+
+
+/* Desktop: center article */
+@media (min-width: 1024px) {
+  .kombos-bp__article {
+    max-width: 45rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

package/templates/create-full/src/components/BlogPost/types.ts

@@ -0,0 +1,12 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasBlog } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  blogPost: IkasBlog | null;
+  homeText?: string;
+  blogText?: string;
+  tagsTitle?: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}

package/templates/create-full/src/components/CardProductName/index.tsx

@@ -0,0 +1,25 @@
+import { getProductHref } from "@ikas/bp-storefront";
+import { cx } from "../../utils/cx";
+import { Props } from "./types";
+
+export function CardProductName({ product, singleLineName }: Props) {
+  if (!product) return null;
+
+  const productHref = getProductHref(product);
+
+  return (
+    <span className="kombos-card-product-name">
+      <a
+        href={productHref}
+        className={cx(
+          "kombos-card-product-name__link text-sm-medium md:text-md-medium",
+          singleLineName && "kombos-card-product-name__link--single-line",
+        )}
+      >
+        {product.name}
+      </a>
+    </span>
+  );
+}
+
+export default CardProductName;

package/templates/create-full/src/components/CardProductName/styles.css

@@ -0,0 +1,22 @@
+.kombos-card-product-name {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.kombos-card-product-name__link {
+  display: block;
+  color: var(--kombos-gray-900);
+  text-decoration: none;
+  max-width: 100%;
+}
+
+.kombos-card-product-name__link:hover {
+  text-decoration: underline;
+}
+
+.kombos-card-product-name__link--single-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/templates/create-full/src/components/CardProductName/types.ts

@@ -0,0 +1,7 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  singleLineName?: boolean;
+}