create-application-template 1.3.2 → 1.5.0

package/.husky/pre-commit

@@ -1,5 +1,5 @@
-npm run lint:fix
-npm run stylelint:fix
+npm run lint
+npm run stylelint
 # use below if you wish to use .css (see README.md "styles")
-# npm run stylelint:css:fix
+# npm run stylelint:css
 npm run test

package/.stylelintrc.js

@@ -1,11 +1,14 @@
+// NOTE if you wish to use .css (see README.md "styles")
+// - remove customSyntax and use "npm stylelint:css"
+// - remove 'value-keyword-case', particularly 'ignoreKeywords'
+
 module.exports = {
   extends: [
     'stylelint-config-standard',
     'stylelint-config-recess-order',
     'stylelint-no-unsupported-browser-features',
   ],
-  // NOTE remove customSyntax and use "npm stylelint:css"
-  // if you wish to use .css (see README.md "styles")
+
   customSyntax: 'postcss-styled-components',
   ignoreFiles: [],
   rules: {
@@ -13,5 +16,14 @@ module.exports = {
     'keyframes-name-pattern': null,
     'comment-empty-line-before': 'never',
     'declaration-empty-line-before': 'never',
+    'media-feature-range-notation': 'prefix',
+    'value-keyword-case': [
+      'lower',
+      {
+        'ignoreKeywords': [
+          '/^POSTCSS_styled-components_\\d+$/',
+        ],
+      },
+    ],
   },
 }

package/ccrate/src/components/App.spec.tsx

@@ -1,10 +1,24 @@
-import { render, screen } from '@testing-library/react'
+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 Containerized App Template'
+
+  for (let i = 1; i <= text.length; i++) {
+    act(() => {
+      jest.advanceTimersByTime(50)
+    })
+  }
+
   expect(screen).toMatchSnapshot()
-  expect(screen.getByText(/create containerized app template/i)).toBeInTheDocument()
+  expect(screen.getByText(text)).toBeInTheDocument()
+})
+
+afterEach(() => {
+  jest.useRealTimers()
 })

package/ccrate/src/components/App.tsx

@@ -7,6 +7,7 @@ import { StyledLogo } from '../styles/Logo.styled'
 import '../styles/env.css'
 import logo from '../assets/logo.svg'
 import { Counter } from './Counter'
