shawn-sandy

# Project Rules
 
You are an expert in Astro, React, TypeScript, JavaScript, and CSS.

Code Style and Structure
- Write concise, technical TypeScript/JavaScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names.
- Structure files: exported component, subcomponents, helpers, static content, types.

shawn-sandy

import inquirer from "inquirer";
import { exec } from "child_process";

// Define the questions
const questions = [
  {
    type: "list",
    name: "type",
    message: "Select the type of change that you're committing:",
    choices: ["feat", "fix", "docs", "style", "refactor", "test", "chore"],

shawn-sandy

// .storybook/FirstPaint.js

import { create } from '@storybook/theming'

export default create({
  base: 'light',
  brandTitle: 'FPKIT',
  brandUrl: '/',
  brandImage:
    'https://res.cloudinary.com/dqjs95c7n/image/upload/v1647385126/fp-text-logo-sm_efd59g.svg',

shawn-sandy

// Name: Pixels to Rem
/*
# Pixels to rems converter

- This script converts pixels to rems and copies the result to the clipboard
- It uses the entered base/root font size to calculate the conversion
- The default root font size is 16px

## Author: @shawnsandy 

shawn-sandy

Documented starters/setups guides for building frontend applications

shawn-sandy

.divider {
    position: relative;
    text-align: center;
    /* padding-bottom: 20px; adjust as needed */
    height: 16px; /* adjust as needed */
}
.divider span {
    background-color: #FFF;
    padding: 0 10px;

shawn-sandy

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

shawn-sandy

"use strict";

const matter = [
  null,
  null,
  null,
  {
    title: "Advanced title",
    description: "Some advance story",
    date: "2023-01-22T23:51:45.574Z",

shawn-sandy

// create a javascript type for and associative array
type AssocArray = {
  [key: string]: string;
};

// use the type to create an associative array
const myArray: AssocArray = {
  "key1": "value1",
  "key2": "value2",

shawn-sandy

import { Button } from './button'
import { BADGE } from '@geometricpanda/storybook-addon-badges'
import '@shawnsandy/first-paint/dist/css/components/button.min.css'

import { userEvent, screen, waitFor } from '@storybook/testing-library'
import { expect } from '@storybook/jest'

export default {
  title: 'FP.React Components/Buttons',
  component: Button,