aboutsummaryrefslogtreecommitdiffstats
path: root/uidev/src
diff options
context:
space:
mode:
authorLibravatar Vijay Aravamudhan <vraravam@users.noreply.github.com>2021-10-15 14:02:33 +0530
committerLibravatar GitHub <noreply@github.com>2021-10-15 14:02:33 +0530
commit184c8fbaa6ea3fb13af93ec023252af8802040a3 (patch)
treeba3671d972d74f524a07609a49b80a885ebe2115 /uidev/src
parentupdate recipes to pull in pnpm upgrade and workspace fix. (diff)
downloadferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.tar.gz
ferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.tar.zst
ferdium-app-184c8fbaa6ea3fb13af93ec023252af8802040a3.zip
Remove unused 'uidev' folder. (#2076)
Diffstat (limited to 'uidev/src')
-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
16 files changed, 0 insertions, 1140 deletions
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);
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-07 07:13:54 +0000