From 0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d Mon Sep 17 00:00:00 2001 From: Vijay Aravamudhan Date: Fri, 15 Oct 2021 15:25:41 +0530 Subject: chore: move 'packages/ui' into 'src' (no longer an injected package) (#2077) --- packages/ui/.gitignore | 2 - packages/ui/package.json | 31 ------ packages/ui/src/badge/ProBadge.tsx | 63 ------------ packages/ui/src/badge/index.tsx | 71 ------------- packages/ui/src/headline/index.tsx | 70 ------------- packages/ui/src/icon/index.tsx | 46 --------- packages/ui/src/index.ts | 6 -- packages/ui/src/infobox/index.tsx | 205 ------------------------------------- packages/ui/src/loader/index.tsx | 44 -------- packages/ui/src/typings/generic.ts | 11 -- packages/ui/tsconfig.json | 12 --- 11 files changed, 561 deletions(-) delete mode 100644 packages/ui/.gitignore delete mode 100644 packages/ui/package.json delete mode 100644 packages/ui/src/badge/ProBadge.tsx delete mode 100644 packages/ui/src/badge/index.tsx delete mode 100644 packages/ui/src/headline/index.tsx delete mode 100644 packages/ui/src/icon/index.tsx delete mode 100644 packages/ui/src/index.ts delete mode 100644 packages/ui/src/infobox/index.tsx delete mode 100644 packages/ui/src/loader/index.tsx delete mode 100644 packages/ui/src/typings/generic.ts delete mode 100644 packages/ui/tsconfig.json (limited to 'packages/ui') diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore deleted file mode 100644 index d01826a6b..000000000 --- a/packages/ui/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -node_modules/ -lib diff --git a/packages/ui/package.json b/packages/ui/package.json deleted file mode 100644 index 0de76a98b..000000000 --- a/packages/ui/package.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "name": "@meetfranz/ui", - "version": "1.1.0", - "description": "React UI components for Franz", - "main": "lib/index.js", - "scripts": { - "dev": "tsc -w", - "build": "tsc" - }, - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/meetfranz/franz.git" - }, - "keywords": [ - "Franz", - "Forms", - "React", - "UI" - ], - "author": "Stefan Malzner ", - "license": "Apache-2.0", - "dependencies": { - "@mdi/react": "1.5.0", - "@meetfranz/theme": "file:../theme", - "react-loader": "2.4.7" - }, - "gitHead": "254da30f801169fac376bda1439b46cabbb491ad" -} diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx deleted file mode 100644 index be7ed8e58..000000000 --- a/packages/ui/src/badge/ProBadge.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { mdiStar } from '@mdi/js'; -import classnames from 'classnames'; -import { Component } from 'react'; -import injectStyle from 'react-jss'; - -import { Badge, Icon } from '..'; -import { Theme } from '../../../theme'; -import { IWithStyle } from '../typings/generic'; - -interface IProps extends IWithStyle { - badgeClasses?: string; - iconClasses?: string; - inverted?: boolean; - className?: string; -} - -const styles = (theme: Theme) => ({ - badge: { - height: 'auto', - padding: [4, 6, 2, 7], - borderRadius: theme.borderRadiusSmall, - }, - invertedBadge: { - background: theme.styleTypes.primary.contrast, - color: theme.styleTypes.primary.accent, - }, - icon: { - fill: theme.styleTypes.primary.contrast, - }, - invertedIcon: { - fill: theme.styleTypes.primary.accent, - }, -}); - -class ProBadgeComponent extends Component { - render() { - const { classes, badgeClasses, iconClasses, inverted, className } = - this.props; - - return ( - - - - ); - } -} - -export const ProBadge = injectStyle(styles)(ProBadgeComponent); diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx deleted file mode 100644 index a8f3ebcbf..000000000 --- a/packages/ui/src/badge/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import classnames from 'classnames'; -import { Component, ReactNode } from 'react'; -import injectStyle from 'react-jss'; - -import { Theme } from '../../../theme'; -import { IWithStyle } from '../typings/generic'; - -interface IProps extends IWithStyle { - type: string; - className?: string; - children: ReactNode; -} - -const badgeStyles = (theme: Theme) => { - const styles = {}; - Object.keys(theme.styleTypes).map(style => { - Object.assign(styles, { - [style]: { - background: theme.styleTypes[style].accent, - color: theme.styleTypes[style].contrast, - border: theme.styleTypes[style].border, - }, - }); - }); - - return styles; -}; - -const styles = (theme: Theme) => ({ - badge: { - display: 'inline-block', - padding: [3, 8, 4], - fontSize: theme.badgeFontSize, - borderRadius: theme.badgeBorderRadius, - margin: [0, 4], - - '&:first-child': { - marginLeft: 0, - }, - - '&:last-child': { - marginRight: 0, - }, - }, - ...badgeStyles(theme), -}); - -class BadgeComponent extends Component { - public static defaultProps = { - type: 'primary', - }; - - render() { - const { classes, children, type, className } = this.props; - - return ( -
- {children} -
- ); - } -} - -export const Badge = injectStyle(styles)(BadgeComponent); diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx deleted file mode 100644 index b534a6298..000000000 --- a/packages/ui/src/headline/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import classnames from 'classnames'; -import { Component, createElement, ReactNode } from 'react'; -import injectStyle from 'react-jss'; - -import { Theme } from '../../../theme'; -import { IWithStyle, Omit } from '../typings/generic'; - -interface IProps extends IWithStyle { - level?: number; - className?: string; - children: string | ReactNode; - id?: string; -} - -const styles = (theme: Theme) => ({ - headline: { - fontWeight: 'lighter', - color: theme.colorText, - marginTop: 0, - marginBottom: 10, - textAlign: 'left', - }, - h1: { - fontSize: 30, - marginTop: 0, - }, - h2: { - fontSize: 20, - }, - h3: { - fontSize: 18, - }, - h4: { - fontSize: theme.uiFontSize, - }, -}); - -class HeadlineComponent extends Component { - render() { - const { classes, level, className, children, id } = this.props; - - return createElement( - `h${level}`, - { - id, - className: classnames({ - [classes.headline]: true, - [classes[level ? `h${level}` : 'h1']]: true, - [`${className}`]: className, - }), - 'data-type': 'franz-headline', - }, - children, - ); - } -} - -const Headline = injectStyle(styles)(HeadlineComponent); - -const createH = (level: number) => (props: Omit) => - ( - - {props.children} - - ); - -export const H1 = createH(1); -export const H2 = createH(2); -export const H3 = createH(3); -export const H4 = createH(4); diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx deleted file mode 100644 index 9753b399c..000000000 --- a/packages/ui/src/icon/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import MdiIcon from '@mdi/react'; -import classnames from 'classnames'; -import { Component } from 'react'; -import injectStyle from 'react-jss'; - -import { Theme } from '../../../theme'; -import { IWithStyle } from '../typings/generic'; - -interface IProps extends IWithStyle { - icon: string; - size?: number; - className?: string; -} - -const styles = (theme: Theme) => ({ - icon: { - fill: theme.colorText, - }, -}); - -class IconComponent extends Component { - public static defaultProps = { - size: 1, - }; - - render() { - const { classes, icon, size, className } = this.props; - - if (!icon) { - console.warn('No Icon specified'); - } - - return ( - - ); - } -} - -export const Icon = injectStyle(styles)(IconComponent); diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts deleted file mode 100644 index bab3fc27b..000000000 --- a/packages/ui/src/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { Icon } from './icon'; -export { Infobox } from './infobox'; -export { H1, H2, H3, H4 } from './headline'; -export { Loader } from './loader'; -export { Badge } from './badge'; -export { ProBadge } from './badge/ProBadge'; diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx deleted file mode 100644 index 7bad4a1f2..000000000 --- a/packages/ui/src/infobox/index.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import { mdiClose } from '@mdi/js'; -import classnames from 'classnames'; -import { Component, ReactNode } from 'react'; -import injectStyle from 'react-jss'; - -import { Icon } from '..'; -import { Theme } from '../../../theme'; -import { IWithStyle } from '../typings/generic'; - -interface IProps extends IWithStyle { - icon?: string; - type?: string; - dismissable?: boolean; - onDismiss?: () => void; - onUnmount?: () => void; - ctaOnClick?: () => void; - ctaLabel?: string; - ctaLoading?: boolean; - children: ReactNode; - className: string; -} - -interface IState { - isDismissing: boolean; - dismissed: boolean; -} - -const buttonStyles = (theme: Theme) => { - const styles = {}; - Object.keys(theme.styleTypes).map(style => { - Object.assign(styles, { - [style]: { - background: theme.styleTypes[style].accent, - color: theme.styleTypes[style].contrast, - border: theme.styleTypes[style].border, - - '& svg': { - fill: theme.styleTypes[style].contrast, - }, - }, - }); - }); - - return styles; -}; - -const infoBoxTransition: string = 'none'; -const ctaTransition: string = 'none'; - -// TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdi -// if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { -// infoBoxTransition = 'all 0.5s'; -// ctaTransition = 'opacity 0.3s'; -// } - -const styles = (theme: Theme) => ({ - wrapper: { - position: 'relative', - overflow: 'hidden', - height: 'auto', - marginBottom: 30, - }, - infobox: { - alignItems: 'center', - borderRadius: theme.borderRadiusSmall, - display: 'flex', - height: 'auto', - padding: '15px 20px', - top: 0, - transition: infoBoxTransition, - opacity: 1, - }, - dismissing: { - // position: 'absolute', - marginTop: -100, - opacity: 0, - }, - content: { - flex: 1, - }, - icon: { - marginRight: 10, - }, - close: { - color: (props: IProps) => - theme.styleTypes[props.type ? props.type : 'primary'].contrast, - marginRight: -5, - border: 0, - background: 'none', - }, - cta: { - borderColor: (props: IProps) => - theme.styleTypes[props.type ? props.type : 'primary'].contrast, - borderRadius: theme.borderRadiusSmall, - borderStyle: 'solid', - borderWidth: 1, - background: 'none', - color: (props: IProps) => - theme.styleTypes[props.type ? props.type : 'primary'].contrast, - marginLeft: 15, - padding: [4, 10], - fontSize: theme.uiFontSize, - transition: ctaTransition, - - '&:hover': { - opacity: 0.6, - }, - }, - ...buttonStyles(theme), -}); - -class InfoboxComponent extends Component { - public static defaultProps = { - type: 'primary', - dismissable: false, - ctaOnClick: () => {}, - onDismiss: () => {}, - ctaLabel: '', - ctaLoading: false, - }; - - state = { - isDismissing: false, - dismissed: false, - }; - - dismiss() { - const { onDismiss } = this.props; - - this.setState({ - isDismissing: true, - }); - - if (onDismiss) { - onDismiss(); - } - - setTimeout(() => { - this.setState({ - dismissed: true, - }); - }, 3000); - } - - componentWillUnmount(): void { - const { onUnmount } = this.props; - if (onUnmount) onUnmount(); - } - - render() { - const { - classes, - children, - icon, - type, - ctaLabel, - ctaOnClick, - dismissable, - className, - } = this.props; - - const { isDismissing, dismissed } = this.state; - - if (dismissed) { - return null; - } - - return ( -
-
- {icon && } -
{children}
- {ctaLabel && ( - - )} - {dismissable && ( - - )} -
-
- ); - } -} - -export const Infobox = injectStyle(styles)(InfoboxComponent); diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx deleted file mode 100644 index 0607bd48b..000000000 --- a/packages/ui/src/loader/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import classnames from 'classnames'; -import { Component } from 'react'; -import injectStyle, { withTheme } from 'react-jss'; -import ReactLoader from 'react-loader'; - -import { IWithStyle } from '../typings/generic'; - -interface IProps extends IWithStyle { - className?: string; - color?: string; -} - -const styles = () => ({ - container: { - position: 'relative', - height: 60, - }, -}); - -class LoaderComponent extends Component { - render() { - const { classes, className, color, theme } = this.props; - - return ( -
- -
- ); - } -} - -export const Loader = injectStyle(styles)(withTheme(LoaderComponent)); diff --git a/packages/ui/src/typings/generic.ts b/packages/ui/src/typings/generic.ts deleted file mode 100644 index a2b9c041c..000000000 --- a/packages/ui/src/typings/generic.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Classes } from 'jss'; - -import { Theme } from '../../../theme'; - -export interface IWithStyle { - classes: Classes; - theme: Theme; -} - -export type Merge = Omit> & N; -export type Omit = Pick>; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json deleted file mode 100644 index 015581136..000000000 --- a/packages/ui/tsconfig.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "lib", - "rootDir": "src" - }, - "references": [ - { - "path": "../theme" - } - ] -} -- cgit v1.2.3-70-g09d2