Merge branch 'next' into 88-select-component

.editorconfig

@@ -1,4 +1,4 @@
-[*.{js,jsx,ts,tsx,vue,mdx}]
+[*.*]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

.eslintrc.js

@@ -1,17 +1,12 @@
 module.exports = {
   root: true,
-  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module',
   },
   extends: [
-    'prettier',
     'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
   ],
-  plugins: ['@typescript-eslint'],
   env: {
     browser: true,
   },
@@ -23,21 +18,30 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['rollup.config.js', 'web-test-runner.config.js'],
-      env: {
-        node: true,
-      },
-    },
-    {
-      files: [
-        '*.test.ts',
-        '**/custom_typings/*.ts',
-        'packages/lit-ssr/src/test/integration/tests/**',
-        'packages/lit-ssr/src/lib/util/parse5-utils.ts',
+      files: ['*.ts'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'plugin:@typescript-eslint/recommended'
       ],
       rules: {
-        '@typescript-eslint/no-explicit-any': 'off',
+        "@typescript-eslint/indent": [
+          "error",
+          2,
+          {
+            "ignoredNodes": [
+              "PropertyDefinition[decorators]",
+              "TSUnionType"
+            ]
+          }
+        ],
       },
+      plugins: ['@typescript-eslint'],
     },
+    {
+      files: ['web-test-runner.config.js'],
+      env: {
+        node: true,
+      },
+    }
   ],
 };

.github/workflows/release.yml

@@ -20,6 +20,10 @@ jobs:
           node-version: 16
       - name: Install dependencies
         run: npm ci
+      - name: Create env file with release config 
+        run: |
+          touch .env
+          echo RELEASE=true >> .env
       - name: Run build
         run: npm run build
       - name: Create build artifact

.gitignore

@@ -19,7 +19,8 @@ log.txt
 
 .history/
 .idea/
-.vscode/
+.vscode/*
+!.vscode/extensions.json
 .sass-cache/
 .versions/
 node_modules/
@@ -31,3 +32,4 @@ UserInterfaceState.xcuserstate
 src/component-list.json
 coverage/
 build-storybook.log
+baklava-react.ts

.lintstagedrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  '*.ts': () => 'tsc -p tsconfig.json --noEmit',
+  '*.{ts,js}': () => 'eslint .',
+  '*.css': () => 'stylelint src/**/*.css'
+};

.prettierignore

@@ -6,6 +6,7 @@ storybook-static/
 custom-elements.json
 component-list.json
 src/components.d.ts
+src/baklava-react.ts
 *.md
 .history/
 package-lock.json

.storybook/main.js

@@ -22,6 +22,7 @@ module.exports = {
     },
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
+    '@storybook/addon-interactions',
   ],
   features: {
     postcss: false,

.storybook/preview-body.html

@@ -0,0 +1,9 @@
+<style>
+  .sb-main-centered #root-inner {
+    width: 1000px;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

.storybook/preview-head.html

@@ -1,7 +1,8 @@
+<link rel="preload" href="./assets/rubik-latin-variable-wghtOnly-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
 <link rel="stylesheet" href="./themes/default.css" />
 <script type="module" src="./baklava.js"></script>
 <style>
-    .innerZoomElementWrapper > * {
-        vertical-align: top;
-    }
-</style>
+.innerZoomElementWrapper > * {
+  vertical-align: top;
+}
+</style>

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "custom-property-no-missing-var-function": true
+  }
 }

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+	"recommendations": [
+		"EditorConfig.EditorConfig",
+		"dbaeumer.vscode-eslint",
+		"runem.lit-plugin",
+		"silvenon.mdx",
+		"streetsidesoftware.code-spell-checker",
+		"esbenp.prettier-vscode",
+		"stylelint.vscode-stylelint",
+	],
+	"unwantedRecommendations": []
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Trendyol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,6 @@
 # Baklava Design System
 
