Skip to content

Commit f1bd170

Browse files
tenphitenphi
committed
refactor(@cubejs-enterprise/uikit): initial typescript support * 3
1 parent c12ad10 commit f1bd170

Some content is hidden

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

91 files changed

+1483
-1012
lines changed

Diff for: ‎.editorconfig

+2
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,5 @@ end_of_line = lf
1010
insert_final_newline = true
1111
trim_trailing_whitespace = true
1212
ij_typescript_spaces_within_imports = true
13+
ij_javascript_spaces_within_object_type_braces = true
14+
ij_javascript_spaces_within_object_literal_braces = true

Diff for: ‎.eslintrc.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module.exports = {
2+
'extends': ['react-app'],
3+
'rules': {
4+
'import/no-unresolved': 0,
5+
'comma-dangle': 0,
6+
'no-console': 0,
7+
'arrow-parens': 0,
8+
'import/extensions': 0,
9+
'quotes': [1, 'single'],
10+
'no-prototype-builtins': 0,
11+
'class-methods-use-this': 0,
12+
'no-param-reassign': 0,
13+
'no-mixed-operators': 0,
14+
'no-else-return': 0,
15+
'prefer-promise-reject-errors': 0,
16+
'react-hooks/exhaustive-deps': 0,
17+
'operator-linebreak': ['error', 'after'],
18+
'import/no-anonymous-default-export': 0,
19+
'space-before-function-paren': [1, 'never'],
20+
'space-before-blocks': [1, 'always'],
21+
'max-len': ['error', 120, 2, {
22+
ignoreUrls: true,
23+
ignoreComments: true,
24+
ignoreRegExpLiterals: true,
25+
ignoreStrings: true,
26+
ignoreTemplateLiterals: true,
27+
}]
28+
}
29+
};

Diff for: ‎.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"singleQuote": true,
3-
"trailingComma": "all",
3+
"trailingComma": "all"
44
}

Diff for: ‎package.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"test-watch": "jest --watch",
1313
"format": "prettier --write \"src/**/*.{js,jsx}\"",
1414
"lint": "prettier --check \"src/**/*.{js,jsx}\"",
15-
"fix": "prettier --write \"src/**/*.{js,jsx}\"",
15+
"fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
1616
"compile": "babel src -d dist --copy-files",
1717
"storybook": "start-storybook -s ./public -p 6006",
1818
"build-storybook": "build-storybook",
@@ -30,12 +30,12 @@
3030
"@open-wc/testing": "^2.5.32",
3131
"@react-aria/button": "^3.3.2",
3232
"@react-aria/checkbox": "^3.2.2",
33-
"@react-aria/combobox": "^3.0.0-rc.0",
33+
"@react-aria/combobox": "^3.0.0",
3434
"@react-aria/dialog": "^3.1.3",
3535
"@react-aria/focus": "^3.4.0",
3636
"@react-aria/i18n": "^3.3.1",
3737
"@react-aria/interactions": "^3.5.0",
38-
"@react-aria/listbox": "^3.2.5",
38+
"@react-aria/listbox": "^3.3.0",
3939
"@react-aria/numberfield": "^3.0.0",
4040
"@react-aria/overlays": "^3.7.0",
4141
"@react-aria/radio": "^3.1.4",
@@ -58,6 +58,10 @@
5858
"@react-stately/toggle": "^3.2.2",
5959
"@react-stately/tooltip": "^3.0.4",
6060
"@react-stately/utils": "^3.2.1",
61+
"@react-types/button": "^3.4.0",
62+
"@react-types/checkbox": "^3.2.2",
63+
"@react-types/combobox": "^3.0.0",
64+
"@react-types/select": "^3.3.0",
6165
"@react-types/shared": "^3.7.1",
6266
"@rollup/plugin-babel": "^5.2.1",
6367
"@rollup/plugin-commonjs": "^15.1.0",

Diff for: ‎src/App.tsx

