Merge branch 'next' into main

Trendyol · May 2, 2024 · 799ae3e · 799ae3e
2 parents c49b425 + 8309185
commit 799ae3e
Show file tree

Hide file tree

Showing 80 changed files with 6,438 additions and 3,678 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -11,3 +11,4 @@ storybook-static/
 .octane-ci/
 .bin/
 .docksal/
+src/generated/
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1,2 @@
+# Following team members are responsible for the project and will be autoassigned to the PRs
+@Trendyol/baklava
diff --git a/.prettierignore b/.prettierignore
@@ -6,6 +6,7 @@ storybook-static/
 custom-elements.json
 component-list.json
 src/components.d.ts
+src/generated/
 src/baklava-react.ts
 *.md
 .history/

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -29,3 +29,31 @@ export const parameters = {
     },
   },
 };
+
+export const globalTypes = {
+  version: {
+    name: 'version',
+    description: 'Select version Stable/Beta',
+    toolbar: {
+      icon: 'branch',
+      items: [
+        { value: 'stable', icon: 'branch', title: 'Stable Version' },
+        { value: 'beta', icon: 'branch', title: 'Beta Version' },
+      ],
+      dynamicTitle: true,
+    },
+  },
+}
+
+
+export const decorators = [
+  (storyFn, context) => {
+    if (context.globals.version === 'stable' && window.parent.location.hostname.includes('next')) {
+      window.parent.location.assign('https://baklava.design' + window.parent.location.search);
+    }
+    if (context.globals.version === 'beta' && !window.parent.location.hostname.includes('next')) {
+      window.parent.location.assign('https://next.baklava.design' + window.parent.location.search);
+    }
+    return storyFn();
+  }
+];
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 <h1 align="center">Baklava Design System</h1>
 
-<p align="center">
+<p style="display:flex;flex-direction:row;gap:10px;justify-content:center;">
   <a href="https://www.npmjs.com/package/@trendyol/baklava">
     <img src="https://img.shields.io/npm/v/@trendyol/baklava.svg" alt="NPM Package Stable" />
   </a>

diff --git a/commitlint.config.cjs b/commitlint.config.cjs
@@ -11,6 +11,8 @@ module.exports = {
         "deps",
         "deps-dev",
         // Components as scopes listed below
+        "accordion",
+        "accordion-group",
         "button",
         "icon",
         "input",
@@ -31,6 +33,8 @@ module.exports = {
         "textarea",
         "popover",
         "notification",
+        "table",
+        "split-button",
       ],
     ],
   },

