Skip to content

Commit a392e52

Browse files
cassiotakaradacassiotakarada
committed
feat: installing dependencies and creating first component
1 parent f382d1b commit a392e52

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+13004
-128
lines changed

‎.gitignore

Lines changed: 17 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -4,133 +4,23 @@ logs
44
npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
7+
pnpm-debug.log*
78
lerna-debug.log*
8-
.pnpm-debug.log*
99

10-
# Diagnostic reports (https://nodejs.org/api/report.html)
11-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12-
13-
# Runtime data
14-
pids
15-
*.pid
16-
*.seed
17-
*.pid.lock
18-
19-
# Directory for instrumented libs generated by jscoverage/JSCover
20-
lib-cov
21-
22-
# Coverage directory used by tools like istanbul
23-
coverage
24-
*.lcov
25-
26-
# nyc test coverage
27-
.nyc_output
28-
29-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30-
.grunt
31-
32-
# Bower dependency directory (https://bower.io/)
33-
bower_components
34-
35-
# node-waf configuration
36-
.lock-wscript
37-
38-
# Compiled binary addons (https://nodejs.org/api/addons.html)
39-
build/Release
40-
41-
# Dependency directories
42-
node_modules/
43-
jspm_packages/
44-
45-
# Snowpack dependency directory (https://snowpack.dev/)
46-
web_modules/
47-
48-
# TypeScript cache
49-
*.tsbuildinfo
50-
51-
# Optional npm cache directory
52-
.npm
53-
54-
# Optional eslint cache
55-
.eslintcache
56-
57-
# Optional stylelint cache
58-
.stylelintcache
59-
60-
# Microbundle cache
61-
.rpt2_cache/
62-
.rts2_cache_cjs/
63-
.rts2_cache_es/
64-
.rts2_cache_umd/
65-
66-
# Optional REPL history
67-
.node_repl_history
68-
69-
# Output of 'npm pack'
70-
*.tgz
71-
72-
# Yarn Integrity file
73-
.yarn-integrity
74-
75-
# dotenv environment variable files
76-
.env
77-
.env.development.local
78-
.env.test.local
79-
.env.production.local
80-
.env.local
81-
82-
# parcel-bundler cache (https://parceljs.org/)
83-
.cache
84-
.parcel-cache
85-
86-
# Next.js build output
87-
.next
88-
out
89-
90-
# Nuxt.js build / generate output
91-
.nuxt
10+
node_modules
9211
dist
93-
94-
# Gatsby files
95-
.cache/
96-
# Comment in the public line in if your project uses Gatsby and not Next.js
97-
# https://nextjs.org/blog/next-9-1#public-directory-support
98-
# public
99-
100-
# vuepress build output
101-
.vuepress/dist
102-
103-
# vuepress v2.x temp and cache directory
104-
.temp
105-
.cache
106-
107-
# vitepress build output
108-
**/.vitepress/dist
109-
110-
# vitepress cache directory
111-
**/.vitepress/cache
112-
113-
# Docusaurus cache and generated files
114-
.docusaurus
115-
116-
# Serverless directories
117-
.serverless/
118-
119-
# FuseBox cache
120-
.fusebox/
121-
122-
# DynamoDB Local files
123-
.dynamodb/
124-
125-
# TernJS port file
126-
.tern-port
127-
128-
# Stores VSCode versions used for testing VSCode extensions
129-
.vscode-test
130-
131-
# yarn v2
132-
.yarn/cache
133-
.yarn/unplugged
134-
.yarn/build-state.yml
135-
.yarn/install-state.gz
136-
.pnp.*
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
*storybook.log

‎.storybook/main.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { StorybookConfig } from '@storybook/react-vite';
2+
3+
const config: StorybookConfig = {
4+
"stories": [
5+
"../src/**/*.mdx",
6+
"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
7+
],
8+
"addons": [
9+
"@storybook/addon-essentials",
10+
"@storybook/addon-onboarding",
11+
"@chromatic-com/storybook",
12+
"@storybook/experimental-addon-test"
13+
],
14+
"framework": {
15+
"name": "@storybook/react-vite",
16+
"options": {}
17+
}
18+
};
19+
export default config;

‎.storybook/preview.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Preview } from '@storybook/react'
2+
3+
const preview: Preview = {
4+
parameters: {
5+
controls: {
6+
matchers: {
7+
color: /(background|color)$/i,
8+
date: /Date$/i,
9+
},
10+
},
11+
},
12+
};
13+
14+
export default preview;

