Merge pull request #34 from agile-ts/develop

Develop

Author: bennobuilder

docs/Interfaces.md

@@ -566,21 +566,88 @@ export interface CollectConfigInterface<DataType = any> {
 
 <br/>
 
-#### `key`
+#### `patch`
 
-Key/Name of Selector.
+Under the hood it calls the [`patch`](./packages/core/features/state/Methods.md#patch) method
+instead of the [`set`](./packages/core/features/state/Methods.md#set) method.
+Of course, it is only useful if we patch something into something existing, 
+what shouldn't be the case in the `collect` method.
 
 | Type                     | Default   | Required |
 |--------------------------|-----------|----------|
-| `string \| name`         | undefined | No       |
+| `boolean`                | false     | No       |
+
+<br/>
+
+#### `method`
+
+In which way the collected data primary Key gets added to the Groups.
+By using `push` it will be added at the end of the primaryKey array
+```ts {2}
+MY_COLLECTION.collect({id: 1, name: "jeff"}, {method: 'push'});
+MY_COLLECTION.getGroup(MY_COLLECTION.config.defaultGroupKey).value; // Returns [5, 6, 0, 1]
+```
+and by `unshift` it can be found at the beginning of the primaryKey array.
+```ts {2}
+MY_COLLECTION.collect({id: 8, name: "jeff"}, {method: 'unshift'});
+MY_COLLECTION.getGroup(MY_COLLECTION.config.defaultGroupKey).value; // Returns [8, 5, 6, 0, 1]
+```
+
+| Type                     | Default   | Required |
+|--------------------------|-----------|----------|
+| `push' \| 'unshift'`     | 'push'    | No       |
+
+<br/>
+
+#### `forEachItem`
+
+Gets called for each collected Data.
+```ts {4-9}
+MY_COLLECTION.collect([
+    {id: 1, name: "jeff"}, 
+    {id: 8, name: "frank"}], 
+    {forEachItem: (data, key, index) => {
+         // Gets Called with data: {id: 1, name: "jeff"}, key: 1, index: 0
+         // and   
+         // Gets Called with data: {id: 2, name: "frank"}, key: 8, index: 1  
+      }
+    })
+```
+
+| Type                                                        | Default   | Required |
+|-------------------------------------------------------------|-----------|----------|
+| `(data: DataType, key: ItemKey, index: number) => void`     | undefined | No       |
 
 <br/>
 
+#### `background`
 
-| Prop              | Type                     | Default     | Description                                                                                                             | Required |
-|-------------------|--------------------------|-------------|-------------------------------------------------------------------------------------------------------------------------|----------|
-| patch               | boolean         | false   | Key/Name of Selector                                                                                                    | No       |
-| method     | push' \| 'unshift'                  | 'push'       | If Selector is initially a Placeholder                                                                                  | No       |
-| forEachItem     | boolean                  | false       | If Selector is initially a Placeholder                                                                                  | No       |
-| background     | boolean                  | false       | If Selector is initially a Placeholder                                                                                  | No       |
-| select     | boolean                  | false       | If Selector is initially a Placeholder                                                                                  | No       |
+Sometimes we want to add new data to our Collection in background,
+so that no component rerender that has bound the Collection to itself.
+Then this property might get handy.
+```ts {5}
+  // Causes rerender on Components
+  MY_COLLECTION.collect({id: 1, name: "jeff"});
+  
+  // Doesn't cause rerender on Comonents
+  MY_COLLECTION.collect({id: 1, name: "jeff"}, {background: true});
+```
+
+| Type                     | Default   | Required |
+|--------------------------|-----------|----------|
+| `boolean`                | false     | No       |
+
+<br/>
+
+#### `select`
+
+If foreach collected Data a [Selector](./packages/core/features/collection/selector/Introduction.md) gets created, 
+which is a separate State that represents the Data Value.
+```ts {5}
+MY_COLLECTION.collect({id: 1, name: "jeff"}, {select: true});
+MY_COLLECTION.getSelector(1); // Returns Selector that got just created
+```
+
+| Type                     | Default   | Required |
+|--------------------------|-----------|----------|
+| `boolean`                | false     | No       |

docs/main/Introduction.md

@@ -112,6 +112,16 @@ Test AgileTs yourself, it's only one click away. Just select your preferred Fram
 
 <br />
 
+## 🎉 Credits
+
+AgileTs is inspired by [PulseJs](https://github.com/pulse-framework/pulse)
+
+<br />
+
+---
+
+<br />
+
 ## 💬 What others say
 
 Actually nothing, hehe

src/components/buttons/GithubButton.tsx

@@ -13,7 +13,7 @@ const GithubButton: React.FC<Props> = (props) => {
     <Container
       onClick={() => {
         if (to.startsWith("http")) {
-          window.location.href = to;
+          window.open(to, "_blank");
           return;
         }
         history.push(to);

src/components/buttons/PrimaryButton.tsx

@@ -12,7 +12,7 @@ const PrimaryButton: React.FC<Props> = (props) => {
     <Button
       onClick={() => {
         if (to.startsWith("http")) {
-          window.location.href = to;
+          window.open(to, "_blank");
           return;
         }
         history.push(to);

src/css/custom.scss

@@ -39,6 +39,10 @@
   // Theme Colors
   // ==============================================================================
 
+  // Primary
+  // See 'General Docusaurs'
+  --ifm-color-on-primary: var(--ifm-color-white);
+
   // Background
   --ifm-color-background: var(--ifm-color-white);
   --ifm-color-background-2: var(--ifm-color-white-dark);
@@ -333,6 +337,10 @@ html[data-theme='dark'] {
   // Theme Colors
   // ==============================================================================
 
+  // Primary
+  // See 'General Docusaurs'
+  --ifm-color-on-primary: var(--ifm-color-black);
+
   // Background
   --ifm-color-background: var(--ifm-color-black);
   --ifm-color-background-2: var(--ifm-color-black-light);

src/pages/LandingPage/components/HeaderView/index.tsx

@@ -36,7 +36,9 @@ const HeaderView: React.FC = () => {
         <DescriptionText>{siteConfig.customFields.description}</DescriptionText>
         <Spacer height={50} />
         <ButtonContainer>
-          <GetStartedButton to={"/docs"}>GET STARTED</GetStartedButton>
+          <GetStartedButton to={"/docs/introduction"}>
+            GET STARTED
+          </GetStartedButton>
           <GithubButtonContainer to={siteConfig.customFields.githubUrl} />
         </ButtonContainer>
       </ContentContainer>

src/pages/LandingPage/index.tsx

@@ -6,8 +6,6 @@ import Layout from "@theme/Layout";
 import "react-toastify/dist/ReactToastify.css";
 import HeaderView from "./components/HeaderView";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import GiveItATryView from "./components/GiveItATriyView";
-import Spacer from "../../components/Spacer";
 
 const LandingPage: React.FC = () => {
   const windowSize = useWindowSize();

src/theme/Footer/index.tsx

@@ -66,7 +66,7 @@ function Footer() {
             </FooterLogoContainer>
 
             <FooterTagline>{siteConfig.tagline}</FooterTagline>
-            <FooterGithubButton to={siteConfig.themeConfig.githubUrl} />
+            <FooterGithubButton to={siteConfig.customFields.githubUrl} />
           </FooterLeft>
           <FooterRight>
             {links.map((linkItem, i) => (
@@ -87,9 +87,7 @@ function Footer() {
           </FooterRight>
         </ContentContainer>
         <FooterBottom>
-          <FooterCopyrightText>
-            {siteConfig.customFields.copyright}
-          </FooterCopyrightText>
+          <FooterCopyrightText>{copyright}</FooterCopyrightText>
         </FooterBottom>
       </FooterInner>
     </FooterContainer>