Skip to content

Commit

Permalink
456 goodid modal (#105)
Browse files Browse the repository at this point in the history
* wip: good-id modal

* remove children

* wip: user can delete faceId

* temp: disable login-sdk for dev-release

* fully disable login-sdk from dev-release

* Dev version beta.3c0c9bd released

* fix eslint undef not triggering, some minor requested ui changes

* Dev version beta.731cdbb released

* apply review requests

* add flag handler for skipping loginsdk for dev-release

* fix: apply requested ui changes
  • Loading branch information
L03TJ3 authored Sep 12, 2023
1 parent 57b9178 commit 87f333d
Show file tree
Hide file tree
Showing 12 changed files with 393 additions and 223 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ module.exports = {
project: ["./tsconfig.json", "./packages/*/tsconfig.json"]
},
rules: {
"no-undef": "error",
"prettier/prettier": "warn",
"@typescript-eslint/no-unsafe-call": "off",
"@typescript-eslint/no-unsafe-assignment": "off",
Expand Down
135 changes: 76 additions & 59 deletions dev-release
Original file line number Diff line number Diff line change
@@ -1,74 +1,91 @@
#!/usr/bin/env node

const { exec } = require('child_process')
const { writeFile } = require('fs')
const { promisify } = require('util')
const { exec } = require("child_process");
const { writeFile } = require("fs");
const { promisify } = require("util");

const pkgDir = pkg => `./packages/${pkg}`
const pkgPath = pkg => `${pkgDir(pkg)}/package.json`
const pkgDir = pkg => `./packages/${pkg}`;
const pkgPath = pkg => `${pkgDir(pkg)}/package.json`;

const v2pkg = require(pkgPath('sdk-v2'))
const loginpkg = require(pkgPath('login-sdk'))
const designpkg = require(pkgPath('good-design'))
const v2pkg = require(pkgPath("sdk-v2"));
const loginpkg = require(pkgPath("login-sdk"));
const designpkg = require(pkgPath("good-design"));

const execAsync = promisify(exec)
const writeFileAsync = promisify(writeFile)
const execAsync = promisify(exec);
const writeFileAsync = promisify(writeFile);

const run = (cmd, opts = {}) => execAsync(cmd, opts).then(({ stdout }) => stdout)
const run = (cmd, opts = {}) => execAsync(cmd, opts).then(({ stdout }) => stdout);
const updateVersion = (version, suffix) => {
let [full, major, minor, patch, flags] = version.match(/^(\d+)\.(\d+)\.(\d+)(-beta)?.*$/);

if (!flags) {
patch = Number(patch) + 1;
}
return [major, minor, patch].join('.') + suffix;

return [major, minor, patch].join(".") + suffix;
};

const writePkg = async (pkg, json) => {
const contents = JSON.stringify(json, null, 2)
const path = pkgPath(pkg)

await writeFileAsync(path, contents)
}

;(async () => {
const commit = await run("git rev-parse --short HEAD")
const suffix = `-beta.${commit.trimEnd()}`

console.log('1. Update sdk-v2 version')
v2pkg.version = updateVersion(v2pkg.version, suffix)
await writePkg('sdk-v2', v2pkg)

console.log('2. Build sdk-v2')
await run('yarn workspace @gooddollar/web3sdk-v2 install')
await run('yarn workspace @gooddollar/web3sdk-v2 build')

console.log('3. Publish sdk-v2')
await run('npm publish --access public --tag beta', { cwd: pkgDir('sdk-v2') })

console.log('4. Update design/login versions & deps')
;[designpkg, loginpkg].forEach(pkg => {
pkg.version = updateVersion(pkg.version, suffix)
pkg.devDependencies["@gooddollar/web3sdk-v2"] = v2pkg.version
})
await writePkg('good-design', designpkg)
await writePkg('login-sdk', loginpkg)

console.log('5. Build design & login SDKs')
await run('yarn workspace @gooddollar/good-design install')
await run('yarn workspace @gooddollar/good-design build')
await run('yarn workspace @gooddollar/goodlogin-sdk install')
await run('yarn workspace @gooddollar/goodlogin-sdk build')

console.log('6. Publish design & login SDKs')
await run('npm publish --access public --tag beta', { cwd: pkgDir('good-design') })
await run('npm publish --access public --tag beta', { cwd: pkgDir('login-sdk') })

console.log('7. Commit changes')
const msg = `Dev version ${suffix.substring(1)} released`
await run('git add .')
await run(`git commit -m '${msg}' -n`)
await run('git push')
console.log(msg)
})()
const contents = JSON.stringify(json, null, 2);
const path = pkgPath(pkg);

await writeFileAsync(path, contents);
};

const args = process.argv.slice(2);

(async () => {
const commit = await run("git rev-parse --short HEAD");
const suffix = `-beta.${commit.trimEnd()}`;

console.log("1. Update sdk-v2 version");
v2pkg.version = updateVersion(v2pkg.version, suffix);
await writePkg("sdk-v2", v2pkg);

console.log("2. Build sdk-v2");
await run("yarn workspace @gooddollar/web3sdk-v2 install");
await run("yarn workspace @gooddollar/web3sdk-v2 build");

console.log("3. Publish sdk-v2");
await run("npm publish --access public --tag beta", { cwd: pkgDir("sdk-v2") });

const skipLogin = args.includes("--skip-login");

console.log("4. Update design/login versions & deps");
const pkgToUpdate = [designpkg];

if (!skipLogin) {
pkgToUpdate.push(loginpkg);
}

pkgToUpdate.forEach(pkg => {
pkg.version = updateVersion(pkg.version, suffix);
pkg.devDependencies["@gooddollar/web3sdk-v2"] = v2pkg.version;
});

console.log("4.1. Write updated package.json");

await writePkg("good-design", designpkg);
if (!skipLogin) await writePkg("login-sdk", loginpkg);

console.log("5. Build design & login SDKs");
await run("yarn workspace @gooddollar/good-design install");
await run("yarn workspace @gooddollar/good-design build");

if (!skipLogin) {
await run("yarn workspace @gooddollar/goodlogin-sdk install");
await run("yarn workspace @gooddollar/goodlogin-sdk build");
}

console.log("6. Publish design & login SDKs");
await run("npm publish --access public --tag beta", { cwd: pkgDir("good-design") });

if (!skipLogin) await run("npm publish --access public --tag beta", { cwd: pkgDir("login-sdk") });

console.log("7. Commit changes");
const msg = `Dev version ${suffix.substring(1)} released`;
await run("git add .");
await run(`git commit -m '${msg}' -n`);
await run("git push");
console.log(msg);
})();
6 changes: 3 additions & 3 deletions packages/good-design/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@gooddollar/good-design",
"repository": "https://github.com/GoodDollar/GoodWeb3-mono/packages/good-design",
"version": "0.0.85",
"version": "0.0.86-beta.731cdbb",
"scripts": {
"build": "yarn install && yarn dev:clean && tsc && yarn copy:assets && yalc publish --push",
"build:release": "yarn dev:clean && tsc -p tsconfig.release.json && yarn copy:assets",
Expand All @@ -27,7 +27,7 @@
"@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@babel/runtime": "^7.18.9",
"@gooddollar/web3sdk-v2": "latest",
"@gooddollar/web3sdk-v2": "0.1.117-beta.731cdbb",
"@storybook/addon-actions": "^6.5.12",
"@storybook/addon-essentials": "^6.5.12",
"@storybook/addon-links": "^6.5.12",
Expand Down Expand Up @@ -62,7 +62,7 @@
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"ts-loader": "^9.3.1",
"typescript": "4.7.4",
"typescript": "^5.1.3",
"webpack": "^5.74.0"
},
"peerDepedencies": {
Expand Down
158 changes: 81 additions & 77 deletions packages/good-design/src/advanced/customswitch/CustomSwitch.tsx
Original file line number Diff line number Diff line change
@@ -1,92 +1,97 @@
import React, { useState, useCallback } from 'react'
import { Pressable, Icon, View, Box } from 'native-base'
import { first } from 'lodash'
import SelectBox from './SelectBox'
// import SwitchIcon from ' ../../assets/svg/arrow-swap.svg'
import React, { useState, useCallback } from "react";
import { Pressable, Icon, View, Box } from "native-base";
import { first } from "lodash";
import SelectBox from "./SelectBox";

const SwitchIcon = () => (
<g strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5">
<path d="m5 10.0909h14l-5.8396-5.0909" stroke="#B0B4BB"/>
<path d="m19 13.9091h-14l5.8396 5.0909" stroke="#B0B4BB"/>
<path d="m5 10.0909h14l-5.8396-5.0909" stroke="#B0B4BB" />
<path d="m19 13.9091h-14l5.8396 5.0909" stroke="#B0B4BB" />
</g>
)
);

const SelectListItem = ({
chain,
onPress,
isListItem,
isListOpen,
isLeft
}: {
chain: string | undefined;
onPress: ((isLeft: boolean) => void) | ((isLeft: boolean, chain: string) => void);
isListItem: boolean;
isListOpen: boolean;
isLeft: boolean;
}) => {
const type = isListItem ? "list" : "button";

const onItemPress = useCallback(() => onPress(isLeft, chain ?? ""), [chain, onPress]);

const SelectListItem = (
{
chain,
onPress,
isListItem,
isListOpen,
isLeft,
}: {
chain: string | undefined,
onPress: ((isLeft: boolean) => void) | ((isLeft: boolean, chain: string) => void)
isListItem: boolean,
isListOpen: boolean,
isLeft: boolean,
}) => {
const type = isListItem ? "list" : "button"
const onItemPress = useCallback(() => onPress(isLeft, chain ?? ''), [chain, onPress]);
return (
<SelectBox variant={type} text={chain ?? ''} press={onItemPress} isListItem={isListItem} isListOpen={isListOpen} />
)
}
<SelectBox variant={type} text={chain ?? ""} press={onItemPress} isListItem={isListItem} isListOpen={isListOpen} />
);
};

