@royaloperahouse/chord 0.3.0 → 0.3.1

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/CHANGELOG.md ADDED
@@ -0,0 +1,10 @@
1
+ # CHANGELOG
2
+
3
+ ## [0.3.0]
4
+ - Design system project renamed and moved to chord
5
+
6
+ ## [0.2.0]
7
+ - public NPM Library
8
+
9
+ ## [0.1.0]
10
+ - Initial version
package/README.GIT ADDED
@@ -0,0 +1,99 @@
1
+ # Royal Opera House - Front End Design System
2
+
3
+ Welcome to the Royal Opera House Front End Design System, `@royaloperahouse/chord`.
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
+ ## Commands
10
+
11
+ The required package dependencies need to be insalled using `yarn`. Once ready you can issue the following:
12
+
13
+ To run Lint on the package use:
14
+
15
+ ```bash
16
+ yarn lint # you can also use the --fix option to perform automatic fixes
17
+ ```
18
+
19
+ To run the unit tests (using Jest) use:
20
+
21
+ ```bash
22
+ yarn test # you can also use the -u option to update snapshots if needed
23
+ ```
24
+
25
+ To run the unit tests (using Jest) and store them for display in storybook use:
26
+
27
+ ```bash
28
+ yarn test-storybook # you can also use the -u option to update snapshots if needed
29
+ ```
30
+
31
+ To run storybook use:
32
+
33
+ ```bash
34
+ yarn storybook
35
+ ```
36
+
37
+ To build a static version of storybook use:
38
+
39
+ ```bash
40
+ yarn build-storybook
41
+ ```
42
+
43
+ This will create a static copy in `./storybook-static`, and there is an index.html page inside the core directory. This allows the site to be previewed directly in the git repository via serving pages (it needs to be configured for that branch).
44
+
45
+ To build the package use:
46
+
47
+ ```bash
48
+ yarn build
49
+ ```
50
+
51
+ To release a new version.
52
+
53
+ Release will be published in npm (NPM_TOKEN will be required)
54
+ Storybook will be pushed to bitbucket. *** Push will be done Ensure you don't have things pendint to push
55
+
56
+ ```bash
57
+ NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
58
+ ```
59
+
60
+
61
+ MORE INFO TO FOLLOW - PARTICULARLY FOR THE CI SETUP AND HOW PACKAGES ARE PUSHED.
62
+
63
+ # Recommended Use of Package
64
+
65
+ The package is deployed to NPM, and can be installed using yarn or npm:
66
+
67
+ ```bash
68
+ npm i --save @royaloperahouse/chord
69
+ ```
70
+ ```bash
71
+ yarn add @royaloperahouse/chord
72
+ ```
73
+
74
+ # Processes to follow prior to commits
75
+
76
+ Before a commit is made you need to do the following:
77
+
78
+ - Make sure that you are in your own work branch (properly named, including the JIRA ticket number and a short description)
79
+ - `yarn lint` - ensure that you are not introducing errors
80
+ - `yarn test` - ensure that tests are running as expected
81
+ - `yarn test-storybook` - Save the test results to for the static site
82
+ - `yarn build-storybook` - Update the static site
83
+ - Commit your changes in your branch locally
84
+
85
+ Next, if you are ready to merge into the main development branch then:
86
+
87
+ - _*ensure that you pull the latest changes from that branch into your new branch, resolving any merge conflicts that may arise*_
88
+ - Commit any merge changes locally
89
+ - Push your branch changes to the origin repo
90
+ - Raise a Pull Request to merge back into the main development branch, AND ensure that the required reviewers are assigned.
91
+ - The reviewers may raise issues, and once resolved, they will be responsible for performing the merge.
92
+
93
+ ### Example
94
+
95
+ 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.
96
+
97
+ ### Bundle analysis
98
+
99
+ Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visulize it with `yarn analyze`.
package/README.md CHANGED
@@ -1,91 +1,68 @@
1
- # Royal Opera House - Front End Design System
1
+ # Royal Opera House - chord
2
2
 
3
- Welcome to the Royal Opera House Front End Design System, `@roh-frontend/design-system`.
3
+ Welcome to the Royal Opera House library components `@royaloperahouse/chord`.
4
4
 
5
5
  This package is a library of UI components intended to be used in the ROH website.
6
6
 
7
- It uses React, TypeScript, TSDX and Storybook.
8
7
 