diff --git a/docs/localization.stories.mdx b/docs/localization.stories.mdx
@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Documentation/Localization" />
+
+# Localization
+
+Baklava comes equipped with built-in support for localization in both English (`en`) and Turkish (`tr`). It essentially examines the `lang` attribute of the `html` element and configures the locale accordingly. In the absence of a specified `lang` attribute, it defaults to English.
+To initialize localization, insert the following script at the head of your HTML file:
+
+```html
+<html lang="tr">
+  <head>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/localization.js"></script>
+  </head>
+
+  <body>
+    ...
+  </body>
+</html>
+```
+
+Utilizing a mutation observer, modifications to the lang attribute will automatically trigger updates across all localized components, seamlessly adapting them to the new language setting.
+
+## Submitting New Translations or Improvements
+
+If you wish to contribute new translations or enhancements to existing ones, kindly submit a pull request on GitHub. The translations can be found in the [translations](https://github.com/Trendyol/baklava/tree/next/translations) folder.
+
+To add a new translation, follow these steps:
+
+<ol>
+  <li>Add the language short code to `lit-localize.json`.</li>
+  <li>Execute `npm run localize:extract` to extract the new language file.</li>
+  <li>Update the newly created file in the translations folder.</li>
+  <li>Execute `npm run localize:build` to generate the new language file.</li>
+</ol>
+
+Submit a new pull request with the aforementioned changes.
+
+## Adding New Localized Texts
+
+To include localized texts, adhere to the following guidelines:
+
+* A component should have `@localized()` added to its decorator.
+* The `msg` function should possess a description in the format: *"bl-component: description of the message"*.
+* The `msg` function should feature a default value in English.
+* No property should have a default value in English; instead, it should be defined elsewhere in the code, preferably in the render section.
+
diff --git a/docs/using-baklava-in-next.stories.mdx b/docs/using-baklava-in-next.stories.mdx
@@ -0,0 +1,92 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Frameworks/Next" />
+
+# Using Baklava With Next
+
+Because Baklava uses static CDN and Next uses SSR, they are not compatible by default. We have 2 options. We can wait for the CDN to load before rendering the page, or we can force baklava to use Client Side Rendering.
+
+## Preparation
+
+Install the NPM package to your project.
+
+```bash
+npm install @trendyol/baklava
+```
+
+Include Baklava library from CDN to your project's `<head>` section (in `layout.tsx` or `app.tsx`).
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/themes/default.css"
+/>
+
+<Script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/baklava.js"
+/>
+```
+
+
+## Using without SSR
+
+Create a custom component for the baklava component you will use
+
+```jsx
+"use client"; // This is a client-side component
+
+import { BlButton } from "@trendyol/baklava/dist/baklava-react"; // Import the component from the library
+
+// Create a new component that uses the library component
+const Button = (props: React.ComponentProps<typeof BlButton>) => (
+  <BlButton {...props}>Click me!</BlButton>
+);
+
+export default Button;
+```
+
+In the page, import the component using `dynamic` with ssr off.
+
+```jsx
+const Button = dynamic(() => import("@/components/Button"), { ssr: false });
+```
+
+[Here is the demo repository](https://gitlab.trendyol.com/local-commerce/pricing-promotions/frontend/playground/next-baklava-ssr-poc)
+
+## Using with SSR
+
+We will use a workaround in order to wait for CDN to be loaded. In `_app.tsx`, add a 0ms latency for the `<Component />`.
+
+```jsx
+export default function MyApp({ Component, pageProps }: AppProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  setTimeout(() => {
+    setIsLoaded(true);
+  }, 0);
+
+  return isLoaded && <Component {...pageProps} />
+}
+```
+
+Then import components just like regular react.
+
+```jsx
+import { BlButton } from '@trendyol/baklava/dist/baklava-react';
+
+function Button() {
+  return <BlButton>Click Me</BlButton>
+}
+```
+
+### Testing with Jest
+
+If you are using Server Side Rendering, you can mock Baklava components as JSX components in Jest.
+
+```js
+jest.mock('@trendyol/baklava/dist/baklava-react', () => ({
+  ...jest.requireActual('@trendyol/baklava/dist/baklava-react'),
+  BlPagination: (props: any) => <div data-testId="current-page-mock">{props['current-page']}</div>,
+}));
+```
diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # Using Baklava in React
 
-React does not [compatible](https://custom-elements-everywhere.com/#react) with most of the web component features. React passes all props as string to Custom Components so object and array props don't pass in correct way. Also, since React uses its own synthetic event system, it can't listen events that dispatches from Custom Elements. For this reasons, we used [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react) package to convert Custom Elements to React components.
+React is not [compatible](https://custom-elements-everywhere.com/#react) with most of the web component features. React passes all props as string to Custom Components so object and array props don't pass in correct way. Also, since React uses its own synthetic event system, it can't listen events that dispatches from Custom Elements. For this reasons, we used [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react) package to convert Custom Elements to React components.
 
 ## Using with CDN
 

diff --git a/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx
@@ -51,19 +51,16 @@ Also, you can add ignore rule as compiler options to your webpack or vite.
   For Vite:
 
   ```js
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => tag.startsWith('bl-')
+  {
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            isCustomElement: tag => tag.startsWith('bl-')
+          }
         }
-      }
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
+      })
+    ]
   }
 
   ```
@@ -72,18 +69,18 @@ Also, you can add ignore rule as compiler options to your webpack or vite.
 
   ```js
   {
-  test: /\.vue$/,
-  use: {
-    loader: "vue-loader",
-    options: {
-      compilerOptions: {
-        isCustomElement: tag => {
-          return tag === "custom";
+    test: /\.vue$/,
+    use: {
+      loader: "vue-loader",
+      options: {
+        compilerOptions: {
+          isCustomElement: tag => {
+            return tag === "custom";
+          }
         }
       }
     }
   }
-}
 ```
 
 ### TypeScript

diff --git a/docs/welcome.stories.mdx b/docs/welcome.stories.mdx
@@ -3,4 +3,9 @@ import ReadMe from '../README.md?raw';
 
 <Meta title="Documentation/Welcome" />
 
-<Markdown>{ReadMe}</Markdown>
+<Markdown>{ReadMe.slice(0,ReadMe.search("Baklava is a design system"))}</Markdown>
+<div align={"center"}>
+  {window.parent.location.hostname.includes('next') && <bl-button variant="secondary" icon="rocket" size="large" onclick="window.open('https://baklava.design/', '_blank')">Stable Version</bl-button>}
+  {!window.parent.location.hostname.includes('next') && <bl-button variant="secondary" kind="neutral" icon="external_link" size="large" onclick="window.open('https://next.baklava.design/', '_blank')">Beta Version</bl-button>}
+</div>
+<Markdown>{ReadMe.slice(ReadMe.search("Baklava is a design system"))}</Markdown>
diff --git a/lit-localize.json b/lit-localize.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+  "sourceLocale": "en",
+  "targetLocales": ["tr"],
+  "tsConfig": "./tsconfig.json",
+  "output": {
+    "mode": "runtime",
+    "outputDir": "./src/generated/locales",
+    "localeCodesModule": "./src/generated/locale-codes.ts"
+  },
+  "interchange": {
+    "format": "xliff",
+    "xliffDir": "./translations/"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Following team members are responsible for the project and will be autoassigned to the PRs
		@Trendyol/baklava