Skip to content

Commit

Permalink
feat: add React typescript definitions
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 27, 2021
1 parent 6552ef6 commit 49ef335
Show file tree
Hide file tree
Showing 45 changed files with 520 additions and 28 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ yarn-error.log*
.eslintcache

package/**/*.js
package/**/*.d.ts
package/**/*.css

kitchen-sink/react/dist
5 changes: 3 additions & 2 deletions package/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"name": "tailwind-mobile/react",
"private": true,
"main": "./cjs/tailwind-mobile-react.js",
"jsnext:main": "../esm/tailwind-mobile-react.js",
"module": "../esm/tailwind-mobile-react.js"
"jsnext:main": "./esm/tailwind-mobile-react.js",
"module": "./esm/tailwind-mobile-react.js",
"types": "./tailwind-mobile-react.d.ts"
}
52 changes: 52 additions & 0 deletions scripts/build-react.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,25 @@
/* eslint no-console: "off" */
const { promise: exec } = require('exec-sh');
const fs = require('fs-extra');
const path = require('path');
const bannerReact = require('./banner.js')('React');

const createComponentTypes = (componentName, propsContent) => {
return `
import * as React from 'react';
${propsContent}
interface ${componentName}Props {}
interface ${componentName}Props extends React.HTMLAttributes<HTMLElement> {}
interface ${componentName}Props extends Props {}
declare const ${componentName}: React.FunctionComponent<${componentName}Props>;
export default ${componentName};
`.trim();
};

