Skip to content

Commit a75432a

Browse files
amivanoffamivanoff
committed
[refactor] Stories with decorators, localization, themes
1 parent 76694ec commit a75432a

28 files changed

+2069
-1427
lines changed

‎.storybook/preview.js

+59-30
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,11 @@ import * as dayjs from 'dayjs';
44
import LocalizedFormat from 'dayjs/plugin/localizedFormat';
55
import LocaleData from 'dayjs/plugin/localeData';
66
import RelativeTime from 'dayjs/plugin/relativeTime';
7-
import 'dayjs/locale/ru';
8-
9-
import { ConfigProvider, theme } from 'antd';
10-
import ruRu from 'antd/es/locale/ru_RU';
117

128
dayjs.extend(LocalizedFormat); // for longDateFormat
139
dayjs.extend(LocaleData); // for localeData()
1410
dayjs.extend(RelativeTime); // for fromNow()
1511

16-
dayjs.locale('ru');
17-
1812
// for dayjs.defaultFormat
1913
// see https://stackoverflow.com/questions/72681674/how-to-set-the-default-format-in-dayjs
2014
const defaultFormat = 'LLL';
@@ -32,27 +26,62 @@ export const parameters = {
3226
actions: { argTypesRegex: '^on.*' },
3327
};
3428

35-
export const decorators = [
36-
(Story) => (
37-
<ConfigProvider
38-
locale={ruRu}
39-
theme={{
40-
token: {
41-
// Seed Token
42-
colorPrimary: '#1DA57A', // '#1864FB', // primary color for all components 24 100 251
43-
//borderRadius: 2,
44-
fontSize: 12, // 14 // major text font size
45-
colorLink: '#1DA57A', //
46-
47-
// Alias Token
48-
//colorBgContainer: '#f6ffed',
49-
50-
algorithm: theme.compactAlgorithm,
51-
},
52-
}}>
53-
{Story()}
54-
</ConfigProvider>
55-
),
56-
];
57-
58-
export const tags = ['autodocs'];
29+
export const globalTypes = {
30+
locale: {
31+
name: 'Locale',
32+
description: 'Internationalization locale',
33+
defaultValue: 'en_US',
34+
toolbar: {
35+
// The icon for the toolbar item
36+
icon: 'globe',
37+
// Array of options
38+
items: [
39+
{ value: 'de_DE', title: 'Deutsch' },
40+
{ value: 'en_US', title: 'English (USA)' },
41+
{ value: 'it_IT', title: 'Italiano' },
42+
{ value: 'pt_PT', title: 'Portugal' },
43+
{ value: 'pt_BR', title: 'Portugal (Brasil)' },
44+
{ value: 'ru_RU', title: 'Russian' },
45+
],
46+
// Property that specifies if the name of the item will be displayed
47+
//showName: true,
48+
dynamicTitle: true,
49+
},
50+
},
51+
colorPrimary: {
52+
description: 'Primary color for components',
53+
defaultValue: '#1DA57A',
54+
toolbar: {
55+
title: 'Primary color',
56+
icon: 'circlehollow',
57+
items: [
58+
{ value: '#1864FB', title: 'Blue' },
59+
{ value: '#5A54F9', title: 'Violet' },
60+
{ value: '#9E339F', title: 'Purple' },
61+
{ value: '#ED4192', title: 'Pink' },
62+
{ value: '#E0282E', title: 'Red' },
63+
{ value: '#F4801A', title: 'Orange' },
64+
{ value: '#F2BD27', title: 'Yellow' },
65+
{ value: '#00B96B', title: 'Green' },
66+
],
67+
// Property that specifies if the name of the item will be displayed
68+
//showName: true,
69+
dynamicTitle: true,
70+
},
71+
},
72+
themeDensity: {
73+
description: 'Theme layout density',
74+
defaultValue: 'compact',
75+
toolbar: {
76+
title: 'Theme Density',
77+
icon: 'expand',
78+
items: [
79+
{ value: 'default', title: 'Default' },
80+
{ value: 'compact', title: 'Compact' },
81+
],
82+
// Property that specifies if the name of the item will be displayed
83+
//showName: true,
84+
dynamicTitle: true,
85+
},
86+
},
87+
};

‎.vscode/settings.json

+2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"antd",
2727
"antv",
2828
"Childs",
29+
"circlehollow",
2930
"clss",
3031
"codesample",
3132
"collapsable",
@@ -43,6 +44,7 @@
4344
"Elems",
4445
"foaf",
4546
"hoverable",
47+
"Iconfont",
4648
"imagetools",
4749
"IMST",
4850
"Individ",

