KTL-2944 Add webteam youtube-playlist

.gitignore

@@ -35,7 +35,6 @@ pdf/kotlin-reference.pdf
 pdf/tmp.html
 *.pyc
 google-credentials.json
-package-lock.json
 .env
 pages/api/
 external/

.npmrc

@@ -1 +1,4 @@
-save-exact = true
+@webteam:registry=https://packages.jetbrains.team/npm/p/wt/npm/
+//packages.jetbrains.team/npm/p/wt/npm/:_authToken=${WEBTEAM_UI_NPM_TOKEN}
+//packages.jetbrains.team/npm/p/wt/npm/:always-auth=true
+legacy-peer-deps=true

.teamcity/kotlinlang/builds/BuildJsAssets.kt

@@ -35,9 +35,9 @@ object BuildJsAssets: BuildType({
         #   [cause]: TypeError: Invalid URL
         export NODE_OPTIONS=--no-experimental-fetch
 
-        yarn install --frozen-lockfile
+        npm ci
 
-        NODE_ENV=production yarn run build
+        NODE_ENV=production npm run build
       """.trimIndent()
       dockerImage = "node:lts-slim"
       dockerPull = true

README.md

@@ -139,20 +139,44 @@ You can:
 
 ## Local development
 
-#### preliminaries: python3 installed
-
+For full development tooling, you need to connect to the WebTeam registry.
+You can work without it, but some UI components will not be displayed.
+
+#### Option 1: Connect to Space registry (recommended for full functionality)
+Visit [the registry](https://jetbrains.team/p/wt/packages/npm/npm) page in Space:
+- On the top right, click Connect;
+- Click Generate personal token;
+- Copy your personal token.
+Add your personal token to the environmental variable. This step differs based on your OS.
+
+##### For macOS:
+Add your token to the ~/.zshenv file:
+- Open the Terminal;
+- Use this command to access .zshenv file `nano ~/.zshenv`;
+- Replace your_token with your actual Space token and use this command to add an environment variable: `export WEBTEAM_UI_NPM_TOKEN=yourtoken`.
+
+Then install frontend dependencies `npm install`.
+
+#### Option 2: Ignore optional dependecies
+
+Add an environment variable `export USE_FALLBACK_FOR_INTERNAL_PACKAGES=1`.
+Then install npm dependencies without optional ones:
+```bash
+npm run install:ignore-optional
 ```
-# install frontend dependencies
-yarn install
 
+### Buld the website
+preliminaries: python3 installed
+
+```
 # at first start you need to build the static
-yarn run next-build-static
+npm run next-build-static
 
 # run NextJS server
-yarn run next-dev
+npm run next-dev
 
 # run webpack dev server for everything else
-yarn start
+npm run start
 
 # install dependencies for the python server
 pip  install --no-build-isolation -r requirements.txt
@@ -196,19 +220,19 @@ To run tests locally:
 
 ## Run Tests
 
-- `yarn test` to run all tests in headless mode locally.
-- `yarn test:e2e` to run e2e tests locally, visual tests are also included.
-- `yarn test:e2e:skip-visual` to run e2e tests without visual tests locally.
-- `yarn test:production` to run the subset of e2e tests that are meant to check the production locally.
+- `npm run test` to run all tests in headless mode locally.
+- `npm run test:e2e` to run e2e tests locally, visual tests are also included.
+- `npm run test:e2e:skip-visual` to run e2e tests without visual tests locally.
+- `npm run test:production` to run the subset of e2e tests that are meant to check the production locally.
 
 There are also additional options to run tests:
-- `yarn run test:e2e:ci` or `yarn test:production:ci` to run tests in CI environments.
-- `yarn test:e2e:headed` or `yarn test:production:headed` to run tests in headed mode locally.
-- `yarn test:e2e:debug` or `yarn test:production:debug` to run e2e tests in headed mode with debug locally.
+- `npm run test:e2e:ci` or `npm run test:production:ci` to run tests in CI environments.
+- `npm run test:e2e:headed` or `npm run test:production:headed` to run tests in headed mode locally.
+- `npm run test:e2e:debug` or `npm run test:production:debug` to run e2e tests in headed mode with debug locally.
 
 To ease the process of adding and maintaining e2e tests:
-- `yarn test:e2e:new` to generate the test for the user interactions.
-- `yarn test:e2e:update`  to update screenshots when something on page has changed intentionally.
+- `npm run test:e2e:new` to generate the test for the user interactions.
+- `npm run test:e2e:update`  to update screenshots when something on page has changed intentionally.
 
 ## Write Tests
 
@@ -220,7 +244,7 @@ To run these tests locally, follow the next steps:
 1. Create the `dist` folder in the project.
 2. Open the last successful build of [Reference Docs](https://buildserver.labs.intellij.net/buildConfiguration/Kotlin_KotlinSites_KotlinlangTeamcityDsl_BuildReferenceDocs?branch=&mode=builds#all-projects) on TeamCity.
 3. Download the artifacts of this build and place them in the `dist` folder.
-4. Run the tests locally with the following command `yarn run test:e2e`
+4. Run the tests locally with the following command `npm run test:e2e`
 5. Run the tests in docker container with the following command `docker compose -f docker-compose-e2e-statics.yml up --build  --exit-code-from playwright`
 
 ## API references tests

blocks/server-side/additional-materials/additional-materials.tsx

@@ -5,7 +5,8 @@ import cn from 'classnames';
 import styles from './additional-materials.module.css';
 import { useTextStyles } from '@rescui/typography';
 
-import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player';
+// @ts-ignore
+import YoutubePlaylist from '@webteam/youtube-playlist/lib';
 
 export const AdditionalMaterials: FC = ({}) => {
 
@@ -25,11 +26,10 @@ export const AdditionalMaterials: FC = ({}) => {
                 </h3>
 
                 <div className="ktl-row">
-                    <div className="ktl-col-12 ktl-col-md-8">
-                        <YoutubePlayer
-                            mode={1}
-                            id="PLlFc5cFwUnmx-dpq9nkdaVJX0GnrM1Mp1"
-                            previewImgSrc="https://img.youtube.com/vi/0URxGa3q3tY/maxresdefault.jpg"
+                    <div className="ktl-col-12">
+                        <YoutubePlaylist
+                            playlistId="PLlFc5cFwUnmx-dpq9nkdaVJX0GnrM1Mp1"
+                            playlistTitle="Server-Side Development with Kotlin"
                         />
                     </div>
                 </div>

components/snap-carousel/snap-carousel.tsx

@@ -20,8 +20,10 @@ export const SnapCarousel = ({ children }: SnapCarouselProps) => {
             React.Children.map(children, (child, index) => {
                 if (React.isValidElement(child)) {
                     const isChildFunction = typeof child.type === 'function';
+
                     return React.cloneElement(child, {
                         ...(isChildFunction && { isActive: activePageIndex === index }),
+                        // @ts-ignore
                         className: cn(styles.slide, child.props.className)
                     });
                 }

components/webteam-fallback/youtube-playlist/lib/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player';
+
+interface YoutubePlaylistProps {
+    playlistId: string;
+    playlistTitle: string;
+}
+
+const YoutubePlaylist: FC<YoutubePlaylistProps> = ({ playlistId, playlistTitle }) => {
+    return (
+        <YoutubePlayer
+            mode={1}
+            id={playlistId}
+        />
+    );
+};
+
+export default YoutubePlaylist;

docker-compose-e2e-statics.yml

@@ -18,7 +18,7 @@ services:
     build:
       context: .
       dockerfile: ./dockerfiles/playwright/Dockerfile
-    command: yarn run test:e2e:ci
+    command: npm run test:e2e:ci
     environment:
       BASE_URL: "http://nginx-server"
     volumes:

next.config.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const packageJSON = require('./package.json');
 
 const withPlugins = require('next-compose-plugins');
@@ -13,6 +14,20 @@ let transpiledPackages = [
     '@rescui/menu'
 ];
 
+if (process.env.USE_FALLBACK_FOR_INTERNAL_PACKAGES !== '1') {
+    transpiledPackages.push(
+        '@webteam/youtube-playlist',
+        '@webteam/ui-contexts',
+        '@webteam/colors',
+        '@webteam/toggle',
+        '@webteam/youtube-player',
+        '@webteam/use-fetch',
+        '@webteam/use-async-data',
+        '@webteam/bem-cn-fast',
+        '@webteam/list'
+    )
+}
+
 const withTranspile = nextTranspileModules(transpiledPackages);
 
 const nextConfig = {
@@ -44,6 +59,17 @@ const nextConfig = {
             type: 'asset/source'
         });
 
+        const useFallbackForInternalPackages = process.env.USE_FALLBACK_FOR_INTERNAL_PACKAGES === '1';
+
+        config.resolve.alias = config.resolve.alias || {};
+
+        if (useFallbackForInternalPackages) {
+            config.resolve.alias['@webteam'] = path.resolve(
+                __dirname,
+                'components/webteam-fallback'
+            );
+        }
+
         return config;
     },
 };