Skip to content

Commit 47dc2d2

Browse files
FoxhoundnFoxhoundn
authored
Merge pull request #14 from qoretechnologies/feat/use-react-context-and-canary-release
use react context instead of use-context-selector and implement canary release
2 parents bc88625 + 00b9ef7 commit 47dc2d2

File tree

10 files changed

+86
-40
lines changed

10 files changed

+86
-40
lines changed

‎.github/workflows/tests.yml

+27-2
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ jobs:
6565
6666
- name: Run build test
6767
run: |
68-
yarn build:test:prod
68+
yarn build
6969
7070
- name: Run unit tests
7171
run: |
@@ -77,6 +77,31 @@ jobs:
7777
"npx http-server storybook-static --port 6008 --silent" \
7878
"npx wait-on tcp:6008 && yarn test-storybook"
7979
80+
- name: Bump version with timestamp and canary tag
81+
id: bump
82+
run: |
83+
TIMESTAMP=$(date +"%Y%m%d%H%M%S")
84+
NEW_VERSION=$(npm version prerelease --preid=canary.$TIMESTAMP --no-git-tag-version)
85+
echo "New version: $NEW_VERSION"
86+
echo "::set-output name=version::$NEW_VERSION"
87+
88+
- name: Publish canary version to NPM
89+
id: npm_publish
90+
uses: JS-DevTools/npm-publish@v1
91+
with:
92+
token: ${{ secrets.NPM_TOKEN }}
93+
tag: canary
94+
access: public
95+
96+
- name: Create comment with canary version
97+
uses: mshick/add-pr-comment@v2
98+
with:
99+
message: |
100+
Canary version for this PR published: ${{ steps.bump.outputs.version }}
101+
```sh
102+
yarn add @qoretechnologies/reqraft@${{ steps.bump.outputs.version }}
103+
```
104+
80105
- name: Publish to Chromatic
81106
id: chromatic_publish
82107
uses: chromaui/action@v1
@@ -95,7 +120,7 @@ jobs:
95120
DISCORD_AVATAR: 'https://github.com/qoretechnologies/qorus-vscode/blob/95ad81fa8654fe83bb41f68f4de42ae088298e59/public/q-symbol-small.png?raw=true'
96121
uses: Ilshidur/action-discord@0.3.2
97122
with:
98-
args: ':white_check_mark: Tests run #${{ github.run_number }} for [PR](${{ github.event.pull_request.html_url }}) triggered by ${{ github.triggering_actor }} *succeeded*, click GitHub Action link below to get the VSIX artifact.'
123+
args: ':white_check_mark: Tests run #${{ github.run_number }} for [PR](${{ github.event.pull_request.html_url }}) triggered by ${{ github.triggering_actor }} *succeeded*, install the canary version via `yarn add @qoretechnologies/reqraft@${{ steps.bump.outputs.version }}`.'
99124
if: success()
100125

101126
# Notify discord if failure

‎mock/menu.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
2+
import { fn } from '@storybook/test';
23
import { map } from 'lodash';
34
import { TReqraftMenuItem } from '../src';
45
import interfaces from './interfaceCategories.json';
@@ -53,6 +54,7 @@ export default [
5354
as: 'a',
5455
id: id,
5556
rightIcon: 'AddLine',
57+
onRightIconClick: fn(),
5658
})
5759
),
5860
},

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@qoretechnologies/reqraft",
3-
"version": "0.3.3",
3+
"version": "0.3.4",
44
"description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
55
"main": "dist/index.js",
66
"types": "dist/index.d.ts",
@@ -73,8 +73,8 @@
7373
"@types/react": "^18.3.1",
7474
"@types/react-color": "^3.0.12",
7575
"@types/react-dom": "^18.3.0",
76-
"@types/styled-components": "^5.1.34",
7776
"@types/react-query": "^1.2.9",
77+
"@types/styled-components": "^5.1.34",
7878
"@typescript-eslint/eslint-plugin": "^7.8.0",
7979
"@typescript-eslint/parser": "^7.8.0",
8080
"babel-jest": "^29.7.0",
@@ -105,7 +105,7 @@
105105
"react-dom": "^18.3.1"
106106
},
107107
"dependencies": {
108-
"@tanstack/react-query": "^5.35.5",
108+
"@tanstack/react-query": "4",
109109
"classnames": "^2.2.6",
110110
"cronstrue": "^2.50.0",
111111
"epoch-timeago": "^1.1.9",

‎src/components/menu/Menu.stories.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,17 @@ export const ActivePath: Story = {
3838
},
3939
};
4040

