Skip to content
This repository was archived by the owner on Aug 15, 2023. It is now read-only.

Commit 6f85623

Browse files
ascariandreaascariandrea
committed
chore(storybook): added stories for taboule
1 parent a02d6ae commit 6f85623

File tree

14 files changed

+162
-43
lines changed

14 files changed

+162
-43
lines changed

‎packages/shared/src/models/MetadataBase.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const MetadataBase = t.type(
1414
*
1515
* TODO: it may be replaced by the supporter id
1616
*/
17-
blang: t.union([t.string, t.null]),
17+
blang: t.union([t.string, t.null, t.undefined]),
1818
supporter: t.string,
1919
researchTag: t.union([t.string, t.undefined]),
2020
experimentId: t.union([t.string, t.undefined]),

‎packages/taboule/src/components/Taboule.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@mui/x-data-grid';
99
import { AppError } from '@shared/errors/AppError';
1010
import { GetLogger } from '@shared/logger';
11-
import { ParsedInfo } from '@yttrex/shared/src/models/Metadata';
11+
import { ParsedInfo } from '@yttrex/shared/models/metadata/Metadata';
1212
import * as QR from 'avenger/lib/QueryResult';
1313
import { WithQueries } from 'avenger/lib/react';
1414
import debug from 'debug';

‎packages/taboule/src/components/expand-view/ExpandView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import './ExpandView.css';
33
import { getYTVideoURLById } from '@shared/utils/yt.utils';
4-
import { ParsedInfo } from '@yttrex/shared/models/Metadata';
4+
import { ParsedInfo } from '@yttrex/shared/models/metadata/Metadata';
55
import CloseIcon from '@mui/icons-material/Close';
66
import ytThumbnail from './../../assets/ytthumb.png';
77

‎packages/taboule/src/config/index.tsx

+12-21
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
import { Box } from '@material-ui/core';
22
import { DataGridProps, GridColTypeDef } from '@mui/x-data-grid';
33
import { ChannelRelated } from '@shared/models/ChannelRelated';
4-
import { SummaryHTMLMetadata } from '@shared/models/contributor/ContributorPersonalSummary';
4+
import {
5+
SummaryHTMLMetadata
6+
} from '@shared/models/contributor/ContributorPersonalSummary';
57
import { GuardoniExperiment } from '@shared/models/Experiment';
68
import {
7-
ForYouMetadata as TKForYouMetadata,
8-
NativeMetadata as TikTokNativeMetadata,
9-
ProfileMetadata as TKProfileMetadata,
10-
SearchMetadata as TikTokSearchMetadata,
9+
ForYouMetadata as TKForYouMetadata, NativeMetadata as TikTokNativeMetadata, ProfileMetadata as TKProfileMetadata, SearchMetadata as TikTokSearchMetadata
1110
} from '@tktrex/shared/models/metadata';
1211
import {
13-
HomeMetadata as YTHomeMetadata,
14-
Metadata as YTMetadata,
15-
SearchMetadata as YTSearchMetadata,
16-
VideoMetadata as YTVideoMetadata,
12+
HomeMetadata as YTHomeMetadata, Metadata as YTMetadata, SearchMetadata as YTSearchMetadata, VideoMetadata as YTVideoMetadata
1713
} from '@yttrex/shared/models/metadata/Metadata';
1814
import * as React from 'react';
1915
import CSVDownloadButton from '../components/buttons/CSVDownloadButton';
@@ -353,18 +349,13 @@ export const defaultConfiguration = (
353349
...columnDefault,
354350
field: 'author',
355351
renderCell: (params) => {
356-
if (params.value) {
357-
return (
358-
<a
359-
href={`/search/#${encodeURI(
360-
params.formattedValue.username as string
361-
)}`}
362-
>
363-
{params.formattedValue.username}
364-
</a>
365-
);
366-
}
367-
return '-';
352+
return (
353+
<a
354+
href={`/search/#${encodeURI(params.formattedValue as string)}`}
355+
>
356+
{params.formattedValue}
357+
</a>
358+
);
368359
},
369360
},
370361
{

‎packages/taboule/src/config/params.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const defaultParams: TabouleDefaultParams = {
1616
youtubePersonalAds: {},
1717
tikTokPersonalHTMLSummary: {},
1818
tikTokPersonalSearch: {},
19-
tikTokSearches: {},
19+
tikTokPersonalForYou: {},
20+
tikTokPersonalProfile: {},
2021
tikTokPersonalNative: {},
2122
};

‎packages/taboule/src/state/queries.ts

+5-8
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ChannelRelated } from '@shared/models/ChannelRelated';
33
import {
44
HomeMetadata,
55
SearchMetadata,
6-
VideoMetadata,
6+
VideoMetadata
77
} from '@shared/models/contributor/ContributorPersonalStats';
88
import { SummaryHTMLMetadata } from '@shared/models/contributor/ContributorPersonalSummary';
99
import { GuardoniExperiment } from '@shared/models/Experiment';
@@ -12,16 +12,13 @@ import { Step } from '@shared/models/Step';
1212
import { MakeAPIClient } from '@shared/providers/api.provider';
1313
import * as tkEndpoints from '@tktrex/shared/endpoints';
1414
import {
15-
ForYouMetadata as TKForYouMetadata,
16-
NativeMetadata as TKNativeMetadata,
17-
ProfileMetadata as TKProfileMetadata,
18-
SearchMetadata as TKSearchMetadata,
15+
ForYouMetadata as TKForYouMetadata, NativeMetadata as TKNativeMetadata, ProfileMetadata as TKProfileMetadata, SearchMetadata as TKSearchMetadata
1916
} from '@tktrex/shared/models/metadata';
2017
import {
2118
ForYouType,
2219
NativeType,
2320
ProfileType,
24-
SearchType,
21+
SearchType
2522
} from '@tktrex/shared/models/Nature';
2623
import * as endpoints from '@yttrex/shared/endpoints';
2724
import { ListMetadataQuery } from '@yttrex/shared/endpoints/v2/metadata.endpoints';
@@ -341,7 +338,7 @@ export const GetTabouleQueries = ({
341338
},
342339
}),
343340
TE.map((content) => ({
344-
total: content.totals.profile,
341+
total: content.totals.native,
345342
content: content.data as any[] as TKProfileMetadata[],
346343
}))
347344
),
@@ -362,7 +359,7 @@ export const GetTabouleQueries = ({
362359
},
363360
}),
364361
TE.map((content) => ({
365-
total: content.totals.foryou,
362+
total: content.totals.native,
366363
content: content.data as any[] as TKForYouMetadata[],
367364
}))
368365
),

