-
Notifications
You must be signed in to change notification settings - Fork 117
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'next' into input-prevent-keydown
- Loading branch information
Showing
82 changed files
with
5,368 additions
and
3,739 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,3 +11,4 @@ storybook-static/ | |
| .octane-ci/ | ||
| .bin/ | ||
| .docksal/ | ||
| src/generated/ | ||
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -31,6 +31,8 @@ module.exports = { | |
| "textarea", | ||
| "popover", | ||
| "notification", | ||
| "table", | ||
| "split-button", | ||
| ], | ||
| ], | ||
| }, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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>, | ||
| })); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/" | ||
| } | ||
| } |
Oops, something went wrong.