feat(web): basic layout

web/ambient.d.ts → web/src/ambient.d.ts

@@ -1,13 +1,13 @@
-export type FlagType = 'boolean' | 'string' | 'number';
+export type FlagTypes = 'boolean' | 'string' | 'number';
 export type FlagValueType = boolean | string | number;
 export type FlagEnv = 'staging' | 'production';
 
-export type Flag = {
+export type FlagType = {
   id?: string;
   name: string;
-  type: FlagType;
+  type: FlagTypes;
   value: FlagValueType;
   environment: FlagEnv;
   project: string;
-  isEnabled?: boolean;
+  isEnabled: boolean;
 };

web/src/app.css

@@ -7,9 +7,15 @@
   src: url('./CourierPrime-Regular.ttf');
 }
 
+@font-face {
+  font-family: 'Trocchi';
+  src: url('./Trocchi-Regular.ttf');
+}
+
 @layer base {
   html {
-    font-family: 'CourierPrime';
+    /* font-family: 'CourierPrime'; */
+    font-family: 'Trocchi';
   }
 }
 

web/src/lib/Flag/Flag.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { FlagType } from '../../ambient';
+  import FlagContainer from '$lib/Flag/components/FlagContainer.svelte';
+  import FlagCell from '$lib/Flag/components/FlagCell.svelte';
+
+  export let flag: FlagType;
+</script>
+
+<FlagContainer>
+  <FlagCell>{`${flag.name}`}</FlagCell>
+  <FlagCell>{`${flag.type}`}</FlagCell>
+  <FlagCell>{`${flag.value}`}</FlagCell>
+  <FlagCell>{`${flag.isEnabled}`}</FlagCell>
+</FlagContainer>

web/src/lib/Flag/FlagTop.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import FlagContainer from '$lib/Flag/components/FlagContainer.svelte';
+  import FlagCell from '$lib/Flag/components/FlagCell.svelte';
+</script>
+
+<FlagContainer>
+  <FlagCell color="text-blue">Name</FlagCell>
+  <FlagCell color="text-red">Type</FlagCell>
+  <FlagCell color="text-green">Value</FlagCell>
+  <FlagCell color="text-turquois">Enabled</FlagCell>
+</FlagContainer>

web/src/lib/Flag/Flags.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Select from '$lib/Select.svelte';
+  import Flag from '$lib/Flag/Flag.svelte';
+  import FlagsContainer from '$lib/Flag/components/FlagsContainer.svelte';
+  import FlagHeader from '$lib/Flag/components/FlagHeader.svelte';
+  import FlagTop from '$lib/Flag/FlagTop.svelte';
+  import type { FlagType } from '../../ambient';
+
+  export let flags: FlagType[];
+
+  const options = [
+    { name: 'Staging', value: 'staging' },
+    { name: 'Production', value: 'production' }
+  ];
+</script>
+
+<FlagsContainer>
+  <FlagHeader>
+    <Select items="{options}" placeholder="Select Project" />
+    <Select items="{options}" placeholder="Select Env" />
+  </FlagHeader>
+  <FlagTop />
+  <ul>
+    {#each flags as flag (flag.id)}
+      <Flag {flag} />
+    {/each}
+  </ul>
+</FlagsContainer>

web/src/lib/Flag/components/FlagCell.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let color: string = '';
+</script>
+
+<div class="{`w-1/4 ${color && color} border-black border-l-2 border-solid px-2`}">
+  <slot />
+</div>

web/src/lib/Flag/components/FlagContainer.svelte

@@ -0,0 +1,5 @@
+<li
+  class="flex pl-2 py-3 my-3 text-xl bg-grey border-black border-2 border-solid rounded-2xl"
+>
+  <slot />
+</li>

web/src/lib/Flag/components/FlagHeader.svelte

@@ -0,0 +1 @@
+<div class="container flex w-1/3 justify-left gap-5"><slot /></div>

web/src/lib/Flag/components/FlagsContainer.svelte

@@ -0,0 +1 @@
+<div class="container my-5"><slot /></div>

web/src/lib/Header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 </script>
 
-<div class="py-4">
+<div class="py-4 border-b-2 border-text text-yellow">
   <h1 class="text-4xl">Feature Flag</h1>
 </div>

web/src/lib/Select.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  type SelectOptionType = {
+    name: string;
+    value: string;
+  };
+  export let value: string;
+  export let items: SelectOptionType[] = [];
+  export let placeholder: string = 'Choose option';
+  const defaultClass: string =
+    'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
+</script>
+
+<select class="{defaultClass}" bind:value on:change on:contextmenu on:input>
+  {#if placeholder}
+    <option disabled selected value="">{placeholder}</option>
+  {/if}
+
+  {#each items as { value, name }}
+    <option {value}>{name}</option>
+  {:else}
+    <slot />
+  {/each}
+</select>

web/src/routes/+page.server.ts

@@ -0,0 +1,21 @@
+import { API_HOST } from '$env/static/private';
+
+/** @type {import('./$types').PageServerLoad} */
+export const load = async ({ fetch }) => {
+  let status = 404;
+
+  try {
+    const response = await fetch(
+      `${process.env.API_HOST || API_HOST || 'http://localhost:3000/flags'}`,
+      {
+        method: 'GET'
+      }
+    );
+    const flags = await response.json();
+    status = response.status;
+
+    return { flags, status };
+  } catch (e) {
+    console.error(e);
+  }
+};

web/src/routes/+page.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import Header from '$lib/Header.svelte';
+  import Flags from '$lib/Flag/Flags.svelte';
+  import type { FlagType } from '../ambient';
+
+  export let data: { flags: FlagType[] };
 </script>
 
 <main>
   <Header />
+  {#if data?.flags.length}
+    <Flags flags="{data.flags}" />
+  {/if}
 </main>

web/tailwind.config.js

@@ -4,17 +4,19 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: '#243119',
-        text: '#c9f2c7',
-        primary: '#999999',
-        secondary: '#1f1f1f',
-        accent: '#858585'
-      },
-      brightness: {
-        25: '.25'
+        background: '#191a1c',
+        text: '#abb2bf',
+        red: '#e06c75',
+        green: '#98c379',
+        yellow: '#e5c07b',
+        blue: '#61afef',
+        pink: '#c678dd',
+        turquois: '#56b6c2',
+        grey: '#282c34'
       },
       fontFamily: {
-        mono: 'CourierPrime, courier'
+        mono: ['CourierPrime, courier'],
+        display: 'Trocchi'
       }
     }
   },
@@ -27,4 +29,15 @@ export default {
  * 96be8c Olivine
  * 629460 Asparagus
  * 243119 Dark green
+ *
+ * One Dark
+ * black     #191a1c
+ * dark grey #282c34
+ * red       #e06c75
+ * green     #98c379
+ * yellow    #e5c07b
+ * blue      #61afef
+ * pink      #c678dd
+ * turquois  #56b6c2
+ * grey      #abb2bf
  * */