@epic-effx/create-application-template-rs 0.1.0

package/src/app.d.ts

@@ -0,0 +1,7 @@
+declare module '*.woff2'
+declare module '*.png'
+declare module '*.svg' {
+  const content: string
+  export default content
+}
+declare module '*.module.css'

package/src/assets/logo.svg

@@ -0,0 +1,15 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#fd05a0">
+  <g id="bgCarrier" stroke-width="0"/>
+  <g id="tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+  <g id="iconCarrier">
+    <style type="text/css"> .st0{fill:#fd05a0;}</style>
+    <g>
+      <path class="st0" d="M430.762,126.907c-42.384-89.329-67.753-89.329-78.722-89.329c-1.947,0-3.884,0.167-5.785,0.482 c-18.1,3.014-41.374,22.031-69.302,56.579h-20.955h-20.974c-27.909-34.548-51.202-53.566-69.301-56.579 c-1.891-0.315-3.829-0.482-5.758-0.482h-0.25c-11.108,0-36.412,0.649-78.499,89.329C34.188,164.608-32.49,256.506,18.091,366.094 c49.996,108.328,191.425,108.328,237.907,108.328c46.472,0,187.911,0,237.907-108.318 C544.495,256.506,477.809,164.608,430.762,126.907z M468.055,354.161c-41.15,89.134-161.411,91.776-212.056,91.776 c-50.626,0-170.906-2.642-212.038-91.776c-56.969-123.432,60.121-208.886,60.121-208.886s36.551-79.213,55.875-79.213l1.094,0.093 c18.99,3.162,60.14,56.969,60.14,56.969h34.808h34.808c0,0,41.15-53.807,60.14-56.969l1.094-0.093 c19.305,0,55.875,79.213,55.875,79.213S525.024,230.729,468.055,354.161z"/>
+      <path class="st0" d="M146.011,241.809c0,13.983,11.349,25.323,25.332,25.323c13.982,0,25.313-11.34,25.313-25.323 c0-13.983-11.331-25.322-25.313-25.322C157.36,216.487,146.011,227.826,146.011,241.809z"/>
+      <ellipse class="st0" cx="171.343" cy="241.809" rx="6" ry="25" style="fill:#081e28"/>
+      <path class="st0" d="M340.663,267.132c13.982,0,25.323-11.34,25.323-25.323c0-13.983-11.341-25.322-25.323-25.322 c-13.983,0-25.322,11.34-25.322,25.322C315.341,255.792,326.68,267.132,340.663,267.132z"/>
+      <ellipse class="st0" cx="340.663" cy="241.809" rx="6" ry="25" style="fill:#081e28"/>
+    </g>
+  </g>
+</svg>

package/src/components/App.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen, act } from '@testing-library/react'
+import 'jest-styled-components'
+import { App } from './App'
+
+jest.useFakeTimers()
+
+test('renders title', () => {
+  render(<App />)
+
+  const text = 'Create Application Template RS'
+
+  for (let i = 1; i <= text.length; i++) {
+    act(() => {
+      jest.advanceTimersByTime(50)
+    })
+  }
+
+  expect(screen).toMatchSnapshot()
+  expect(screen.getByText(text)).toBeInTheDocument()
+})
+
+afterEach(() => {
+  jest.useRealTimers()
+})

package/src/components/App.tsx

@@ -0,0 +1,66 @@
+import { FC } from 'react'
+import { ThemeProvider } from 'styled-components'
+import GlobalStyles from '../styles/Global'
+import theme from '../styles/theme'
+import * as app from '../styles/App.styled'
+import { StyledLogo } from '../styles/Logo.styled'
+import '../styles/env.css'
+import logo from '../assets/logo.svg'
+import { Counter } from './Counter'
+import { Typewriter } from './Typewriter'
+
+const TemplateLink: FC = () => {
+  return (
+    <app.StyledLink
+      href='https://www.npmjs.com/package/@epic-effx/create-application-template'
+      rel='noreferrer'
+      target='_blank'
+    >
+      here
+    </app.StyledLink>
+  )
+}
+
+export const App: FC = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <app.StyledContainer>
+        <app.StyledHeader>
+          <h1>
+            <Typewriter
+              text={'Create Application Template RS'}
+              speed={50}
+            />
+          </h1>
+          <h2>
+            <Typewriter
+              text={'Configured and under your control!'}
+              speed={50}
+              delay={300}
+            />
+          </h2>
+          <h2>
+            <Typewriter
+              text={'Access the template'}
+              speed={50}
+              delay={1300}
+            >
+              <TemplateLink />
+            </Typewriter>
+          </h2>
+        </app.StyledHeader>
+        <app.StyledSection>
+          <code className='card--env'>[NODE_ENV={process.env.NODE_ENV}]</code>
+          <code className='card--env'>[EXAMPLE={process.env.EXAMPLE}]</code>
+        </app.StyledSection>
+        <app.StyledSection>
+          <StyledLogo src={logo} alt='logo'/>
+        </app.StyledSection>
+        <app.StyledSection>
+          <Counter />
+        </app.StyledSection>
+      </app.StyledContainer>
+    </ThemeProvider>
+  )
+}