‎packages/taboule/src/state/types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ export const TabouleQueryKey = t.union(
1212
t.literal('tikTokPersonalHTMLSummary'),
1313
t.literal('tikTokPersonalSearch'),
1414
t.literal('tikTokPersonalNative'),
15-
t.literal('tikTokSearches'),
15+
t.literal('tikTokPersonalForYou'),
16+
t.literal('tikTokPersonalProfile'),
1617
],
1718
'TabouleQueryKey'
1819
);

‎platforms/storybook/.env

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
TK_FE_URL=https://tiktok.tracking.esposed
2+
TK_BE_URL=https://tiktok.tracking.exposed/api
3+
YT_FE_URL=https://youtube.tracking.esposed
4+
YT_BE_URL=https://youtube.tracking.exposed/api

‎platforms/storybook/.env.development

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
TK_FE_URL=http://localhost:1314
2+
TK_BE_URL=http://localhost:14000/api
3+
YT_FE_URL=http://localhost:1313
4+
YT_BE_URL=http://localhost:9000/api

‎platforms/storybook/.storybook/main.js

+69
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
11
const path = require('path');
22
const TSConfigPathsWebpackPlugin = require('tsconfig-paths-webpack-plugin');
33
const version = require('../package.json').version;
4+
const dotenv = require('dotenv');
5+
6+
const env = dotenv.config({
7+
path: path.resolve(process.cwd(), process.env.DOTENV_CONFIG_PATH ?? '.env'),
8+
}).parsed;
9+
10+
function injectEnv(definitions) {
11+
const env = 'process.env';
12+
13+
if (!definitions[env]) {
14+
return {
15+
...definitions,
16+
[env]: JSON.stringify(
17+
Object.fromEntries(
18+
Object.entries(definitions)
19+
.filter(([key]) => key.startsWith(env))
20+
.map(([key, value]) => [
21+
key.substring(env.length + 1),
22+
JSON.parse(value),
23+
])
24+
)
25+
),
26+
};
27+
}
28+
return definitions;
29+
}
430

