Updated "Publish to NPM" Github Action to deploy storybook (#175)

* set new releases as a draft in npm-publish.yml

Author: DaniSomoza

.github/workflows/deploy-storybook.yml

@@ -4,9 +4,8 @@ on:
   # Pull request hook without any config. Launches for every pull request
   pull_request:
   # Launches build when release is published
-  push:
-    tags:
-      - 'v*'
+  release:
+    types: [published]
 
 env:
   REPO_NAME_ALPHANUMERIC: safereactcomponents

.github/workflows/npm-publish.yml

@@ -60,7 +60,7 @@ jobs:
         uses: actions/create-release@v1
         id: create_release
         with:
-          draft: false
+          draft: true
           prerelease: false
           release_name: ${{ steps.version.outputs.version }}
           tag_name: ${{ steps.version.outputs.version }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",

src/inputs/AddressInput/AddressInput.stories.tsx

@@ -70,7 +70,6 @@ export const SimpleAddressInput = ({
   showErrors: boolean;
 }): React.ReactElement => {
   const [address, setAddress] = useState<string>('');
-  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   const [currentNetworkPrefix, setCurrentNetworkPrefix] = useState('rin');
 
@@ -85,13 +84,16 @@ export const SimpleAddressInput = ({
     address && showErrors ? inValidNetworkError || inValidAddressError : '';
 
   // fake ENS Resolution
-  const getAddressFromDomain = () =>
-    new Promise<string>((resolve) => {
-      setTimeout(
-        () => resolve('0x83eC7B0506556a7749306D69681aDbDbd08f0769'),
-        2000
-      );
-    });
+  const getAddressFromDomain = useCallback(
+    () =>
+      new Promise<string>((resolve) => {
+        setTimeout(
+          () => resolve('0x83eC7B0506556a7749306D69681aDbDbd08f0769'),
+          2000
+        );
+      }),
+    []
+  );
 
   return (
     <div>
@@ -113,7 +115,7 @@ export const SimpleAddressInput = ({
           name="address"
           placeholder={'Ethereum address'}
           address={address}
-          onChangeAddress={onChangeAddress}
+          onChangeAddress={setAddress}
           getAddressFromDomain={getAddressFromDomain}
           hiddenLabel={hiddenLabel}
           error={error}
@@ -161,7 +163,6 @@ export const AddressInputWithENSResolution = (): React.ReactElement => {
   const [address, setAddress] = useState<string>('');
   const [showError, setShowError] = useState<boolean>(false);
   const [error, setError] = useState<string>('');
-  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   const [customENSThrottleDelay, setCustomENSThrottleDelay] = useState<
     number | undefined
@@ -213,7 +214,7 @@ export const AddressInputWithENSResolution = (): React.ReactElement => {
           address={address}
           helperText={'Type safe.test to check ENS resolution!'}
           disabled={!customENSThrottleDelay}
-          onChangeAddress={onChangeAddress}
+          onChangeAddress={setAddress}
           getAddressFromDomain={getAddressFromDomain}
           customENSThrottleDelay={customENSThrottleDelay}
         />
@@ -251,7 +252,6 @@ export const AddressInputWithENSResolution = (): React.ReactElement => {
 
 export const SafeAddressInputValidation = (): React.ReactElement => {
   const [address, setAddress] = useState<string>('');
-  const onChangeAddress = useCallback((address) => setAddress(address), []);
   const [isValidSafeAddress, setIsValidSafeAddress] = useState<boolean>(false);
   const [showLoadingSpinner, setShowLoadingSpinner] = useState<boolean>(false);
 
@@ -296,7 +296,7 @@ export const SafeAddressInputValidation = (): React.ReactElement => {
         showNetworkPrefix={false}
         error={showError ? error : ''}
         address={address}
-        onChangeAddress={onChangeAddress}
+        onChangeAddress={setAddress}
         showLoadingSpinner={showLoadingSpinner}
         InputProps={{
           endAdornment: isValidSafeAddress && (
@@ -315,8 +315,7 @@ export const SafeAddressInputValidation = (): React.ReactElement => {
 
 export const AddressInputWithSimpleAddressValidation =
   (): React.ReactElement => {
-    const [address, setAddress] = useState<string>('');
-    const onChangeAddress = useCallback((address) => setAddress(address), []);
+    const [address, setAddress] = useState<string>('0x123...');
     const [hasError, setHasError] = useState<boolean>();
 
     useEffect(() => {
@@ -334,7 +333,7 @@ export const AddressInputWithSimpleAddressValidation =
           networkPrefix="rin"
           error={hasError ? error : ''}
           address={address}
-          onChangeAddress={onChangeAddress}
+          onChangeAddress={setAddress}
         />
         {/* Address In the State */}
         <StyledText>Address In the State:</StyledText>
@@ -347,7 +346,6 @@ export const AddressInputWithoutPrefix = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
-  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
@@ -356,7 +354,7 @@ export const AddressInputWithoutPrefix = (): React.ReactElement => {
         name="address"
         placeholder={'Ethereum address'}
         address={address}
-        onChangeAddress={onChangeAddress}
+        onChangeAddress={setAddress}
       />
       {/* Address In the State */}
       <StyledText>Address In the State:</StyledText>
@@ -369,19 +367,18 @@ export const AddressInputLoading = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
-  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
       <AddressInput
         label="Address"
         name="address"
         networkPrefix="rin"
-        showNetworkPrefix={false}
+        showNetworkPrefix
         placeholder={'Ethereum address'}
         showLoadingSpinner
         address={address}
-        onChangeAddress={onChangeAddress}
+        onChangeAddress={setAddress}
       />
     </form>
   );
@@ -391,15 +388,14 @@ export const AddressInputWithAdornment = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
-  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
       <AddressInput
         label="Address"
         name="address"
         networkPrefix="rin"
-        showNetworkPrefix={false}
+        showNetworkPrefix
         showLoadingSpinner={false}
         placeholder={'Ethereum address'}
         InputProps={{
@@ -410,7 +406,7 @@ export const AddressInputWithAdornment = (): React.ReactElement => {
           ),
         }}
         address={address}
-        onChangeAddress={onChangeAddress}
+        onChangeAddress={setAddress}
       />
     </form>
   );
@@ -420,20 +416,19 @@ export const AddressInputDisabled = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
-  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
       <AddressInput
         label="Address"
         name="address"
         networkPrefix="rin"
-        showNetworkPrefix={false}
+        showNetworkPrefix
         showLoadingSpinner={false}
         disabled
         placeholder={'Ethereum address'}
         address={address}
-        onChangeAddress={onChangeAddress}
+        onChangeAddress={setAddress}
       />
     </form>
   );
@@ -443,7 +438,6 @@ export const AddressInputWithErrors = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
-  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
@@ -455,7 +449,7 @@ export const AddressInputWithErrors = (): React.ReactElement => {
         placeholder={'Ethereum address'}
         showLoadingSpinner={false}
         address={address}
-        onChangeAddress={onChangeAddress}
+        onChangeAddress={setAddress}
         error={'Invalid Address'}
       />
     </form>

src/inputs/AddressInput/index.tsx

@@ -47,7 +47,7 @@ function AddressInput({
   showLoadingSpinner,
   InputProps,
   inputProps,
-  hiddenLabel = true,
+  hiddenLabel = false,
   ...rest
 }: AddressInputProps): ReactElement {
   const [isLoadingENSResolution, setIsLoadingENSResolution] = useState(false);

tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot

@@ -387,7 +387,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Simple Address Valida
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-jJoQJp gNEEiH"
+    className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI"
     spellCheck={false}
   >
     <label
@@ -405,7 +405,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Simple Address Valida
       <input
         aria-invalid={false}
         autoFocus={false}
-        className="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputHiddenLabel MuiFilledInput-inputHiddenLabel"
+        className="MuiInputBase-input MuiFilledInput-input"
         disabled={false}
         id="address"
         name="address"
@@ -427,7 +427,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Simple Address Valida
   <pre
     className="sc-jUosCB eSSjao"
   >
-     
+    0x123...
   </pre>
 </form>
 `;