Skip to content

Commit

Permalink
Merge branch 'next' into input-prevent-keydown
Browse files Browse the repository at this point in the history
  • Loading branch information
leventozen authored Jan 11, 2024
2 parents 37c214b + a99ff41 commit c9e0ea4
Show file tree
Hide file tree
Showing 74 changed files with 10,270 additions and 5,960 deletions.
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug_report.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ body:
attributes:
label: Baklava Version
description: What version of Baklava are you using?
placeholder: 2.1.0-beta.7
placeholder: 2.3.0-beta.7
validations:
required: false
- type: textarea
Expand Down
1 change: 1 addition & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"trailingComma": "es5",
"useTabs": false,
"importOrder": [
"^react",
"^lit",
"<THIRD_PARTY_MODULES>",
"^[./]",
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/themes/default.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/baklava.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/themes/default.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
```

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.
Expand Down
55 changes: 28 additions & 27 deletions commitlint.config.cjs
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
module.exports = {
extends: ['@commitlint/config-conventional'],
extends: ["@commitlint/config-conventional"],
rules: {
'scope-enum': [
"scope-enum": [
2,
'always',
"always",
[
'storybook',
'design',
'react',
'deps',
'deps-dev',
"storybook",
"design",
"react",
"deps",
"deps-dev",
// Components as scopes listed below
'button',
'icon',
'input',
'badge',
'tab',
'tooltip',
'progress-indicator',
'checkbox-group',
'checkbox',
'alert',
'select',
'pagination',
'radio',
'dialog',
'drawer',
'dropdown',
'switch',
'textarea',
'popover',
"button",
"icon",
"input",
"badge",
"tab",
"tooltip",
"progress-indicator",
"checkbox-group",
"checkbox",
"alert",
"select",
"pagination",
"radio",
"dialog",
"drawer",
"dropdown",
"switch",
"textarea",
"popover",
"notification",
],
],
},
Expand Down
115 changes: 86 additions & 29 deletions custom-elements-manifest.config.mjs
Original file line number Diff line number Diff line change
@@ -1,68 +1,125 @@
import { parse } from "comment-parser";

export default {
globs: ['src/components/**/!(*.test|*.stories).ts'],
exclude: ['src/**/*.css', 'src/components/icon/icon-list.ts'],
outdir: 'dist/',
globs: ["src/components/**/!(*.test|*.stories).ts"],
exclude: ["src/**/*.css", "src/components/icon/icon-list.ts"],
outdir: "dist/",
dev: false,
watch: false,
dependencies: false,
packagejson: true,
litelement: true,
plugins: [
{
name: 'filter',
name: "filter",
analyzePhase({ ts, node, moduleDoc }) {

const getKind = (kind) => {
switch(kind) {
const getKind = kind => {
switch (kind) {
case ts.SyntaxKind.StringKeyword: {
return 'string';
return "string";
}
}

return 'any';
}
return "any";
};

switch (node.kind) {
case ts.SyntaxKind.ClassDeclaration: {
const className = node.name.getText();
const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
const classDoc = moduleDoc?.declarations?.find(
declaration => declaration.name === className
);

if (node.typeParameters?.length > 0) {
classDoc.typeParameters = node.typeParameters.map((p) => ({
classDoc.typeParameters = node.typeParameters.map(p => ({
name: p.name.escapedText,
extends: p.constraint?.typeName.escapedText,
default: getKind(p.default.kind)
default: getKind(p.default.kind),
}));
}

if (classDoc?.members) {
const eventMembers = classDoc.members.filter(member => member.type?.text?.startsWith('EventDispatcher'));
const eventMembers = classDoc.members.filter(member =>
member.type?.text?.startsWith("EventDispatcher")
);

classDoc.events?.push(...eventMembers.map(({description, name, type}) => {
const eventMemberNode = node.members.find((member) => member.name.getText() === name);
const eventDecorator = eventMemberNode.decorators.find((decorator) => decorator.expression.expression.getText() === 'event');
classDoc.events?.push(
...eventMembers.map(({ description, name, type }) => {
const eventMemberNode = node.members.find(
member => member.name.getText() === name
);
const eventDecorator = eventMemberNode.decorators.find(
decorator => decorator.expression.expression.getText() === "event"
);

name = eventDecorator.expression.arguments[0]?.text || name;
name = eventDecorator.expression.arguments[0]?.text || name;

return {
type: {
text: `CustomEvent<${type.text.match(/EventDispatcher<(.*?)>$/s)[1]}>`
},
description,
name
}
}));
return {
type: {
text: `CustomEvent<${type.text.match(/EventDispatcher<(.*?)>$/s)[1]}>`,
},
description,
name,
};
})
);

// Remove events from properties
classDoc.members = classDoc.members.filter(member => member.type?.text?.startsWith('EventDispatcher'));
classDoc.members = classDoc.members.filter(member =>
member.type?.text?.startsWith("EventDispatcher")
);

// Remove private properties
classDoc.members = classDoc.members.filter(member => member.privacy !== 'private');
classDoc.members = classDoc.members.filter(member => member.privacy !== "private");
}
break;
}
}
},
}
},
{
name: "custom-tags",
analyzePhase({ ts, node, moduleDoc }) {
switch (node.kind) {
case ts.SyntaxKind.ClassDeclaration: {
const className = node.name.getText();
const classDoc = moduleDoc?.declarations?.find(
declaration => declaration.name === className
);
const customTags = ["tag", "summary", "cssproperty"];
let customComments = "/**";

node.jsDoc?.forEach(jsDoc => {
jsDoc?.tags?.forEach(tag => {
const tagName = tag.tagName.getText();

if (customTags.includes(tagName)) {
customComments += `\n * @${tagName} ${tag.comment}`;
}
});
});

// This is what allows us to map JSDOC comments to ReactWrappers.
classDoc["jsDoc"] = node.jsDoc?.map(jsDoc => jsDoc.getFullText()).join("\n");

const parsed = parse(`${customComments}\n */`);

if (!parsed.length) return;

parsed[0].tags?.forEach(t => {
if (!Array.isArray(classDoc[t.tag])) {
classDoc[t.tag] = [];
}

classDoc[t.tag].push({
name: t.name,
description: t.description,
type: t.type || undefined,
});
});
}
}
},
},
],
};
6 changes: 3 additions & 3 deletions docs/customizing-baklava-theme.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ instead of `themes/default.css` file. Like:

```html
<link rel="stylesheet" href="/styles/my-baklava-theme.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/baklava.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
```

With this opportunity you can use all of the Baklava components with your own branding colors, own selection of Font or different sizing values.
Expand All @@ -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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/themes/default.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/themes/default.css" />
<link rel="stylesheet" href="/styles/my-baklava-theme.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/baklava.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.3.0/dist/baklava.js"></script>
```

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.
Expand Down
5 changes: 5 additions & 0 deletions docs/design-system/colors.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ Baklava uses a list of defined color with some default values.
subtitle="Warning Color"
colors={{ '': 'var(--bl-color-warning)', '--highlight': 'var(--bl-color-warning-highlight)', '--contrast': 'var(--bl-color-warning-contrast)' }}
/>
<ColorItem
title="--bl-color-info"
subtitle="Info Color"
colors={{ '': 'var(--bl-color-info)', '--highlight': 'var(--bl-color-info-highlight)', '--contrast': 'var(--bl-color-info-contrast)' }}
/>
<ColorItem
title="--bl-color-neutral"
subtitle="Neutral Colors"
Expand Down
50 changes: 43 additions & 7 deletions docs/design-system/typography.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,32 @@ A display fonts is a font that is intended for use at large sizes for headings.

Heading fonts are used as larger, higher impact text, such as in a title or section header.

#### Heading 1

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-heading-1-regular`| Weight: 400 / Regular <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-regular)' }}>Heading 1 Regular</h1> |
| `--bl-font-heading-1-medium` | Weight: 500 / Medium <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-medium)' }}>Heading 1 Medium</h1> |
| `--bl-font-heading-1-semibold` | Weight: 600 / Semibold <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-semibold)' }}>Heading 1 Semibold</h1> |
| `--bl-font-heading-1-bold` | Weight: 700 / Bold <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-bold)' }}>Heading 1 Bold</h1> |

#### Heading 2

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-heading-2-regular`| Weight: 400 / Regular <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-regular)' }}>Heading 2 Regular</h1> |
| `--bl-font-heading-2-medium` | Weight: 500 / Medium <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-medium)' }}>Heading 2 Medium</h1> |
| `--bl-font-heading-2-semibold` | Weight: 600 / Semibold <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-semibold)' }}>Heading 2 Semibold</h1> |
| `--bl-font-heading-2-bold` | Weight: 700 / Bold <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-bold)' }}>Heading 2 Bold</h1> |

