Skip to content

Commit 45b849a

Browse files
hagenekhagenek
committed
Rudimentary example app made, with script that imports all less files
1 parent 7bddc7f commit 45b849a

File tree

6 files changed

+278
-47
lines changed

6 files changed

+278
-47
lines changed

‎examples/sbanky/README.md

+87-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ npm install -D @vitejs/plugin-react vite typescript @types/react @types/react-do
2121

2222
### Install SB1/FFE design system components
2323
```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-
```
24+
npm install @sb1/ffe-account-selector-react @sb1/ffe-buttons-react @sb1/ffe-cards-react @sb1/ffe-chart-donut-react @sb1/ffe-collapse-react @sb1/ffe-context-message-react @sb1/ffe-core-react @sb1/ffe-datepicker-react @sb1/ffe-dropdown-react @sb1/ffe-feedback-react @sb1/ffe-file-upload-react @sb1/ffe-form-react @sb1/ffe-grid-react @sb1/ffe-icons-react @sb1/ffe-lists-react @sb1/ffe-message-box-react @sb1/ffe-messages-react @sb1/ffe-modals-react @sb1/ffe-chips-react @sb1/ffe-pagination-react @sb1/ffe-searchable-dropdown-react @sb1/ffe-spinner-react @sb1/ffe-symbols-react @sb1/ffe-system-message-react @sb1/ffe-tables-react @sb1/ffe-tabs-react```
2625
2726
### Install LESS support
2827
```bash
@@ -114,6 +113,92 @@ npm pkg set scripts.build="tsc && vite build"
114113
npm pkg set scripts.preview="vite preview"
115114
```
116115

116+
### Vite config file with .less imports automated
117+
118+
```ts
119+
// vite.config.ts
120+
import { defineConfig } from 'vite';
121+
import react from '@vitejs/plugin-react';
122+
import { resolve } from 'path';
123+
import { glob } from 'glob';
124+
125+
// Function to collect all FFE LESS imports
126+
async function collectFfeImports() {
127+
try {
128+
const nodeModulesPath = resolve(__dirname, 'node_modules/@sb1');
129+
console.log('Searching for LESS files in:', nodeModulesPath);
130+
131+
const lessFiles = await glob('**/less/*.less', {
132+
cwd: nodeModulesPath,
133+
ignore: ['**/node_modules/**'],
134+
absolute: false,
135+
});
136+
137+
console.log('Found LESS files:', lessFiles);
138+
139+
// Start with core colors as it's a dependency for other components
140+
const imports = ['@import "@sb1/ffe-core/less/colors";'];
141+
142+
// Add all other FFE imports, excluding core colors
143+
for (const file of lessFiles) {
144+
// Skip if it's colors.less since we already imported it
145+
if (!file.includes('ffe-core/less/colors.less')) {
146+
// Remove the .less extension for the import
147+
const importPath = file.replace('.less', '');
148+
imports.push(`@import "@sb1/${importPath}";`);
149+
}
150+
}
151+
152+
const finalImports = imports.join('\n');
153+
console.log('Generated imports:', finalImports);
154+
155+
return finalImports;
156+
} catch (error) {
157+
console.error('Error collecting FFE imports:', error);
158+
// Return just the core colors import as fallback
159+
return '@import "@sb1/ffe-core/less/colors";';
160+
}
161+
}
162+
163+
export default defineConfig(async () => ({
164+
plugins: [react()],
165+
server: {
166+
port: 3000,
167+
open: true,
168+
},
169+
css: {
170+
preprocessorOptions: {
171+
less: {
172+
javascriptEnabled: true,
173+
math: 'always',
174+
additionalData: await collectFfeImports(),
175+
},
176+
},
177+
},
178+
resolve: {
179+
alias: {
180+
'@': resolve(__dirname, './src'),
181+
'@components': resolve(__dirname, './src/components'),
182+
'@styles': resolve(__dirname, './src/styles'),
183+
},
184+
},
185+
build: {
186+
outDir: 'dist',
187+
sourcemap: true,
188+
rollupOptions: {
189+
output: {
190+
manualChunks: {
191+
'react-vendor': ['react', 'react-dom'],
192+
'sb1-core': ['@sb1/ffe-core', '@sb1/ffe-core-react'],
193+
},
194+
},
195+
},
196+
},
197+
}));
198+
199+
```
200+
201+
117202
### Start development server
118203
```bash
119204
npm run dev