‎src/SparqlClientImplDummy.ts

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/********************************************************************************
2+
* Copyright (c) 2024 Agentlab and others.
3+
*
4+
* This program and the accompanying materials are made available under the
5+
* terms of the GNU General Public License v. 3.0 which is available at
6+
* https://www.gnu.org/licenses/gpl-3.0.html.
7+
*
8+
* SPDX-License-Identifier: GPL-3.0-only
9+
********************************************************************************/
10+
import { AxiosHeaders, AxiosResponse } from 'axios';
11+
12+
import { JsObject, JsStrObj, Results, SparqlClient } from '@agentlab/sparql-jsld-client';
13+
14+
const HttpResponse200: AxiosResponse<any> = {
15+
data: {},
16+
status: 200,
17+
statusText: 'Ok',
18+
headers: {},
19+
config: {
20+
headers: new AxiosHeaders(),
21+
},
22+
};
23+
24+
export class SparqlClientImplDummy implements SparqlClient {
25+
serverUrl = '';
26+
repId = '';
27+
repositoryUrl = '';
28+
statementsUrl = '';
29+
30+
/**
31+
* Test Mockup state props
32+
*/
33+
nsReturn: JsStrObj = {};
34+
35+
uploadStatementsParams = {};
36+
37+
sparqlSelectParams: { query: string; queryParams: JsObject } = {
38+
query: '',
39+
queryParams: {},
40+
};
41+
sparqlSelectReturn: Results = { bindings: [] };
42+
43+
sparqlConstructParams: { query: string; queryParams: JsObject } = {
44+
query: '',
45+
queryParams: {},
46+
};
47+
sparqlConstructReturn: JsObject[] = [];
48+
49+
sparqlUpdateParams: { query: string; queryParams: JsObject } = {
50+
query: '',
51+
queryParams: {},
52+
};
53+
sparqlUpdateReturn = HttpResponse200;
54+
55+
clearGraphParams = {};
56+
clearGraphReturn = HttpResponse200;
57+
58+
deleteRepositoryParams = {};
59+
createRepositoryAndSetCurrentParams = {};
60+
createRepositoryParams = {};
61+
62+
setServerUrl(url: string): void {
63+
this.serverUrl = url;
64+
this.regenerateUrls();
65+
}
66+
67+
setRepositoryId(repId: string): void {
68+
this.repId = repId;
69+
this.regenerateUrls();
70+
}
71+
72+
createRepositoryUrl(repId: string): string {
73+
return `${this.serverUrl}/repositories/${repId}`;
74+
}
75+
createStatementsUrl(repId: string): string {
76+
return `${this.serverUrl}/repositories/${repId}/statements`;
77+
}
78+
79+
regenerateUrls(): void {
80+
this.repositoryUrl = this.createRepositoryUrl(this.repId);
81+
this.statementsUrl = this.createStatementsUrl(this.repId);
82+
}
83+
84+
async loadNs(): Promise<JsStrObj> {
85+
return this.nsReturn;
86+
}
87+
88+
async uploadStatements(statements: string, baseURI?: string, graph?: string): Promise<void> {
89+
this.uploadStatementsParams = {
90+
statements: statements.replace(/^#.*$/gm, ''),
91+
baseURI,
92+
graph,
93+
};
94+
}
95+
96+
//async downloadStatements(graph?: string): Promise<string> {
97+
//console.debug(() => `downloadStatements url=${this.repositoryUrl} graph=${graph}`);
98+
//return Promise.reject('');
99+
//}
100+
101+
async sparqlSelect(query: string, queryParams: JsObject = {}): Promise<Results> {
102+
this.sparqlSelectParams = {
103+
query,
104+
queryParams,
105+
};
106+
return this.sparqlSelectReturn;
107+
}
108+
109+
async sparqlConstruct(query: string, queryParams: JsObject = {}): Promise<JsObject[]> {
110+
this.sparqlConstructParams = {
111+
query,
112+
queryParams,
113+
};
114+
return this.sparqlConstructReturn;
115+
}
116+
117+
async sparqlUpdate(query: string, queryParams: JsObject = {}): Promise<AxiosResponse<any>> {
118+
this.sparqlUpdateParams = {
119+
query,
120+
queryParams,
121+
};
122+
return this.sparqlUpdateReturn;
123+
}
124+
125+
/**
126+
* Удаляет все триплы в графе с заданным graph
127+
* @param graph
128+
*/
129+
async clearGraph(graph = 'null') {
130+
this.clearGraphParams = {
131+
graph,
132+
};
133+
return this.clearGraphReturn;
134+
}
135+
136+
async deleteRepository(repId: string) {
137+
this.createRepositoryParams = {
138+
repId,
139+
};
140+
}
141+
142+
async createRepositoryAndSetCurrent(repParam: JsObject = {}, repType = 'native-rdfs') {
143+
this.createRepositoryAndSetCurrentParams = {
144+
repParam,
145+
repType,
146+
};
147+
}
148+
149+
async createRepository(repParam: JsObject = {}, repType = 'native-rdfs') {
150+
this.createRepositoryParams = {
151+
repParam,
152+
repType,
153+
};
154+
}
155+
}

‎stories/CardsGridList.stories.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,22 @@ import { Meta, StoryObj } from '@storybook/react';
1414
import { Provider } from 'react-redux';
1515
import { asReduxStore, connectReduxDevtools } from 'mst-middlewares';
1616
import * as remotedev from 'remotedev';
17-
import { CollState, rootModelInitialState, SparqlClientImpl } from '@agentlab/sparql-jsld-client';
17+
import { CollState, SparqlClientImpl } from '@agentlab/sparql-jsld-client';
1818

1919
import {
2020
antdCells,
2121
antdControlRenderers,
2222
antdLayoutRenderers,
2323
antdDataControlRenderers,
24+
createUiModelFromState,
2425
Form,
2526
MstContextProvider,
2627
RendererRegistryEntry,
28+
viewKindCollConstr,
29+
viewDescrCollConstr,
2730
} from '../src';
28-
import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs';
29-
import { createUiModelFromState } from '../src/models/MstViewDescr';
31+
32+
import { noCollsFormModelState } from './TestData';
3033

3134
export default {
3235
title: 'Complex Control/Cards Grid List',
@@ -41,7 +44,7 @@ export default {
4144
'http://localhost:8181/rdf4j-server',
4245
'http://localhost:8181/rdf4j-server/repositories/mktp-schema20/namespaces',
4346
);
44-
const rootStore = createUiModelFromState('mktp-fed20', client, rootModelInitialState, additionalColls);
47+
const rootStore = createUiModelFromState('mktp-fed20', client, noCollsFormModelState, additionalColls);
4548
const store: any = asReduxStore(rootStore);
4649
connectReduxDevtools(remotedev, rootStore);
4750
return (
@@ -61,8 +64,6 @@ export default {
6164
</Provider>
6265
);
6366
},
64-
// Due to Storybook bug https://github.com/storybookjs/storybook/issues/12747
65-
parameters: { docs: { source: { type: 'code' } } },
6667
} as Meta<typeof Form>;
6768

6869
type Story = StoryObj<any>; // StoryObj<typeof Form>;

‎stories/CardsHorizontalScroller.stories.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,22 @@ import { Meta, StoryObj } from '@storybook/react';
1414
import { Provider } from 'react-redux';
1515
import { asReduxStore, connectReduxDevtools } from 'mst-middlewares';
1616
import * as remotedev from 'remotedev';
17-
import { CollState, factory, rootModelInitialState, SparqlClientImpl } from '@agentlab/sparql-jsld-client';
17+
import { CollState, factory, SparqlClientImpl } from '@agentlab/sparql-jsld-client';
1818

1919
import {
2020
antdCells,
2121
antdControlRenderers,
2222
antdLayoutRenderers,
2323
antdDataControlRenderers,
24+
createUiModelFromState,
2425
Form,
2526
MstContextProvider,
2627
RendererRegistryEntry,
28+
viewKindCollConstr,
29+
viewDescrCollConstr,
2730
} from '../src';
28-
import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs';
29-
import { createUiModelFromState } from '../src/models/MstViewDescr';
31+
32+
import { noCollsFormModelState } from './TestData';
3033

3134
export default {
3235
title: 'Complex Control/Cards Horizontal Scroller',
@@ -41,7 +44,7 @@ export default {
4144
'http://localhost:8181/rdf4j-server',
4245
'http://localhost:8181/rdf4j-server/repositories/mktp-schema20/namespaces',
4346
);
44-
const rootStore = createUiModelFromState('mktp-fed20', client, rootModelInitialState, additionalColls);
47+
const rootStore = createUiModelFromState('mktp-fed20', client, noCollsFormModelState, additionalColls);
4548
console.log('rootStore', rootStore);
4649
const store: any = asReduxStore(rootStore);
4750
connectReduxDevtools(remotedev, rootStore);
@@ -62,8 +65,6 @@ export default {
6265
</Provider>
6366
);
6467
},
65-
// Due to Storybook bug https://github.com/storybookjs/storybook/issues/12747
66-
parameters: { docs: { source: { type: 'code' } } },
6768
} as Meta<typeof Form>;
6869

6970
type Story = StoryObj<any>; // StoryObj<typeof Form>;

0 commit comments

Comments
 (0)