#### Heading 3

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-heading-1` | Weight: 300 / Light <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1)' }}>Heading 1</h1> |
| `--bl-font-heading-2` | Weight: 400 / Regular <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2)' }}>Heading 2</h1> |
| `--bl-font-heading-3` | Weight: 400 / Regular <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3)' }}>Heading 3</h1> |
| `--bl-font-heading-3-regular`| Weight: 400 / Regular <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-regular)' }}>Heading 3 Regular</h1> |
| `--bl-font-heading-3-medium` | Weight: 500 / Medium <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-medium)' }}>Heading 3 Medium</h1> |
| `--bl-font-heading-3-semibold` | Weight: 600 / Semibold <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-semibold)' }}>Heading 3 Semibold</h1> |
| `--bl-font-heading-3-bold` | Weight: 700 / Bold <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-bold)' }}>Heading 3 Bold</h1> |

## Sub Titles

Expand All @@ -54,7 +75,7 @@ Subtitles are smaller than headlines. They are typically reserved for medium-emp

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-title-2-regula` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-regular)' }}>Sub Title 2 Regular</h1> |
| `--bl-font-title-2-regular` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-regular)' }}>Sub Title 2 Regular</h1> |
| `--bl-font-title-2-medium` | Weight: 500 / Medium <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-medium)' }}>Sub Title 2 Medium</h1> |
| `--bl-font-title-2-semibold` | Weight: 600 / Semibold <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-semibold)' }}>Sub Title 2 Semibold</h1> |
| `--bl-font-title-2-bold` | Weight: 700 / Bold <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-bold)' }}>Sub Title 2 Bold</h1> |
Expand Down Expand Up @@ -82,11 +103,26 @@ Subtitles are smaller than headlines. They are typically reserved for medium-emp

