import * as React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function CardWithForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="name">Name</Label>
              <Input id="name" placeholder="Name of your project" />
            </div>
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="framework">Framework</Label>
              // ...               
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

import React, {
  useState,
  createContext,
  useContext,
} from "react";

// Create a context
const MessageContext = createContext();

function App() {
  const [message, setMessage] = useState(
    "Hello World!",
  );

  return (
    // Provide the state to nested components
    <MessageContext.Provider
      value={{ message, setMessage }}
    >
      <Child1>
        <Child2>
          <Child3>
            <DeeplyNestedChild />
          </Child3>
        </Child2>
      </Child1>
    </MessageContext.Provider>
  );
}

function DeeplyNestedChild() {
  /* 
    Use the data directly without receiving it 
    as a prop
  */
  const { message, setMessage } = useContext(
    MessageContext,
  );

  return (
    <div>
      <h1>{message}</h1>
      <button
        onClick={() =>
          setMessage(
            "Hello from nested component!",
          )
        }
      >
        Change Message
      </button>
    </div>
  );
}

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("Hello World!");

  return (
    <div>
      <h1>{message}</h1>
      <button
        onClick={() => setMessage("New Message!")}
      >
        Change Message
      </button>
    </div>
  );
}

export default App;

import React, { useReducer } from "react";

const initialState = {
  message: "Hello World!",
};

function reducer(state, action) {
  switch (action.type) {
    case "CHANGE_MESSAGE":
      return {
        ...state,
        message: action.payload,
      };
    default:
      throw new Error();
  }
}

function App() {
  const [state, dispatch] = useReducer(
    reducer,
    initialState,
  );

  return (
    <div>
      <h1>{state.message}</h1>
      <button
        onClick={() =>
          dispatch({
            type: "CHANGE_MESSAGE",
            payload: "New Message!",
          })
        }
      >
        Change Message
      </button>
    </div>
  );
}

import {
  createSlice,
  configureStore,
} from "@reduxjs/toolkit";

const initialState = {
  message: "Hello World!",
};

export const messageSlice = createSlice({
  name: "message",
  initialState,
  reducers: {
    changeMessage: (state, action) => {
      state.message = action.payload;
    },
  },
});

export const store = configureStore({
  reducer: messageSlice.reducer,
});

import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";

import { App } from "./App";
import { store } from "./store";

const rootElement =    
  document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

import React from "react";
import {
  useSelector,
  useDispatch,
} from "react-redux";
import { messageSlice } from "./store";

export function App() {
  const message = useSelector(
    (state) => state.message,
  );
  const dispatch = useDispatch();

  const handleChangeMessage = () => {
    dispatch(
      messageSlice.actions.changeMessage(
        "New Redux Message!",
      ),
    );
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleChangeMessage}>
        Change Message
      </button>
    </div>
  );
}

export default App;

import React from "react";

// Create UserPreferences context
const UserContext = React.createContext({});

export const UserProvider = ({ children }) => {
  /* 
   get user preferences information from 
   external service/API 
  */
  const userPreferences = getUserPreferences();

  return (
    <UserContext.Provider
      value={{ userPreferences }}
    >
      {children}
    </UserContext.Provider>
  );
};

import { UserProvider } from './UserContext';

function App() {
  return (
    <UserProvider>
     {/* other components */}
    </UserProvider>
  );
}

export default App;

import { StatsigProvider } from "statsig-react";

function App() {
  return (
    <StatsigProvider
      sdkKey="<STATSIG_CLIENT_SDK_KEY>"
      waitForInitialization={true}
    >
      <div className="App">
        {/* Rest of App ... */}
      </div>
    </StatsigProvider>
  );
}

export default App

import { useExperiment } from "statsig-react";

function ButtonComponent() {
  // access experiment configuration
  const { config } = useExperiment(
    "button_color",
  );

  // access value of experiment parameter
  const showGreenButton = config.get(
    "enable_feature",
  );

  return (
    // ...
  )
}

export default ButtonComponent

import {
  Statsig,
  useExperiment,
} from "statsig-react";

function ButtonComponent() {
  const { config } = useExperiment(
    "button_color",
  );

  const showGreenButton = config.get(
    "enable_feature",
  );

  const buttonColor = showGreenButton
    ? "green"
    : "blue";

  const onButtonClick = () => {
    // log button click
    Statsig.logEvent(
      "button_click",
      buttonColor,
    );
  };

  return (
    <button
      style={{ backgroundColor: buttonColor }}
      onClick={onButtonClick}
    >
      Click Me
    </button>
  );
}

