@ikas/component-cli 0.133.0 → 1.2.0

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

@@ -1,121 +0,0 @@
-/* ===== 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

@@ -1,124 +0,0 @@
-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 = "View All",
-  readMoreText = "Read More",
-  emptyMessage = "No blog posts found yet.",
-  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

@@ -1,118 +0,0 @@
-/* ===== 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

@@ -1,15 +0,0 @@
-// 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

@@ -1,128 +0,0 @@
-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 = "Home",
-  blogText = "Blog Posts",
-  tagsTitle = "Tags",
-  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

@@ -1,120 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-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

@@ -1,22 +0,0 @@
-.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

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