@royaloperahouse/harmonic 0.4.1 → 2.9.1-a
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.
- package/README.md +252 -43
- package/dist/components/atoms/ControlledDropdown/ControlledDropdown.d.ts +2 -2
- package/dist/components/atoms/ControlledDropdown/ControlledDropdown.style.d.ts +2 -2
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/SponsorLogo/SponsorLogo.d.ts +1 -1
- package/dist/components/atoms/Sponsorship/Sponsorship.d.ts +2 -2
- package/dist/components/atoms/Sponsorship/Sponsorship.style.d.ts +4 -2
- package/dist/components/atoms/Sponsorship/constants.d.ts +3 -0
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/PageHeading/PageHeading.style.d.ts +3 -2
- package/dist/components/molecules/PageHeading/index.d.ts +2 -4
- package/dist/components/molecules/index.d.ts +2 -2
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +0 -1
- package/dist/components/organisms/Carousels/HighlightsCarousel/constants.d.ts +1 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/helper.d.ts +1 -1
- package/dist/components/organisms/Footer/Footer.style.d.ts +1 -0
- package/dist/harmonic.cjs.development.css +324 -3
- package/dist/harmonic.cjs.development.js +1043 -1234
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +1055 -1241
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/helpers/devices.d.ts +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
- package/dist/types/editorial.d.ts +16 -4
- package/dist/types/footer.d.ts +2 -17
- package/dist/types/links.d.ts +17 -0
- package/dist/types/navigation.d.ts +4 -4
- package/dist/types/types.d.ts +32 -15
- package/package.json +1 -1
- package/README.GIT +0 -278
- package/dist/components/molecules/PageHeading/Cinema/Cinema.d.ts +0 -4
- package/dist/components/molecules/PageHeading/Cinema/index.d.ts +0 -2
- package/dist/components/molecules/PageHeading/Core/Core.d.ts +0 -4
- package/dist/components/molecules/PageHeading/Core/index.d.ts +0 -2
- package/dist/components/molecules/PageHeading/Stream/Stream.d.ts +0 -4
- package/dist/components/molecules/PageHeading/Stream/Stream.style.d.ts +0 -1
- package/dist/components/molecules/PageHeading/Stream/index.d.ts +0 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline,
|
|
1
|
+
import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls } from './components';
|
|
2
2
|
import { devices, breakpoints } from './styles/viewports';
|
|
3
3
|
import zIndexes from './styles/zIndexes';
|
|
4
4
|
import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeColor, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps } from './types';
|
|
@@ -8,4 +8,4 @@ import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButto
|
|
|
8
8
|
import HarmonicThemeProvider from './styles/HarmonicThemeProvider';
|
|
9
9
|
import { HarmonicSize } from './types/typography';
|
|
10
10
|
import { HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './components/Typography';
|
|
11
|
-
export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline,
|
|
11
|
+
export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };
|
|
@@ -2,7 +2,7 @@ import { AnchorHTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactElemen
|
|
|
2
2
|
import { StyledProps } from 'styled-components';
|
|
3
3
|
import { ButtonType } from './buttonTypes';
|
|
4
4
|
import { DirectionType, IconNameType } from './iconTypes';
|
|
5
|
-
import {
|
|
5
|
+
import { IVideoWithControlsSettings, ThemeColor, ThemeType } from './types';
|
|
6
6
|
import { HarmonicSize, HeaderHierarchy, TypographyLevel } from './typography';
|
|
7
7
|
export interface IEditorialProps {
|
|
8
8
|
/**
|
|
@@ -153,9 +153,9 @@ export interface IThemePageHeadingProps {
|
|
|
153
153
|
*/
|
|
154
154
|
sponsor?: boolean;
|
|
155
155
|
/**
|
|
156
|
-
*
|
|
156
|
+
* Header Hierarchy for the title. Default is h1.
|
|
157
157
|
*/
|
|
158
|
-
|
|
158
|
+
hierarchy: HeaderHierarchy;
|
|
159
159
|
/**
|
|
160
160
|
* Character limit for the text
|
|
161
161
|
*/
|
|
@@ -164,6 +164,18 @@ export interface IThemePageHeadingProps {
|
|
|
164
164
|
* Character limit for the title
|
|
165
165
|
*/
|
|
166
166
|
titleCharLimit?: number;
|
|
167
|
+
/**
|
|
168
|
+
* Class name for theme styling
|
|
169
|
+
*/
|
|
170
|
+
className?: string;
|
|
171
|
+
/**
|
|
172
|
+
* Show Cinema / Stream badge
|
|
173
|
+
*/
|
|
174
|
+
showBadge?: boolean;
|
|
175
|
+
/**
|
|
176
|
+
* Theme for badge
|
|
177
|
+
*/
|
|
178
|
+
theme: ThemeType;
|
|
167
179
|
}
|
|
168
180
|
export interface IPageHeadingProps extends IThemePageHeadingProps {
|
|
169
181
|
/**
|
|
@@ -267,7 +279,7 @@ export interface IPanelHeadingProps {
|
|
|
267
279
|
/**
|
|
268
280
|
* Colour of the info panel background
|
|
269
281
|
*/
|
|
270
|
-
color?:
|
|
282
|
+
color?: ThemeColor;
|
|
271
283
|
/**
|
|
272
284
|
* Reference of the div to scroll to when clicking on Scroll Down
|
|
273
285
|
*/
|
package/dist/types/footer.d.ts
CHANGED
|
@@ -1,20 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare type CommonLink = {
|
|
3
|
-
href: string;
|
|
4
|
-
title: string;
|
|
5
|
-
dataRoh: string;
|
|
6
|
-
};
|
|
7
|
-
export declare type PolicyLink = CommonLink & {
|
|
8
|
-
name: string;
|
|
9
|
-
};
|
|
10
|
-
export declare type SocialMediaLink = {
|
|
11
|
-
dataRoh: string;
|
|
12
|
-
name: IconNameType;
|
|
13
|
-
href: string;
|
|
14
|
-
};
|
|
15
|
-
export declare type ExternalLink = CommonLink & {
|
|
16
|
-
target?: string;
|
|
17
|
-
};
|
|
1
|
+
import { CommonLink, ExternalLink, PolicyLink, SocialMediaLink } from './links';
|
|
18
2
|
export declare type Newsletter = {
|
|
19
3
|
text: string;
|
|
20
4
|
link: CommonLink;
|
|
@@ -26,6 +10,7 @@ export declare type FooterData = {
|
|
|
26
10
|
contact: CommonLink;
|
|
27
11
|
artsLogo: ExternalLink;
|
|
28
12
|
additionalInfo: string;
|
|
13
|
+
sponsorImageSource?: string;
|
|
29
14
|
};
|
|
30
15
|
export interface IFooterProps {
|
|
31
16
|
data: FooterData;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { IconNameType } from './iconTypes';
|
|
2
|
+
export declare type CommonLink = {
|
|
3
|
+
href: string;
|
|
4
|
+
title: string;
|
|
5
|
+
dataRoh: string;
|
|
6
|
+
};
|
|
7
|
+
export declare type PolicyLink = CommonLink & {
|
|
8
|
+
name: string;
|
|
9
|
+
};
|
|
10
|
+
export declare type SocialMediaLink = {
|
|
11
|
+
dataRoh: string;
|
|
12
|
+
name: IconNameType;
|
|
13
|
+
href: string;
|
|
14
|
+
};
|
|
15
|
+
export declare type ExternalLink = CommonLink & {
|
|
16
|
+
target?: string;
|
|
17
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
import { DirectionType, IconNameType } from './iconTypes';
|
|
3
|
-
import { Colors, IOptionItem } from './types';
|
|
3
|
+
import { Colors, IOptionItem, ThemeColor } from './types';
|
|
4
4
|
export interface IAccountProps {
|
|
5
5
|
/**
|
|
6
6
|
* The text of the title
|
|
@@ -245,7 +245,7 @@ export declare type AnchorBarTab = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
|
245
245
|
/**
|
|
246
246
|
* Color of text and icon
|
|
247
247
|
*/
|
|
248
|
-
color?:
|
|
248
|
+
color?: ThemeColor;
|
|
249
249
|
};
|
|
250
250
|
export interface IAnchorBarAbsolutePositionParams {
|
|
251
251
|
/**
|
|
@@ -342,11 +342,11 @@ export interface ITabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
|
342
342
|
/**
|
|
343
343
|
* Color of text and icon
|
|
344
344
|
*/
|
|
345
|
-
color?:
|
|
345
|
+
color?: ThemeColor;
|
|
346
346
|
/**
|
|
347
347
|
* Color of text and icon on hover
|
|
348
348
|
*/
|
|
349
|
-
hoverColor?:
|
|
349
|
+
hoverColor?: ThemeColor;
|
|
350
350
|
/**
|
|
351
351
|
* Set if tab is selected or not
|
|
352
352
|
*/
|
package/dist/types/types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { ReactNode, AnchorHTMLAttributes, MouseEventHandler, ReactElement } from
|
|
|
2
2
|
import { StyledProps } from 'styled-components';
|
|
3
3
|
import { IconNameType, DirectionType } from './iconTypes';
|
|
4
4
|
import { TypographyLevel, TypographyType } from './typography';
|
|
5
|
+
import type { ExternalLink } from './links';
|
|
5
6
|
export declare enum Colors {
|
|
6
7
|
White = "white",
|
|
7
8
|
Black = "black",
|
|
@@ -117,6 +118,10 @@ export interface ITabProps {
|
|
|
117
118
|
* To keep selected the title of the Tab
|
|
118
119
|
*/
|
|
119
120
|
selected?: boolean;
|
|
121
|
+
/**
|
|
122
|
+
* Icon direction
|
|
123
|
+
*/
|
|
124
|
+
iconDirection?: DirectionType;
|
|
120
125
|
/**
|
|
121
126
|
* The name of the icon
|
|
122
127
|
*/
|
|
@@ -149,6 +154,10 @@ export interface ITabProps {
|
|
|
149
154
|
* Additional CSS class names to apply to the navigation component.
|
|
150
155
|
*/
|
|
151
156
|
className?: string;
|
|
157
|
+
/**
|
|
158
|
+
* The unique ID to assign to the link element.
|
|
159
|
+
*/
|
|
160
|
+
tabLinkId?: string;
|
|
152
161
|
/**
|
|
153
162
|
* Defines the ARIA role of the element for accessibility purposes.
|
|
154
163
|
*/
|
|
@@ -157,6 +166,10 @@ export interface ITabProps {
|
|
|
157
166
|
* Provides an accessible label for screen readers to describe the element's purpose.
|
|
158
167
|
*/
|
|
159
168
|
ariaLabel?: string;
|
|
169
|
+
/**
|
|
170
|
+
* Text color
|
|
171
|
+
*/
|
|
172
|
+
color?: ThemeColor;
|
|
160
173
|
}
|
|
161
174
|
export interface IDropdownProps {
|
|
162
175
|
/**
|
|
@@ -207,6 +220,10 @@ export interface IDropdownProps {
|
|
|
207
220
|
* Provides an accessible label for screen readers to describe the element's purpose.
|
|
208
221
|
*/
|
|
209
222
|
ariaLabel?: string;
|
|
223
|
+
/**
|
|
224
|
+
* The unique ID to assign to the link element inside the tab.
|
|
225
|
+
*/
|
|
226
|
+
tabLinkId?: string;
|
|
210
227
|
}
|
|
211
228
|
export interface ITabsProps {
|
|
212
229
|
/**
|
|
@@ -268,6 +285,10 @@ export interface IControlledDropdownProps {
|
|
|
268
285
|
* Callback called when main link or option are focused
|
|
269
286
|
*/
|
|
270
287
|
onFocus?: () => void;
|
|
288
|
+
/**
|
|
289
|
+
* Callback called when focus leaves element
|
|
290
|
+
*/
|
|
291
|
+
onFocusLeave?: () => void;
|
|
271
292
|
/**
|
|
272
293
|
* Callback called when main link or last option lose focus
|
|
273
294
|
*/
|
|
@@ -375,29 +396,29 @@ export interface IGridItemProps extends StyledProps<any> {
|
|
|
375
396
|
*/
|
|
376
397
|
columnSpanSmallDevice?: number;
|
|
377
398
|
}
|
|
378
|
-
export interface ISponsorLogoProps {
|
|
379
|
-
/**
|
|
380
|
-
* Color for the logo
|
|
381
|
-
*/
|
|
382
|
-
colorLogo?: string;
|
|
399
|
+
export interface ISponsorLogoProps extends ExternalLink {
|
|
383
400
|
/**
|
|
384
|
-
*
|
|
401
|
+
* S3 Image source
|
|
385
402
|
*/
|
|
386
|
-
|
|
403
|
+
imageSource?: string;
|
|
387
404
|
/**
|
|
388
405
|
* Alternative text for the logo (used for accessibility)
|
|
389
406
|
*/
|
|
390
407
|
alt?: string;
|
|
408
|
+
/**
|
|
409
|
+
* Content to be displayed within the component.
|
|
410
|
+
*/
|
|
411
|
+
children?: ReactNode;
|
|
412
|
+
/**
|
|
413
|
+
* Additional CSS class names to apply to the navigation component.
|
|
414
|
+
*/
|
|
415
|
+
className?: string;
|
|
391
416
|
}
|
|
392
417
|
export interface ISponsorshipProps {
|
|
393
418
|
/**
|
|
394
419
|
* Source URL for Sponsorship IFRAME.
|
|
395
420
|
*/
|
|
396
421
|
src?: string;
|
|
397
|
-
/**
|
|
398
|
-
* Alt Text for image.
|
|
399
|
-
*/
|
|
400
|
-
altText?: string;
|
|
401
422
|
/**
|
|
402
423
|
* Used for Analytics.
|
|
403
424
|
*/
|
|
@@ -406,10 +427,6 @@ export interface ISponsorshipProps {
|
|
|
406
427
|
* Used for Accessibility.
|
|
407
428
|
*/
|
|
408
429
|
title?: string;
|
|
409
|
-
/**
|
|
410
|
-
* Used to determine that there is custom data for Sponsorship
|
|
411
|
-
*/
|
|
412
|
-
isCustomImage?: boolean;
|
|
413
430
|
}
|
|
414
431
|
export interface ITextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
415
432
|
children: ReactNode;
|
package/package.json
CHANGED
package/README.GIT
DELETED
|
@@ -1,278 +0,0 @@
|
|
|
1
|
-
# Royal Opera House Harmonic - Front End Design System
|
|
2
|
-
|
|
3
|
-
Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/harmonic`
|
|
4
|
-
|
|
5
|
-
This package is a library of UI components intended to be used in the ROH website.
|
|
6
|
-
|
|
7
|
-
It uses React, TypeScript, TSDX and Storybook.
|
|
8
|
-
|
|
9
|
-
The NPM packages are published at [Royal Opera House - Harmonic](https://www.npmjs.com/package/@royaloperahouse/harmonic)
|
|
10
|
-
|
|
11
|
-
The Storybook for the latest version of the library is hosted at [Storybook - Harmonic] TODO: S3 deployment
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
## Prerequisites
|
|
15
|
-
---
|
|
16
|
-
|
|
17
|
-
* Make sure the required package dependencies are installed using `yarn install`
|
|
18
|
-
* If this is the first time you are working on Harmonic, make sure to run `yarn build` to build all the modules.
|
|
19
|
-
|
|
20
|
-
* **To deploy the storybook publicly** you will need credentials for the **parent** 'Royal Opera House' AWS account in your `~/.aws/credentials` file.
|
|
21
|
-
* The deploy script expects these to be called `[parent]`.
|
|
22
|
-
|
|
23
|
-
* You can find these values at:
|
|
24
|
-
|
|
25
|
-
*AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
|
|
26
|
-
|
|
27
|
-
* **To deploy a preview** for demo / QA you will need the `CHROMATIC_PROJECT_TOKEN` -- find this in 1Password. Creating your own Chromatic account is advised if multiple builds are necessary.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
* **To enable publishing to the NPM package**:
|
|
31
|
-
* Create account / log in to NPM
|
|
32
|
-
* Ask a colleague with admin rights to be added as a contributer
|
|
33
|
-
* Generate your own ROH `NPM_TOKEN` (store this token in 1Password)
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
## Versioning
|
|
37
|
-
---
|
|
38
|
-
|
|
39
|
-
We use [Semantic Versioning](https://semver.org/) for Harmonic.
|
|
40
|
-
|
|
41
|
-
Given a version number MAJOR.MINOR.PATCH, increment the:
|
|
42
|
-
|
|
43
|
-
* MAJOR version when you make incompatible library changes
|
|
44
|
-
* MINOR version when you add functionality in a backwards compatible manner
|
|
45
|
-
* PATCH version when you make backwards compatible bug fixes
|
|
46
|
-
|
|
47
|
-
When you create a new release always update the `CHANGELOG` and `package.json`
|
|
48
|
-
|
|
49
|
-
Increment your version from the latest stable version on [Royal Opera House - Harmonic](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions)
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
## Deploying the Storybook
|
|
53
|
-
---
|
|
54
|
-
|
|
55
|
-
### **1. To build and deploy locally**
|
|
56
|
-
|
|
57
|
-
You can quickly build and serve the contents of `/storybook-static` from your local machine, for development and manual testing. To do this run:
|
|
58
|
-
|
|
59
|
-
```bash
|
|
60
|
-
yarn storybook
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
By default the storybook will be accessible at
|
|
64
|
-
[http://localhost:6006/]()
|
|
65
|
-
|
|
66
|
-
The server will hot-reload on most changes.
|
|
67
|
-
|
|
68
|
-
### **2. To deploy a preview version remotely**
|
|
69
|
-
|
|
70
|
-
You can deploy a release candidate, or work-in-progress to [Chromatic](https://www.chromatic.com/) for showcase or QA.
|
|
71
|
-
|
|
72
|
-
**NOTE:** you will need the `CHROMATIC_PROJECT_TOKEN` as described in *Prerequisites* above.
|
|
73
|
-
|
|
74
|
-
Either set the token as a shell variable or use a `.env` file in the `harmonic` root directory containing the token, as so:
|
|
75
|
-
|
|
76
|
-
```
|
|
77
|
-
CHROMATIC_PROJECT_TOKEN=tokengoeshere
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Run:
|
|
81
|
-
```
|
|
82
|
-
CHROMATIC_PROJECT_TOKEN=tokengoeshere yarn deploy-storybook-dev
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
to build and deploy the storybook from your repo to Chromatic.
|
|
86
|
-
|
|
87
|
-
You will find the address of your deployed storybook in the console output, looking something like this:
|
|
88
|
-
|
|
89
|
-
`→ View your Storybook at https://randomHexString-randomAlphabeticalString.chromatic.com`
|
|
90
|
-
|
|
91
|
-
### **3. To deploy a release version**
|
|
92
|
-
|
|
93
|
-
You can deploy the contents of `./storybook-static` to S3 as a static site, which is permanently accessible at [WIP] TODO: S3 deployment
|
|
94
|
-
|
|
95
|
-
**NOTE:** To do this you will need the correct `AWS` credentials set up, as described in *Prerequisites* above.
|
|
96
|
-
|
|
97
|
-
First build the storybook using:
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
yarn build-storybook
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
then run:
|
|
104
|
-
|
|
105
|
-
```bash
|
|
106
|
-
yarn deploy-storybook
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
> **IMPORTANT:** This URL is intended to showcase the latest stable version of Harmonic, it should be kept up to date with the `main` Harmonic branch and should **only** be used for release versions. If you want to deploy a development version follow the steps above under *To deploy a preview version remotely*.
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
## Releasing a New Package Version
|
|
113
|
-
---
|
|
114
|
-
|
|
115
|
-
This is the procedure for releasing a new Harmonic NPM package.
|
|
116
|
-
|
|
117
|
-
There are two types of package:
|
|
118
|
-
|
|
119
|
-
A **snapshot** can be published to use a development version of the Harmonic library in our frontend staging environments, to perform integrated, manual testing.
|
|
120
|
-
|
|
121
|
-
A **stable** package is published for use in production.
|
|
122
|
-
|
|
123
|
-
**NOTE:** You will need the `NPM_TOKEN`, as described in 'Prerequisites' above.
|
|
124
|
-
|
|
125
|
-
### **1. To release a snapshot version**
|
|
126
|
-
|
|
127
|
-
> **IMPORTANT:** Make sure you always publish your **snapshots** from `development` after merging in your feature branch.
|
|
128
|
-
|
|
129
|
-
For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Harmonic Library, as found in [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), followed by an **unused** lowercase letter.
|
|
130
|
-
|
|
131
|
-
For example, if the latest stable release was 1.42.0, and the last snapshot published to NPM was 1.42.0-w, you would use RELEASE_VERSION `1.42.0-x`
|
|
132
|
-
|
|
133
|
-
To publish a snapshot use:
|
|
134
|
-
|
|
135
|
-
```bash
|
|
136
|
-
NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
The version published to NPM will be named, e.g. `1.42.0-a-harmonic-development`, use this to install the snapshot package in the frontend repos.
|
|
140
|
-
|
|
141
|
-
### **2. To release a stable version**
|
|
142
|
-
|
|
143
|
-
> **IMPORTANT:** Make sure you always publish your **stable** packages from `main` after merging in your feature branch.
|
|
144
|
-
|
|
145
|
-
For stable releases, increment your version from the latest **stable** version found on [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), following the rules described in *Versioning* above, and use this as `RELEASE_VERSION`. (Make sure it matches the version in your `package.json` and `CHANGELOG.md`!)
|
|
146
|
-
|
|
147
|
-
To publish a stable package use:
|
|
148
|
-
|
|
149
|
-
```bash
|
|
150
|
-
NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
## Using the Package
|
|
155
|
-
---
|
|
156
|
-
|
|
157
|
-
The package is deployed to NPM, and can be installed using yarn or npm:
|
|
158
|
-
|
|
159
|
-
```bash
|
|
160
|
-
npm i --save @royaloperahouse/harmonic
|
|
161
|
-
```
|
|
162
|
-
```bash
|
|
163
|
-
yarn add @royaloperahouse/harmonic
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
## Testing
|
|
168
|
-
---
|
|
169
|
-
|
|
170
|
-
To **Lint** the package use:
|
|
171
|
-
|
|
172
|
-
```bash
|
|
173
|
-
yarn lint
|
|
174
|
-
# Use the --fix option to perform automatic fixes
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
To run the **unit tests** (using Jest) use:
|
|
178
|
-
|
|
179
|
-
```bash
|
|
180
|
-
yarn test
|
|
181
|
-
|
|
182
|
-
# Use the -u option to update snapshots if needed
|
|
183
|
-
# Run `yarn test:watch` to re-run tests on changes
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
To **run and and store the unit tests** for display in storybook use:
|
|
187
|
-
|
|
188
|
-
```bash
|
|
189
|
-
yarn test-storybook
|
|
190
|
-
# Use the -u option to update snapshots if needed
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
## Development Process
|
|
195
|
-
---
|
|
196
|
-
|
|
197
|
-
### **1. Branching Model**
|
|
198
|
-
* The Harmonic project lives in the `harmonic-library/harmonic` *repository*
|
|
199
|
-
* When working on Harmonic, treat the `harmonic` directory as your root
|
|
200
|
-
* The Harmonic **development** branch is for QA
|
|
201
|
-
* The Harmonic **main** branch is currently for stable releases
|
|
202
|
-
* All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. `feature/RD-12345-add-example-component`
|
|
203
|
-
* Always create your feature branch FROM, and submit pull requests TO, the **main** branch
|
|
204
|
-
* For **QA / UAT** of a Harmonic component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
|
|
205
|
-
* For releasing an **NPM snapshot**: merge your feature branch into the **development** branch and publish the NPM snapshot from there
|
|
206
|
-
|
|
207
|
-
### **2. Detailed Workflow**
|
|
208
|
-
|
|
209
|
-
#### **Before review:**
|
|
210
|
-
|
|
211
|
-
* Git pull the latest version of Harmonic from `main`
|
|
212
|
-
* Checkout a new, correctly-named feature branch from `main`
|
|
213
|
-
* Do your work on this feature branch
|
|
214
|
-
* Run: `yarn lint --fix`
|
|
215
|
-
* Run: `yarn test -u`
|
|
216
|
-
* Commit your changes
|
|
217
|
-
* Create a pull request from your feature branch to `main`
|
|
218
|
-
* Add the appropriate reviewers
|
|
219
|
-
|
|
220
|
-
#### **Before QA / UAT:**
|
|
221
|
-
|
|
222
|
-
After your PR is approved, you have two options:
|
|
223
|
-
|
|
224
|
-
**i.** For QA of a component in isolation:
|
|
225
|
-
|
|
226
|
-
* Follow the steps above in *Deploying the Storybook -> 2. Deploying a preview version remotely*
|
|
227
|
-
* Share the generated Chromatic URL with the appropriate people for QA / UAT
|
|
228
|
-
|
|
229
|
-
**ii.** For integrated testing of a component in the frontend staging environments:
|
|
230
|
-
|
|
231
|
-
* Check out the `development` branch
|
|
232
|
-
* Merge your work in to `development`
|
|
233
|
-
* Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
|
|
234
|
-
* Git push the updated `development` branch to remote
|
|
235
|
-
* Finally, in the frontend repo:
|
|
236
|
-
|
|
237
|
-
1. Update the `package.json` to reference the new snapshot version
|
|
238
|
-
2. Run: `yarn install`
|
|
239
|
-
3. Deploy the frontend to a staging environment
|
|
240
|
-
|
|
241
|
-
#### **When ready for production:**
|
|
242
|
-
|
|
243
|
-
* Return to your Harmonic **feature branch**
|
|
244
|
-
* Update the HArmonic version in `package.json`, incrementing from the last **stable** release, found in [npm Harmonic - Versions](https://www.npmjs.com/package/@royaloperahouse/harmonic?activeTab=versions), and following the rules described in the *Versioning* section
|
|
245
|
-
* Update `CHANGELOG.md`, adding the new version number and a short description of your changes
|
|
246
|
-
* Run: `yarn lint --fix`
|
|
247
|
-
* Run: `yarn test -u`
|
|
248
|
-
* Run: `yarn test-storybook -u`
|
|
249
|
-
* Run: `yarn build-storybook`
|
|
250
|
-
* Git commit, push, and update your PR for final approval
|
|
251
|
-
* Merge your approved PR to `main`
|
|
252
|
-
* Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
|
|
253
|
-
* Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public Harmonic Storybook page
|
|
254
|
-
|
|
255
|
-
Once you have successfully published a new release version, you can open a ticket to update to this version in any of the frontend repos.
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
## Notes
|
|
259
|
-
---
|
|
260
|
-
### The `storybook-static` folder
|
|
261
|
-
|
|
262
|
-
This folder contains all the HTML / JS required to deploy the Storybook as a static site. It's autogenerated whenever the Storybook is built and therefore will show up a lot of merge conflicts when you merge other branches into your feature branch. It is best to leave generating the storybook until the later part of your workflow, but in case you run into conflicts earlier, it's ok to just delete the folder and regenerate using:
|
|
263
|
-
|
|
264
|
-
```bash
|
|
265
|
-
yarn build-storybook
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
For the same reason changes to this folder will cause a lot of big diffs, when looking at a PR, but can mostly be skimmed over unless something looks unusual.
|
|
269
|
-
|
|
270
|
-
---
|
|
271
|
-
### Examples
|
|
272
|
-
|
|
273
|
-
There is an example implementation in the example folder. Alternatively there are also integration examples in storybook. Make sure to keep these updated so as to showcase the current components available.
|
|
274
|
-
|
|
275
|
-
---
|
|
276
|
-
### Bundle analysis
|
|
277
|
-
|
|
278
|
-
Calculate the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visualize it with `yarn analyze`.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const StreamWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|