module.exports = async (format, outputDir = 'package') => {
// Babel
await exec(
Expand Down Expand Up @@ -37,4 +54,39 @@ module.exports = async (format, outputDir = 'package') => {
.replace(/\.jsx/g, '.js');
fs.writeFileSync(filePath, content);
});

// Types
let typesContent = fs.readFileSync(
path.resolve(__dirname, '../src/react/tailwind-mobile-react.d.ts'),
'utf-8'
);
const typesDir = path.resolve(__dirname, '../src/types');
const components = [];
fs.readdirSync(typesDir).forEach((fileName) => {
const propsContent = fs.readFileSync(
path.resolve(typesDir, fileName),
'utf-8'
);
const componentName = fileName.split('.d.ts')[0];
components.push(componentName);
const componentTypes = createComponentTypes(componentName, propsContent);
fs.writeFileSync(
path.resolve(outputDir, 'react', 'types', fileName),
componentTypes
);
});
const importComponents = components
.map(
(componentName) =>
`import ${componentName} from './types/${componentName}.d.ts';`
)
.join('\n');
const exportComponents = `export { ${components.join(', ')} }`;
typesContent = typesContent
.replace('// IMPORT_COMPONENTS', importComponents)
.replace('// EXPORT_COMPONENTS', exportComponents);
fs.writeFileSync(
path.resolve(outputDir, 'react', 'tailwind-mobile-react.d.ts'),
typesContent
);
};
44 changes: 22 additions & 22 deletions src/react/components/ListInput.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,27 +40,27 @@ const ListInput = forwardRef((props, ref) => {
value,
defaultValue,
type = 'text',
inputmode,
readonly,
inputMode,
readOnly,
required,
disabled,
placeholder,
size,
accept,
autocomplete,
autocorrect,
autocapitalize,
spellcheck,
autofocus,
autosave,
autoComplete,
autoCorrect,
autoCapitalize,
spellCheck,
autoFocus,
autoSave,
max,
min,
step,
maxlength,
minlength,
maxLength,
minLength,
multiple,
pattern,
tabindex,
tabIndex,

onInput,
onChange,
Expand Down Expand Up @@ -261,26 +261,26 @@ const ListInput = forwardRef((props, ref) => {
name={name}
type={needsType ? type : undefined}
placeholder={placeholder}
inputMode={inputmode}
inputMode={inputMode}
size={size}
accept={accept}
autoComplete={autocomplete}
autoCorrect={autocorrect}
autoCapitalize={autocapitalize}
spellCheck={spellcheck}
autoFocus={autofocus}
autoSave={autosave}
autoComplete={autoComplete}
autoCorrect={autoCorrect}
autoCapitalize={autoCapitalize}
spellCheck={spellCheck}
autoFocus={autoFocus}
autoSave={autoSave}
disabled={disabled}
max={max}
maxLength={maxlength}
maxLength={maxLength}
min={min}
minLength={minlength}
minLength={minLength}
step={step}
multiple={multiple}
readOnly={readonly}
readOnly={readOnly}
required={required}
pattern={pattern}
tabIndex={tabindex}
tabIndex={tabIndex}
value={value}
defaultValue={defaultValue}
onInput={onInput}
Expand Down
4 changes: 2 additions & 2 deletions src/react/components/Range.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Range = forwardRef((props, ref) => {
name,
value = undefined,
defaultValue,
readonly,
readOnly,
disabled,
step,
min = 0,
Expand Down Expand Up @@ -110,7 +110,7 @@ const Range = forwardRef((props, ref) => {
step={step}
value={value}
defaultValue={defaultValue}
readOnly={readonly}
readOnly={readOnly}
disabled={disabled}
onChange={onChange}
onFocus={onFocus}
Expand Down
4 changes: 2 additions & 2 deletions src/react/components/Stepper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Stepper = forwardRef((props, ref) => {
inputType = 'text',
inputPlaceholder,
inputDisabled,
inputReadonly,
inputReadOnly,

buttonsOnly,

Expand Down Expand Up @@ -175,7 +175,7 @@ const Stepper = forwardRef((props, ref) => {
value={value}
defaultValue={defaultValue}
disabled={inputDisabled}
readOnly={inputReadonly}
readOnly={inputReadOnly}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
Expand Down
15 changes: 15 additions & 0 deletions src/react/tailwind-mobile-react.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from 'react';
// IMPORT_COMPONENTS

// PROVIDER
interface TailwindMobileProviderProps {
theme?: 'ios' | 'material';
dark?: boolean;
}
declare const TailwindMobileProvider: React.FunctionComponent<TailwindMobileProviderProps>;

// HELPERS
declare const useTheme: () => 'material' | 'ios';

// EXPORT_COMPONENTS
export { useTheme, TailwindMobileProvider };
5 changes: 5 additions & 0 deletions src/types/App.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
interface Props {
component?: string;
theme?: 'ios' | 'material';
dark?: boolean;
}
5 changes: 5 additions & 0 deletions src/types/Badge.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
interface Props {
component?: string;
colors?: object;
sm?: boolean;
}
9 changes: 9 additions & 0 deletions src/types/Block.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
interface Props {
component?: string;
colors?: object;
margin?: string;
strong?: boolean;
inset?: boolean;
nested?: boolean;
hairlines?: boolean;
}
3 changes: 3 additions & 0 deletions src/types/BlockFooter.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
interface Props {
component?: string;
}
3 changes: 3 additions & 0 deletions src/types/BlockHeader.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
interface Props {
component?: string;
}
4 changes: 4 additions & 0 deletions src/types/BlockTitle.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
interface Props {
component?: string;
withBlock?: boolean;
}
15 changes: 15 additions & 0 deletions src/types/Button.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
interface Props {
component?: string;
colors?: object;
href?: string;
outline?: boolean;
clear?: boolean;
rounded?: boolean;
small?: boolean;
large?: boolean;
raised?: boolean;
inline?: boolean;
segmented?: boolean;
segmentedStrong?: boolean;
segmentedActive?: boolean;
}
8 changes: 8 additions & 0 deletions src/types/Card.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
interface Props {
component?: string;
colors?: object;
margin?: string;
header?: React.ReactNode | string;
footer?: React.ReactNode | string;
outline?: boolean;
}
12 changes: 12 additions & 0 deletions src/types/Checkbox.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
interface Props {
component?: string;
colors?: object;
defaultChecked?: boolean;
checked?: boolean;
indeterminate?: boolean;
name?: string;
value?: any;
disabled?: boolean;
readOnly?: boolean;
onChange?: (e: any) => void;
}
8 changes: 8 additions & 0 deletions src/types/Chip.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
interface Props {
component?: string;
colors?: object;
media?: React.ReactNode;
deleteButton?: boolean;
onDelete?: (e: any) => void;
outline?: boolean;
}
8 changes: 8 additions & 0 deletions src/types/Fab.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
interface Props {
component?: string;
colors?: object;
href?: string;
text?: string | React.ReactNode;
textPosition?: 'after' | 'before';
icon?: React.ReactNode;
}
6 changes: 6 additions & 0 deletions src/types/Icon.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
interface Props {
component?: string;
colors?: object;
badge?: React.ReactNode;
badgeColors?: object;
}
10 changes: 10 additions & 0 deletions src/types/Link.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
interface Props {
component?: string;
colors?: object;
navbar?: boolean;
toolbar?: boolean;
iconOnly?: boolean;
tabbar?: boolean;
tabbarActive?: boolean;
onClick?: (e: any) => void;
}
9 changes: 9 additions & 0 deletions src/types/List.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
interface Props {
component?: string;
colors?: object;
margin?: string;
inset?: boolean;
nested?: boolean;
menuList?: boolean;
hairlines?: boolean;
}
11 changes: 11 additions & 0 deletions src/types/ListButton.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
interface Props {
component?: string;
colors?: object;
hairlines?: boolean;
href?: string;
target?: string;
type?: string;
value?: any;
linkComponent?: string;
linkProps?: any;
}
1 change: 1 addition & 0 deletions src/types/ListGroup.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
interface Props {}
51 changes: 51 additions & 0 deletions src/types/ListInput.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
interface Props {
component?: string;
colors?: object;
label?: string | React.ReactNode;
inlineLabel?: boolean;
floatingLabel?: boolean;
media?: string | React.ReactNode;
input?: React.ReactNode;
info?: string | React.ReactNode;
error?: string | boolean | React.ReactNode;
clearButton?: boolean;
dropdown?: boolean;

hairlines?: boolean;

inputId?: string;
inputStyle?: React.CSSProperties;
inputClassName?: string;

name?: string;
value?: any;
defaultValue?: any;
type?: string;
inputMode?: string;
readOnly?: boolean;
required?: boolean;
disabled?: boolean;
placeholder?: string | number;
size?: string | number;
accept?: string | number;
autoComplete?: string;
autoCorrect?: string;
autoCapitalize?: string;
spellCheck?: string;
autoFocus?: boolean;
autoSave?: string;
max?: string | number;
min?: string | number;
step?: string | number;
maxLength?: string | number;
minLength?: string | number;
multiple?: boolean;
pattern?: string;
tabIndex?: string | number;

onInput?: (e: any) => void;
onChange?: (e: any) => void;
onFocus?: (e: any) => void;
onBlur?: (e: any) => void;
onClear?: (e: any) => void;
}
Loading

0 comments on commit 49ef335

Please sign in to comment.