Skip to content

Commit 2fed2d6

Browse files
author
Ankit Patidar
committed
feat: langu picker
1 parent 29a19a6 commit 2fed2d6

File tree

5 files changed

+123
-79
lines changed

5 files changed

+123
-79
lines changed

‎apps/kisai-bot/src/components/language-picker/index.tsx

+45-27
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useColorPalates } from '../../providers/theme-provider/hooks';
77
import { useConfig } from '../../hooks/useConfig';
88
import { AppContext } from '../../context';
99
import router from 'next/router';
10+
import { NewLanguagePicker } from '@samagra-x/stencil-molecules/lib/language-picker/languagePicker';
1011

1112
const LanguagePicker = () => {
1213
const config = useConfig('component', 'sidebar');
@@ -31,40 +32,57 @@ const LanguagePicker = () => {
3132
};
3233
const theme = useColorPalates();
3334

34-
const languages = [
35+
const languages: Array<{
36+
name: string;
37+
value: string;
38+
}> = [
3539
{ name: config?.languageName1, value: config?.languageCode1 },
3640
{ name: config?.languageName2, value: config?.languageCode2 },
3741
];
3842
return (
39-
<FormControl
40-
sx={{
41-
m: 1,
42-
background: theme?.primary?.main,
43-
border: 'none',
44-
borderRadius: '10px',
45-
height: '36px',
46-
}}
47-
size="small"
48-
data-testid="language-picker"
49-
>
50-
<Select
51-
value={activeLanguage}
52-
onChange={handleChange}
53-
displayEmpty
54-
inputProps={{ 'aria-label': 'Without label' }}
55-
sx={{
56-
color: theme?.primary?.contrastText,
43+
// <FormControl
44+
// sx={{
45+
// m: 1,
46+
// background: theme?.primary?.main,
47+
// border: 'none',
48+
// borderRadius: '10px',
49+
// height: '36px',
50+
// }}
51+
// size="small"
52+
// data-testid="language-picker"
53+
// >
54+
<NewLanguagePicker
55+
activeLanguage={activeLanguage}
56+
handleLanguageClick={handleChange}
57+
languages={languages}
58+
customStyles={{
59+
formControlStyle: {
60+
background: theme?.primary?.main,
5761
border: 'none',
5862
borderRadius: '10px',
59-
width: '85px',
6063
height: '36px',
61-
}}
62-
>
63-
{map(languages, (lang) => (
64-
<MenuItem value={lang?.value}>{lang?.name}</MenuItem>
65-
))}
66-
</Select>
67-
</FormControl>
64+
},
65+
}}
66+
/>
67+
68+
// <Select
69+
// value={activeLanguage}
70+
// onChange={handleChange}
71+
// displayEmpty
72+
// inputProps={{ 'aria-label': 'Without label' }}
73+
// sx={{
74+
// color: theme?.primary?.contrastText,
75+
// border: 'none',
76+
// borderRadius: '10px',
77+
// width: '85px',
78+
// height: '36px',
79+
// }}
80+
// >
81+
// {map(languages, (lang) => (
82+
// <MenuItem value={lang?.value}>{lang?.name}</MenuItem>
83+
// ))}
84+
// </Select>
85+
// </FormControl>
6886
);
6987
};
7088

‎apps/kisai-bot/src/pageComponents/login-page/index.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ import { useColorPalates } from '../../providers/theme-provider/hooks';
1111
import { useLocalization } from '../../hooks';
1212
import { useRouter } from 'next/router';
1313
import { useConfig } from '../../hooks/useConfig';
14-
// import LanguagePicker from '../../components/language-picker';
15-
// import NewLanguagePicker from 'stencil-molecules/lib/language-picker';
14+
import LanguagePicker from '../../components/language-picker';
15+
import NewLanguagePicker from '@samagra-x/stencil-molecules/lib/language-picker/languagePicker';
1616
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
1717
// import { OTPInput } from 'stencil-molecules/lib/otp-input';
18-
// import InputComponent from 'stencil-molecules/lib/input-component';
18+
import InputComponent from '@samagra-x/stencil-molecules/lib/input-component';
1919
// import ContextProvider from '../../providers/context-provider';
2020

2121
const LoginPage: React.FC = () => {
@@ -98,8 +98,16 @@ const LoginPage: React.FC = () => {
9898
zIndex: 10,
9999
}}
100100
>
101-
{/* <NewLanguagePicker /> */}
101+
<LanguagePicker />
102102
</div>
103+
<div
104+
style={{
105+
position: 'absolute',
106+
top: '16px',
107+
left: 'calc(100% - 117px)',
108+
zIndex: 10,
109+
}}
110+
></div>
103111
{showLogo && logo && (
104112
<div
105113
style={{
@@ -176,7 +184,7 @@ const LoginPage: React.FC = () => {
176184
{loading ? <CircularProgress size={24} color="inherit" /> : `${t('label.continue')}`}
177185
</Button>
178186
</Box>
179-
{/* <InputComponent
187+
<InputComponent
180188
buttonText={t('label.continue')}
181189
handleNextTask={async () => {
182190
return 'success';
@@ -190,7 +198,7 @@ const LoginPage: React.FC = () => {
190198
titleStyle: { color: theme?.primary?.main || 'black', fontWeight: 'bold' },
191199
containerStyle: { width: '100%' },
192200
}}
193-
/> */}
201+
/>
194202
</div>
195203
</div>
196204
</>

‎packages/molecules/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"test:coverage": "jest --coverage",
6767
"prepare": "husky install",
6868
"build": "npm run clean && npm run prepublishOnly2",
69-
"dev2": "nodemon --watch src --ext ts,tsx,css --exec \"npm run build\"",
69+
"dev": "nodemon --watch src --ext ts,tsx,css --exec \"npm run build\"",
7070
"storybook": "storybook dev -p 6006",
7171
"build-storybook": "storybook build",
7272
"publish-package": "npm publish --access public"

‎packages/molecules/src/language-picker/index.tsx

-45
Original file line numberDiff line numberDiff line change
@@ -50,48 +50,3 @@ const LanguagePicker = () => {
5050
};
5151

5252
export default LanguagePicker;
53-
54-
const NewLanguagePicker = ({
55-
languages,
56-
activeLanguage,
57-
handleLanguageClick,
58-
customStyles,
59-
}: any) => {
60-
const { formControlStyle, selectStyle, menuItemStyle } = customStyles;
61-
62-
return (
63-
<FormControl
64-
sx={{
65-
m: 1,
66-
background: 'lightblue',
67-
border: 'none',
68-
borderRadius: '10px',
69-
height: '36px',
70-
...formControlStyle,
71-
}}
72-
size="small"
73-
>
74-
<Select
75-
value={activeLanguage}
76-
onChange={handleLanguageClick}
77-
displayEmpty
78-
inputProps={{ 'aria-label': 'Without label' }}
79-
sx={{
80-
border: 'none',
81-
borderRadius: '10px',
82-
width: '85px',
83-
height: '36px',
84-
...selectStyle,
85-
}}
86-
>
87-
{map(languages, (lang) => (
88-
<MenuItem value={lang?.value} sx={{ ...menuItemStyle }}>
89-
{lang?.name}
90-
</MenuItem>
91-
))}
92-
</Select>
93-
</FormControl>
94-
);
95-
};
96-
97-
export { NewLanguagePicker };

‎packages/molecules/src/language-picker/languagePicker.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import MenuItem from '@mui/material/MenuItem';
3+
import FormControl from '@mui/material/FormControl';
4+
import Select, { SelectChangeEvent } from '@mui/material/Select';
5+
import { map } from 'lodash';
6+
interface NewLanguagePickerProps {
7+
languages: Array<{
8+
name: string;
9+
value: string;
10+
}>;
11+
activeLanguage: string;
12+
handleLanguageClick: (event: SelectChangeEvent) => void;
13+
customStyles?: {
14+
formControlStyle?: React.CSSProperties;
15+
selectStyle?: React.CSSProperties;
16+
menuItemStyle?: React.CSSProperties;
17+
};
18+
}
19+
20+
const NewLanguagePicker = ({
21+
languages,
22+
activeLanguage,
23+
handleLanguageClick,
24+
customStyles = {},
25+
}: NewLanguagePickerProps) => {
26+
const { formControlStyle, selectStyle, menuItemStyle } = customStyles;
27+
28+
return (
29+
<FormControl
30+
sx={{
31+
m: 1,
32+
background: 'lightblue',
33+
border: 'none',
34+
borderRadius: '10px',
35+
height: '36px',
36+
...formControlStyle,
37+
}}
38+
size="small"
39+
>
40+
<Select
41+
value={activeLanguage}
42+
onChange={handleLanguageClick}
43+
displayEmpty
44+
inputProps={{ 'aria-label': 'Without label' }}
45+
sx={{
46+
border: 'none',
47+
borderRadius: '10px',
48+
width: '85px',
49+
height: '36px',
50+
...selectStyle,
51+
}}
52+
>
53+
{map(languages, (lang) => (
54+
<MenuItem value={lang?.value} sx={{ ...menuItemStyle }}>
55+
{lang?.name}
56+
</MenuItem>
57+
))}
58+
</Select>
59+
</FormControl>
60+
);
61+
};
62+
63+
export { NewLanguagePicker };

0 commit comments

Comments
 (0)