v3.2.0 (#924)

## What's Changed
* Merge pull request #783 from Trendyol/next by @leventozen in
#784
* docs: bump version in docs by @leventozen in
#851
* docs: bump version by @leventozen in
#852
* feat(icon): add door and credit_card icons by @umitkucuk in
#855
* chore(deps-dev): bump ejs from 3.1.9 to 3.1.10 by @dependabot in
#850
* feat(select): improve option navigation by key by @gokcecicek in
#856
* fix(popover): Fix bl-tooltip trigger issue by @MertOzbudak in
#871
* feat(tooltip): add target attribute by @Enes5519 in
#848
* feat(dialog): implement critical variant by @AykutSarac in
#870
* fix(drawer): fix drawer delay bug for removing from dom by
@fatihkucuktry in #875
* fix(split-button): fix event bubbling for buttons inside split button
by @ozkersemih in #879
* fix(select): fix disabled select option can be selected with enter by
@ahmetozantekin in #874
* chore: update dependabot.yml configuration by @doganozturk in
#882
* feat(select): Improve select search international character support by
@fatihkucuktry in #857
* feat(select): fix search text is not clear bug when user click clear
button by @mozbatman in #858
* story(input): add input masking documentation by @doganozturk in
#883
* style(dialog): tab-group inside dialog by @ozkersemih in
#872
* feat(select): fix search text is not clear bug when user click clear
button by @mozbatman in #885
* fix: Use lowercase script import in using-baklava-in-next.stories.mdx
by @BerkinAKKAYA in #884
* feat: calendar component by @dilandoogan in
#823
* feat: spinner component by @MertOzbudak in
#877
* docs(ADR): move ADRs under components directories by @AykutSarac in
#865
* fix(checkbox): add relative value for position in checkbox container
by @erbilnas in #896
* chore(deps): bump actions/configure-pages from 3 to 5 by @dependabot
in #887
* chore(deps): bump actions/deploy-pages from 2 to 4 by @dependabot in
#888
* refactor(icon): implement baklava-icons and remove icons folder by
@ogunb in #898
* feat(input): prevent enter to submit form by @muratcorlu in
#691
* fix(checkbox): fix validation state of checkbox by @Enes5519 in
#904
* feat(dialog): add width and caption line clamp css property by
@Enes5519 in #902
* fix(tooltip): use mouseenter as event listener by @ozkersemih in
#909
* fix(table): multiple checkbox should only handle currently rendered
rows by @ogunb in #913
* feat(datepicker): remove calendar border by @dilandoogan in
#917
* feat(datepicker): fix selected date color bug by @dilandoogan in
#922
* fix: upgrade next version to resolve vulnerability by @erbilnas in
#929
* docs: resolve conflict in storybook by @erbilnas in
#928

## New Contributors
* @gokcecicek made their first contribution in
#856
* @MertOzbudak made their first contribution in
#871
* @fatihkucuktry made their first contribution in
#875
* @ahmetozantekin made their first contribution in
#874
* @mozbatman made their first contribution in
#858
* @dilandoogan made their first contribution in
#823

**Full Changelog**:
v3.1.0...3.2.0

---------

Signed-off-by: dependabot[bot] <[email protected]>
Signed-off-by: Berkin AKKAYA <[email protected]>
Signed-off-by: Aykut Saraç <[email protected]>
Co-authored-by: Levent Anil Ozen <[email protected]>
Co-authored-by: Ümit Küçük <[email protected]>
Co-authored-by: Umit Kucuk <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Beril Gökçe Çiçek <[email protected]>
Co-authored-by: ozkersemih <[email protected]>
Co-authored-by: MertOzbudak <[email protected]>
Co-authored-by: mert.ozbudak <[email protected]>
Co-authored-by: Enes Yıldırım <[email protected]>
Co-authored-by: Aykut Saraç <[email protected]>
Co-authored-by: Fatih Küçük <[email protected]>
Co-authored-by: Semih Ozker <[email protected]>
Co-authored-by: ahmetozantekin <[email protected]>
Co-authored-by: Ahmet Ozan Tekin <[email protected]>
Co-authored-by: Doğan Öztürk <[email protected]>
Co-authored-by: Mustafa Özbatman <[email protected]>
Co-authored-by: mustafa.ozbatman <[email protected]>
Co-authored-by: Doğan Öztürk <[email protected]>
Co-authored-by: Ogun Babacan <[email protected]>
Co-authored-by: Berkin AKKAYA <[email protected]>
Co-authored-by: dilandoogan <[email protected]>
Co-authored-by: Buse Selvi <[email protected]>
Co-authored-by: Erbil Nas <[email protected]>
Co-authored-by: Murat Çorlu <[email protected]>

.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>
+  );
+}