9
- ## Commands
10
-
11
- The required package dependencies need to be insalled using `yarn`. Once ready you can issue the following:
12
-
13
- To run Lint on the package use:
14
-
15
- ```bash
16
- yarn lint # you can also use the --fix option to perform automatic fixes
17
- ```
18
-
19
- To run the unit tests (using Jest) use:
20
-
21
- ```bash
22
- yarn test # you can also use the -u option to update snapshots if needed
23
- ```
24
-
25
- To run the unit tests (using Jest) and store them for display in storybook use:
26
-
27
- ```bash
28
- yarn test-storybook # you can also use the -u option to update snapshots if needed
29
- ```
30
-
31
- To run storybook use:
8
+ ## Install
32
9
 
33
10
  ```bash
34
- yarn storybook
11
+ npm i --save @royaloperahouse/chord
35
12
  ```
36
-
37
- To build a static version of storybook use:
38
-
39
13
  ```bash
40
- yarn build-storybook
14
+ yarn add @royaloperahouse/chord
41
15
  ```
42
16
 
43
- This will create a static copy in `./storybook-static`, and there is an index.html page inside the core directory. This allows the site to be previewed directly in the git repository via serving pages (it needs to be configured for that branch).
17
+ ## Usage
44
18
 
45
- To build the package use:
19
+ ```javascript
20
+ import {
21
+ Footer, GlobalStyles, ThemeProvider, ThemeType,
22
+ } from '@royaloperahouse/chord';
46
23
 
47
- ```bash
48
- yarn build
49
24
  ```
25
+ ## Sample
26
+
27
+ ```javascript
28
+
29
+ import {
30
+ Footer, GlobalStyles, ThemeProvider, ThemeType,
31
+ } from '@royaloperahouse/chord';
32
+
33
+
34
+ const App = ({ children }: InnerProps): React.ReactElement => (
35
+ <ErrorBoundary>
36
+ <ThemeProvider theme={ThemeType.Core}>
37
+ <GlobalStyles />
38
+ <Wrapper>
39
+ <Header />
40
+ <GlobalStyle />
41
+ <HealthBanner />
42
+ <ErrorBoundary>
43
+ <Content>
44
+ {children}
45
+ </Content>
46
+ </ErrorBoundary>
47
+ <LiveChat />
48
+ </Wrapper>
49
+ <Footer data={footerData} />
50
+ </ThemeProvider>
51
+ </ErrorBoundary>
52
+ );
50
53
 
51
- To release a new version.
52
- Release will be publishe in npm (NPM_TOKEN will be required)
53
- Storybook will be pushed to bitbucket. *** Push will be done Ensure you don't have things pendint to push
54
-
55
- ```bash
56
- NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
57
54
  ```
58
55
 
56
+ ## Components
59
57
 
60
- MORE INFO TO FOLLOW - PARTICULARLY FOR THE CI SETUP AND HOW PACKAGES ARE PUSHED.
61
-
62
- # Recommended Use of Package
63
-
64
- `TODO`
65
-
66
- # Processes to follow prior to commits
67
-
68
- Before a commit is made you need to do the following:
69
-
70
- - Make sure that you are in your own work branch (properly named, including the JIRA ticket number and a short description)
71
- - `yarn lint` - ensure that you are not introducing errors
72
- - `yarn test` - ensure that tests are running as expected
73
- - `yarn test-storybook` - Save the test results to for the static site
74
- - `yarn build-storybook` - Update the static site
75
- - Commit your changes in your branch locally
58
+ Editorial, Footer, GlobalStyles, Grid, GridItem, Heading, Icon, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, SecondaryButton, SectionSplitter, SectionTitle, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, TypeTags
76
59
 
77
- Next, if you are ready to merge into the main development branch then:
78
60
 
79
- - _*ensure that you pull the latest changes from that branch into your new branch, resolving any merge conflicts that may arise*_
80
- - Commit any merge changes locally
81
- - Push your branch changes to the origin repo
82
- - Raise a Pull Request to merge back into the main development branch, AND ensure that the required reviewers are assigned.
83
- - The reviewers may raise issues, and once resolved, they will be responsible for performing the merge.
61
+ ## Types
84
62
 
85
- ### Example
63
+ ThemeType
86
64
 
87
- TODO
88
65
 
89
- ### Bundle analysis
66
+ ## Documentation
90
67
 
91
- Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visulize it with `yarn analyze`.
68
+ See Storybook as a reference