Tarun Kumar Sukhu tsukhu

## Steps.md

      
              1 file
            
          
              2 forks
            
          
              2 comments
            
          
              9 stars
            
          
                tsukhu
                / Steps.md
            
            
              Last active
              November 14, 2023 07:07
            
              
                create-react-app with styled components
              
          
    Here are the steps to convert the create-react-app generated to code to use styled components instead of css


Created an app using create-react-app

create-react-app react-styledcomponents-app


Install styled-components as a dependency


## StencilJS_integration_with_ReactJS.md

      
              5 files
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                tsukhu
                / StencilJS_integration_with_ReactJS.md
            
            
              Last active
              February 22, 2023 17:46
            
              
                My First Stencil Web Component and integration with React JS
              
          
    First experience with StencilJS


Setup the StencilJS development environment by cloning https://github.com/ionic-team/stencil-component-starter.git
The starter comes with a sample web component called my-component. I have used this as a sample and tried to see if I can integrate this with my existing ReactJS app https://github.com/ERS-HCL/react-snack-app .
The main goal was to see

Evaluate the requirements to integrate with an existing React JS app.
See if it works on all browsers after this integration


Step 1 - Build Web Component
Build the stencil component starter project (after the initial setup steps)


## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Pinser + TW + Ethers.js</title>
  <base href="/" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />

## tw-subscription.tsx
// Based on the Remix Single (https://www.youtube.com/watch?v=jd_bin5HPrw&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6)

import { Transition } from '@headlessui/react';
import { CheckIcon, RefreshIcon } from '@heroicons/react/outline';
import { useEffect, useRef } from 'react';
import {
  ActionFunction,
  Form,
  Link,
  useActionData,

## insights.tsx
import { LoaderFunction, useLoaderData } from "remix";
import useResizeObserver from "use-resize-observer";
import MyResponsiveAreaBump from "~/components/charts/AreaBump";
import MyResponsiveBarCanvas from "~/components/charts/BarCanvas";
import MyResponsiveChordCanvas from "~/components/charts/ChordCanvas";
import MyResponsiveNetworkCanvas from "~/components/charts/NetworkCanvas";

export const loader: LoaderFunction = async ({ params }) => {
  let result = await Promise.all([
    fetch("http://localhost:3100/bar"),

## backup-github.sh
#!/bin/bash
# A simple script to backup an organization's GitHub repositories.

GHBU_BACKUP_DIR="./gitbackup"                  # where to place the backup files
GHBU_ORG="ERS-HCL"                                   # the GitHub organization whose repos will be backed up
GHBU_UNAME="<CHANGE ME>"                               # the username of a GitHub account (to use with the GitHub API)
GHBU_PASSWD="<CHANGE ME>"                             # the password for that account
GHBU_GITHOST="https://github.com/"                # the GitHub hostname (see notes)
GHBU_PRUNE_OLD=true                                # when `true`, old backups will be deleted
GHBU_PRUNE_AFTER_N_DAYS=3                 # the min age (in days) of backup files to delete

## host_reactjs_component.js
// Dynamically mount
// loadComponent('myvueapp','./FullApp','myid')
function loadComponent(scope, module,divId ) {
  window[scope].get(module).then((m) => {
    m().default(`#${scope}-app-${divId}`);
  });
}

## machine.js
const dataMachine = new Machine({
  id: "posts",
  initial: "ready",
  context: {
    data: [],
  },
  states: {
     ready: {
      on: {
        FETCH_POSTS: "fetching"

## repoContainer.js
import { Query } from 'react-apollo';
import { CSVLink } from 'react-csv';
import { GET_CURSOR_ORG_DATA, GET_ORG_DATA } from '../../graphql/queries';

      <Query query={GET_ORG_DATA} variables={{ org: org }} errorPolicy="ignore">
        {({ loading, error, data, fetchMore }) => {
          if (error) return `Error! ${error.message}`;

          // Total available org repositories
          const totalCount = data.organization

## app.js
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

render() {
    // console.log(this.state.org);
    const client =
      this.state.token &&
      new ApolloClient({
        uri: 'https://api.github.com/graphql',
        errorPolicy: 'ignore',
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<title>Pinser + TW + Ethers.js</title>
	<base href="/" />

	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="icon" type="image/x-icon" href="favicon.ico" />
	// Based on the Remix Single (https://www.youtube.com/watch?v=jd_bin5HPrw&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6)

	import { Transition } from '@headlessui/react';
	import { CheckIcon, RefreshIcon } from '@heroicons/react/outline';
	import { useEffect, useRef } from 'react';
	import {
	ActionFunction,
	Form,
	Link,
	useActionData,
	import { LoaderFunction, useLoaderData } from "remix";
	import useResizeObserver from "use-resize-observer";
	import MyResponsiveAreaBump from "~/components/charts/AreaBump";
	import MyResponsiveBarCanvas from "~/components/charts/BarCanvas";
	import MyResponsiveChordCanvas from "~/components/charts/ChordCanvas";
	import MyResponsiveNetworkCanvas from "~/components/charts/NetworkCanvas";

	export const loader: LoaderFunction = async ({ params }) => {
	let result = await Promise.all([
	fetch("http://localhost:3100/bar"),
	#!/bin/bash
	# A simple script to backup an organization's GitHub repositories.

	GHBU_BACKUP_DIR="./gitbackup" # where to place the backup files
	GHBU_ORG="ERS-HCL" # the GitHub organization whose repos will be backed up
	GHBU_UNAME="<CHANGE ME>" # the username of a GitHub account (to use with the GitHub API)
	GHBU_PASSWD="<CHANGE ME>" # the password for that account
	GHBU_GITHOST="https://github.com/" # the GitHub hostname (see notes)
	GHBU_PRUNE_OLD=true # when `true`, old backups will be deleted
	GHBU_PRUNE_AFTER_N_DAYS=3 # the min age (in days) of backup files to delete
	// Dynamically mount
	// loadComponent('myvueapp','./FullApp','myid')
	function loadComponent(scope, module,divId ) {
	window[scope].get(module).then((m) => {
	m().default(`#${scope}-app-${divId}`);
	});
	}
	const dataMachine = new Machine({
	id: "posts",
	initial: "ready",
	context: {
	data: [],
	},
	states: {
	ready: {
	on: {
	FETCH_POSTS: "fetching"
	import { Query } from 'react-apollo';
	import { CSVLink } from 'react-csv';
	import { GET_CURSOR_ORG_DATA, GET_ORG_DATA } from '../../graphql/queries';

	<Query query={GET_ORG_DATA} variables={{ org: org }} errorPolicy="ignore">
	{({ loading, error, data, fetchMore }) => {
	if (error) return `Error! ${error.message}`;

	// Total available org repositories
	const totalCount = data.organization
	import ApolloClient from 'apollo-boost';
	import { ApolloProvider } from 'react-apollo';

	render() {
	// console.log(this.state.org);
	const client =
	this.state.token &&
	new ApolloClient({
	uri: 'https://api.github.com/graphql',
	errorPolicy: 'ignore',