🚚(frontend) rename folder app to apps
The folder app will be used for more than one app, so it was renamed to apps.
This commit is contained in:
Anthony LC
4
src/frontend/apps/desk/.env.development
Normal file
4
src/frontend/apps/desk/.env.development
Normal file
@@ -0,0 +1,4 @@
|
||||
NEXT_PUBLIC_API_URL=http://localhost:8071/api/v1.0/
|
||||
NEXT_PUBLIC_KEYCLOAK_URL=http://localhost:8080/
|
||||
NEXT_PUBLIC_KEYCLOAK_REALM=people
|
||||
NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=people-front
|
||||
117
src/frontend/apps/desk/.eslintrc.js
Normal file
117
src/frontend/apps/desk/.eslintrc.js
Normal file
@@ -0,0 +1,117 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
'next',
|
||||
'plugin:prettier/recommended',
|
||||
'plugin:@tanstack/eslint-plugin-query/recommended',
|
||||
],
|
||||
settings: {
|
||||
next: {
|
||||
rootDir: __dirname,
|
||||
},
|
||||
},
|
||||
parserOptions: {
|
||||
babelOptions: {
|
||||
presets: [require.resolve('next/babel')],
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'block-scoped-var': 'error',
|
||||
'import/no-duplicates': ['error', { considerQueryString: false }],
|
||||
'import/order': [
|
||||
'error',
|
||||
{
|
||||
alphabetize: {
|
||||
order: 'asc',
|
||||
},
|
||||
groups: [
|
||||
'builtin',
|
||||
'external',
|
||||
'internal',
|
||||
'parent',
|
||||
'sibling',
|
||||
'index',
|
||||
],
|
||||
pathGroups: [
|
||||
{
|
||||
pattern: '@/**',
|
||||
group: 'internal',
|
||||
},
|
||||
],
|
||||
pathGroupsExcludedImportTypes: ['builtin'],
|
||||
'newlines-between': 'always',
|
||||
},
|
||||
],
|
||||
'no-alert': 'error',
|
||||
'no-unused-vars': [
|
||||
'error',
|
||||
{ varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
|
||||
],
|
||||
'react-hooks/rules-of-hooks': 'error',
|
||||
'react-hooks/exhaustive-deps': 'error',
|
||||
'sort-imports': [
|
||||
'error',
|
||||
{
|
||||
ignoreDeclarationSort: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.ts', '*.tsx'],
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:@typescript-eslint/recommended-requiring-type-checking',
|
||||
],
|
||||
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./tsconfig.json'],
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/no-explicit-any': 'error',
|
||||
'@typescript-eslint/no-non-null-assertion': 'error',
|
||||
'sort-imports': [
|
||||
'error',
|
||||
{
|
||||
ignoreDeclarationSort: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['*.spec.*', '*.test.*', '**/__mock__/**/*'],
|
||||
plugins: ['jest'],
|
||||
extends: ['plugin:jest/recommended', 'plugin:testing-library/react'],
|
||||
rules: {
|
||||
'@typescript-eslint/ban-types': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||
'@typescript-eslint/no-unsafe-argument': 'off',
|
||||
'@typescript-eslint/no-unsafe-assignment': 'off',
|
||||
'@typescript-eslint/no-unsafe-call': 'off',
|
||||
'@typescript-eslint/no-unsafe-member-access': 'off',
|
||||
'@typescript-eslint/no-unsafe-return': 'off',
|
||||
'testing-library/no-await-sync-events': [
|
||||
'error',
|
||||
{ eventModules: ['fire-event'] },
|
||||
],
|
||||
'testing-library/await-async-events': [
|
||||
'error',
|
||||
{
|
||||
eventModule: 'userEvent',
|
||||
},
|
||||
],
|
||||
'testing-library/no-manual-cleanup': 'off',
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'error',
|
||||
{ varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
|
||||
],
|
||||
'react/display-name': 0,
|
||||
'jest/expect-expect': 'error',
|
||||
'@typescript-eslint/unbound-method': 'off',
|
||||
'jest/unbound-method': 'error',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
36
src/frontend/apps/desk/.gitignore
vendored
Normal file
36
src/frontend/apps/desk/.gitignore
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
7
src/frontend/apps/desk/.prettierrc.js
Normal file
7
src/frontend/apps/desk/.prettierrc.js
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
semi: true,
|
||||
trailingComma: 'all',
|
||||
singleQuote: true,
|
||||
printWidth: 80,
|
||||
tabWidth: 2,
|
||||
};
|
||||
36
src/frontend/apps/desk/README.md
Normal file
36
src/frontend/apps/desk/README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
179
src/frontend/apps/desk/cunningham.ts
Normal file
179
src/frontend/apps/desk/cunningham.ts
Normal file
@@ -0,0 +1,179 @@
|
||||
const config = {
|
||||
themes: {
|
||||
default: {
|
||||
theme: {
|
||||
colors: {
|
||||
'primary-100': '#EDF5FA',
|
||||
'primary-150': '#E5EEFA',
|
||||
'info-150': '#E5EEFA',
|
||||
},
|
||||
font: {
|
||||
sizes: {
|
||||
ml: '0.938rem',
|
||||
xl: '1.50rem',
|
||||
t: '0.6875rem',
|
||||
s: '0.75rem',
|
||||
h1: '2.2rem',
|
||||
h2: '1.7rem',
|
||||
h3: '1.37rem',
|
||||
h4: '1.15rem',
|
||||
h5: '1rem',
|
||||
h6: '0.87rem',
|
||||
},
|
||||
weights: {
|
||||
thin: 100,
|
||||
extrabold: 800,
|
||||
black: 900,
|
||||
},
|
||||
},
|
||||
spacings: {
|
||||
'0': '0',
|
||||
none: '0',
|
||||
auto: 'auto',
|
||||
bx: '2.2rem',
|
||||
full: '100%',
|
||||
},
|
||||
breakpoints: {
|
||||
xxs: '320px',
|
||||
xs: '480px',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
datagrid: {
|
||||
header: {
|
||||
weight: 'var(--c--theme--font--weights--extrabold)',
|
||||
size: 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
cell: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
size: 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
},
|
||||
'forms-checkbox': {
|
||||
'background-color': {
|
||||
hover: '#055fd214',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
'forms-datepicker': {
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-datepicker--border-radius)',
|
||||
focus: 'var(--c--components--forms-datepicker--border-radius)',
|
||||
},
|
||||
},
|
||||
'forms-field': {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
width: 'auto',
|
||||
},
|
||||
'forms-input': {
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
},
|
||||
'forms-labelledbox': {
|
||||
'label-color': {
|
||||
small: 'var(--c--theme--colors--primary-500)',
|
||||
big: {
|
||||
disabled: 'var(--c--theme--colors--greyscale-400)',
|
||||
},
|
||||
},
|
||||
},
|
||||
'forms-select': {
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-select--border-radius)',
|
||||
focus: 'var(--c--components--forms-select--border-radius)',
|
||||
},
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
'item-background-color': {
|
||||
hover: 'var(--c--theme--colors--primary-100)',
|
||||
},
|
||||
'item-color': 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
},
|
||||
'forms-switch': {
|
||||
'accent-color': 'var(--c--theme--colors--primary-400)',
|
||||
},
|
||||
'forms-textarea': {
|
||||
'border-color': 'var(--c--components--forms-textarea--border-color)',
|
||||
'border-color-hover':
|
||||
'var(--c--components--forms-textarea--border-color)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-textarea--border-radius)',
|
||||
focus: 'var(--c--components--forms-textarea--border-radius)',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
disabled: {
|
||||
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
button: {
|
||||
'border-radius': {
|
||||
active: 'var(--c--components--button--border-radius)',
|
||||
},
|
||||
'medium-height': 'auto',
|
||||
'small-height': 'auto',
|
||||
success: {
|
||||
color: 'white',
|
||||
'color-disabled': 'white',
|
||||
'color-hover': 'white',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--success-600)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-300)',
|
||||
'color-hover': 'var(--c--theme--colors--success-800)',
|
||||
},
|
||||
},
|
||||
danger: {
|
||||
'color-hover': 'white',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--danger-400)',
|
||||
'color-hover': 'var(--c--theme--colors--danger-500)',
|
||||
'color-disabled': 'var(--c--theme--colors--danger-100)',
|
||||
},
|
||||
},
|
||||
primary: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'color-active': 'var(--c--theme--colors--primary-text)',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--primary-400)',
|
||||
'color-active': 'var(--c--theme--colors--primary-500)',
|
||||
},
|
||||
border: {
|
||||
'color-active': 'transparent',
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
background: {
|
||||
color: 'white',
|
||||
'color-hover': 'var(--c--theme--colors--primary-700)',
|
||||
},
|
||||
border: {
|
||||
color: 'var(--c--theme--colors--primary-200)',
|
||||
},
|
||||
},
|
||||
tertiary: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
|
||||
background: {
|
||||
'color-hover': 'var(--c--theme--colors--primary-100)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
color: 'white',
|
||||
background: {
|
||||
color: '#b3cef0',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
15
src/frontend/apps/desk/jest.config.ts
Normal file
15
src/frontend/apps/desk/jest.config.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { Config } from 'jest';
|
||||
import nextJest from 'next/jest.js';
|
||||
|
||||
const createJestConfig = nextJest({
|
||||
dir: './',
|
||||
});
|
||||
|
||||
// Add any custom config to be passed to Jest
|
||||
const config: Config = {
|
||||
coverageProvider: 'v8',
|
||||
testEnvironment: 'jsdom',
|
||||
};
|
||||
|
||||
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
|
||||
export default createJestConfig(config);
|
||||
14
src/frontend/apps/desk/next.config.js
Normal file
14
src/frontend/apps/desk/next.config.js
Normal file
@@ -0,0 +1,14 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
trailingSlash: true,
|
||||
async rewrites() {
|
||||
return [
|
||||
{
|
||||
source: '/api/:slug*/',
|
||||
destination: `${process.env.NEXT_PUBLIC_API_URL}:slug*/`, // Matched parameters can be used in the destination
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
51
src/frontend/apps/desk/package.json
Normal file
51
src/frontend/apps/desk/package.json
Normal file
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "app-desk",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "prettier --check . && yarn stylelint && next build",
|
||||
"build-theme": "cunningham -g css,ts -o src/cunningham --utility-classes",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"prettier": "prettier --write .",
|
||||
"stylelint": "stylelint \"**/*.css\"",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@openfun/cunningham-react": "2.4.0",
|
||||
"@tanstack/react-query": "5.17.1",
|
||||
"next": "14.0.4",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"zustand": "4.4.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tanstack/eslint-plugin-query": "5.17.1",
|
||||
"@tanstack/react-query-devtools": "5.17.12",
|
||||
"@testing-library/jest-dom": "6.2.0",
|
||||
"@testing-library/react": "14.1.2",
|
||||
"@types/jest": "29.5.11",
|
||||
"@types/node": "20.10.8",
|
||||
"@types/react": "18.2.47",
|
||||
"@types/react-dom": "18.2.18",
|
||||
"@typescript-eslint/eslint-plugin": "6.18.1",
|
||||
"eslint": "8.0.1",
|
||||
"eslint-config-next": "14.0.4",
|
||||
"eslint-config-prettier": "9.1.0",
|
||||
"eslint-plugin-jest": "27.6.2",
|
||||
"eslint-plugin-prettier": "5.1.2",
|
||||
"eslint-plugin-testing-library": "6.2.0",
|
||||
"fetch-mock": "9.11.0",
|
||||
"jest": "29.7.0",
|
||||
"jest-environment-jsdom": "29.7.0",
|
||||
"keycloak-js": "23.0.3",
|
||||
"node-fetch": "2.7.0",
|
||||
"prettier": "3.1.1",
|
||||
"stylelint": "16.1.0",
|
||||
"stylelint-config-standard": "36.0.0",
|
||||
"stylelint-prettier": "5.0.0",
|
||||
"typescript": "5.3.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import fetchMock from 'fetch-mock';
|
||||
|
||||
import { WrapperReactQuery } from '@/tests/utils';
|
||||
|
||||
import { Teams } from '..';
|
||||
|
||||
describe('Teams', () => {
|
||||
afterEach(() => {
|
||||
fetchMock.restore();
|
||||
});
|
||||
|
||||
it('checks Teams rendering', async () => {
|
||||
fetchMock.mock(`/api/teams/`, {
|
||||
results: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Team 1',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Team 2',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
render(<Teams />, { wrapper: WrapperReactQuery });
|
||||
|
||||
expect(screen.getByRole('status')).toBeInTheDocument();
|
||||
|
||||
expect(
|
||||
await screen.findByRole('button', {
|
||||
name: 'Create Team',
|
||||
}),
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText(/Team 1/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Team 2/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
47
src/frontend/apps/desk/src/app/Teams/api/useCreateTeam.tsx
Normal file
47
src/frontend/apps/desk/src/app/Teams/api/useCreateTeam.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import useAuthStore from '@/auth/useAuthStore';
|
||||
|
||||
import { KEY_LIST_TEAM } from './useTeams';
|
||||
|
||||
type CreateTeamResponse = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
export interface CreateTeamResponseError {
|
||||
detail: string;
|
||||
}
|
||||
|
||||
export const createTeam = async (name: string) => {
|
||||
const { token } = useAuthStore.getState();
|
||||
|
||||
const response = await fetch(`/api/teams/`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Couldn't create team: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export function useCreateTeam() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation<CreateTeamResponse, CreateTeamResponseError, string>({
|
||||
mutationFn: createTeam,
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: [KEY_LIST_TEAM],
|
||||
exact: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
47
src/frontend/apps/desk/src/app/Teams/api/useTeams.tsx
Normal file
47
src/frontend/apps/desk/src/app/Teams/api/useTeams.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { UseQueryOptions, useQuery } from '@tanstack/react-query';
|
||||
|
||||
import useAuthStore from '@/auth/useAuthStore';
|
||||
import { APIList } from '@/types/api';
|
||||
|
||||
interface TeamResponse {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
type TeamsResponse = APIList<TeamResponse>;
|
||||
export interface TeamsResponseError {
|
||||
detail: string;
|
||||
}
|
||||
|
||||
export const getTeams = async () => {
|
||||
const token = useAuthStore.getState().token;
|
||||
|
||||
const response = await fetch(`/api/teams/`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Couldn't fetch teams: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const KEY_LIST_TEAM = 'teams';
|
||||
|
||||
export function useTeams(
|
||||
queryConfig?: UseQueryOptions<
|
||||
TeamsResponse,
|
||||
TeamsResponseError,
|
||||
TeamsResponse
|
||||
>,
|
||||
) {
|
||||
return useQuery<TeamsResponse, TeamsResponseError, TeamsResponse>({
|
||||
queryKey: [KEY_LIST_TEAM],
|
||||
queryFn: getTeams,
|
||||
...queryConfig,
|
||||
});
|
||||
}
|
||||
46
src/frontend/apps/desk/src/app/Teams/index.tsx
Normal file
46
src/frontend/apps/desk/src/app/Teams/index.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Button, Field, Input, Loader } from '@openfun/cunningham-react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { useCreateTeam } from './api/useCreateTeam';
|
||||
import { useTeams } from './api/useTeams';
|
||||
|
||||
export const Teams = () => {
|
||||
const { data, isPending } = useTeams();
|
||||
const { mutate: createTeam } = useCreateTeam();
|
||||
const [teamName, setTeamName] = useState('');
|
||||
|
||||
if (isPending)
|
||||
return (
|
||||
<div>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Field>
|
||||
<Input
|
||||
type="text"
|
||||
label="Team name"
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
/>
|
||||
<Button fullWidth onClick={() => createTeam(teamName)} className="mt-s">
|
||||
Create Team
|
||||
</Button>
|
||||
</Field>
|
||||
<section>
|
||||
<ul>
|
||||
{data?.results.map((post, index) => (
|
||||
<li key={post.id}>
|
||||
<div>
|
||||
<span>
|
||||
{index + 1}. {post.name}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
23
src/frontend/apps/desk/src/app/__tests__/page.test.tsx
Normal file
23
src/frontend/apps/desk/src/app/__tests__/page.test.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import '@testing-library/jest-dom';
|
||||
import { act, render, screen } from '@testing-library/react';
|
||||
|
||||
import useAuthStore from '@/auth/useAuthStore';
|
||||
import { WrapperReactQuery } from '@/tests/utils';
|
||||
|
||||
import Page from '../page';
|
||||
|
||||
describe('Page', () => {
|
||||
it('checks Page rendering', () => {
|
||||
render(<Page />, { wrapper: WrapperReactQuery });
|
||||
|
||||
expect(screen.getByRole('status')).toBeInTheDocument();
|
||||
|
||||
act(() => {
|
||||
useAuthStore.setState({ authenticated: true });
|
||||
});
|
||||
|
||||
expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
|
||||
'Hello world!',
|
||||
);
|
||||
});
|
||||
});
|
||||
BIN
src/frontend/apps/desk/src/app/favicon.ico
Normal file
BIN
src/frontend/apps/desk/src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
src/frontend/apps/desk/src/app/globals.css
Normal file
1
src/frontend/apps/desk/src/app/globals.css
Normal file
@@ -0,0 +1 @@
|
||||
@import url('../cunningham/cunningham-style.css');
|
||||
43
src/frontend/apps/desk/src/app/layout.tsx
Normal file
43
src/frontend/apps/desk/src/app/layout.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
'use client';
|
||||
|
||||
import { CunninghamProvider, Switch } from '@openfun/cunningham-react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
||||
import { Inter } from 'next/font/google';
|
||||
import { useState } from 'react';
|
||||
import './globals.css';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [themeDark, setThemeDark] = useState(false);
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ReactQueryDevtools />
|
||||
<CunninghamProvider theme={themeDark ? 'dark' : 'default'}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: themeDark ? '#555' : 'white',
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
label="Dark"
|
||||
onChange={() => setThemeDark(!themeDark)}
|
||||
checked={themeDark}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
</CunninghamProvider>
|
||||
</QueryClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
7
src/frontend/apps/desk/src/app/page.module.css
Normal file
7
src/frontend/apps/desk/src/app/page.module.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6rem;
|
||||
}
|
||||
28
src/frontend/apps/desk/src/app/page.tsx
Normal file
28
src/frontend/apps/desk/src/app/page.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import { Loader } from '@openfun/cunningham-react';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import useAuthStore from '@/auth/useAuthStore';
|
||||
|
||||
import { Teams } from './Teams';
|
||||
import styles from './page.module.css';
|
||||
|
||||
export default function Home() {
|
||||
const { initAuth, authenticated } = useAuthStore();
|
||||
|
||||
useEffect(() => {
|
||||
initAuth();
|
||||
}, [initAuth]);
|
||||
|
||||
if (!authenticated) {
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<h2>Hello world!</h2>
|
||||
<Teams />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
23
src/frontend/apps/desk/src/auth/keycloak.ts
Normal file
23
src/frontend/apps/desk/src/auth/keycloak.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import Keycloak, { KeycloakConfig } from 'keycloak-js';
|
||||
|
||||
const keycloakConfig: KeycloakConfig = {
|
||||
url: process.env.NEXT_PUBLIC_KEYCLOAK_URL,
|
||||
realm: process.env.NEXT_PUBLIC_KEYCLOAK_REALM || '',
|
||||
clientId: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || '',
|
||||
};
|
||||
|
||||
export const initKeycloak = (onAuthSuccess: (_token?: string) => void) => {
|
||||
const keycloak = new Keycloak(keycloakConfig);
|
||||
keycloak
|
||||
.init({
|
||||
onLoad: 'login-required',
|
||||
})
|
||||
.then((authenticated) => {
|
||||
if (authenticated) {
|
||||
onAuthSuccess(keycloak.token);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
throw new Error('Failed to initialize Keycloak.');
|
||||
});
|
||||
};
|
||||
32
src/frontend/apps/desk/src/auth/useAuthStore.tsx
Normal file
32
src/frontend/apps/desk/src/auth/useAuthStore.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
import { initKeycloak } from './keycloak';
|
||||
|
||||
interface AuthStore {
|
||||
initialized: boolean;
|
||||
authenticated: boolean;
|
||||
token: string | null;
|
||||
initAuth: () => void;
|
||||
}
|
||||
|
||||
const useAuthStore = create<AuthStore>((set) => ({
|
||||
initialized: false,
|
||||
authenticated: false,
|
||||
token: null,
|
||||
|
||||
initAuth: () =>
|
||||
set((state) => {
|
||||
if (process.env.NODE_ENV === 'development' && !state.initialized) {
|
||||
initKeycloak((token) => set({ authenticated: true, token }));
|
||||
return { initialized: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO: Implement OIDC production authentication
|
||||
*/
|
||||
|
||||
return {};
|
||||
}),
|
||||
}));
|
||||
|
||||
export default useAuthStore;
|
||||
@@ -0,0 +1,31 @@
|
||||
:root {
|
||||
/**
|
||||
* Input
|
||||
*/
|
||||
--c--components--forms-input--border-radius--hover: var(
|
||||
--c--components--forms-input--border-radius
|
||||
);
|
||||
--c--components--forms-input--border-radius--focus: var(
|
||||
--c--components--forms-input--border-radius
|
||||
);
|
||||
--c--components--forms-input--border-color--hover: var(
|
||||
--c--components--forms-input--border-color
|
||||
);
|
||||
|
||||
/**
|
||||
* Datepicker
|
||||
**/
|
||||
--c--components--forms-datepicker--border-color--hover: var(
|
||||
--c--components--forms-datepicker--border-color
|
||||
);
|
||||
|
||||
/**
|
||||
* Select
|
||||
**/
|
||||
--c--components--forms-select--value-color--disabled: var(
|
||||
--c--theme--colors--greyscale-400
|
||||
);
|
||||
--c--components--forms-labelledbox--label-color--big: var(
|
||||
--c--theme--colors--primary-500
|
||||
);
|
||||
}
|
||||
359
src/frontend/apps/desk/src/cunningham/cunningham-style.css
Normal file
359
src/frontend/apps/desk/src/cunningham/cunningham-style.css
Normal file
@@ -0,0 +1,359 @@
|
||||
@import url('@openfun/cunningham-react/icons');
|
||||
@import url('@openfun/cunningham-react/style');
|
||||
@import url('@openfun/cunningham-react/fonts');
|
||||
@import url('./cunningham-tokens.css');
|
||||
@import url('./cunningham-custom-tokens.css');
|
||||
|
||||
.c__input,
|
||||
.c__field,
|
||||
.c__select,
|
||||
.c__datagrid,
|
||||
.typo {
|
||||
font-family: var(--c--theme--font--families--base);
|
||||
}
|
||||
|
||||
.c__field {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.labelled-box label {
|
||||
color: var(--c--theme--colors--primary-500);
|
||||
}
|
||||
|
||||
.labelled-box--disabled label {
|
||||
color: var(--c--components--forms-labelledbox--label-color--small--disabled);
|
||||
}
|
||||
|
||||
.c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Input
|
||||
* TextArea
|
||||
*/
|
||||
.c__input__wrapper,
|
||||
.c__textarea__wrapper {
|
||||
transition: all var(--c--theme--transitions--duration)
|
||||
var(--c--theme--transitions--ease-out);
|
||||
}
|
||||
|
||||
.c__input__wrapper:has(input[readonly]),
|
||||
.c__input__wrapper:has(input[readonly]) * {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.c__textarea__wrapper:has(input.border-none),
|
||||
.c__textarea__wrapper:has(input.border-none) *,
|
||||
.c__input__wrapper:has(input.border-none),
|
||||
.c__input__wrapper:has(input.border-none) * {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c__input__wrapper:hover,
|
||||
.c__textarea__wrapper:hover {
|
||||
box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px;
|
||||
}
|
||||
|
||||
.c__textarea__wrapper--disabled:hover,
|
||||
.c__input__wrapper--disabled:hover,
|
||||
.c__input__wrapper:hover:has(input[readonly]) {
|
||||
box-shadow: var(--c--theme--colors--primary-500) 0 0 0 0;
|
||||
}
|
||||
|
||||
.c__input__wrapper--disabled {
|
||||
color: var(--c--components--forms-input--value-color--disabled);
|
||||
}
|
||||
|
||||
.c__input__wrapper .labelled-box__label.placeholder {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.c__input__wrapper .c__input,
|
||||
.c__textarea__wrapper .c__textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c__input__wrapper--disabled .c__input {
|
||||
color: var(--c--components--forms-input--value-color--disabled);
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:focus {
|
||||
transition:
|
||||
background-color 0s 600000s,
|
||||
color 0s 600000s;
|
||||
}
|
||||
|
||||
.c__textarea__wrapper .c__textarea {
|
||||
color: var(--c--components--forms-textarea--color);
|
||||
}
|
||||
|
||||
.c__textarea__wrapper:hover {
|
||||
border-color: var(--c--components--forms-textarea--border-color-hover);
|
||||
}
|
||||
|
||||
.c__textarea__wrapper--disabled:hover {
|
||||
border-color: var(
|
||||
--c--components--forms-textarea--disabled--border-color-hover
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Select
|
||||
*/
|
||||
.c_select__no_border .c__select .c__select__wrapper,
|
||||
.c_select__no_border .c__select .c__select__wrapper:hover,
|
||||
.c_select__no_border
|
||||
.c__select:not(.c__select--disabled)
|
||||
.c__select__wrapper:hover {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c__select__wrapper {
|
||||
transition: all var(--c--theme--transitions--duration)
|
||||
var(--c--theme--transitions--ease-out);
|
||||
min-height: var(--c--components--forms-select--height);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.c__select:not(.c__select--disabled) .c__select__wrapper:hover {
|
||||
box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px;
|
||||
}
|
||||
|
||||
.c__select__menu__item {
|
||||
transition: all var(--c--theme--transitions--duration)
|
||||
var(--c--theme--transitions--ease-out);
|
||||
}
|
||||
|
||||
.c__select--disabled .c__select__wrapper label,
|
||||
.c__select--disabled .c__select__wrapper input,
|
||||
.c_select__no_bg .c__select__wrapper {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.c__select__wrapper:focus-within .labelled-box--disabled label {
|
||||
color: var(--c--components--forms-labelledbox--label-color--small--disabled);
|
||||
}
|
||||
|
||||
.c__select__wrapper .labelled-box {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c__select__wrapper .labelled-box .labelled-box__children {
|
||||
padding: unset;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
|
||||
.c__select__wrapper .labelled-box .c__select__inner__actions {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c__select__wrapper label {
|
||||
position: relative;
|
||||
padding-right: 5rem;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.c__select__wrapper .c__select__inner__actions__open:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.c__select__wrapper .labelled-box__label.c__offscreen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* DataGrid
|
||||
*/
|
||||
.c__datagrid > table td {
|
||||
max-width: 10rem;
|
||||
white-space: normal;
|
||||
color: var(--c--components--datagrid--cell--color);
|
||||
font-size: var(--c--components--datagrid--cell--size);
|
||||
}
|
||||
|
||||
.c__datagrid > table th .c__datagrid__header {
|
||||
color: var(--c--theme--colors--primary-500);
|
||||
font-weight: var(--c--components--datagrid--header--weight);
|
||||
font-size: var(--c--components--datagrid--header--size);
|
||||
}
|
||||
|
||||
.c__datagrid > table tbody tr {
|
||||
border: 1px var(--c--theme--colors--primary-100) solid;
|
||||
}
|
||||
|
||||
.c__datagrid > .c__pagination {
|
||||
padding-top: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (width <= 380px) {
|
||||
.c__datagrid > .c__pagination {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Date picker
|
||||
*/
|
||||
.c__popover.c__popover--borderless {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.c__date-picker__wrapper {
|
||||
transition: all var(--c--theme--transitions--duration)
|
||||
var(--c--theme--transitions--ease-out);
|
||||
}
|
||||
|
||||
.c__date-picker:not(.c__date-picker--disabled):hover .c__date-picker__wrapper {
|
||||
box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px;
|
||||
}
|
||||
|
||||
.c__date-picker.c__date-picker--invalid:not(.c__date-picker--disabled):hover
|
||||
.c__date-picker__wrapper {
|
||||
box-shadow: var(--c--theme--colors--danger-300) 0 0 0 2px;
|
||||
}
|
||||
|
||||
.c__date-picker__wrapper button[aria-label='Clear date'],
|
||||
.c__date-picker.c__date-picker--invalid .c__date-picker__wrapper * {
|
||||
color: var(--c--theme--colors--danger-300);
|
||||
}
|
||||
|
||||
/**
|
||||
* Others
|
||||
*/
|
||||
.c__checkbox:focus-within {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.c__checkbox {
|
||||
transition: all 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Button
|
||||
*/
|
||||
.c__button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c__button:hover.c__button-no-bg,
|
||||
.c__button.c__button-no-bg,
|
||||
.c__button:disabled.c__button-no-bg {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.c__button--medium {
|
||||
padding: 0.9rem var(--c--theme--spacings--s);
|
||||
}
|
||||
|
||||
.c__button--small {
|
||||
padding: 0.6rem 0.75rem;
|
||||
}
|
||||
|
||||
.c__button--with-icon--right {
|
||||
padding: 0.7rem var(--c--theme--spacings--t) 0.7rem
|
||||
var(--c--theme--spacings--s);
|
||||
}
|
||||
|
||||
.c__button--primary {
|
||||
background-color: var(--c--components--button--primary--background--color);
|
||||
color: var(--c--components--button--primary--color);
|
||||
}
|
||||
|
||||
.c__button--primary:active,
|
||||
.c__button--primary.c__button--active {
|
||||
background-color: var(
|
||||
--c--components--button--primary--background--color-active
|
||||
);
|
||||
color: var(--c--components--button--primary--color-active);
|
||||
border-color: var(--c--components--button--primary--border--color-active);
|
||||
}
|
||||
|
||||
.c__button:disabled {
|
||||
background-color: var(--c--components--button--disabled--background--color);
|
||||
color: var(--c--components--button--disabled--color);
|
||||
}
|
||||
|
||||
.c__button--success {
|
||||
background-color: var(--c--components--button--success--background--color);
|
||||
color: var(--c--components--button--success--color);
|
||||
}
|
||||
|
||||
.c__button--success:hover,
|
||||
.c__button--success:focus-visible {
|
||||
background-color: var(
|
||||
--c--components--button--success--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--success--color-hover);
|
||||
}
|
||||
|
||||
.c__button--success:disabled {
|
||||
background-color: var(
|
||||
--c--components--button--success--background--color-disabled
|
||||
);
|
||||
color: var(--c--components--button--success--color-disabled);
|
||||
}
|
||||
|
||||
.c__button--secondary {
|
||||
background-color: var(--c--components--button--secondary--background--color);
|
||||
color: var(--c--components--button--secondary--color);
|
||||
border: 1px solid var(--c--components--button--secondary--border--color);
|
||||
}
|
||||
|
||||
.c__button--secondary:hover,
|
||||
.c__button--secondary:focus-visible {
|
||||
background-color: var(
|
||||
--c--components--button--secondary--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--secondary--color-hover);
|
||||
}
|
||||
|
||||
.c__button--tertiary {
|
||||
color: var(--c--components--button--tertiary--color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c__button--tertiary:hover,
|
||||
.c__button--tertiary:focus-visible {
|
||||
background-color: var(
|
||||
--c--components--button--tertiary--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--tertiary--color);
|
||||
}
|
||||
|
||||
.c__button--tertiary:disabled {
|
||||
background-color: var(
|
||||
--c--components--button--tertiary--background--color-disabled
|
||||
);
|
||||
color: var(--c--components--button--tertiary--color-disabled);
|
||||
}
|
||||
|
||||
.c__button--danger {
|
||||
background-color: var(--c--components--button--danger--background--color);
|
||||
}
|
||||
|
||||
.c__button--danger:hover,
|
||||
.c__button--danger:focus-visible {
|
||||
background-color: var(
|
||||
--c--components--button--danger--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--danger--color-hover);
|
||||
}
|
||||
|
||||
.c__button--danger:disabled {
|
||||
background-color: var(
|
||||
--c--components--button--danger--background--color-disabled
|
||||
);
|
||||
}
|
||||
1430
src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
Normal file
1430
src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
Normal file
File diff suppressed because it is too large
Load Diff
323
src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
Normal file
323
src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
Normal file
@@ -0,0 +1,323 @@
|
||||
export const tokens = {
|
||||
themes: {
|
||||
default: {
|
||||
theme: {
|
||||
colors: {
|
||||
'secondary-text': '#555F6B',
|
||||
'secondary-100': '#F2F7FC',
|
||||
'secondary-200': '#EBF3FA',
|
||||
'secondary-300': '#E2EEF8',
|
||||
'secondary-400': '#DDEAF7',
|
||||
'secondary-500': '#D4E5F5',
|
||||
'secondary-600': '#C1D0DF',
|
||||
'secondary-700': '#97A3AE',
|
||||
'secondary-800': '#757E87',
|
||||
'secondary-900': '#596067',
|
||||
'info-text': '#FFFFFF',
|
||||
'info-100': '#EBF2FC',
|
||||
'info-200': '#8CB5EA',
|
||||
'info-300': '#5894E1',
|
||||
'info-400': '#377FDB',
|
||||
'info-500': '#055FD2',
|
||||
'info-600': '#0556BF',
|
||||
'info-700': '#044395',
|
||||
'info-800': '#033474',
|
||||
'info-900': '#022858',
|
||||
'greyscale-100': '#FAFAFB',
|
||||
'greyscale-200': '#F3F4F4',
|
||||
'greyscale-300': '#E7E8EA',
|
||||
'greyscale-400': '#C2C6CA',
|
||||
'greyscale-500': '#9EA3AA',
|
||||
'greyscale-600': '#79818A',
|
||||
'greyscale-700': '#555F6B',
|
||||
'greyscale-800': '#303C4B',
|
||||
'greyscale-900': '#0C1A2B',
|
||||
'greyscale-000': '#FFFFFF',
|
||||
'primary-100': '#EDF5FA',
|
||||
'primary-200': '#8CB5EA',
|
||||
'primary-300': '#5894E1',
|
||||
'primary-400': '#377FDB',
|
||||
'primary-500': '#055FD2',
|
||||
'primary-600': '#0556BF',
|
||||
'primary-700': '#044395',
|
||||
'primary-800': '#033474',
|
||||
'primary-900': '#022858',
|
||||
'success-100': '#EFFCD3',
|
||||
'success-200': '#DBFAA9',
|
||||
'success-300': '#BEF27C',
|
||||
'success-400': '#A0E659',
|
||||
'success-500': '#76D628',
|
||||
'success-600': '#5AB81D',
|
||||
'success-700': '#419A14',
|
||||
'success-800': '#2C7C0C',
|
||||
'success-900': '#1D6607',
|
||||
'warning-100': '#FFF8CD',
|
||||
'warning-200': '#FFEF9B',
|
||||
'warning-300': '#FFE469',
|
||||
'warning-400': '#FFDA43',
|
||||
'warning-500': '#FFC805',
|
||||
'warning-600': '#DBA603',
|
||||
'warning-700': '#B78702',
|
||||
'warning-800': '#936901',
|
||||
'warning-900': '#7A5400',
|
||||
'danger-100': '#F4B0B0',
|
||||
'danger-200': '#EE8A8A',
|
||||
'danger-300': '#E65454',
|
||||
'danger-400': '#E13333',
|
||||
'danger-500': '#DA0000',
|
||||
'danger-600': '#C60000',
|
||||
'danger-700': '#9B0000',
|
||||
'danger-800': '#780000',
|
||||
'danger-900': '#5C0000',
|
||||
'primary-text': '#FFFFFF',
|
||||
'success-text': '#FFFFFF',
|
||||
'warning-text': '#FFFFFF',
|
||||
'danger-text': '#FFFFFF',
|
||||
'primary-150': '#E5EEFA',
|
||||
'info-150': '#E5EEFA',
|
||||
},
|
||||
font: {
|
||||
sizes: {
|
||||
h1: '2.2rem',
|
||||
h2: '1.7rem',
|
||||
h3: '1.37rem',
|
||||
h4: '1.15rem',
|
||||
h5: '1rem',
|
||||
h6: '0.87rem',
|
||||
l: '1rem',
|
||||
m: '0.8125rem',
|
||||
s: '0.75rem',
|
||||
ml: '0.938rem',
|
||||
xl: '1.50rem',
|
||||
t: '0.6875rem',
|
||||
},
|
||||
weights: {
|
||||
thin: 100,
|
||||
light: 300,
|
||||
regular: 400,
|
||||
medium: 500,
|
||||
bold: 600,
|
||||
extrabold: 800,
|
||||
black: 900,
|
||||
},
|
||||
families: {
|
||||
base: '"Roboto Flex Variable", sans-serif',
|
||||
accent: '"Roboto Flex Variable", sans-serif',
|
||||
},
|
||||
letterSpacings: {
|
||||
h1: 'normal',
|
||||
h2: 'normal',
|
||||
h3: 'normal',
|
||||
h4: 'normal',
|
||||
h5: '1px',
|
||||
h6: 'normal',
|
||||
l: 'normal',
|
||||
m: 'normal',
|
||||
s: 'normal',
|
||||
},
|
||||
},
|
||||
spacings: {
|
||||
'0': '0',
|
||||
xl: '4rem',
|
||||
l: '3rem',
|
||||
b: '1.625rem',
|
||||
s: '1rem',
|
||||
t: '0.5rem',
|
||||
st: '0.25rem',
|
||||
none: '0',
|
||||
auto: 'auto',
|
||||
bx: '2.2rem',
|
||||
full: '100%',
|
||||
},
|
||||
transitions: {
|
||||
'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
|
||||
'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
|
||||
'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
|
||||
duration: '250ms',
|
||||
},
|
||||
breakpoints: {
|
||||
xs: '480px',
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
xxl: '1400px',
|
||||
xxs: '320px',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
datagrid: {
|
||||
header: {
|
||||
weight: 'var(--c--theme--font--weights--extrabold)',
|
||||
size: 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
cell: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
size: 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
},
|
||||
'forms-checkbox': {
|
||||
'background-color': { hover: '#055fd214' },
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
'forms-datepicker': {
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-datepicker--border-radius)',
|
||||
focus: 'var(--c--components--forms-datepicker--border-radius)',
|
||||
},
|
||||
},
|
||||
'forms-field': {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
width: 'auto',
|
||||
},
|
||||
'forms-input': {
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
},
|
||||
'forms-labelledbox': {
|
||||
'label-color': {
|
||||
small: 'var(--c--theme--colors--primary-500)',
|
||||
big: { disabled: 'var(--c--theme--colors--greyscale-400)' },
|
||||
},
|
||||
},
|
||||
'forms-select': {
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-select--border-radius)',
|
||||
focus: 'var(--c--components--forms-select--border-radius)',
|
||||
},
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
'item-background-color': {
|
||||
hover: 'var(--c--theme--colors--primary-100)',
|
||||
},
|
||||
'item-color': 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
},
|
||||
'forms-switch': {
|
||||
'accent-color': 'var(--c--theme--colors--primary-400)',
|
||||
},
|
||||
'forms-textarea': {
|
||||
'border-color': 'var(--c--components--forms-textarea--border-color)',
|
||||
'border-color-hover':
|
||||
'var(--c--components--forms-textarea--border-color)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-textarea--border-radius)',
|
||||
focus: 'var(--c--components--forms-textarea--border-radius)',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
disabled: {
|
||||
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
button: {
|
||||
'border-radius': {
|
||||
active: 'var(--c--components--button--border-radius)',
|
||||
},
|
||||
'medium-height': 'auto',
|
||||
'small-height': 'auto',
|
||||
success: {
|
||||
color: 'white',
|
||||
'color-disabled': 'white',
|
||||
'color-hover': 'white',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--success-600)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-300)',
|
||||
'color-hover': 'var(--c--theme--colors--success-800)',
|
||||
},
|
||||
},
|
||||
danger: {
|
||||
'color-hover': 'white',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--danger-400)',
|
||||
'color-hover': 'var(--c--theme--colors--danger-500)',
|
||||
'color-disabled': 'var(--c--theme--colors--danger-100)',
|
||||
},
|
||||
},
|
||||
primary: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'color-active': 'var(--c--theme--colors--primary-text)',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--primary-400)',
|
||||
'color-active': 'var(--c--theme--colors--primary-500)',
|
||||
},
|
||||
border: { 'color-active': 'transparent' },
|
||||
},
|
||||
secondary: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
background: {
|
||||
color: 'white',
|
||||
'color-hover': 'var(--c--theme--colors--primary-700)',
|
||||
},
|
||||
border: { color: 'var(--c--theme--colors--primary-200)' },
|
||||
},
|
||||
tertiary: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
|
||||
background: {
|
||||
'color-hover': 'var(--c--theme--colors--primary-100)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
disabled: { color: 'white', background: { color: '#b3cef0' } },
|
||||
},
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
theme: {
|
||||
colors: {
|
||||
'greyscale-100': '#182536',
|
||||
'greyscale-200': '#303C4B',
|
||||
'greyscale-300': '#555F6B',
|
||||
'greyscale-400': '#79818A',
|
||||
'greyscale-500': '#9EA3AA',
|
||||
'greyscale-600': '#C2C6CA',
|
||||
'greyscale-700': '#E7E8EA',
|
||||
'greyscale-800': '#F3F4F4',
|
||||
'greyscale-900': '#FAFAFB',
|
||||
'greyscale-000': '#0C1A2B',
|
||||
'primary-100': '#3B4C62',
|
||||
'primary-200': '#4D6481',
|
||||
'primary-300': '#6381A6',
|
||||
'primary-400': '#7FA5D5',
|
||||
'primary-500': '#8CB5EA',
|
||||
'primary-600': '#A3C4EE',
|
||||
'primary-700': '#C3D8F4',
|
||||
'primary-800': '#DDE9F8',
|
||||
'primary-900': '#F4F8FD',
|
||||
'success-100': '#EEF8D7',
|
||||
'success-200': '#D9F1B2',
|
||||
'success-300': '#BDE985',
|
||||
'success-400': '#A0E25D',
|
||||
'success-500': '#76D628',
|
||||
'success-600': '#5BB520',
|
||||
'success-700': '#43941A',
|
||||
'success-800': '#307414',
|
||||
'success-900': '#225D10',
|
||||
'warning-100': '#F7F3D5',
|
||||
'warning-200': '#F0E5AA',
|
||||
'warning-300': '#E8D680',
|
||||
'warning-400': '#E3C95F',
|
||||
'warning-500': '#D9B32B',
|
||||
'warning-600': '#BD9721',
|
||||
'warning-700': '#9D7B1C',
|
||||
'warning-800': '#7E6016',
|
||||
'warning-900': '#684D12',
|
||||
'danger-100': '#F8D0D0',
|
||||
'danger-200': '#F09898',
|
||||
'danger-300': '#F09898',
|
||||
'danger-400': '#ED8585',
|
||||
'danger-500': '#E96666',
|
||||
'danger-600': '#DD6666',
|
||||
'danger-700': '#C36666',
|
||||
'danger-800': '#AE6666',
|
||||
'danger-900': '#9D6666',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
7
src/frontend/apps/desk/src/cunningham/index.ts
Normal file
7
src/frontend/apps/desk/src/cunningham/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { tokens } from './cunningham-tokens';
|
||||
|
||||
const themeTokens = tokens.themes.default.theme;
|
||||
const colorsTokens = tokens.themes.default.theme.colors;
|
||||
const componentTokens = tokens.themes.default.components;
|
||||
|
||||
export { tokens, themeTokens, componentTokens, colorsTokens };
|
||||
16
src/frontend/apps/desk/src/tests/utils.tsx
Normal file
16
src/frontend/apps/desk/src/tests/utils.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
export const WrapperReactQuery = ({ children }: PropsWithChildren) => {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
6
src/frontend/apps/desk/src/types/api.ts
Normal file
6
src/frontend/apps/desk/src/types/api.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface APIList<T> {
|
||||
count: number;
|
||||
next?: string | null;
|
||||
previous?: string | null;
|
||||
results: T[];
|
||||
}
|
||||
8
src/frontend/apps/desk/stylelint.config.js
Normal file
8
src/frontend/apps/desk/stylelint.config.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
|
||||
rules: {
|
||||
'custom-property-pattern': null,
|
||||
'selector-class-pattern': null,
|
||||
'no-descending-specificity': null,
|
||||
},
|
||||
};
|
||||
27
src/frontend/apps/desk/tsconfig.json
Normal file
27
src/frontend/apps/desk/tsconfig.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
6674
src/frontend/apps/desk/yarn.lock
Normal file
6674
src/frontend/apps/desk/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user