highlight_examples.md

Code snippet examples to test syntax highlighting

React / React Native

JSX

import React, { useMemo, useState, useCallback } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {
  MD3LightTheme as DefaultTheme,
  PaperProvider,
} from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { QueryClientProvider } from '@tanstack/react-query';
import { ApolloProvider } from '@apollo/client';
import { ToastProvider } from './shared/context/toast-context';
import { AuthProvider } from './shared/context/auth-context';
import { AppProvider } from './shared/context/app-context';
import { lightTheme } from './shared/utils/theme';
import queryClient from './shared/infra/query-client';
import { createClient } from './shared/infra/apollo-client';

const theme = {
  ...DefaultTheme,
  ...lightTheme,
};

const DEFAULT_CLIENT_KEY = new Date().toISOString();

function AppProviders({ children }) {
  const [clientKey, setClientKey] = useState(DEFAULT_CLIENT_KEY);
  const graphqlClient = useMemo(() => {
    return createClient();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [clientKey]);

  const resetGraphQLClient = useCallback(() => {
    setClientKey(new Date().toISOString());
  }, []);

  return (
    <SafeAreaProvider>
      <QueryClientProvider client={queryClient}>
        <ApolloProvider client={graphqlClient}>
          <AuthProvider onLogout={resetGraphQLClient}>
            <AppProvider>
              <PaperProvider theme={theme}>
                <ToastProvider>
                  <NavigationContainer>{children}</NavigationContainer>
                </ToastProvider>
              </PaperProvider>
            </AppProvider>
          </AuthProvider>
        </ApolloProvider>
      </QueryClientProvider>
    </SafeAreaProvider>
  );
}

export default AppProviders;

import { useEffect, useRef } from "react";
import { useParams, Navigate } from "react-router-dom";
import { useGetPoem } from "@/hooks/use-get-poem";
import { PoemDisplay } from "@/components/PoemDisplay";
import CherryBlossomAnimation from "@/components/CherryBlossomAnimation";
import { Footer } from "@/components/Footer";

const Poem = () => {
  const { id } = useParams();
  const { data, isLoading } = useGetPoem(id);

  return (
    <div className="fixed inset-0 overflow-auto">
      <div className="fixed inset-0 bg-cherry-gradient" />
      <div className="fixed inset-0 bg-white/40 backdrop-blur-sm" />
      <CherryBlossomAnimation />
      <div className="min-h-screen relative z-10 flex flex-col">
        <div className="container flex-1 py-8 md:py-12">
          <PoemDisplay
            poem={data?.data}
            loading={isLoading}
            className="bg-white/80 backdrop-blur-md rounded-lg shadow-lg p-8"
          />
        </div>
        <Footer />
      </div>
    </div>
  );
};

export default Poem;

import React, { useState, useMemo, memo } from 'react';
import PropTypes from 'prop-types';
import { Layer, Source } from '@urbica/react-map-gl';
import R from 'ramda';
import { tileStyleShape, tileShape } from '../../utils/prop-types';
import L from '../../constants';

import './style.css';

const isValidStyle = R.complement(R.either(R.isNil, R.isEmpty));
const condStyle = (style) => (isValidStyle(style) ? { paint: style } : {});

const Tile = ({
  layerId,
  sourceId,
  getTileset,
  tile,
  style,
  visible,
  onEnter,
  onLeave,
  onClick,
  metadata,
  hoverStyle,
  before,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  const { fill, border } = useMemo(
    () =>
      hoverStyle && isHovered ? R.mergeDeepRight(style, hoverStyle) : style,
    [style, hoverStyle, isHovered]
  );
  const condStyleFill = useMemo(() => condStyle(fill), [fill]);
  const condStyleBorder = useMemo(() => condStyle(border), [border]);

  const { id: tileId, name: tileName } = useMemo(
    () => getTileset(tile) || {},
    [tile, getTileset]
  );

  if (R.isNil(tileId) || R.isNil(tileName)) {
    throw new Error(`Cannot render tile. Missing tileset id, name or both`);
  }

  return (
    <>
      <Source id={sourceId} type="vector" url={`mapbox://${tileId}`} />
      <Layer
        {...condStyleFill}
        id={`${layerId}-${L.TILE_FILL_LAYER_ID_SUFFIX}`}
        type="fill"
        before={before}
        source={sourceId}
        source-layer={tileName}
        metadata={metadata}
        layout={{
          visibility: visible ? 'visible' : 'none',
        }}
        onHover={(e) => {
          setIsHovered(true);
          onEnter(e);
        }}
        onLeave={(e) => {
          setIsHovered(false);
          onLeave(e);
        }}
        onClick={onClick}
      />
      <Layer
        {...condStyleBorder}
        id={`${layerId}-${L.TILE_LINE_LAYER_ID_SUFFIX}`}
        type="line"
        before={before}
        source={sourceId}
        source-layer={tileName}
        layout={{
          visibility: visible ? 'visible' : 'none',
        }}
      />
    </>
  );
};

Tile.propTypes = {
  layerId: PropTypes.string.isRequired,
  sourceId: PropTypes.string.isRequired,
  tile: tileShape.isRequired,
  getTileset: PropTypes.func.isRequired,
  style: tileStyleShape,
  visible: PropTypes.bool,
  metadata: PropTypes.shape({
    value: PropTypes.number,
  }),
  onEnter: PropTypes.func,
  onLeave: PropTypes.func,
  onClick: PropTypes.func,
  hoverStyle: tileStyleShape,
  before: PropTypes.string,
};

Tile.defaultProps = {
  visible: true,
  metadata: {},
  onEnter: () => {},
  onLeave: () => {},
  onClick: () => {},
  style: L.DEFAULT_TILE_STYLE,
  hoverStyle: null,
  before: L.TILE_LAYER_BEFORE_LAYER_ID,
};

export default memo(Tile);

TSX

import hexRgb from 'hex-rgb';
import { GeoJsonLayer } from '@deck.gl/layers';
import { Feature, Geometry, GeoJSON } from 'geojson';

type PropertiesType = {
  fillColor: string;
  lineColor: string;
};

type DeckColor = [number, number, number] | [number, number, number, number];

type DrawingType = {
  geometry: {
    coordinates: [];
    type: string;
  };
  properties: PropertiesType;
};

type AlertDrawingsLayerProps = {
  id: string;
  data: string;
};

const DEFAULT_FILL_OPACITY = 0.5;
const DEFAULT_LINE_WIDTH = 4;

export const hexToDeckRgba = (
  color: string,
  alpha = 1,
  rgba = true,
): DeckColor => {
  const { red, green, blue } = hexRgb(color);

  const alpha255 = Math.floor(alpha * 255);

  if (rgba) {
    return [red, green, blue, alpha255];
  }

  return [red, green, blue];
};

function drawingsToGeoJSON(drawingsStr: string): GeoJSON {
  const drawings = JSON.parse(drawingsStr);

  return {
    type: 'FeatureCollection',
    features: drawings.map((drawing: DrawingType) => {
      return {
        type: 'Feature',
        ...drawing,
      };
    }),
  };
}

export default function AlertLayer({
  id,
  data,
}: AlertDrawingsLayerProps) {
  const dataFeatures = drawingsToGeoJSON(data);

  return new GeoJsonLayer({
    data: dataFeatures,
    filled: true,
    getFillColor: (f: Feature<Geometry, PropertiesType>) => {
      return hexToDeckRgba(f.properties.fillColor, DEFAULT_FILL_OPACITY);
    },
    getLineColor: (f: Feature<Geometry, PropertiesType>) => {
      return hexToDeckRgba(f.properties.lineColor, DEFAULT_FILL_OPACITY);
    },
    getLineWidth: DEFAULT_LINE_WIDTH,
    id: `${id}-drawings-layer`,
    stroked: true,
  });
}