//todo: add icon list (optional)
export const CustomSwitch = ({list, switchListCb}:{list:string[], switchListCb: () => void}) => {
const [showListLeft, setShowListLeft] = useState<any>(false)
const [showListRight, setShowListRight] = useState<any>(false)
export const CustomSwitch = ({ list, switchListCb }: { list: string[]; switchListCb: () => void }) => {
const [showListLeft, setShowListLeft] = useState<any>(false);
const [showListRight, setShowListRight] = useState<any>(false);

const [sourceList, setSourceList] = useState<string[]>(list);
const [targetList, setTargetList] = useState<string[]>(() => list.slice().reverse());

const toggleList = useCallback((left: boolean) => {
const side = {
show: left ? showListLeft : showListRight,
dispatch: left ? setShowListLeft : setShowListRight
}
side.dispatch(!side.show)
}, [showListLeft, showListRight])
const toggleList = useCallback(
(left: boolean) => {
const side = {
show: left ? showListLeft : showListRight,
dispatch: left ? setShowListLeft : setShowListRight
};

side.dispatch(!side.show);
},
[showListLeft, showListRight]
);

const switchSelect = () => {
setSourceList(targetList);
setTargetList(sourceList);
switchListCb();
}
};

const selectFromList = (isLeft: boolean, chain: string) => {
const sides = [sourceList, targetList]
const selectedSide = isLeft ? sides.splice(0, 1)[0] : sides.splice(1,1)[0]
const altSide = sides[0]
const listNumber = selectedSide.indexOf(chain)
const selected = selectedSide.splice(listNumber, listNumber)[0]
const sides = [sourceList, targetList];
const selectedSide = isLeft ? sides.splice(0, 1)[0] : sides.splice(1, 1)[0];
const altSide = sides[0];
const listNumber = selectedSide.indexOf(chain);
const selected = selectedSide.splice(listNumber, listNumber)[0];

selectedSide.unshift(selected);

if (altSide.indexOf(chain) === 0) {
const altSelected = altSide.splice(listNumber, listNumber)[0]
altSide.unshift(altSelected)
const altSelected = altSide.splice(listNumber, listNumber)[0];
altSide.unshift(altSelected);
}

toggleList(isLeft);
switchListCb(); //Todo: refactor to handle list with more then 2 values
}
};

