Skip to content

Commit 7bddc7f

Browse files
hagenekhagenek
committed
made readme for exampleapp
1 parent 21169db commit 7bddc7f

File tree

10 files changed

+242
-4
lines changed

10 files changed

+242
-4
lines changed

‎examples/sbanky/README.md

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
## How this app was setup
2+
3+
```bash
4+
# Create project directory
5+
mkdir sbanky
6+
cd sbanky
7+
```
8+
9+
### Initialize project with npm
10+
11+
```bash
12+
npm init -y
13+
```
14+
15+
### Install core dependencies for React + TypeScript + Vite
16+
```bash
17+
18+
npm install react react-dom
19+
npm install -D @vitejs/plugin-react vite typescript @types/react @types/react-dom
20+
```
21+
22+
### Install SB1/FFE design system components
23+
```bash
24+
npm install @sb1/ffe-core @sb1/ffe-core-react @sb1/ffe-buttons @sb1/ffe-buttons-react @sb1/ffe-form @sb1/ffe-form-react @sb1/ffe-grid @sb1/ffe-grid-react
25+
```
26+
27+
### Install LESS support
28+
```bash
29+
npm install -D less
30+
```
31+
32+
### Create basic project structure
33+
```bash
34+
mkdir -p src/components src/styles
35+
touch src/main.tsx src/App.tsx src/styles/main.less
36+
```
37+
38+
### Create TypeScript configuration
39+
```bash
40+
cat > tsconfig.json << EOF
41+
{
42+
"compilerOptions": {
43+
"target": "ES2020",
44+
"useDefineForClassFields": true,
45+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
46+
"module": "ESNext",
47+
"skipLibCheck": true,
48+
"moduleResolution": "bundler",
49+
"allowImportingTsExtensions": true,
50+
"resolveJsonModule": true,
51+
"isolatedModules": true,
52+
"noEmit": true,
53+
"jsx": "react-jsx",
54+
"strict": true,
55+
"baseUrl": ".",
56+
"paths": {
57+
"@/*": ["src/*"]
58+
}
59+
},
60+
"include": ["src"],
61+
"references": [{ "path": "./tsconfig.node.json" }]
62+
}
63+
EOF
64+
```
65+
66+
### Create Vite configuration
67+
```bash
68+
cat > vite.config.ts << EOF
69+
import { defineConfig } from 'vite'
70+
import react from '@vitejs/plugin-react'
71+
72+
export default defineConfig({
73+
plugins: [react()],
74+
server: {
75+
port: 3000,
76+
open: true
77+
},
78+
css: {
79+
preprocessorOptions: {
80+
less: {
81+
javascriptEnabled: true,
82+
math: 'always',
83+
additionalData: '@import "@sb1/ffe-core/less/colors.less";'
84+
}
85+
}
86+
}
87+
})
88+
EOF
89+
```
90+
91+
### Create index.html
92+
```bash
93+
94+
cat > index.html << EOF
95+
<!DOCTYPE html>
96+
<html lang="en">
97+
<head>
98+
<meta charset="UTF-8" />
99+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
100+
<title>SBanky</title>
101+
</head>
102+
<body>
103+
<div id="root"></div>
104+
<script type="module" src="/src/main.tsx"></script>
105+
</body>
106+
</html>
107+
EOF
108+
```
109+
110+
### Add scripts to package.json
111+
```bash
112+
npm pkg set scripts.dev="vite"
113+
npm pkg set scripts.build="tsc && vite build"
114+
npm pkg set scripts.preview="vite preview"
115+
```
116+
117+
### Start development server
118+
```bash
119+
npm run dev
120+
```bash

‎examples/sbanky/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>SBanky</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎examples/sbanky/package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
"name": "sbanky",
33
"version": "1.0.0",
44
"main": "index.js",
5-
"scripts": {
6-
"test": "echo \"Error: no test specified\" && exit 1"
7-
},
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "tsc && vite build",
8+
"preview": "vite preview"
9+
},
810
"keywords": [],
911
"author": "",
1012
"license": "ISC",

