v2.3.0

.eslintrc.cjs

@@ -2,28 +2,61 @@ module.exports = {
   root: true,
   parserOptions: {
     ecmaVersion: 2020,
-    sourceType: 'module'
+    sourceType: "module",
   },
-  extends: ['eslint:recommended', 'prettier', 'plugin:storybook/recommended'],
+  extends: [
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+    "eslint:recommended",
+    "plugin:storybook/recommended",
+    "plugin:lit/recommended",
+    "plugin:wc/recommended",
+  ],
+  plugins: ["prettier", "unused-imports", "@typescript-eslint"],
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   globals: {
-    process: 'readonly'
+    process: "readonly",
   },
   rules: {
-    strict: ['error', 'never']
+    "prettier/prettier": "error",
+    "strict": ["error", "never"],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "double", { avoidEscape: true }],
+    "semi": ["error", "always"],
+    "no-empty": "off",
+    "unused-imports/no-unused-imports": "error",
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: ["const", "let", "var"], next: "*" },
+      { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"] },
+    ],
+    "space-in-parens": "error",
+    "no-multiple-empty-lines": "error",
+    "no-irregular-whitespace": "error",
+    "space-before-function-paren": [
+      "error",
+      {
+        anonymous: "always",
+        named: "never",
+        asyncArrow: "always",
+      },
+    ],
   },