‎examples/sbanky/package.json

+32-7
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,50 @@
22
"name": "sbanky",
33
"version": "1.0.0",
44
"main": "index.js",
5-
"scripts": {
6-
"dev": "vite",
7-
"build": "tsc && vite build",
8-
"preview": "vite preview"
9-
},
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "tsc && vite build",
8+
"preview": "vite preview",
9+
"prebuild": "node scripts/collect-less.js"
10+
},
1011
"keywords": [],
1112
"author": "",
1213
"license": "ISC",
1314
"description": "",
1415
"dependencies": {
16+
"@sb1/ffe-account-selector-react": "^30.1.7",
1517
"@sb1/ffe-buttons": "^19.1.0",
1618
"@sb1/ffe-buttons-react": "^24.0.27",
19+
"@sb1/ffe-cards-react": "^17.6.2",
20+
"@sb1/ffe-chart-donut-react": "^8.1.0",
21+
"@sb1/ffe-chips-react": "^1.2.6",
22+
"@sb1/ffe-collapse-react": "^5.1.0",
23+
"@sb1/ffe-context-message-react": "^12.0.21",
1724
"@sb1/ffe-core": "^29.2.0",
1825
"@sb1/ffe-core-react": "^9.1.8",
26+
"@sb1/ffe-datepicker-react": "^10.1.0",
27+
"@sb1/ffe-dropdown-react": "^8.0.25",
28+
"@sb1/ffe-feedback-react": "^4.2.5",
29+
"@sb1/ffe-file-upload-react": "^12.0.33",
1930
"@sb1/ffe-form": "^30.2.0",
2031
"@sb1/ffe-form-react": "^22.0.1",
2132
"@sb1/ffe-grid": "^15.1.0",
2233
"@sb1/ffe-grid-react": "^15.0.16",
23-
"react": "^19.0.0",
24-
"react-dom": "^19.0.0"
34+
"@sb1/ffe-icons-react": "^11.0.14",
35+
"@sb1/ffe-lists-react": "^12.0.22",
36+
"@sb1/ffe-message-box-react": "^13.0.19",
37+
"@sb1/ffe-messages-react": "^1.1.4",
38+
"@sb1/ffe-modals-react": "^1.1.6",
39+
"@sb1/ffe-pagination-react": "^1.2.30",
40+
"@sb1/ffe-searchable-dropdown-react": "^22.2.3",
41+
"@sb1/ffe-spinner-react": "^9.0.16",
42+
"@sb1/ffe-symbols-react": "^7.0.6",
43+
"@sb1/ffe-system-message-react": "^11.0.24",
44+
"@sb1/ffe-tables-react": "^11.0.18",
45+
"@sb1/ffe-tabs-react": "^10.0.15",
46+
"glob": "^11.0.0",
47+
"less": "^4.2.1",
48+
"react": "^18.3.1",
49+
"react-dom": "^18.3.1"
2550
}
2651
}

‎examples/sbanky/src/App.tsx

+28-13
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,43 @@
1-
import React from 'react';
21
import { Grid, GridRow, GridCol } from '@sb1/ffe-grid-react';
32
import { ButtonsDemo } from './components/ButtonsDemo';
3+
import { Wave } from '@sb1/ffe-core-react';
4+
import { ContextMessage } from '@sb1/ffe-messages-react';
45

