Skip to content
This repository was archived by the owner on Feb 15, 2025. It is now read-only.

Commit e09e18a

Browse files
authored
Merge pull request #45 from agile-ts/newdessign
Newdessign
2 parents f46b5ad + 2df1821 commit e09e18a

File tree

47 files changed

+920
-148
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+920
-148
lines changed

docs/main/StyleGuide.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,18 @@ To make simple rest calls possible, we initialize our api class here.
7171
These defined API instance gets mainly used in the [route](#📝-.routes.ts) section of an Entity.
7272

7373
```ts title="index.ts"
74-
import {API} from "@agile-ts/api";
74+
import API from '@agile-ts/api';
7575

76-
const API = API({
76+
const api = new API({
7777
baseURL: 'http://localhost:5000',
7878
timeout: 10000,
7979
options: {
80-
credentials: undefined
81-
}
80+
credentials: undefined,
81+
},
8282
});
8383

84-
export default API;
84+
export default api;
85+
8586
```
8687

8788
## 📁 entities
@@ -142,7 +143,7 @@ export const addTodo = async (userId: string, description: string): Promise<void
142143
The Controller of an Entity holds and controls States, Collections, .. for that Entity.
143144
These Agile Sub Instances might get modified by [actions](#📝-.action.ts) or bound to a Component in the UI-Layer.
144145

145-
```ts title="todo.ui.controller.ts in 📁todo"
146+
```ts title="todo.controller.ts in 📁todo"
146147
import {App} from '../../app';
147148
import {TodoInterface} from './todo.interface';
148149
import {CURRENT_USER} from '../user'
@@ -179,16 +180,16 @@ export interface TodoInterface {
179180
}
180181
```
181182

182-
### 📝 .routes.ts
183+
### 📝 .route.ts
183184

184185
To communicate to our server, we have to create [rest calls](https://en.wikipedia.org/wiki/Representational_state_transfer).
185186
For better maintainability, these rest calls are provided here in function shape
186187
and should only be used in [actions](#📝-.action.ts) of the Entity.
187188
It's not recommended calling them from outside the corresponding Entity.
188189

189-
```ts title="todo.routes.ts in 📁todo"
190+
```ts title="todo.route.ts in 📁todo"
190191
import {TodoInterface} from "./todo.interface";
191-
import API from "../../api";
192+
import api from "../../api";
192193

193194
interface AddTodoPayloadInterface {
194195
description: string,

docusaurus.config.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
const { Agile, generateId } = require('@agile-ts/core');
2+
const { AgileHOC, useAgile, useEvent, useWatcher } = require('@agile-ts/react');
3+
const { toast } = require('react-toastify');
4+
15
const githubOrgUrl = 'https://github.com/agile-ts';
26
const domain = 'https://agile-ts.org';
37
const npmOrgUrl = 'https://www.npmjs.com/package/@agile-ts';
@@ -16,6 +20,15 @@ const customFields = {
1620
version: '0.0.1',
1721
announcementBarContent:
1822
'If you like AgileTs, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/agile-ts/agile">GitHub</a> 🎉 !️',
23+
liveCodeScope: {
24+
Agile,
25+
useAgile,
26+
useEvent,
27+
useWatcher,
28+
AgileHOC,
29+
generateId,
30+
toast,
31+
},
1932
};
2033

2134
const config = {
@@ -53,10 +66,6 @@ const config = {
5366
theme: require('prism-react-renderer/themes/github'),
5467
darkTheme: require('prism-react-renderer/themes/dracula'),
5568
},
56-
algolia: {
57-
apiKey: '6b7b98565bb82e16996fd185f378d618',
58-
indexName: 'agile-ts',
59-
},
6069
navbar: {
6170
title: ' ',
6271
hideOnScroll: true,
@@ -116,7 +125,6 @@ const config = {
116125
footer: {
117126
copyright: customFields.copyright,
118127
style: 'dark',
119-
copyright: customFields.copyright,
120128
links: [
121129
{
122130
title: 'Docs',

package.json

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@
1212
"buildserve": "yarn run build && yarn run serve",
1313
"install-docusaurus": "yalc add @docusaurus/core & yarn install",
1414
"prettier": "prettier --config .prettierrc --write \"**/*.{js,ts}\"",
15-
"lint": "eslint --cache \"**/*.{js,jsx,ts,tsx}\""
15+
"lint": "eslint --cache \"**/*.{js,jsx,ts,tsx}\"",
16+
"install-agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api & yarn install"
1617
},
1718
"dependencies": {
18-
"@agile-ts/core": "0.0.11",
19-
"@agile-ts/react": "0.0.11",
19+
"@agile-ts/api": "^0.0.11",
20+
"@agile-ts/core": "^0.0.11",
21+
"@agile-ts/react": "^0.0.11",
2022
"@docusaurus/core": "^2.0.0-alpha.70",
2123
"@docusaurus/module-type-aliases": "^2.0.0-alpha.70",
2224
"@docusaurus/preset-classic": "^2.0.0-alpha.70",
@@ -42,10 +44,10 @@
4244
"@types/react-router-dom": "^5.1.6",
4345
"@types/styled-components": "^5.1.0",
4446
"eslint": "^7.17.0",
45-
"eslint-plugin-prettier": "^3.3.1",
47+
"eslint-config-node": "^4.1.0",
4648
"eslint-config-prettier": "^6.11.0",
4749
"eslint-plugin-node": "^11.1.0",
48-
"eslint-config-node": "^4.1.0",
50+
"eslint-plugin-prettier": "^3.3.1",
4951
"prettier": "2.1.2",
5052
"ts-node": "^8.10.2",
5153
"typescript": "^4.1.5"

src/components/buttons/PlainButton/styles.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
align-items: center;
1515
justify-content: center;
1616

17-
1817
transition: 0.3s ease all;
1918
}
2019

src/components/other/Icons/icons.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {
2+
FiDownload,
3+
FiEdit,
4+
FiGitMerge,
5+
FiRepeat,
6+
FiServer,
7+
FiStar,
8+
FiUsers,
9+
FiZap,
10+
} from 'react-icons/all';
11+
import React from 'react';
12+
13+
export const iconKeyMap = {
14+
star: (props) => <FiStar {...props} />,
15+
zap: (props) => <FiZap {...props} />,
16+
repeat: (props) => <FiRepeat {...props} />,
17+
users: (props) => <FiUsers {...props} />,
18+
server: (props) => <FiServer {...props} />,
19+
edit: (props) => <FiEdit {...props} />,
20+
gitMerge: (props) => <FiGitMerge {...props} />,
21+
download: (props) => <FiDownload {...props} />,
22+
};

src/components/other/Icons/index.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { iconKeyMap } from './icons';
3+
4+
type FunctionPropertyNames<T> = {
5+
[K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
6+
}[keyof T] &
7+
string;
8+
9+
export type IconTypes<
10+
T = typeof iconKeyMap,
11+
M = FunctionPropertyNames<Required<T>>
12+
> = M;
13+
14+
type Props = {
15+
type: IconTypes;
16+
className?: string;
17+
};
18+
19+
const Icons: React.FC<Props> = (props) => {
20+
const { type } = props;
21+
22+
return iconKeyMap[type] ? (
23+
iconKeyMap[type](props)
24+
) : (
25+
<div>Icon '{type}' doesn't exists!</div>
26+
);
27+
};
28+
29+
export default Icons;
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import styles from './styles.module.css';
3+
import { IconContext } from 'react-icons';
4+
import clsx from 'clsx';
5+
6+
export type FrameworkButtonProps = {
7+
logo: React.ComponentElement<any, any>;
8+
color: string;
9+
active: boolean;
10+
selectable: boolean;
11+
notSelectableToolTip?: string;
12+
onClick?: () => void;
13+
};
14+
15+
const FrameworkButton: React.FC<FrameworkButtonProps> = (props) => {
16+
const { logo, color, active, selectable, notSelectableToolTip } = props;
17+
const onClick = props.onClick || (() => {});
18+
19+
return (
20+
<div
21+
className={clsx(styles.Container, { [styles.Container_Active]: active })}
22+
style={{ cursor: selectable ? 'pointer' : 'default' }}
23+
onClick={selectable ? onClick : undefined}>
24+
{!active && <div className={styles.LogoContainerOverlay} />}
25+
<div
26+
className={styles.LogoContainer}
27+
style={{ border: `2px solid ${color}` }}>
28+
<IconContext.Provider value={{ color: color, size: '1.5rem' }}>
29+
{logo}
30+
</IconContext.Provider>
31+
</div>
32+
{!selectable && notSelectableToolTip && (
33+
<span
34+
className={styles.TooltipText}
35+
style={{ border: `1px solid ${color}` }}>
36+
{notSelectableToolTip}
37+
</span>
38+
)}
39+
</div>
40+
);
41+
};
42+
43+
export default FrameworkButton;
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.Container {
2+
position: relative;
3+
transition: 0.3s ease all;
4+
}
5+
6+
.Container_Active {
7+
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
8+
}
9+
10+
.Container:not(:last-child) {
11+
margin-bottom: 0.75rem;
12+
}
13+
14+
.LogoContainer {
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
padding: 0.5rem;
19+
background-color: var(--ifm-color-background-2);
20+
border-radius: 8px;
21+
}
22+
23+
.LogoContainerOverlay {
24+
position: absolute;
25+
left: 0;
26+
top: 0;
27+
width: 100%;
28+
height: 100%;
29+
background-color: var(--ifm-color-background-2);
30+
opacity: 0.5;
31+
border-radius: 8px;
32+
}
33+
34+
.Container .TooltipText {
35+
visibility: hidden;
36+
width: 120px;
37+
background-color: var(--ifm-color-surface);
38+
color: var(--ifm-color-on-surface);
39+
text-align: center;
40+
border-radius: 6px;
41+
padding: 5px 0;
42+
position: absolute;
43+
z-index: 1;
44+
top: 5px;
45+
left: 130%;
46+
filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.25));
47+
}
48+
49+
.Container:hover .TooltipText {
50+
visibility: visible;
51+
}
52+
53+
@media (max-width: 997px) {
54+
.Container:not(:last-child) {
55+
margin-right: 0.75rem;
56+
}
57+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
3+
type Props = {
4+
name: string;
5+
};
6+
7+
const LiveCodeNotFound: React.FC<Props> = (props) => {
8+
const { name } = props;
9+
10+
return (
11+
<div>
12+
<div>Couldn't find '{name}'</div>
13+
</div>
14+
);
15+
};
16+
17+
export default LiveCodeNotFound;
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react';
2+
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
3+
import clsx from 'clsx';
4+
import styles from './styles.module.css';
5+
import { CodeSectionPropsInterface } from '../../index';
6+
import ReactLiveScope from '@theme/ReactLiveScope';
7+
8+
interface Props extends CodeSectionPropsInterface {}
9+
10+
const LiveCoderReact: React.FC<Props> = (props) => {
11+
const { code, theme, transformCode } = props;
12+
13+
return (
14+
<LiveProvider
15+
code={code.replace(/\n$/, '')}
16+
transformCode={transformCode || ((code) => `${code};`)}
17+
theme={theme}
18+
noInline={true}
19+
scope={ReactLiveScope}>
20+
<div className={styles.EditorContainer}>
21+
<LiveEditor className={styles.Editor} />
22+
</div>
23+
<div className={styles.PreviewOuterContainer}>
24+
<div className={styles.PreviewContainer}>
25+
<LivePreview />
26+
<LiveError />
27+
</div>
28+
</div>
29+
</LiveProvider>
30+
);
31+
};
32+
33+
export default LiveCoderReact;

0 commit comments

Comments
 (0)