41+
export const ActiveMenuItemIntent: Story = {
42+
args: {
43+
path: '/Interfaces/mapper',
44+
menu: typedMenu,
45+
activeItemIntent: 'success',
46+
},
47+
play: async () => {
48+
await testsWaitForText('Developer Portal');
49+
},
50+
};
51+
4152
export const WithDefaultQuery: Story = {
4253
args: {
4354
menu: typedMenu,

‎src/components/menu/Menu.tsx

+23-13
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import ReqoreMenu, { IReqoreMenuProps } from '@qoretechnologies/reqore/dist/components/Menu';
1010
import { IReqoreMenuDividerProps } from '@qoretechnologies/reqore/dist/components/Menu/divider';
1111
import { IReqoreMenuItemProps } from '@qoretechnologies/reqore/dist/components/Menu/item';
12+
import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
1213
import { map, reduce, size } from 'lodash';
1314
import { useEffect, useMemo, useState } from 'react';
1415
import { useReqraftStorage } from '../../hooks/useStorage/useStorage';
@@ -37,13 +38,15 @@ export interface IReqraftMenuProps extends Partial<Omit<IReqoreMenuProps, 'resiz
3738
resizable?: boolean;
3839
onResizeChange?: (width: number) => void;
3940
defaultWidth?: number;
41+
activeItemIntent?: TReqoreIntent;
4042
}
4143

4244
export const ReqraftMenuItem = ({
4345
path,
4446
isCollapsed,
47+
activeIntent = 'info',
4548
...props
46-
}: TReqraftMenuItem & { path?: string; isCollapsed?: boolean }) => {
49+
}: TReqraftMenuItem & { path?: string; isCollapsed?: boolean; activeIntent?: TReqoreIntent }) => {
4750
if ('divider' in props) {
4851
return <ReqoreMenuDivider />;
4952
}
@@ -68,7 +71,12 @@ export const ReqraftMenuItem = ({
6871
{...menuData}
6972
>
7073
{map(submenu, (submenuData, submenuId) => (
71-
<ReqraftMenuItem key={submenuId} {...submenuData} path={path} />
74+
<ReqraftMenuItem
75+
key={submenuId}
76+
{...submenuData}
77+
path={path}
78+
activeIntent={activeIntent}
79+
/>
7280
))}
7381
</ReqoreMenuSection>
7482
);
@@ -78,19 +86,19 @@ export const ReqraftMenuItem = ({
7886
<ReqoreMenuItem
7987
customTheme={{ main: '#050505' }}
8088
effect={
81-
isActive
82-
? {
83-
gradient: {
84-
colors: {
85-
0: 'info:darken:5:0.4',
86-
40: '#181818',
87-
100: '#181818',
88-
},
89+
isActive ?
90+
{
91+
gradient: {
92+
colors: {
93+
0: `${activeIntent}:darken:3:0.4`,
94+
65: 'main:lighten:2',
95+
100: 'main:lighten:2',
8996
},
90-
}
91-
: undefined
97+
},
98+
}
99+
: undefined
92100
}
93-
leftIconColor={isActive ? 'info:lighten:10' : undefined}
101+
leftIconColor={isActive ? `${activeIntent}:lighten:10` : undefined}
94102
verticalPadding='tiny'
95103
{...props}
96104
/>
@@ -108,6 +116,7 @@ export const ReqraftMenu = ({
108116
onHideClick,
109117
resizable,
110118
path,
119+
activeItemIntent,
111120
...rest
112121
}: IReqraftMenuProps) => {
113122
const [query, setQuery] = useState<string>(defaultQuery);
@@ -237,6 +246,7 @@ export const ReqraftMenu = ({
237246
{...menuData}
238247
path={path}
239248
isCollapsed={!query && !!(menuData as IReqraftMenuItem).submenu}
249+
activeIntent={activeItemIntent}
240250
/>
241251
))}
242252
</ReqoreMenu>

‎src/contexts/StorageContext.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { createContext } from 'react';
12
import { Get } from 'type-fest';
2-
import { createContext } from 'use-context-selector';
33
import { TReqraftStorageValue } from '../hooks/useStorage/useStorage';
44

55
export type TReqraftStorage = Record<string, any>;

‎src/hooks/useStorage/useStorage.ts

+2-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { useCallback, useMemo } from 'react';
2-
import { useContextSelector } from 'use-context-selector';
1+
import { useCallback, useContext, useMemo } from 'react';
32
import { ReqraftStorageContext } from '../../contexts/StorageContext';
43

54
export type TReqraftStorageValue = string | number | boolean | Record<string | number, any> | any[];
@@ -14,14 +13,7 @@ export function useReqraftStorage<T extends TReqraftStorageValue>(
1413
defaultValue?: T,
1514
includeAppPrefix?: boolean
1615
): TReqraftUseStorage<T> {
17-
const { getStorage, updateStorage, removeStorageValue } = useContextSelector(
18-
ReqraftStorageContext,
19-
({ getStorage, updateStorage, removeStorageValue }) => ({
20-
getStorage,
21-
updateStorage,
22-
removeStorageValue,
23-
})
24-
);
16+
const { getStorage, updateStorage, removeStorageValue } = useContext(ReqraftStorageContext);
2517

2618
const value = useMemo(
2719
() => getStorage(path, defaultValue, includeAppPrefix),

‎tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"compilerOptions": {
33
"lib": ["es2017", "es2018", "es2019", "es2020", "es2021", "DOM"],
4-
"module": "ESNext",
4+
"module": "CommonJS",
55
"sourceMap": true,
66
"moduleResolution": "node",
77
"strict": true,

‎tsconfig.prod.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"compilerOptions": {
33
"lib": ["es2017", "es2018", "es2019", "es2020", "es2021", "DOM"],
4-
"module": "ESNext",
4+
"module": "CommonJS",
55
"sourceMap": true,
66
"moduleResolution": "node",
77
"strict": false,

‎yarn.lock

+15-9
Original file line numberDiff line numberDiff line change
@@ -3105,17 +3105,18 @@
31053105
dependencies:
31063106
"@swc/counter" "^0.1.3"
31073107

3108-
"@tanstack/query-core@5.35.5":
3109-
version "5.35.5"
3110-
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.35.5.tgz#7b4100dc9cc7fee314b8a1bcbf502a236d43ffe3"
3111-
integrity sha512-OMWvlEqG01RfGj+XZb/piDzPp0eZkkHWSDHt2LvE/fd1zWburP/xwm0ghk6Iv8cuPlP+ACFkZviKXK0OVt6lhg==
3108+
"@tanstack/query-core@4.36.1":
3109+
version "4.36.1"
3110+
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.36.1.tgz#79f8c1a539d47c83104210be2388813a7af2e524"
3111+
integrity sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==
31123112

3113-
"@tanstack/react-query@^5.35.5":
3114-
version "5.35.5"
3115-
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.35.5.tgz#d41a087d58f42418824fa04aaca00ba93c99075c"
3116-
integrity sha512-sppX7L+PVn5GBV3In6zzj0zcKfnZRKhXbX1MfIfKo1OjIq2GMaopvAFOP0x1bRYTUk2ikrdYcQYOozX7PWkb8A==
3113+
"@tanstack/react-query@4":
3114+
version "4.36.1"
3115+
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.36.1.tgz#acb589fab4085060e2e78013164868c9c785e5d2"
3116+
integrity sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==
31173117
dependencies:
3118-
"@tanstack/query-core" "5.35.5"
3118+
"@tanstack/query-core" "4.36.1"
3119+
use-sync-external-store "^1.2.0"
31193120

31203121
"@testing-library/dom@^8.5.0":
31213122
version "8.20.1"
@@ -12017,6 +12018,11 @@ use-context-selector@^1.4.1:
1201712018
resolved "https://registry.npmjs.org/use-context-selector/-/use-context-selector-1.4.4.tgz"
1201812019
integrity sha512-pS790zwGxxe59GoBha3QYOwk8AFGp4DN6DOtH+eoqVmgBBRXVx4IlPDhJmmMiNQAgUaLlP+58aqRC3A4rdaSjg==
1201912020

12021+
use-sync-external-store@^1.2.0:
12022+
version "1.2.2"
12023+
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
12024+
integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
12025+
1202012026
util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
1202112027
version "1.0.2"
1202212028
resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"

0 commit comments

Comments
 (0)