Trendyol · olkeoguz · Oct 13, 2022 · Oct 12, 2022 · Oct 12, 2022 · Oct 12, 2022
diff --git a/README.md b/README.md
@@ -6,14 +6,16 @@
 
 > This is a work-in-progress version. If you want to work on previous version (Grace) please check `main` branch.
 
-Baklava is a design system provided by [Trendyol](https://github.com/trendyol) to create a consistent UI/UX for app users. 
+Baklava is a design system provided by [Trendyol](https://github.com/trendyol) to create a consistent UI/UX for app users.
 
 Web implementation of the design system is created as native web components so it can be used within every type of web frameworks including Vue, React or Angular. Our target is providing a UI library that has neatly designed and developed for providing best possible user experience for the users of applications that uses Baklava DS.
 
 ## How to use
 
 Preferred way of using Baklava is using it via CDN. Just import library JS and CSS files to your main document like below:
 
+> **Since we are in beta version, there can be breaking changes in build. We don’t suggest you to use beta tag. Use versions instead.**
+
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/themes/default.css" />
 <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/baklava.js"></script>

diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx
@@ -21,11 +21,17 @@ React does not [compatible](https://custom-elements-everywhere.com/#react) with
 Install the NPM package to your project.
 
 ```bash
-npm install @trendyol/baklava
+npm install @trendyol/baklava@beta
 ```
 
 Include Baklava library from CDN to your project's `index.html` file's `<head>` section.
 
+> Baklava is currently in beta version. So, if you want to keep updated for new changes, you can add `@beta` tag like the example below.However, you can simply use any version you want by adding the version number.
+
+ <bl-alert variant="warning" icon>
+ Since we are in beta version, there can be breaking changes in build. We don’t suggest you to use beta tag. Use versions instead.
+ </bl-alert>
+
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/themes/default.css"/>
 <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/baklava.js"></script>
@@ -39,7 +45,7 @@ import { BlTooltip, BlButton } from "@trendyol/baklava/dist/baklava-react";
 function App() {
  return (
  <BlTooltip>
- <BlButton slot="tooltip-trigger" icon="info" text label="Show Info" />
+ <BlButton slot="tooltip-trigger" icon="info" label="Show Info" />
  Some extra information.
  </BlTooltip>
  );
@@ -57,7 +63,7 @@ If you want to include Baklava to your project bundle, you can import it via NPM
 Install the NPM package to your project.
 
 ```bash
-npm install @trendyol/baklava
+npm install @trendyol/baklava@beta
 ```
 
 Then import Baklava library and styles in a central place of your app. Like `main.jsx` file. You need to use provided `setIconPath` function to set icon location via CDN. Or you can download those icons to your project's asset folder and set the path manually.

diff --git a/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx
@@ -26,8 +26,11 @@ 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.
 
-> Baklava is currently in beta version. So, if you want to keep updated for new changes, you can add `@beta` tag like the example below.
- However, you can simply use any version you want by adding the version number.
+> Baklava is currently in beta version. So, if you want to keep updated for new changes, you can add `@beta` tag like the example below.However, you can simply use any version you want by adding the version number.
+
+ <bl-alert variant="warning" icon>
+ Since we are in beta version, there can be breaking changes in build. We don’t suggest you to use beta tag. Use versions instead.
+ </bl-alert>
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/themes/default.css"/>
@@ -36,7 +39,7 @@ To be able to use Baklava via CDN, you should add our default.css and baklava.js
 
 ### Via NPM
 
-To be able to use Baklava via npm, run ```npm install @trendyol/baklava```
+To be able to use Baklava via npm, run ```npm install @trendyol/baklava@beta```
 then,
 
 ```js
@@ -97,4 +100,4 @@ Also, you can add ignore rule as compiler options to your webpack or vite.
  }
  }
 }
-```
+```
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
  "description": "Trendyol Baklava Design System",
  "main": "dist/baklava.js",
  "module": "dist/baklava.js",
+ "types": "dist/baklava.d.ts",
  "publishConfig": {
  "access": "public"
  },
@@ -21,7 +22,7 @@
  "start": "npm run storybook:dev",
  "analyze": "cem analyze",
  "commit": "commit",
- "build": "del-cli dist/ && npm run analyze && npm run generate-react-exports && node scripts/build.js",
+ "build": "del-cli dist/ && npm run analyze && npm run generate-react-exports && tsc --emitDeclarationOnly && node scripts/build.js",
  "build-storybook": "NODE_ENV=production build-storybook -o storybook-static",
  "build-storybook-docs": "build-storybook --docs",
  "deploy-storybook": "storybook-to-ghpages --ci --source-branch=next --host-token-env-variable=GITHUB_TOKEN",

diff --git a/scripts/generate-react-exports.js b/scripts/generate-react-exports.js
@@ -1,19 +1,21 @@
 const fs = require('fs-extra');
-const prettier = require('prettier');
+
+const importStatements = [
+ "import React from 'react';",
+ "import { createComponent } from '@lit-labs/react';",
+];
 
 function writeBaklavaReactFile(fileContentParts) {
  let fileContentText = `
  /* eslint-disable @typescript-eslint/ban-ts-comment */
  // @ts-nocheck
- import React from 'react';
- import { createComponent } from '@lit-labs/react';
-
+ ${importStatements.join('\n')}
  ${fileContentParts.join('\n\n')}
  `;
 
  fs.writeFileSync(
  `${__dirname}/../src/baklava-react.ts`,
- prettier.format(fileContentText.trim(), { parser: 'babel', singleQuote: true })
+ fileContentText.trim()
  );
 }
 
@@ -27,7 +29,7 @@ const customElementsModules = customElements.modules;
 const baklavaReactFileParts = [];
 
 for (const module of customElementsModules) {
- const { declarations } = module;
+ const { declarations, path } = module;
  const { events, name: componentName, tagName: fileName } = declarations[0];
 
  const eventNames = events
@@ -37,8 +39,14 @@ for (const module of customElementsModules) {
  }, {})
  : {};
 
+ const importPath = path.replace(/^src\//, '').replace(/\.ts$/, '');
+ const Type = componentName + 'Type';
+
+ importStatements.push(`import type ${Type} from "./${importPath}";`);
+
  baklavaReactFileParts.push(
- `export const ${componentName} = createComponent(
+ `
+ export const ${componentName} = createComponent<${Type}>(
  React,
  '${fileName}',
  customElements.get('${fileName}'),

diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx
@@ -102,7 +102,7 @@ We have 3 variants for each button: **Primary**, **Secondary** and **Tertiary**.
 
 ### Primary Buttons
 
-Primary buttons ared used for main actions of the screens. Like a submit button in a form or main button of a dialog.It can has 4 different "kind"s. `default`, `neutral`, `success` and `danger`.
+Primary buttons are used for main actions of the screens. Like a submit button in a form or main button of a dialog.It can has 4 different "kind"s. `default`, `neutral`, `success` and `danger`.
 
 <Canvas>
  <Story name="Primary Buttons" args={{ content: 'Primary Button' }}>