chore(storybook): added stories for taboule

ascariandrea · ascariandrea · commit 6f85623517bd · 2022-11-07T17:28:43.000+01:00
diff --git a/packages/shared/src/models/MetadataBase.ts b/packages/shared/src/models/MetadataBase.ts
@@ -14,7 +14,7 @@ export const MetadataBase = t.type(
      *
      * TODO: it may be replaced by the supporter id
      */
-    blang: t.union([t.string, t.null]),
+    blang: t.union([t.string, t.null, t.undefined]),
     supporter: t.string,
     researchTag: t.union([t.string, t.undefined]),
     experimentId: t.union([t.string, t.undefined]),
diff --git a/packages/taboule/src/components/Taboule.tsx b/packages/taboule/src/components/Taboule.tsx
@@ -8,7 +8,7 @@ import {
 } from '@mui/x-data-grid';
 import { AppError } from '@shared/errors/AppError';
 import { GetLogger } from '@shared/logger';
-import { ParsedInfo } from '@yttrex/shared/src/models/Metadata';
+import { ParsedInfo } from '@yttrex/shared/models/metadata/Metadata';
 import * as QR from 'avenger/lib/QueryResult';
 import { WithQueries } from 'avenger/lib/react';
 import debug from 'debug';
diff --git a/packages/taboule/src/components/expand-view/ExpandView.tsx b/packages/taboule/src/components/expand-view/ExpandView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './ExpandView.css';
 import { getYTVideoURLById } from '@shared/utils/yt.utils';
-import { ParsedInfo } from '@yttrex/shared/models/Metadata';
+import { ParsedInfo } from '@yttrex/shared/models/metadata/Metadata';
 import CloseIcon from '@mui/icons-material/Close';
 import ytThumbnail from './../../assets/ytthumb.png';
 
diff --git a/packages/taboule/src/config/index.tsx b/packages/taboule/src/config/index.tsx
@@ -1,19 +1,15 @@
 import { Box } from '@material-ui/core';
 import { DataGridProps, GridColTypeDef } from '@mui/x-data-grid';
 import { ChannelRelated } from '@shared/models/ChannelRelated';
-import { SummaryHTMLMetadata } from '@shared/models/contributor/ContributorPersonalSummary';
+import {
+  SummaryHTMLMetadata
+} from '@shared/models/contributor/ContributorPersonalSummary';
 import { GuardoniExperiment } from '@shared/models/Experiment';
 import {
-  ForYouMetadata as TKForYouMetadata,
-  NativeMetadata as TikTokNativeMetadata,
-  ProfileMetadata as TKProfileMetadata,
-  SearchMetadata as TikTokSearchMetadata,
+  ForYouMetadata as TKForYouMetadata, NativeMetadata as TikTokNativeMetadata, ProfileMetadata as TKProfileMetadata, SearchMetadata as TikTokSearchMetadata
 } from '@tktrex/shared/models/metadata';
 import {
-  HomeMetadata as YTHomeMetadata,
-  Metadata as YTMetadata,
-  SearchMetadata as YTSearchMetadata,
-  VideoMetadata as YTVideoMetadata,
+  HomeMetadata as YTHomeMetadata, Metadata as YTMetadata, SearchMetadata as YTSearchMetadata, VideoMetadata as YTVideoMetadata
 } from '@yttrex/shared/models/metadata/Metadata';
 import * as React from 'react';
 import CSVDownloadButton from '../components/buttons/CSVDownloadButton';
@@ -353,18 +349,13 @@ export const defaultConfiguration = (
           ...columnDefault,
           field: 'author',
           renderCell: (params) => {
-            if (params.value) {
-              return (
-                <a
-                  href={`/search/#${encodeURI(
-                    params.formattedValue.username as string
-                  )}`}
-                >
-                  {params.formattedValue.username}
-                </a>
-              );
-            }
-            return '-';
+            return (
+              <a
+                href={`/search/#${encodeURI(params.formattedValue as string)}`}
+              >
+                {params.formattedValue}
+              </a>
+            );
           },
         },
         {
diff --git a/packages/taboule/src/config/params.ts b/packages/taboule/src/config/params.ts
@@ -16,6 +16,7 @@ export const defaultParams: TabouleDefaultParams = {
   youtubePersonalAds: {},
   tikTokPersonalHTMLSummary: {},
   tikTokPersonalSearch: {},
-  tikTokSearches: {},
+  tikTokPersonalForYou: {},
+  tikTokPersonalProfile: {},
   tikTokPersonalNative: {},
 };
diff --git a/packages/taboule/src/state/queries.ts b/packages/taboule/src/state/queries.ts
@@ -3,7 +3,7 @@ import { ChannelRelated } from '@shared/models/ChannelRelated';
 import {
   HomeMetadata,
   SearchMetadata,
-  VideoMetadata,
+  VideoMetadata
 } from '@shared/models/contributor/ContributorPersonalStats';
 import { SummaryHTMLMetadata } from '@shared/models/contributor/ContributorPersonalSummary';
 import { GuardoniExperiment } from '@shared/models/Experiment';
@@ -12,16 +12,13 @@ import { Step } from '@shared/models/Step';
 import { MakeAPIClient } from '@shared/providers/api.provider';
 import * as tkEndpoints from '@tktrex/shared/endpoints';
 import {
-  ForYouMetadata as TKForYouMetadata,
-  NativeMetadata as TKNativeMetadata,
-  ProfileMetadata as TKProfileMetadata,
-  SearchMetadata as TKSearchMetadata,
+  ForYouMetadata as TKForYouMetadata, NativeMetadata as TKNativeMetadata, ProfileMetadata as TKProfileMetadata, SearchMetadata as TKSearchMetadata
 } from '@tktrex/shared/models/metadata';
 import {
   ForYouType,
   NativeType,
   ProfileType,
-  SearchType,
+  SearchType
 } from '@tktrex/shared/models/Nature';
 import * as endpoints from '@yttrex/shared/endpoints';
 import { ListMetadataQuery } from '@yttrex/shared/endpoints/v2/metadata.endpoints';
@@ -341,7 +338,7 @@ export const GetTabouleQueries = ({
           },
         }),
         TE.map((content) => ({
-          total: content.totals.profile,
+          total: content.totals.native,
           content: content.data as any[] as TKProfileMetadata[],
         }))
       ),
