@financial-times/qanda-ui 0.0.1-beta.1 → 0.0.1-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/README.md +29 -13
  2. package/dist/index.html +19 -2
  3. package/dist/index.js +1 -1
  4. package/package.json +31 -6
  5. package/.prettierrc +0 -3
  6. package/.toolkitrc.yml +0 -34
  7. package/.vscode/settings.json +0 -4
  8. package/CODEOWNERS +0 -3
  9. package/babel.config.json +0 -10
  10. package/jest.setup.ts +0 -15
  11. package/server.js +0 -17
  12. package/src/client/styles.scss +0 -61
  13. package/src/components/Author.tsx +0 -45
  14. package/src/components/CountdownTimer.tsx +0 -73
  15. package/src/components/Network.tsx +0 -19
  16. package/src/components/Qanda.tsx +0 -51
  17. package/src/components/QandaBlock.tsx +0 -63
  18. package/src/components/QandaContainer.tsx +0 -60
  19. package/src/components/QandaOComments.tsx +0 -60
  20. package/src/components/QandaProvider.tsx +0 -13
  21. package/src/components/QuestionForm.tsx +0 -122
  22. package/src/components/Status.tsx +0 -20
  23. package/src/components/Stream.tsx +0 -49
  24. package/src/components/UITestBar.tsx +0 -76
  25. package/src/components/UpdatesButton.tsx +0 -45
  26. package/src/components/UserInfo.tsx +0 -57
  27. package/src/index.tsx +0 -58
  28. package/src/services/comments-api.ts +0 -217
  29. package/src/services/custom-sse.ts +0 -101
  30. package/src/services/mocks/api-endpoints.ts +0 -36
  31. package/src/services/mocks/mock-comments.json +0 -307
  32. package/src/services/mocks/msw-browser.ts +0 -4
  33. package/src/services/mocks/msw-server.ts +0 -4
  34. package/src/store/index.ts +0 -41
  35. package/src/store/network.ts +0 -23
  36. package/src/store/qa.ts +0 -22
  37. package/src/store/questionSlice.ts +0 -37
  38. package/src/store/stream.ts +0 -21
  39. package/src/store/updateComments.ts +0 -60
  40. package/src/store/user.ts +0 -55
  41. package/src/types/async-operation.d.ts +0 -4
  42. package/src/types/comment.d.ts +0 -19
  43. package/src/types/globals.d.ts +0 -1
  44. package/src/types/modules.d.ts +0 -1
  45. package/src/types/o-types.d.ts +0 -2
  46. package/src/types/qanda.d.ts +0 -7
  47. package/src/types/sse-events.d.ts +0 -6
  48. package/src/types/x-dash.d.ts +0 -6
  49. package/src/utils/auth.ts +0 -9
  50. package/src/utils/mocks/update.ts +0 -168
  51. package/src/utils/qandas.ts +0 -21
  52. package/tsconfig.json +0 -26
  53. package/webpack.common.js +0 -60
  54. package/webpack.dev.js +0 -26
  55. package/webpack.prod.js +0 -6
package/README.md CHANGED
@@ -2,24 +2,38 @@
2
2
 
3
3
  A library for the Live Q&A client-side component
4
4
 
5
- ## Features
6
-
7
5
  ## Usage
8
6
 
9
- This library exports a class which can be used to construct a new instance of QandaUI and exposes methods to initialise that and to destroy it.
7
+ ### Importing styles
8
+
9
+ This module comes with both a SASS export which you will need to import into your own sass file, and then run through your build process.
10
+
11
+ The Origami components required are listed as peer dependencies in package.json.
12
+
13
+ #### Example:
14
+
15
+ ```scss
16
+ @import '@financial-times/qanda-ui/scss';
17
+ ```
18
+
19
+ ### Importing and running the component (JS)
20
+
21
+ This library exports a class which can be used to construct a new instance of QandaUI and exposes methods to initialise it and to destroy it.
10
22
 
11
23
  You can pass the necessary settings to Qanda UI in either the JS or in the container element.