531
module.exports = {
632
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -23,6 +49,12 @@ module.exports = {
2349
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
2450
},
2551
},
52+
env: (config) => {
53+
return {
54+
...config,
55+
...env,
56+
};
57+
},
2658
webpackFinal: async (config) => {
2759
config.module.rules.push({
2860
test: /\.scss$/,
@@ -64,6 +96,43 @@ module.exports = {
6496
// console.log("config", config.resolve.plugins);
6597
// console.log("config", config);
6698

99+
config.module.rules.push({
100+
test: /\.tsx?$/,
101+
exclude: /node_modules/,
102+
use: [
103+
{
104+
loader: require.resolve('babel-loader'),
105+
options: {
106+
presets: [
107+
require('@babel/preset-typescript').default,
108+
[
109+
require('@babel/preset-react').default,
110+
{ runtime: 'automatic' },
111+
],
112+
require('@babel/preset-env').default,
113+
],
114+
},
115+
},
116+
],
117+
});
118+
119+
config.resolve.extensions.push('.ts', '.tsx');
120+
121+
config.module.rules.push({
122+
test: /\.mjs$/,
123+
include: /node_modules/,
124+
type: 'javascript/auto',
125+
});
126+
127+
config.resolve.extensions.push('.mjs');
128+
129+
const definePlugin = config.plugins.find(
130+
({ constructor }) => constructor && constructor.name === 'DefinePlugin'
131+
);
132+
if (definePlugin) {
133+
definePlugin.definitions = injectEnv(definePlugin.definitions);
134+
}
135+
67136
return config;
68137
},
69138
env: (config) => ({

‎platforms/storybook/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"private": true,
55
"scripts": {
66
"start": "start-storybook -p 6006",
7+
"dev":"DOTENV_CONFIG_PATH=.env.development start-storybook -p 6006",
78
"build": "build-storybook -o build",
89
"lint": "eslint ./src"
910
},

‎platforms/storybook/src/stories/Taboule.stories.tsx

+54-3
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,67 @@ import { Taboule } from '@taboule/components/Taboule';
44
const Meta: ComponentMeta<typeof Taboule> = {
55
title: 'Example/Taboule',
66
component: Taboule,
7-
argTypes: {},
7+
argTypes: {
8+
showInput: {
9+
type: 'boolean',
10+
},
11+
},
812
};
913

1014
export default Meta;
1115

16+
const tkBaseURL = process.env.TK_BE_URL;
17+
const ytBaseURL = process.env.YT_BE_URL;
18+
1219
const Template: ComponentStory<typeof Taboule> = (args) => {
1320
return <Taboule {...args} />;
1421
};
1522

16-
export const Basic = Template.bind({});
17-
Basic.args = {
23+
export const YTPersonalSearches = Template.bind({});
24+
YTPersonalSearches.args = {
25+
showInput: true,
26+
baseURL: ytBaseURL,
1827
query: 'youtubePersonalSearches',
1928
};
29+
30+
export const YTPersonalHomes = Template.bind({});
31+
YTPersonalHomes.args = {
32+
showInput: true,
33+
baseURL: ytBaseURL,
34+
query: 'youtubePersonalHomes',
35+
};
36+
37+
export const YTPersonalVideos = Template.bind({});
38+
YTPersonalVideos.args = {
39+
showInput: true,
40+
baseURL: ytBaseURL,
41+
query: 'youtubePersonalVideos',
42+
};
43+
44+
export const TKPersonalNatives = Template.bind({});
45+
TKPersonalNatives.args = {
46+
showInput: true,
47+
baseURL: tkBaseURL,
48+
query: 'tikTokPersonalNative',
49+
};
50+
51+
export const TKPersonalSearch = Template.bind({});
52+
TKPersonalSearch.args = {
53+
showInput: true,
54+
baseURL: tkBaseURL,
55+
query: 'tikTokPersonalSearch',
56+
};
57+
58+
export const TKPersonalForYou = Template.bind({});
59+
TKPersonalForYou.args = {
60+
showInput: true,
61+
baseURL: tkBaseURL,
62+
query: 'tikTokPersonalForYou',
63+
};
64+
65+
export const TKPersonalProfile = Template.bind({});
66+
TKPersonalProfile.args = {
67+
showInput: true,
68+
baseURL: tkBaseURL,
69+
query: 'tikTokPersonalProfile',
70+
};

‎platforms/tktrex/shared/__spec__/parser/parser.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
expectToBeIncludedIn,
66
normalizeDeepStrings,
77
} from '../../src/parser/v2/lib/util';
8-
import { ForYouVideoMetadata } from '../../src/models/metadata/ForYouMetadata';
8+
import { ForYouMetadata } from '../../src/models/metadata/ForYouMetadata';
99
import createServerSideParser from '../../src/parser/v2/serverSideParser';
1010
import historicData from './fixtures/history.json';
1111
import { v4 as uuid } from 'uuid';
@@ -16,7 +16,7 @@ describe('The TikTok parser for the ForYou feed', () => {
1616
// "foryou" videos so that we have complete data for our tests,
1717
// and exclude the example that we know to be wrong
1818
const forYouSamples = historicData.filter((sample) => {
19-
const decodeResult = ForYouVideoMetadata.decode({
19+
const decodeResult = ForYouMetadata.decode({
2020
...sample.metadata,
2121
nature: { type: sample.metadata.type },
2222
timelineId: `bread-${uuid()}`,
@@ -46,7 +46,7 @@ describe('The TikTok parser for the ForYou feed', () => {
4646
// inside the expected value,
4747
// now we also check that it validates the schema of the
4848
// expected value
49-
const validation = ForYouVideoMetadata.decode({
49+
const validation = ForYouMetadata.decode({
5050
id: uuid(),
5151
savingTime: new Date().toISOString(),
5252
publicKey: 'fake-publicKey',

‎platforms/tktrex/shared/src/models/metadata/ForYouMetadata.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { TKMetadataBase } from './MetadataBase';
55
import { Metrics } from './Metrics';
66
import { Music } from './Music';
77

8-
export const ForYouVideoMetadata = t.intersection(
8+
export const ForYouMetadata = t.intersection(
99
[
1010
TKMetadataBase,
1111
ForYouN,
@@ -31,7 +31,7 @@ export const ForYouVideoMetadata = t.intersection(
3131
'foryou',
3232
),
3333
],
34-
'ForYouVideoMetadata',
34+
'ForYouMetadata',
3535
);
3636

37-
export type ForYouVideoMetadata = t.TypeOf<typeof ForYouVideoMetadata>;
37+
export type ForYouMetadata = t.TypeOf<typeof ForYouMetadata>;

0 commit comments

Comments
 (0)