open-sauced/app

🍕 Insights into your entire open source ecosystem.

This repo is archived. If you are looking for the latest, check out open-sauced/insights or open-sauced/hot.

🍕 Open Sauced 🍕

The path to your next Open Source contribution

Open Sauced provides structured onboarding for new contributors to open source. This structure provides a way to track your next contributions by leveraging a unique dashboard built on top of the GitHub GraphQL API.

📖 Prerequisites

In order to run the project from a container we need node>=14, npm>=7 and docker>=20 installed on our development machines or use one of the listed cloud providers we support:

Gitpod

✅ fully ready integrated development environment

⭕ VS Code settings sync is not ideal

Gitpod is mostly free but has extensive documentation for all its contributing features.

For Vite to work with Gitpod we need to use a custom Dockerfile that lives under .gitpod.Dockerfile.

Open Sauced comes with a pre-defined .gitpod.yml that should work out of the box in multiple contribution scenarios.

Replit

✅ fully ready integrated development environment

⭕ modified contribution workflows

Replit is an old service that recently supported NixOS, enabling full customisation of the runner and project.

Open Sauced is configured with a shell environment supporting node@16 and npm@8. The build environment script lives in shell.nix and the repl config lives in .replit.

Codesandbox

✅ can be used as editor replacement

✅ supports deployment preview

⭕ enforces custom package manager for stability

⭕ low resources free tier limitations

Stackblitz

✅ can be used as editor replacement

✅ supports deployment preview

⭕ enforces custom package manager for stability

⭕ limited documentation on container limitations

Glitch

✅ can be used as editor replacement

✅ supports deployment preview

⭕ enforces custom package manager for stability

⭕ does not support stacked hot module reload

⭕ severely low resources free tier limitations

🖥️ Local development

To install the application:

npm ci

To start a local copy of the app on port 3000:

npm start

🧪 Test

For running the test suite, use the following command. Since the tests run in watch mode by default, some users may encounter errors about too many files being open. In this case, it may be beneficial to install watchman.

npm test

You can request a coverage report by running the following command:

npm run test:coverage

📦 Docker builds

A development preview can also be run from docker:

docker build -t open-sauced-dev .
docker run -p 8080:80 open-sauced-dev

Alternatively you can pull the production container and skip all builds:

docker run -dit -p 8080:80 ghcr.io/open-sauced/open-sauced

🎨 Code linting

To check the code and styles quality, use the following command:

npm run lint

This will also display during development, but not break on errors.

To fix the linting errors, use the following command:

npm run format

🚀 Production deployment

A production deployment is a complete build of the project, including the build of the static assets.

npm run build

You can analyze the build by running the following command:

npm run build:analyze

🎭 Offline asset optimization

We also have a script for updating .svg files used in the project, you only need to run this if you add new assets:

npm run build:svgo

And one for .png and .jpg files:

npm run build:squoosh

🚧 Development debugging

Thanks to antfu/vite-plugin-inspect we can always inspect the bundles in development by navigating to localhost:3000/__inspect/ in your browser.

📙 Storybook

Storybook is being leveraged to mock out visual React components. The latest version of the design system can be found at this URL.

npm run storybook

🔑 Authentication

Authentication is handled through OneGraph's AuthGuardian service.

💾 Database

This project uses GitHub as a database. When you login, you will be presented with a button to create a goals repository. That repository template lives at open-sauced/goals-template.

💨 Service Worker

This project uses the sw-precache to kickstart an offline cache. The offline cache only registers in production. If service needs to be manually removed make an unregister call from the registerServiceWorker.js import.

🌙 Dark Mode

This project supports "dark mode" styling, and by default it will follow the color preference on your device. It also allows for overriding this using buttons at the top right of the screen, which will persist the preference to local storage on your device. More info about color preference web API's can be found here: MDN Web Docs

📝 Markdown Support

This project leverages Remirror for a delightful experience in documenting your Open Source goals. The editor supports markdown features including heading levels, bulleted lists, text formatting, code snippets, and emojis!

🤝 Contributing

We encourage you to contribute to Open Sauced! Please check out the Contributing guide for guidelines about how to proceed.

We have a commit utility called @open-sauced/conventional-commit that helps you write your commits in a way that is easy to understand and process by others.

It is generally integrated as an npm script but you can run it with npx as well:

npm run push