+21-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import { useState } from 'react';
2-
import { Base, Grid, TopBar, Space, LoadingAnimation, Block } from './index';
2+
import {
3+
Base,
4+
Grid,
5+
TopBar,
6+
Space,
7+
LoadingAnimation,
8+
Block,
9+
Text,
10+
} from './index';
311
import { Button } from './atoms/Button/Button';
412
// import ResponsiveProvider from './providers/Responsive';
513
import { color } from './utils/colors';
@@ -27,12 +35,12 @@ function App() {
2735
<>
2836
<Provider>
2937
<Block padding="2x 20x">
30-
<GridProvider columns="3" gap="2x">
31-
<Flex flow="row wrap">
32-
<Block width="1sp" height="4x" fill="#purple.04"></Block>
33-
<Block width="2sp" height="4x" fill="#purple.1"></Block>
34-
<Block width="2sp" height="4x" fill="#purple.1"></Block>
35-
<Block width="1sp" height="4x" fill="#purple.1"></Block>
38+
<GridProvider columns={3} gap="2x">
39+
<Flex flow="row wrap" align="center" justify="center">
40+
<Block width="1sp" height="4x" fill="#purple.04" />
41+
<Block width="2sp" height="4x" fill="#purple.1" />
42+
<Block width="2sp" height="4x" fill="#purple.1" />
43+
<Block width="1sp" height="4x" fill="#purple.1" />
3644
{/*<Block width="1sp" height="4x" fill="#purple.04"></Block>*/}
3745
</Flex>
3846
</GridProvider>
@@ -90,7 +98,7 @@ function App() {
9098
{/*</Modal>*/}
9199
<Button
92100
onPress={() => setInProp(!inProp)}
93-
type="clear"
101+
variant="clear"
94102
styles={{
95103
color: {
96104
'': '#dark.75',
@@ -117,10 +125,10 @@ function App() {
117125
</Button>
118126
</StyleProvider>
119127
</StyleProvider>
120-
<Button type="primary">Primary</Button>
121-
<Button type="primary">Other Primary</Button>
122-
<Button type="danger">Danger</Button>
123-
<Button type="clear">Clear</Button>
128+
<Button variant="primary">Primary</Button>
129+
<Button variant="primary">Other Primary</Button>
130+
<Button variant="danger">Danger</Button>
131+
<Button variant="clear">Clear</Button>
124132
<Base64Upload>123</Base64Upload>
125133
</Space>
126134
<Space padding="1x">
@@ -130,7 +138,7 @@ function App() {
130138
<TopBar onLogoPress={() => {}} />
131139
<Flex
132140
styles={{
133-
content: ['start', 'center', 'start'],
141+
placeContent: ['start', 'center', 'start'],
134142
}}
135143
gap={['2x', '4x']}
136144
flow={['row', 'column', 'row']}

Diff for: ‎src/atoms/Avatar/Avatar.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Base } from '../../components/Base';
33
import { CONTAINER_STYLES } from '../../styles/list';
44
import { extractStyles } from '../../utils/styles';
55
import { filterBaseProps } from '../../utils/filterBaseProps';
6+
import { BaseProps, ContainerStyleProps } from '../../components/types';
7+
import { NuStyles } from '../../styles/types';
68

79
const DEFAULT_STYLES = {
810
display: 'grid',
@@ -11,19 +13,25 @@ const DEFAULT_STYLES = {
1113
fill: '#purple',
1214
color: '#white',
1315
radius: 'round',
14-
content: 'center',
16+
placeContent: 'center',
1517
width: '@avatar-size @avatar-size @avatar-size',
1618
height: '@avatar-size @avatar-size @avatar-size',
1719
fontSize: 'calc(@avatar-size / 2)',
1820
lineHeight: 'calc(@avatar-size / 2)',
1921
fontWeight: 500,
2022
};
2123

22-
export const Avatar = forwardRef(
23-
({ size = '4x', icon, children, ...props }, ref) => {
24-
const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
24+
export interface AvatarProps extends BaseProps, ContainerStyleProps {
25+
icon?: JSX.Element;
26+
size?: NuStyles['size'];
27+
}
2528

26-
styles['--avatar-size'] = size;
29+
export const Avatar = forwardRef(
30+
({ size = '4x', icon, children, ...props }: AvatarProps, ref) => {
31+
const styles = extractStyles(props, CONTAINER_STYLES, {
32+
...DEFAULT_STYLES,
33+
'--avatar-size': size,
34+
});
2735

2836
return (
2937
<Base

Diff for: ‎src/atoms/Badge/Badge.tsx

+15-23
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,33 @@
11
import { forwardRef } from 'react';
22
import THEMES from '../../data/themes';
33
import { Base } from '../../components/Base';
4-
import {
5-
BLOCK_STYLES,
6-
DIMENSION_STYLES,
7-
COLOR_STYLES,
8-
POSITION_STYLES,
9-
FLOW_STYLES,
10-
BASE_STYLES,
11-
} from '../../styles/list';
4+
import { CONTAINER_STYLES } from '../../styles/list';
125
import { extractStyles } from '../../utils/styles';
136
import { filterBaseProps } from '../../utils/filterBaseProps';
7+
import { BaseProps, ContainerStyleProps } from '../../components/types';
8+
import { NuStyles } from '../../styles/types';
149

15-
const DEFAULT_STYLES = {
10+
const DEFAULT_STYLES: NuStyles = {
1611
display: 'inline-flex',
17-
content: 'center',
18-
items: 'center',
12+
placeContent: 'center',
13+
placeItems: 'center',
1914
radius: 'round',
2015
size: '12px 12px',
2116
width: 'min 16px',
2217
height: '16px',
2318
textAlign: 'center',
2419
fontWeight: 600,
2520
color: '#white',
26-
};
21+
} as const;
2722

28-
const STYLE_LIST = [
29-
...BASE_STYLES,
30-
...FLOW_STYLES,
31-
...BLOCK_STYLES,
32-
...COLOR_STYLES,
33-
...DIMENSION_STYLES,
34-
...POSITION_STYLES,
35-
];
23+
export interface BadgeProps extends BaseProps, ContainerStyleProps {
24+
type?: keyof typeof THEMES;
25+
}
3626

37-
export const Badge = forwardRef(({ type, children, ...props }, ref) => {
38-
const styles = extractStyles(props, STYLE_LIST, {
27+
export const Badge = forwardRef((allProps: BadgeProps, ref) => {
28+
let { type, children, ...props } = allProps;
29+
30+
const styles = extractStyles(props, CONTAINER_STYLES, {
3931
...DEFAULT_STYLES,
4032
padding:
4133
typeof children === 'string'
@@ -45,7 +37,7 @@ export const Badge = forwardRef(({ type, children, ...props }, ref) => {
4537
? '0 1px'
4638
: 0
4739
: 0,
48-
fill: THEMES[type] ? THEMES[type].color : '#purple',
40+
fill: type && THEMES[type] ? THEMES[type].color : '#purple',
4941
});
5042

5143
return (

Diff for: ‎src/atoms/Base64Upload/Base64Upload.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import styled from 'styled-components';
66
import { extractStyles } from '../../utils/styles';
77
import { POSITION_STYLES } from '../../styles/list';
88
import { filterBaseProps } from '../../utils/filterBaseProps';
9+
import { BaseProps, PositionStyleProps } from '../../components/types';
10+
import { FocusableRef } from '@react-types/shared';
911

1012
const DEFAULT_STYLES = {
1113
display: 'inline-flex',
@@ -18,8 +20,14 @@ const DEFAULT_STYLES = {
1820
fontWeight: 400,
1921
};
2022

23+
export interface Base64UploadProps extends BaseProps, PositionStyleProps {
24+
onInput?: Function;
25+
}
26+
2127
export const Base64Upload = styled(
22-
forwardRef(({ type, onInput, ...props }, ref) => {
28+
forwardRef((allProps: Base64UploadProps, ref: FocusableRef<HTMLElement>) => {
29+
const { onInput, ...props } = allProps;
30+
2331
const styles = extractStyles(props, POSITION_STYLES, DEFAULT_STYLES);
2432
const [file, setFile] = useState();
2533
const [error, setError] = useState('');
@@ -44,9 +52,9 @@ export const Base64Upload = styled(
4452
/**
4553
* @type {string}
4654
*/
47-
const text = reader.result;
55+
const text = String(reader.result);
4856

49-
let base64text;
57+
let base64text: string;
5058

5159
try {
5260
JSON.parse(text);
@@ -79,7 +87,6 @@ export const Base64Upload = styled(
7987
return (
8088
<>
8189
<Button
82-
tag="button"
8390
{...filterBaseProps(props, { eventProps: true })}
8491
styles={styles}
8592
ref={ref}

0 commit comments

Comments
 (0)