[FLORA-396] API Foundations (#415)

flora-pm · Aug 10, 2023 · ef73c97 · ef73c97
1 parent 6d3d325
commit ef73c97
Show file tree

Hide file tree

Showing 153 changed files with 23,301 additions and 10,945 deletions.
diff --git a/.gitignore b/.gitignore
@@ -32,3 +32,4 @@ tags.mtime
 assets/fonts
 assets/node_modules
 assets/yarn-error.log
+design/node_modules
diff --git a/.hlint.yaml b/.hlint.yaml
@@ -5,3 +5,4 @@
 - ignore: {name: "Use newtype instead of data"}
 - ignore: {name: "Use tuple-section"}
 - ignore: {name: "Monad law, left identity"}
+- ignore: {name: "Replace case with maybe"}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Add namespace browsing ([#375](https://github.com/flora-pm/flora-server/pull/375))
 * Overhaul the `nix` setup of flora and adjust the docs accordingly ([#369](https://github.com/flora-pm/flora-server/pull/369))
 * Allow importing from index tarballs and incremental importing ([#387](https://github.com/flora-pm/flora-server/pull/387))
+* Introduce a public API ([#415](https://github.com/flora-pm/flora-server/pull/415))
 
 ## 1.0.12 -- 2023-04-04
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,5 +1,4 @@
-Thank you for your contribution to Flora! There is no Contributor License Agreement (CLA) to sign,
-but we need you to read this document when you open your PR or your issue:
+Thank you for your contribution to Flora! We need you to read and understand this document when you open your PR or your ticket:
 
 ## Project Setup
 

diff --git a/Makefile b/Makefile
@@ -13,15 +13,18 @@ clean: ## Remove the cabal build artifacts
 
 assets-deps: ## Install the dependencies of the frontend
 	@cd assets/ && yarn install --immutable --immutable-cache --check-cache
+	@cd docs/ && yarn install --immutable --immutable-cache --check-cache
 
 build-assets: assets-deps ## Build the web assets
 	@cd assets/ && yarn build
+	@cd docs/ && yarn build
 
 watch-assets: ## Continuously rebuild the web assets
 	@cd assets/ && yarn watch
 
 clean-assets: ## Remove JS artifacts
 	@cd assets/ && rm -R node_modules
+	@cd docs/ && rm -R node_modules
 
 db-create: ## Create the database
 	@createdb -h $(FLORA_DB_HOST) -p $(FLORA_DB_PORT) -U $(FLORA_DB_USER) $(FLORA_DB_DATABASE)
@@ -68,8 +71,8 @@ lint: ## Run the code linter (HLint)
 	@find app test src -name "*.hs" | xargs -P $(PROCS) -I {} hlint --refactor-options="-i" --refactor {}
 
 style: ## Run the code formatters (stylish-haskell, cabal-fmt, prettier, stylelint)
-	@find app test src -name '*.hs' | xargs -P $(PROCS) -I {} fourmolu -q -i {}
 	@cabal-fmt -i flora.cabal
+	@find app test src -name '*.hs' | xargs -P $(PROCS) -I {} fourmolu -q -i {}
 	@cd assets ; yarn prettier --write css
 	@cd assets ; yarn stylelint --fix css
 

diff --git a/app/cli/DesignSystem.hs b/app/cli/DesignSystem.hs
@@ -28,7 +28,7 @@ import Flora.Search
 import FloraWeb.Components.CategoryCard qualified as Component
 import FloraWeb.Components.PackageListItem qualified as Component
 import FloraWeb.Components.PaginationNav qualified as Component
-import FloraWeb.Templates (FloraHTML, defaultTemplateEnv, defaultsToEnv)
+import FloraWeb.Pages.Templates.Types
 
 newtype ComponentName = ComponentName Text
   deriving newtype (Eq, Ord, Show)

diff --git a/assets/css/categories.css b/assets/css/categories.css
@@ -38,12 +38,12 @@
 
   .category-card {
     display: block;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     padding-left: 2rem;
     padding-right: 2rem;
     width: 400px;
-    height: 112px;
+    height: 100px;
   }
 
   .category-card:hover {

diff --git a/assets/css/release-readme.css b/assets/css/release-readme.css
@@ -58,6 +58,10 @@
     a {
       display: inline-block;
     }
+
+    a:hover {
+      text-decoration: underline;
+    }
   }
 
   ol {

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -305,12 +305,6 @@ a {
     border-color: var(--search-bar-focus-border-color);
   }
 
-  .navbar-element:hover {
-    --tw-text-opacity: 1;
-
-    color: var(--navbar-element-hover-color);
-  }
-
   #navbar-search-package-name {
     padding-left: 20px;
   }
@@ -468,17 +462,17 @@ section#main-page-buttons {
   margin-right: auto;
 
   .button {
+    background-color: var(--main-page-button-background);
+    border-radius: 50rem;
+    border-width: 1px;
     color: var(--text-color);
     font-weight: bolder;
-    background-color: var(--main-page-button-background);
-    border-color: var(--text-color);
-    padding-top: 1rem;
+    margin-left: 9px;
+    margin-right: 9px;
     padding-bottom: 1rem;
     padding-left: 2rem;
     padding-right: 2rem;
-    margin-left: 9px;
-    margin-right: 9px;
-    border-radius: 50rem;
+    padding-top: 1rem;
   }
 
   .button:hover {

diff --git a/assets/css/variables.css b/assets/css/variables.css
@@ -2,85 +2,108 @@
 /* stylelint-disable declaration-block-no-redundant-longhand-properties */
 
 :root {
-  --background-color: hsl(30 10% 96%);
-  --brand-border: hsl(220 13% 91%);
-  --button-hover-background: hsl(294 40% 20%);
-  --category-card-name-color: hsl(218 30% 30%);
-  --category-card-synopsis-color: hsl(221 39% 11%);
-  --category-card-background-hover: hsl(220 13% 91%);
-  --error-button: hsl(294 40% 20%);
-  --error-code: hsl(294 40% 20%);
-  --link-color: hsl(218 30% 45%);
+  /* Primary Blue */
+  --blue-15: hsl(221 30% 15%);
+  --blue-20: hsl(221 30% 20%);
+  --blue-30: hsl(221 30% 30%);
+  --blue-40: hsl(221 30% 40%);
+  --blue-60: hsl(221 30% 60%);
+  --blue-70: hsl(221 30% 70%);
+  --blue-80: hsl(221 30% 80%);
+
+  /* Secondary Purple */
+  --purple-20: hsl(294 40% 20%);
+  --purple-30: hsl(294 40% 30%);
+  --purple-40: hsl(294 40% 40%);
+  --purple-60: hsl(294 40% 60%);
+  --purple-70: hsl(294 40% 70%);
+  --purple-80: hsl(294 40% 80%);
+
+  /* Neutral Grey */
+  --gray-10: hsl(221 9% 10%);
+  --gray-20: hsl(221 9% 20%);
+  --gray-30: hsl(221 9% 30%);
+  --gray-80: hsl(221 9% 80%);
+  --gray-90: hsl(221 9% 90%);
+  --gray-100: hsl(221 9% 100%);
+
+  /* Version */
+  --green-30: hsl(140 100% 30%);
+  --green-40: hsl(140 100% 40%);
+  --red-60: hsl(358 80% 60%);
+  --background-color: var(--gray-100);
+  --brand-border: var(--gray-100);
+  --category-card-name-color: var(--gray-30);
+  --category-card-synopsis-color: var(--blue-20);
+  --category-card-background-hover: var(--gray-90);
+  --error-button: var(--purple-20);
+  --error-code: var(--purple-20);
+  --link-color: var(--blue-40);
   --link-hover-color: hsl(220 13% 91%);
-  --navbar-background-color: hsl(294 40% 20%);
-  --navbar-border-color: hsl(220 13% 91%);
-  --navbar-element-hover-color: hsl(254 95% 77%);
-  --navbar-search-color: hsl(221 39% 11%);
-  --navbar-search-background-color: hsl(30 10% 96%);
-  --navbar-search-border-color: hsl(30 10% 96%);
-  --text-color-dark: hsl(221 39% 11%);
-  --text-color-light: hsl(216 12% 84%);
-  --text-color: hsl(221 39% 11%);
-  --package-list-item-background-hover-color: hsl(220 13% 91%);
-  --package-list-item-name-color: hsl(221 39% 11%);
+  --navbar-background-color: var(--purple-20);
+  --navbar-border-color: var(--gray-90);
+  --navbar-search-color: var(--gray-10);
+  --navbar-search-background-color: var(--gray-100);
+  --navbar-search-border-color: var(--gray-100);
+  --package-list-item-background-hover-color: var(--gray-90);
+  --package-list-item-name-color: var(--blue-20);
   --package-list-item-synopsis-color: black;
   --package-list-item-metadata-color: black;
-  --package-list-item-version-color: #0a6;
+  --package-list-item-version-color: var(--green-30);
   --search-bar-color: hsl(221 39% 11%);
-  --search-bar-background-color: white;
+  --search-bar-background-color: var(--gray-100);
   --search-bar-background-hover-color: white;
   --search-bar-background-focus-color: white;
-  --search-bar-focus-border-color: hsl(294 40% 30%);
-  --readme-pre-background-color: hsl(225 13% 87%);
-  --readme-code-background-color: hsl(225 13% 87%);
-  --changelog-pre-background-color: hsl(225 13% 87%);
-  --changelog-code-background-color: hsl(225 13% 87%);
-  --install-string-border: hsl(215 28% 17%);
+  --search-bar-focus-border-color: var(--purple-30);
+  --readme-pre-background-color: var(--gray-90);
+  --readme-code-background-color: var(--gray-90);
+  --changelog-pre-background-color: var(--gray-90);
+  --changelog-code-background-color: var(--gray-90);
+
+  /* --install-string-border: hsl(215 28% 17%); */
   --compiler-badge-background: hsl(218 12% 84%);
-  --main-page-button-background: hsl(218 12% 84%);
-  --main-page-button-focus-border-color: hsl(294 40% 30%);
-  --main-page-button-divider: hsl(294 40% 20%);
-  --deprecated-version: hsl(358 80% 60%);
+  --text-color: hsl(221 39% 11%);
+  --main-page-button-background: var(--gray-100);
+  --main-page-button-focus-border-color: var(--purple-30);
+  --main-page-button-divider: var(--purple-20);
+  --deprecated-version: var(--red-60);
 }
 
 html[data-theme="dark"] {
-  --background-color: hsl(218 30% 20%);
-  --brand-border: hsl(294 40% 30%);
-  --button-hover-background: hsl(294 40% 20%);
-  --category-card-name-color: hsl(294 40% 60%);
-  --category-card-synopsis-color: hsl(216 12% 84%);
-  --category-card-background-hover: hsl(218 30% 15%);
-  --error-button: hsl(294 40% 30%);
-  --error-code: hsl(294 40% 55%);
-  --link-color: hsl(294 40% 60%);
-  --link-hover-color: hsl(218 30% 15%);
-  --navbar-background-color: hsl(218 30% 15%);
+  --background-color: var(--blue-20);
+  --brand-border: var(--purple-30);
+  --category-card-name-color: var(--purple-60);
+  --category-card-synopsis-color: var(--gray-90);
+  --category-card-background-hover: var(--blue-15);
+  --error-button: var(--purple-30);
+  --error-code: var(--gray-90);
+  --link-color: var(--purple-60);
+  --link-hover-color: var(--blue-15);
+  --navbar-background-color: var(--blue-15);
   --navbar-border-color: transparent;
-  --navbar-element-hover-color: hsl(254 95% 77%);
-  --navbar-search-color: hsl(220 13% 91%);
-  --navbar-search-background-color: hsl(218 30% 20%);
-  --navbar-search-border-color: hsl(218 30% 20%);
-  --text-color-dark: hsl(221 39% 11%);
-  --text-color-light: hsl(216 12% 84%);
-  --text-color: hsl(216 12% 84%);
-  --package-list-item-background-hover-color: hsl(218 30% 15%);
-  --package-list-item-name-color: hsl(294 40% 60%);
-  --package-list-item-metadata-color: hsl(220 13% 91%);
-  --package-list-item-synopsis-color: hsl(220 13% 91%);
-  --package-list-item-version-color: hsl(140 60% 35%);
-  --search-bar-color: hsl(216 12% 84%);
-  --search-bar-background-color: hsl(218 30% 25%);
-  --search-bar-background-hover-color: hsl(218 30% 25%);
-  --search-bar-background-focus-color: hsl(218 30% 25%);
-  --search-bar-focus-border-color: hsl(294 40% 30%);
-  --readme-pre-background-color: hsl(218 29% 30%);
-  --readme-code-background-color: hsl(218 29% 30%);
-  --changelog-pre-background-color: hsl(218 29% 30%);
-  --changelog-code-background-color: hsl(218 29% 30%);
-  --install-string-border: hsl(215 28% 17%);
-  --compiler-badge-background: hsl(218 30% 30%);
-  --main-page-button-background: hsl(218 29% 30%);
-  --main-page-button-focus-border-color: hsl(294 40% 30%);
-  --main-page-button-divider: hsl(218 30% 15%);
-  --deprecated-version: hsl(358 80% 60%);
+  --navbar-search-color: var(--gray-90);
+  --navbar-search-background-color: var(--blue-20);
+  --navbar-search-border-color: var(--blue-20);
+  --package-list-item-background-hover-color: var(--blue-15);
+  --package-list-item-name-color: var(--purple-60);
+  --package-list-item-metadata-color: var(--gray-90);
+  --package-list-item-synopsis-color: var(--gray-90);
+  --package-list-item-version-color: var(--green-40);
+  --search-bar-color: var(--gray-90);
+  --search-bar-background-color: var(--blue-20);
+  --search-bar-background-hover-color: var(--blue-20);
+  --search-bar-background-focus-color: var(--blue-20);
+  --search-bar-focus-border-color: var(--purple-30);
+  --readme-pre-background-color: var(--blue-30);
+  --readme-code-background-color: var(--blue-30);
+  --changelog-pre-background-color: var(--blue-30);
+  --changelog-code-background-color: var(--blue-30);
+
+  /* --install-string-border: hsl(215 28% 17%); */
+  --compiler-badge-background: var(--blue-30);
+  --text-color: var(--blue-80);
+  --main-page-button-background: var(--blue-20);
+  --main-page-button-focus-border-color: var(--purple-30);
+  --main-page-button-divider: var(--blue-15);
+  --deprecated-version: var(--red-60);
 }
diff --git a/assets/icons/favicon_package_v0.16.zip b/assets/icons/favicon_package_v0.16.zip
diff --git a/design/.gitignore b/design/.gitignore
diff --git a/design/.storybook/main.js b/design/.storybook/main.js
@@ -1,17 +1,20 @@
-module.exports = {
-  "stories": [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-storysource",
-    "@pbutlewski/storybook-html",
-    "storybook-dark-mode"
+    "@storybook/addon-interactions",
   ],
-  "framework": "@storybook/html",
-  "core": {
-    "builder": 'webpack5',
+  framework: {
+    name: "@storybook/html-vite",
+    options: {},
   },
-}
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;
diff --git a/design/.storybook/preview.js b/design/.storybook/preview.js
@@ -1,17 +1,16 @@
 import "../styles.css";
 
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+/** @type { import('@storybook/html').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
   },
-  darkMode: {
-    current: "dark",
-    classTarget: "html",
-    darkClass: "dark",
-    stylePreview: true
-  }
-}
+};
+
+export default preview;
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,6 +58,10 @@ @@
         a {
           display: inline-block;
         }
+        a:hover {
+          text-decoration: underline;
+        }
       }
       ol {
@@ Expand Down @@