12
24
 
13
- ### Example:
25
+ #### Example:
14
26
 
15
27
  ```jsx
16
- <div class="qanda"></div>
28
+ // JSX
29
+ <div class="someclassname"></div>
17
30
  ```
18
31
 
19
32
  ```js
20
- import QandaUI from '@financial-times/qanda-ui';
33
+ // JS
34
+ import { QandaUI } from '@financial-times/qanda-ui';
21
35
 
22
- const qandaEl = document.querySelector('.qanda');
36
+ const qandaEl = document.querySelector('.someclassname');
23
37
  const qandaUI = new QandaUI(qandaEl, {
24
38
  storyId: '71539bd7-1818-4193-8a58-d5a4d914a012',
25
39
  useStaging: true,
@@ -30,9 +44,10 @@ const qandaUI = new QandaUI(qandaEl, {
30
44
  qandaUI.init();
31
45
  ```
32
46
 
33
- Alternatively
47
+ #### Alternative:
34
48
 
35
49
  ```jsx
50
+ // JSX
36
51
  <div
37
52
  class="qanda"
38
53
  data-qanda-storyId="71539bd7-1818-4193-8a58-d5a4d914a012"
@@ -44,21 +59,23 @@ Alternatively
44
59
  ```
45
60
 
46
61
  ```js
47
- import QandaUI from '@financial-times/qanda-ui';
48
- const qandaEl = document.querySelector('.qanda');
62
+ // JS
63
+ import { QandaUI } from '@financial-times/qanda-ui';
64
+ const qandaEl = document.querySelector('.someclassname');
49
65
  const qandaUI = new QandaUI(qandaEl);
50
66
  qandaUI.init();
51
67
  ```
52
68
 
53
- ### Parameters
69
+ #### Parameters
54
70
 
55
71
  - storyId: (required) string, the ID of the article used for Live Q&A
56
72
  - useStaging: (optional) boolean, set to true if you want to use the staging Coral
57
73
  - title: (required) string, the article title, needed to set up Coral properly
58
74
  - commentsAPIHost: (required) string, the host of the API to be used (include the protocol)
59
75
  - commentsAPIVersion: (required) string, the version of the API to be used
76
+ - maxQuestionLength: (optional) number, set to the maximum allowable length (in characters) for the question text
60
77
 
61
- ### Instance Methods
78
+ #### Instance Methods
62
79
 
63
80
  - `myInstance.init()` - render the Qanda UI
64
81
  - `myInstance.destroy()` - remove the Qanda instance
@@ -96,7 +113,6 @@ These are the config settings you can work with:
96
113
 
97
114
  - `export const USE_STAGING = true;` // use Coral staging or production
98
115
  - `export const USE_LOCAL_API = true;` // use local next-comments-api or live
99
- - `export const MOCK_SSE = true;` // use a dummy eventsource that lets you send mock events rather than listen to ones coming from next-comments-api
100
116
 
101
117
  ### Building and Running the Production Server
102
118
 
package/dist/index.html CHANGED
@@ -1,4 +1,21 @@
1
- <!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Live Q&A UI</title><style>.app-container {
1
+ <!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Live Q&A UI</title><style>body {
2
+ margin: 0;
3
+ font-family: Georgia, serif;
4
+ background-color: #fff2e8;
5
+ color: #333;
6
+ text-align: left;
7
+ }
8
+ h1 {
9
+ color: #007acc;
10
+ font-size: 2.5rem;
11
+ }
12
+ p {
13
+ font-size: 1.2rem;
14
+ margin-top: 10px;
15
+ }
16
+ .app-container {
2
17
  text-align: center;
3
18
  padding: 80px 20px;
4
- }</style></head><body><div id="root" class="app-container"></div><script defer="defer" src="index.js"></script></body></html>
19
+ max-width: 700px;
20
+ margin: auto;
21
+ }</style></head><body data-o3-brand="core"><div id="root" class="app-container"></div><script defer="defer" src="index.js"></script></body></html>