v3.2.0

.eslintignore

@@ -12,3 +12,4 @@ storybook-static/
 .bin/
 .docksal/
 src/generated/
+examples/

.github/dependabot.yml

@@ -4,7 +4,68 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+    open-pull-requests-limit: 5
+    reviewers:
+      - "Trendyol/baklava"
+    allow:
+      - dependency-type: "direct"
+    rebase-strategy: "auto"
+    groups:
+      lit:
+        patterns:
+          - "lit"
+          - "@lit/*"
+      pre-commit:
+        patterns:
+          - "@commitlint/*"
+          - "lint-staged"
+          - "husky"
+      build:
+        patterns:
+          - "esbuild"
+          - "esbuild-plugin-lit-css"
+          - "minimist"
+          - "clean-css"
+          - "del"
+          - "del-cli"
+          - "globby"
+          - "pascal-case"
+          - "npm-run-all"
+          - "@custom-elements-manifest/analyzer"
+      test:
+        patterns:
+          - "@open-wc/*"
+          - "@web/*"
+          - "sinon"
+          - "rollup-plugin-lit-css"
+          - "@rollup/plugin-replace"
+      lint-and-format:
+        patterns:
+          - "eslint*"
+          - "@typescript-eslint/*"
+          - "prettier"
+          - "@trivago/prettier-plugin-sort-imports"
+          - "@types/*"
+          - "stylelint*"
+      typescript:
+        patterns:
+          - "typescript"
+          - "ts-lit-plugin"
+      storybook:
+        patterns:
+          - "storybook"
+          - "@storybook/*"
+          - "chromatic"
+      react:
+        patterns:
+          - "react"
+          - "react-dom"
+          - "@lit-labs/react"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "weekly"
+    open-pull-requests-limit: 5
+    reviewers:
+      - "Trendyol/baklava"
+    rebase-strategy: "auto"

.github/workflows/publish-storybook.yml

@@ -34,11 +34,11 @@ jobs:
       - name: Build Storybook
         run: npm run build-storybook
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: './storybook-static/.'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.prettierignore

@@ -23,3 +23,4 @@ docs/
 .bin/
 .docksal/
 *.test.ts
+examples/

README.md

@@ -51,3 +51,4 @@ suggestions, code improvements, adding new features or fixing problems. For more
 * [Project Board](https://github.com/orgs/Trendyol/projects/4)
 * [Discussion Board](https://github.com/Trendyol/baklava/discussions)
 * [Mobile (React-Native) Implementation](https://github.com/Trendyol/baklava-react-native)
+* [Icons Library](https://github.com/Trendyol/baklava-icons)

commitlint.config.cjs

@@ -33,6 +33,7 @@ module.exports = {
         "textarea",
         "popover",
         "notification",
+        "calendar",
         "table",
         "split-button",
       ],

custom-elements-manifest.config.mjs

@@ -2,7 +2,7 @@ import { parse } from "comment-parser";
 
 export default {
   globs: ["src/components/**/!(*.test|*.stories).ts"],
-  exclude: ["src/**/*.css", "src/components/icon/icon-list.ts"],
+  exclude: ["src/**/*.css", "src/**/*.constant.ts","src/**/*/*.types.ts","src/components/icon/icon-list.ts"],
   outdir: "dist/",
   dev: false,
   watch: false,

docs/design-system/iconography.stories.mdx

@@ -1,27 +1,9 @@
-import { Meta, IconGallery, IconItem } from '@storybook/blocks';
-import icons from '../../src/components/icon/icon-list';
-import { BlIcon } from '../../src/baklava-react';
+import { Meta } from '@storybook/blocks';
 
-<Meta title="Design System/Icons/Iconography" />
+<Meta title="Design System/Icons" />
 
-# Iconography
+# Baklava Icons
 
-* All icons are provided as SVGs
-* All icons are single color (Some have multiple layers with different opacity of same color)
-* All icons has square canvas (By default 24x24)
-* Icon names as in `snake_case`
-* Icons are for decorative purposes. Don't use them as a data in your documents (like an instructive image)
+Baklava Design System uses `@trendyol/baklava-icons` package for custom made icons.
 
-You can check [icon component](/docs/components-icon--single-icon) for usage information and interactive demos.
-
-## List of icons
-
-<IconGallery>
-  {
-    icons.map((iconName) => (
-      <IconItem key={iconName} name={iconName}>
-        <BlIcon name={iconName} />
-      </IconItem>
-    ))
-  }
-</IconGallery>
+For detailed documentation and to explore the available icons, please visit our [icon documentation](https://trendyol.github.io/baklava-icons/?path=/docs/documentation-baklava-icons--icons).

docs/using-baklava-in-next.stories.mdx

@@ -22,7 +22,7 @@ Include Baklava library from CDN to your project's `<head>` section (in `layout.
   href="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/themes/default.css"
 />
 
-<Script
+<script
   type="module"
   src="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/baklava.js"
 />
@@ -52,7 +52,7 @@ In the page, import the component using `dynamic` with ssr off.
 const Button = dynamic(() => import("@/components/Button"), { ssr: false });
 ```
 
-[Here is the demo repository](https://gitlab.trendyol.com/local-commerce/pricing-promotions/frontend/playground/next-baklava-ssr-poc)
+[Here is the demo repository](https://github.com/trendyol/baklava/tree/next/examples/next-app-router-ssr). You can also preview it live with [StackBlitz](https://stackblitz.com/github/trendyol/baklava/tree/next/examples/next-app-router-ssr).
 
 ## Using with SSR
 

examples/input-mask-react/.eslintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'eslint-config-prettier',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

examples/input-mask-react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/input-mask-react/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2
+}

examples/input-mask-react/README.md

@@ -0,0 +1,25 @@
+# Input Mask Example with React
+
+This example demonstrates the integration of the Baklava Design System with various input masking libraries including Maskito and IMask. The primary goal is to showcase versatile compatibility and how these tools can be utilized together within a React application.
+
+## Preview
+
+You can preview live with [StackBlitz](https://stackblitz.com/github/trendyol/baklava/tree/next/examples/input-mask-react).
+
+## How to use
+
+To begin working with this showcase project, follow the steps below to clone the repository and set up the environment:
+
+```bash
+# Clone the repository
+git clone https://github.com/trendyol/baklava.git
+
+# Navigate to the project directory
+cd baklava/examples/input-mask-react
+
+# Install the dependencies
+npm install
+
+# Launch the development server
+npm run dev
+```

examples/input-mask-react/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Baklava Design System (React) with Multiple Input Masking Libraries</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

examples/input-mask-react/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "baklava-input-mask-react-examples",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write ./src",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@maskito/core": "^2.2.0",
+    "@maskito/kit": "^2.2.0",
+    "@maskito/react": "^2.2.0",
+    "@trendyol/baklava": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-imask": "^7.6.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "3.2.5",
+    "vite": "^5.1.6"
+  }
+}

examples/input-mask-react/src/examples/Root.jsx

@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+
+export default function Root() {
+  return (
+    <main>
+      <h1>Input Masking Libraries & Baklava Integration Examples</h1>
+
+      <nav>
+        <ul>
+          <li>
+            <Link to="maskito">Maskito</Link>
+          </li>
+          <li>
+            <Link to="imask">IMask</Link>
+          </li>
+        </ul>
+      </nav>
+    </main>
+  );
+}