‎examples/sbanky/src/App.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { Grid, GridRow, GridCol } from '@sb1/ffe-grid-react';
3+
import { ButtonsDemo } from './components/ButtonsDemo';
4+
5+
const App: React.FC = () => {
6+
return (
7+
<Grid>
8+
<GridRow>
9+
<GridCol sm={12} md={6}>
10+
<ButtonsDemo
11+
onPrimaryClick={() => console.log('Primary clicked')}
12+
onSecondaryClick={() =>
13+
console.log('Secondary clicked')
14+
}
15+
/>
16+
</GridCol>
17+
<GridCol sm={12} md={6}>
18+
<div>
19+
<h1>Hei, verden!</h1>
20+
<p>
21+
Dette er en enkel demo av FFE-komponenter i en
22+
React-applikasjon.
23+
</p>
24+
</div>
25+
</GridCol>
26+
</GridRow>
27+
</Grid>
28+
);
29+
};
30+
31+
export default App;

‎examples/sbanky/src/components/ButtonsDemo.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { PrimaryButton, SecondaryButton } from '@sb1/ffe-buttons-react';
3+
4+
interface ButtonsDemoProps {
5+
onPrimaryClick?: () => void;
6+
onSecondaryClick?: () => void;
7+
}
8+
9+
export const ButtonsDemo: React.FC<ButtonsDemoProps> = ({
10+
onPrimaryClick,
11+
onSecondaryClick,
12+
}) => {
13+
return (
14+
<div>
15+
<PrimaryButton onClick={onPrimaryClick}>
16+
Primary Action
17+
</PrimaryButton>
18+
<SecondaryButton onClick={onSecondaryClick}>
19+
Secondary Action
20+
</SecondaryButton>
21+
</div>
22+
);
23+
};

‎examples/sbanky/src/main.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import App from './App';
4+
import './styles/main.less';
5+
6+
ReactDOM.createRoot(document.getElementById('root')!).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
);

‎examples/sbanky/src/styles/main.less

Whitespace-only changes.

‎examples/sbanky/tsconfig.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
6+
"module": "ESNext",
7+
"skipLibCheck": true,
8+
"moduleResolution": "bundler",
9+
"allowImportingTsExtensions": true,
10+
"resolveJsonModule": true,
11+
"isolatedModules": true,
12+
"noEmit": true,
13+
"jsx": "react-jsx",
14+
"strict": true,
15+
"noUnusedLocals": true,
16+
"noUnusedParameters": true,
17+
"noFallthroughCasesInSwitch": true,
18+
"baseUrl": ".",
19+
"paths": {
20+
"@/*": ["src/*"],
21+
"@components/*": ["src/components/*"],
22+
"@styles/*": ["src/styles/*"]
23+
}
24+
},
25+
"include": ["src"],
26+
"references": [{ "path": "./tsconfig.node.json" }]
27+
}

‎examples/sbanky/tsconfig.node.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"skipLibCheck": true,
5+
"module": "ESNext",
6+
"moduleResolution": "bundler",
7+
"allowSyntheticDefaultImports": true
8+
},
9+
"include": ["vite.config.ts"]
10+
}

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,15 @@
6666
"@types/react-dom": "18.3.0",
6767
"@typescript-eslint/eslint-plugin": "^7.8.0",
6868
"@typescript-eslint/parser": "^7.8.0",
69+
"@vitejs/plugin-react": "^4.3.4",
6970
"case": "^1.5.5",
7071
"eslint": "^8.57.0",
7172
"eslint-config-prettier": "^9.1.0",
7273
"eslint-plugin-prettier": "^5.1.3",
7374
"eslint-plugin-storybook": "^0.8.0",
7475
"husky": "^9.0.11",
7576
"lerna": "^8.1.3",
77+
"less": "^4.2.1",
7678
"lint-staged": "^15.2.2",
7779
"mkdirp": "^3.0.1",
7880
"npm-run-all": "^4.1.5",
@@ -82,7 +84,8 @@
8284
"react-dom": "^18.2.0",
8385
"rimraf": "^6.0.1",
8486
"storybook": "^8.2.7",
85-
"typescript": "^5.7.2"
87+
"typescript": "^5.7.2",
88+
"vite": "^6.0.7"
8689
},
8790
"eslintConfig": {
8891
"extends": [

0 commit comments

Comments
 (0)