[WIP]: feat(web): rebrand A/BBY to Abby and put Flags & Remote Config…

… in the foreground (#64)

README.md

@@ -1,12 +1,12 @@
-![A/BBY Banner](https://github.com/tryabby/abby/assets/20679094/dd415956-25b4-4528-95fb-f010b21011c9)
+![Abby Banner](./apps/web/public/og.png)
 
-# About A/BBY
+# About Abby
 
-A/BBY is a open source feature management and A/B testing platform. It is designed to be easy to use and easy to integrate into your existing applications. It aims to improve the developer experience by providing a simple and statically typed API for feature management and A/B testing.
+Abby is a open source feature management and A/B testing platform. It is designed to be easy to use and easy to integrate into your existing applications. It aims to improve the developer experience by providing a simple and statically typed API for feature management and A/B testing.
 
 Besides its official SDKS it also offers a friendly and easy to understand Dashboard for the non-developers in your team.
 
-A/BBY focuses on privacy. This means it won't track any user data and uses no marketing cookies. It also doesn't use any third party services.
+Abby focuses on privacy. This means it won't track any user data and uses no marketing cookies. It also doesn't use any third party services.
 You can self host it or use the hosted version available at [tryabby.com](https://www.tryabby.com).
 
 ## Getting Started
@@ -32,11 +32,11 @@ This turborepo uses [pnpm](https://pnpm.io) as a package manager. It includes th
 
 - `docs`: a [Next.js](https://nextjs.org/) with [Nextra](https://nextra.site/)
 - `web`: another [Next.js](https://nextjs.org/) app using the [T3 Stack](https://create.t3.gg/)
-- `core`: The A/BBY core JavaScript SDK which all other JS SDKs are based on
-- `react`: The A/BBY React SDK
-- `next`: The A/BBY Next.js SDK
-- `angular`: The A/BBY Angular SDK
-- `svelte`: The A/BBY Svelte SDK
+- `core`: The Abby core JavaScript SDK which all other JS SDKs are based on
+- `react`: The Abby React SDK
+- `next`: The Abby Next.js SDK
+- `angular`: The Abby Angular SDK
+- `svelte`: The Abby Svelte SDK
 
 Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
 

apps/docs/pages/_meta.json

@@ -22,7 +22,7 @@
     "title": "More"
   },
   "abby_link": {
-    "title": "A/BBY ↗",
+    "title": "Abby ↗",
     "href": "https://www.tryabby.com",
     "newWindow": true
   }

apps/docs/pages/a-b-testing.mdx

@@ -1,6 +1,6 @@
 # A/B Tests
 
-A/BBY allows you to define different tests for your application.
+Abby allows you to define different tests for your application.
 A test is uniquely identified by a name. After creating a test you can define weights for each variant of the test.
 By default all variants have the same chance.
 

apps/docs/pages/config.mdx

@@ -2,9 +2,9 @@
 
 ## Introduction
 
-A/BBY aims to have the best Developer Experience possible.
-This is why A/BBY is fully configurable via Code. No need to click some buttons in a GUI.
-You `abby.config.ts` (or `abby.config.js`) file is the **single source of truth** for your A/BBY project.
+Abby aims to have the best Developer Experience possible.
+This is why Abby is fully configurable via Code. No need to click some buttons in a GUI.
+You `abby.config.ts` (or `abby.config.js`) file is the **single source of truth** for your Abby project.
 
 Your configuration should be written in a file called `abby.config.ts` (or `abby.config.js`) which should be located in the root of your project.
 Every integration offers a `defineConfig` helper function which offers a typesafe way to define your configuration.
@@ -31,12 +31,12 @@ This configuration has two purposes:
 
 #### 1. Integrations
 
-A/BBY has many integrations to other tools and frameworks. Those can import the config and use it to configure themselves.
+Abby has many integrations to other tools and frameworks. Those can import the config and use it to configure themselves.
 For example the `@tryabby/nextjs` integration uses the config to configure the Next.js framework. Reading the config makes the integrations fully typesafe
 
 #### 2. CLI
 
-The [A/BBY CLI](/reference/cli) uses the config to know what to do. It reads from the config and can then be used to create tests or feature flags on the A/BBY platform without
+The [Abby CLI](/reference/cli) uses the config to know what to do. It reads from the config and can then be used to create tests or feature flags on the Abby platform without
 any further configuration.
 
 ## Example
@@ -56,7 +56,7 @@ export default defineConfig({
       variants: ["A", "B"],
     },
   },
-  flags: ['showFooter'],
+  flags: ["showFooter"],
   remoteConfig: {
     customButtonText: "String",
     maxUserCount: "Number",
@@ -90,14 +90,14 @@ export default defineConfig({
 The `defineCOnfig` function takes an object as a parameter. The object can contain the following properties:
 
 | Name               | Type     | Required | Description                                              | details               |
-| ------------------ | -------- | :------: | -------------------------------------------------------  | --------------------- |
+| ------------------ | -------- | :------: | -------------------------------------------------------- | --------------------- |
 | projectId          | `string` |    ✅    | The ID of your project in Abby                           | -                     |
 | apiUrl             | `string` |          | The URL of the Abby API. Defaults to the hosted version  | -                     |
 | currentEnvironment | `string` |    ✅    | The current environment of your application              | [link](/environments) |
 | tests              | `object` |          | An object containing your defined A/B Tests              | -                     |
 | flags              | `array`  |          | An array containing your defined Feature Flag names      | -                     |
-| remoteConfig       | `object` |          | An object containing your Remote Configuration variables | -
-| settings           | `object` |          | An object with additional settings for A/BBY             | -                     |
+| remoteConfig       | `object` |          | An object containing your Remote Configuration variables | -                     |
+| settings           | `object` |          | An object with additional settings for Abby              | -                     |
 
 #### tests
 
@@ -134,11 +134,12 @@ const abby = createAbby({
 });
 ```
 
-#### remoteConfig 
+#### remoteConfig
 
 The remoteConfig property is an object containing your Remote Configuration variables and their respective types.
 
 ##### Example
+
 ```ts
 const abby = createAbby({
   // ... your config
@@ -147,14 +148,14 @@ const abby = createAbby({
     myNumberVariable: "Number",
     myJSONVariable: "JSON",
   },
-})
+});
 ```
 
 #### settings
 
-The settings property is an object containing additional settings for A/BBY. The following properties are available:
+The settings property is an object containing additional settings for Abby. The following properties are available:
 
-- `flags.defaultValue`: Allows you to set a fallback boolean value for your Feature Flags, in case you forgot to add them 
+- `flags.defaultValue`: Allows you to set a fallback boolean value for your Feature Flags, in case you forgot to add them
   in your dashboard or when they could not be fetched correctly.
 
   ```json
@@ -175,7 +176,7 @@ The settings property is an object containing additional settings for A/BBY. The
   ```
 
 - `remoteConfig.defaultValues`: An object containing default values for each Remote Configuration type.
-  
+
   ```json
   remoteConfig: {
     defaultValues: {

apps/docs/pages/devtools.mdx

@@ -2,7 +2,7 @@ import { Tab, Tabs, Callout } from "nextra-theme-docs";
 
 # Devtools
 
-A/BBY comes with a Devtools that allows you to see the different variants of your A/B Tests and Feature Flags.
+Abby comes with a Devtools that allows you to see the different variants of your A/B Tests and Feature Flags.
 To use them simply add the `<AbbyDevTools />` component to your app.
 
 ## Installation

apps/docs/pages/environments.mdx

@@ -1,6 +1,6 @@
 # Environments
 
-Environments in A/BBY allow you to reflect the different environments that your application may be deployed to.
+Environments in Abby allow you to reflect the different environments that your application may be deployed to.
 For example, you may have a `development` environment, a `staging` environment, and a `production` environment.
 
 When using [Feature Flags](/feature-flags) it is often useful to have different values for the same flag in different environments.

apps/docs/pages/feature-flags.mdx

@@ -1,6 +1,6 @@
 # Feature Flags
 
-A feature flag in A/BBY is basically just a boolean that can be toggled via the Dashboard in A/BBY.
+A feature flag in Abby is basically just a boolean that can be toggled via the Dashboard in Abby.
 This is useful for testing new features, or for hiding features that are not yet ready for production.
 
 A feature flag is always toggled for a certain [Environment](/environments) which allows you to test features in different environments.

apps/docs/pages/index.mdx

@@ -1,20 +1,20 @@
 # Introduction
 
-A/BBY is a Micro-SaaS that was created during the Dynaweek Hackathon.
+Abby is a Micro-SaaS that was created during the Dynaweek Hackathon.
 
 It aims to be the simpliest way to do A/B testing, Feature Flags and Remote Configuration variables on your website.
 
-We tried to make A/BBY as simple as possible and create the **best** user experience. Therefore we decided to focus on `React` and `Next.js` for now.
+We tried to make Abby as simple as possible and create the **best** user experience. Therefore we decided to focus on `React` and `Next.js` for now.
 
 ## Getting Started
 
-Before you're able to use A/BBY, you need to create a free account first.
-After you created your account you're able to use A/BBY. Make sure to read the [React Docs](/integrations/react) to get started.
+Before you're able to use Abby, you need to create a free account first.
+After you created your account you're able to use Abby. Make sure to read the [React Docs](/integrations/react) to get started.
 
 ## Philosophy
 
 Here are some of the things that we believe in:
 
-- **Simplicity** - We believe that A/B testing should be as simple as possible. That's why we created A/BBY.
+- **Simplicity** - We believe that A/B testing should be as simple as possible. That's why we created Abby.
 - **Security** - All data is hosted in Europe and the code is open source.
 - **Transparency** - We don't store any user related data, everything is saved anonymously.

apps/docs/pages/integrations/angular.mdx

@@ -36,7 +36,7 @@ To get started make sure to install the packages using your favorite package man
 
 ### Create your config
 
-To use A/BBY you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
+To use Abby you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
 
 ```ts
 // abby.config.ts
@@ -51,10 +51,10 @@ export default defineConfig({
     footer: { variants: ["dark", "orange", "green"] },
     // ... your tests
   },
-  flags: ['darkMode', 'newFeature'],
+  flags: ["darkMode", "newFeature"],
   remoteConfig: {
     customButtonText: "String",
-  }
+  },
 });
 ```
 
@@ -111,6 +111,7 @@ You can also use Abby's directives to conditionally render elements based on the
 ```
 
 Feature Flags can be inverted by putting a `!` in front of the flagname.
+
 ```html
 <ng-container *abbyFlag="'!newFeature'">
   <!-- This will only be shown if the newFeature flag is falsy. -->

apps/docs/pages/integrations/nextjs.mdx

@@ -29,7 +29,7 @@ To get started make sure to install the package using your favorite package mana
 
 ### Create your config
 
-To use A/BBY you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
+To use Abby you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
 
 ```ts
 // abby.config.ts
@@ -47,7 +47,7 @@ export default defineConfig({
   flags: ["darkMode", "newFeature"],
   remoteConfig: {
     customButtonText: "String",
-  }
+  },
 });
 ```
 

apps/docs/pages/integrations/react.mdx

@@ -33,7 +33,7 @@ To get started make sure to install the package using your favorite package mana
 
 ### Create your config
 
-To use A/BBY you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
+To use Abby you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
 
 ```ts
 // abby.config.ts
@@ -51,7 +51,7 @@ export default defineConfig({
   flags: ["darkMode", "newFeature"],
   remoteConfig: {
     customButtonText: "String",
-  }
+  },
 });
 ```
 
@@ -106,26 +106,21 @@ function MyButton() {
 ```
 
 Optionally, you can pass a lookup object to automatically map the selected variant to a custom value.
+
 ```tsx
 import { useAbby } from "./abby";
 
 function MyButton() {
-  const { variant, onAct } = useAbby(
-    "footer",
-    {
-      dark: "bg-gray-900",
-      orange: "bg-orange-500",
-      green: "bg-green-500",
-    }
-  );
+  const { variant, onAct } = useAbby("footer", {
+    dark: "bg-gray-900",
+    orange: "bg-orange-500",
+    green: "bg-green-500",
+  });
 
   return (
     <main className="p-6">
       <h1>Abby Test Page:</h1>
-      <button
-        className={`rounded-lg py-2 px-4 text-white ${variant}`}
-        onClick={onAct}
-      >
+      <button className={`rounded-lg py-2 px-4 text-white ${variant}`} onClick={onAct}>
         Cool Button
       </button>
     </main>
@@ -169,5 +164,6 @@ function HomePage() {
       <h1>Welcome back, User</h1>
       <button>{customButtonText}</button>
     </main>
-  )
+  );
 }
+```

apps/docs/pages/integrations/svelte.mdx

@@ -31,7 +31,7 @@ To get started make sure to install the package using your favorite package mana
 
 ### Create your config
 
-To use A/BBY you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
+To use Abby you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
 
 ```ts
 // abby.config.ts
@@ -122,6 +122,7 @@ The `useAbby` function returns an object with the following values:
 ```
 
 Optionally, you can provide a lookup object to map the active to a custom value.
+
 ```svelte
 <script lang="ts">
     import { abby } from "$lib/abby";