create-application-template 0.8.1 → 0.9.1

package/.babelrc

@@ -17,5 +17,11 @@
       },
       "react-refresh/babel"
     ]
-  ]
+  ],
+  "env": {
+    "test": {
+      // to mock webpack's require.context in jest
+      "plugins": ["transform-require-context"]
+    }
+  }
 }

package/.husky/pre-commit

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

package/.stylelintrc.js

@@ -3,6 +3,9 @@ module.exports = {
     'stylelint-config-standard',
     'stylelint-config-recess-order',
   ],
+  // NOTE remove customSyntax and use "npm stylelint:css"
+  // if you wish to use .css (see README.md "styles")
+  customSyntax: 'postcss-styled-components',
   ignoreFiles: [],
   rules: {
     'selector-class-pattern': null,

package/README.md

@@ -62,6 +62,19 @@ css linting rules are in `.stylelintrc.js`; install the Stylelint pluggin if usi
 npm run stylelint
 ```
 
+## styles
+styling is done using the style-components module, but straight CSS is supported
+
+after instillation it is recommended to proceed using styled-components or CSS, but not both
+
+if you proceed with styled-components: 
+  - remove the single `.css` example in `/src/styles/`
+  - that's it!
+
+if you prefer CSS: 
+  - alter `.stylintrc.js` and `.husky/pre-commint` per the files' notes
+  - remove `.ts` files from `/src/styles/` or "recreate" them in `.css`
+
 ## environmental settings
 access environmental variables in code like so  
 ```

package/jest/fontTransform.js

@@ -0,0 +1,12 @@
+// turning font file imports into empty objects
+
+module.exports = {
+  process() {
+    return {
+      code: 'module.exports = {}',
+    }
+  },
+  getCacheKey() {
+    return 'fontTransform'
+  },
+}

package/jest.config.js

@@ -36,6 +36,7 @@ module.exports = async () => {
       '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': 'babel-jest',
       '^.+\\.css$': '<rootDir>/jest/cssTransform.js',
       '^.+\\.svg$': '<rootDir>/jest/svgTransform.js',
+      '^.+\\.woff2$': '<rootDir>/jest/fontTransform.js',
     },
     // transformIgnorePatterns: [
     //   '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-application-template",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "provides a configured application template for you to build upon",
   "main": "index.js",
   "bin": {
@@ -15,14 +15,17 @@
     "dev": "concurrently \"npm run test:watch\" \"npm run start\"",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx,json}\"",
     "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx,json}\"",
-    "stylelint": "npx stylelint \"src/**/*.css\"",
-    "stylelint:fix": "npx stylelint --fix \"src/**/*.css\"",
+    "stylelint": "npx stylelint \"src/**/*.{js,ts}\"",
+    "stylelint:fix": "npx stylelint --fix \"src/**/*.{js,ts}\"",
+    "stylelint:css": "npx stylelint \"src/**/*.css\"",
+    "stylelint:css:fix": "npx stylelint --fix \"src/**/*.css\"",
     "prepare": "husky"
   },
   "keywords": [
     "template",
     "react",
     "typescript",
+    "styled-components",
     "webpack",
     "jest",
     "eslint",
@@ -45,6 +48,7 @@
     "husky": "9.0.11",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "styled-components": "6.1.12",
     "yargs": "17.7.2"
   },
   "devDependencies": {
@@ -62,11 +66,13 @@
     "@types/node": "20.12.12",
     "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0",
+    "@types/styled-components": "5.1.34",
     "@types/webpack-env": "1.18.5",
     "@typescript-eslint/eslint-plugin": "6.5.0",
     "@typescript-eslint/parser": "6.5.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
+    "babel-plugin-transform-require-context": "0.1.1",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "confusing-browser-globals": "1.0.11",
     "copy-webpack-plugin": "12.0.2",
@@ -84,8 +90,10 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-extended": "4.0.2",
+    "jest-styled-components": "7.2.0",
     "jest-watch-typeahead": "2.2.2",
     "mini-css-extract-plugin": "2.9.0",
+    "postcss-styled-components": "0.2.1",
     "react-refresh": "0.14.2",
     "style-loader": "4.0.0",
     "stylelint": "16.5.0",

package/src/app.d.ts

@@ -1,3 +1,4 @@
+declare module '*.woff2'
 declare module '*.png'
 declare module '*.svg' {
   const content: string

package/src/components/App.spec.tsx

@@ -1,8 +1,10 @@
 import { render, screen } from '@testing-library/react'
+import 'jest-styled-components'
 import { App } from './App'
 
 test('renders title', () => {
   render(<App />)
 
+  expect(screen).toMatchSnapshot()
   expect(screen.getByText(/create application template/i)).toBeInTheDocument()
 })

package/src/components/App.tsx

@@ -1,25 +1,33 @@
-import '../styles/app.css'
-import logo from '../assets/cat.svg'
+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 cat from '../assets/cat.svg'
 import { Counter } from './Counter'
 
 export const App = () => {
   return (
-    <div className='container--main'>
-      <header className='header--wrapper'>
-        <h1>Create Application Template</h1>
-        <h2>Configured and under your control!</h2>
-        <h2>Access the template <a href='https://www.npmjs.com/package/create-application-template' rel='noreferrer' target='_blank'>here</a>...</h2>
-      </header>
-      <section className='section--wrapper'>
-        <code className='card--env'>[NODE_ENV={process.env.NODE_ENV}]</code>
-        <code className='card--env'>[EXAMPLE={process.env.EXAMPLE}]</code>
-      </section>
-      <section className='section--wrapper'>
-        <img src={logo} className='logo--app' alt='logo' />
-      </section>
-      <section className='section--wrapper'>
-        <Counter />
-      </section>
-    </div>
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <app.StyledContainer>
+        <app.StyledHeader>
+          <h1>Create Application Template</h1>
+          <h2>Configured and under your control!</h2>
+          <h2>Access the template <app.StyledLink href='https://www.npmjs.com/package/create-application-template' rel='noreferrer' target='_blank'>here</app.StyledLink>...</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={cat} alt='logo'/>
+        </app.StyledSection>
+        <app.StyledSection>
+          <Counter />
+        </app.StyledSection>
+      </app.StyledContainer>
+    </ThemeProvider>
   )
 }

package/src/components/Counter.spec.tsx

@@ -1,9 +1,16 @@
 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(<Counter />)
+  render(
+    <ThemeProvider theme={theme}>
+      <Counter />
+    </ThemeProvider>
+  )
   const button = await screen.findByRole('button', { name: /count/i })
 
   const user = userEvent.setup()
@@ -13,3 +20,19 @@ test('count increases per click', async () => {
   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

@@ -1,5 +1,5 @@
-import '../styles/counter.css'
 import { FC, useState } from 'react'
+import { StyledCounter } from '../styles/Counter.styled'
 
 // NOTE update count then edit App.tsx... thanks
 // to ReactRefreshWebpackPlugin state is preserved
@@ -13,9 +13,9 @@ export const Counter: FC = (): JSX.Element => {
 
   return (
     <div>
-      <button id='counter' onClick={handleClickCounter}>
+      <StyledCounter onClick={handleClickCounter}>
         count:&nbsp;{count}
-      </button>
+      </StyledCounter>
     </div>
   )
 }

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

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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/{styles/counter.css → components/__snapshots__/Counter.spec.tsx.snap}

@@ -1,4 +1,7 @@
-button#counter {
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styled with palette colors 1`] = `
+.c0 {
   height: 40px;
   padding: 10px;
   font-size: 18px;
@@ -9,6 +12,14 @@ button#counter {
   transition-duration: 0.5s;
 }
 
-button#counter:hover {
+.c0:hover {
   border-radius: 20px;
 }
+
+<button
+  class="c0"
+>
+  count: 
+  0
+</button>
+`;

package/src/index.html

@@ -7,7 +7,7 @@
     <meta
       name='Create Application Template'
       content='provides a configured application template for you to build upon'
-      keywords='template, react, typescript, webpack, jest, eslint, stylelint, javascript'
+      keywords='template, react, typescript, styled-components, webpack, jest, eslint, stylelint, javascript'
     />
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

package/src/index.tsx

@@ -1,6 +1,5 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './styles/index.css'
 import { App } from './components/App'
 
 const container = document.getElementById('root')

package/src/styles/App.styled.ts

@@ -0,0 +1,27 @@
+import { styled } from 'styled-components'
+
+export const StyledContainer = styled.div(({ theme }) => `
+  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};
+`)
+
+export const StyledHeader = styled.header `
+  text-align: center;
+`
+
+export const StyledSection = styled.section `
+  display: flex;
+  flex-direction: column;
+  margin: 2vh;
+`
+
+export const StyledLink = styled.a(({ theme }) => `
+  color: ${theme.colors.palette.primary};
+  opacity: 0.6;
+`)

package/src/styles/Counter.styled.ts

@@ -0,0 +1,16 @@
+import { styled } from 'styled-components'
+
+export const StyledCounter = styled.button(({ theme }) => `
+  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};
+  border-radius: 8px;
+  transition-duration: 0.5s;
+
+  &:hover {
+    border-radius: 20px;
+  }
+`)

package/src/styles/Global.ts

@@ -0,0 +1,18 @@
+import { createGlobalStyle } from 'styled-components'
+import Exo2 from '../fonts/Exo2-Regular.woff2'
+
+const GlobalStyles = createGlobalStyle`
+  @font-face {
+    font-family: '${({ theme }) => theme.font}';
+    src: url('${Exo2}') 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,27 @@
+import { styled, keyframes } from 'styled-components'
+
+const logoAnimation = 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;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${logoAnimation} infinite 10s ease;
+  }
+`

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,12 @@
+const theme = {
+  font: 'exo2',
+  colors: {
+    palette: {
+      background: '#454145',
+      primary: '#cec2eb',
+    },
+    get link() { return this.palette.primary },
+  },
+}
+
+export default theme

package/tsconfig.json

@@ -21,6 +21,7 @@
       "@types/react-dom",
       "@types/jest",
       "@types/webpack-env",
+      "@types/styled-components",
       "jest-extended",
       "@testing-library/jest-dom"
     ],

package/src/styles/app.css

@@ -1,58 +0,0 @@
-.container--main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  font-size: max(1em, 18px);
-  color: #cec2eb;
-  background-color: #454145;
-}
-
-.header--wrapper {
-  text-align: center;
-}
-
-.section--wrapper {
-  display: flex;
-  flex-direction: column;
-  margin: 2vh;
-}
-
-.logo--app {
-  height: 240px;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .logo--app {
-    animation: logo--app-pulse infinite 10s ease;
-  }
-}
-
-@keyframes logo--app-pulse {
-  0% {
-    opacity: 0.2;
-    transform: scale(0.8);
-  }
-
-  50% {
-    opacity: 1.0;
-    transform: scale(1.2);
-  }
-
-  100% {
-    opacity: 0.2;
-    transform: scale(0.8);
-  }
-}
-
-.card--env {
-  margin: 0.4vh;
-  filter: brightness(0.8);
-}
-
-a {
-  color: #cec2eb;
-  opacity: 0.6;
-}

package/src/styles/index.css

@@ -1,16 +0,0 @@
-@font-face {
-  font-family: 'exo2-regular';
-  src: url('../fonts/Exo2-Regular.woff2');
-}
-
-body {
-  margin: 0;
-  font-family: 'exo2-regular', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}