aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.dockerignore1
-rw-r--r--.gitignore1
-rw-r--r--package.json3
-rw-r--r--uidev/src/app.html12
-rw-r--r--uidev/src/app.tsx125
-rw-r--r--uidev/src/index.tsx6
-rw-r--r--uidev/src/stores/index.ts5
-rw-r--r--uidev/src/stores/stories.ts41
-rw-r--r--uidev/src/stories/badge.stories.tsx29
-rw-r--r--uidev/src/stories/button.stories.tsx175
-rw-r--r--uidev/src/stories/headline.stories.tsx48
-rw-r--r--uidev/src/stories/icon.stories.tsx12
-rw-r--r--uidev/src/stories/infobox.stories.tsx145
-rw-r--r--uidev/src/stories/input.stories.tsx69
-rw-r--r--uidev/src/stories/loader.stories.tsx8
-rw-r--r--uidev/src/stories/select.stories.tsx303
-rw-r--r--uidev/src/stories/textarea.stories.tsx30
-rw-r--r--uidev/src/stories/toggle.stories.tsx76
-rw-r--r--uidev/src/withTheme/index.tsx56
-rw-r--r--uidev/tsconfig.json16
-rw-r--r--uidev/webpack.config.js31
21 files changed, 1 insertions, 1191 deletions
diff --git a/.dockerignore b/.dockerignore
index 8690fc9e9..df16e47cb 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -24,7 +24,6 @@ flow-typed
24out 24out
25recipes/archives 25recipes/archives
26tmp-out/ 26tmp-out/
27uidev/lib
28docs/ 27docs/
29src/internal-server/database/tmp/ 28src/internal-server/database/tmp/
30src/internal-server/database/development.sqlite 29src/internal-server/database/development.sqlite
diff --git a/.gitignore b/.gitignore
index a10427aad..5b5d27c96 100644
--- a/.gitignore
+++ b/.gitignore
@@ -330,7 +330,6 @@ build
330.tmp 330.tmp
331.stage 331.stage
332lerna-debug.log 332lerna-debug.log
333uidev/lib
334server*.log 333server*.log
335 334
336# These entries have been merged from the git submodule repo 'internal-server' 335# These entries have been merged from the git submodule repo 'internal-server'
diff --git a/package.json b/package.json
index ce3368fe3..0f7c439e2 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
25 "dev": "cross-env NODE_ENV=development gulp dev", 25 "dev": "cross-env NODE_ENV=development gulp dev",
26 "test": "jest", 26 "test": "jest",
27 "test:watch": "jest --watch", 27 "test:watch": "jest --watch",
28 "lint": "eslint \"{src,scripts,packages,uidev}/**/*.{js,jsx,ts,tsx}\" --quiet", 28 "lint": "eslint \"{src,scripts,packages}/**/*.{js,jsx,ts,tsx}\" --quiet",
29 "lint:fix": "npm run lint -- --fix", 29 "lint:fix": "npm run lint -- --fix",
30 "extract": "formatjs extract 'src/**/*.{js,ts,tsx}' --out-file temp.json --flatten --id-interpolation-pattern '[sha512:contenthash:base64:6]' --preserve-whitespace", 30 "extract": "formatjs extract 'src/**/*.{js,ts,tsx}' --out-file temp.json --flatten --id-interpolation-pattern '[sha512:contenthash:base64:6]' --preserve-whitespace",
31 "compile": "formatjs compile 'temp.json' --out-file src/i18n/locales/en-US.json", 31 "compile": "formatjs compile 'temp.json' --out-file src/i18n/locales/en-US.json",
@@ -36,7 +36,6 @@
36 "contributors": "all-contributors", 36 "contributors": "all-contributors",
37 "reformat-files": "./node_modules/.bin/prettier --ignore-path .eslintignore --write --require-pragma \"**/*.{js,jsx,scss}\"", 37 "reformat-files": "./node_modules/.bin/prettier --ignore-path .eslintignore --write --require-pragma \"**/*.{js,jsx,scss}\"",
38 "packages": "npx lerna publish --no-git-tag-version", 38 "packages": "npx lerna publish --no-git-tag-version",
39 "uidev": "cd uidev && webpack-dev-server",
40 "postinstall": "ts-node scripts/postinstall.ts", 39 "postinstall": "ts-node scripts/postinstall.ts",
41 "apply-branding": "ts-node ./src/i18n/apply-branding.ts", 40 "apply-branding": "ts-node ./src/i18n/apply-branding.ts",
42 "update-submodules": "git submodule update --remote --force", 41 "update-submodules": "git submodule update --remote --force",
diff --git a/uidev/src/app.html b/uidev/src/app.html
deleted file mode 100644
index 2557bf25e..000000000
--- a/uidev/src/app.html
+++ /dev/null
@@ -1,12 +0,0 @@
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>UIDev</title>
6 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet">
7</head>
8
9<body>
10 <div id="root"></div>
11</body>
12</html>
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
deleted file mode 100644
index 26e0f5b96..000000000
--- a/uidev/src/app.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
1import { Property } from 'csstype';
2import { Classes } from 'jss';
3import { observer } from 'mobx-react';
4import injectSheet from 'react-jss';
5
6import { theme, ThemeType } from '@meetfranz/theme';
7import { WithTheme } from './withTheme';
8
9import './stories/badge.stories';
10import './stories/button.stories';
11import './stories/headline.stories';
12import './stories/icon.stories';
13import './stories/infobox.stories';
14import './stories/input.stories';
15import './stories/loader.stories';
16import './stories/select.stories';
17import './stories/textarea.stories';
18import './stories/toggle.stories';
19
20import { store } from './stores';
21
22const defaultTheme = theme(ThemeType.default);
23
24const styles = {
25 '@global body': {
26 margin: 0,
27 fontSize: defaultTheme.uiFontSize,
28 fontFamily: "'Open Sans', sans-serif",
29 },
30 container: {
31 display: 'flex',
32 width: '100%',
33 },
34 menu: {
35 width: 300,
36 position: 'fixed' as Property.Position,
37 listStyleType: 'none',
38 fontSize: 14,
39 overflow: 'scroll',
40 height: '100%',
41 },
42 storyList: {
43 paddingLeft: 18,
44 marginTop: 5,
45 marginBottom: 20,
46 },
47 stories: {
48 width: '100%',
49 marginLeft: 320,
50 paddingLeft: 40,
51 paddingRight: 40,
52 borderLeft: '1px solid #CFCFCF',
53 background: '#f7f7f7',
54 },
55 sectionHeadline: {
56 fontSize: 30,
57 },
58 storyHeadline: {
59 fontSize: 24,
60 },
61 story: {
62 paddingBottom: 40,
63 marginBottom: 40,
64 borderBottom: '1px solid #CFCFCF',
65 },
66 sectionLink: {
67 fontWeight: 'bold' as Property.FontWeight,
68 color: '#000',
69 textDecoration: 'none',
70 },
71 storyLink: {
72 color: '#000',
73 textDecoration: 'none',
74 },
75};
76
77export const App = injectSheet(styles)(
78 observer(({ classes }: { classes: Classes }) => (
79 <div className={classes.container}>
80 <ul className={classes.menu}>
81 {store.stories.sections.map((section, key) => (
82 <li key={key}>
83 <a href={`#section-${key}`} className={classes.sectionLink}>
84 {section.name}
85 </a>
86 <ul className={classes.storyList}>
87 {section.stories.map((story, storyKey) => (
88 <li key={storyKey}>
89 <a
90 href={`#section-${key}-story-${storyKey}`}
91 className={classes.storyLink}
92 >
93 {story.name}
94 </a>
95 </li>
96 ))}
97 </ul>
98 </li>
99 ))}
100 </ul>
101 <div className={classes.stories}>
102 {store.stories.sections.map((section, key) => (
103 <div key={key}>
104 <h1 id={`section-${key}`} className={classes.sectionHeadline}>
105 {section.name}
106 </h1>
107 {section.stories.map((story, storyKey) => (
108 <div className={classes.story} key={storyKey}>
109 <h2
110 id={`section-${key}-story-${storyKey}`}
111 className={classes.storyHeadline}
112 >
113 {story.name}
114 </h2>
115 <WithTheme>
116 <story.component />
117 </WithTheme>
118 </div>
119 ))}
120 </div>
121 ))}
122 </div>
123 </div>
124 )),
125);
diff --git a/uidev/src/index.tsx b/uidev/src/index.tsx
deleted file mode 100644
index 0f2003d24..000000000
--- a/uidev/src/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
1import { render } from 'react-dom';
2import { App } from './app';
3
4const app = () => <App />;
5
6render(app(), document.querySelector('#root'));
diff --git a/uidev/src/stores/index.ts b/uidev/src/stores/index.ts
deleted file mode 100644
index 276058ec4..000000000
--- a/uidev/src/stores/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
1import { storyStore } from './stories';
2
3export const store = {
4 stories: storyStore,
5};
diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts
deleted file mode 100644
index 12bacdd59..000000000
--- a/uidev/src/stores/stories.ts
+++ /dev/null
@@ -1,41 +0,0 @@
1export type StorySectionName = string;
2export type StoryName = string;
3export type StoryComponent = () => JSX.Element;
4
5export interface IStories {
6 name: string;
7 component: StoryComponent;
8}
9
10export interface ISections {
11 name: StorySectionName;
12 stories: IStories[];
13}
14
15export interface IStoryStore {
16 sections: ISections[];
17}
18
19export const storyStore: IStoryStore = {
20 sections: [],
21};
22
23export const storiesOf = (name: StorySectionName) => {
24 const length = storyStore.sections.push({
25 name,
26 stories: [],
27 });
28
29 const actions = {
30 add: (name: StoryName, component: StoryComponent) => {
31 storyStore.sections[length - 1].stories.push({
32 name,
33 component,
34 });
35
36 return actions;
37 },
38 };
39
40 return actions;
41};
diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx
deleted file mode 100644
index 05fa4617b..000000000
--- a/uidev/src/stories/badge.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
1import { Badge, ProBadge } from '@meetfranz/ui';
2import { storiesOf } from '../stores/stories';
3
4storiesOf('Badge')
5 .add('Basic', () => (
6 <>
7 <Badge>New</Badge>
8 </>
9 ))
10 .add('Styles', () => (
11 <>
12 <Badge type="primary">Primary</Badge>
13 <Badge type="secondary">secondary</Badge>
14 <Badge type="success">success</Badge>
15 <Badge type="warning">warning</Badge>
16 <Badge type="danger">danger</Badge>
17 <Badge type="inverted">inverted</Badge>
18 </>
19 ))
20 .add('Pro Badge', () => (
21 <>
22 <ProBadge />
23 </>
24 ))
25 .add('Pro Badge inverted', () => (
26 <>
27 <ProBadge inverted />
28 </>
29 ));
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
deleted file mode 100644
index 400063cea..000000000
--- a/uidev/src/stories/button.stories.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
1import { mdiInformation } from '@mdi/js';
2import { observable } from 'mobx';
3import { observer } from 'mobx-react';
4import * as React from 'react';
5import injectSheet from 'react-jss';
6
7import { Button, Input } from '@meetfranz/forms';
8import { Classes } from 'jss';
9import { storiesOf } from '../stores/stories';
10
11const defaultProps = {
12 label: 'Button',
13 id: 'test1',
14 name: 'test1',
15 type: 'button',
16 disabled: false,
17};
18
19const styles = {
20 combinedElements: {
21 display: 'flex',
22 justifyContent: 'space-between',
23 },
24 input: {
25 flex: 1,
26 marginRight: 20,
27 },
28};
29
30const createStore = (args?: any) => observable({ ...defaultProps, ...args });
31
32const WithStoreButton = observer(({ store }: { store: any }) => (
33 <>
34 <Button
35 {...{ ...defaultProps, ...store }}
36 onClick={
37 !store.onClick
38 ? () => {
39 store.busy = !store.busy;
40
41 window.setTimeout(() => {
42 store.busy = !store.busy;
43 }, 1000);
44 }
45 : store.onClick
46 }
47 />
48 </>
49));
50
51storiesOf('Button')
52 .add('Basic', () => <WithStoreButton store={createStore()} />)
53 .add('Secondary', () => (
54 <WithStoreButton
55 store={createStore({
56 buttonType: 'secondary',
57 })}
58 />
59 ))
60 .add('Success', () => (
61 <WithStoreButton
62 store={createStore({
63 buttonType: 'success',
64 })}
65 />
66 ))
67 .add('Warning', () => (
68 <WithStoreButton
69 store={createStore({
70 buttonType: 'warning',
71 })}
72 />
73 ))
74 .add('Danger', () => (
75 <WithStoreButton
76 store={createStore({
77 buttonType: 'danger',
78 })}
79 />
80 ))
81 .add('Inverted', () => (
82 <WithStoreButton
83 store={createStore({
84 buttonType: 'inverted',
85 })}
86 />
87 ))
88 .add('Full width', () => (
89 <WithStoreButton
90 store={createStore({
91 stretch: true,
92 })}
93 />
94 ))
95 .add('Disabled', () => (
96 <WithStoreButton
97 store={createStore({
98 disabled: true,
99 })}
100 />
101 ))
102 .add('With loader', () => (
103 <WithStoreButton
104 store={createStore({
105 busy: true,
106 })}
107 />
108 ))
109 .add('With icon', () => (
110 <WithStoreButton
111 store={createStore({
112 icon: mdiInformation,
113 })}
114 />
115 ))
116 .add('As link', () => (
117 <WithStoreButton
118 store={createStore({
119 href: 'https://meetfranz.com',
120 })}
121 />
122 ))
123 .add('As link (target=_blank)', () => (
124 <WithStoreButton
125 store={createStore({
126 href: 'https://meetfranz.com',
127 target: '_blank',
128 })}
129 />
130 ))
131 .add('As link (with onClick)', () => (
132 <WithStoreButton
133 store={createStore({
134 href: 'https://meetfranz.com',
135 onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
136 e.preventDefault();
137 alert('Click event');
138 },
139 })}
140 />
141 ))
142 .add('Long multi-line button', () => (
143 <WithStoreButton
144 store={createStore({
145 label:
146 'But there is something that I must say to my people, who stand on the warm threshold which leads into the palace of justice: In the process of gaining our rightful place, we must not be guilty of wrongful deeds. Let us not seek to satisfy our thirst for freedom by drinking from the cup of bitterness and hatred. We must forever conduct our struggle on the high plane of dignity and discipline. We must not allow our creative protest to degenerate into physical violence. Again and again, we must rise to the majestic heights of meeting physical force with soul force.',
147 })}
148 />
149 ))
150 .add(
151 'Button with Input',
152 injectSheet(styles)(
153 observer(({ classes }: { classes: Classes }) => (
154 <div className={classes.combinedElements}>
155 <Input showLabel={false} className={classes.input} noMargin />
156 <WithStoreButton store={createStore({})} />
157 </div>
158 )),
159 ),
160 )
161 .add(
162 'Icon Button with Input',
163 injectSheet(styles)(
164 observer(({ classes }: { classes: Classes }) => (
165 <div className={classes.combinedElements}>
166 <Input showLabel={false} className={classes.input} noMargin />
167 <WithStoreButton
168 store={createStore({
169 icon: mdiInformation,
170 })}
171 />
172 </div>
173 )),
174 ),
175 );
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx
deleted file mode 100644
index f6a95b1f4..000000000
--- a/uidev/src/stories/headline.stories.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
1import { H1, H2, H3, H4 } from '@meetfranz/ui';
2import { storiesOf } from '../stores/stories';
3
4// interface IStoreArgs {
5// value?: boolean;
6// checked?: boolean;
7// label?: string;
8// id?: string;
9// name?: string;
10// disabled?: boolean;
11// error?: string;
12// }
13
14// const createStore = (args?: IStoreArgs) => {
15// return observable(Object.assign({
16// id: `element-${uuid()}`,
17// name: 'toggle',
18// label: 'Label',
19// value: true,
20// checked: false,
21// disabled: false,
22// error: '',
23// }, args));
24// };
25
26// const WithStoreToggle = observer(({ store }: { store: any }) => (
27// <>
28// <Toggle
29// value={store.value}
30// checked={store.checked}
31// label={store.label}
32// id={store.id}
33// name={store.name}
34// disabled={store.disabled}
35// error={store.error}
36// onChange={() => store.checked = !store.checked}
37// />
38// </>
39// ));
40
41storiesOf('Typo').add('Headlines', () => (
42 <>
43 <H1>Welcome to the world of tomorrow</H1>
44 <H2>Welcome to the world of tomorrow</H2>
45 <H3>Welcome to the world of tomorrow</H3>
46 <H4>Welcome to the world of tomorrow</H4>
47 </>
48));
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx
deleted file mode 100644
index 73ed1b927..000000000
--- a/uidev/src/stories/icon.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
1import { mdiAccountCircle } from '@mdi/js';
2
3import { Icon } from '@meetfranz/ui';
4import { storiesOf } from '../stores/stories';
5
6storiesOf('Icon').add('Basic', () => (
7 <>
8 <Icon icon={mdiAccountCircle} />
9 <Icon icon={mdiAccountCircle} size={2} />
10 <Icon icon={mdiAccountCircle} size={3} />
11 </>
12));
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
deleted file mode 100644
index b5f86e37d..000000000
--- a/uidev/src/stories/infobox.stories.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
1import { mdiEarth } from '@mdi/js';
2import { observable } from 'mobx';
3import { observer } from 'mobx-react';
4import * as React from 'react';
5
6import { Infobox } from '@meetfranz/ui';
7import { storiesOf } from '../stores/stories';
8
9interface IStoreArgs {
10 icon?: string;
11 ctaLabel?: string;
12 type?: string;
13 dismissable?: boolean;
14 className?: string;
15}
16
17const createStore = (args?: IStoreArgs) =>
18 observable({
19 type: 'primary',
20 ctaOnClick: () => {
21 alert('on click handler');
22 },
23 ...args,
24 });
25
26const WithStoreInfobox = observer(
27 ({ store, children }: { store: any; children: string | React.ReactNode }) => (
28 <>
29 <Infobox
30 icon={store.icon}
31 ctaLabel={store.ctaLabel}
32 type={store.type}
33 ctaOnClick={store.ctaOnClick}
34 dismissable={store.dismissable}
35 className={store.className}
36 >
37 {children}
38 </Infobox>
39 </>
40 ),
41);
42
43storiesOf('Infobox')
44 .add('Basic', () => (
45 <WithStoreInfobox store={createStore()}>
46 Welcome to the world of tomorrow
47 </WithStoreInfobox>
48 ))
49 .add('Icon + Dismissable', () => (
50 <WithStoreInfobox
51 store={createStore({
52 icon: mdiEarth,
53 dismissable: true,
54 })}
55 >
56 Welcome to the world of tomorrow
57 </WithStoreInfobox>
58 ))
59 .add('With CTA', () => (
60 <WithStoreInfobox
61 store={createStore({
62 icon: mdiEarth,
63 ctaLabel: 'Ok, hi!',
64 })}
65 >
66 Welcome to the world of tomorrow
67 </WithStoreInfobox>
68 ))
69 .add('With long text', () => (
70 <WithStoreInfobox
71 store={createStore({
72 icon: mdiEarth,
73 ctaLabel: 'Ok, hi!',
74 })}
75 >
76 Ferdi is your messaging app / former Emperor of Austria and combines chat
77 & messaging services into one application. Ferdi currently supports Slack,
78 WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google
79 Hangouts,GroupMe, Skype and many more.
80 </WithStoreInfobox>
81 ))
82 .add('Secondary', () => (
83 <WithStoreInfobox
84 store={createStore({
85 icon: mdiEarth,
86 ctaLabel: 'Ok, hi!',
87 type: 'secondary',
88 })}
89 >
90 Welcome to the world of tomorrow
91 </WithStoreInfobox>
92 ))
93 .add('Success', () => (
94 <WithStoreInfobox
95 store={createStore({
96 icon: mdiEarth,
97 ctaLabel: 'Ok, hi!',
98 type: 'success',
99 })}
100 >
101 Welcome to the world of tomorrow
102 </WithStoreInfobox>
103 ))
104 .add('Warning', () => (
105 <WithStoreInfobox
106 store={createStore({
107 icon: mdiEarth,
108 ctaLabel: 'Ok, hi!',
109 type: 'warning',
110 })}
111 >
112 Welcome to the world of tomorrow
113 </WithStoreInfobox>
114 ))
115 .add('Danger', () => (
116 <WithStoreInfobox
117 store={createStore({
118 icon: mdiEarth,
119 ctaLabel: 'Ok, hi!',
120 type: 'danger',
121 })}
122 >
123 Welcome to the world of tomorrow
124 </WithStoreInfobox>
125 ))
126 .add('Inverted', () => (
127 <WithStoreInfobox
128 store={createStore({
129 icon: mdiEarth,
130 ctaLabel: 'Ok, hi!',
131 type: 'inverted',
132 })}
133 >
134 Welcome to the world of tomorrow
135 </WithStoreInfobox>
136 ))
137 .add('With className', () => (
138 <WithStoreInfobox
139 store={createStore({
140 className: 'franz-is-awesome',
141 })}
142 >
143 Welcome to the world of tomorrow
144 </WithStoreInfobox>
145 ));
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx
deleted file mode 100644
index 2a252ee66..000000000
--- a/uidev/src/stories/input.stories.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
1import * as React from 'react';
2
3import { Input } from '@meetfranz/forms';
4import { v4 as uuid } from 'uuid';
5import { storiesOf } from '../stores/stories';
6
7const defaultProps = () => {
8 const id = uuid();
9 return {
10 label: 'Label',
11 id: `test-${id}`,
12 name: `test-${id}`,
13 onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
14 console.log('changed event', e),
15 };
16};
17
18const defaultPasswordProps = () => {
19 const id = uuid();
20 return {
21 label: 'Password',
22 id: `test-${id}`,
23 name: `test-${id}`,
24 type: 'password',
25 onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
26 console.log('changed event', e),
27 };
28};
29
30storiesOf('Input')
31 .add('Basic', () => (
32 <Input {...defaultProps()} placeholder="Placeholder text" />
33 ))
34 .add('Without Label', () => <Input {...defaultProps()} showLabel={false} />)
35 .add('Disabled', () => <Input {...defaultProps()} disabled />)
36 .add('With prefix', () => <Input {...defaultProps()} prefix="https://" />)
37 .add('With suffix', () => (
38 <Input {...defaultProps()} suffix=".meetfranz.com" />
39 ))
40 .add('With pre-suffix', () => (
41 <Input {...defaultProps()} prefix="https://" suffix=".meetfranz.com" />
42 ))
43 .add('With error', () => (
44 <Input
45 {...defaultProps()}
46 value="faulty input"
47 error="This is a generic error message."
48 />
49 ))
50 .add('Type number with min & max', () => (
51 <Input {...defaultProps()} type="number" min={1} max={10} />
52 ));
53
54storiesOf('Password')
55 .add('Basic', () => <Input {...defaultPasswordProps()} />)
56 .add('Show password toggle', () => (
57 <Input {...defaultPasswordProps()} showPasswordToggle />
58 ))
59 .add('Score password', () => (
60 <Input {...defaultPasswordProps()} showPasswordToggle scorePassword />
61 ))
62 .add('Score password with error', () => (
63 <Input
64 {...defaultPasswordProps()}
65 error="Password is too short"
66 showPasswordToggle
67 scorePassword
68 />
69 ));
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx
deleted file mode 100644
index bbe4d3421..000000000
--- a/uidev/src/stories/loader.stories.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
1import { Loader } from '@meetfranz/ui';
2import { storiesOf } from '../stores/stories';
3
4storiesOf('Loader').add('Basic', () => (
5 <>
6 <Loader />
7 </>
8));
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx
deleted file mode 100644
index 26189afb8..000000000
--- a/uidev/src/stories/select.stories.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
1import * as React from 'react';
2import { v4 as uuid } from 'uuid';
3
4import { Select } from '@meetfranz/forms';
5import { storiesOf } from '../stores/stories';
6
7const defaultProps = () => {
8 const id = uuid();
9 return {
10 label: 'Label',
11 id: `test-${id}`,
12 name: `test-${id}`,
13 options: {
14 AF: 'Afghanistan',
15 AL: 'Albania',
16 DZ: 'Algeria',
17 AS: 'American Samoa',
18 AD: 'Andorra',
19 AO: 'Angola',
20 AI: 'Anguilla',
21 AQ: 'Antarctica',
22 AG: 'Antigua and Barbuda',
23 AR: 'Argentina',
24 AM: 'Armenia',
25 AW: 'Aruba',
26 AC: 'Ascension Island',
27 AU: 'Australia',
28 AT: 'Austria',
29 AZ: 'Azerbaijan',
30 BS: 'Bahamas',
31 BH: 'Bahrain',
32 BD: 'Bangladesh',
33 BB: 'Barbados',
34 BY: 'Belarus',
35 BE: 'Belgium',
36 BZ: 'Belize',
37 BJ: 'Benin',
38 BM: 'Bermuda',
39 BT: 'Bhutan',
40 BO: 'Bolivia',
41 BA: 'Bosnia and Herzegovina',
42 BW: 'Botswana',
43 BV: 'Bouvet Island',
44 BR: 'Brazil',
45 BQ: 'British Antarctic Territory',
46 IO: 'British Indian Ocean Territory',
47 VG: 'British Virgin Islands',
48 BN: 'Brunei',
49 BG: 'Bulgaria',
50 BF: 'Burkina Faso',
51 BI: 'Burundi',
52 KH: 'Cambodia',
53 CM: 'Cameroon',
54 CA: 'Canada',
55 IC: 'Canary Islands',
56 CT: 'Canton and Enderbury Islands',
57 CV: 'Cape Verde',
58 KY: 'Cayman Islands',
59 CF: 'Central African Republic',
60 EA: 'Ceuta and Melilla',
61 TD: 'Chad',
62 CL: 'Chile',
63 CN: 'China',
64 CX: 'Christmas Island',
65 CP: 'Clipperton Island',
66 CC: 'Cocos [Keeling] Islands',
67 CO: 'Colombia',
68 KM: 'Comoros',
69 CD: 'Congo - Kinshasa',
70 CG: 'Congo [Republic]',
71 CK: 'Cook Islands',
72 CR: 'Costa Rica',
73 HR: 'Croatia',
74 CU: 'Cuba',
75 CY: 'Cyprus',
76 CZ: 'Czech Republic',
77 CI: 'Côte d’Ivoire',
78 DK: 'Denmark',
79 DG: 'Diego Garcia',
80 DJ: 'Djibouti',
81 DM: 'Dominica',
82 DO: 'Dominican Republic',
83 NQ: 'Dronning Maud Land',
84 TL: 'East Timor',
85 EC: 'Ecuador',
86 EG: 'Egypt',
87 SV: 'El Salvador',
88 GQ: 'Equatorial Guinea',
89 ER: 'Eritrea',
90 EE: 'Estonia',
91 ET: 'Ethiopia',
92 FK: 'Falkland Islands',
93 FO: 'Faroe Islands',
94 FJ: 'Fiji',
95 FI: 'Finland',
96 FR: 'France',
97 GF: 'French Guiana',
98 PF: 'French Polynesia',
99 TF: 'French Southern Territories',
100 FQ: 'French Southern and Antarctic Territories',
101 GA: 'Gabon',
102 GM: 'Gambia',
103 GE: 'Georgia',
104 DE: 'Germany',
105 GH: 'Ghana',
106 GI: 'Gibraltar',
107 GR: 'Greece',
108 GL: 'Greenland',
109 GD: 'Grenada',
110 GP: 'Guadeloupe',
111 GU: 'Guam',
112 GT: 'Guatemala',
113 GG: 'Guernsey',
114 GN: 'Guinea',
115 GW: 'Guinea-Bissau',
116 GY: 'Guyana',
117 HT: 'Haiti',
118 HM: 'Heard Island and McDonald Islands',
119 HN: 'Honduras',
120 HK: 'Hong Kong',
121 HU: 'Hungary',
122 IS: 'Iceland',
123 IN: 'India',
124 ID: 'Indonesia',
125 IR: 'Iran',
126 IQ: 'Iraq',
127 IE: 'Ireland',
128 IM: 'Isle of Man',
129 IL: 'Israel',
130 IT: 'Italy',
131 JM: 'Jamaica',
132 JP: 'Japan',
133 JE: 'Jersey',
134 JT: 'Johnston Island',
135 JO: 'Jordan',
136 KZ: 'Kazakhstan',
137 KE: 'Kenya',
138 KI: 'Kiribati',
139 XK: 'Kosovo',
140 KW: 'Kuwait',
141 KG: 'Kyrgyzstan',
142 LA: 'Laos',
143 LV: 'Latvia',
144 LB: 'Lebanon',
145 LS: 'Lesotho',
146 LR: 'Liberia',
147 LY: 'Libya',
148 LI: 'Liechtenstein',
149 LT: 'Lithuania',
150 LU: 'Luxembourg',
151 MO: 'Macau',
152 MK: 'Macedonia',
153 MG: 'Madagascar',
154 MW: 'Malawi',
155 MY: 'Malaysia',
156 MV: 'Maldives',
157 ML: 'Mali',
158 MT: 'Malta',
159 MH: 'Marshall Islands',
160 MQ: 'Martinique',
161 MR: 'Mauritania',
162 MU: 'Mauritius',
163 YT: 'Mayotte',
164 FX: 'Metropolitan France',
165 MX: 'Mexico',
166 FM: 'Micronesia',
167 MI: 'Midway Islands',
168 MD: 'Moldova',
169 MC: 'Monaco',
170 MN: 'Mongolia',
171 ME: 'Montenegro',
172 MS: 'Montserrat',
173 MA: 'Morocco',
174 MZ: 'Mozambique',
175 MM: 'Myanmar [Burma]',
176 NA: 'Namibia',
177 NR: 'Nauru',
178 NP: 'Nepal',
179 NL: 'Netherlands',
180 AN: 'Netherlands Antilles',
181 NC: 'New Caledonia',
182 NZ: 'New Zealand',
183 NI: 'Nicaragua',
184 NE: 'Niger',
185 NG: 'Nigeria',
186 NU: 'Niue',
187 NF: 'Norfolk Island',
188 KP: 'North Korea',
189 VD: 'North Vietnam',
190 MP: 'Northern Mariana Islands',
191 NO: 'Norway',
192 OM: 'Oman',
193 QO: 'Outlying Oceania',
194 PC: 'Pacific Islands Trust Territory',
195 PK: 'Pakistan',
196 PW: 'Palau',
197 PS: 'Palestinian Territories',
198 PA: 'Panama',
199 PZ: 'Panama Canal Zone',
200 PG: 'Papua New Guinea',
201 PY: 'Paraguay',
202 YD: 'Peoples Democratic Republic of Yemen',
203 PE: 'Peru',
204 PH: 'Philippines',
205 PN: 'Pitcairn Islands',
206 PL: 'Poland',
207 PT: 'Portugal',
208 PR: 'Puerto Rico',
209 QA: 'Qatar',
210 RO: 'Romania',
211 RU: 'Russia',
212 RW: 'Rwanda',
213 RE: 'Réunion',
214 BL: 'Saint Barthélemy',
215 SH: 'Saint Helena',
216 KN: 'Saint Kitts and Nevis',
217 LC: 'Saint Lucia',
218 MF: 'Saint Martin',
219 PM: 'Saint Pierre and Miquelon',
220 VC: 'Saint Vincent and the Grenadines',
221 WS: 'Samoa',
222 SM: 'San Marino',
223 SA: 'Saudi Arabia',
224 SN: 'Senegal',
225 RS: 'Serbia',
226 CS: 'Serbia and Montenegro',
227 SC: 'Seychelles',
228 SL: 'Sierra Leone',
229 SG: 'Singapore',
230 SK: 'Slovakia',
231 SI: 'Slovenia',
232 SB: 'Solomon Islands',
233 SO: 'Somalia',
234 ZA: 'South Africa',
235 GS: 'South Georgia and the South Sandwich Islands',
236 KR: 'South Korea',
237 ES: 'Spain',
238 LK: 'Sri Lanka',
239 SD: 'Sudan',
240 SR: 'Suriname',
241 SJ: 'Svalbard and Jan Mayen',
242 SZ: 'Swaziland',
243 SE: 'Sweden',
244 CH: 'Switzerland',
245 SY: 'Syria',
246 ST: 'São Tomé and Príncipe',
247 TW: 'Taiwan',
248 TJ: 'Tajikistan',
249 TZ: 'Tanzania',
250 TH: 'Thailand',
251 TG: 'Togo',
252 TK: 'Tokelau',
253 TO: 'Tonga',
254 TT: 'Trinidad and Tobago',
255 TA: 'Tristan da Cunha',
256 TN: 'Tunisia',
257 TR: 'Turkey',
258 TM: 'Turkmenistan',
259 TC: 'Turks and Caicos Islands',
260 TV: 'Tuvalu',
261 UM: 'U.S. Minor Outlying Islands',
262 PU: 'U.S. Miscellaneous Pacific Islands',
263 VI: 'U.S. Virgin Islands',
264 UG: 'Uganda',
265 UA: 'Ukraine',
266 AE: 'United Arab Emirates',
267 GB: 'United Kingdom',
268 US: 'United States',
269 UY: 'Uruguay',
270 UZ: 'Uzbekistan',
271 VU: 'Vanuatu',
272 VA: 'Vatican City',
273 VE: 'Venezuela',
274 VN: 'Vietnam',
275 WK: 'Wake Island',
276 WF: 'Wallis and Futuna',
277 EH: 'Western Sahara',
278 YE: 'Yemen',
279 ZM: 'Zambia',
280 ZW: 'Zimbabwe',
281 AX: 'Åland Islands',
282 },
283 actionText: 'Select country',
284 // defaultValue: 'AT',
285 onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
286 console.log('changed event', e),
287 };
288};
289
290storiesOf('Select')
291 .add('Basic', () => <Select {...defaultProps()} />)
292 .add('With preselection', () => (
293 <Select {...defaultProps()} defaultValue="AT" />
294 ))
295 .add('With search', () => <Select {...defaultProps()} showSearch />)
296 .add('Disabled', () => <Select {...defaultProps()} showSearch disabled />)
297 .add('With error', () => (
298 <Select
299 {...defaultProps()}
300 showSearch
301 error="Your selection was a bit too funky for my taste"
302 />
303 ));
diff --git a/uidev/src/stories/textarea.stories.tsx b/uidev/src/stories/textarea.stories.tsx
deleted file mode 100644
index 5c2b61798..000000000
--- a/uidev/src/stories/textarea.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
1import * as React from 'react';
2import { v4 as uuid } from 'uuid';
3
4import { Textarea } from '@meetfranz/forms';
5import { storiesOf } from '../stores/stories';
6
7const defaultProps = () => {
8 const id = uuid();
9 return {
10 label: 'Label',
11 id: `test-${id}`,
12 name: `test-${id}`,
13 rows: 5,
14 onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
15 console.log('changed event', e),
16 };
17};
18
19storiesOf('Textarea')
20 .add('Basic', () => (
21 <Textarea
22 {...defaultProps()}
23 // placeholder="Placeholder text"
24 />
25 ))
26 .add('10 rows', () => <Textarea {...defaultProps()} rows={10} />)
27 .add('With error', () => (
28 <Textarea {...defaultProps()} error="This is a generic error message." />
29 ))
30 .add('Disabled', () => <Textarea {...defaultProps()} rows={2} disabled />);
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx
deleted file mode 100644
index 021658d21..000000000
--- a/uidev/src/stories/toggle.stories.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
1import { observable } from 'mobx';
2import { observer } from 'mobx-react';
3import { v4 as uuid } from 'uuid';
4
5import { Toggle } from '@meetfranz/forms';
6import { storiesOf } from '../stores/stories';
7
8interface IStoreArgs {
9 value?: boolean;
10 checked?: boolean;
11 label?: string;
12 id?: string;
13 name?: string;
14 disabled?: boolean;
15 error?: string;
16}
17
18const createStore = (args?: IStoreArgs) =>
19 observable({
20 id: `element-${uuid()}`,
21 name: 'toggle',
22 label: 'Label',
23 value: true,
24 checked: false,
25 disabled: false,
26 error: '',
27 ...args,
28 });
29
30const WithStoreToggle = observer(({ store }: { store: any }) => (
31 <>
32 <Toggle
33 value={store.value}
34 checked={store.checked}
35 label={store.label}
36 id={store.id}
37 name={store.name}
38 disabled={store.disabled}
39 error={store.error}
40 onChange={() => (store.checked = !store.checked)}
41 />
42 </>
43));
44
45storiesOf('Toggle')
46 .add('Basic', () => <WithStoreToggle store={createStore()} />)
47 .add('Checked', () => (
48 <WithStoreToggle
49 store={createStore({
50 checked: true,
51 })}
52 />
53 ))
54 .add('Disabled', () => (
55 <WithStoreToggle
56 store={createStore({
57 checked: true,
58 disabled: true,
59 })}
60 />
61 ))
62 .add('Long label', () => (
63 <WithStoreToggle
64 store={createStore({
65 label:
66 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.',
67 })}
68 />
69 ))
70 .add('With error', () => (
71 <WithStoreToggle
72 store={createStore({
73 error: 'Something went wrong',
74 })}
75 />
76 ));
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
deleted file mode 100644
index 0e39b4810..000000000
--- a/uidev/src/withTheme/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
1import { theme, Theme, ThemeType } from '@meetfranz/theme';
2import { Classes } from 'jss';
3import * as React from 'react';
4import injectSheet, { ThemeProvider } from 'react-jss';
5
6const defaultTheme = {
7 name: 'Default',
8 variables: theme(ThemeType.default),
9};
10
11const darkTheme = {
12 name: 'Dark Mode',
13 variables: theme(ThemeType.dark),
14};
15
16const themes = [defaultTheme, darkTheme];
17
18const styles = (theme: Theme) => ({
19 title: {
20 fontSize: 14,
21 },
22 container: {
23 border: theme.inputBorder,
24 borderRadius: theme.borderRadiusSmall,
25 marginBottom: 20,
26 padding: 20,
27 background: theme.colorContentBackground,
28 },
29});
30
31const Container = injectSheet(styles)(
32 ({
33 name,
34 classes,
35 story,
36 }: {
37 name: string;
38 classes: Classes;
39 story: React.ReactNode;
40 }) => (
41 <article>
42 <h1 className={classes.title}>{name}</h1>
43 <div className={classes.container}>{story}</div>
44 </article>
45 ),
46);
47
48export const WithTheme = ({ children }: { children: React.ReactChild }) => (
49 <>
50 {themes.map((theme, key) => (
51 <ThemeProvider key={key} theme={theme.variables}>
52 <Container story={children} name={theme.name} />
53 </ThemeProvider>
54 ))}
55 </>
56);
diff --git a/uidev/tsconfig.json b/uidev/tsconfig.json
deleted file mode 100644
index 60459d69e..000000000
--- a/uidev/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
1{
2 "extends": "../tsconfig.json",
3 "compilerOptions": {
4 "baseUrl": "..",
5 "outDir": "lib",
6 "rootDir": "src"
7 },
8 "references": [
9 {
10 "path": "../packages/theme"
11 },
12 {
13 "path": "../packages/forms"
14 }
15 ]
16}
diff --git a/uidev/webpack.config.js b/uidev/webpack.config.js
deleted file mode 100644
index faabac784..000000000
--- a/uidev/webpack.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
1const path = require('path');
2const HtmlWebpackPlugin = require('html-webpack-plugin');
3
4module.exports = {
5 entry: './src/index.tsx',
6 module: {
7 rules: [
8 {
9 test: /\.tsx?$/,
10 use: 'ts-loader',
11 exclude: /node_modules/,
12 },
13 ],
14 },
15 resolve: {
16 extensions: ['.tsx', '.ts', '.js'],
17 alias: {
18 react: path.resolve('../node_modules/react'),
19 },
20 },
21 mode: 'none',
22 plugins: [
23 new HtmlWebpackPlugin({
24 template: path.join('src', 'app.html'),
25 }),
26 ],
27 devServer: {
28 inline: true,
29 port: 8008,
30 },
31};
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-06-30 12:17:48 +0000