Merge branch 'next' into feat/display-input-type-icons

Trendyol · Sep 27, 2023 · 93bfee5 · 93bfee5
2 parents 8f887a6 + a3c803e
commit 93bfee5
Show file tree

Hide file tree

Showing 8 changed files with 6,633 additions and 5,843 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,17 +80,17 @@
     "@custom-elements-manifest/analyzer": "^0.6.3",
     "@open-wc/testing": "^3.1.6",
     "@rollup/plugin-replace": "^4.0.0",
-    "@storybook/addon-a11y": "7.0.18",
-    "@storybook/addon-actions": "7.0.18",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "7.0.18",
-    "@storybook/addon-mdx-gfm": "^7.0.18",
-    "@storybook/addon-viewport": "^7.0.18",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/web-components": "7.0.18",
-    "@storybook/web-components-vite": "^7.0.18",
+    "@storybook/addon-a11y": "7.4.3",
+    "@storybook/addon-actions": "7.4.3",
+    "@storybook/addon-essentials": "7.4.3",
+    "@storybook/addon-interactions": "^7.4.3",
+    "@storybook/addon-links": "7.4.3",
+    "@storybook/addon-mdx-gfm": "^7.4.3",
+    "@storybook/addon-viewport": "^7.4.3",
+    "@storybook/jest": "^0.2.2",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/web-components": "7.4.3",
+    "@storybook/web-components-vite": "^7.4.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/estree": "1.0.0",
     "@types/prettier": "^2.6.4",
@@ -113,7 +113,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-lit": "^1.8.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-unused-imports": "^3.0.0",
     "eslint-plugin-wc": "^1.5.0",
     "globby": "^13.1.1",
@@ -126,7 +126,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-lit-css": "^4.0.0",
-    "storybook": "7.0.18",
+    "storybook": "7.4.3",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
     "ts-lit-plugin": "^1.2.1",

diff --git a/scripts/generate-react-exports.js b/scripts/generate-react-exports.js
@@ -9,13 +9,14 @@ const __dirname = path.dirname(__filename);
 
 const importStatements = [
   'import React from "react";',
-  'import { type EventName, createComponent } from "@lit-labs/react";',
+  'import { type EventName, createComponent, ReactWebComponent } from "@lit-labs/react";',
 
   // FIXME: These types should be determined automatically
   'import { ISelectOption } from "./components/select/bl-select"',
 ];
 
 const exportStatements = [];
+const eventStatements = [];
 
 const customElements = fs.readJSONSync(`${__dirname}/../dist/custom-elements.json`);
 const customElementsModules = customElements.modules;