@@ -362,7 +359,7 @@ export const GetTabouleQueries = ({
           },
         }),
         TE.map((content) => ({
-          total: content.totals.foryou,
+          total: content.totals.native,
           content: content.data as any[] as TKForYouMetadata[],
         }))
       ),
diff --git a/packages/taboule/src/state/types.ts b/packages/taboule/src/state/types.ts
@@ -12,7 +12,8 @@ export const TabouleQueryKey = t.union(
     t.literal('tikTokPersonalHTMLSummary'),
     t.literal('tikTokPersonalSearch'),
     t.literal('tikTokPersonalNative'),
-    t.literal('tikTokSearches'),
+    t.literal('tikTokPersonalForYou'),
+    t.literal('tikTokPersonalProfile'),
   ],
   'TabouleQueryKey'
 );
diff --git a/platforms/storybook/.env b/platforms/storybook/.env
@@ -0,0 +1,4 @@
+TK_FE_URL=https://tiktok.tracking.esposed
+TK_BE_URL=https://tiktok.tracking.exposed/api
+YT_FE_URL=https://youtube.tracking.esposed
+YT_BE_URL=https://youtube.tracking.exposed/api
diff --git a/platforms/storybook/.env.development b/platforms/storybook/.env.development
@@ -0,0 +1,4 @@
+TK_FE_URL=http://localhost:1314
+TK_BE_URL=http://localhost:14000/api
+YT_FE_URL=http://localhost:1313
+YT_BE_URL=http://localhost:9000/api
diff --git a/platforms/storybook/.storybook/main.js b/platforms/storybook/.storybook/main.js
@@ -1,6 +1,32 @@
 const path = require('path');
 const TSConfigPathsWebpackPlugin = require('tsconfig-paths-webpack-plugin');
 const version = require('../package.json').version;
+const dotenv = require('dotenv');
+
+const env = dotenv.config({
+  path: path.resolve(process.cwd(), process.env.DOTENV_CONFIG_PATH ?? '.env'),
+}).parsed;
+
+function injectEnv(definitions) {
+  const env = 'process.env';
+
+  if (!definitions[env]) {
+    return {
+      ...definitions,
+      [env]: JSON.stringify(
+        Object.fromEntries(
+          Object.entries(definitions)
+            .filter(([key]) => key.startsWith(env))
+            .map(([key, value]) => [
+              key.substring(env.length + 1),
+              JSON.parse(value),
+            ])
+        )
+      ),
+    };
+  }
+  return definitions;
+}
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -23,6 +49,12 @@ module.exports = {
         prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
     },
   },