For any other npm based project or dotnpmrc defaulting to --yes:

npx -y @open-sauced/conventional-commit

🍕 Community

Got Questions? Join the conversation in our Discord.
Find Open Sauced videos and release overviews on our YouTube Channel.

🎦 Repository Visualization

⚖️ LICENSE

MIT © Open Sauced

app's Issues

[Front-End] Make Tool list Nav Component more compatible with Storybook

Currently the Tool list Nav component is implemented and deployed. While the list is dynamically generated, it is being done by a hook that is implemented inside the component.

This component should be converted to accept a list and create the nav based on the list being passed. It should also be set up in such a way that Storybook can also manipulate the number of list items being passed to increase and decrease the size of the nav.

• #28

[Front end] Mobile consideration for the dashboard

Now that we have components and placeholders in the storybook, we should update this page with mobile considerations.

Screensies can get added to the tailwind.config.js - similar to how it is in the hot.opensauced.pizza

[Copy] Provide the copy for the authentication flow

Provide the copy for the authentication flow screens. You can view the screens in Figma, or track it on this file:

• #59

Current copy:

Left side:

• Title: Let's get saucing
• Description: Open Sauced is a tool to help track your open source contributions. You can get started by creating a goal workspace below.
• Steps:
  1. Authenticate with GitHub
  2. Provide an API Token
  3. Follow some repositories

Step One

• Title: Authenticate with GitHub
• Description: We’re going to sync your repositories with OpenSauced, so we can show you insights that matter to you. Here’s what we need:
  • Lorem ipsum
  • Lorem ipsum
• Button: Authenticate

Step Two

• Title: Provide your token
• Description: In order to provide fresh, and insightful data, we’ll need a favor: a GitHub API token that we can use. Here’s how we’re going to use your token:
  • Lorem ipsum
  • Lorem ipsum
• Input Placeholder: Insert your token here
• Button: Confirm Token

Step Three

• Title: Follow some repos
• Description: We’ll provide insights on the repos you choose to follow. You can follow up to 10 repos.
• Button Transparent: Skip this step

[Front-End] Make Header Component more compatible with Storybook

Currently, the Header component of Insights is implemented and deployed but most of the content is hard-coded and uneditable. The component needs to be updated to be more compatible with Storybook.

What this means is that the component would need to allow Storybook to change the component such as changing the title, subtext, image and the potential tags that are shown. The tabs are not critical but being able to change the Title, subtext and potentially the image is.

• #11
• #9
• #10

[Refactor] Move component logic into a lib folder

Not blocking but making a note for @chadstewart that we should test this and move it into the lib folder. "logic" for rendering alpha avatars.

Originally posted by @bdougie in #50 (comment)

Bug: Space between is not ideal for insight cards

This will probably get covered in #45, but opening to issue as an FYI.

Suggestion

Use flex-start and a margin-right or something a bit more flexible.

[Front-End] Implement Dropdown Menu

[Front-End] Implement first draft of eCharts Scatter charts

Currently this component is not implemented in the project. The image above is an implementation of eChart's Scatter chart in GitSense. What is the intended implementation is a basic version of this chart.

Currently eCharts is not installed in this project and so that would need to be done. Once installed, implement eCharts and add it to Storybook as well.

[Chore] Set up hierarchies in Storybook

Currently the only hierarchy in Storybook is that of the story and the component inside. This makes organizing stories very difficult especially considering that we are using the Atomic Design system which two levels of hierarchies before getting to the actual component.

Storybook needs to be updated to add hierarchies to stories to make them easier to understand and find when compared to the app folder structure.

[Chore] Add Storybook documentation to README

Storybook has been set up to be deployed whenever a PR is merged to main with stories changed. Currently Storybook is not reflected at all in the README file. This is meant to update the README file for running Storybook locally and Storybook online.

TOP 5 Week 29 July 18th

What are you planning to get done by the end of this week? (Remember to link out to issues that these activities might be driving towards)

[Front-End] Refactor Button component with new types and states

Summary

Update the <Button> component to add the new types and states.

View in Figma

[Front-End] Implement User Avatar

Ideally, we want to be able to:

• Set the size of the avatar #30
• Be able to define the alt attribute #30
• Set the image URL dynamically #30
• #31

[Front-End] Implement ContextThumbnail component

[CI] Implementing linting in this project