-![npm package](https://img.shields.io/npm/v/@trendyol/baklava/beta.svg) ![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/npm/hm/@trendyol/baklava) [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
+[![npm package](https://img.shields.io/npm/v/@trendyol/baklava/beta.svg)](https://www.npmjs.com/package/@trendyol/baklava) [![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/npm/hm/@trendyol/baklava)](https://www.jsdelivr.com/package/npm/@trendyol/baklava) [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
 
 > This is a work-in-progress version. If you want to work on previous version (Grace) please check `main` branch.
 

commitlint.config.js

@@ -12,7 +12,9 @@ module.exports = {
         'icon',
         'input',
         'badge',
-        'tooltip'
+        'tab',
+        'tooltip',
+        'progress-indicator'
       ],
     ],
   },

docs/contributing.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description } from '@storybook/addon-docs/blocks';
+import { Meta, Description } from '@storybook/addon-docs';
 import Contributing from '../CONTRIBUTING.md';
 
 <Meta

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

@@ -1,14 +1,14 @@
 import { Meta } from '@storybook/addon-docs';
-import createBranchImage from './images/create-branch-in-vscode.png';
-import iconsFolderImage from './images/icons-folder.png';
-import stageFilesImage from './images/stage-files.png';
-import filesStagedImage from './images/files-staged.png';
-import commitPushImage from './images/commit-and-push.png';
-import openPrImage from './images/open-pr.png';
-import prFormImage from './images/pr-form.png';
+import createBranchImage from '../images/create-branch-in-vscode.png';
+import iconsFolderImage from '../images/icons-folder.png';
+import stageFilesImage from '../images/stage-files.png';
+import filesStagedImage from '../images/files-staged.png';
+import commitPushImage from '../images/commit-and-push.png';
+import openPrImage from '../images/open-pr.png';
+import prFormImage from '../images/pr-form.png';
 
 <Meta
-  title="Documentation/Adding New Icons"
+  title="Design System/Icons/Adding New Icons"
   parameters={{
     viewMode: 'docs',
     previewTabs: {

docs/design-system/border-radius.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Design System/Border Radius" />
+
+# Border Radius
+
+The border-radius property defines the radius of the element's corners.
+
+| Variable                |      Value      |   <div style={{ width: '25rem' }}>Example</div>  |
+|-----------------------|:-------------:|:----------:|
+| --bl-border-radius-xs |  0.125rem (2px) | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '0.125rem' }}></div> |
+| --bl-border-radius-s |  0.25rem (4px) | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '0.25rem' }}></div> |
+| --bl-border-radius-m (default) |  0.375rem (6px) | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '0.375rem' }}></div> |
+| --bl-border-radius-l |  0.5rem (8px) | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '0.5rem' }}></div> |
+| --bl-border-radius-pill |  62.438rem (999px) | <div style={{ width: '10rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '62.438rem' }}></div> |
+| --bl-border-radius-circle |  50% | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: 50 }}></div> |

docs/design-system/iconography.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs';
 import icons from '../../src/components/icon/icon-list';
 
 <Meta
-  title="Design System/Iconography"
+  title="Design System/Icons/Iconography"
   parameters={{
     viewMode: 'docs',
     previewTabs: {

docs/linting.stories.mdx

@@ -12,11 +12,20 @@ import { Meta } from '@storybook/addon-docs';
   }}
 />
 
-# Baklava testing
+# Linters & Formatters
 
-> This guide will help contributors about how to lint Baklava.
+To keep a consistent codebase we use some linters and running them in our pipelines automatically.
 
-### Brief
-- To lint, we are using `tsc`, `eslint`, `prettier` and `stylelint`.
-    - To get more information, you can find our configurations at [tsconfig.json](https://github.com/Trendyol/baklava/blob/next/tsconfig.json), [.prettier.json](https://github.com/Trendyol/baklava/blob/next/.prettier.json), [.eslintrc.json](https://github.com/Trendyol/baklava/blob/next/.eslintrc.json) and [stylelintrc.json](https://github.com/Trendyol/baklava/blob/next/stylelintrc.json).
-- To run linters, you can simply type `npm run lint` and run.
+Linters that we use are [`eslint`](https://eslint.org), [`stylelint`](https://stylelint.io) and
+[`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
+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
+checks for all of the files this time and makes sure this push doesn't break any coding rules that we have.
+
+We also use [`prettier`](https://prettier.io) and `eslint` as a formatter to easily fix some linting issues. You can
+run `npm run format` to fix some issues automatically. We don't run this command in every commit automatically because
+we want to be in control what and why we are doing some fixes.