const onUncheckList = useCallback((isLeft) => toggleList(isLeft), [toggleList])
const onUncheckItem = useCallback((isLeft, chain) => selectFromList(isLeft, chain), [toggleList, selectFromList])
const onUncheckList = useCallback(isLeft => toggleList(isLeft), [toggleList]);
const onUncheckItem = useCallback((isLeft, chain) => selectFromList(isLeft, chain), [toggleList, selectFromList]);

return (
<View height="16" display="flex" flexDirection="row" justifyContent="flex-start" alignItems="flex-start">
<Box display="flex" alignItems="center" justifyContent="center" flexDirection="column">
{
sourceList.map((chain, listNumber) => (
<SelectListItem
key={chain}
chain={!listNumber ? first(sourceList) : chain}
isListOpen={showListLeft}
isLeft={true}
onPress={!listNumber ? onUncheckList : onUncheckItem}
isListItem={listNumber !== 0}
/>
))
}
{sourceList.map((chain, listNumber) => (
<SelectListItem
key={chain}
chain={!listNumber ? first(sourceList) : chain}
isListOpen={showListLeft}
isLeft={true}
onPress={!listNumber ? onUncheckList : onUncheckItem}
isListItem={listNumber !== 0}
/>
))}
</Box>
<Box w="100px" height="64px" pl="3" pr="3" display="flex" justifyContent={"center"} alignItems="center">
<Pressable onPress={switchSelect}>
Expand All @@ -100,25 +105,24 @@ export const CustomSwitch = ({list, switchListCb}:{list:string[], switchListCb:
justifyItems="center"
pl="1.5"
fill="none"
viewBox="0 0 24 24">
<SwitchIcon />
</Icon>
viewBox="0 0 24 24"
>
<SwitchIcon />
</Icon>
</Pressable>
</Box>
<Box display="flex" alignItems="center" justifyContent={"center"} flexDirection="column">
{
targetList.map((chain, listNumber) => (
<SelectListItem
key={chain}
chain={!listNumber ? first(targetList) : chain}
isListOpen={showListRight}
isLeft={false}
onPress={!listNumber ? onUncheckList : onUncheckItem}
isListItem={!!listNumber}
/>
))
}
{targetList.map((chain, listNumber) => (
<SelectListItem
key={chain}
chain={!listNumber ? first(targetList) : chain}
isListOpen={showListRight}
isLeft={false}
onPress={!listNumber ? onUncheckList : onUncheckItem}
isListItem={!!listNumber}
/>
))}
</Box>
</View>
)
}
);
};
Loading

0 comments on commit 87f333d

Please sign in to comment.