This projects does not respect the lint rules for other open-sauced projects. We should include what is in open-sauced/open-sauced

[Front-End] Make ToolList component accessible

Add accessibility attributes, and make it clear which element is focused when navigating with the keyboard.

[Design] Design the Insider Program Onboarding for insights.opensauced.pizza

To design:

• Sign up and provide API token
• User is not logged in: "Log in to view insights"
• User is logged in, but no token: "Complete onboarding to view data"
• User is logged in and shared the token: shows the cards
• #69

Implementation:

• #68

---

Reference:

Design something similar to this (found in https://design.opensauced.pizza/?path=/story/onboardring--onboarding-flow):

[CI] Create a Storybook deploy for each PR that has "storybook" checked

Following up on our conversation today:

What we can do is have a workflow/action that triggers the npm run storybook for that Netlify everytime that a person makes a change in a component and checks "Storybook" from the PR description:

That way, we'd have both the Netlify link for the Portal, and for the Design System, and we don't have to manually push our WIP or blocked PRs to the main build of the design system.

I'll open an issue on this.

Originally posted by @pixelsbyeryc in #38 (comment)

[Research] Onboarding email

With onboarding now designed, we can start work towards getting a small cohort of users together. We need to do the following.

• Research onboarding email tools
• Create onboarding email copy - probably multiple emails, but we can start with one intro email
• Implement email infrastructure.

[Front-End] Implement UI for User Login Component

Currently, the User Login Component is completely static with a static image and no drop down menu.

This needs at least a drop down menu implemented with a user login link when the user is logged in and a user logout link when there is no logged in user.

This does not need to implement login functionality as yet but the UI needs to be functional and potentially testable with a dummy user.

• #19
• #20

[Bug] Update link to Storybook in README file

Currently in the README file, the link to storybook points to design-insight.opensauced.pizza. The link has been changed to design-insights.opensauced.pizza and needs to be reflected in the documentation.

[Front-End] Implement Dark Mode

Currently Tailwind requires us to add dark mode colors within the component. I think that makes it too unreadable and just a pain to maintain.

The way I set up the colors is:

colors: {
  light: {
    "slate": {
      "1": "hsl(206, 30.0%, 98.8%)",
      ...
      "12": "hsl(206, 24.0%, 9.0%)"
    },
    "slate-a": {
      "1": "hsla(210, 92.6%, 26.5%, 0.016)",
      ...
      "12": "hsla(202, 97.0%, 2.4%, 0.934)"
    }
  },
  dark: {
    "slate": {
      "1": "hsl(200, 7.0%, 8.8%)",
      ...
      "12": "hsl(210, 6.0%, 93.0%)"
    }
  }
}

There should be a way for us to use these color steps as CSS Variables, so when the theme changes, only the values in the CSS Variable change, not the classes in the components.

You only declare slate-1 once in the component, then the theme handles whether the color will be from the light or dark theme.

I'm opening a new issue, because this is not something we need to resolve in this PR, nor is it something urgent.

Originally posted by @pixelsbyeryc in #55 (comment)

[Front end] Update the dashboard with new components from the storybook

We are moving fast on implementing the design into storybook components. We will start replacing the non-sensical components and data with dynamic components.

[Design] Create a `<Button>` component

To design:

Create the button component that we can use for everything in our UI.

Button sizes:

• sm Small
• base Base
• lg Large

Button types (for now we'll follow a similar structure to the Primer Design System):

• default
• primary
• outline
• danger
• invisible

Props:

• hasIcon: boolean
• hideLabel: boolean
• icon: <Icon> component
• label: string
• action ?

Other types of button, according to our needs:

• Button with Dropdown
• Button with Action Variants
• Groups of Buttons

Implementation

• #76

[Design] Implement opinionated filters

We need a mock prior to the Digital ocean meeting with 5 filters. We can put this into Figma initially, but hopefully can scope this in a storybook story. Please don't take my design below as testament, but my thought is it can live above the participant cards or replace it entirely.

Filter ideas (open to ideas)

1. Top 1000 projects (based on stars)
2. Projects with more than 5 contributors as of X date (note for API - this is limited to 1k repos)
3. Projects with more than 1000 stars
4. Most active - project with the most hacktoberfest labeled PRs
5. Most spammed - project with the most invalid labeled PRs

update:
Context on why filter based on stars

[CI] Add release automation for alpha and beta

Type of feature

🔁 CI

Current behavior

We will have more changes for this site in the future. It will be nice to implement beta and alpha release automation similar to all other projects.

Suggested solution

Implement

https://github.com/open-sauced/open-sauced/blob/main/.github/workflows/release.yml

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[refactor] Improve current implementation of atoms

Currently out atoms, such as text, strong text and title, are wrappers around supabase ui components. Unfortunately, they don't allow anyone to pass props into the atom and have that prop passed down to the supabase components.

Ideally, the component should allow the props passed into the wrapper to be passed down to the supabase component. This would give more flexibility to the atom and also make it easier to maintain.

[Front-End] Implement Text primitives

Need to specify:

• Type specs (Inter)
• Text sizes

Typography

We're using the Inter font family as the product's typeface.

It can be found on Google Fonts: https://fonts.google.com/specimen/Inter, or downloaded from its website: https://rsms.me/inter/.

Text Sizes

The root font-size should be 16px.

We can use Tailwind font-size: https://tailwindcss.com/docs/font-size. We'll be using the same typographic scale as Tailwind's.

To find the correct size, you can select the text on Figma, and go to the Inspect tab, on the right panel.

Eg:
If the font-size is 14px, you can use the font-sm class from Tailwind.

Letter Spacing

Here's how the letter-spacing should be:

• From text-base, and smaller: -0.01rem
• Bigger than text-base: -0.03rem

Line Height

• text-xs and text-sm: should be either leading-snug or leading-normal
• text-base to text-xl: should be leading-snug or leading-tight
• text-2xl up: should be leading-tight or leading-snug

[CI] Add storybook automation

https://github.com/open-sauced/open-sauced/blob/main/.github/workflows/storybook.yml

Bug: Auth molecule and organism does not render an image.

The image is not found. We will need to either update the URL or add a new image.

[Bug] Fix link to secondary avatar image when no image url is supplied to Avatar component

Currently, the link to AvatarImg is broken which causes storybook to fail when attempting to deploy. The link needs to be fixed so that Storybook can be updated and deployed properly.

[Front-end] Implement Onboarding Nav Button component

Implement the component that will indicate to the person that they still need to continue with the onboarding.

Depends on this:

• #72

[Front-End] Improve FilterCard

Tag Primitives

• Need: preview of tag primitives, and their states.

Types of tag:

• Default (can't be removed)
• Filter (can be removed)

Tag States:

These only apply to the filter tags. The default tags can't be changed, so they don't have states.

• Default
• Hover / Active
• Focus

Icons

We're using Github's Octicons to represent:

• Repository: repo
• Topic: hash
• Organization: organization
• Contributor: person

Make it look more like the design

There are some improvements that can be made in the UI.

Current:

Design:

[Refactor] Revert changes that removed disabled prop on Tool Nav

Need to reimplement disabled functionality for this component: https://github.com/open-sauced/insights/blob/61f82f19f9990200983b682a3f34213ff11c60a1/components/organisms/toolist/nav.tsx#L22

disabled={navbarTool === tool.name}

[CI] Implement test scripts and storyshots

That should just be npm test. But good catch because we should add the storyshots plugin to do snapshot testing.

https://storybook.js.org/docs/react/writing-tests/snapshot-testing

Originally posted by @bdougie in #38 (comment)

[Front-end] Implement Progress Pie component

<svg id="boxoverview-total" class="pie-box" viewBox="0 0 20 20" height="20" width="20">
    <circle class="pie-circle" r="5" cx="10" cy="10" stroke-width="10" stroke-dasharray="calc(32 * 31.4 / 100) 31.4" style="transform: rotate(-90deg) translate(-20px);"></circle>
</svg>

To update the percentage, you replace a number inside the stroke-dasharray:

<circle stroke-dasharray="calc(<PERCENTAGE> * 31.4 / 100) 31.4" ...></circle>

[feat] Create an Icon component

We need an Icon component that allows us to select from our Icon library.

Depends on:

• #63

Revise this PR, and update the file accordingly: #57 (comment)

[Front-End] Implement Highlight Card Component

This component is not currently available in the project and needs to be implemented. While the cards shown are examples of what the component will be used for in production, the single component should allow someone to implement all four cards without creating separate components.

This component should also be added to Storybook and allow for the changing of data in the component as well as icons passed into the component.

Update Readme

[Front-End] Implement Radix Colors

We're using Radix Colors for most of our designs. They have an easy implementation here: https://www.radix-ui.com/colors.

These are the colors:

• Slate
• Orange
• Amber
• Blue
• Cyan
• Grass
• Red
• Teal

Installing Radix UI Colors:

// with npm
npm install @radix-ui/colors

// with yarn
yarn add @radix-ui/colors

You can also pick the colors from this Figma file: https://www.figma.com/file/paPYxS00vWq3pqPh4EJAxi/Radix-Colors-(Community)?node-id=0%3A1

--

Needs from designer:

• Flag which color palettes to use (we don't need all of them).

TOP 5 Week 28 July 11th

What are you planning to get done by the end of this week? (Remember to link out to issues that these activities might be driving towards)

[Front-End] Implement React Icons

Summary

Use React Icons to import any library of icons we need.

in hot we are using https://react-icons.github.io/react-icons/ and letting the vite optimiser dedupe imports and shake the tree - we should be able to use the same technique, in effect feel free to import any icons! 🍕

@0-vortex - #63 (comment)

We're using icons from a few libraries:

• Heroicons
• Octicons

We need to either add them to our project or import them to our project. What would be best @bdougie @chadstewart?

These icons will be used in our <Icon> component from #62.

[Design bug] Should all cards have a dropshadow?

Curious if this is an oversight or intentional @pixelsbyeryc. While looking at @chadstewart's PR preview I saw the Dropshadow on the Select Tables but not on the HighlightCard.

Card with echart

Card with SelectTable

HighlightCard

[Front-end] Implement Onboarding Flow

Summary

Implement the onboarding flow. When the user clicks to "log in", they will be forwarded to the onboarding steps, where they'll have to:

1. Authenticate with GitHub
2. Provide us an API Token
3. Follow some repos/Tell us which repo they will want

Depends on these:

• #59
• #69
• #72
• #73
• #118
• #115
• #116

Available screens:

Here are the steps in the authentication flow.

Figma File

Onboarding Screens

Dashboard States

Originally posted by @pixelsbyeryc in #59 (comment)

Additional code for the progress pie:

This is the piece of code I'm using in HomeBills.

<svg id="boxoverview-total" class="pie-box" viewBox="0 0 20 20" height="20" width="20">
    <circle class="pie-circle" r="5" cx="10" cy="10" stroke-width="10" stroke-dasharray="calc(32 * 31.4 / 100) 31.4" style="transform: rotate(-90deg) translate(-20px);"></circle>
</svg>

To update the percentage, you replace a number inside the stroke-dasharray:

<circle stroke-dasharray="calc(<PERCENTAGE> * 31.4 / 100) 31.4" ...></circle>

[Backend & CI] Implement Supabase Auth in this app

Per this issue #4 and #59. We will need to add this site to the Supabase auth service.

• Get Chad to access to Supabase
• Set up auth service for insights in Supabase.

This implementation can use a combo of the useSupabaseAuth hook and react state

But definitely let @chadstewart or myself pick this up.

Originally posted by @bdougie in #4 (comment)

[Front-End] Implement "select all" feature to selectable tables

I had one question on this checkbox its behavior. Is it meant to bee a select all?

My thought is that it should select all when selected and deselect all when deselected. Let me know your thoughts on this @chadstewart & @pixelsbyeryc

Originally posted by @bdougie in #77 (comment)

[Front end] Mobile consideration for all organisms

• Header
• Tool Nav
• Tools Display
• Top Nav

Moving forward, let's consider mobile in all components as well.

[Front-End] Implement Selectable Row Table Component

Currently this component is not available in the project and needs to be implemented. The examples show are examples of what the table component could look like and the component should be able to handle all examples.

The table component should dynamically allow the adding of columns and labels for each column. It should allow for sizing to accommodate a certain amount of rows.

The component should also be added to Storybook and allow the adding of multiple columns and rows of data and potentially changing the header icon and the icon of the columns.

[Front-End] Improvements to User Avatar

These improvements are not urgent.

Ideally we want to:

• Have a placeholder (it'd be nice to have those colorful avatars with the initials)
• Have pre-defined Avatar sizes, like we have for the Title (<Title level={number}>)
• Be able to set the border of the Avatar (we'll probably have to use the Tailwind ring class, because border will affect the spacing).