Skip to content

Commit a13bfd8

Browse files
corinagumcompulim
andauthored
Add type definitions for StyleOptions (#3818)
* update typescript, eslint, & tsconfig Co-authored-by: William Wong <[email protected]> * Add StyleOptions types to api * Add AdaptiveCards StyleOptions to bundle * Typing fixes for api and component * Types tests * Minor StyleOptions updates * Update CHANGELOG.md * PR comment fixes * Ignore tsx in babel * update AdaptiveCardRenderer * Use hooks from component * Update defaultStyleOptions.ts * Add Adaptive Cards styling to full bundle options * Clean up on full bundle default style options * Normalize style options * All style set creator should use StrictStyleOptions * Fix tests * Fix tests * Fix tests * documentation fix Co-authored-by: William Wong <[email protected]> Co-authored-by: William Wong <[email protected]>
1 parent 550ac4f commit a13bfd8

File tree

113 files changed

+2416
-894
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+2416
-894
lines changed

CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
8181
### Added
8282

8383
- Resolves [#3777](https://github.com/microsoft/BotFramework-WebChat/issues/3777). Added a new `adaptiveCardsParserMaxVersion` style options for selecting the maximum supported version when parsing an Adaptive Cards, by [@compulim](https://github.com/compulim) in PR [#3778](https://github.com/microsoft/BotFramework-WebChat/pull/3778)
84+
- Resolves [#2100](https://github.com/microsoft/BotFramework-WebChat/issues/2100). Add types declarations for Style Options in api bundle, by [@corinagum](https://github.com/corinagum), in PR [#3818](https://github.com/microsoft/BotFramework-WebChat/pull/3818)
8485

8586
### Fixed
8687

__tests__/.eslintrc

+2
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@ globals:
22
runHTMLTest: readonly
33
ignorePatterns:
44
- "**/*.js"
5+
- "**/*.ts"
6+
- "**/*.tsx"
57
- "!/html/__jest__/*.js"
68
- "!/setup/*.js"

__tests__/adaptiveCards.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import scrollToBottomCompleted from './setup/conditions/scrollToBottomCompleted'
77
import uiConnected from './setup/conditions/uiConnected';
88

99
import createAdaptiveCardsHostConfig from '../packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig';
10-
import defaultStyleOptions from '../packages/component/src/Styles/defaultStyleOptions';
1110

1211
// selenium-webdriver API doc:
1312
// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
@@ -57,7 +56,7 @@ test('action styles', async () => {
5756
});
5857

5958
test('breakfast card with custom host config', async () => {
60-
const adaptiveCardHostConfig = createAdaptiveCardsHostConfig({ ...defaultStyleOptions, bubbleTextColor: '#FF0000' });
59+
const adaptiveCardHostConfig = createAdaptiveCardsHostConfig({ bubbleTextColor: '#FF0000' });
6160

6261
const { driver, pageObjects } = await setupWebDriver({
6362
props: {
@@ -179,7 +178,7 @@ test('Inputs card with custom style options and submit action', async () => {
179178
props: {
180179
styleOptions: {
181180
cardPushButtonBackgroundColor: '#ee0606',
182-
cardPushButtonTextColor:'#ee0606'
181+
cardPushButtonTextColor: '#ee0606'
183182
}
184183
}
185184
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
dirNumber.js
2+
dirString.js
3+
styleOptionsAccent.js
4+
styleOptionsCardEmph.js
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import ReactWebChat, { createStyleSet, StyleOptions } from '../../../packages/bundle/lib/index';
2+
3+
function main() {
4+
const styleOptions: StyleOptions = { accent: 'black', cardEmphasisBackgroundColor: 'orange' };
5+
6+
createStyleSet(styleOptions);
7+
8+
// "dir" of type number should fail
9+
return <ReactWebChat dir={123} styleOptions={styleOptions} />;
10+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import ReactWebChat, { createStyleSet, StyleOptions } from '../../../packages/bundle/lib/index';
2+
3+
function main() {
4+
const styleOptions: StyleOptions = { accent: 'black', cardEmphasisBackgroundColor: 'orange' };
5+
6+
createStyleSet(styleOptions);
7+
8+
// Verify: "dir" of type string should pass
9+
return <ReactWebChat dir="ltr" styleOptions={styleOptions} />;
10+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import ReactWebChat, { createStyleSet, StyleOptions } from '../../../packages/bundle/lib/index-minimal';
2+
3+
function main() {
4+
const styleOptions: StyleOptions = { accent: 'black' };
5+
6+
createStyleSet(styleOptions);
7+
8+
// Verify: Setting "accent" must should pass.
9+
return <ReactWebChat dir="ltr" styleOptions={styleOptions} />;
10+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import ReactWebChat, { createStyleSet, StyleOptions } from '../../../packages/bundle/lib/index-minimal';
2+
3+
function main() {
4+
const styleOptions: StyleOptions = { cardEmphasisBackgroundColor: 'orange' };
5+
6+
createStyleSet(styleOptions);
7+
8+
// Verify: Setting "cardEmphasisBackgroundColor" using minimal bundle must fail.
9+
return <ReactWebChat dir="ltr" styleOptions={styleOptions} />;
10+
}

__tests__/types/typesCheck.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const ts = require('typescript');
2+
const path = require('path');
3+
4+
function compile(...filenames) {
5+
const program = ts.createProgram(filenames, {
6+
allowSyntheticDefaultImports: true,
7+
jsx: 'react',
8+
noEmit: true,
9+
skipLibCheck: true,
10+
});
11+
12+
const emitResult = program.emit();
13+
const allDiagnostics = ts.getPreEmitDiagnostics(program).concat(emitResult.diagnostics);
14+
const errors = [];
15+
16+
allDiagnostics.forEach(diagnostic => {
17+
if (diagnostic.file) {
18+
const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
19+
const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
20+
errors.push(`${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
21+
} else {
22+
errors.push(ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
23+
}
24+
});
25+
26+
return errors;
27+
};
28+
29+
30+
it('should pass dir as string', () => {
31+
const dirStringErrors = compile(path.join(__dirname, './__typescript__/dirString.tsx'));
32+
33+
expect(dirStringErrors).toHaveProperty('length', 0);
34+
});
35+
36+
it('should fail on dir as number', () => {
37+
const dirNumErrors = compile(path.join(__dirname, './__typescript__/dirNumber.tsx'));
38+
39+
expect(dirNumErrors).toHaveProperty('length', 1);
40+
expect(dirNumErrors[0]).toEqual(expect.stringContaining(`Type 'number' is not assignable to type '"ltr" | "rtl" | "auto"'`));
41+
});
42+
43+
it('should fail on accent', () => {
44+
const accentErrors = compile(path.join(__dirname, './__typescript__/styleOptionsAccent.tsx'));
45+
46+
expect(accentErrors).toHaveProperty('length', 0);
47+
});
48+
49+
it('should pass on cardEmphasisBackgroundColor', () => {
50+
const cardEmphErrors = compile(path.join(__dirname, './__typescript__/styleOptionsCardEmph.tsx'));
51+
52+
expect(cardEmphErrors).toHaveProperty('length', 1);
53+
expect(cardEmphErrors[0]).toEqual(expect.stringContaining(`Type '{ cardEmphasisBackgroundColor: string; }' is not assignable to type 'StyleOptions'`));
54+
});

docs/API.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ There are several properties that you might pass into your Web Chat React Compon
2020
| `renderMarkdown` | Change the default Markdown renderer object. |
2121
| `sendTypingIndicator` | Display a typing signal from the user to the bot to indicate that the user is not idling. |
2222
| `store` | Specify a custom store, e.g. for adding programmatic activity to the bot. |
23-
| `styleOptions` | Object that stores customization values for your styling of Web Chat. For the complete list of (frequently updated) default style options, please see the [defaultStyleOptions.js](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js) file. |
23+
| `styleOptions` | Object that stores customization values for your styling of Web Chat. For the complete list of (frequently updated) default style options, please see the [defaultStyleOptions.ts](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/api/src/defaultStyleOptions.ts) and [adaptiveCards/defaultStyleOptions.ts](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/bundle/src/adaptiveCards/defaultStyleOptions.ts) file. |
2424
| `styleSet` | The non-recommended way of overriding styles. |
2525
| `userID` | Specify a userID. There are two ways to specify the `userID`: in props, or in the token when generating the token call (`createDirectLine()`). If both methods are used to specify the userID, the token userID property will be used, and a `console.warn` will appear during runtime. If the `userID` is provided via props but is prefixed with `'dl'`, e.g. `'dl_1234'`, the value will be thrown and a new `ID` generated. If `userID` is not specified, it will default to a random user ID. Multiple users sharing the same user ID is not recommended; their user state will be shared, which creates a security risk when authenticating. |
2626
| `username` | Specify a username. |

docs/HOOKS.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1131,7 +1131,7 @@ useStyleOptions(): [StyleOptions]
11311131
11321132
This hook will return the style options. UI components should honor the styling preferences.
11331133
1134-
The value is not the same as the props. Web Chat will merge the style options passed in props with default values specified in [`defaultStyleOptions.js`](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js).
1134+
The value is not the same as the props. Web Chat will merge the style options passed in props with default values specified in [`defaultStyleOptions.ts`](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/api/src/defaultStyleOptions.ts) and [`adaptiveCards/defaultStyleOptions.ts`](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/bundle/src/adaptiveCards/defaultStyleOptions.ts) when Adaptive Cards is enabled.
11351135
11361136
To modify the value of `styleOptions` state, change the props you pass to Web Chat.
11371137

jest.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ module.exports = {
7676
'<rootDir>/__tests__/html/assets',
7777
'<rootDir>/__tests__/html/__dist__',
7878
'<rootDir>/__tests__/html/__jest__',
79+
'<rootDir>/__tests__/types/__typescript__',
7980
'<rootDir>/__tests__/setup/',
8081
'<rootDir>/packages/directlinespeech/__tests__/utilities/',
8182
'<rootDir>/packages/playground/',

package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"serve": "^11.3.2",
7171
"serve-handler": "^6.1.3",
7272
"strip-ansi": "^6.0.0",
73+
"typescript": "^4.2.3",
7374
"xmlbuilder": "^15.1.1"
7475
},
7576
"dependencies": {}

packages/api/.eslintrc.yml

+11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ extends:
33
plugins:
44
- prettier
55
- react-hooks
6+
- '@typescript-eslint/eslint-plugin'
7+
parser:
8+
'@typescript-eslint/parser'
69
rules:
710
# plugins
811
prettier/prettier: error
@@ -89,3 +92,11 @@ rules:
8992
react/jsx-wrap-multilines: error # Conflict with no-extra-parens
9093
react-hooks/rules-of-hooks: error
9194
react-hooks/exhaustive-deps: warn
95+
96+
# TypeScript
97+
98+
# The correct way to use with typescript-eslint is to disable the core version.
99+
# https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use
100+
no-use-before-define: off
101+
'@typescript-eslint/no-use-before-define':
102+
- error

packages/api/babel.config.json

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"plugins": ["babel-plugin-istanbul"]
66
}
77
},
8+
"ignore": ["src/index.tsx"],
89
"overrides": [
910
{
1011
"plugins": [],

0 commit comments

Comments
 (0)