diff --git a/README.md b/README.md
index c522a1df..eadfbabe 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
> 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.
@@ -14,6 +14,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:
+> **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
diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx
index fbb1ff86..b89d004d 100644
--- 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 `` 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.
+
+
+ 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
@@ -39,7 +45,7 @@ import { BlTooltip, BlButton } from "@trendyol/baklava/dist/baklava-react";
function App() {
return (
-
+
Some extra information.
);
@@ -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
index 469d690d..8b6e26cb 100644
--- 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.
+
+
+ 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
@@ -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.
}
}
}
-```
\ No newline at end of file
+```
diff --git a/package.json b/package.json
index 30382769..957ffedb 100644
--- 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
index 3bf30aa7..c33922ce 100644
--- 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
index 95c1c402..0275e0e8 100644
--- 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`.