Skip to content

Commit 66f17fc

Browse files
dleadbetterdleadbetter
authored
Merge pull request #158 from performant-software/feature/udcsl34_media_types
UDCSL #34 - Media types
2 parents 9fb78ba + af4559b commit 66f17fc

Some content is hidden

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

44 files changed

+2478
-181
lines changed

‎README.md‎

Lines changed: 9 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -49,62 +49,29 @@ const MyComponent = (props) => (
4949
);
5050
```
5151

52-
### GitPkg
53-
There may be some scenarios where we want to test out new components within the project that will actually consume it prior to releasing a new version on NPM.
52+
## Beta
53+
Sometimes it may be necessary to test your consuming application prior to creating a release. For example, you just added a new component and want to test it out in the application to make sure everything looks and works as expected.
5454

55-
For this we can use [gitpkg](https://gitpkg.vercel.app/) as a proxy to point to our dev branch:
55+
For this we can use NPM's "beta" tags. This will allow the compiled code to be added as a dependency from NPM, but will not map to the "latest" release for production.
5656

57-
#### Step 1: Update react-components package.json
58-
Update all package.json file to use gitpkg instead of NPM version:
57+
Let's say the current version number is "0.5.15". You can update all of the versions in `package.json` to "0.5.16-beta.0" and publish the package(s) to NPM via:
5958

60-
Before:
61-
```json
62-
{
63-
"dependencies": {
64-
"@performant-software/shared-components": "^1.0.0"
65-
}
66-
}
6759
```
68-
69-
After:
70-
```json
71-
{
72-
"dependencies": {
73-
"@performant-software/shared-components": "https://gitpkg.now.sh/performant-software/react-components/packages/shared?<branch-name>&scripts.prepare=%26%26%20yarn%20build"
74-
}
75-
}
60+
npm publish --tag beta
7661
```
7762

78-
Run `yarn install` and commit the changes to your branch.
79-
80-
❗Make sure to include the `scripts` parameter in order to build the dependency in your consuming project.
81-
82-
❗Make sure to revert these changes prior to creating an NPM release.
83-
84-
#### Step 2: Update your projects package.json
85-
Update your projects package.json file to use gitpkg instead of the NPM version. You'll also want to add the package's dependencies as dependencies in your project. For example: If your project uses `@performant-software/semantic-components`, you'll also want to add `@performant-software/shared` and `@performant-software/webpack-config` as dependencies to your project temporarily.
86-
87-
Before:
88-
```json
89-
{
90-
"dependencies": {
91-
"@performant-software/semantic-components": "^1.0.0"
92-
}
93-
}
94-
```
63+
Then, in your consuming application, update your dependencies as follows:
9564

96-
After:
9765
```json
9866
{
9967
"dependencies": {
100-
"@performant-software/semantic-components": "https://gitpkg.now.sh/performant-software/react-components/packages/semantic-ui?<branch_name>&scripts.prepare=%26%26%20yarn%20build",
101-
"@performant-software/shared-components": "https://gitpkg.now.sh/performant-software/react-components/packages/shared?<branch_name>&scripts.prepare=%26%26%20yarn%20build",
102-
"@performant-software/webpack-config": "https://gitpkg.now.sh/performant-software/react-components/packages/webpack?<branch_name>&scripts.prepare=%26%26%20yarn%20build"
68+
"@performant-software/semantic-components": "0.5.16-beta.0",
69+
"@performant-software/shared-components": "0.5.16-beta.0"
10370
}
10471
}
10572
```
10673

107-
Notice that the gitpkg URLs contain the name of the directory in the GitHub repository, rather than the name of the published NPM package.
74+
After all testing has passed, create your release of `0.5.16`. See publishing below.
10875

10976
## Publishing
11077

‎packages/semantic-ui/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/semantic-components",
3-
"version": "0.5.15",
3+
"version": "0.5.16",
44
"description": "A package of shared components based on the Semantic UI Framework.",
55
"license": "MIT",
66
"main": "./build/index.js",
@@ -12,7 +12,7 @@
1212
"build": "webpack --mode production && flow-copy-source -v src types"
1313
},
1414
"dependencies": {
15-
"@performant-software/shared-components": "^0.5.15",
15+
"@performant-software/shared-components": "^0.5.16",
1616
"@react-google-maps/api": "^2.8.1",
1717
"axios": "^0.26.1",
1818
"i18next": "^19.4.4",
@@ -33,7 +33,7 @@
3333
"react-dom": ">= 16.13.1 < 18.0.0"
3434
},
3535
"devDependencies": {
36-
"@performant-software/webpack-config": "^0.5.15",
36+
"@performant-software/webpack-config": "^0.5.16",
3737
"flow-copy-source": "^2.0.9",
3838
"less": "^4.1.2",
3939
"less-loader": "^11.0.0",

‎packages/semantic-ui/src/components/AudioPlayer.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.audio-player.ui.modal > .content > audio {
2+
width: 100%;
3+
}

‎packages/semantic-ui/src/components/AudioPlayer.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// @flow
2+
3+
import React, { useState } from 'react';
4+
import { Button, Message, Modal } from 'semantic-ui-react';
5+
import i18n from '../i18n/i18n';
6+
import ModalContext from '../context/ModalContext';
7+
import './AudioPlayer.css';
8+
9+
type Props = {
10+
centered?: boolean,
11+
onClose: () => void,
12+
open: boolean,
13+
src: string
14+
};
15+
16+
const AudioPlayer = (props: Props) => {
17+
const [error, setError] = useState(false);
18+
19+
return (
20+
<ModalContext.Consumer>
21+
{(mountNode) => (
22+
<Modal
23+
centered={props.centered}
24+
className='audio-player'
25+
mountNode={mountNode}
26+
open={props.open}
27+
>
28+
<Modal.Content>
29+
{ error && (
30+
<Message
31+
content={i18n.t('AudioPlayer.errors.path.content', { path: props.src })}
32+
header={i18n.t('AudioPlayer.errors.path.header')}
33+
icon='exclamation circle'
34+
/>
35+
)}
36+
<audio
37+
controls
38+
onError={() => setError(true)}
39+
src={props.src}
40+
/>
41+
</Modal.Content>
42+
<Modal.Actions>
43+
<Button
44+
content={i18n.t('Common.buttons.close')}
45+
onClick={props.onClose}
46+
/>
47+
</Modal.Actions>
48+
</Modal>
49+
)}
50+
</ModalContext.Consumer>
51+
);
52+
};
53+
54+
export default AudioPlayer;

‎packages/semantic-ui/src/components/DownloadButton.js‎

Lines changed: 63 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,74 @@
11
// @flow
22

3-
import React from 'react';
3+
import React, { useMemo } from 'react';
44
import uuid from 'react-uuid';
5-
import { Button } from 'semantic-ui-react';
5+
import { Icon } from 'semantic-ui-react';
6+
import i18n from '../i18n/i18n';
67

78
type Props = {
9+
basic?: boolean,
10+
className?: string,
11+
color?: string,
12+
compact?: boolean,
813
filename?: string,
14+
primary?: boolean,
15+
size?: string,
16+
secondary?: boolean,
917
url: string
1018
};
1119

12-
const DownloadButton = ({ filename, url, ...button }: Props) => (
13-
<a
14-
download={filename || uuid()}
15-
href={url}
16-
>
17-
<Button
18-
{...button}
19-
/>
20-
</a>
21-
);
20+
const DownloadButton = (props: Props) => {
21+
/**
22+
* Sets the appropriate class names based on the formatting props.
23+
*
24+
* @type {string}
25+
*/
26+
const className = useMemo(() => {
27+
const classNames = ['ui', 'button'];
28+
29+
if (props.basic) {
30+
classNames.push('basic');
31+
}
32+
33+
if (props.className) {
34+
classNames.push(...props.className.split(' '));
35+
}
36+
37+
if (props.color) {
38+
classNames.push(props.color);
39+
}
40+
41+
if (props.compact) {
42+
classNames.push('compact');
43+
}
44+
45+
if (props.primary) {
46+
classNames.push('primary');
47+
}
48+
49+
if (props.secondary) {
50+
classNames.push('secondary');
51+
}
52+
53+
if (props.size) {
54+
classNames.push(props.size);
55+
}
56+
57+
return classNames.join(' ');
58+
}, [props.basic, props.color]);
59+
60+
return (
61+
<a
62+
className={className}
63+
download={props.filename || uuid()}
64+
href={props.url}
65+
>
66+
<Icon
67+
name='cloud download'
68+
/>
69+
{ i18n.t('Common.buttons.download') }
70+
</a>
71+
);
72+
};
2273

2374
export default DownloadButton;

‎packages/semantic-ui/src/components/IIIFModal.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// @flow
2+
3+
import React from 'react';
4+
import { Modal } from 'semantic-ui-react';
5+
import { IIIFViewer } from '@performant-software/shared-components';
6+
7+
type Props = {
8+
onClose: () => void
9+
};
10+
11+
const IIIFModal = ({ onClose, ...props }: Props) => (
12+
<Modal
13+
centered={false}
14+
closeIcon
15+
onClose={onClose}
16+
open
17+
>
18+
<Modal.Content>
19+
<IIIFViewer
20+
{...props}
21+
/>
22+
</Modal.Content>
23+
</Modal>
24+
);
25+
26+
export default IIIFModal;

‎packages/semantic-ui/src/components/LazyAudio.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.lazy-audio.ui.segment {
2+
display: inline-block !important;
3+
max-width: 100%;
4+
padding: 0;
5+
}
6+
7+
.lazy-audio.ui.segment .buttons {
8+
display: flex;
9+
flex-direction: column;
10+
}
11+
12+
.lazy-audio.ui.segment .buttons .ui.button {
13+
margin-top: 5px;
14+
margin-bottom: 5px;
15+
}
16+
17+
.lazy-audio .placeholder-image.ui.image {
18+
background-color: #f9fafb;
19+
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
20+
padding-top: 20%;
21+
padding-bottom: 20%;
22+
text-align: center;
23+
}

0 commit comments

Comments
 (0)