@orangesk/cms-templates 1.0.0-beta.0 → 1.0.0-beta.10

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@orangesk/cms-templates",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.10",
   "private": false,
   "type": "module",
+  "files": [
+    "build"
+  ],
+  "main": "build/index.html",
   "publishConfig": {
     "access": "public"
   },
   "engines": {
     "node": ">=20.x"
   },
-  "main": "index.js",
   "scripts": {
     "start": "eleventy --serve --watch --incremental",
     "build": "eleventy",
@@ -18,22 +21,21 @@
   },
   "dependencies": {
     "@11ty/eleventy": "^3.1.2",
-    "@orangesk/orange-design-system": "2.0.0-beta.13",
+    "@orangesk/orange-design-system": "2.0.0-beta.21",
     "clsx": "^2.1.1",
-    "markdown-to-jsx": "^7.7.16",
+    "markdown-to-jsx": "9.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "sass": "^1.93.2"
+    "sass": "^1.94.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.1",
     "@jamshop/eleventy-plugin-mdx": "^0.0.17",
     "@mdx-js/mdx": "^3.1.1",
-    "@types/react": "^19.2.2",
-    "@typescript-eslint/eslint-plugin": "^8.46.2",
-    "@typescript-eslint/parser": "^8.46.2",
+    "@types/react": "^19.2.7",
+    "@typescript-eslint/eslint-plugin": "^8.48.0",
+    "@typescript-eslint/parser": "^8.48.0",
     "eslint": "latest",
-    "eslint-config-next": "^15.5.6",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-mdx": "^3.6.2",
     "eslint-plugin-unused-imports": "^4.3.0",

package/.prettierrc

@@ -1,9 +0,0 @@
-{
-  "printWidth": 80,
-  "singleQuote": false,
-  "trailingComma": "all",
-  "bracketSpacing": true,
-  "semi": true,
-  "useTabs": false,
-  "tabWidth": 2
-}

package/CHANGELOG.md

@@ -1,36 +0,0 @@
-# 📝 Changelog
-
-All notable changes to this project will be documented in this file.
-
-## 🌟 [Unreleased]
-
-### Added
-
-- Multiple page templates for CMS (Blog Človek, Press Center, Product Pages, Signpost, Device LP, Roaming, Pricelist, Basic Pages)
-
-### Changed
-
-- Updated page status tracking with completion indicators (🟢 Done | 🟠 WIP)
-
-### Removed
-
--
-
-## 🌟 [1.0.0-alpha.0] | 3. 9. 2025
-
-### Added
-
-- Nastavenie repozititára
-- `Megamenu` pre CMS
-- Homepage pre CMS
-
-### Changed
-
--
-
-### Removed
-
--
-
-[unreleased]: https://github.com/orangesk/ecare/compare/1.0.0-alpha.1...1.0.0-alpha.0
-[1.0.0-alpha.0]: https://github.com/orangesk/design-system/releases/tag/1.0.0-alpha.0

package/eleventy.config.js

@@ -1,91 +0,0 @@
-import "tsx/esm";
-import mdxPlugin from "@jamshop/eleventy-plugin-mdx";
-import * as sass from "sass";
-import path from "node:path";
-
-export default async function (eleventyConfig) {
-  eleventyConfig.addPlugin(mdxPlugin, {
-    esbuild: {
-      external: ["@orangesk/orange-design-system", "react", "react-dom"],
-    },
-  });
-
-  eleventyConfig.addExtension("scss", {
-    outputFileExtension: "css",
-
-    // opt-out of Eleventy Layouts
-    useLayouts: false,
-
-    compile: async function (inputContent, inputPath) {
-      let parsed = path.parse(inputPath);
-
-      // Don’t any other .scss files than ./src/shame.scss
-      if (!(parsed.dir === "./src" && parsed.name === "shame")) {
-        return;
-      }
-
-      let result = sass.compileString(inputContent, {
-        loadPaths: [
-          parsed.dir || ".",
-          this.config.dir.includes,
-          "node_modules",
-        ],
-      });
-
-      // Map dependencies for incremental builds
-      this.addDependencies(inputPath, result.loadedUrls);
-
-      return async (_data) => {
-        return result.css;
-      };
-    },
-  });
-
-  eleventyConfig.addWatchTarget("./src/lib/**/*");
-  eleventyConfig.addWatchTarget("./src/components/**/*");
-  eleventyConfig.addWatchTarget("./src/**/*.(jsx|js|ts|tsx)");
-  eleventyConfig.addWatchTarget("./src/**/*.(scss)");
-
-  // Copies all files from src/assets to dist/assets
-  eleventyConfig.addPassthroughCopy({
-    "./src/assets/**.*": "assets",
-  });
-
-  eleventyConfig.addPassthroughCopy({
-    "node_modules/@orangesk/orange-design-system/build/fonts": "fonts",
-    "node_modules/@orangesk/orange-design-system/build/lib": "lib",
-    "node_modules/@orangesk/orange-design-system/build/images": "images",
-    "node_modules/@orangesk/orange-design-system/build/favicon.ico":
-      "/assets/favicon.ico",
-    "node_modules/@orangesk/orange-design-system/build/sprite.svg":
-      "sprite.svg",
-    "node_modules/@orangesk/orange-design-system/build/logo.svg": "logo.svg",
-  });
-
-  eleventyConfig.addGlobalData("layout", "../layouts/base.njk");
-  // eleventyConfig.addGlobalData("permalink", () => {
-  //   return (data) => {
-  //     // https://www.11ty.dev/docs/permalinks/#remove-trailing-slashes
-  //     // TODO: fix setting permalink in MDX frontmatter has no effect. This is an attempt on file based routing.
-  //     // return `${data.page.filePathStem}.${data.page.outputFileExtension}`
-  //     return `${data.page.filePathStem.replace("/pages/", "/")}.${data.page.outputFileExtension}`;
-  //   };
-  // });
-
-  if (typeof global !== "undefined") {
-    global.window = {};
-  }
-}
-
-export const config = {
-  // https://www.11ty.dev/docs/config/#template-formats
-  templateFormats:
-    "html,liquid,ejs,md,hbs,mustache,haml,pug,njk,11ty.js,mdx,scss,sass",
-  dir: {
-    input: "src",
-    output: "build",
-    layouts: "layouts",
-    includes: "includes",
-    data: "data",
-  },
-};

package/eslint.config.mjs

@@ -1,93 +0,0 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import typescriptParser from "@typescript-eslint/parser";
-import unusedImports from "eslint-plugin-unused-imports";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("prettier", "plugin:mdx/recommended"),
-
-  // JavaScript/JSX files
-  {
-    files: ["**/*.{js,jsx}"],
-    plugins: {
-      "unused-imports": unusedImports,
-    },
-    languageOptions: {
-      ecmaVersion: "latest",
-      sourceType: "module",
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-    },
-    rules: {
-      "no-unused-vars": "off",
-      "unused-imports/no-unused-imports": "error",
-      "unused-imports/no-unused-vars": [
-        "warn",
-        {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "after-used",
-          argsIgnorePattern: "^_",
-        },
-      ],
-    },
-  },
-
-  // TypeScript files
-  {
-    files: ["**/*.{ts,tsx}"],
-    plugins: {
-      "@typescript-eslint": typescriptEslint,
-      "unused-imports": unusedImports,
-    },
-    languageOptions: {
-      parser: typescriptParser,
-      parserOptions: {
-        project: "./tsconfig.json",
-        ecmaVersion: "latest",
-        sourceType: "module",
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-    },
-    rules: {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": "off",
-      "unused-imports/no-unused-imports": "error",
-      "unused-imports/no-unused-vars": [
-        "warn",
-        {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "after-used",
-          argsIgnorePattern: "^_",
-        },
-      ],
-      "@typescript-eslint/no-explicit-any": "off",
-    },
-  },
-
-  // MDX files - disable unused imports rules
-  {
-    files: ["**/*.mdx"],
-    rules: {
-      "unused-imports/no-unused-vars": "off",
-      "unused-imports/no-unused-imports": "off",
-    },
-  },
-];
-
-export default eslintConfig;

package/global.d.ts

@@ -1,3 +0,0 @@
-declare module "@orangesk/orange-design-system" {
-  export * from "@orangesk/orange-design-system/build/components/types/index";
-}

package/src/changelog.mdx

@@ -1,11 +0,0 @@
----
----
-
-import Markdown from "./components/Markdown"
-import { Section } from "@orangesk/orange-design-system"
-import CHANGELOG from "../CHANGELOG.md"
-
-
-<Section>
-  <CHANGELOG></CHANGELOG>
-</Section>

package/src/components/ActionTile/ActionTile.tsx

@@ -1,25 +0,0 @@
-import {
-  BlockAction,
-  Tile,
-  BlockActionControl,
-  Link,
-} from "@orangesk/orange-design-system";
-import React from "react";
-
-type ActionTileProps = {
-  children: React.ReactNode;
-};
-
-export const ActionTile = ({ children, ...other }: ActionTileProps) => {
-  return (
-    <BlockAction>
-      <Tile variant="action" className="is-light" {...other}>
-        <BlockActionControl>
-          <Link href="#" className="d-block bold is-dark">
-            {children}
-          </Link>
-        </BlockActionControl>
-      </Tile>
-    </BlockAction>
-  );
-};

package/src/components/ActionTile/ActionTilesSection.tsx

@@ -1,41 +0,0 @@
-import { Grid, GridCol, Section } from "@orangesk/orange-design-system";
-import React from "react";
-import { ActionTile } from "./ActionTile";
-import clsx from "clsx";
-
-type ActionTilesProps = {
-  title?: string;
-  tiles?: string[];
-  className?: string;
-};
-
-export const ActionTiles = ({
-  title = "Môže vás zaujímať",
-  tiles = [
-    "Informácie o právach zákazníkov",
-    "Súhlasy so spracúvaním osobných údajov",
-    "Spracúvanie osobných údajov na webových stránkach (cookies a iné)",
-  ],
-  className,
-  ...other
-}: ActionTilesProps) => {
-  const size =
-    tiles.length >= 4 ? { xs: 12, md: 6, lg: 3 } : { xs: 12, md: 6, lg: 4 };
-
-  return (
-    <Section
-      className={clsx("surface-moderate is-dark", className)}
-      spacing="default"
-      {...other}
-    >
-      <h2 className="thin h2 mb-large">{title}</h2>
-      <Grid rowGapSize="medium" data-same-height>
-        {tiles?.map((tile, index) => (
-          <GridCol key={index} size={size}>
-            <ActionTile data-same-height-child>{tile}</ActionTile>
-          </GridCol>
-        ))}
-      </Grid>
-    </Section>
-  );
-};

package/src/components/ActionTile/index.ts

@@ -1,2 +0,0 @@
-export { ActionTile } from "./ActionTile";
-export { ActionTiles } from "./ActionTilesSection";

package/src/components/ArticleCard/ArticleCard.tsx

@@ -1,130 +0,0 @@
-import React from "react";
-import {
-  Image,
-  Link,
-  Tag,
-  BlockAction,
-  BlockActionControl,
-  BlockActionOverride,
-  Bar,
-  BarItem,
-  Icon,
-  Grid,
-  GridCol,
-} from "@orangesk/orange-design-system";
-import clsx from "clsx";
-
-export type ArticleCardProps = {
-  tagline: string;
-  title: string;
-  tag: string;
-  /** Image source */
-  src?: string;
-  /** Image alt text */
-  alt?: string;
-  className?: string;
-  titleTag?: React.ElementType;
-  withIcon?: boolean;
-  withReadingTime?: boolean;
-  withDate?: boolean;
-  description?: string;
-  isHorizontal?: boolean;
-  horizontalLgDisableDown?: boolean;
-  children?: React.ReactNode;
-};
-
-export const ArticleCard = ({
-  tagline,
-  title,
-  tag,
-  src,
-  alt = "",
-  titleTag: TitleTag = "h3",
-  withIcon = false,
-  withReadingTime = false,
-  withDate = false,
-  description,
-  className,
-  isHorizontal = false,
-  horizontalLgDisableDown = false,
-  children,
-}: ArticleCardProps) => {
-  return (
-    <BlockAction>
-      <Grid
-        vAlign={isHorizontal ? "center" : undefined}
-        className={clsx(className)}
-      >
-        <GridCol
-          size={
-            isHorizontal
-              ? {
-                  xs: horizontalLgDisableDown ? 12 : 3,
-                  lg: 4,
-                }
-              : {
-                  xs: 12,
-                }
-          }
-        >
-          {src && <Image src={src} alt={alt} />}
-        </GridCol>
-        <GridCol size="auto">
-          <p className="mb-xsmall">{tagline}</p>
-
-          <TitleTag>
-            <BlockActionControl>
-              <Link href="#" className="h3">
-                {title}
-              </Link>
-            </BlockActionControl>
-          </TitleTag>
-          {description && <p>{description}</p>}
-          {(tag || withIcon || withReadingTime || withDate) && (
-            <Bar
-              key="small"
-              space="small"
-              className={isHorizontal ? "mb-none" : ""}
-            >
-              {tag && (
-                <BarItem>
-                  <BlockActionOverride>
-                    <Tag
-                      href="#"
-                      color="transparent"
-                      className="align-self-left"
-                    >
-                      {tag}
-                    </Tag>
-                  </BlockActionOverride>
-                </BarItem>
-              )}
-              {withIcon && (
-                <BarItem className="d-flex">
-                  <Icon
-                    name="article"
-                    size="medium"
-                    className="icon--with-text-end"
-                  />
-                  <span>Článok</span>
-                </BarItem>
-              )}
-              {withReadingTime && (
-                <BarItem className="d-flex show-sm">
-                  <Icon
-                    name="clock"
-                    size="medium"
-                    className="icon--with-text-end"
-                  />
-                  <span>15 minút</span>
-                </BarItem>
-              )}
-              {withDate && <BarItem>18.8.2025</BarItem>}
-            </Bar>
-          )}
-          {children}
-        </GridCol>
-      </Grid>
-    </BlockAction>
-  );
-};

package/src/components/ArticleCard/index.ts

@@ -1 +0,0 @@
-export * from "./ArticleCard";

package/src/components/ArticleMeta/ArticleMeta.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { Bar, BarItem, Tag, Icon } from "@orangesk/orange-design-system";
-
-type ArticleMetaProps = {
-  readingTime?: string;
-  date?: string;
-  tagName?: string;
-  type?: string;
-  className?: string;
-};
-
-export const ArticleMeta = ({
-  readingTime = "15 minút",
-  date = "18. 8. 2025",
-  tagName = "Iné",
-  type = "Článok",
-  className,
-}: ArticleMetaProps) => {
-  return (
-    <Bar key="small" space="small" className={className}>
-      <BarItem>
-        <Tag color="transparent" href="#">
-          {tagName}
-        </Tag>
-      </BarItem>
-      <BarItem className="d-flex">
-        <Icon name="article" size="medium" className="icon--with-text-end" />
-        <span>{type}</span>
-      </BarItem>
-      <BarItem className="d-flex hidden show-sm">
-        <Icon name="clock" size="medium" className="icon--with-text-end" />
-        <span>{readingTime}</span>
-      </BarItem>
-      <BarItem>{date}</BarItem>
-    </Bar>
-  );
-};

package/src/components/ArticleMeta/index.ts

@@ -1 +0,0 @@
-export { ArticleMeta } from "./ArticleMeta";

package/src/components/ArticleShare/ArticleShare.tsx

@@ -1,87 +0,0 @@
-import React from "react";
-
-import { Bar, BarItem } from "@orangesk/orange-design-system";
-
-export const ArticleShare = () => (
-  <Bar>
-    <BarItem isFilling className="color-gray">
-      Zdielať cez
-    </BarItem>
-    <BarItem>
-      <ul className="list-inline">
-        <li>
-          <a href="#" aria-label="Zdieľať cez Facebook">
-            <svg
-              width="11"
-              height="20"
-              viewBox="0 0 11 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0.582434 10.3969H2.72226V19.2062C2.72226 19.3801 2.86319 19.5211 3.03711 19.5211H6.66526C6.83919 19.5211 6.98012 19.3801 6.98012 19.2062V10.4384H9.44003C9.59997 10.4384 9.73454 10.3184 9.75281 10.1595L10.1264 6.91638C10.1367 6.82715 10.1084 6.73779 10.0487 6.67086C9.98895 6.60385 9.90343 6.5655 9.8137 6.5655H6.98025V4.53254C6.98025 3.91971 7.31022 3.60894 7.96109 3.60894C8.05384 3.60894 9.8137 3.60894 9.8137 3.60894C9.98763 3.60894 10.1286 3.46795 10.1286 3.29409V0.317186C10.1286 0.14326 9.98763 0.00232993 9.8137 0.00232993H7.26053C7.24252 0.00144834 7.20253 0 7.14359 0C6.70059 0 5.16076 0.0869632 3.9444 1.20596C2.59669 2.44599 2.78403 3.93073 2.82881 4.18815V6.56544H0.582434C0.408508 6.56544 0.267578 6.70637 0.267578 6.8803V10.082C0.267578 10.2559 0.408508 10.3969 0.582434 10.3969Z"
-                fill="currentColor"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a href="#" aria-label="Zdieľať cez Linkedin">
-            <svg
-              width="19"
-              height="19"
-              viewBox="0 0 19 19"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.38622 6.5H0.714888C0.551949 6.5 0.419922 6.63209 0.419922 6.79497V18.5894C0.419922 18.7523 0.551949 18.8843 0.714888 18.8843H4.38622C4.54916 18.8843 4.68119 18.7523 4.68119 18.5894V6.79497C4.68119 6.63209 4.54916 6.5 4.38622 6.5Z"
-                fill="currentColor"
-              />
-              <path
-                d="M2.55153 0.636963C1.21568 0.636963 0.128906 1.72256 0.128906 3.05693C0.128906 4.39189 1.21568 5.4779 2.55153 5.4779C3.88631 5.4779 4.9722 4.39183 4.9722 3.05693C4.97226 1.72256 3.88631 0.636963 2.55153 0.636963Z"
-                fill="currentColor"
-              />
-              <path
-                d="M13.7241 6.20605C12.2496 6.20605 11.1596 6.83994 10.4985 7.56019V6.79416C10.4985 6.63128 10.3664 6.49919 10.2035 6.49919H6.68754C6.52461 6.49919 6.39258 6.63128 6.39258 6.79416V18.5886C6.39258 18.7515 6.52461 18.8835 6.68754 18.8835H10.3509C10.5138 18.8835 10.6458 18.7515 10.6458 18.5886V12.7531C10.6458 10.7866 11.1799 10.0206 12.5507 10.0206C14.0436 10.0206 14.1622 11.2487 14.1622 12.8542V18.5886C14.1622 18.7516 14.2943 18.8836 14.4572 18.8836H18.1219C18.2848 18.8836 18.4168 18.7516 18.4168 18.5886V12.1192C18.4168 9.19519 17.8593 6.20605 13.7241 6.20605Z"
-                fill="currentColor"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a href="#" aria-label="Zdieľať cez X (Twitter)">
-            <svg
-              width="19"
-              height="17"
-              viewBox="0 0 19 17"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M14.7381 0.541504H17.5266L11.4346 7.50457L18.6015 16.9795H12.9897L8.59456 11.2328L3.56541 16.9795H0.775073L7.29113 9.53183L0.416016 0.541504H6.16999L10.143 5.79399L14.7381 0.541504ZM13.7594 15.3103H15.3046L5.33047 2.12304H3.67247L13.7594 15.3103Z"
-                fill="currentColor"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a href="#" aria-label="Zdieľať cez email">
-            <svg
-              width="22"
-              height="17"
-              viewBox="0 0 22 17"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M19.9328 16.8734H2.66877C1.52793 16.8725 0.603362 15.9479 0.601562 14.8071V2.71376C0.603365 1.57293 1.52793 0.648361 2.66877 0.647461H19.9328C21.0736 0.648362 21.9982 1.57293 22 2.71376V14.8071C21.9982 15.9479 21.0736 16.8725 19.9328 16.8734ZM2.04336 3.23651V14.8071C2.04426 15.1522 2.32361 15.4316 2.66874 15.4316H19.9328C20.2779 15.4316 20.5573 15.1522 20.5582 14.8071V3.23559C18.1973 5.81011 14.3403 10.0221 12.5001 12.0452H12.4992C12.1847 12.3678 11.7522 12.5499 11.3016 12.5499C10.8501 12.5508 10.4176 12.3687 10.1022 12.0461L2.04336 3.23651ZM2.94811 2.08935L11.1674 11.0736C11.1963 11.1187 11.2467 11.1457 11.3008 11.1457C11.3549 11.1457 11.4053 11.1187 11.4342 11.0727C13.3166 9.00553 17.3087 4.6459 19.6525 2.08937L2.94811 2.08935Z"
-                fill="currentColor"
-              />
-            </svg>
-          </a>
-        </li>
-      </ul>
-    </BarItem>
-  </Bar>
-);

package/src/components/ArticleShare/index.ts

@@ -1 +0,0 @@
-export { ArticleShare } from "./ArticleShare";

package/src/components/AvatarCard/AvatarCard.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { Bar, BarItem, Image } from "@orangesk/orange-design-system";
-
-type AvatarCardProps = {
-  src: string;
-  alt?: string;
-  name: string;
-  role: string;
-  className?: string;
-};
-
-export const AvatarCard = ({
-  src,
-  alt = "avatar",
-  name,
-  role,
-  className,
-}: AvatarCardProps) => {
-  return (
-    <Bar key="small" className={className}>
-      <BarItem>
-        <Image src={src} alt={alt} />
-      </BarItem>
-      <BarItem>
-        <p className="bold mb-none">{name}</p>
-        <p>{role}</p>
-      </BarItem>
-    </Bar>
-  );
-};

package/src/components/AvatarCard/index.ts

@@ -1 +0,0 @@
-export { AvatarCard } from "./AvatarCard";