Merge pull request #45 from agile-ts/newdessign

Newdessign

Author: bennobuilder

docs/main/StyleGuide.md

@@ -71,17 +71,18 @@ To make simple rest calls possible, we initialize our api class here.
 These defined API instance gets mainly used in the [route](#📝-.routes.ts) section of an Entity.
 
 ```ts title="index.ts"
-import {API} from "@agile-ts/api";
+import API from '@agile-ts/api';
 
-const API = API({
+const api = new API({
     baseURL: 'http://localhost:5000',
     timeout: 10000,
     options: {
-        credentials: undefined
-    }
+        credentials: undefined,
+    },
 });
 
-export default API;
+export default api;
+
 ```
 
 ## 📁 entities
@@ -142,7 +143,7 @@ export const addTodo = async (userId: string, description: string): Promise<void
 The Controller of an Entity holds and controls States, Collections, .. for that Entity.
 These Agile Sub Instances might get modified by [actions](#📝-.action.ts) or bound to a Component in the UI-Layer.
 
-```ts title="todo.ui.controller.ts in 📁todo"
+```ts title="todo.controller.ts in 📁todo"
 import {App} from '../../app';
 import {TodoInterface} from './todo.interface';
 import {CURRENT_USER} from '../user'
@@ -179,16 +180,16 @@ export interface TodoInterface {
 }
 ```
 
-### 📝 .routes.ts
+### 📝 .route.ts
 
 To communicate to our server, we have to create [rest calls](https://en.wikipedia.org/wiki/Representational_state_transfer).
 For better maintainability, these rest calls are provided here in function shape
 and should only be used in [actions](#📝-.action.ts) of the Entity.
 It's not recommended calling them from outside the corresponding Entity.
 
-```ts title="todo.routes.ts in 📁todo"
+```ts title="todo.route.ts in 📁todo"
 import {TodoInterface} from "./todo.interface";
-import API from "../../api";
+import api from "../../api";
 
 interface AddTodoPayloadInterface {
     description: string,

docusaurus.config.js

@@ -1,3 +1,7 @@
+const { Agile, generateId } = require('@agile-ts/core');
+const { AgileHOC, useAgile, useEvent, useWatcher } = require('@agile-ts/react');
+const { toast } = require('react-toastify');
+
 const githubOrgUrl = 'https://github.com/agile-ts';
 const domain = 'https://agile-ts.org';
 const npmOrgUrl = 'https://www.npmjs.com/package/@agile-ts';
@@ -16,6 +20,15 @@ const customFields = {
   version: '0.0.1',
   announcementBarContent:
     'If you like AgileTs, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/agile-ts/agile">GitHub</a> 🎉 !️',
+  liveCodeScope: {
+    Agile,
+    useAgile,
+    useEvent,
+    useWatcher,
+    AgileHOC,
+    generateId,
+    toast,
+  },
 };
 
 const config = {
@@ -53,10 +66,6 @@ const config = {
       theme: require('prism-react-renderer/themes/github'),
       darkTheme: require('prism-react-renderer/themes/dracula'),
     },
-    algolia: {
-      apiKey: '6b7b98565bb82e16996fd185f378d618',
-      indexName: 'agile-ts',
-    },
     navbar: {
       title: ' ',
       hideOnScroll: true,
@@ -116,7 +125,6 @@ const config = {
     footer: {
       copyright: customFields.copyright,
       style: 'dark',
-      copyright: customFields.copyright,
       links: [
         {
           title: 'Docs',

package.json

@@ -12,11 +12,13 @@
     "buildserve": "yarn run build && yarn run serve",
     "install-docusaurus": "yalc add @docusaurus/core & yarn install",
     "prettier": "prettier --config .prettierrc --write \"**/*.{js,ts}\"",
-    "lint": "eslint --cache \"**/*.{js,jsx,ts,tsx}\""
+    "lint": "eslint --cache \"**/*.{js,jsx,ts,tsx}\"",
+    "install-agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api & yarn install"
   },
   "dependencies": {
-    "@agile-ts/core": "0.0.11",
-    "@agile-ts/react": "0.0.11",
+    "@agile-ts/api": "^0.0.11",
+    "@agile-ts/core": "^0.0.11",
+    "@agile-ts/react": "^0.0.11",
     "@docusaurus/core": "^2.0.0-alpha.70",
     "@docusaurus/module-type-aliases": "^2.0.0-alpha.70",
     "@docusaurus/preset-classic": "^2.0.0-alpha.70",
@@ -42,10 +44,10 @@
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.0",
     "eslint": "^7.17.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-config-node": "^4.1.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-config-node": "^4.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "prettier": "2.1.2",
     "ts-node": "^8.10.2",
     "typescript": "^4.1.5"

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

@@ -14,7 +14,6 @@
   align-items: center;
   justify-content: center;
 
-
   transition: 0.3s ease all;
 }
 

src/components/other/Icons/icons.tsx

@@ -0,0 +1,22 @@
+import {
+  FiDownload,
+  FiEdit,
+  FiGitMerge,
+  FiRepeat,
+  FiServer,
+  FiStar,
+  FiUsers,
+  FiZap,
+} from 'react-icons/all';
+import React from 'react';
+
+export const iconKeyMap = {
+  star: (props) => <FiStar {...props} />,
+  zap: (props) => <FiZap {...props} />,
+  repeat: (props) => <FiRepeat {...props} />,
+  users: (props) => <FiUsers {...props} />,
+  server: (props) => <FiServer {...props} />,
+  edit: (props) => <FiEdit {...props} />,
+  gitMerge: (props) => <FiGitMerge {...props} />,
+  download: (props) => <FiDownload {...props} />,
+};

src/components/other/Icons/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { iconKeyMap } from './icons';
+
+type FunctionPropertyNames<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
+}[keyof T] &
+  string;
+
+export type IconTypes<
+  T = typeof iconKeyMap,
+  M = FunctionPropertyNames<Required<T>>
+> = M;
+
+type Props = {
+  type: IconTypes;
+  className?: string;
+};
+
+const Icons: React.FC<Props> = (props) => {
+  const { type } = props;
+
+  return iconKeyMap[type] ? (
+    iconKeyMap[type](props)
+  ) : (
+    <div>Icon '{type}' doesn't exists!</div>
+  );
+};
+
+export default Icons;

src/components/other/LiveCoder/components/FrameworkButton/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './styles.module.css';
+import { IconContext } from 'react-icons';
+import clsx from 'clsx';
+
+export type FrameworkButtonProps = {
+  logo: React.ComponentElement<any, any>;
+  color: string;
+  active: boolean;
+  selectable: boolean;
+  notSelectableToolTip?: string;
+  onClick?: () => void;
+};
+
+const FrameworkButton: React.FC<FrameworkButtonProps> = (props) => {
+  const { logo, color, active, selectable, notSelectableToolTip } = props;
+  const onClick = props.onClick || (() => {});
+
+  return (
+    <div
+      className={clsx(styles.Container, { [styles.Container_Active]: active })}
+      style={{ cursor: selectable ? 'pointer' : 'default' }}
+      onClick={selectable ? onClick : undefined}>
+      {!active && <div className={styles.LogoContainerOverlay} />}
+      <div
+        className={styles.LogoContainer}
+        style={{ border: `2px solid ${color}` }}>
+        <IconContext.Provider value={{ color: color, size: '1.5rem' }}>
+          {logo}
+        </IconContext.Provider>
+      </div>
+      {!selectable && notSelectableToolTip && (
+        <span
+          className={styles.TooltipText}
+          style={{ border: `1px solid ${color}` }}>
+          {notSelectableToolTip}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default FrameworkButton;

src/components/other/LiveCoder/components/FrameworkButton/styles.module.css

@@ -0,0 +1,57 @@
+.Container {
+  position: relative;
+  transition: 0.3s ease all;
+}
+
+.Container_Active {
+  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
+}
+
+.Container:not(:last-child) {
+  margin-bottom: 0.75rem;
+}
+
+.LogoContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  background-color: var(--ifm-color-background-2);
+  border-radius: 8px;
+}
+
+.LogoContainerOverlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ifm-color-background-2);
+  opacity: 0.5;
+  border-radius: 8px;
+}
+
+.Container .TooltipText {
+  visibility: hidden;
+  width: 120px;
+  background-color: var(--ifm-color-surface);
+  color: var(--ifm-color-on-surface);
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  top: 5px;
+  left: 130%;
+  filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.25));
+}
+
+.Container:hover .TooltipText {
+  visibility: visible;
+}
+
+@media (max-width: 997px) {
+  .Container:not(:last-child) {
+    margin-right: 0.75rem;
+  }
+}

src/components/other/LiveCoder/components/LiveCodeNotFound/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+type Props = {
+  name: string;
+};
+
+const LiveCodeNotFound: React.FC<Props> = (props) => {
+  const { name } = props;
+
+  return (
+    <div>
+      <div>Couldn't find '{name}'</div>
+    </div>
+  );
+};
+
+export default LiveCodeNotFound;

src/components/other/LiveCoder/components/LiveCoderReact/index.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import { CodeSectionPropsInterface } from '../../index';
+import ReactLiveScope from '@theme/ReactLiveScope';
+
+interface Props extends CodeSectionPropsInterface {}
+
+const LiveCoderReact: React.FC<Props> = (props) => {
+  const { code, theme, transformCode } = props;
+
+  return (
+    <LiveProvider
+      code={code.replace(/\n$/, '')}
+      transformCode={transformCode || ((code) => `${code};`)}
+      theme={theme}
+      noInline={true}
+      scope={ReactLiveScope}>
+      <div className={styles.EditorContainer}>
+        <LiveEditor className={styles.Editor} />
+      </div>
+      <div className={styles.PreviewOuterContainer}>
+        <div className={styles.PreviewContainer}>
+          <LivePreview />
+          <LiveError />
+        </div>
+      </div>
+    </LiveProvider>
+  );
+};
+
+export default LiveCoderReact;