+import { Typewriter } from './Typewriter'
 
 export const App: FC = () => {
   const TemplateLink: FC = () => {
@@ -26,9 +27,28 @@ export const App: FC = () => {
       <GlobalStyles />
       <app.StyledContainer>
         <app.StyledHeader>
-          <h1>Create Containerized App Template</h1>
-          <h2>An app template containerized via Docker!</h2>
-          <h2>Access the CCrATe template <TemplateLink />...</h2>
+          <h1>
+            <Typewriter
+              text={'Create Containerized App Template'}
+              speed={50}
+            />
+          </h1>
+          <h2>
+            <Typewriter
+              text={'An app template containerized via Docker!'}
+              speed={50}
+              delay={300}
+            />
+          </h2>
+          <h2>
+            <Typewriter
+              text={'Access the CCrATe template'}
+              speed={50}
+              delay={1300}
+            >
+              <TemplateLink />
+            </Typewriter>
+          </h2>
         </app.StyledHeader>
         <app.StyledSection>
           <code className='card--env'>[NODE_ENV={process.env.NODE_ENV}]</code>

package/ccrate/src/styles/Logo.styled.ts

@@ -1,6 +1,6 @@
 import { styled, keyframes } from 'styled-components'
 
-const logoAnimation = keyframes`
+const pulse = keyframes`
   from {
     transform: rotate(15deg);
   }
@@ -16,6 +16,6 @@ export const StyledLogo = styled.img`
   transform-origin: top;
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: ${logoAnimation} 3.5s ease-in-out infinite alternate-reverse;
+    animation: ${pulse} 3.5s ease-in-out infinite alternate-reverse;
   }
 `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-application-template",
-  "version": "1.3.2",
+  "version": "1.5.0",
   "description": "provides a configured application template for you to build upon",
   "main": "index.js",
   "bin": {
@@ -75,6 +75,7 @@
     "@typescript-eslint/parser": "6.5.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
+    "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-require-context": "0.1.1",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "confusing-browser-globals": "1.0.11",

package/src/components/App.spec.tsx

@@ -1,10 +1,24 @@
-import { render, screen } from '@testing-library/react'
+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'
+
+  for (let i = 1; i <= text.length; i++) {
+    act(() => {
+      jest.advanceTimersByTime(50)
+    })
+  }
+
   expect(screen).toMatchSnapshot()
-  expect(screen.getByText(/create application template/i)).toBeInTheDocument()
+  expect(screen.getByText(text)).toBeInTheDocument()
+})
+
+afterEach(() => {
+  jest.useRealTimers()
 })

package/src/components/App.tsx

@@ -7,6 +7,7 @@ import { StyledLogo } from '../styles/Logo.styled'
 import '../styles/env.css'
 import logo from '../assets/logo.svg'
 import { Counter } from './Counter'
+import { Typewriter } from './Typewriter'
 
 export const App: FC = () => {
   const TemplateLink: FC = () => {
@@ -26,9 +27,28 @@ export const App: FC = () => {
       <GlobalStyles />
       <app.StyledContainer>
         <app.StyledHeader>
-          <h1>Create Application Template</h1>
-          <h2>Configured and under your control!</h2>
-          <h2>Access the template <TemplateLink />...</h2>
+          <h1>
+            <Typewriter
+              text={'Create Application Template'}
+              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>

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,52 @@
+import {
+  useState,
+  useEffect,
+  FC,
+  ReactElement,
+  PropsWithChildren,
+} from 'react'
+
+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)
+
+  useEffect(() => {
+    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 (
+    <>
+      {displayedText}
+      {
+        (currentIndex === text.length && children) &&
+          <>&nbsp;{children}</>
+      }
+    </>
+  )
+}

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

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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/styles/App.styled.ts

@@ -1,15 +1,25 @@
-import { styled } from 'styled-components'
+import { styled, keyframes } from 'styled-components'
 
-export const StyledContainer = styled.div(({ theme }) => `
+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.colors.palette.primary};
-  background-color: ${theme.colors.palette.background};
-`)
+  color: ${({ theme }) => theme.colors.palette.primary};
+  background-color: ${({ theme }) => theme.colors.palette.background};
+`
 
 export const StyledHeader = styled.header`
   text-align: center;
@@ -19,13 +29,14 @@ export const StyledSection = styled.section`
   display: flex;
   flex-direction: column;
   margin: 2vh;
+  animation: 3s ${fadeIn} ease;
 `
 
-export const StyledLink = styled.a(({ theme }) => `
-  color: ${theme.colors.link.regular};
+export const StyledLink = styled.a`
+  color: ${({ theme }) => theme.colors.link.regular};
   transition: 0.3s;
 
   &:hover {
-    color: ${theme.colors.link.hover};
+    color: ${({ theme }) => theme.colors.link.hover};
   }
-`)
+`

package/src/styles/Counter.styled.ts

@@ -1,16 +1,16 @@
 import { styled } from 'styled-components'
 
-export const StyledCounter = styled.button(({ theme }) => `
+export const StyledCounter = styled.button`
   height: 40px;
   padding: 10px;
   font-size: 18px;
-  color: ${theme.colors.palette.primary};
-  background-color: ${theme.colors.palette.background};
-  border: 1px solid ${theme.colors.palette.primary};
+  color: ${({ theme }) => theme.colors.palette.primary};
+  background-color: ${({ theme }) => theme.colors.palette.background};
+  border: 1px solid ${({ theme }) => theme.colors.palette.primary};
   border-radius: 8px;
   transition-duration: 0.5s;
 
   &:hover {
     border-radius: 20px;
   }
-`)
+`

package/src/styles/Logo.styled.ts

@@ -1,6 +1,6 @@
 import { styled, keyframes } from 'styled-components'
 
-const logoAnimation = keyframes`
+const pulse = keyframes`
   0% {
     opacity: 0.2;
     transform: scale(0.8);
@@ -20,8 +20,5 @@ const logoAnimation = keyframes`
 export const StyledLogo = styled.img`
   height: 240px;
   pointer-events: none;
-
-  @media (prefers-reduced-motion: no-preference) {
-    animation: ${logoAnimation} infinite 10s ease;
-  }
+  animation: ${pulse} infinite 10s ease;
 `