+  env: (config) => {
+    return {
+      ...config,
+      ...env,
+    };
+  },
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.scss$/,
@@ -64,6 +96,43 @@ module.exports = {
     // console.log("config", config.resolve.plugins);
     // console.log("config", config);
 
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [
+              require('@babel/preset-typescript').default,
+              [
+                require('@babel/preset-react').default,
+                { runtime: 'automatic' },
+              ],
+              require('@babel/preset-env').default,
+            ],
+          },
+        },
+      ],
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    });
+
+    config.resolve.extensions.push('.mjs');
+
+    const definePlugin = config.plugins.find(
+      ({ constructor }) => constructor && constructor.name === 'DefinePlugin'
+    );
+    if (definePlugin) {
+      definePlugin.definitions = injectEnv(definePlugin.definitions);
+    }
+
     return config;
   },
   env: (config) => ({
diff --git a/platforms/storybook/package.json b/platforms/storybook/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "start": "start-storybook -p 6006",
+    "dev":"DOTENV_CONFIG_PATH=.env.development start-storybook -p 6006",
     "build": "build-storybook -o build",
     "lint": "eslint ./src"
   },
diff --git a/platforms/storybook/src/stories/Taboule.stories.tsx b/platforms/storybook/src/stories/Taboule.stories.tsx
@@ -4,16 +4,67 @@ import { Taboule } from '@taboule/components/Taboule';
 const Meta: ComponentMeta<typeof Taboule> = {
   title: 'Example/Taboule',
   component: Taboule,
-  argTypes: {},
+  argTypes: {
+    showInput: {
+      type: 'boolean',
+    },
+  },
 };
 
 export default Meta;
 
+const tkBaseURL = process.env.TK_BE_URL;
+const ytBaseURL = process.env.YT_BE_URL;
+
 const Template: ComponentStory<typeof Taboule> = (args) => {
   return <Taboule {...args} />;
 };
 
-export const Basic = Template.bind({});
-Basic.args = {
+export const YTPersonalSearches = Template.bind({});
+YTPersonalSearches.args = {
+  showInput: true,
+  baseURL: ytBaseURL,
   query: 'youtubePersonalSearches',
 };
+
+export const YTPersonalHomes = Template.bind({});
+YTPersonalHomes.args = {
+  showInput: true,
+  baseURL: ytBaseURL,
+  query: 'youtubePersonalHomes',
+};
+
+export const YTPersonalVideos = Template.bind({});
+YTPersonalVideos.args = {
+  showInput: true,
+  baseURL: ytBaseURL,
+  query: 'youtubePersonalVideos',
+};
+
+export const TKPersonalNatives = Template.bind({});
+TKPersonalNatives.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  query: 'tikTokPersonalNative',
+};
+
+export const TKPersonalSearch = Template.bind({});
+TKPersonalSearch.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  query: 'tikTokPersonalSearch',
+};
+
+export const TKPersonalForYou = Template.bind({});
+TKPersonalForYou.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  query: 'tikTokPersonalForYou',
+};
+
+export const TKPersonalProfile = Template.bind({});
+TKPersonalProfile.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  query: 'tikTokPersonalProfile',
+};
diff --git a/platforms/tktrex/shared/__spec__/parser/parser.spec.ts b/platforms/tktrex/shared/__spec__/parser/parser.spec.ts
@@ -5,7 +5,7 @@ import {
   expectToBeIncludedIn,
   normalizeDeepStrings,
 } from '../../src/parser/v2/lib/util';
-import { ForYouVideoMetadata } from '../../src/models/metadata/ForYouMetadata';
+import { ForYouMetadata } from '../../src/models/metadata/ForYouMetadata';
 import createServerSideParser from '../../src/parser/v2/serverSideParser';
 import historicData from './fixtures/history.json';
 import { v4 as uuid } from 'uuid';
@@ -16,7 +16,7 @@ describe('The TikTok parser for the ForYou feed', () => {
   // "foryou" videos so that we have complete data for our tests,
   // and exclude the example that we know to be wrong
   const forYouSamples = historicData.filter((sample) => {
-    const decodeResult = ForYouVideoMetadata.decode({
+    const decodeResult = ForYouMetadata.decode({
       ...sample.metadata,
       nature: { type: sample.metadata.type },
       timelineId: `bread-${uuid()}`,
@@ -46,7 +46,7 @@ describe('The TikTok parser for the ForYou feed', () => {
     // inside the expected value,
     // now we also check that it validates the schema of the
     // expected value
-    const validation = ForYouVideoMetadata.decode({
+    const validation = ForYouMetadata.decode({
       id: uuid(),
       savingTime: new Date().toISOString(),
       publicKey: 'fake-publicKey',
diff --git a/platforms/tktrex/shared/src/models/metadata/ForYouMetadata.ts b/platforms/tktrex/shared/src/models/metadata/ForYouMetadata.ts
@@ -5,7 +5,7 @@ import { TKMetadataBase } from './MetadataBase';
 import { Metrics } from './Metrics';
 import { Music } from './Music';
 
-export const ForYouVideoMetadata = t.intersection(
+export const ForYouMetadata = t.intersection(
   [
     TKMetadataBase,
     ForYouN,
@@ -31,7 +31,7 @@ export const ForYouVideoMetadata = t.intersection(
       'foryou',
     ),
   ],
-  'ForYouVideoMetadata',
+  'ForYouMetadata',
 );
 
-export type ForYouVideoMetadata = t.TypeOf<typeof ForYouVideoMetadata>;
+export type ForYouMetadata = t.TypeOf<typeof ForYouMetadata>;

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export const MetadataBase = t.type(`
`14`	`14`	`*`
`15`	`15`	`* TODO: it may be replaced by the supporter id`
`16`	`16`	`*/`
`17`		`- blang: t.union([t.string, t.null]),`
	`17`	`+ blang: t.union([t.string, t.null, t.undefined]),`
`18`	`18`	`supporter: t.string,`
`19`	`19`	`researchTag: t.union([t.string, t.undefined]),`
`20`	`20`	`experimentId: t.union([t.string, t.undefined]),`