refactor(icon): implement baklava-icons and remove icons folder (#898)

Also ignored examples workspace as it blocks commiting without installing in each project. Closes #530
Trendyol · Aug 1, 2024 · 60ffde6 · 60ffde6
1 parent a85292c
commit 60ffde6
Show file tree

Hide file tree

Showing 246 changed files with 58 additions and 1,224 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -12,3 +12,4 @@ storybook-static/
 .bin/
 .docksal/
 src/generated/
+examples/
diff --git a/.prettierignore b/.prettierignore
@@ -23,3 +23,4 @@ docs/
 .bin/
 .docksal/
 *.test.ts
+examples/
diff --git 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/docs/design-system/adding-a-new-icon.stories.mdx b/docs/design-system/adding-a-new-icon.stories.mdx
diff --git 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';
 
-<Meta title="Design System/Icons/Iconography" />
+<Meta title="Design System/Icons" />
 
-# Iconography
+# Baklava Icons
 
-* All icons are provided as SVGs
-* All icons are single color (Some have multiple layers with different opacity of same color)
-* All icons has square canvas (By default 24x24)
-* Icon names as in `snake_case`
-* Icons are for decorative purposes. Don't use them as a data in your documents (like an instructive image)
+Baklava Design System uses `@trendyol/baklava-icons` package for custom made icons.
 
-You can check [icon component](/docs/components-icon--single-icon) for usage information and interactive demos.
-
-## List of icons
-
-<IconGallery>
- {
- icons.map((iconName) => (
- <IconItem key={iconName} name={iconName}>
- <BlIcon name={iconName} />
- </IconItem>
- ))
- }
-</IconGallery>
+For detailed documentation and to explore the available icons, please visit our [icon documentation](https://trendyol.github.io/baklava-icons/?path=/docs/documentation-baklava-icons--icons).
diff --git 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
@@ -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

diff --git a/examples/input-mask-react/src/main.jsx b/examples/input-mask-react/src/main.jsx
@@ -4,7 +4,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import '@trendyol/baklava';
 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-icons@latest/icons');
 
 import './styles/global.css';
 

diff --git a/examples/input-mask-vue/src/main.js b/examples/input-mask-vue/src/main.js
@@ -1,15 +1,17 @@
 import { createApp } from 'vue';
 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-icons@latest/icons');
 
 import App from './App.vue';
+
 import router from './router';
 
 import '@trendyol/baklava/dist/themes/default.css';
 import './style.css';
 
-const app = createApp(App);
+const app =
+createApp(App)
 
 app.use(router);
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
  "@storybook/testing-library": "^0.2.2",
  "@storybook/web-components": "7.4.3",
  "@storybook/web-components-vite": "^7.4.3",
+ "@trendyol/baklava-icons": "^1.0.0",
  "@trivago/prettier-plugin-sort-imports": "^4.1.1",
  "@types/estree": "1.0.0",
  "@types/prettier": "^2.6.4",
@@ -139,5 +140,13 @@
  "typescript": "5.3.3",
  "wait-on": "^5.3.0"
  },
+ "peerDependencies": {
+ "@trendyol/baklava-icons": ">=1.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@trendyol/baklava-icons": {
+ "optional": true
+ }
+ },
  "customElements": "dist/custom-elements.json"
 }