codehagen / dingify Goto Github PK
View Code? Open in Web Editor NEWDingify is helping you unlock the power of seamless real-time monitoring
Home Page: https://www.dingify.io/
License: GNU Affero General Public License v3.0
Dingify is helping you unlock the power of seamless real-time monitoring
Home Page: https://www.dingify.io/
License: GNU Affero General Public License v3.0
๐ก Feature
Right now nothing happens when you press the "copy" component
Make it so its possible to copy the API-key by just pressing the button-
Also if possible make the input fields so its hides the API key
ApiKey
No response
![Screenshot 2024-06-11@2x](https://github.com/Codehagen/Dingify/assets/24507211/004f7f11-6ac0-4e2b-8c92-eba24a50d250)
Got a error when i do the following:
This is the error in console
- We can look at this later and maybe make a new issue for it. Going to merge the PR now.
โจฏ ../src/utils/calendar.ts (195:11) @ calcTextDimensions
โจฏ Error: calcTextDimensions() requires browser APIs
at Array.reduce (<anonymous>)
digest: "3723231744"
193 | function calcTextDimensions(text: string, fontSize: number) {
194 | if (typeof document === 'undefined' || typeof window === 'undefined') {
> 195 | throw new Error('calcTextDimensions() requires browser APIs');
| ^
196 | }
197 |
198 | if (fontSize < 1) {
Originally posted by @Codehagen in #64 (comment)
Even after creating a event, still the form is up and I can able to create a new event with the same details, which can result in duplicate events.
No response
No response
๐ก Feature
The UserChartActivity component currently displays static data for events and users over time.
Update the UserChartActivity component to dynamically display information about the events a user has made. The parent component already has the actions integrated. The updated component should:
๐ก Feature
The UserGridActivity component currently displays static data for user activity throughout the year.
Update the UserGridActivity component to dynamically display the last 3 months of user activity, ending on the current date (e.g., today is June 11, so display data from March 11 to June 11). The updated component should:
"use client";
import ActivityCalendar from "react-activity-calendar";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@dingify/ui/components/card";
// Example data: array of objects with date and count
const calendarData = [
{ date: "2023-01-01", count: 2, level: 1 },
{ date: "2023-01-02", count: 5, level: 2 },
{ date: "2023-01-03", count: 1, level: 0 },
{ date: "2023-02-16", count: 1, level: 1 },
{ date: "2023-03-31", count: 3, level: 1 },
];
export function UserGridActivity() {
return (
<Card className="overflow-hidden">
<CardHeader>
<CardTitle>Activity Calendar</CardTitle>
<CardDescription>
A visualization of user activity throughout the year.
</CardDescription>
</CardHeader>
<CardContent className="pb-4">
<div style={{ height: "auto", width: "100%" }}>
<ActivityCalendar
data={calendarData}
blockSize={15}
blockMargin={5}
fontSize={14}
hideTotalCount={false}
showWeekdayLabels
hideMonthLabels={false}
theme={{
light: ["#ebedf0", "#c6e48b", "#7bc96f", "#82ca9d", "#239a3b"],
dark: ["#282828", "#5c4e4e", "#946b6b", "#b74d4d", "#82ca9d"],
}}
labels={{
months: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
totalCount: "{{count}} activities in {{year}}",
legend: {
less: "Less",
more: "More",
},
}}
colorScheme="light" // Use "dark" for dark mode
eventHandlers={{
onClick: (event) => (activity) => {
alert(JSON.stringify(activity));
},
}}
/>
</div>
</CardContent>
</Card>
);
}
Currently, we have some conditional rendering for when a new user doesn't have an API key. However, this needs improvement. Resend (www.resend.com) has a good method for handling this, as shown in the attached pictures.
Create a new page called /onboarding
where we can display the steppers. We can use a horizontal stepper, such as the one found here: ShadCN Stepper. The user can return to /onboarding
if they want to go through the process again, so no state management in the database is needed for this.
Pressed Add API - This made the card green and then enabled the Send email button.
These boxes are also conditionally rendered based on if the person has pressed Send email and got a positive callback.
We should have:
We need to reuse the make API key function, and we can use the same style as the create-event
button that is currently on the homepage.
Integrate onboarding
๐ CI/CD
We need to set up a Continuous Integration (CI) workflow action for our project. Currently, there is no automated process for linting, formatting, and type checking our code.
Implement a GitHub Actions workflow for Continuous Integration (CI) to automate linting, formatting, and type checking of our codebase. The workflow should be triggered on pull requests and pushes to the main branch, as well as merge groups.
name: CI
on:
pull_request:
branches: ["main"]
push:
branches: ["main"]
merge_group:
permissions:
contents: read
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup
uses: ./tooling/github/setup
- name: Copy env
shell: bash
run: cp .env.example .env.local
- name: Lint
run: pnpm lint && pnpm lint:ws
format:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup
uses: ./tooling/github/setup
- name: Format
run: pnpm format
typecheck:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup
uses: ./tooling/github/setup
- name: Typecheck
run: pnpm typecheck
๐ก Feature
UX onboarding and confetti
No response
No response
๐ก Feature
Need first milestone
No response
No response
When you refresh the site you can see that we have a hydration error. This is probably the EventDetailsTable
component.
The page should refresh without any errors.
๐ก Feature
We dont have a component to display the usage of metrics. We have this in the prisma schema for now.
Need to make a component / site to display the current usage.
Something like this:
Prisma Schema:
model Metrics {
id String @id @default(cuid())
projectId String @unique
logsUsed Int @default(0)
logsLimit Int @default(1000)
channelsUsed Int @default(1)
channelsLimit Int @default(3)
seatsUsed Int @default(1)
projectsUsed Int @default(1)
project Project @relation(fields: [projectId], references: [id])
@@map(name: "metrics")
}
๐ก Feature
Right now we have a limited settings page. We need to update it so that we have this:
Utilize components from shadcn/ui to enhance the settings page. We can copy and integrate major parts of the code from the provided examples to streamline the implementation.
For now, we can input values for Profile, Notification, and Display. The API section will display the token hashed, similar to the createAPI component we previously made.
๐ก Feature
Need to refresh the landingpage
No response
No response
๐งโ๐ป Refactor
The current implementation uses useToast
for toast notifications in the application.
import { useToast } from "@dingify/ui/components/use-toast";
export function AddChannelButton() {
const { toast } = useToast();
const handleSubmit = async (event) => {
event.preventDefault();
setIsLoading(true);
try {
const result = await createChannel(channelName);
toast({
title: "Channel Created",
description: \`Channel "\${channelName}" created successfully.\`,
});
Migrate all toast notifications from useToast
to sonner
as per the documentation here. Example bellow is just for illustration, but could work.
Steps:
Add the Toaster component: Update your app/layout.tsx
file:
import { Toaster } from "@/components/ui/sonner";
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<main>{children}</main>
<Toaster />
</body>
</html>
);
}
Update toast notifications: Replace the existing useToast
implementation with sonner
.
Updated code:
import { toast } from "sonner";
export function AddChannelButton() {
try {
const result = await createChannel(channelName);
toast.success(\`Channel "\${channelName}" created successfully.\`);
Replace all instances of useToast
with sonner
in the codebase to ensure consistent toast notifications.
Hi,
I tried to contact you at [email protected] some time ago but haven't gotten a response, Is this email up to date or did my email perhaps land in a spam folder?
๐ก Feature
When a user navigates to /dashboard/users
, all users are displayed. Clicking on a user redirects to /dashboard/users/UserID
.
Feature Enhancements:
/dashboard/users
/dashboard/users/UserID
./dashboard/users/UserID
/dashboard/users/analytics
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.