aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorLibravatar Vijay Aravamudhan <vraravam@users.noreply.github.com>2021-10-15 15:25:41 +0530
committerLibravatar GitHub <noreply@github.com>2021-10-15 15:25:41 +0530
commit0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d (patch)
tree5a994fb8e0620aa5d2542ddd9c8561ef9861a9b5 /packages
parentchore: refresh lock file to fix vulnerabilities (#2075) (diff)
downloadferdium-app-0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d.tar.gz
ferdium-app-0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d.tar.zst
ferdium-app-0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d.zip
chore: move 'packages/ui' into 'src' (no longer an injected package) (#2077)
Diffstat (limited to 'packages')
-rw-r--r--packages/ui/.gitignore2
-rw-r--r--packages/ui/package.json31
-rw-r--r--packages/ui/src/badge/ProBadge.tsx63
-rw-r--r--packages/ui/src/badge/index.tsx71
-rw-r--r--packages/ui/src/headline/index.tsx70
-rw-r--r--packages/ui/src/icon/index.tsx46
-rw-r--r--packages/ui/src/index.ts6
-rw-r--r--packages/ui/src/infobox/index.tsx205
-rw-r--r--packages/ui/src/loader/index.tsx44
-rw-r--r--packages/ui/src/typings/generic.ts11
-rw-r--r--packages/ui/tsconfig.json12
11 files changed, 0 insertions, 561 deletions
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 @@
1node_modules/
2lib
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 @@
1{
2 "name": "@meetfranz/ui",
3 "version": "1.1.0",
4 "description": "React UI components for Franz",
5 "main": "lib/index.js",
6 "scripts": {
7 "dev": "tsc -w",
8 "build": "tsc"
9 },
10 "publishConfig": {
11 "access": "public"
12 },
13 "repository": {
14 "type": "git",
15 "url": "git+https://github.com/meetfranz/franz.git"
16 },
17 "keywords": [
18 "Franz",
19 "Forms",
20 "React",
21 "UI"
22 ],
23 "author": "Stefan Malzner <stefan@adlk.io>",
24 "license": "Apache-2.0",
25 "dependencies": {
26 "@mdi/react": "1.5.0",
27 "@meetfranz/theme": "file:../theme",
28 "react-loader": "2.4.7"
29 },
30 "gitHead": "254da30f801169fac376bda1439b46cabbb491ad"
31}
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 @@
1import { mdiStar } from '@mdi/js';
2import classnames from 'classnames';
3import { Component } from 'react';
4import injectStyle from 'react-jss';
5
6import { Badge, Icon } from '..';
7import { Theme } from '../../../theme';
8import { IWithStyle } from '../typings/generic';
9
10interface IProps extends IWithStyle {
11 badgeClasses?: string;
12 iconClasses?: string;
13 inverted?: boolean;
14 className?: string;
15}
16
17const styles = (theme: Theme) => ({
18 badge: {
19 height: 'auto',
20 padding: [4, 6, 2, 7],
21 borderRadius: theme.borderRadiusSmall,
22 },
23 invertedBadge: {
24 background: theme.styleTypes.primary.contrast,
25 color: theme.styleTypes.primary.accent,
26 },
27 icon: {
28 fill: theme.styleTypes.primary.contrast,
29 },
30 invertedIcon: {
31 fill: theme.styleTypes.primary.accent,
32 },
33});
34
35class ProBadgeComponent extends Component<IProps> {
36 render() {
37 const { classes, badgeClasses, iconClasses, inverted, className } =
38 this.props;
39
40 return (
41 <Badge
42 type="primary"
43 className={classnames([
44 classes.badge,
45 inverted && classes.invertedBadge,
46 badgeClasses,
47 className,
48 ])}
49 >
50 <Icon
51 icon={mdiStar}
52 className={classnames([
53 classes.icon,
54 inverted && classes.invertedIcon,
55 iconClasses,
56 ])}
57 />
58 </Badge>
59 );
60 }
61}
62
63export 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 @@
1import classnames from 'classnames';
2import { Component, ReactNode } from 'react';
3import injectStyle from 'react-jss';
4
5import { Theme } from '../../../theme';
6import { IWithStyle } from '../typings/generic';
7
8interface IProps extends IWithStyle {
9 type: string;
10 className?: string;
11 children: ReactNode;
12}
13
14const badgeStyles = (theme: Theme) => {
15 const styles = {};
16 Object.keys(theme.styleTypes).map(style => {
17 Object.assign(styles, {
18 [style]: {
19 background: theme.styleTypes[style].accent,
20 color: theme.styleTypes[style].contrast,
21 border: theme.styleTypes[style].border,
22 },
23 });
24 });
25
26 return styles;
27};
28
29const styles = (theme: Theme) => ({
30 badge: {
31 display: 'inline-block',
32 padding: [3, 8, 4],
33 fontSize: theme.badgeFontSize,
34 borderRadius: theme.badgeBorderRadius,
35 margin: [0, 4],
36
37 '&:first-child': {
38 marginLeft: 0,
39 },
40
41 '&:last-child': {
42 marginRight: 0,
43 },
44 },
45 ...badgeStyles(theme),
46});
47
48class BadgeComponent extends Component<IProps> {
49 public static defaultProps = {
50 type: 'primary',
51 };
52
53 render() {
54 const { classes, children, type, className } = this.props;
55
56 return (
57 <div
58 className={classnames({
59 [classes.badge]: true,
60 [classes[type]]: true,
61 [`${className}`]: className,
62 })}
63 data-type="franz-badge"
64 >
65 {children}
66 </div>
67 );
68 }
69}
70
71export 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 @@
1import classnames from 'classnames';
2import { Component, createElement, ReactNode } from 'react';
3import injectStyle from 'react-jss';
4
5import { Theme } from '../../../theme';
6import { IWithStyle, Omit } from '../typings/generic';
7
8interface IProps extends IWithStyle {
9 level?: number;
10 className?: string;
11 children: string | ReactNode;
12 id?: string;
13}
14
15const styles = (theme: Theme) => ({
16 headline: {
17 fontWeight: 'lighter',
18 color: theme.colorText,
19 marginTop: 0,
20 marginBottom: 10,
21 textAlign: 'left',
22 },
23 h1: {
24 fontSize: 30,
25 marginTop: 0,
26 },
27 h2: {
28 fontSize: 20,
29 },
30 h3: {
31 fontSize: 18,
32 },
33 h4: {
34 fontSize: theme.uiFontSize,
35 },
36});
37
38class HeadlineComponent extends Component<IProps> {
39 render() {
40 const { classes, level, className, children, id } = this.props;
41
42 return createElement(
43 `h${level}`,
44 {
45 id,
46 className: classnames({
47 [classes.headline]: true,
48 [classes[level ? `h${level}` : 'h1']]: true,
49 [`${className}`]: className,
50 }),
51 'data-type': 'franz-headline',
52 },
53 children,
54 );
55 }
56}
57
58const Headline = injectStyle(styles)(HeadlineComponent);
59
60const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) =>
61 (
62 <Headline level={level} {...props}>
63 {props.children}
64 </Headline>
65 );
66
67export const H1 = createH(1);
68export const H2 = createH(2);
69export const H3 = createH(3);
70export 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 @@
1import MdiIcon from '@mdi/react';
2import classnames from 'classnames';
3import { Component } from 'react';
4import injectStyle from 'react-jss';
5
6import { Theme } from '../../../theme';
7import { IWithStyle } from '../typings/generic';
8
9interface IProps extends IWithStyle {
10 icon: string;
11 size?: number;
12 className?: string;
13}
14
15const styles = (theme: Theme) => ({
16 icon: {
17 fill: theme.colorText,
18 },
19});
20
21class IconComponent extends Component<IProps> {
22 public static defaultProps = {
23 size: 1,
24 };
25
26 render() {
27 const { classes, icon, size, className } = this.props;
28
29 if (!icon) {
30 console.warn('No Icon specified');
31 }
32
33 return (
34 <MdiIcon
35 path={icon}
36 size={size}
37 className={classnames({
38 [classes.icon]: true,
39 [`${className}`]: className,
40 })}
41 />
42 );
43 }
44}
45
46export 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 @@
1export { Icon } from './icon';
2export { Infobox } from './infobox';
3export { H1, H2, H3, H4 } from './headline';
4export { Loader } from './loader';
5export { Badge } from './badge';
6export { 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 @@
1import { mdiClose } from '@mdi/js';
2import classnames from 'classnames';
3import { Component, ReactNode } from 'react';
4import injectStyle from 'react-jss';
5
6import { Icon } from '..';
7import { Theme } from '../../../theme';
8import { IWithStyle } from '../typings/generic';
9
10interface IProps extends IWithStyle {
11 icon?: string;
12 type?: string;
13 dismissable?: boolean;
14 onDismiss?: () => void;
15 onUnmount?: () => void;
16 ctaOnClick?: () => void;
17 ctaLabel?: string;
18 ctaLoading?: boolean;
19 children: ReactNode;
20 className: string;
21}
22
23interface IState {
24 isDismissing: boolean;
25 dismissed: boolean;
26}
27
28const buttonStyles = (theme: Theme) => {
29 const styles = {};
30 Object.keys(theme.styleTypes).map(style => {
31 Object.assign(styles, {
32 [style]: {
33 background: theme.styleTypes[style].accent,
34 color: theme.styleTypes[style].contrast,
35 border: theme.styleTypes[style].border,
36
37 '& svg': {
38 fill: theme.styleTypes[style].contrast,
39 },
40 },
41 });
42 });
43
44 return styles;
45};
46
47const infoBoxTransition: string = 'none';
48const ctaTransition: string = 'none';
49
50// 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
51// if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
52// infoBoxTransition = 'all 0.5s';
53// ctaTransition = 'opacity 0.3s';
54// }
55
56const styles = (theme: Theme) => ({
57 wrapper: {
58 position: 'relative',
59 overflow: 'hidden',
60 height: 'auto',
61 marginBottom: 30,
62 },
63 infobox: {
64 alignItems: 'center',
65 borderRadius: theme.borderRadiusSmall,
66 display: 'flex',
67 height: 'auto',
68 padding: '15px 20px',
69 top: 0,
70 transition: infoBoxTransition,
71 opacity: 1,
72 },
73 dismissing: {
74 // position: 'absolute',
75 marginTop: -100,
76 opacity: 0,
77 },
78 content: {
79 flex: 1,
80 },
81 icon: {
82 marginRight: 10,
83 },
84 close: {
85 color: (props: IProps) =>
86 theme.styleTypes[props.type ? props.type : 'primary'].contrast,
87 marginRight: -5,
88 border: 0,
89 background: 'none',
90 },
91 cta: {
92 borderColor: (props: IProps) =>
93 theme.styleTypes[props.type ? props.type : 'primary'].contrast,
94 borderRadius: theme.borderRadiusSmall,
95 borderStyle: 'solid',
96 borderWidth: 1,
97 background: 'none',
98 color: (props: IProps) =>
99 theme.styleTypes[props.type ? props.type : 'primary'].contrast,
100 marginLeft: 15,
101 padding: [4, 10],
102 fontSize: theme.uiFontSize,
103 transition: ctaTransition,
104
105 '&:hover': {
106 opacity: 0.6,
107 },
108 },
109 ...buttonStyles(theme),
110});
111
112class InfoboxComponent extends Component<IProps, IState> {
113 public static defaultProps = {
114 type: 'primary',
115 dismissable: false,
116 ctaOnClick: () => {},
117 onDismiss: () => {},
118 ctaLabel: '',
119 ctaLoading: false,
120 };
121
122 state = {
123 isDismissing: false,
124 dismissed: false,
125 };
126
127 dismiss() {
128 const { onDismiss } = this.props;
129
130 this.setState({
131 isDismissing: true,
132 });
133
134 if (onDismiss) {
135 onDismiss();
136 }
137
138 setTimeout(() => {
139 this.setState({
140 dismissed: true,
141 });
142 }, 3000);
143 }
144
145 componentWillUnmount(): void {
146 const { onUnmount } = this.props;
147 if (onUnmount) onUnmount();
148 }
149
150 render() {
151 const {
152 classes,
153 children,
154 icon,
155 type,
156 ctaLabel,
157 ctaOnClick,
158 dismissable,
159 className,
160 } = this.props;
161
162 const { isDismissing, dismissed } = this.state;
163
164 if (dismissed) {
165 return null;
166 }
167
168 return (
169 <div
170 className={classnames({
171 [classes.wrapper]: true,
172 [`${className}`]: className,
173 })}
174 >
175 <div
176 className={classnames({
177 [classes.infobox]: true,
178 [classes[`${type}`]]: type,
179 [classes.dismissing]: isDismissing,
180 })}
181 data-type="franz-infobox"
182 >
183 {icon && <Icon icon={icon} className={classes.icon} />}
184 <div className={classes.content}>{children}</div>
185 {ctaLabel && (
186 <button className={classes.cta} onClick={ctaOnClick} type="button">
187 {ctaLabel}
188 </button>
189 )}
190 {dismissable && (
191 <button
192 type="button"
193 onClick={this.dismiss.bind(this)}
194 className={classes.close}
195 >
196 <Icon icon={mdiClose} />
197 </button>
198 )}
199 </div>
200 </div>
201 );
202 }
203}
204
205export 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 @@
1import classnames from 'classnames';
2import { Component } from 'react';
3import injectStyle, { withTheme } from 'react-jss';
4import ReactLoader from 'react-loader';
5
6import { IWithStyle } from '../typings/generic';
7
8interface IProps extends IWithStyle {
9 className?: string;
10 color?: string;
11}
12
13const styles = () => ({
14 container: {
15 position: 'relative',
16 height: 60,
17 },
18});
19
20class LoaderComponent extends Component<IProps> {
21 render() {
22 const { classes, className, color, theme } = this.props;
23
24 return (
25 <div
26 className={classnames({
27 [classes.container]: true,
28 [`${className}`]: className,
29 })}
30 data-type="franz-loader"
31 >
32 <ReactLoader
33 loaded={false}
34 width={4}
35 scale={0.75}
36 color={color || theme.colorText}
37 parentClassName={classes.loader}
38 />
39 </div>
40 );
41 }
42}
43
44export 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 @@
1import { Classes } from 'jss';
2
3import { Theme } from '../../../theme';
4
5export interface IWithStyle {
6 classes: Classes;
7 theme: Theme;
8}
9
10export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
11export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
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 @@
1{
2 "extends": "../../tsconfig.json",
3 "compilerOptions": {
4 "outDir": "lib",
5 "rootDir": "src"
6 },
7 "references": [
8 {
9 "path": "../theme"
10 }
11 ]
12}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-08-03 05:49:56 +0000