package/src/components/Counter.spec.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import 'jest-styled-components'
+import { userEvent } from '@testing-library/user-event'
+import { ThemeProvider } from 'styled-components'
+import theme from '../styles/theme'
+import { Counter } from './Counter'
+
+test('count increases per click', async () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Counter />
+    </ThemeProvider>
+  )
+  const button = screen.getByTestId('count')
+
+  const user = userEvent.setup()
+  await user.click(button)
+  const results = button.innerHTML.match(/\d/g)
+
+  expect(results).toBeArrayOfSize(1)
+  expect(results).toIncludeAllMembers(['1'])
+})
+
+
+test('styled with palette colors', async() => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Counter />
+    </ThemeProvider>
+  )
+  const button = await screen.findByRole('button', { name: /count/i })
+
+  const { primary, background } = theme.colors.palette
+
+  expect(button).toMatchSnapshot()
+  expect(button).toHaveStyleRule('color', primary)
+  expect(button).toHaveStyleRule('background-color', background)
+})

package/src/components/Counter.tsx

@@ -0,0 +1,26 @@
+import { FC, useState } from 'react'
+import * as styledCount from '../styles/Counter.styled'
+
+// NOTE update count then edit App.tsx... thanks
+// to ReactRefreshWebpackPlugin state is preserved
+
+type Count = number
+
+export const Counter: FC = () => {
+  const [count, setCount] = useState<Count>(0)
+
+  const handleClickCounter = () => setCount((count: Count) => ++count)
+
+  return (
+    <div>
+      <styledCount.StyledCounter onClick={handleClickCounter}>
+        <>count:&nbsp;</>
+        <styledCount.StyledCount
+          data-testid='count'
+        >
+          {count}
+        </styledCount.StyledCount>
+      </styledCount.StyledCounter>
+    </div>
+  )
+}

package/src/components/Typewriter.spec.tsx

@@ -0,0 +1,36 @@
+import { render, screen, act } from '@testing-library/react'
+import 'jest-styled-components'
+import { Typewriter } from './Typewriter'
+
+jest.useFakeTimers()
+
+test('renders text and children', () => {
+  const text = 'testing'
+
+  render(
+    <Typewriter
+      text={text}
+      speed={50}
+    >
+      <div data-testid='child-element'>child</div>
+    </Typewriter>
+  )
+
+  for (let i = 1; i <= text.length; i++) {
+    // full text available only after all 
+    // timeouts complete, see Typewriter.tsx
+    act(() => {
+      jest.advanceTimersByTime(50)
+    })
+  }
+
+  expect(screen).toMatchSnapshot()
+  expect(screen.getByText(text)).toBeInTheDocument()
+  expect(screen.getByTestId('child-element')).toBeInTheDocument()
+})
+
+afterEach(() => {
+  // reset real timers so other tests
+  // are not affected by mock timers
+  jest.useRealTimers()
+})

package/src/components/Typewriter.tsx

@@ -0,0 +1,66 @@
+import {
+  useState,
+  useEffect,
+  FC,
+  ReactElement,
+  PropsWithChildren,
+} from 'react'
+import { StyledText } from '../styles/Typewriter.styled'
+
+export const Typewriter: FC<
+  PropsWithChildren<{
+    text:string,
+    speed:number,
+    delay?:number,
+    children?:ReactElement,
+  }>
+> = ({
+  text,
+  speed,
+  delay = 0,
+  children,
+}) => {
+  const [displayedText, setDisplayedText] = useState('')
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  // NOTE: supports hot reload behavior in development:
+  // A) when the `text` prop changes (e.g. via hot reload), reset internal state
+  // B) this triggers the typing animation effect to restart with the new text
+
+  useEffect(() => {  // A
+    const timeoutIdInit = setTimeout(() => {
+      setDisplayedText('')
+      setCurrentIndex(0)
+    }, 0)
+
+    return () => clearTimeout(timeoutIdInit)
+  }, [text])
+
+  useEffect(() => {  // B
+    const mySpeed = (currentIndex === 0) ? delay + speed : speed
+
+    if (currentIndex < text.length) {
+      const timeoutId = setTimeout(() => {
+        setDisplayedText((prevText) => prevText + text.charAt(currentIndex))
+        setCurrentIndex((prevIndex) => prevIndex + 1)
+      }, mySpeed)
+
+      return () => clearTimeout(timeoutId)
+    }
+  }, [
+    currentIndex,
+    text,
+    speed,
+    delay,
+  ])
+
+  return (
+    <StyledText>
+      {displayedText}
+      {
+        (currentIndex === text.length && children) &&
+          <>&nbsp;{children}</>
+      }
+    </StyledText>
+  )
+}

