From 8f8eae50c0b465a532fb4fee0f304badd6892d81 Mon Sep 17 00:00:00 2001 From: Levent Anil Ozen Date: Thu, 2 May 2024 15:24:47 +0300 Subject: [PATCH 01/10] docs: bump version in docs (#851) --- README.md | 4 ++-- docs/customizing-baklava-theme.stories.mdx | 6 +++--- docs/localization.stories.mdx | 2 +- docs/using-baklava-in-next.stories.mdx | 6 +++--- docs/using-baklava-in-react.stories.mdx | 8 ++++---- docs/using-baklava-in-vue.stories.mdx | 6 +++--- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index adf6f1ed..768bd74b 100644 --- a/README.md +++ b/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 - - + + ``` 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. diff --git a/docs/customizing-baklava-theme.stories.mdx b/docs/customizing-baklava-theme.stories.mdx index a2d38da4..1ec6ad81 100644 --- a/docs/customizing-baklava-theme.stories.mdx +++ b/docs/customizing-baklava-theme.stories.mdx @@ -19,7 +19,7 @@ instead of `themes/default.css` file. Like: ```html - + ``` 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 - + - + ``` 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. diff --git a/docs/localization.stories.mdx b/docs/localization.stories.mdx index 82e0d25a..adea0732 100644 --- a/docs/localization.stories.mdx +++ b/docs/localization.stories.mdx @@ -10,7 +10,7 @@ To initialize localization, insert the following script at the head of your HTML ```html - + diff --git a/docs/using-baklava-in-next.stories.mdx b/docs/using-baklava-in-next.stories.mdx index f435bf1a..cba10f90 100644 --- a/docs/using-baklava-in-next.stories.mdx +++ b/docs/using-baklava-in-next.stories.mdx @@ -19,12 +19,12 @@ Include Baklava library from CDN to your project's `` section (in `layout. ```html + + ``` Then you can use Baklava React components in your project by importing them from `@trendyol/baklava/dist/baklava-react` in your code. @@ -62,7 +62,7 @@ import ReactDOM from "react-dom/client"; import "@trendyol/baklava"; import { setIconPath } from "@trendyol/baklava"; import "@trendyol/baklava/dist/themes/default.css"; -setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/assets"); +setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/assets"); import App from "./App"; @@ -193,7 +193,7 @@ import "vitest-dom/extend-expect"; import "@trendyol/baklava"; import { setIconPath } from "@trendyol/baklava"; import "@trendyol/baklava/dist/themes/default.css"; -setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/assets"); +setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/assets"); ``` We are ready to write tests. diff --git a/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx index 042c3bee..e9d30950 100644 --- a/docs/using-baklava-in-vue.stories.mdx +++ b/docs/using-baklava-in-vue.stories.mdx @@ -17,8 +17,8 @@ To make the rule more generic, easiest way is ignoring the elements start with ` To be able to use Baklava via CDN, you should add our default.css and baklava.js at head tag in your index.html file. ```html - - + + ``` ### Via NPM @@ -29,7 +29,7 @@ then, ```js @import "@trendyol/baklava/dist/themes/default.css"; import { setIconPath } from '@trendyol/baklava' -setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/assets') +setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/assets') ``` #### Vue2 From 8e596301d9a8aeea133316b4847e360729f78a3b Mon Sep 17 00:00:00 2001 From: Erbil Nas Date: Thu, 10 Oct 2024 14:49:49 +0300 Subject: [PATCH 02/10] fix: resolve conflict --- docs/using-baklava-in-react.stories.mdx | 2 +- docs/using-baklava-in-vue.stories.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx index 3b0b7066..4e41ebcd 100644 --- a/docs/using-baklava-in-react.stories.mdx +++ b/docs/using-baklava-in-react.stories.mdx @@ -193,7 +193,7 @@ import "vitest-dom/extend-expect"; import "@trendyol/baklava"; import { setIconPath } from "@trendyol/baklava"; import "@trendyol/baklava/dist/themes/default.css"; -setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/assets"); +setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons"); ``` We are ready to write tests. diff --git a/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx index e9d30950..170ca641 100644 --- a/docs/using-baklava-in-vue.stories.mdx +++ b/docs/using-baklava-in-vue.stories.mdx @@ -29,7 +29,7 @@ then, ```js @import "@trendyol/baklava/dist/themes/default.css"; import { setIconPath } from '@trendyol/baklava' -setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/assets') +setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons') ``` #### Vue2 From bb0d15ec559a9e09a8678244c6aee909744b0597 Mon Sep 17 00:00:00 2001 From: Erbil Date: Thu, 10 Oct 2024 15:08:48 +0300 Subject: [PATCH 03/10] fix: upgrade next version to resolve vulnerability (#929) Co-authored-by: Erbil Nas --- examples/next-app-router-ssr/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/next-app-router-ssr/package.json b/examples/next-app-router-ssr/package.json index 284c6693..c95b6a5a 100644 --- a/examples/next-app-router-ssr/package.json +++ b/examples/next-app-router-ssr/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@trendyol/baklava": "^3.0.0", - "next": "14.1.3", + "next": "14.2.10", "react": "^18", "react-dom": "^18" }, From fec9f28af412149b8ac26adef0fa11353d0279b1 Mon Sep 17 00:00:00 2001 From: Erbil Date: Thu, 10 Oct 2024 15:13:57 +0300 Subject: [PATCH 04/10] docs: resolve conflict in storybook (#928) Co-authored-by: Erbil Nas --- docs/using-baklava-in-react.stories.mdx | 4 ++-- docs/using-baklava-in-vue.stories.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx index 3b0b7066..d520fe6f 100644 --- a/docs/using-baklava-in-react.stories.mdx +++ b/docs/using-baklava-in-react.stories.mdx @@ -62,7 +62,7 @@ import ReactDOM from "react-dom/client"; import "@trendyol/baklava"; import { setIconPath } from "@trendyol/baklava"; import "@trendyol/baklava/dist/themes/default.css"; -setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/assets"); +setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons"); import App from "./App"; @@ -193,7 +193,7 @@ import "vitest-dom/extend-expect"; import "@trendyol/baklava"; import { setIconPath } from "@trendyol/baklava"; import "@trendyol/baklava/dist/themes/default.css"; -setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/assets"); +setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons"); ``` We are ready to write tests. diff --git a/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx index e9d30950..170ca641 100644 --- a/docs/using-baklava-in-vue.stories.mdx +++ b/docs/using-baklava-in-vue.stories.mdx @@ -29,7 +29,7 @@ then, ```js @import "@trendyol/baklava/dist/themes/default.css"; import { setIconPath } from '@trendyol/baklava' -setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/assets') +setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons') ``` #### Vue2 From 4142f17a8944fa5081fdfb300a17fdc091042006 Mon Sep 17 00:00:00 2001 From: Erbil Date: Fri, 11 Oct 2024 15:52:09 +0300 Subject: [PATCH 05/10] v3.2.0 (#924) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What's Changed * Merge pull request #783 from Trendyol/next by @leventozen in https://github.com/Trendyol/baklava/pull/784 * docs: bump version in docs by @leventozen in https://github.com/Trendyol/baklava/pull/851 * docs: bump version by @leventozen in https://github.com/Trendyol/baklava/pull/852 * feat(icon): add door and credit_card icons by @umitkucuk in https://github.com/Trendyol/baklava/pull/855 * chore(deps-dev): bump ejs from 3.1.9 to 3.1.10 by @dependabot in https://github.com/Trendyol/baklava/pull/850 * feat(select): improve option navigation by key by @gokcecicek in https://github.com/Trendyol/baklava/pull/856 * fix(popover): Fix bl-tooltip trigger issue by @MertOzbudak in https://github.com/Trendyol/baklava/pull/871 * feat(tooltip): add target attribute by @Enes5519 in https://github.com/Trendyol/baklava/pull/848 * feat(dialog): implement critical variant by @AykutSarac in https://github.com/Trendyol/baklava/pull/870 * fix(drawer): fix drawer delay bug for removing from dom by @fatihkucuktry in https://github.com/Trendyol/baklava/pull/875 * fix(split-button): fix event bubbling for buttons inside split button by @ozkersemih in https://github.com/Trendyol/baklava/pull/879 * fix(select): fix disabled select option can be selected with enter by @ahmetozantekin in https://github.com/Trendyol/baklava/pull/874 * chore: update dependabot.yml configuration by @doganozturk in https://github.com/Trendyol/baklava/pull/882 * feat(select): Improve select search international character support by @fatihkucuktry in https://github.com/Trendyol/baklava/pull/857 * feat(select): fix search text is not clear bug when user click clear button by @mozbatman in https://github.com/Trendyol/baklava/pull/858 * story(input): add input masking documentation by @doganozturk in https://github.com/Trendyol/baklava/pull/883 * style(dialog): tab-group inside dialog by @ozkersemih in https://github.com/Trendyol/baklava/pull/872 * feat(select): fix search text is not clear bug when user click clear button by @mozbatman in https://github.com/Trendyol/baklava/pull/885 * fix: Use lowercase script import in using-baklava-in-next.stories.mdx by @BerkinAKKAYA in https://github.com/Trendyol/baklava/pull/884 * feat: calendar component by @dilandoogan in https://github.com/Trendyol/baklava/pull/823 * feat: spinner component by @MertOzbudak in https://github.com/Trendyol/baklava/pull/877 * docs(ADR): move ADRs under components directories by @AykutSarac in https://github.com/Trendyol/baklava/pull/865 * fix(checkbox): add relative value for position in checkbox container by @erbilnas in https://github.com/Trendyol/baklava/pull/896 * chore(deps): bump actions/configure-pages from 3 to 5 by @dependabot in https://github.com/Trendyol/baklava/pull/887 * chore(deps): bump actions/deploy-pages from 2 to 4 by @dependabot in https://github.com/Trendyol/baklava/pull/888 * refactor(icon): implement baklava-icons and remove icons folder by @ogunb in https://github.com/Trendyol/baklava/pull/898 * feat(input): prevent enter to submit form by @muratcorlu in https://github.com/Trendyol/baklava/pull/691 * fix(checkbox): fix validation state of checkbox by @Enes5519 in https://github.com/Trendyol/baklava/pull/904 * feat(dialog): add width and caption line clamp css property by @Enes5519 in https://github.com/Trendyol/baklava/pull/902 * fix(tooltip): use mouseenter as event listener by @ozkersemih in https://github.com/Trendyol/baklava/pull/909 * fix(table): multiple checkbox should only handle currently rendered rows by @ogunb in https://github.com/Trendyol/baklava/pull/913 * feat(datepicker): remove calendar border by @dilandoogan in https://github.com/Trendyol/baklava/pull/917 * feat(datepicker): fix selected date color bug by @dilandoogan in https://github.com/Trendyol/baklava/pull/922 * fix: upgrade next version to resolve vulnerability by @erbilnas in https://github.com/Trendyol/baklava/pull/929 * docs: resolve conflict in storybook by @erbilnas in https://github.com/Trendyol/baklava/pull/928 ## New Contributors * @gokcecicek made their first contribution in https://github.com/Trendyol/baklava/pull/856 * @MertOzbudak made their first contribution in https://github.com/Trendyol/baklava/pull/871 * @fatihkucuktry made their first contribution in https://github.com/Trendyol/baklava/pull/875 * @ahmetozantekin made their first contribution in https://github.com/Trendyol/baklava/pull/874 * @mozbatman made their first contribution in https://github.com/Trendyol/baklava/pull/858 * @dilandoogan made their first contribution in https://github.com/Trendyol/baklava/pull/823 **Full Changelog**: https://github.com/Trendyol/baklava/compare/v3.1.0...3.2.0 --------- Signed-off-by: dependabot[bot] Signed-off-by: Berkin AKKAYA Signed-off-by: Aykut Saraç Co-authored-by: Levent Anil Ozen Co-authored-by: Ümit Küçük <24843599+umitkucuk@users.noreply.github.com> Co-authored-by: Umit Kucuk Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Beril Gökçe Çiçek <52400850+gokcecicek@users.noreply.github.com> Co-authored-by: ozkersemih Co-authored-by: MertOzbudak Co-authored-by: mert.ozbudak Co-authored-by: Enes Yıldırım Co-authored-by: Aykut Saraç Co-authored-by: Fatih Küçük <156313362+fatihkucuktry@users.noreply.github.com> Co-authored-by: Semih Ozker <52029025+ozkersemih@users.noreply.github.com> Co-authored-by: ahmetozantekin Co-authored-by: Ahmet Ozan Tekin Co-authored-by: Doğan Öztürk Co-authored-by: Mustafa Özbatman <49883994+mozbatman@users.noreply.github.com> Co-authored-by: mustafa.ozbatman Co-authored-by: Doğan Öztürk Co-authored-by: Ogun Babacan Co-authored-by: Berkin AKKAYA Co-authored-by: dilandoogan <147757889+dilandoogan@users.noreply.github.com> Co-authored-by: Buse Selvi <106681486+buseselvi@users.noreply.github.com> Co-authored-by: Erbil Nas Co-authored-by: Murat Çorlu <127687+muratcorlu@users.noreply.github.com> --- .eslintignore | 1 + .github/dependabot.yml | 61 ++ .github/workflows/publish-storybook.yml | 6 +- .prettierignore | 1 + README.md | 1 + commitlint.config.cjs | 1 + custom-elements-manifest.config.mjs | 2 +- .../adding-a-new-icon.stories.mdx | 56 -- docs/design-system/iconography.stories.mdx | 28 +- docs/using-baklava-in-next.stories.mdx | 4 +- examples/input-mask-react/.eslintrc.cjs | 22 + examples/input-mask-react/.gitignore | 24 + examples/input-mask-react/.prettierrc | 7 + examples/input-mask-react/README.md | 25 + examples/input-mask-react/index.html | 14 + examples/input-mask-react/package.json | 37 ++ .../input-mask-react/src/examples/Root.jsx | 20 + .../src/examples/imask/IMask.jsx | 66 +++ .../InputAmountPostfix/InputAmountPostfix.jsx | 28 + .../InputPhoneKazakhstan.jsx | 20 + .../InputPhoneUSA/InputPhoneUSA.jsx | 20 + .../InputPricePrefix/InputPricePrefix.jsx | 24 + .../InputPricePrefixDecimals.jsx | 27 + .../InputWithPlaceholderCVC.jsx | 24 + .../InputWithPlaceholderDate.jsx | 37 ++ .../InputWithPlaceholderPhone.jsx | 17 + .../imask/components/TextArea/TextArea.jsx | 19 + .../src/examples/imask/hooks/index.js | 1 + .../imask/hooks/useIMaskWithObserver.js | 44 ++ .../src/examples/maskito/Maskito.jsx | 81 +++ .../InputPhoneKazakhstan.jsx | 24 + .../components/InputPhoneKazakhstan/mask.js | 56 ++ .../InputPhoneUSA/InputPhoneUSA.jsx | 24 + .../maskito/components/InputPhoneUSA/mask.js | 21 + .../InputWithPlaceholderCVC.jsx | 22 + .../InputWithPlaceholderCVC/mask.js | 6 + .../InputWithPlaceholderDate.jsx | 22 + .../InputWithPlaceholderDate/mask.js | 29 + .../InputWithPlaceholderPhone.jsx | 21 + .../InputWithPlaceholderPhone/mask.js | 53 ++ ...nputWithPostfixByPatternMaskExpression.jsx | 24 + .../mask.js | 11 + .../InputWithPostfixByPostProcessor.jsx | 23 + .../InputWithPostfixByPostProcessor/mask.js | 20 + ...InputWithPrefixByPatternMaskExpression.jsx | 23 + .../mask.js | 7 + .../InputWithPrefixByPostprocessor.jsx | 23 + .../InputWithPrefixByPostprocessor/mask.js | 11 + .../maskito/components/TextArea/TextArea.jsx | 23 + .../maskito/components/TextArea/mask.js | 3 + .../maskito/helpers/elementPredicate.js | 18 + .../src/examples/maskito/helpers/index.js | 1 + examples/input-mask-react/src/main.jsx | 34 ++ .../input-mask-react/src/styles/global.css | 3 + examples/input-mask-react/vite.config.js | 7 + examples/input-mask-vue/.gitignore | 24 + examples/input-mask-vue/README.md | 25 + examples/input-mask-vue/index.html | 13 + examples/input-mask-vue/package.json | 24 + examples/input-mask-vue/src/App.vue | 11 + examples/input-mask-vue/src/Home.vue | 24 + .../src/examples/imask/IMask.vue | 87 +++ .../InputAmountPostfix/InputAmountPostfix.vue | 35 ++ .../InputPhoneKazakhstan.vue | 29 + .../InputPhoneUSA/InputPhoneUSA.vue | 29 + .../InputPricePrefix/InputPricePrefix.vue | 33 ++ .../InputPricePrefixDecimals.vue | 36 ++ .../InputWithPlaceholderCVC.vue | 33 ++ .../InputWithPlaceholderDate.vue | 54 ++ .../InputWithPlaceholderPhone.vue | 28 + .../imask/components/TextArea/TextArea.vue | 28 + .../imask/hooks/useIMaskWithObserver.js | 46 ++ .../src/examples/maskito/Maskito.vue | 84 +++ .../InputPhoneKazakhstan.vue | 36 ++ .../components/InputPhoneKazakhstan/mask.js | 56 ++ .../InputPhoneUSA/InputPhoneUSA.vue | 37 ++ .../maskito/components/InputPhoneUSA/mask.js | 21 + .../InputWithPlaceholderCVC.vue | 35 ++ .../InputWithPlaceholderCVC/mask.js | 6 + .../InputWithPlaceholderDate.vue | 36 ++ .../InputWithPlaceholderDate/mask.js | 29 + .../InputWithPlaceholderPhone.vue | 35 ++ .../InputWithPlaceholderPhone/mask.js | 53 ++ ...nputWithPostfixByPatternMaskExpression.vue | 35 ++ .../mask.js | 11 + .../InputWithPostfixByPostProcessor.vue | 35 ++ .../InputWithPostfixByPostProcessor/mask.js | 20 + ...InputWithPrefixByPatternMaskExpression.vue | 34 ++ .../mask.js | 7 + .../InputWithPrefixByPostprocessor.vue | 35 ++ .../InputWithPrefixByPostprocessor/mask.js | 11 + .../maskito/components/TextArea/TextArea.vue | 35 ++ .../maskito/components/TextArea/mask.js | 3 + .../maskito/helpers/elementPredicate.js | 18 + .../src/examples/maskito/helpers/index.js | 1 + examples/input-mask-vue/src/main.js | 18 + examples/input-mask-vue/src/router.js | 27 + examples/input-mask-vue/src/style.css | 3 + examples/input-mask-vue/vite.config.js | 15 + examples/input-mask/.gitignore | 24 + examples/input-mask/README.md | 25 + examples/input-mask/imask/index.html | 130 +++++ examples/input-mask/index.html | 29 + examples/input-mask/maskito/index.html | 148 +++++ examples/input-mask/package.json | 21 + .../src/examples/imask/components/index.ts | 9 + .../inputAmountPostfix/inputAmountPostfix.ts | 18 + .../inputPhoneKazakhstan.ts | 13 + .../components/inputPhoneUSA/inputPhoneUSA.ts | 14 + .../inputPricePrefix/inputPricePrefix.ts | 20 + .../inputPricePrefixDecimals.ts | 23 + .../inputWithPlaceholderCVC.ts | 22 + .../inputWithPlaceholderDate.ts | 43 ++ .../inputWithPlaceholderPhone.ts | 24 + .../imask/components/textarea/textarea.ts | 17 + .../input-mask/src/examples/imask/index.ts | 25 + .../src/examples/maskito/components/index.ts | 10 + .../inputPhoneKazakhstan.ts | 9 + .../components/inputPhoneKazakhstan/mask.ts | 59 ++ .../components/inputPhoneUSA/inputPhoneUSA.ts | 9 + .../maskito/components/inputPhoneUSA/mask.ts | 23 + .../inputWithPlaceholderCVC.ts | 9 + .../inputWithPlaceholderCVC/mask.ts | 7 + .../inputWithPlaceholderDate.ts | 9 + .../inputWithPlaceholderDate/mask.ts | 30 + .../inputWithPlaceholderPhone.ts | 9 + .../inputWithPlaceholderPhone/mask.ts | 53 ++ ...inputWithPostfixByPatternMaskExpression.ts | 9 + .../mask.ts | 13 + .../inputWithPostfixByPostprocessor.ts | 9 + .../inputWithPostfixByPostprocessor/mask.ts | 21 + .../inputWithPrefixByPatternMaskExpression.ts | 9 + .../mask.ts | 9 + .../inputWithPrefixByPostprocessor.ts | 9 + .../inputWithPrefixByPostprocessor/mask.ts | 12 + .../maskito/components/textarea/mask.ts | 5 + .../maskito/components/textarea/textarea.ts | 9 + .../input-mask/src/examples/maskito/index.ts | 27 + examples/input-mask/src/styles/global.css | 3 + examples/input-mask/src/vite-env.d.ts | 1 + examples/input-mask/tsconfig.json | 23 + examples/input-mask/vite.config.js | 14 + examples/next-app-router-ssr/.eslintrc.json | 3 + examples/next-app-router-ssr/.gitignore | 36 ++ examples/next-app-router-ssr/README.md | 25 + examples/next-app-router-ssr/next.config.mjs | 4 + examples/next-app-router-ssr/package.json | 25 + examples/next-app-router-ssr/public/next.svg | 1 + .../next-app-router-ssr/public/vercel.svg | 1 + .../next-app-router-ssr/src/app/favicon.ico | Bin 0 -> 25931 bytes .../next-app-router-ssr/src/app/globals.css | 107 ++++ .../next-app-router-ssr/src/app/layout.tsx | 34 ++ .../src/app/page.module.css | 230 ++++++++ examples/next-app-router-ssr/src/app/page.tsx | 12 + .../src/components/Button.tsx | 10 + examples/next-app-router-ssr/tsconfig.json | 26 + package-lock.json | 36 +- package.json | 9 + playground/template.html | 2 +- src/baklava.ts | 2 + src/components/accordion-group/doc/ADR.md | 58 ++ src/components/alert/doc/ADR.md | 62 ++ src/components/badge/doc/ADR.md | 54 ++ src/components/button/bl-button.css | 21 +- src/components/button/bl-button.stories.mdx | 6 +- src/components/button/bl-button.test.ts | 56 +- src/components/button/bl-button.ts | 16 +- src/components/button/doc/ADR.md | 0 .../calendar/bl-calendar.constant.ts | 14 + src/components/calendar/bl-calendar.css | 140 +++++ .../calendar/bl-calendar.stories.mdx | 93 +++ src/components/calendar/bl-calendar.ts | 551 ++++++++++++++++++ src/components/calendar/bl-calendar.types.ts | 16 + .../checkbox-group/checkbox/bl-checkbox.css | 4 + .../checkbox/bl-checkbox.stories.mdx | 10 +- .../checkbox/bl-checkbox.test.ts | 2 +- .../checkbox-group/checkbox/bl-checkbox.ts | 10 +- src/components/checkbox-group/doc/ADR.md | 51 ++ src/components/dialog/bl-dialog.css | 18 +- src/components/dialog/bl-dialog.mdx | 22 + src/components/dialog/bl-dialog.stories.ts | 84 ++- src/components/dialog/bl-dialog.test.ts | 57 +- src/components/dialog/bl-dialog.ts | 32 +- src/components/dialog/doc/ADR.md | 50 ++ src/components/drawer/bl-drawer.ts | 13 +- src/components/drawer/doc/ADR.md | 53 ++ src/components/dropdown/doc/ADR.md | 0 src/components/icon/doc/ADR.md | 0 src/components/icon/icon-list.ts | 238 +------- src/components/icon/icons/academy.svg | 3 - src/components/icon/icons/account.svg | 3 - src/components/icon/icons/add_note.svg | 4 - src/components/icon/icons/add_part.svg | 6 - src/components/icon/icons/add_photo.svg | 4 - src/components/icon/icons/add_product.svg | 5 - src/components/icon/icons/alert.svg | 3 - src/components/icon/icons/announcement.svg | 4 - src/components/icon/icons/archive.svg | 3 - src/components/icon/icons/arrow_down.svg | 3 - src/components/icon/icons/arrow_left.svg | 3 - src/components/icon/icons/arrow_right.svg | 3 - src/components/icon/icons/arrow_up.svg | 3 - src/components/icon/icons/attach.svg | 3 - src/components/icon/icons/award.svg | 6 - src/components/icon/icons/back.svg | 3 - src/components/icon/icons/back_fill.svg | 3 - src/components/icon/icons/badge.svg | 5 - src/components/icon/icons/barcode.svg | 3 - src/components/icon/icons/bill.svg | 3 - src/components/icon/icons/book.svg | 3 - src/components/icon/icons/browser.svg | 3 - src/components/icon/icons/burger.svg | 3 - src/components/icon/icons/calendar.svg | 5 - src/components/icon/icons/camera.svg | 3 - src/components/icon/icons/camera_off.svg | 4 - src/components/icon/icons/campaign.svg | 3 - src/components/icon/icons/change.svg | 4 - src/components/icon/icons/change_fill.svg | 3 - src/components/icon/icons/chart.svg | 5 - src/components/icon/icons/chatbot.svg | 3 - src/components/icon/icons/check.svg | 3 - src/components/icon/icons/check_fill.svg | 3 - src/components/icon/icons/clock.svg | 3 - src/components/icon/icons/close.svg | 3 - src/components/icon/icons/close_fill.svg | 3 - src/components/icon/icons/code.svg | 3 - src/components/icon/icons/coin.svg | 3 - src/components/icon/icons/compass.svg | 3 - src/components/icon/icons/complain.svg | 3 - src/components/icon/icons/confetti.svg | 9 - src/components/icon/icons/copy.svg | 3 - src/components/icon/icons/copy_checked.svg | 3 - src/components/icon/icons/coupon.svg | 3 - src/components/icon/icons/delete.svg | 4 - src/components/icon/icons/desktop.svg | 3 - src/components/icon/icons/desktop_filled.svg | 4 - src/components/icon/icons/dialog.svg | 3 - src/components/icon/icons/disable.svg | 3 - src/components/icon/icons/dislike.svg | 3 - src/components/icon/icons/document.svg | 3 - src/components/icon/icons/document_search.svg | 4 - src/components/icon/icons/donation.svg | 4 - src/components/icon/icons/download.svg | 5 - src/components/icon/icons/drag_and_drop.svg | 3 - src/components/icon/icons/edit.svg | 4 - src/components/icon/icons/excel.svg | 3 - src/components/icon/icons/exit.svg | 5 - src/components/icon/icons/expand.svg | 8 - src/components/icon/icons/export.svg | 3 - src/components/icon/icons/express.svg | 3 - .../icon/icons/express_delivery.svg | 6 - .../icon/icons/express_furniture.svg | 6 - src/components/icon/icons/external_link.svg | 4 - src/components/icon/icons/external_share.svg | 7 - src/components/icon/icons/eye_off.svg | 4 - src/components/icon/icons/eye_on.svg | 3 - src/components/icon/icons/facebook.svg | 3 - src/components/icon/icons/filter.svg | 3 - .../icon/icons/finance_accounting.svg | 3 - src/components/icon/icons/fire.svg | 3 - src/components/icon/icons/flag.svg | 3 - src/components/icon/icons/flash.svg | 3 - src/components/icon/icons/flash_fill.svg | 3 - src/components/icon/icons/forward.svg | 3 - src/components/icon/icons/full_size.svg | 3 - src/components/icon/icons/gift.svg | 6 - src/components/icon/icons/global_export.svg | 3 - src/components/icon/icons/globe.svg | 5 - src/components/icon/icons/go_forward.svg | 3 - src/components/icon/icons/graphic.svg | 3 - .../icon/icons/graphic_decrease.svg | 3 - src/components/icon/icons/group_of_people.svg | 8 - src/components/icon/icons/growth.svg | 3 - src/components/icon/icons/hamburger_menu.svg | 5 - src/components/icon/icons/handshake.svg | 4 - src/components/icon/icons/happy.svg | 3 - src/components/icon/icons/heart.svg | 3 - src/components/icon/icons/heart_fill.svg | 3 - src/components/icon/icons/heartbeat.svg | 3 - src/components/icon/icons/help.svg | 3 - src/components/icon/icons/history.svg | 3 - src/components/icon/icons/home.svg | 3 - src/components/icon/icons/hourglass.svg | 3 - src/components/icon/icons/image.svg | 5 - src/components/icon/icons/incognito.svg | 4 - src/components/icon/icons/info.svg | 3 - src/components/icon/icons/instagram.svg | 3 - src/components/icon/icons/label.svg | 3 - .../icon/icons/left_sided_arrow.svg | 3 - src/components/icon/icons/light_bulb.svg | 3 - src/components/icon/icons/like.svg | 3 - src/components/icon/icons/link.svg | 3 - src/components/icon/icons/listing.svg | 3 - src/components/icon/icons/live_monitor.svg | 3 - src/components/icon/icons/live_support.svg | 3 - src/components/icon/icons/loading.svg | 4 - src/components/icon/icons/lock.svg | 4 - src/components/icon/icons/magic_wand.svg | 3 - src/components/icon/icons/mail.svg | 3 - src/components/icon/icons/mail_opened.svg | 3 - src/components/icon/icons/map.svg | 4 - src/components/icon/icons/market.svg | 13 - .../icon/icons/market_order_back.svg | 3 - .../icon/icons/market_order_cancel.svg | 3 - .../icon/icons/market_order_change.svg | 3 - .../icon/icons/market_order_check.svg | 3 - .../icon/icons/market_processing.svg | 7 - src/components/icon/icons/meal_bag.svg | 4 - src/components/icon/icons/medal.svg | 5 - src/components/icon/icons/message.svg | 3 - src/components/icon/icons/metric_decrease.svg | 4 - src/components/icon/icons/metric_increase.svg | 4 - src/components/icon/icons/metric_minus.svg | 4 - src/components/icon/icons/microphone.svg | 3 - src/components/icon/icons/microphone_off.svg | 12 - src/components/icon/icons/minus.svg | 3 - src/components/icon/icons/minus_fill.svg | 3 - src/components/icon/icons/mobile.svg | 3 - src/components/icon/icons/mobile_fill.svg | 3 - src/components/icon/icons/mobile_settings.svg | 5 - src/components/icon/icons/money.svg | 4 - src/components/icon/icons/money_transfer.svg | 3 - src/components/icon/icons/motorcycle.svg | 3 - .../icon/icons/motorcycle_check.svg | 3 - src/components/icon/icons/new_store.svg | 3 - src/components/icon/icons/normal.svg | 3 - src/components/icon/icons/notice.svg | 7 - src/components/icon/icons/notification.svg | 3 - src/components/icon/icons/offers.svg | 5 - src/components/icon/icons/order.svg | 3 - src/components/icon/icons/order_back.svg | 3 - src/components/icon/icons/order_box.svg | 3 - src/components/icon/icons/order_boxes.svg | 14 - src/components/icon/icons/order_cancel.svg | 4 - src/components/icon/icons/order_check.svg | 3 - src/components/icon/icons/order_return.svg | 6 - src/components/icon/icons/order_settings.svg | 6 - src/components/icon/icons/order_time.svg | 4 - src/components/icon/icons/order_tracking.svg | 3 - src/components/icon/icons/paper.svg | 3 - src/components/icon/icons/partial_approve.svg | 6 - src/components/icon/icons/pause.svg | 3 - src/components/icon/icons/pause_fill.svg | 3 - src/components/icon/icons/people.svg | 3 - src/components/icon/icons/phone.svg | 3 - src/components/icon/icons/phone_settings.svg | 4 - src/components/icon/icons/photo.svg | 3 - src/components/icon/icons/photo_off.svg | 3 - src/components/icon/icons/pie_chart.svg | 4 - .../icon/icons/pie_chart_report.svg | 3 - src/components/icon/icons/pin.svg | 3 - src/components/icon/icons/play.svg | 3 - src/components/icon/icons/play_fill.svg | 3 - src/components/icon/icons/plus.svg | 3 - src/components/icon/icons/plus_fill.svg | 3 - src/components/icon/icons/preview.svg | 4 - src/components/icon/icons/price_settings.svg | 4 - src/components/icon/icons/print.svg | 3 - src/components/icon/icons/product.svg | 3 - src/components/icon/icons/profile.svg | 3 - src/components/icon/icons/profile_check.svg | 5 - src/components/icon/icons/profile_star.svg | 3 - src/components/icon/icons/puzzle.svg | 3 - src/components/icon/icons/qr.svg | 6 - src/components/icon/icons/report.svg | 4 - src/components/icon/icons/review.svg | 3 - .../icon/icons/right_sided_arrow.svg | 3 - src/components/icon/icons/rocket.svg | 4 - src/components/icon/icons/rotate.svg | 3 - src/components/icon/icons/sad.svg | 3 - src/components/icon/icons/save.svg | 4 - src/components/icon/icons/search.svg | 8 - src/components/icon/icons/send.svg | 3 - src/components/icon/icons/send_mail.svg | 6 - src/components/icon/icons/services.svg | 4 - src/components/icon/icons/settings.svg | 7 - src/components/icon/icons/share.svg | 5 - src/components/icon/icons/shopping_bag.svg | 8 - .../icon/icons/shopping_bag_add.svg | 3 - .../icon/icons/shopping_bag_back.svg | 9 - .../icon/icons/shopping_bag_cancel.svg | 9 - .../icon/icons/shopping_bag_discount.svg | 3 - .../icon/icons/shopping_bag_return.svg | 10 - src/components/icon/icons/sorting.svg | 4 - src/components/icon/icons/sorting_asc.svg | 4 - src/components/icon/icons/sorting_desc.svg | 4 - src/components/icon/icons/sound_off.svg | 4 - src/components/icon/icons/sound_on.svg | 3 - src/components/icon/icons/split_money.svg | 4 - src/components/icon/icons/star.svg | 3 - src/components/icon/icons/star_double.svg | 4 - src/components/icon/icons/star_fill.svg | 3 - src/components/icon/icons/star_triple.svg | 3 - src/components/icon/icons/stop.svg | 3 - src/components/icon/icons/stop_fill.svg | 3 - src/components/icon/icons/store.svg | 3 - .../icon/icons/store_performance.svg | 4 - src/components/icon/icons/suitcase.svg | 3 - src/components/icon/icons/support.svg | 3 - src/components/icon/icons/target.svg | 5 - src/components/icon/icons/ticket.svg | 3 - src/components/icon/icons/translation.svg | 3 - src/components/icon/icons/truck.svg | 6 - src/components/icon/icons/turn_back.svg | 3 - src/components/icon/icons/turn_back_fill.svg | 3 - src/components/icon/icons/two_sided_arrow.svg | 3 - src/components/icon/icons/unlock.svg | 4 - src/components/icon/icons/upload.svg | 5 - src/components/icon/icons/user_management.svg | 3 - src/components/icon/icons/vacation_mode.svg | 4 - src/components/icon/icons/very_happy.svg | 3 - src/components/icon/icons/very_sad.svg | 3 - src/components/icon/icons/wallet.svg | 3 - src/components/icon/icons/warehouse.svg | 3 - src/components/icon/icons/warning.svg | 3 - src/components/icon/icons/youtube.svg | 3 - src/components/icon/icons/zoom_in.svg | 3 - src/components/icon/icons/zoom_out.svg | 3 - src/components/input/bl-input.stories.mdx | 167 +++++- src/components/input/bl-input.test.ts | 76 +++ src/components/input/bl-input.ts | 16 +- src/components/input/doc/ADR.md | 0 src/components/notification/doc/ADR.md | 131 +++++ src/components/pagination/doc/ADR.md | 37 ++ src/components/popover/bl-popover.ts | 14 +- src/components/popover/doc/ADR.md | 0 src/components/progress-indicator/doc/ADR.md | 57 ++ src/components/radio-group/doc/ADR.md | 67 +++ src/components/select/bl-select.css | 14 +- src/components/select/bl-select.stories.mdx | 20 +- src/components/select/bl-select.test.ts | 119 +++- src/components/select/bl-select.ts | 58 +- src/components/select/doc/ADR.md | 63 ++ src/components/select/doc/Accessibility.md | 13 + src/components/spinner/bl-spinner.css | 32 + src/components/spinner/bl-spinner.stories.mdx | 123 ++++ src/components/spinner/bl-spinner.test.ts | 102 ++++ src/components/spinner/bl-spinner.ts | 57 ++ .../split-button/bl-split-button.ts | 9 + src/components/split-button/doc/ADR.md | 71 +++ src/components/switch/doc/ADR.md | 63 ++ src/components/tab-group/doc/ADR.md | 119 ++++ src/components/table/bl-table.stories.mdx | 111 ++++ src/components/table/bl-table.test.ts | 92 +++ src/components/table/bl-table.ts | 10 +- src/components/table/doc/ADR.md | 104 ++++ .../table/table-row/bl-table-row.ts | 4 + src/components/textarea/doc/ADR.md | 64 ++ src/components/tooltip/bl-tooltip.stories.mdx | 15 + src/components/tooltip/bl-tooltip.test.ts | 50 ++ src/components/tooltip/bl-tooltip.ts | 64 +- src/components/tooltip/doc/ADR.md | 0 src/localization.ts | 2 +- src/utilities/asset-paths.test.ts | 8 +- src/utilities/asset-paths.ts | 8 +- src/utilities/elements.ts | 10 + tsconfig.json | 1 + 457 files changed, 7310 insertions(+), 1366 deletions(-) delete mode 100644 docs/design-system/adding-a-new-icon.stories.mdx create mode 100644 examples/input-mask-react/.eslintrc.cjs create mode 100644 examples/input-mask-react/.gitignore create mode 100644 examples/input-mask-react/.prettierrc create mode 100644 examples/input-mask-react/README.md create mode 100644 examples/input-mask-react/index.html create mode 100644 examples/input-mask-react/package.json create mode 100644 examples/input-mask-react/src/examples/Root.jsx create mode 100644 examples/input-mask-react/src/examples/imask/IMask.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/InputAmountPostfix/InputAmountPostfix.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/InputPhoneKazakhstan/InputPhoneKazakhstan.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/InputPhoneUSA/InputPhoneUSA.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/InputPricePrefix/InputPricePrefix.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/InputPricePrefixDecimals/InputPricePrefixDecimals.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/InputWithPlaceholderCVC/InputWithPlaceholderCVC.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/InputWithPlaceholderDate/InputWithPlaceholderDate.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/InputWithPlaceholderPhone/InputWithPlaceholderPhone.jsx create mode 100644 examples/input-mask-react/src/examples/imask/components/TextArea/TextArea.jsx create mode 100644 examples/input-mask-react/src/examples/imask/hooks/index.js create mode 100644 examples/input-mask-react/src/examples/imask/hooks/useIMaskWithObserver.js create mode 100644 examples/input-mask-react/src/examples/maskito/Maskito.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputPhoneKazakhstan/InputPhoneKazakhstan.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputPhoneKazakhstan/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputPhoneUSA/InputPhoneUSA.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputPhoneUSA/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPlaceholderCVC/InputWithPlaceholderCVC.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPlaceholderCVC/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPlaceholderDate/InputWithPlaceholderDate.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPlaceholderDate/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPlaceholderPhone/InputWithPlaceholderPhone.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPlaceholderPhone/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPostfixByPatternMaskExpression/InputWithPostfixByPatternMaskExpression.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPostfixByPatternMaskExpression/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPostfixByPostProcessor/InputWithPostfixByPostProcessor.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPostfixByPostProcessor/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPrefixByPatternMaskExpression/InputWithPrefixByPatternMaskExpression.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPrefixByPatternMaskExpression/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPrefixByPostprocessor/InputWithPrefixByPostprocessor.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/InputWithPrefixByPostprocessor/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/components/TextArea/TextArea.jsx create mode 100644 examples/input-mask-react/src/examples/maskito/components/TextArea/mask.js create mode 100644 examples/input-mask-react/src/examples/maskito/helpers/elementPredicate.js create mode 100644 examples/input-mask-react/src/examples/maskito/helpers/index.js create mode 100644 examples/input-mask-react/src/main.jsx create mode 100644 examples/input-mask-react/src/styles/global.css create mode 100644 examples/input-mask-react/vite.config.js create mode 100644 examples/input-mask-vue/.gitignore create mode 100644 examples/input-mask-vue/README.md create mode 100644 examples/input-mask-vue/index.html create mode 100644 examples/input-mask-vue/package.json create mode 100644 examples/input-mask-vue/src/App.vue create mode 100644 examples/input-mask-vue/src/Home.vue create mode 100644 examples/input-mask-vue/src/examples/imask/IMask.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/InputAmountPostfix/InputAmountPostfix.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/InputPhoneKazakhstan/InputPhoneKazakhstan.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/InputPhoneUSA/InputPhoneUSA.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/InputPricePrefix/InputPricePrefix.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/InputPricePrefixDecimals/InputPricePrefixDecimals.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/InputWithPlaceholderCVC/InputWithPlaceholderCVC.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/InputWithPlaceholderDate/InputWithPlaceholderDate.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/InputWithPlaceholderPhone/InputWithPlaceholderPhone.vue create mode 100644 examples/input-mask-vue/src/examples/imask/components/TextArea/TextArea.vue create mode 100644 examples/input-mask-vue/src/examples/imask/hooks/useIMaskWithObserver.js create mode 100644 examples/input-mask-vue/src/examples/maskito/Maskito.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputPhoneKazakhstan/InputPhoneKazakhstan.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputPhoneKazakhstan/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputPhoneUSA/InputPhoneUSA.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputPhoneUSA/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPlaceholderCVC/InputWithPlaceholderCVC.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPlaceholderCVC/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPlaceholderDate/InputWithPlaceholderDate.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPlaceholderDate/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPlaceholderPhone/InputWithPlaceholderPhone.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPlaceholderPhone/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPostfixByPatternMaskExpression/InputWithPostfixByPatternMaskExpression.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPostfixByPatternMaskExpression/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPostfixByPostProcessor/InputWithPostfixByPostProcessor.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPostfixByPostProcessor/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPrefixByPatternMaskExpression/InputWithPrefixByPatternMaskExpression.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPrefixByPatternMaskExpression/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPrefixByPostprocessor/InputWithPrefixByPostprocessor.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/InputWithPrefixByPostprocessor/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/components/TextArea/TextArea.vue create mode 100644 examples/input-mask-vue/src/examples/maskito/components/TextArea/mask.js create mode 100644 examples/input-mask-vue/src/examples/maskito/helpers/elementPredicate.js create mode 100644 examples/input-mask-vue/src/examples/maskito/helpers/index.js create mode 100644 examples/input-mask-vue/src/main.js create mode 100644 examples/input-mask-vue/src/router.js create mode 100644 examples/input-mask-vue/src/style.css create mode 100644 examples/input-mask-vue/vite.config.js create mode 100644 examples/input-mask/.gitignore create mode 100644 examples/input-mask/README.md create mode 100644 examples/input-mask/imask/index.html create mode 100644 examples/input-mask/index.html create mode 100644 examples/input-mask/maskito/index.html create mode 100644 examples/input-mask/package.json create mode 100644 examples/input-mask/src/examples/imask/components/index.ts create mode 100644 examples/input-mask/src/examples/imask/components/inputAmountPostfix/inputAmountPostfix.ts create mode 100644 examples/input-mask/src/examples/imask/components/inputPhoneKazakhstan/inputPhoneKazakhstan.ts create mode 100644 examples/input-mask/src/examples/imask/components/inputPhoneUSA/inputPhoneUSA.ts create mode 100644 examples/input-mask/src/examples/imask/components/inputPricePrefix/inputPricePrefix.ts create mode 100644 examples/input-mask/src/examples/imask/components/inputPricePrefixDecimals/inputPricePrefixDecimals.ts create mode 100644 examples/input-mask/src/examples/imask/components/inputWithPlaceholderCVC/inputWithPlaceholderCVC.ts create mode 100644 examples/input-mask/src/examples/imask/components/inputWithPlaceholderDate/inputWithPlaceholderDate.ts create mode 100644 examples/input-mask/src/examples/imask/components/inputWithPlaceholderPhone/inputWithPlaceholderPhone.ts create mode 100644 examples/input-mask/src/examples/imask/components/textarea/textarea.ts create mode 100644 examples/input-mask/src/examples/imask/index.ts create mode 100644 examples/input-mask/src/examples/maskito/components/index.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputPhoneKazakhstan/inputPhoneKazakhstan.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputPhoneKazakhstan/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputPhoneUSA/inputPhoneUSA.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputPhoneUSA/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPlaceholderCVC/inputWithPlaceholderCVC.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPlaceholderCVC/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPlaceholderDate/inputWithPlaceholderDate.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPlaceholderDate/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPlaceholderPhone/inputWithPlaceholderPhone.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPlaceholderPhone/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPostfixByPatternMaskExpression/inputWithPostfixByPatternMaskExpression.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPostfixByPatternMaskExpression/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPostfixByPostprocessor/inputWithPostfixByPostprocessor.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPostfixByPostprocessor/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPrefixByPatternMaskExpression/inputWithPrefixByPatternMaskExpression.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPrefixByPatternMaskExpression/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPrefixByPostprocessor/inputWithPrefixByPostprocessor.ts create mode 100644 examples/input-mask/src/examples/maskito/components/inputWithPrefixByPostprocessor/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/textarea/mask.ts create mode 100644 examples/input-mask/src/examples/maskito/components/textarea/textarea.ts create mode 100644 examples/input-mask/src/examples/maskito/index.ts create mode 100644 examples/input-mask/src/styles/global.css create mode 100644 examples/input-mask/src/vite-env.d.ts create mode 100644 examples/input-mask/tsconfig.json create mode 100644 examples/input-mask/vite.config.js create mode 100644 examples/next-app-router-ssr/.eslintrc.json create mode 100644 examples/next-app-router-ssr/.gitignore create mode 100644 examples/next-app-router-ssr/README.md create mode 100644 examples/next-app-router-ssr/next.config.mjs create mode 100644 examples/next-app-router-ssr/package.json create mode 100644 examples/next-app-router-ssr/public/next.svg create mode 100644 examples/next-app-router-ssr/public/vercel.svg create mode 100644 examples/next-app-router-ssr/src/app/favicon.ico create mode 100644 examples/next-app-router-ssr/src/app/globals.css create mode 100644 examples/next-app-router-ssr/src/app/layout.tsx create mode 100644 examples/next-app-router-ssr/src/app/page.module.css create mode 100644 examples/next-app-router-ssr/src/app/page.tsx create mode 100644 examples/next-app-router-ssr/src/components/Button.tsx create mode 100644 examples/next-app-router-ssr/tsconfig.json create mode 100644 src/components/accordion-group/doc/ADR.md create mode 100644 src/components/alert/doc/ADR.md create mode 100644 src/components/badge/doc/ADR.md create mode 100644 src/components/button/doc/ADR.md create mode 100644 src/components/calendar/bl-calendar.constant.ts create mode 100644 src/components/calendar/bl-calendar.css create mode 100644 src/components/calendar/bl-calendar.stories.mdx create mode 100644 src/components/calendar/bl-calendar.ts create mode 100644 src/components/calendar/bl-calendar.types.ts create mode 100644 src/components/checkbox-group/doc/ADR.md create mode 100644 src/components/dialog/doc/ADR.md create mode 100644 src/components/drawer/doc/ADR.md create mode 100644 src/components/dropdown/doc/ADR.md create mode 100644 src/components/icon/doc/ADR.md delete mode 100644 src/components/icon/icons/academy.svg delete mode 100644 src/components/icon/icons/account.svg delete mode 100644 src/components/icon/icons/add_note.svg delete mode 100644 src/components/icon/icons/add_part.svg delete mode 100644 src/components/icon/icons/add_photo.svg delete mode 100644 src/components/icon/icons/add_product.svg delete mode 100644 src/components/icon/icons/alert.svg delete mode 100644 src/components/icon/icons/announcement.svg delete mode 100644 src/components/icon/icons/archive.svg delete mode 100644 src/components/icon/icons/arrow_down.svg delete mode 100644 src/components/icon/icons/arrow_left.svg delete mode 100644 src/components/icon/icons/arrow_right.svg delete mode 100644 src/components/icon/icons/arrow_up.svg delete mode 100644 src/components/icon/icons/attach.svg delete mode 100644 src/components/icon/icons/award.svg delete mode 100644 src/components/icon/icons/back.svg delete mode 100644 src/components/icon/icons/back_fill.svg delete mode 100644 src/components/icon/icons/badge.svg delete mode 100644 src/components/icon/icons/barcode.svg delete mode 100644 src/components/icon/icons/bill.svg delete mode 100644 src/components/icon/icons/book.svg delete mode 100644 src/components/icon/icons/browser.svg delete mode 100644 src/components/icon/icons/burger.svg delete mode 100644 src/components/icon/icons/calendar.svg delete mode 100644 src/components/icon/icons/camera.svg delete mode 100644 src/components/icon/icons/camera_off.svg delete mode 100644 src/components/icon/icons/campaign.svg delete mode 100644 src/components/icon/icons/change.svg delete mode 100644 src/components/icon/icons/change_fill.svg delete mode 100644 src/components/icon/icons/chart.svg delete mode 100644 src/components/icon/icons/chatbot.svg delete mode 100644 src/components/icon/icons/check.svg delete mode 100644 src/components/icon/icons/check_fill.svg delete mode 100644 src/components/icon/icons/clock.svg delete mode 100644 src/components/icon/icons/close.svg delete mode 100644 src/components/icon/icons/close_fill.svg delete mode 100644 src/components/icon/icons/code.svg delete mode 100644 src/components/icon/icons/coin.svg delete mode 100644 src/components/icon/icons/compass.svg delete mode 100644 src/components/icon/icons/complain.svg delete mode 100644 src/components/icon/icons/confetti.svg delete mode 100644 src/components/icon/icons/copy.svg delete mode 100644 src/components/icon/icons/copy_checked.svg delete mode 100644 src/components/icon/icons/coupon.svg delete mode 100644 src/components/icon/icons/delete.svg delete mode 100644 src/components/icon/icons/desktop.svg delete mode 100644 src/components/icon/icons/desktop_filled.svg delete mode 100644 src/components/icon/icons/dialog.svg delete mode 100644 src/components/icon/icons/disable.svg delete mode 100644 src/components/icon/icons/dislike.svg delete mode 100644 src/components/icon/icons/document.svg delete mode 100644 src/components/icon/icons/document_search.svg delete mode 100644 src/components/icon/icons/donation.svg delete mode 100644 src/components/icon/icons/download.svg delete mode 100644 src/components/icon/icons/drag_and_drop.svg delete mode 100644 src/components/icon/icons/edit.svg delete mode 100644 src/components/icon/icons/excel.svg delete mode 100644 src/components/icon/icons/exit.svg delete mode 100644 src/components/icon/icons/expand.svg delete mode 100644 src/components/icon/icons/export.svg delete mode 100644 src/components/icon/icons/express.svg delete mode 100644 src/components/icon/icons/express_delivery.svg delete mode 100644 src/components/icon/icons/express_furniture.svg delete mode 100644 src/components/icon/icons/external_link.svg delete mode 100644 src/components/icon/icons/external_share.svg delete mode 100644 src/components/icon/icons/eye_off.svg delete mode 100644 src/components/icon/icons/eye_on.svg delete mode 100644 src/components/icon/icons/facebook.svg delete mode 100644 src/components/icon/icons/filter.svg delete mode 100644 src/components/icon/icons/finance_accounting.svg delete mode 100644 src/components/icon/icons/fire.svg delete mode 100644 src/components/icon/icons/flag.svg delete mode 100644 src/components/icon/icons/flash.svg delete mode 100644 src/components/icon/icons/flash_fill.svg delete mode 100644 src/components/icon/icons/forward.svg delete mode 100644 src/components/icon/icons/full_size.svg delete mode 100644 src/components/icon/icons/gift.svg delete mode 100644 src/components/icon/icons/global_export.svg delete mode 100644 src/components/icon/icons/globe.svg delete mode 100644 src/components/icon/icons/go_forward.svg delete mode 100644 src/components/icon/icons/graphic.svg delete mode 100644 src/components/icon/icons/graphic_decrease.svg delete mode 100644 src/components/icon/icons/group_of_people.svg delete mode 100644 src/components/icon/icons/growth.svg delete mode 100644 src/components/icon/icons/hamburger_menu.svg delete mode 100644 src/components/icon/icons/handshake.svg delete mode 100644 src/components/icon/icons/happy.svg delete mode 100644 src/components/icon/icons/heart.svg delete mode 100644 src/components/icon/icons/heart_fill.svg delete mode 100644 src/components/icon/icons/heartbeat.svg delete mode 100644 src/components/icon/icons/help.svg delete mode 100644 src/components/icon/icons/history.svg delete mode 100644 src/components/icon/icons/home.svg delete mode 100644 src/components/icon/icons/hourglass.svg delete mode 100644 src/components/icon/icons/image.svg delete mode 100644 src/components/icon/icons/incognito.svg delete mode 100644 src/components/icon/icons/info.svg delete mode 100644 src/components/icon/icons/instagram.svg delete mode 100644 src/components/icon/icons/label.svg delete mode 100644 src/components/icon/icons/left_sided_arrow.svg delete mode 100644 src/components/icon/icons/light_bulb.svg delete mode 100644 src/components/icon/icons/like.svg delete mode 100644 src/components/icon/icons/link.svg delete mode 100644 src/components/icon/icons/listing.svg delete mode 100644 src/components/icon/icons/live_monitor.svg delete mode 100644 src/components/icon/icons/live_support.svg delete mode 100644 src/components/icon/icons/loading.svg delete mode 100644 src/components/icon/icons/lock.svg delete mode 100644 src/components/icon/icons/magic_wand.svg delete mode 100644 src/components/icon/icons/mail.svg delete mode 100644 src/components/icon/icons/mail_opened.svg delete mode 100644 src/components/icon/icons/map.svg delete mode 100644 src/components/icon/icons/market.svg delete mode 100644 src/components/icon/icons/market_order_back.svg delete mode 100644 src/components/icon/icons/market_order_cancel.svg delete mode 100644 src/components/icon/icons/market_order_change.svg delete mode 100644 src/components/icon/icons/market_order_check.svg delete mode 100644 src/components/icon/icons/market_processing.svg delete mode 100644 src/components/icon/icons/meal_bag.svg delete mode 100644 src/components/icon/icons/medal.svg delete mode 100644 src/components/icon/icons/message.svg delete mode 100644 src/components/icon/icons/metric_decrease.svg delete mode 100644 src/components/icon/icons/metric_increase.svg delete mode 100644 src/components/icon/icons/metric_minus.svg delete mode 100644 src/components/icon/icons/microphone.svg delete mode 100644 src/components/icon/icons/microphone_off.svg delete mode 100644 src/components/icon/icons/minus.svg delete mode 100644 src/components/icon/icons/minus_fill.svg delete mode 100644 src/components/icon/icons/mobile.svg delete mode 100644 src/components/icon/icons/mobile_fill.svg delete mode 100644 src/components/icon/icons/mobile_settings.svg delete mode 100644 src/components/icon/icons/money.svg delete mode 100644 src/components/icon/icons/money_transfer.svg delete mode 100644 src/components/icon/icons/motorcycle.svg delete mode 100644 src/components/icon/icons/motorcycle_check.svg delete mode 100644 src/components/icon/icons/new_store.svg delete mode 100644 src/components/icon/icons/normal.svg delete mode 100644 src/components/icon/icons/notice.svg delete mode 100644 src/components/icon/icons/notification.svg delete mode 100644 src/components/icon/icons/offers.svg delete mode 100644 src/components/icon/icons/order.svg delete mode 100644 src/components/icon/icons/order_back.svg delete mode 100644 src/components/icon/icons/order_box.svg delete mode 100644 src/components/icon/icons/order_boxes.svg delete mode 100644 src/components/icon/icons/order_cancel.svg delete mode 100644 src/components/icon/icons/order_check.svg delete mode 100644 src/components/icon/icons/order_return.svg delete mode 100644 src/components/icon/icons/order_settings.svg delete mode 100644 src/components/icon/icons/order_time.svg delete mode 100644 src/components/icon/icons/order_tracking.svg delete mode 100644 src/components/icon/icons/paper.svg delete mode 100644 src/components/icon/icons/partial_approve.svg delete mode 100644 src/components/icon/icons/pause.svg delete mode 100644 src/components/icon/icons/pause_fill.svg delete mode 100644 src/components/icon/icons/people.svg delete mode 100644 src/components/icon/icons/phone.svg delete mode 100644 src/components/icon/icons/phone_settings.svg delete mode 100644 src/components/icon/icons/photo.svg delete mode 100644 src/components/icon/icons/photo_off.svg delete mode 100644 src/components/icon/icons/pie_chart.svg delete mode 100644 src/components/icon/icons/pie_chart_report.svg delete mode 100644 src/components/icon/icons/pin.svg delete mode 100644 src/components/icon/icons/play.svg delete mode 100644 src/components/icon/icons/play_fill.svg delete mode 100644 src/components/icon/icons/plus.svg delete mode 100644 src/components/icon/icons/plus_fill.svg delete mode 100644 src/components/icon/icons/preview.svg delete mode 100644 src/components/icon/icons/price_settings.svg delete mode 100644 src/components/icon/icons/print.svg delete mode 100644 src/components/icon/icons/product.svg delete mode 100644 src/components/icon/icons/profile.svg delete mode 100644 src/components/icon/icons/profile_check.svg delete mode 100644 src/components/icon/icons/profile_star.svg delete mode 100644 src/components/icon/icons/puzzle.svg delete mode 100644 src/components/icon/icons/qr.svg delete mode 100644 src/components/icon/icons/report.svg delete mode 100644 src/components/icon/icons/review.svg delete mode 100644 src/components/icon/icons/right_sided_arrow.svg delete mode 100644 src/components/icon/icons/rocket.svg delete mode 100644 src/components/icon/icons/rotate.svg delete mode 100644 src/components/icon/icons/sad.svg delete mode 100644 src/components/icon/icons/save.svg delete mode 100644 src/components/icon/icons/search.svg delete mode 100644 src/components/icon/icons/send.svg delete mode 100644 src/components/icon/icons/send_mail.svg delete mode 100644 src/components/icon/icons/services.svg delete mode 100644 src/components/icon/icons/settings.svg delete mode 100644 src/components/icon/icons/share.svg delete mode 100644 src/components/icon/icons/shopping_bag.svg delete mode 100644 src/components/icon/icons/shopping_bag_add.svg delete mode 100644 src/components/icon/icons/shopping_bag_back.svg delete mode 100644 src/components/icon/icons/shopping_bag_cancel.svg delete mode 100644 src/components/icon/icons/shopping_bag_discount.svg delete mode 100644 src/components/icon/icons/shopping_bag_return.svg delete mode 100644 src/components/icon/icons/sorting.svg delete mode 100644 src/components/icon/icons/sorting_asc.svg delete mode 100644 src/components/icon/icons/sorting_desc.svg delete mode 100644 src/components/icon/icons/sound_off.svg delete mode 100644 src/components/icon/icons/sound_on.svg delete mode 100644 src/components/icon/icons/split_money.svg delete mode 100644 src/components/icon/icons/star.svg delete mode 100644 src/components/icon/icons/star_double.svg delete mode 100644 src/components/icon/icons/star_fill.svg delete mode 100644 src/components/icon/icons/star_triple.svg delete mode 100644 src/components/icon/icons/stop.svg delete mode 100644 src/components/icon/icons/stop_fill.svg delete mode 100644 src/components/icon/icons/store.svg delete mode 100644 src/components/icon/icons/store_performance.svg delete mode 100644 src/components/icon/icons/suitcase.svg delete mode 100644 src/components/icon/icons/support.svg delete mode 100644 src/components/icon/icons/target.svg delete mode 100644 src/components/icon/icons/ticket.svg delete mode 100644 src/components/icon/icons/translation.svg delete mode 100644 src/components/icon/icons/truck.svg delete mode 100644 src/components/icon/icons/turn_back.svg delete mode 100644 src/components/icon/icons/turn_back_fill.svg delete mode 100644 src/components/icon/icons/two_sided_arrow.svg delete mode 100644 src/components/icon/icons/unlock.svg delete mode 100644 src/components/icon/icons/upload.svg delete mode 100644 src/components/icon/icons/user_management.svg delete mode 100644 src/components/icon/icons/vacation_mode.svg delete mode 100644 src/components/icon/icons/very_happy.svg delete mode 100644 src/components/icon/icons/very_sad.svg delete mode 100644 src/components/icon/icons/wallet.svg delete mode 100644 src/components/icon/icons/warehouse.svg delete mode 100644 src/components/icon/icons/warning.svg delete mode 100644 src/components/icon/icons/youtube.svg delete mode 100644 src/components/icon/icons/zoom_in.svg delete mode 100644 src/components/icon/icons/zoom_out.svg create mode 100644 src/components/input/doc/ADR.md create mode 100644 src/components/notification/doc/ADR.md create mode 100644 src/components/pagination/doc/ADR.md create mode 100644 src/components/popover/doc/ADR.md create mode 100644 src/components/progress-indicator/doc/ADR.md create mode 100644 src/components/radio-group/doc/ADR.md create mode 100644 src/components/select/doc/ADR.md create mode 100644 src/components/select/doc/Accessibility.md create mode 100644 src/components/spinner/bl-spinner.css create mode 100644 src/components/spinner/bl-spinner.stories.mdx create mode 100644 src/components/spinner/bl-spinner.test.ts create mode 100644 src/components/spinner/bl-spinner.ts create mode 100644 src/components/split-button/doc/ADR.md create mode 100644 src/components/switch/doc/ADR.md create mode 100644 src/components/tab-group/doc/ADR.md create mode 100644 src/components/table/doc/ADR.md create mode 100644 src/components/textarea/doc/ADR.md create mode 100644 src/components/tooltip/doc/ADR.md diff --git a/.eslintignore b/.eslintignore index 0b91df52..a887baa4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,3 +12,4 @@ storybook-static/ .bin/ .docksal/ src/generated/ +examples/ diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 782a0ad7..0063f79f 100644 --- a/.github/dependabot.yml +++ b/.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" diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml index 379bb3ea..a8b3b5f5 100644 --- a/.github/workflows/publish-storybook.yml +++ b/.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 diff --git a/.prettierignore b/.prettierignore index dd6da5e5..7927729d 100644 --- a/.prettierignore +++ b/.prettierignore @@ -23,3 +23,4 @@ docs/ .bin/ .docksal/ *.test.ts +examples/ diff --git a/README.md b/README.md index 768bd74b..29e1ffa5 100644 --- a/README.md +++ b/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) diff --git a/commitlint.config.cjs b/commitlint.config.cjs index a3365520..515a25f7 100644 --- a/commitlint.config.cjs +++ b/commitlint.config.cjs @@ -33,6 +33,7 @@ module.exports = { "textarea", "popover", "notification", + "calendar", "table", "split-button", ], diff --git a/custom-elements-manifest.config.mjs b/custom-elements-manifest.config.mjs index 2557a304..510aff2c 100644 --- a/custom-elements-manifest.config.mjs +++ b/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, diff --git a/docs/design-system/adding-a-new-icon.stories.mdx b/docs/design-system/adding-a-new-icon.stories.mdx deleted file mode 100644 index 0e0b1f00..00000000 --- a/docs/design-system/adding-a-new-icon.stories.mdx +++ /dev/null @@ -1,56 +0,0 @@ -import { Meta } from '@storybook/blocks'; -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'; - - - -# Adding New Icons to Baklava (For Designers) - -## Prerequisities - -* You need to have a [GitHub account](https://github.com/signup). -* You need to be a contributer in our project. (Otherwise you call follow steps below by first forking project) - -## Steps - -1. Go to https://github.dev/Trendyol/baklava/tree/next In your browser you'll see Visual Studio Code in your browser with `next` branch (our default branch) of Baklava. -1. Use three dot menu and `Branch` -> `Create Branch in Source Control tab - - - -3. It will ask your source branch. Pick `next`. Then press `Enter`. -1. It will ask the name of your new branch. Use `kebab-case` and give a name about what you'll add here. Example: `adding-marketing-icons` Press `Enter` -1. It will ask for a confirmation. Press `Switch to Branch`. Page will be refreshed and you'll be switched to your new branch. -1. On the Files tab, go to `src/components/icon/icons` folder. This folder is the place that we store our icon SVG files. - - - -7. Right-click to icons folder and pick `Upload...` then pick SVG files that you exported from Figma for new icon(s). -1. New files will be visible in green. You may need to rename the file. Icon SVG files should be in `snake_case`. All lowercase and underscore for word seperators. You can right-click to file and pick `Rename` for renaming them. -1. Open the new SVG file by clicking its name and replace `fill="#{someColorCode}"` with `fill="currentColor"`. This makes icon colors customizable in web pages. **Don't change `fill="none"`. It makes that layer or background transparent. -1. Open `src/components/icon/icon-list.ts` files by clicking its name. This file stores the list of icons to make them visible in our Storybook. Simply add the icons that you added to the alphabetically correct place. -1. Once you are done with editing SVG files and `icon-list.ts` file, go to Source Control tab. Use `+` icon on tab to add the files you changed for committing. - - - - - -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. - - - -13. Then go to https://github.com/Trendyol/baklava in a new tab. You'll see a notification with your new branch name like below: - - - -14. Click `Compare & pull request`. -1. Be sure `next` branch is selected in `target` dropdown above the PR creation form. PR title will automatically filled from your last commit message. Edit it if you need. Add extra information to the description if you have any more remarks. Then press `Create pull request`. - - - -16. Now you are basically done! Some automated tests will be done. Since you added a new icon, visual regression tests will fail and asks for a design review. You can do your review in Chromatic once tests are done (usually in a few minutes) and approve them if icon looks good in test screenshots. Then you'll wait for another review from repository maintainers to be able to merge PR to `next` branch. Once PR merged to `next` branch an automatic beta release will be done. Then once `next` branch merged to `main` branch, a stable release will be done and your new icon will be available all of the library users. diff --git a/docs/design-system/iconography.stories.mdx b/docs/design-system/iconography.stories.mdx index 0dca90f5..3a4bd7b4 100644 --- a/docs/design-system/iconography.stories.mdx +++ b/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'; - + -# 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 - - - { - icons.map((iconName) => ( - - - - )) - } - +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). diff --git a/docs/using-baklava-in-next.stories.mdx b/docs/using-baklava-in-next.stories.mdx index cba10f90..3297c47f 100644 --- a/docs/using-baklava-in-next.stories.mdx +++ b/docs/using-baklava-in-next.stories.mdx @@ -22,7 +22,7 @@ Include Baklava library from CDN to your project's `` section (in `layout. href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.1.0/dist/themes/default.css" /> - + + diff --git a/examples/input-mask-react/package.json b/examples/input-mask-react/package.json new file mode 100644 index 00000000..f7e64b24 --- /dev/null +++ b/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" + } +} diff --git a/examples/input-mask-react/src/examples/Root.jsx b/examples/input-mask-react/src/examples/Root.jsx new file mode 100644 index 00000000..80752137 --- /dev/null +++ b/examples/input-mask-react/src/examples/Root.jsx @@ -0,0 +1,20 @@ +import { Link } from 'react-router-dom'; + +export default function Root() { + return ( +
+

Input Masking Libraries & Baklava Integration Examples

+ + +
+ ); +} diff --git a/examples/input-mask-react/src/examples/imask/IMask.jsx b/examples/input-mask-react/src/examples/imask/IMask.jsx new file mode 100644 index 00000000..15003e34 --- /dev/null +++ b/examples/input-mask-react/src/examples/imask/IMask.jsx @@ -0,0 +1,66 @@ +import { Suspense } from 'react'; +import InputPhoneUSA from './components/InputPhoneUSA/InputPhoneUSA'; +import InputPhoneKazakhstan from './components/InputPhoneKazakhstan/InputPhoneKazakhstan'; +import TextArea from './components/TextArea/TextArea'; +import InputPricePrefix from './components/InputPricePrefix/InputPricePrefix'; +import InputAmountPostfix from './components/InputAmountPostfix/InputAmountPostfix'; +import InputPricePrefixDecimals from './components/InputPricePrefixDecimals/InputPricePrefixDecimals'; +import InputWithPlaceholderCVC from './components/InputWithPlaceholderCVC/InputWithPlaceholderCVC'; +import InputWithPlaceholderPhone from './components/InputWithPlaceholderPhone/InputWithPlaceholderPhone'; +import InputWithPlaceholderDate from './components/InputWithPlaceholderDate/InputWithPlaceholderDate'; + +export default function IMask() { + return ( + loading...}> +
+

Masked Inputs with Baklava & IMask

+ +

Phone - USA:

+
+ + +
+ +

Phone - Kazakhstan:

+
+ + +
+ +

Text Area:

+
+