Body text typically used for long-form writing as it works well for small text sizes.

#### Body Text 1

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-body-text-1-regular` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 18px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-1-regular)' }}>Form Body Text 1 Regular</h1> |
| `--bl-font-body-text-1-medium` | Weight: 500 / Medium <br/> Size: 16px / 1rem <br/> Height: 18px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-1-medium)' }}>Form Body Text 1 Medium</h1> |

#### Body Text 2

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-body-text-2-regular` | Weight: 400 / Regular <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-2-regular)' }}>Form Body Text 2 Regular</h1> |
| `--bl-font-body-text-2-medium` | Weight: 500 / Medium <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-2-medium)' }}>Form Body Text 2 Medium</h1> |

#### Body Text 3

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-body-text-1` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 18px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-1)' }}>Form Body Text 1</h1> |
| `--bl-font-body-text-2` | Weight: 400 / Regular <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-2)' }}>Form Body Text 2</h1> |
| `--bl-font-body-text-3` | Weight: 400 / Regular <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`)| <h1 style={{ font: 'var(--bl-font-body-text-3)' }}>Form Body Text 3</h1> |
| `--bl-font-body-text-3-regular` | Weight: 400 / Regular <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-3-regular)' }}>Form Body Text 3 Regular</h1> |
| `--bl-font-body-text-3-medium` | Weight: 500 / Medium <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-3-medium)' }}>Form Body Text 3 Medium</h1> |


## Captions
Expand Down
Loading

0 comments on commit c9e0ea4

Please sign in to comment.