import { useGate } from "statsig-react";

function ButtonComponent() {
  // Evaluate the feature flag
  const { value: isFeatureEnabled } = useGate(
    "new_button_color",
  );

  // Decide which button color to use
  const buttonColor = isFeatureEnabled
    ? "green"
    : "blue";

  return (
    <button
      style={{ backgroundColor: buttonColor }}
    >
      Click Me
    </button>
  );
}

export default ButtonComponent;

const express = require('express');
const path = require('path');

const app = express();

// Serve static files from the React app
app.use(express.static(path.join(__dirname, 'build')));

// API routes
app.get('/api/data', (req, res) => {
  res.json({ data: 'Some API data' });
});

// Serve the React app for all other routes
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

# Step 1: Use an official Node.js image as the base image
FROM node:16-alpine

# Step 2: Set the working directory inside the container
WORKDIR /usr/src/app

# Step 3: Copy package.json and package-lock.json to the container
COPY package*.json ./

# Step 4: Install the app dependencies
RUN npm install

# Step 5: Copy the rest of the app's source code to the container
COPY . .

# Step 6: Build the React app for production
RUN npm run build

# Step 7: Use a lightweight web server (nginx) to serve the built app
FROM nginx:alpine

# Step 8: Copy the build output from the previous step to the nginx HTML directory
COPY --from=0 /usr/src/app/build /usr/share/nginx/html

# Step 9: Expose port 80 to allow external traffic to access the app
EXPOSE 80

# Step 10: Start the nginx server
CMD ["nginx", "-g", "daemon off;"]

# .github/workflows/ci.yml
name: CI Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # Step 1: Checkout the code
      - name: Checkout repository
        uses: actions/checkout@v2

      # Step 2: Set up Node.js (using Node.js 16)
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      # Step 3: Install dependencies
      - name: Install dependencies
        run: npm install

      # Step 4: Run Linting and Code Formatting (ESLint and Prettier)
      - name: Lint and Format Code
        run: |
          npm run lint
          npm run format:check

      # Step 5: Run TypeScript Type Checking
      - name: TypeScript Type Check
        run: npm run type-check

      # Step 6: Run Unit Tests
      - name: Run Unit Tests
        run: npm run test

      # Step 7: Run Integration and E2E Tests (using Cypress or Jest)
      - name: Run Integration and E2E Tests
        run: npm run test:e2e

      # Step 8: Run Accessibility Tests (example using axe-core or cypress-axe)
      - name: Run Accessibility Tests
        run: npm run test:accessibility

      # Step 9: Build the React app for production (optional)
      - name: Build for Production
        run: npm run build

poetry add ddtrace
poetry install

from ddtrace import tracer
from ddtrace.contrib.flask import TraceMiddleware
from flask import Flask

app = Flask(__name__)
traced_app = TraceMiddleware(app, tracer, service="my-service", distributed_tracing=True)

curl -X GET 'localhost:8080/notes'
{}
curl -X POST 'localhost:8080/notes?desc=hello'
( 1, hello)
curl -X GET 'localhost:8080/notes?id=1'
( 1, hello)
curl -X POST 'localhost:8080/notes?desc=newNote'
( 2, newNote)
curl -X GET 'localhost:8080/notes'
{ "1": "hello", "2": "newNote" }

from datadog import initialize, api

# Set your Datadog API key
options = {
    'api_key': '<YOUR_API_KEY>',
    'app_key': '<YOUR_APP_KEY>'  # Optional, only needed for specific API endpoints
}

# Initialize the Datadog client
initialize(**options)

# Send a custom metric
try:
    api.Metric.send(
        metric='custom.metric',
        points=42,  # Value for the metric
        tags=['env:production'],  # Tags associated with the metric
        type='gauge'  # Optional, 'gauge' is the default type
    )
    print("Custom metric sent successfully!")
except Exception as e:
    print(f"Error sending custom metric: {e}")

<html>
  <head>
    <title>Example to send logs to Datadog</title>
    <script type="text/javascript" src="https://www.datadoghq-browser-agent.com/datadog-logs-us.js"></script>
    <script>
      // Set your client token
      DD_LOGS.init({
        clientToken: '<CLIENT_TOKEN>',
        forwardErrorsToLogs: true,
    });

      // optionally add global metadata attribute--one attribute can be added at a time
      DD_LOGS.addLoggerGlobalContext('request_id', <REQUEST_ID>);
    </script>
   [ … ]
  </head>
[ … ]
</html>

DD_LOGS.logger.info('signup button clicked', { env: 'dev', user_id: <USER_ID> })