package/src/components/__snapshots__/App.spec.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders title 1`] = `
+{
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "logTestingPlaygroundURL": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+}
+`;

package/src/components/__snapshots__/Counter.spec.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`styled with palette colors 1`] = `
+.c0 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  min-width: 142px;
+  padding: 10px;
+  font-size: 18px;
+  font-family: 'orbitron';
+  color: #fd05a0;
+  background-color: #081e28;
+  border: 1px solid #fd05a0;
+  border-radius: 12px;
+  transition-duration: 0.5s;
+}
+
+.c0:hover {
+  border-radius: 20px;
+}
+
+.c1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: right;
+  width: 42px;
+}
+
+<button
+  class="c0"
+>
+  count: 
+  <div
+    class="c1"
+    data-testid="count"
+  >
+    0
+  </div>
+</button>
+`;

package/src/components/__snapshots__/Typewriter.spec.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders text and children 1`] = `
+{
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "logTestingPlaygroundURL": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+}
+`;

package/src/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <meta name='theme-color' content='#000000' />
+    <meta
+      name='Create Application Template RS'
+      content='provides a configured application template for you to build upon'
+      keywords='template, react, typescript, styled-components, rspack, swc, jest, eslint, stylelint, javascript'
+    />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>You must enable JavaScript to run this app.</noscript>
+    <div id='root'></div>
+  </body>
+</html>

package/src/index.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './components/App'
+
+const container = document.getElementById('root')
+const root = createRoot(container!)
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/src/public/robots.txt

@@ -0,0 +1,6 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
+
+Sitemap: https://www.createapplicationtemplate.com/sitemap.xml
+

package/src/styles/App.styled.ts

@@ -0,0 +1,42 @@
+import { styled, keyframes } from 'styled-components'
+
+const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`
+
+export const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  font-size: max(1em, 18px);
+  color: ${({ theme }) => theme.colors.palette.primary};
+  background-color: ${({ theme }) => theme.colors.palette.background};
+`
+
+export const StyledHeader = styled.header`
+  text-align: center;
+`
+
+export const StyledSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  margin: 2vh;
+  animation: 3s ${fadeIn} ease;
+`
+
+export const StyledLink = styled.a`
+  color: ${({ theme }) => theme.colors.link.regular};
+  transition: 0.3s;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.link.hover};
+  }
+`

package/src/styles/Counter.styled.ts

@@ -0,0 +1,30 @@
+import { styled } from 'styled-components'
+
+export const StyledCounter = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  min-width: 142px;
+  padding: 10px;
+  font-size: 18px;
+  font-family: '${({ theme }) => theme.font}';
+  color: ${({ theme }) => theme.colors.palette.primary};
+  background-color: ${({ theme }) => theme.colors.palette.background};
+  border: 1px solid ${({ theme }) => theme.colors.palette.primary};
+  border-radius: 12px;
+  transition-duration: 0.5s;
+
+  &:hover {
+    border-radius: 20px;
+  }
+`
+
+export const StyledCount = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: right;
+  width: 42px;
+`

package/src/styles/Global.ts

@@ -0,0 +1,18 @@
+import { createGlobalStyle } from 'styled-components'
+import Orbitron from '../fonts/Orbitron-Regular.woff2'
+
+const GlobalStyles = createGlobalStyle`
+  @font-face {
+    font-family: '${({ theme }) => theme.font}';
+    src: url('${Orbitron}') format('woff2');
+  }
+
+  body {
+    margin: 0;
+    font-family: '${({ theme }) => theme.font}', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+`
+
+export default GlobalStyles

package/src/styles/Logo.styled.ts

@@ -0,0 +1,24 @@
+import { styled, keyframes } from 'styled-components'
+
+const pulse = keyframes`
+  0% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+
+  50% {
+    opacity: 1.0;
+    transform: scale(1.2);
+  }
+
+  100% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+`
+
+export const StyledLogo = styled.img`
+  height: 240px;
+  pointer-events: none;
+  animation: ${pulse} infinite 10s ease;
+`

package/src/styles/Typewriter.styled.ts

@@ -0,0 +1,5 @@
+import { styled } from 'styled-components'
+
+export const StyledText = styled.div`
+  min-height: 1em;
+`

package/src/styles/env.css

@@ -0,0 +1,11 @@
+/* NOTE example of how .css works in this project (see README.md "styles") */
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.card--env {
+  margin: 0.4vh;
+  filter: brightness(0.8);
+}

package/src/styles/theme.ts

@@ -0,0 +1,21 @@
+import { transparentize } from 'polished'
+
+const theme = {
+  font: 'orbitron',
+  colors: {
+    palette: {
+      background: '#081e28',
+      primary: '#fd05a0',
+    },
+    get link() {
+      const link = this.palette.primary
+
+      return {
+        regular: transparentize(0.4, link),
+        hover: transparentize(0.6, link),
+      }
+    },
+  },
+}
+
+export default theme