‎.storybook/vitest.setup.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { beforeAll } from 'vitest';
2+
import { setProjectAnnotations } from '@storybook/react';
3+
import * as projectAnnotations from './preview';
4+
5+
// This is an important step to apply the right configuration when testing your stories.
6+
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
7+
const project = setProjectAnnotations([projectAnnotations]);
8+
9+
beforeAll(project.beforeAll);

‎README.md

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,94 @@
1-
# site-webapp-design-patter
1+
# Design Patterns Component Library – React + TypeScript + Vite
2+
3+
A reusable component library following design patterns with a focus on accessibility, clean code (MVC structure), Jest unit tests, and Storybook documentation.
4+
5+
## 🧱 Stack
6+
7+
- Vite
8+
- React + TypeScript
9+
- Styled Components
10+
- Jest + Testing Library + Snapshots
11+
- Storybook
12+
- ESLint + Prettier
13+
14+
---
15+
16+
## 🚀 Getting Started
17+
18+
```bash
19+
# Install dependencies
20+
npm install
21+
22+
# Start the Vite dev server
23+
npm run dev
24+
25+
# Run unit tests
26+
npm run test:unit
27+
28+
# Update snapshots
29+
npm run test:unit -- -u
30+
31+
# Launch Storybook
32+
npm run storybook
33+
34+
tests/
35+
├── setupTests.ts
36+
└── __mocks__/fileMock.js
37+
🧪 Testing
38+
Framework: Jest
39+
40+
Matchers: @testing-library/jest-dom
41+
42+
Snapshot testing enabled
43+
44+
Static file imports (like .png) are mocked using fileMock.js
45+
46+
npm run test:unit # Run all unit tests
47+
npm run test:unit -- -u # Update snapshots
48+
📚 Storybook
49+
50+
npm run storybook
51+
All reusable components are documented
52+
53+
Stories live alongside each component in .stories.tsx files
54+
55+
🔧 TypeScript Paths
56+
57+
"paths": {
58+
"@components/*": ["src/components/*"],
59+
"@assets/*": ["src/assets/*"],
60+
"@hooks/*": ["src/hooks/*"],
61+
"@models/*": ["src/models/*"],
62+
"@utils/*": ["src/utils/*"]
63+
}
64+
📏 ESLint Type-Aware Setup (Optional)
65+
66+
export default tseslint.config({
67+
extends: [
68+
...tseslint.configs.recommendedTypeChecked,
69+
...tseslint.configs.strictTypeChecked,
70+
...tseslint.configs.stylisticTypeChecked,
71+
],
72+
languageOptions: {
73+
parserOptions: {
74+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
75+
tsconfigRootDir: import.meta.dirname,
76+
},
77+
},
78+
})
79+
🔍 React-Specific Lint Plugins
80+
81+
import reactX from 'eslint-plugin-react-x'
82+
import reactDom from 'eslint-plugin-react-dom'
83+
84+
export default tseslint.config({
85+
plugins: {
86+
'react-x': reactX,
87+
'react-dom': reactDom,
88+
},
89+
rules: {
90+
...reactX.configs['recommended-typescript'].rules,
91+
...reactDom.configs.recommended.rules,
92+
},
93+
})
94+
```

‎eslint.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎jest.config.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { Config } from "jest";
2+
3+
const config: Config = {
4+
preset: "ts-jest",
5+
testEnvironment: "jest-environment-jsdom",
6+
setupFilesAfterEnv: ["<rootDir>/tests/setupTests.ts"],
7+
moduleNameMapper: {
8+
"^@components/(.*)$": "<rootDir>/src/components/$1",
9+
"^@hooks/(.*)$": "<rootDir>/src/hooks/$1",
10+
"^@utils/(.*)$": "<rootDir>/src/utils/$1",
11+
"^@assets/(.*)$": "<rootDir>/src/assets/$1",
12+
"\\.(jpg|jpeg|png|svg)$": "<rootDir>/tests/__mocks__/file-mock.ts",
13+
},
14+
globals: {
15+
"ts-jest": {
16+
tsconfig: "<rootDir>/tsconfig.test.json",
17+
},
18+
},
19+
};
20+
21+
export default config;

0 commit comments

Comments
 (0)