Merge pull request #21 from lumastic/development

First prod release

.dockerignore

@@ -0,0 +1,13 @@
+/node_modules
+*.log
+.DS_Store
+.env
+/.cache
+/public/build
+/build
+/prisma/data.db
+/prisma/data.db-journal
+Dockerfile
+scripts
+generators
+cypress

.eslintignore

@@ -0,0 +1,2 @@
+public
+node_modules

.github/workflows/deploy.yml

@@ -0,0 +1,179 @@
+name: 🚀 Deploy
+on:
+  push:
+    branches:
+      - main
+      - development
+  pull_request: {}
+
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  lint:
+    name: ⬣ ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🔬 Lint
+        run: npm run lint
+
+  typecheck:
+    name: ʦ TypeScript
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🔎 Type check
+        run: npm run typecheck --if-present
+
+  vitest:
+    name: ⚡ Vitest
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: ⚡ Run vitest
+        run: npm run test:unit:ci -- --coverage
+
+  build:
+    name: 🐳 Build
+    # only build/deploy main branch on pushes
+    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/development') && github.event_name == 'push' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: 👀 Read app name
+        uses: SebRollen/[email protected]
+        id: songbook-creator
+        with:
+          file: "fly.toml"
+          field: "app"
+
+      - name: 🐳 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+        with:
+          version: v0.9.1
+
+      # Setup cache
+      - name: ⚡️ Cache Docker layers
+        uses: actions/cache@v3
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: 🔑 Fly Registry Auth
+        uses: docker/login-action@v2
+        with:
+          registry: registry.fly.io
+          username: x
+          password: ${{ secrets.FLY_API_TOKEN }}
+
+      - name: 🐳 Docker build
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          tags: registry.fly.io/${{ steps.songbook-creator.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}
+          build-args: |
+            COMMIT_SHA=${{ github.sha }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new
+
+      # This ugly bit is necessary if you don't want your cache to grow forever
+      # till it hits GitHub's limit of 5GB.
+      # Temp fix
+      # https://github.com/docker/build-push-action/issues/252
+      # https://github.com/moby/buildkit/issues/1896
+      - name: 🚚 Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+
+  deploy:
+    name: 🚀 Deploy
+    runs-on: ubuntu-latest
+    needs: [lint, typecheck, vitest, build]
+    # only build/deploy main branch on pushes
+    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/development') && github.event_name == 'push' }}
+
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: 👀 Read app name
+        uses: SebRollen/[email protected]
+        id: songbook-creator
+        with:
+          file: "fly.toml"
+          field: "app"
+
+      - name: 🚀 Deploy Staging
+        if: ${{ github.ref == 'refs/heads/development' }}
+        uses: superfly/[email protected]
+        with:
+          args: "deploy --app ${{ steps.songbook-creator.outputs.value }}-staging --image registry.fly.io/${{ steps.songbook-creator.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}"
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+
+      - name: 🚀 Deploy Production
+        if: ${{ github.ref == 'refs/heads/main' }}
+        uses: superfly/[email protected]
+        with:
+          args: "deploy --image registry.fly.io/${{ steps.songbook-creator.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}"
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.gitignore

@@ -12,4 +12,6 @@ node_modules
 /prisma/data.db-journal
 /postgres-data
 
-.DS_Store
+.DS_Store
+coverage
+build

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.prettierignore

@@ -1,3 +1,4 @@
 .cache
 .netlify
-public
+public
+*.hbs

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "tailwindCSS.classAttributes": ["class", "className", ".*Styles"]
+  "tailwindCSS.classAttributes": ["class", "className", ".*Styles"],
+  "yaml.schemas": {
+    "https://json.schemastore.org/github-workflow.json": "file:///Users/drew/Sites/songbook-creator/.github/workflows/deploy.yml"
+  }
 }

Dockerfile

@@ -0,0 +1,67 @@
+# base node image
+FROM node:18-bullseye-slim as base
+
+# Install openssl and sqlite3 for Prisma
+RUN apt-get update && apt-get install -y openssl sqlite3
+
+# Install all node_modules, including dev dependencies
+FROM base as deps
+
+RUN mkdir /app/
+WORKDIR /app/
+
+ADD package.json .npmrc package-lock.json ./
+RUN npm install
+
+# Setup production node_modules
+FROM base as production-deps
+
+RUN mkdir /app/
+WORKDIR /app/
+
+COPY --from=deps /app/node_modules /app/node_modules
+ADD package.json .npmrc package-lock.json /app/
+RUN npm prune --omit=dev
+
+# Build the app
+FROM base as build
+
+RUN mkdir /app/
+WORKDIR /app/
+
+COPY --from=deps /app/node_modules /app/node_modules
+
+ADD prisma /app/prisma
+RUN npx prisma generate
+
+ADD . .
+RUN npm run build
+
+# Finally, build the production image with minimal footprint
+FROM base
+
+ENV DATABASE_URL=file:/data/sqlite.db
+ENV PORT="8080"
+ENV NODE_ENV="production"
+
+# add shortcut for connecting to database CLI
+RUN echo "#!/bin/sh\nset -x\nsqlite3 \$DATABASE_URL" > /usr/local/bin/database-cli && chmod +x /usr/local/bin/database-cli
+
+RUN mkdir /app/
+WORKDIR /app/
+
+COPY --from=production-deps /app/node_modules /app/node_modules
+
+COPY --from=build /app/node_modules/.prisma /app/node_modules/.prisma
+
+COPY --from=build /app/build /app/build
+COPY --from=build /app/public /app/public
+COPY --from=build /app/package.json /app/package.json
+COPY --from=build /app/start.sh /app/start.sh
+COPY --from=build /app/prisma /app/prisma
+
+ADD . .
+
+RUN chmod +x start.sh
+EXPOSE 8080
+CMD [ "./start.sh" ]

app/components/Button/Button.tsx

@@ -68,23 +68,23 @@ function classNames({
 }): string {
   // Base classes
   let buttonStyles = `${
-    icon ? "rounded-full" : "rounded-md"
+    icon ? "rounded-full" : "rounded-md font-medium"
   } transition-all box-border`;
   // Set classes for different variants
   let variantStyles = "";
   switch (variant) {
     case "primary":
-      variantStyles = "text-white bg-stone-600 hover:opacity-80";
+      variantStyles = "text-white bg-primary-600 hover:opacity-80";
       break;
     case "secondary":
-      variantStyles = "text-stone-700 bg-stone-200 hover:opacity-80";
+      variantStyles = "text-neutral-800 bg-neutral-300 hover:opacity-80";
       break;
     case "outlined":
       variantStyles =
-        "bg-inherit text-stone-800 border-stone-400 border hover:bg-stone-200";
+        "bg-inherit text-primary-500 border-primary-500 border hover:bg-primary-100";
       break;
     case "text":
-      variantStyles = "hover:bg-stone-200 text-stone-700";
+      variantStyles = "hover:bg-neutral-200 text-neutral-700";
       break;
   }
   buttonStyles = append(buttonStyles, variantStyles);

app/components/Dialog/Dialog.stories.tsx

@@ -1,3 +1,3 @@
 import { Dialog } from "./Dialog";
 
-export const Basic = () => <Dialog />;
+export const Basic = () => <Dialog title="Test Dialog" />;

app/components/Dialog/Dialog.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { Dialog } from "./Dialog";
 
 test("Should render", () => {
-  render(<Dialog />);
+  render(<Dialog onClose={() => {}} title="My Modal" isOpen={true} />);
 
   expect(screen.getByTestId("dialog")).toBeInTheDocument();
 });

app/components/Dialog/Dialog.tsx

@@ -6,20 +6,25 @@ import { Button } from "../Button";
 type Props = {
   title: string;
   description?: string;
-  isOpen: boolean;
-  onClose: () => void;
+  isOpen?: boolean;
+  onClose?: () => void;
 };
 
 export const Dialog: React.FC<PropsWithChildren<Props>> = ({
   children,
   title,
   description,
   isOpen,
-  onClose,
+  onClose = () => {},
 }) => {
   return (
-    <HeadlessDialog open onClose={onClose} className="relative z-10">
-      <div className="fixed inset-0 bg-stone-900 bg-opacity-25" />
+    <HeadlessDialog
+      open
+      onClose={onClose}
+      className="relative z-10"
+      data-testid="dialog"
+    >
+      <div className="fixed inset-0 bg-neutral-900 bg-opacity-25" />
       <div className="fixed inset-0 overflow-y-auto min-h-screen md:min-h-min">
         <div className="flex h-full justify-center pt-4 md:pb-4 md:px-4 text-center ">
           <HeadlessDialog.Panel className="w-full h-full md:h-auto md:max-w-md transform overflow-hidden rounded-2xl bg-white p-8 text-left align-middle shadow-xl transition-all relative">
@@ -52,13 +57,13 @@ export const Dialog: React.FC<PropsWithChildren<Props>> = ({
             </Button>
             <HeadlessDialog.Title
               as="h2"
-              className="text-3xl font-medium leading-6 text-stone-900"
+              className="text-3xl font-medium leading-6 text-neutral-900"
             >
               {title}
             </HeadlessDialog.Title>
             {description && (
               <div className="mt-2">
-                <p className="text-sm text-stone-500">{description}</p>
+                <p className="text-sm text-neutral-500">{description}</p>
               </div>
             )}
 

app/components/Input/Input.tsx

@@ -8,7 +8,7 @@ export const Input: React.FC<InputHTMLAttributes<HTMLInputElement>> =
         data-testid="input"
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none placeholder-stone-400",
+          "w-full bg-inherit focus:outline-none placeholder-neutral-400",
           className,
         ].join(" ")}
         {...props}