-  overrides: [{
-    files: ['*.ts'],
-    parser: '@typescript-eslint/parser',
-    extends: ['plugin:@typescript-eslint/recommended'],
-    plugins: ['@typescript-eslint']
-  }, {
-    files: ['web-test-runner.config.js'],
-    env: {
-      node: true
-    }
-  }]
+  overrides: [
+    {
+      files: ["*.ts"],
+      parser: "@typescript-eslint/parser",
+      extends: ["plugin:@typescript-eslint/recommended"],
+      plugins: ["@typescript-eslint"],
+    },
+    {
+      files: ["web-test-runner.config.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -29,7 +29,7 @@ body:
     attributes:
       label: Baklava Version
       description: What version of Baklava are you using?
-      placeholder: 2.1.0-beta.7
+      placeholder: 2.3.0-beta.7
     validations:
       required: false
   - type: textarea

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+node-options='--no-experimental-fetch'

.prettierignore

@@ -21,3 +21,4 @@ docs/
 .octane-ci/
 .bin/
 .docksal/
+*.test.ts

.prettierrc.json

@@ -1,11 +1,18 @@
 {
   "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "quoteProps": "consistent",
+  "quoteProps": "preserve",
   "printWidth": 100,
   "semi": true,
-  "singleQuote": true,
+  "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "useTabs": false
+  "useTabs": false,
+  "importOrder": [
+    "^lit",
+    "<THIRD_PARTY_MODULES>",
+    "^[./]",
+    "(.css)$"
+  ],
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

.stylelintrc.json

@@ -1,9 +1,14 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "extends": ["stylelint-config-standard"],
   "rules": {
     "custom-property-no-missing-var-function": true,
-    "length-zero-no-unit": [true, {
-      "ignore": ["custom-properties"]
-    }]
+    "media-feature-range-notation": "prefix",
+    "no-descending-specificity": null,
+    "length-zero-no-unit": [
+      true,
+      {
+        "ignore": ["custom-properties"]
+      }
+    ]
   }
 }

CONTRIBUTING.md

@@ -1,42 +1,42 @@
 # How to contribute Baklava Design System
 
-You are very welcome if you want to contribute Baklava Design System. There can be several types of contributions you can make:
+You are very welcome if you want to contribute to the Baklava Design System. You can make several types of contributions, such as:
 
 * Fixing bugs in code
 * Implementing new features
 * Improving documentation
 * Suggesting design ideas
 
-## Making a contribution with an Issue
+## Making a contribution using an Issue
 
-Did you notice a bug? Or a missing/wrong part in documentation? Or do you have a suggestion about implementation or design? Please feel free to [create an issue](https://github.com/Trendyol/baklava/issues/new) for that. Please give clear and detailed information about your request or report as much as possible. Anyone can join for giving their ideas/experience about issue you created.
+Did you notice a bug? Or a missing/wrong part in documentation? Or do you have a suggestion about implementation or design? Please feel free to [create an issue](https://github.com/Trendyol/baklava/issues/new) for that. Please provide clear and detailed information about your request or report as much as possible. Anyone can join to share their ideas/experiences about the issue you created.
 
-If you just a question about how to use our design system or a specific component, please use our [discussion board](https://github.com/Trendyol/baklava/discussions).
+If you have a question about how to use our design system or a specific component, please use our [discussion board](https://github.com/Trendyol/baklava/discussions).
 
-## Making a contribution with a PR
+## Making a contribution using a PR
 
-If you noticed a problem in our repository (can be inside the code or docs) and able to fix it, just fork project, make your changes and create a PR with it. You can check [GitHub documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches) if you are not sure how to propose a change to a repository.
+If you notice a problem in our repository (whether it's in the code or docs) and are able to fix it, just fork the project, make your changes, and create a PR for it. You can refer to [GitHub documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches) if you are not sure how to propose a change to a repository.
 
 ## Baklava contribution rules
 
 We have some rules to make contribution process smooth and as automated as possible.
 
-### Code writing conventions
+### Coding conventions
 
-We implemented several linters and static code checkers to be sure if every new code is synced with the style of current codebase. Please run `npm run lint` command to see if your changes have any conflict with our rules.
+We implemented several linters and static code checkers to be sure if every new code is synced with the style of current codebase. Please run the `npm run lint` to check if your changes conflict with our rules.
 
-### %100 Code coverage with unit tests
+### 100% Code coverage with unit tests
 
-We expect to cover every line of code we wrote in our unit tests. If you change something in code please be sure that you are covering those changes inside related test file. To do that you can run `npm test` command and check `coverage` folder for detailed report. This command is automatically executed in every commits and if coverage is under %100 your PR checks will fail.
+We expect to cover every line of code we wrote in our unit tests. If you make changes in the code, please ensure that you cover those changes inside the related test file. To do that, you can run the `npm test` command and check the `coverage` folder for a detailed report. This command is automatically executed in every commit, and if coverage is under 100%, your PR checks will fail.
 
 ### Commit rules
 
-Baklava library has an automated release flow and our release version and release notes are automatically generated from git commit messages. So commit messages are very important to release changes properly. We have a specific guideline about committing rules, please refer it.
+The Baklava library has an automated release flow, and our release versions and release notes are automatically generated from git commit messages. So commit messages are very important to release changes properly. We have a specific guideline about committing rules, please refer it.
 
 ### Design review
 
-In every push to a PR, we are running automated visual regression tests to be sure we are not breaking any components visual output accidentally. When you are done with your changes and created a PR, if you have some changes that effects visual output of any components, then our automated flow will notice this and block PR for a design review. Design reviews are done by designers involved in project. If the changes are intentional, they will be approved and once PR merged, new designs will be new references for upcoming PRs. If there is no visual changes this step will pass automatically and there will be no need a review from a designer.
+In every push to a PR, we are running automated visual regression tests to be sure we are not breaking any components visual output accidentally. When you are done with your changes and created a PR, if you have some changes that effects visual output of any components, then our automated flow will notice this and block PR for a design review. Design reviews are done by designers involved in project. If the changes are intentional, they will be approved, and once the PR is merged, the new designs will serve as references for upcoming PRs. If there are no visual changes, this step will pass automatically, and there will be no need for a review from a designer.
 
 ### Enough approvals to merge
 
-Every PR should be reviewed and approved at least one of the core contributors. Please add needed information to PR description to help making review process quicker and easier.
+Every PR should be reviewed and approved by at least one of the core contributors. Please add needed information to PR description to help making review process quicker and easier.

README.md

@@ -29,8 +29,8 @@ Web implementation of the design system is created as native web components so i
 Preferred way of using Baklava is using it via CDN. Just import library JS and CSS files to your main document like below:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/themes/default.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/baklava.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/themes/default.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
 ```
 
 This way library will be served from a very high performant CDN and all of the Baklava web components will be ready to use inside your web project.

custom-elements-manifest.config.mjs

@@ -1,68 +1,125 @@
+import { parse } from "comment-parser";
+
 export default {
-  globs: ['src/components/**/!(*.test|*.stories).ts'],
-  exclude: ['src/**/*.css', 'src/components/icon/icon-list.ts'],
-  outdir: 'dist/',
+  globs: ["src/components/**/!(*.test|*.stories).ts"],
+  exclude: ["src/**/*.css", "src/components/icon/icon-list.ts"],
+  outdir: "dist/",
   dev: false,
   watch: false,
   dependencies: false,
   packagejson: true,
   litelement: true,
   plugins: [
     {
-      name: 'filter',
+      name: "filter",
       analyzePhase({ ts, node, moduleDoc }) {
-
-        const getKind = (kind) => {
-          switch(kind) {
+        const getKind = kind => {
+          switch (kind) {
             case ts.SyntaxKind.StringKeyword: {
-              return 'string';
+              return "string";
             }
           }
 
-          return 'any';
-        }
+          return "any";
+        };
 
         switch (node.kind) {
           case ts.SyntaxKind.ClassDeclaration: {
             const className = node.name.getText();
-            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+            const classDoc = moduleDoc?.declarations?.find(
+              declaration => declaration.name === className
+            );
 
             if (node.typeParameters?.length > 0) {
-              classDoc.typeParameters = node.typeParameters.map((p) => ({
+              classDoc.typeParameters = node.typeParameters.map(p => ({
                 name: p.name.escapedText,
                 extends: p.constraint?.typeName.escapedText,
-                default: getKind(p.default.kind)
+                default: getKind(p.default.kind),
               }));
             }
 
             if (classDoc?.members) {
-              const eventMembers = classDoc.members.filter(member => member.type?.text?.startsWith('EventDispatcher'));
+              const eventMembers = classDoc.members.filter(member =>
+                member.type?.text?.startsWith("EventDispatcher")
+              );
 
-              classDoc.events?.push(...eventMembers.map(({description, name, type}) => {
-                const eventMemberNode = node.members.find((member) => member.name.getText() === name);
-                const eventDecorator = eventMemberNode.decorators.find((decorator) => decorator.expression.expression.getText() === 'event');
+              classDoc.events?.push(
+                ...eventMembers.map(({ description, name, type }) => {
+                  const eventMemberNode = node.members.find(
+                    member => member.name.getText() === name
+                  );
+                  const eventDecorator = eventMemberNode.decorators.find(
+                    decorator => decorator.expression.expression.getText() === "event"
+                  );
 
-                name = eventDecorator.expression.arguments[0]?.text || name;
+                  name = eventDecorator.expression.arguments[0]?.text || name;
 
-                return {
-                  type: {
-                    text: `CustomEvent<${type.text.match(/EventDispatcher<(.*?)>$/s)[1]}>`
-                  },
-                  description,
-                  name
-                }
-              }));
+                  return {
+                    type: {
+                      text: `CustomEvent<${type.text.match(/EventDispatcher<(.*?)>$/s)[1]}>`,
+                    },
+                    description,
+                    name,
+                  };
+                })
+              );
 
               // Remove events from properties
-              classDoc.members = classDoc.members.filter(member => member.type?.text?.startsWith('EventDispatcher'));
+              classDoc.members = classDoc.members.filter(member =>
+                member.type?.text?.startsWith("EventDispatcher")
+              );
 
               // Remove private properties
-              classDoc.members = classDoc.members.filter(member => member.privacy !== 'private');
+              classDoc.members = classDoc.members.filter(member => member.privacy !== "private");
             }
             break;
           }
         }
       },
-    }
+    },
+    {
+      name: "custom-tags",
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(
+              declaration => declaration.name === className
+            );
+            const customTags = ["tag", "summary", "cssproperty"];
+            let customComments = "/**";
+
+            node.jsDoc?.forEach(jsDoc => {
+              jsDoc?.tags?.forEach(tag => {
+                const tagName = tag.tagName.getText();
+
+                if (customTags.includes(tagName)) {
+                  customComments += `\n * @${tagName} ${tag.comment}`;
+                }
+              });
+            });
+
+            // This is what allows us to map JSDOC comments to ReactWrappers.
+            classDoc["jsDoc"] = node.jsDoc?.map(jsDoc => jsDoc.getFullText()).join("\n");
+
+            const parsed = parse(`${customComments}\n */`);
+
+            if (!parsed.length) return;
+
+            parsed[0].tags?.forEach(t => {
+              if (!Array.isArray(classDoc[t.tag])) {
+                classDoc[t.tag] = [];
+              }
+
+              classDoc[t.tag].push({
+                name: t.name,
+                description: t.description,
+                type: t.type || undefined,
+              });
+            });
+          }
+        }
+      },
+    },
   ],
 };

docs/customizing-baklava-theme.stories.mdx

@@ -19,7 +19,7 @@ instead of `themes/default.css` file. Like:
 
 ```html
 <link rel="stylesheet" href="/styles/my-baklava-theme.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/baklava.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
 ```
 
 With this opportunity you can use all of the Baklava components with your own branding colors, own selection of Font or different sizing values.
@@ -29,9 +29,9 @@ With this opportunity you can use all of the Baklava components with your own br
 If you want to change a small set of the design tokens, you may consider to extend default theme.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/themes/default.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/themes/default.css" />
 <link rel="stylesheet" href="/styles/my-baklava-theme.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/baklava.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
 ```
 
 With this, you can -for example- only override color palette for your app and continue to use typography or spacing rules from the default theme.

docs/design-system/adding-a-new-icon.stories.mdx

@@ -40,7 +40,7 @@ import prFormImage from '../images/pr-form.png';
 
 <img src={filesStagedImage} />
 
-12. Write your commit message in the Message input. We are using some [commit rules](/docs/documentation-commit-rules--page) so you need to follow same rules. Most of the cases for adding new icon you'll use `feat(icon): name icon added` format. Write your message and click tick button above (or Ctrl + Enter) for sending your changes to GitHub.
+12. Write your commit message in the Message input. We are using some [commit rules](/docs/documentation-contributing-baklava-commit-rules--documentation) so you need to follow same rules. Most of the cases for adding new icon you'll use `feat(icon): name icon added` format. Write your message and click tick button above (or Ctrl + Enter) for sending your changes to GitHub.
 
 <img src={commitPushImage} />
 

docs/linting.stories.mdx

@@ -10,7 +10,7 @@ Linters that we use are [`eslint`](https://eslint.org), [`stylelint`](https://st
 [`commitlint`](https://commitlint.js.org). When make a git commit, some staged files processed with linters (via
 [`husky`](https://typicode.github.io/husky/)) to check some syntax issues. `eslint` run for `ts` and `js` files and
 `stylelint` run for `css` files. Also we check commit message with `commitlint`. [More information about our commit
-rules](/docs/documentation-commit-rules--page). If there are any issues commit will be
+rules](/docs/documentation-contributing-baklava-commit-rules--documentation). If there are any issues commit will be
 interrupted with the message.
 
 Same rules also apply in pipeline flow for every push. In the pipelines, we run `npm run lint` which is doing same