5-
const App: React.FC = () => {
6+
export const SbankyWave = () => (
7+
<div className="sbanky-wave-wrapper">
8+
<Wave
9+
className="sbanky-wave"
10+
color="frost-30"
11+
darkmodeColor="svart"
12+
bgColor="vann"
13+
bgDarkmodeColor="svart"
14+
/>
15+
</div>
16+
);
17+
18+
const App = () => {
619
return (
7-
<Grid>
20+
<Grid gap="lg" className="sbanky-home-grid">
21+
{/*<SbankyWave />*/}
822
<GridRow>
9-
<GridCol sm={12} md={6}>
23+
<GridCol md={{ cols: 12 }} lg={{ cols: 12 }}>
24+
<ContextMessage
25+
closeButton={true}
26+
header="Meldingstittel"
27+
type="info"
28+
>
29+
Kontekstuelle meldinger er informasjon som skal gis i en
30+
kontekst
31+
</ContextMessage>
32+
</GridCol>
33+
<GridCol md={{ cols: 12 }} lg={{ cols: 12 }}>
1034
<ButtonsDemo
1135
onPrimaryClick={() => console.log('Primary clicked')}
1236
onSecondaryClick={() =>
1337
console.log('Secondary clicked')
1438
}
1539
/>
1640
</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>
2641
</GridRow>
2742
</Grid>
2843
);

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

+15-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { PrimaryButton, SecondaryButton } from '@sb1/ffe-buttons-react';
3+
import { Grid, GridCol, GridRow } from '@sb1/ffe-grid-react';
34

45
interface ButtonsDemoProps {
56
onPrimaryClick?: () => void;
@@ -11,13 +12,19 @@ export const ButtonsDemo: React.FC<ButtonsDemoProps> = ({
1112
onSecondaryClick,
1213
}) => {
1314
return (
14-
<div>
15-
<PrimaryButton onClick={onPrimaryClick}>
16-
Primary Action
17-
</PrimaryButton>
18-
<SecondaryButton onClick={onSecondaryClick}>
19-
Secondary Action
20-
</SecondaryButton>
21-
</div>
15+
<Grid>
16+
<GridRow>
17+
<GridCol md={{ cols: 6 }} lg={{ cols: 6 }}>
18+
<PrimaryButton onClick={onPrimaryClick}>
19+
Primary Action
20+
</PrimaryButton>
21+
</GridCol>
22+
<GridCol md={{ cols: 6 }} lg={{ cols: 6 }}>
23+
<SecondaryButton onClick={onSecondaryClick}>
24+
Secondary Action
25+
</SecondaryButton>
26+
</GridCol>
27+
</GridRow>
28+
</Grid>
2229
);
2330
};

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

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@import '@sb1/ffe-core/less/spacing';
2+
@import '@sb1/ffe-core/less/breakpoints';
3+
// Variables
4+
@import '@sb1/ffe-core/less/colors';
5+
@import '@sb1/ffe-core/less/breakpoints';
6+
@import '@sb1/ffe-core/less/dimensions';
7+
@import '@sb1/ffe-core/less/motion';
8+
@import '@sb1/ffe-core/less/spacing';
9+
@import '@sb1/ffe-core/less/theme';
10+
11+
// Basic ypography
12+
@import '@sb1/ffe-core/less/typography';
13+
// Accessbility helpers
14+
@import '@sb1/ffe-core/less/accessibility';
15+
16+
.sbanky-home-grid {
17+
background-color: @ffe-farge-frost-30;
18+
height: 100%;
19+
padding: @ffe-spacing-2xl;
20+
min-height: 1000px;
21+
22+
.content {
23+
padding: @ffe-spacing-md;
24+
}
25+
26+
body.native & {
27+
@media (prefers-color-scheme: dark) {
28+
background-color: @ffe-farge-svart;
29+
}
30+
}
31+
}
32+
33+
.sbanky-wave-wrapper {
34+
position: relative;
35+
36+
.sbanky-wave {
37+
position: absolute;
38+
width: 100%;
39+
padding-top: 310px;
40+
41+
@media (min-width: @breakpoint-sm) {
42+
padding-top: 310px;
43+
}
44+
45+
@media (min-width: @breakpoint-lg) {
46+
padding-top: 410px;
47+
}
48+
}
49+
50+
&__thin {
51+
.sbanky-wave {
52+
padding-top: 160px;
53+
54+
body.native & {
55+
padding-top: @ffe-spacing-4xl;
56+
}
57+
}
58+
}
59+
}

0 commit comments

Comments
 (0)