remove csstype

meetfranz · Aug 14, 2023 · b791feb · b791feb
1 parent b49117c
commit b791feb
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 33 deletions.
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
@@ -1,7 +1,6 @@
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import CSS from 'csstype';
 import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import Loader from 'react-loader';
@@ -34,13 +33,13 @@ const styles = (theme: Theme) => ({
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
     display: 'inline-flex',
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative',
     transition: 'background .5s, opacity 0.3s',
-    textAlign: 'center' as CSS.TextAlignProperty,
+    textAlign: 'center',
     outline: 'none',
     alignItems: 'center',
     padding: 0,
-    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
+    width: (props: IProps) => (props.stretch ? '100%' : 'auto'),
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
     // height: theme.buttonHeight,
@@ -113,7 +112,7 @@ const styles = (theme: Theme) => ({
     opacity: theme.inputDisabledOpacity,
   },
   loader: {
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative',
     width: 20,
     height: 18,
     zIndex: 9999,
@@ -125,7 +124,7 @@ const styles = (theme: Theme) => ({
     transition: 'all 0.3s',
     marginLeft: (props: IProps): number => !props.busy ? 10 : 20,
     marginRight: (props: IProps): number => !props.busy ? -10 : -20,
-    position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit',
+    position: (props: IProps) => props.stretch ? 'absolute' : 'inherit',
   },
   icon: {
     margin: [1, 10, 0, -5],
@@ -225,7 +224,7 @@ class ButtonComponent extends Component<IProps> {
       wrapperComponent = (
         <button
           id={id}
-          type={type}
+          type={type as any}
           onClick={onClick}
           className={classnames({
             [`${classes.button}`]: true,

diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
@@ -1,11 +1,10 @@
-import { Classes } from 'jss';
 import React, { Component } from 'react';
 import injectSheet from 'react-jss';
 
 import styles from './styles';
 
 interface IProps {
-  classes: Classes;
+  classes: any;
   message: string;
 }
 

diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
@@ -1,5 +1,4 @@
 import { Theme } from '@meetfranz/theme';
-import CSS from 'csstype';
 
 const prefixStyles = (theme: Theme) => ({
   background: theme.inputPrefixBackground,
@@ -13,7 +12,7 @@ export default (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   disabled: {
     opacity: theme.inputDisabledOpacity,
@@ -85,7 +84,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    boxSizing: 'border-box',
     display: 'flex',
     height: theme.inputHeight,
     order: 1,

diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import { Classes } from 'jss';
 import React, { Component } from 'react';
 import injectSheet from 'react-jss';
 
@@ -8,7 +7,7 @@ import { IFormField } from '../typings/generic';
 import styles from './styles';
 
 interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> {
-  classes: Classes;
+  classes: any;
   isRequired: boolean;
 }
 
@@ -38,7 +37,10 @@ class LabelComponent extends Component<ILabel> {
         htmlFor={htmlFor}
       >
         {showLabel && (
-          <span className={classes.label}>{title}{isRequired && ' *'}</span>
+          <span className={classes.label}>
+{title}
+{isRequired && ' *'}
+</span>
         )}
         <div className={classes.content}>
           {children}

diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts
@@ -1,5 +1,4 @@
 import { Theme } from '@meetfranz/theme';
-import CSS from 'csstype';
 
 export default (theme: Theme) => ({
   label: {
@@ -42,7 +41,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    boxSizing: 'border-box',
     display: 'flex',
     order: 1,
     width: '100%',

diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
@@ -1,10 +1,9 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import CSS from 'csstype';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { IFormField, IWithStyle, Omit } from '../typings/generic';
+import { IFormField, IWithStyle } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -19,7 +18,7 @@ const styles = (theme: Theme) => ({
     background: theme.toggleBackground,
     borderRadius: theme.borderRadius,
     height: theme.toggleHeight,
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative',
     width: theme.toggleWidth,
   },
   button: {
@@ -30,7 +29,7 @@ const styles = (theme: Theme) => ({
     height: theme.toggleHeight - 2,
     left: 1,
     top: 1,
-    position: 'absolute' as CSS.PositionProperty,
+    position: 'absolute',
     transition: 'all .5s',
   },
   buttonActive: {

diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts
@@ -1,5 +1,4 @@
 import { Theme } from '@meetfranz/theme/lib';
-import { Classes } from 'jss';
 
 export interface IFormField {
   showLabel?: boolean;
@@ -10,7 +9,7 @@ export interface IFormField {
 }
 
 export interface IWithStyle {
-  classes: Classes;
+  classes: any;
   theme: Theme;
 }
 

diff --git a/packages/theme/package-lock.json b/packages/theme/package-lock.json
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -15,9 +15,7 @@
   },
   "scripts": {
     "dev": "tsc -w",
-    "build": "tsc",
-    "preprepare": "npm run test",
-    "test": "npx mocha"
+    "build": "tsc"
   },
   "bugs": {
     "url": "https://github.com/meetfranz/franz/issues"

diff --git a/packages/ui/src/typings/generic.ts b/packages/ui/src/typings/generic.ts
@@ -1,8 +1,7 @@
 import { Theme } from '@meetfranz/theme/lib';
-import { Classes } from 'jss';
 
 export interface IWithStyle {
-  classes: Classes;
+  classes: any;
   theme: Theme;
 }
 

diff --git a/types.d.ts b/types.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="node" />
+
+declare module 'react-jss'
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
@@ -1,4 +1,3 @@
-import CSS from 'csstype';
 import { Classes } from 'jss';
 import { observer } from 'mobx-react';
 import DevTools from 'mobx-react-devtools';
@@ -21,6 +20,7 @@ import './stories/toggle.stories';
 import { store } from './stores';
 
 import { theme, ThemeType } from '@meetfranz/theme';
+
 const defaultTheme = theme(ThemeType.default);
 
 const styles = {
@@ -35,7 +35,7 @@ const styles = {
   },
   menu: {
     width: 300,
-    position: 'fixed' as CSS.PositionProperty,
+    position: 'fixed',
     listStyleType: 'none',
     fontSize: 14,
     overflow: 'scroll',
@@ -66,7 +66,7 @@ const styles = {
     borderBottom: '1px solid #CFCFCF',
   },
   sectionLink: {
-    fontWeight: 'bold' as CSS.FontWeightProperty,
+    fontWeight: 'bold',
     color: '#000',
     textDecoration: 'none',
   },
@@ -81,7 +81,8 @@ export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes
     <ul className={classes.menu}>
       {store.stories.sections.map((section, key) => (
         <li key={key}>
-          <a href={`#section-${key}`} className={classes.sectionLink}>{
+          <a href={`#section-${key}`} className={classes.sectionLink}>
+            {
             section.name}
           </a>
           <ul className={classes.storyList}>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/// <reference types="node" />

		declare module 'react-jss'