@@ -24,45 +25,40 @@ const baklavaReactFileParts = [];
 for (const module of customElementsModules) {
   const { declarations, path } = module;
   const componentDeclaration = declarations.find(declaration => declaration.customElement === true);
-
   const { events, name: componentName, tagName: fileName, jsDoc } = componentDeclaration;
 
-  const eventNames = events
-    ? events.reduce((acc, curr) => {
-        acc[getReactEventName(curr.name)] = curr.name;
-        return acc;
-      }, {})
-    : {};
-
-  const eventTypes = events
-    ? `, {${events
-        .map(
-          event =>
-            `${getReactEventName(event.name)}: EventName<${cleanGenericTypes(
-              componentDeclaration.typeParameters,
-              event.type.text
-            )}>`
-        )
-        .join(", ")}}`
-    : "";
+  const eventNames = events?.reduce((acc, curr) => {
+    acc[getReactEventName(curr.name)] = curr.name;
+    return acc;
+  }, {}) || {};
+
+  const eventTypes = events?.map(event => {
+    const eventName = getReactEventName(event.name);
+    const eventType = cleanGenericTypes(componentDeclaration.typeParameters, event.type.text);
+    const predefinedEventName = `${componentName}${eventName.split("onBl")[1]}`;
+
+    eventStatements.push(`export declare type ${predefinedEventName} = ${eventType};`);
+    return `${eventName}: EventName<${predefinedEventName}>`;
+  }) || [];
 
   const importPath = path.replace(/^src\//, "").replace(/\.ts$/, "");
   const typeName = componentName + "Type";
-  const componentType = `${typeName}${eventTypes}`;
+  const formattedEventTypes = eventTypes.length ? `, {${eventTypes.join(", ")}}` : "";
+  const componentType = `${typeName}${formattedEventTypes}`;
 
   importStatements.push(`import type ${typeName} from "./${importPath}";`);
   exportStatements.push(`export declare type ${componentName} = ${typeName}`);
 
   const source = `
   ${jsDoc}
-  export const ${componentName}: import("@lit-labs/react").ReactWebComponent<${componentType}> = (
-    () => createComponent<${componentType}>({
-      react: React,
-      displayName: "${componentName}",
-      tagName: "${fileName}",
-      elementClass: customElements.get("${fileName}"),
-      events: ${JSON.stringify(eventNames)},
-    }));
+  export const ${componentName}: React.LazyExoticComponent<ReactWebComponent<${componentType}>> =
+  customElements.whenDefined('${fileName}').then(() => createComponent<${componentType}>({
+    react: React,
+    displayName: "${componentName}",
+    tagName: "${fileName}",
+    elementClass: customElements.get("${fileName}"),
+    events: ${JSON.stringify(eventNames)},
+  }));
   `;
 
   baklavaReactFileParts.push(source);
@@ -79,6 +75,7 @@ function writeBaklavaReactFile(fileContentParts) {
     `/* eslint-disable @typescript-eslint/ban-ts-comment */`,
     `// @ts-nocheck`,
     ...importStatements,
+    ...eventStatements,
     ...exportStatements,
     ...fileContentParts,
   ].join("\n\n");
@@ -92,8 +89,8 @@ function cleanGenericTypes(typeParameters, eventType) {
   if (!typeParameters?.length || typeParameters.length === 0) return eventType;
 
   const paramNames = typeParameters.map(param => param.name);
-  const paramNamesPattern = paramNames.map(name => `<${name}>|${name} \\| | \\| ${name}`).join('|');
-  const regex = new RegExp(paramNamesPattern, 'g');
+  const paramNamesPattern = paramNames.map(name => `<${name}>|${name} \\| | \\| ${name}`).join("|");
+  const regex = new RegExp(paramNamesPattern, "g");
 
-  return eventType.replace(regex, '');
+  return eventType.replace(regex, "");
 }
diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts
@@ -292,7 +292,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
   }
 
   protected async updated(changedProperties: PropertyValues) {
-    if (changedProperties.has("value")) {
+    if (changedProperties.size > 0) {
       this.setValue(this.value);
 
       await this.validationComplete;

diff --git a/src/components/select/bl-select.css b/src/components/select/bl-select.css
@@ -70,10 +70,11 @@
   -webkit-user-select: none;
   user-select: none;
   margin: 0;
-  width: 0;
+  width: auto;
   min-width: 100%;
 }
 
+.label,
 .placeholder {
   color: var(--placeholder-color);
   padding-left: var(--label-padding);
@@ -83,11 +84,17 @@
   text-overflow: ellipsis;
 }
 
+:host(:not([placeholder])) .placeholder,
 .select-wrapper.selected .placeholder,
 :host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder {
   display: none;
 }
 
+:host([label-fixed]) .label,
+:host(:not([label])) .label {
+  display: none;
+}
+
 .remove-all {
   display: none;
 }
@@ -219,7 +226,6 @@ bl-icon {
 
 legend,
 label {
-  max-width: max-content;
   padding: 0;
   white-space: nowrap;
   overflow: hidden;
@@ -234,6 +240,7 @@ label {
   right: calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));
   transition: all ease-in 0.1s;
   pointer-events: none;
+  opacity: 0;
   font: var(--bl-font-title-3-regular);
   font-size: var(--font-size);
   color: var(--placeholder-color);
@@ -252,13 +259,19 @@ legend span {
   visibility: visible;
 }
 
+:where(.selected) .label,
+:host(:not([placeholder]).select-open) .label {
+  display: none;
+}
+
 :where(.select-open, .selected) label {
   top: 0;
   transform: translateY(-50%);
   font: var(--bl-font-caption);
   color: var(--label-color);
   pointer-events: initial;
   right: var(--padding-horizontal);
+  opacity: 1;
 }
 
 :host([label]) :where(.select-open, .selected) legend {
@@ -275,6 +288,7 @@ legend span {
   pointer-events: initial;
   font: var(--bl-font-caption);
   color: var(--label-color);
+  opacity: 1;
 }
 
 :host([label-fixed]) legend {

diff --git a/src/components/select/bl-select.stories.mdx b/src/components/select/bl-select.stories.mdx
@@ -91,6 +91,7 @@ export const selectOpener = async ({ canvasElement }) => {
 
 export const SelectTemplate = (args) => html`<bl-select
     label=${ifDefined(args.label)}
+    class=${ifDefined(args.class)}
     ?label-fixed=${args.labelFixed}
     ?multiple=${args.multiple}
     ?clearable=${args.clearable}
@@ -101,7 +102,7 @@ export const SelectTemplate = (args) => html`<bl-select
     help-text=${ifDefined(args.helpText)}
     invalid-text=${ifDefined(args.customInvalidText)}
     placeholder=${ifDefined(args.placeholder)}
-    value=${ifDefined(args.value)}>${
+    .value=${ifDefined(args.value)}>${
   (args.options || defaultOptions).map((option) => html`
   <bl-select-option value=${ifDefined(option.value)} ?selected=${
     ( args.selected || []).includes(option.value) }>${option.label}</bl-select-option>`
@@ -114,6 +115,15 @@ ${SelectTemplate(args)}
 </form>
 `
 
+export const SelectWithStyleTemplate = (args) => html`
+<style>
+.${args.class} {
+  width: ${args.width};
+${ args.maxWidth ? `  max-width: ${args.maxWidth};\n` : ''}}
+</style>
+${SelectTemplate(args)}
+`
+
 # Select
 
 <bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/88)</bl-badge>
@@ -144,7 +154,7 @@ Selected options will be visible on input seperated by commas.
   <Story name="Multiple Select" args={{ placeholder: "Choose countries", multiple: true }} play={selectOpener}>
     {SelectTemplate.bind({})}
   </Story>
-  <Story name="Multiple Select initial selection" args={{ placeholder: "Choose countries", valueProp: ['nl'], multiple: true  }} play={selectOpener}>
+  <Story name="Multiple Select initial selection" args={{ placeholder: "Choose countries", value: ['nl'], multiple: true  }} play={selectOpener}>
     {SelectTemplate.bind({})}
   </Story>
 </Canvas>
@@ -356,6 +366,25 @@ Select have 3 size options: `small`, `medium` and `large`. `medium` size is defa
   </Story>
 </Canvas>
 
+## Select with auto width
+
+Select can be used with auto width. If you want to use select with auto width, you can set `width: auto` to the host element.
+
+<Canvas>
+  <Story name="Select Auto Width" args={{ label: 'Choose country', class: 'country-selector', width: 'auto' }}>
+    {SelectWithStyleTemplate.bind({})}
+  </Story>
+  <Story name="Select Auto Width default value" args={{ label: 'Choose country', value: 'de', class: 'country-selector-with-value', width: 'auto' }}>
+    {SelectWithStyleTemplate.bind({})}
+  </Story>
+  <Story name="Select Auto Width multiple" args={{ label: 'Choose country', multiple: true, value: ['tr','nl'], class: 'country-selector-multiple', width: 'auto' }}>
+    {SelectWithStyleTemplate.bind({})}
+  </Story>
+  <Story name="Select Auto Width multiple max-width" args={{ label: 'Choose country', multiple: true, value: ['tr','nl','de'], class: 'country-selector-multiple-many', width: 'auto', maxWidth: '150px' }}>
+    {SelectWithStyleTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ## Reference
 
 <ArgsTable of="bl-select" />
diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts
@@ -29,6 +29,7 @@ describe("bl-select", () => {
         >
           <legend><span></span></legend>
           <span class="placeholder"></span>
+          <span class="label"></span>
           <ul class="selected-options"></ul>
           <span class="additional-selection-count">
             +0

diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
@@ -320,6 +320,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
     >
       <legend><span>${this.label}</span></legend>
       <span class="placeholder">${this.placeholder}</span>
+      <span class="label">${this.label}</span>
       ${inputSelectedOptions}
       <span class="additional-selection-count">+${this._additionalSelectedOptionCount}</span>
       <div class="actions">