mirror of
https://github.com/lingble/twenty.git
synced 2025-10-31 04:37:56 +00:00
Move frontend to Vite 5 (#2775)
* merge squashed
- A couple of CJS modules into ESM (config mostly)
- Vite complains about node.js modules: fixed `useIsMatchingLocation.ts`
> or use rollupOptions in vite.config.ts
> ref: f0e4f59d97/vite.config.js (L6)
- Adjust Storybook to work with Vite: use @storybook/test
- Use SWC for jest tranformations
- Remove unused deps:
- ts-jest: replaced with @swc/jest, typecheck by `tsc`
- babel plugins
- @svgr/plugin-jsx: not used
- @testing-library/user-event: handled by @storybook/test
- @typescript-eslint/utils: was not plugged in
- tsup, esbuild-plugin-svgr: will look into that later
- Install Vite required deps, and remove craco/webpack deps
- Adjust SVG to work with Vite as components
- Fixed `Step.tsx`: I dont know if one should be swaped for the other,
but there should be no slash
- Initial formating and linting:
- removed empty object params
- sorting imports, etc..
* prettier: fix pattern
* coverage: sb coverage report isnt working
* Add missing pieces
* `yarn lint --fix`
* fix: scripts permissions
* tsc: cut errors in half
* fix: remove `react-app-env.d.ts`
* tsc: all fixed, except `react-data-grid` types issue
* eslint: ignore env-config.js
* eslint: Align ci with config
* msw: bypass testing warnings
ref: https://stackoverflow.com/questions/68024935/msw-logging-warnings-for-unhandled-supertest-requests
* rebase: and fix things
* Adjust to current `graphql-codegen` no ESM support
* Remove vite plugin and use built-in methods
* rebase: and some fixes
* quick fix + `corepack use yarn@1.22.19`
* Fix build errors
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Aasim Attia
2
.github/workflows/ci-front.yaml
vendored
2
.github/workflows/ci-front.yaml
vendored
@@ -145,7 +145,7 @@ jobs:
|
||||
- name: Front / Install Dependencies
|
||||
run: cd front && yarn
|
||||
- name: Front / Run linter
|
||||
run: cd front && yarn lint --config .eslintrc-ci.js
|
||||
run: cd front && yarn lint --config .eslintrc-ci.cjs
|
||||
front-jest:
|
||||
needs: front-yarn-install
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
8
.vscode/settings.json
vendored
8
.vscode/settings.json
vendored
@@ -38,5 +38,11 @@
|
||||
"cSpell.words": [
|
||||
"twentyhq"
|
||||
],
|
||||
"typescript.preferences.importModuleSpecifier": "non-relative"
|
||||
"typescript.preferences.importModuleSpecifier": "non-relative",
|
||||
"[javascript][typescript][typescriptreact]": {
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.addMissingImports": "always"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
extends: [
|
||||
'./.eslintrc.js'
|
||||
'./.eslintrc.cjs'
|
||||
],
|
||||
rules: {
|
||||
'no-console': 'error',
|
||||
@@ -1,37 +1,118 @@
|
||||
module.exports = {
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
project: 'tsconfig.json',
|
||||
tsconfigRootDir: __dirname,
|
||||
sourceType: 'module',
|
||||
ecmaVersion: "2023"
|
||||
},
|
||||
plugins: [
|
||||
'@typescript-eslint/eslint-plugin',
|
||||
'unused-imports',
|
||||
'simple-import-sort',
|
||||
'prefer-arrow',
|
||||
'import',
|
||||
'twenty',
|
||||
],
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
'plugin:storybook/recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
jest: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/interface-name-prefix': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-unused-vars': 'off',
|
||||
'simple-import-sort/imports': 'error',
|
||||
'simple-import-sort/exports': 'error',
|
||||
'twenty/effect-components': 'error',
|
||||
'twenty/no-hardcoded-colors': 'error',
|
||||
'twenty/matching-state-variable': 'error',
|
||||
'twenty/component-props-naming': 'error',
|
||||
'twenty/sort-css-properties-alphabetically': 'error',
|
||||
'twenty/styled-components-prefixed-with-styled': 'error',
|
||||
'twenty/no-state-useref': 'error',
|
||||
'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
|
||||
'no-unused-vars': 'off',
|
||||
'react/jsx-props-no-spreading': [
|
||||
'error',
|
||||
{
|
||||
explicitSpread: 'ignore',
|
||||
},
|
||||
],
|
||||
'react-hooks/exhaustive-deps': [
|
||||
'warn',
|
||||
{
|
||||
additionalHooks: 'useRecoilCallback',
|
||||
},
|
||||
],
|
||||
'unused-imports/no-unused-imports': 'warn',
|
||||
'unused-imports/no-unused-vars': [
|
||||
'warn',
|
||||
{
|
||||
vars: 'all',
|
||||
varsIgnorePattern: '^_',
|
||||
args: 'after-used',
|
||||
argsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'no-restricted-imports': [
|
||||
'error',
|
||||
{
|
||||
patterns: [
|
||||
{
|
||||
group: ['@tabler/icons-react'],
|
||||
message: 'Icon imports are only allowed for `@/ui/icon`',
|
||||
},
|
||||
{
|
||||
group: ['react-hotkeys-web-hook'],
|
||||
importNames: ['useHotkeys'],
|
||||
message: 'Please use the custom wrapper: `useScopedHotkeys`',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
'@typescript-eslint/consistent-type-imports': [
|
||||
'error',
|
||||
{ prefer: 'no-type-imports' },
|
||||
],
|
||||
'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
|
||||
// 'react-refresh/only-export-components': [
|
||||
// 'warn',
|
||||
// { allowConstantExport: true },
|
||||
// ],
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
'plugin:storybook/recommended',
|
||||
],
|
||||
plugins: [
|
||||
'@typescript-eslint/eslint-plugin',
|
||||
'simple-import-sort',
|
||||
'unused-imports',
|
||||
'prefer-arrow',
|
||||
'twenty',
|
||||
'react-refresh',
|
||||
],
|
||||
ignorePatterns: [
|
||||
'mockServiceWorker.js',
|
||||
'**/generated*/*',
|
||||
'.eslintrc.cjs',
|
||||
'*.config.cjs',
|
||||
'*.config.ts',
|
||||
'*config.js',
|
||||
'codegen*',
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.stories.tsx', '*.test.ts'],
|
||||
rules: {
|
||||
'no-console': 'off',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
|
||||
@@ -43,7 +124,7 @@ module.exports = {
|
||||
'react/jsx-uses-react': 'off',
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'no-control-regex': 0,
|
||||
'import/no-duplicates': ["error", {"considerQueryString": true}],
|
||||
'no-undef': 'off',
|
||||
'simple-import-sort/imports': [
|
||||
'error',
|
||||
{
|
||||
@@ -53,76 +134,19 @@ module.exports = {
|
||||
['^\\u0000'],
|
||||
['^\\.\\.(?!/?$)', '^\\.\\./?$'],
|
||||
['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
|
||||
['^.+\\.?(css)$']
|
||||
]
|
||||
}
|
||||
['^.+\\.?(css)$'],
|
||||
],
|
||||
},
|
||||
],
|
||||
'prefer-arrow/prefer-arrow-functions': [
|
||||
'error',
|
||||
{
|
||||
"disallowPrototype": true,
|
||||
"singleReturnOnly": false,
|
||||
"classPropertiesAllowed": false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
],
|
||||
ignorePatterns: ['.eslintrc.js', 'codegen*.js', '**/generated*/*', '*.config.js'],
|
||||
rules: {
|
||||
'@typescript-eslint/interface-name-prefix': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'simple-import-sort/imports': 'error',
|
||||
'simple-import-sort/exports': 'error',
|
||||
'twenty/effect-components': 'error',
|
||||
'twenty/no-hardcoded-colors': 'error',
|
||||
'twenty/matching-state-variable': 'error',
|
||||
'twenty/component-props-naming': 'error',
|
||||
'twenty/sort-css-properties-alphabetically': 'error',
|
||||
'twenty/styled-components-prefixed-with-styled': 'error',
|
||||
'twenty/no-state-useref': 'error',
|
||||
'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
|
||||
"@typescript-eslint/no-unused-vars": "off",
|
||||
"no-unused-vars": "off",
|
||||
"react/jsx-props-no-spreading": [
|
||||
"error", {
|
||||
"explicitSpread": "ignore",
|
||||
}
|
||||
],
|
||||
"react-hooks/exhaustive-deps": [
|
||||
"warn", {
|
||||
"additionalHooks": "useRecoilCallback"
|
||||
}
|
||||
],
|
||||
"unused-imports/no-unused-imports": "warn",
|
||||
"unused-imports/no-unused-vars": [
|
||||
"warn",
|
||||
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
|
||||
],
|
||||
'no-restricted-imports': [
|
||||
'error',
|
||||
{
|
||||
'patterns': [
|
||||
{
|
||||
'group': ['@tabler/icons-react'],
|
||||
'message': 'Icon imports are only allowed for `@/ui/icon`',
|
||||
},
|
||||
{
|
||||
'group': ['react-hotkeys-web-hook'],
|
||||
"importNames": ["useHotkeys"],
|
||||
'message': 'Please use the custom wrapper: `useScopedHotkeys`',
|
||||
disallowPrototype: true,
|
||||
singleReturnOnly: false,
|
||||
classPropertiesAllowed: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
"@typescript-eslint/consistent-type-imports": ["error", { "prefer": "no-type-imports" }],
|
||||
'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
|
||||
},
|
||||
settings: {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
30
front/.gitignore
vendored
30
front/.gitignore
vendored
@@ -1,7 +1,15 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/coverage*
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
@@ -12,16 +20,22 @@ build-storybook.log
|
||||
|
||||
# production
|
||||
/build
|
||||
dist
|
||||
dist-ssr
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
# env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
.nyc_output
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
3
front/.prettierignore
Normal file
3
front/.prettierignore
Normal file
@@ -0,0 +1,3 @@
|
||||
**/generated*/
|
||||
*.lock
|
||||
*.yaml
|
||||
@@ -1,94 +0,0 @@
|
||||
const path = require('path');
|
||||
|
||||
computeStoriesGlob = () => {
|
||||
if (process.env.STORYBOOK_SCOPE === 'pages') {
|
||||
return [
|
||||
'../src/pages/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
'../src/__stories__/*.stories.@(js|jsx|ts|tsx)',
|
||||
'../src/pages/**/*.docs.mdx',
|
||||
'../src/__stories__/*.docs.mdx'
|
||||
]
|
||||
}
|
||||
|
||||
if (process.env.STORYBOOK_SCOPE === 'modules') {
|
||||
return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)', '../src/modules/**/*.docs.mdx']
|
||||
}
|
||||
|
||||
if (process.env.STORYBOOK_SCOPE === 'ui-docs') {
|
||||
return ['../src/modules/ui/**/*.docs.mdx'];
|
||||
}
|
||||
|
||||
return ['../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.docs.mdx']
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
webpackFinal: (config) => {
|
||||
config.module.rules.push({
|
||||
test: /\.tsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
presets: [
|
||||
require('@babel/preset-typescript').default,
|
||||
[
|
||||
require('@babel/preset-react').default,
|
||||
{
|
||||
runtime: 'automatic',
|
||||
},
|
||||
],
|
||||
require('@babel/preset-env').default,
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
config.resolve.extensions.push('.ts', '.tsx');
|
||||
config.module.rules.push({
|
||||
test: /\.mjs$/,
|
||||
include: /node_modules/,
|
||||
type: 'javascript/auto',
|
||||
});
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{
|
||||
loader: '@svgr/webpack',
|
||||
},
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'static/media/[path][name].[ext]',
|
||||
},
|
||||
},
|
||||
],
|
||||
type: 'javascript/auto',
|
||||
issuer: {
|
||||
and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
|
||||
},
|
||||
});
|
||||
config.resolve.extensions.push('.mjs');
|
||||
config.resolve.alias = {
|
||||
...config.resolve.alias,
|
||||
'~': path.resolve(__dirname, '../src'),
|
||||
'@': path.resolve(__dirname, '../src/modules'),
|
||||
};
|
||||
return config;
|
||||
},
|
||||
stories: computeStoriesGlob(),
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-coverage',
|
||||
'@storybook/addon-styling',
|
||||
'storybook-addon-pseudo-states',
|
||||
'storybook-addon-cookie',
|
||||
],
|
||||
docs: { autodocs: false },
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {},
|
||||
},
|
||||
};
|
||||
45
front/.storybook/main.ts
Normal file
45
front/.storybook/main.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
const computeStoriesGlob = () => {
|
||||
if (process.env.STORYBOOK_SCOPE === 'pages') {
|
||||
return [
|
||||
'../src/pages/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
'../src/__stories__/*.stories.@(js|jsx|ts|tsx)',
|
||||
'../src/pages/**/*.docs.mdx',
|
||||
'../src/__stories__/*.docs.mdx'
|
||||
]
|
||||
}
|
||||
|
||||
if (process.env.STORYBOOK_SCOPE === 'modules') {
|
||||
return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)', '../src/modules/**/*.docs.mdx']
|
||||
}
|
||||
|
||||
if (process.env.STORYBOOK_SCOPE === 'ui-docs') {
|
||||
return ['../src/modules/ui/**/*.docs.mdx'];
|
||||
}
|
||||
|
||||
return ['../src/**/*.docs.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)']
|
||||
};
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: computeStoriesGlob(),
|
||||
staticDirs: ['../public'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-onboarding',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-coverage',
|
||||
'@storybook/addon-themes',
|
||||
'storybook-addon-cookie',
|
||||
'storybook-addon-pseudo-states',
|
||||
],
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: false,
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
@@ -2,7 +2,12 @@
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js"></script>
|
||||
<!-- <script>
|
||||
window.global = window;
|
||||
</script> -->
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
import { initialize, mswLoader } from 'msw-storybook-addon';
|
||||
import { Preview } from '@storybook/react';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
|
||||
import { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme';
|
||||
import { RootDecorator } from '../src/testing/decorators/RootDecorator';
|
||||
import 'react-loading-skeleton/dist/skeleton.css';
|
||||
import { mockedUserJWT } from '../src/testing/mock-data/jwt';
|
||||
import { rest } from 'msw'
|
||||
import { Preview, ReactRenderer } from '@storybook/react';
|
||||
import { withThemeFromJSXProvider } from "@storybook/addon-themes";
|
||||
import { initialize, mswLoader } from 'msw-storybook-addon';
|
||||
|
||||
initialize();
|
||||
import { RootDecorator } from '../src/testing/decorators/RootDecorator';
|
||||
import { mockedUserJWT } from '../src/testing/mock-data/jwt';
|
||||
|
||||
import { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme';
|
||||
import 'react-loading-skeleton/dist/skeleton.css';
|
||||
|
||||
initialize({ onUnhandledRequest: 'bypass' });
|
||||
|
||||
const preview: Preview = {
|
||||
decorators: [
|
||||
withThemeFromJSXProvider({
|
||||
withThemeFromJSXProvider<ReactRenderer>({
|
||||
themes: {
|
||||
light: lightTheme,
|
||||
dark: darkTheme,
|
||||
@@ -30,16 +31,16 @@ const preview: Preview = {
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
cookie: {
|
||||
tokenPair: `{%22accessToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-07-18T15:06:40.704Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22refreshToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-10-15T15:06:41.558Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22__typename%22:%22AuthTokenPair%22}`,
|
||||
},
|
||||
options: {
|
||||
storySort: {
|
||||
order: ['UI', 'Modules', 'Pages'],
|
||||
},
|
||||
},
|
||||
cookie: {
|
||||
tokenPair: `{%22accessToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-07-18T15:06:40.704Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22refreshToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-10-15T15:06:41.558Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22__typename%22:%22AuthTokenPair%22}`,
|
||||
},
|
||||
loaders: [mswLoader],
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
const { getJestConfig } = require('@storybook/test-runner');
|
||||
import { getJestConfig } from "@storybook/test-runner";
|
||||
|
||||
/**
|
||||
* @type {import('@jest/types').Config.InitialOptions}
|
||||
*/
|
||||
module.exports = {
|
||||
export default {
|
||||
// The default configuration comes from @storybook/test-runner
|
||||
...getJestConfig(),
|
||||
/** Add your own overrides below
|
||||
31
front/.swcrc
Normal file
31
front/.swcrc
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"jsc": {
|
||||
"target": "es2017",
|
||||
"parser": {
|
||||
"syntax": "typescript",
|
||||
"tsx": true,
|
||||
"decorators": false,
|
||||
"dynamicImport": false
|
||||
},
|
||||
"transform": {
|
||||
"react": {
|
||||
"pragma": "React.createElement",
|
||||
"pragmaFrag": "React.Fragment",
|
||||
"throwIfNamespace": true,
|
||||
"development": false,
|
||||
"useBuiltins": false,
|
||||
"runtime": "automatic"
|
||||
},
|
||||
"hidden": {
|
||||
"jest": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"module": {
|
||||
"type": "commonjs",
|
||||
"strict": false,
|
||||
"strictMode": true,
|
||||
"lazy": false,
|
||||
"noInterop": false
|
||||
}
|
||||
}
|
||||
1
front/README.md
Normal file
1
front/README.md
Normal file
@@ -0,0 +1 @@
|
||||
Run `yarn dev` while server running on port `3000`
|
||||
@@ -1,48 +0,0 @@
|
||||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
devServer: {
|
||||
client: {
|
||||
overlay: {
|
||||
runtimeErrors: (error) => {
|
||||
switch (error.message) {
|
||||
case "ResizeObserver loop limit exceeded":
|
||||
case "Unauthenticated":
|
||||
return false;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
webpack: {
|
||||
alias: {
|
||||
'~': path.resolve(__dirname, 'src'),
|
||||
'@': path.resolve(__dirname, 'src/modules'),
|
||||
'@testing': path.resolve(__dirname, 'src/testing'),
|
||||
},
|
||||
// TODO: remove this workaround by resolving source map errors with @sniptt/guards
|
||||
configure: {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
enforce: "pre",
|
||||
use: ["source-map-loader"],
|
||||
},
|
||||
],
|
||||
},
|
||||
ignoreWarnings: [/Failed to parse source map/],
|
||||
},
|
||||
},
|
||||
jest: {
|
||||
configure: {
|
||||
moduleNameMapper: {
|
||||
'~/(.+)': "<rootDir>/src/$1",
|
||||
'@/(.+)': "<rootDir>/src/modules/$1",
|
||||
'@testing/(.+)': "<rootDir>/src/testing/$1",
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,23 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="%PUBLIC_URL%/icons/android/android-launchericon-48-48.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
href="%PUBLIC_URL%/icons/ios/icon-192x192.png"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
|
||||
<link rel="apple-touch-icon" href="/icons/ios/192.png" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="A modern open-source CRM" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png"
|
||||
/>
|
||||
|
||||
<meta property="og:description" content="A modern open-source CRM" />
|
||||
<meta property="og:title" content="Twenty" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
@@ -28,18 +23,17 @@
|
||||
|
||||
<meta name="twitter:description" content="A modern open-source CRM" />
|
||||
<meta name="twitter:title" content="Twenty" />
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
||||
/>
|
||||
|
||||
<title>Twenty</title>
|
||||
<script src="%PUBLIC_URL%/env-config.js"></script>
|
||||
<script src="/env-config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,5 +1,17 @@
|
||||
const { createJestConfig } = require("@craco/craco");
|
||||
const cracoConfig = require("./craco.config.js");
|
||||
const jestConfig = createJestConfig(cracoConfig);
|
||||
|
||||
module.exports = jestConfig;
|
||||
export default {
|
||||
setupFilesAfterEnv: ["./src/setupTests.ts"],
|
||||
testEnvironment: "jsdom",
|
||||
transform: {
|
||||
"^.+\\.(ts|js|tsx|jsx)$": "@swc/jest",
|
||||
},
|
||||
moduleNameMapper: {
|
||||
'~/(.+)': "<rootDir>/src/$1",
|
||||
'@/(.+)': "<rootDir>/src/modules/$1",
|
||||
'@testing/(.+)': "<rootDir>/src/testing/$1",
|
||||
},
|
||||
extensionsToTreatAsEsm: ['.ts', '.tsx'],
|
||||
// collectCoverage: true,
|
||||
// collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
|
||||
// coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$', '(.*).d.ts$'],
|
||||
// coverageDirectory: '<rootDir>/coverage/',
|
||||
}
|
||||
@@ -26,10 +26,10 @@ const pagesCoverage = {
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
const storybookStoriesFolders = process.env.STORYBOOK_SCOPE;
|
||||
|
||||
module.exports = storybookStoriesFolders === 'pages' ?
|
||||
pagesCoverage : storybookStoriesFolders === 'modules' ? modulesCoverage
|
||||
module.exports = storybookStoriesFolders === 'pages'
|
||||
? pagesCoverage
|
||||
: storybookStoriesFolders === 'modules'
|
||||
? modulesCoverage
|
||||
: globalCoverage;
|
||||
@@ -2,6 +2,37 @@
|
||||
"name": "twenty",
|
||||
"version": "0.2.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:clean": "yarn dev --force",
|
||||
"build": "tsc && vite build && yarn build:inject-runtime-env",
|
||||
"build:inject-runtime-env": "./scripts/inject-runtime-env.sh",
|
||||
"preview": "vite preview",
|
||||
"eslint-plugin:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"",
|
||||
"fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
|
||||
"test": "jest",
|
||||
"coverage": "jest --coverage",
|
||||
"storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
|
||||
"storybook:dev": "storybook dev -p 6006 --no-open",
|
||||
"storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
|
||||
"storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
|
||||
"storybook:build": "storybook build",
|
||||
"storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
|
||||
"storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
|
||||
"storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
|
||||
"storybook:test": "test-storybook",
|
||||
"storybook:test-slow": "test-storybook --maxWorkers=3",
|
||||
"storybook:coverage": "yarn storybook:test-slow --coverage && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
|
||||
"storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
|
||||
"storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
|
||||
"graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.cjs",
|
||||
"graphql:metadata:generate": "dotenv cross-var graphql-codegen -- --config codegen-metadata.cjs",
|
||||
"chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
|
||||
"install": "yarn eslint-plugin:setup"
|
||||
},
|
||||
"dependencies": {
|
||||
"@air/react-drag-to-select": "^5.0.8",
|
||||
"@apollo/client": "^3.7.17",
|
||||
@@ -15,11 +46,9 @@
|
||||
"@hello-pangea/dnd": "^16.2.0",
|
||||
"@hookform/resolvers": "^3.1.1",
|
||||
"@sniptt/guards": "^0.2.0",
|
||||
"@swc/core": "^1.3.100",
|
||||
"@swc/jest": "^0.2.29",
|
||||
"@tabler/icons-react": "^2.30.0",
|
||||
"@types/node": "^16.18.4",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/react-helmet-async": "^1.0.3",
|
||||
"afterframe": "^1.0.2",
|
||||
"apollo-upload-client": "^17.0.0",
|
||||
"date-fns": "^2.30.0",
|
||||
@@ -57,43 +86,79 @@
|
||||
"ts-key-enum": "^2.0.12",
|
||||
"type-fest": "^4.1.0",
|
||||
"uuid": "^9.0.0",
|
||||
"vite-tsconfig-paths": "^4.2.1",
|
||||
"xlsx-ugnis": "^0.19.3",
|
||||
"zod": "^3.22.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "PORT=3001 craco start --max-warnings=0",
|
||||
"build:inject-runtime-env": "./scripts/inject-runtime-env.sh",
|
||||
"build": "craco build && yarn build:inject-runtime-env",
|
||||
"test": "craco test",
|
||||
"coverage": "craco test --coverage .",
|
||||
"lint": "eslint src --max-warnings=0",
|
||||
"eslint-plugin:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
|
||||
"storybook:dev": "storybook dev -p 6006 -s ../public",
|
||||
"storybook:test": "test-storybook",
|
||||
"storybook:test-slow": "test-storybook --maxWorkers=3",
|
||||
"storybook:build": "storybook build -s public",
|
||||
"storybook:coverage": "test-storybook --coverage --maxWorkers=3 && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
|
||||
"storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
|
||||
"storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
|
||||
"storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
|
||||
"storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
|
||||
"storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
|
||||
"storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
|
||||
"storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
|
||||
"storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
|
||||
"graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.js",
|
||||
"graphql:metadata:generate": "dotenv cross-var graphql-codegen -- --config codegen-metadata.js",
|
||||
"chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
|
||||
"install": "yarn eslint-plugin:setup"
|
||||
"devDependencies": {
|
||||
"@graphql-codegen/cli": "^3.3.1",
|
||||
"@graphql-codegen/client-preset": "^4.1.0",
|
||||
"@graphql-codegen/typescript": "^3.0.4",
|
||||
"@graphql-codegen/typescript-operations": "^3.0.4",
|
||||
"@graphql-codegen/typescript-react-apollo": "^3.3.7",
|
||||
"@storybook/addon-actions": "^7.6.3",
|
||||
"@storybook/addon-coverage": "^1.0.0",
|
||||
"@storybook/addon-essentials": "^7.6.3",
|
||||
"@storybook/addon-interactions": "^7.6.3",
|
||||
"@storybook/addon-links": "^7.6.3",
|
||||
"@storybook/addon-onboarding": "^1.0.9",
|
||||
"@storybook/addon-themes": "^7.6.3",
|
||||
"@storybook/blocks": "^7.6.3",
|
||||
"@storybook/react": "^7.6.3",
|
||||
"@storybook/react-vite": "^7.6.3",
|
||||
"@storybook/test": "^7.6.3",
|
||||
"@storybook/test-runner": "^0.16.0",
|
||||
"@testing-library/jest-dom": "^6.1.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/apollo-upload-client": "^17.0.2",
|
||||
"@types/deep-equal": "^1.0.1",
|
||||
"@types/jest": "^29.5.10",
|
||||
"@types/js-cookie": "^3.0.3",
|
||||
"@types/lodash.camelcase": "^4.3.7",
|
||||
"@types/lodash.debounce": "^4.0.7",
|
||||
"@types/lodash.kebabcase": "^4.1.7",
|
||||
"@types/lodash.snakecase": "^4.1.9",
|
||||
"@types/luxon": "^3.3.0",
|
||||
"@types/node": "^20.10.0",
|
||||
"@types/react": "^18.2.39",
|
||||
"@types/react-datepicker": "^4.11.2",
|
||||
"@types/react-dom": "^18.2.15",
|
||||
"@types/scroll-into-view": "^1.16.0",
|
||||
"@types/uuid": "^9.0.1",
|
||||
"@typescript-eslint/eslint-plugin": "^6.10.0",
|
||||
"@typescript-eslint/parser": "^6.10.0",
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"chromatic": "^6.18.0",
|
||||
"concurrently": "^8.0.1",
|
||||
"cross-var": "^1.1.0",
|
||||
"dotenv-cli": "^7.2.1",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-prefer-arrow": "^1.2.3",
|
||||
"eslint-plugin-prettier": "^5.0.1",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.4",
|
||||
"eslint-plugin-simple-import-sort": "^10.0.0",
|
||||
"eslint-plugin-storybook": "^0.6.15",
|
||||
"eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
|
||||
"eslint-plugin-unused-imports": "^3.0.0",
|
||||
"http-server": "^14.1.1",
|
||||
"jest": "29.7.0",
|
||||
"jest-environment-jsdom": "29.7.0",
|
||||
"msw": "1.3.2",
|
||||
"msw-storybook-addon": "^1.10.0",
|
||||
"prettier": "^3.1.0",
|
||||
"storybook": "^7.6.3",
|
||||
"storybook-addon-cookie": "^3.1.0",
|
||||
"storybook-addon-pseudo-states": "^2.1.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.0",
|
||||
"vite-plugin-svgr": "^4.2.0"
|
||||
},
|
||||
"overrides": {
|
||||
"react-refresh": "0.14.0"
|
||||
},
|
||||
"jest": {
|
||||
"testMatch": [
|
||||
"<rootDir>/**/*.test.ts",
|
||||
"<rootDir>/**/*.test.tsx"
|
||||
]
|
||||
"engines": {
|
||||
"node": "^18.16.0",
|
||||
"npm": "please-use-yarn"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
@@ -107,76 +172,8 @@
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@craco/craco": "^7.1.0",
|
||||
"@graphql-codegen/cli": "^3.3.1",
|
||||
"@graphql-codegen/client-preset": "^4.1.0",
|
||||
"@graphql-codegen/typescript": "^3.0.4",
|
||||
"@graphql-codegen/typescript-operations": "^3.0.4",
|
||||
"@graphql-codegen/typescript-react-apollo": "^3.3.7",
|
||||
"@storybook/addon-actions": "^7.0.22",
|
||||
"@storybook/addon-coverage": "^0.0.8",
|
||||
"@storybook/addon-essentials": "^7.0.22",
|
||||
"@storybook/addon-interactions": "^7.0.22",
|
||||
"@storybook/addon-links": "^7.0.22",
|
||||
"@storybook/addon-styling": "^1.3.0",
|
||||
"@storybook/jest": "^0.1.0",
|
||||
"@storybook/node-logger": "^7.0.22",
|
||||
"@storybook/react": "^7.0.22",
|
||||
"@storybook/react-webpack5": "^7.0.22",
|
||||
"@storybook/test-runner": "^0.10.0",
|
||||
"@storybook/testing-library": "^0.1.0",
|
||||
"@svgr/plugin-jsx": "^8.1.0",
|
||||
"@svgr/webpack": "^8.0.1",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/apollo-upload-client": "^17.0.2",
|
||||
"@types/deep-equal": "^1.0.1",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/js-cookie": "^3.0.3",
|
||||
"@types/lodash.camelcase": "^4.3.7",
|
||||
"@types/lodash.debounce": "^4.0.7",
|
||||
"@types/lodash.kebabcase": "^4.1.7",
|
||||
"@types/lodash.snakecase": "^4.1.9",
|
||||
"@types/luxon": "^3.3.0",
|
||||
"@types/react-datepicker": "^4.11.2",
|
||||
"@types/scroll-into-view": "^1.16.0",
|
||||
"@types/uuid": "^9.0.1",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.5",
|
||||
"@typescript-eslint/parser": "^6.7.5",
|
||||
"@typescript-eslint/utils": "^6.7.0",
|
||||
"babel-plugin-named-exports-order": "^0.0.2",
|
||||
"chromatic": "^6.18.0",
|
||||
"concurrently": "^8.0.1",
|
||||
"cross-var": "^1.1.0",
|
||||
"dotenv-cli": "^7.2.1",
|
||||
"esbuild-plugin-svgr": "^2.1.0",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-config-standard-with-typescript": "^23.0.0",
|
||||
"eslint-plugin-prefer-arrow": "^1.2.3",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-simple-import-sort": "^10.0.0",
|
||||
"eslint-plugin-storybook": "^0.6.12",
|
||||
"eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
|
||||
"eslint-plugin-unused-imports": "^3.0.0",
|
||||
"http-server": "^14.1.1",
|
||||
"msw": "1.3.2",
|
||||
"msw-storybook-addon": "^1.10.0",
|
||||
"prettier": "^2.8.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"storybook": "^7.0.22",
|
||||
"storybook-addon-cookie": "^3.0.1",
|
||||
"storybook-addon-pseudo-states": "^2.1.0",
|
||||
"ts-jest": "^29.1.0",
|
||||
"tsup": "^7.2.0",
|
||||
"typescript": "^5.2.2",
|
||||
"webpack": "^5.75.0"
|
||||
},
|
||||
"msw": {
|
||||
"workerDirectory": "public"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.19+sha256.732620bac8b1690d507274f025f3c6cfdc3627a84d9642e38a07452cc00e0f2e"
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useCallback } from 'react';
|
||||
import { matchPath, useLocation } from 'react-router-dom';
|
||||
import { parse } from 'url';
|
||||
|
||||
import { AppBasePath } from '@/types/AppBasePath';
|
||||
|
||||
@@ -10,7 +9,7 @@ export const useIsMatchingLocation = () => {
|
||||
return useCallback(
|
||||
(path: string, basePath?: AppBasePath) => {
|
||||
const constructedPath = basePath
|
||||
? parse(`${basePath}/${path}`).pathname ?? ''
|
||||
? new URL(basePath + path, document.location.origin).pathname ?? ''
|
||||
: path;
|
||||
|
||||
return !!matchPath(constructedPath, location.pathname);
|
||||
|
||||
@@ -26,9 +26,7 @@ import '@emotion/react';
|
||||
import './index.css';
|
||||
import 'react-loading-skeleton/dist/skeleton.css';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement,
|
||||
);
|
||||
const root = ReactDOM.createRoot(document.getElementById('root')!);
|
||||
|
||||
root.render(
|
||||
<RecoilRoot>
|
||||
@@ -68,6 +66,5 @@ root.render(
|
||||
);
|
||||
|
||||
declare module '@emotion/react' {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
export interface Theme extends ThemeType {}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/* eslint-disable no-loop-func */
|
||||
import {
|
||||
ApolloClient,
|
||||
ApolloClientOptions,
|
||||
|
||||
@@ -14,7 +14,7 @@ const parseQuery = (queryString: string) => {
|
||||
const queryObj = gql`
|
||||
${queryString}
|
||||
`;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
||||
const { name } = queryObj.definitions[0] as any;
|
||||
return [name ? name.value : 'Generic', queryString.trim()];
|
||||
};
|
||||
@@ -25,10 +25,10 @@ export const loggerLink = (getSchemaName: (operation: Operation) => string) =>
|
||||
operation.setContext({ start: Date.now() });
|
||||
|
||||
const { variables } = operation;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
||||
const operationType = (operation.query.definitions[0] as any).operation;
|
||||
const headers = operation.getContext().headers;
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
|
||||
const [queryName, query] = parseQuery(operation.query.loc!.source.body);
|
||||
|
||||
if (operationType === 'subscription') {
|
||||
@@ -65,7 +65,6 @@ export const loggerLink = (getSchemaName: (operation: Operation) => string) =>
|
||||
getGroup(!hasError)(...titleArgs);
|
||||
|
||||
if (errors) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
errors.forEach((err: any) => {
|
||||
logDebug(
|
||||
`%c${err.message}`,
|
||||
|
||||
@@ -176,7 +176,8 @@ export const CommandMenu = () => {
|
||||
.concat(activities.map((activity) => activity.id));
|
||||
|
||||
return (
|
||||
isCommandMenuOpened && (
|
||||
<>
|
||||
{isCommandMenuOpened && (
|
||||
<StyledDialog>
|
||||
<StyledInput
|
||||
value={search}
|
||||
@@ -247,7 +248,9 @@ export const CommandMenu = () => {
|
||||
avatarUrl={null}
|
||||
colorId={person.id}
|
||||
placeholder={
|
||||
person.name.firstName + ' ' + person.name.lastName
|
||||
person.name.firstName +
|
||||
' ' +
|
||||
person.name.lastName
|
||||
}
|
||||
/>
|
||||
)}
|
||||
@@ -294,6 +297,7 @@ export const CommandMenu = () => {
|
||||
</ScrollWrapper>
|
||||
</StyledList>
|
||||
</StyledDialog>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
|
||||
import { CommandType } from '@/command-menu/types/Command';
|
||||
|
||||
@@ -42,7 +42,8 @@ export const KeyboardShortcutMenu = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
isKeyboardShortcutMenuOpened && (
|
||||
<>
|
||||
{isKeyboardShortcutMenuOpened && (
|
||||
<KeyboardMenuDialog onClose={toggleKeyboardShortcutMenu}>
|
||||
<KeyboardMenuGroup heading="Table">
|
||||
{keyboardShortcutsTable.map((TableShortcut) => (
|
||||
@@ -55,6 +56,7 @@ export const KeyboardShortcutMenu = () => {
|
||||
))}
|
||||
</KeyboardMenuGroup>
|
||||
</KeyboardMenuDialog>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/* eslint-disable no-console */
|
||||
import { useMemo } from 'react';
|
||||
import { ApolloClient, InMemoryCache } from '@apollo/client';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { FieldContextProvider } from '../../../__stories__/FieldContextProvider';
|
||||
import { useBooleanField } from '../../../hooks/useBooleanField';
|
||||
@@ -61,7 +60,7 @@ export default meta;
|
||||
|
||||
type Story = StoryObj<typeof BooleanFieldInputWithContext>;
|
||||
|
||||
const submitJestFn = jest.fn();
|
||||
const submitJestFn = fn();
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
|
||||
@@ -65,9 +64,9 @@ const DateFieldInputWithContext = ({
|
||||
);
|
||||
};
|
||||
|
||||
const escapeJestFn = jest.fn();
|
||||
const enterJestFn = jest.fn();
|
||||
const clickOutsideJestFn = jest.fn();
|
||||
const escapeJestFn = fn();
|
||||
const enterJestFn = fn();
|
||||
const clickOutsideJestFn = fn();
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'UI/Data/Field/Input/DateFieldInput',
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, waitFor, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
|
||||
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
|
||||
@@ -68,11 +67,11 @@ const EmailFieldInputWithContext = ({
|
||||
);
|
||||
};
|
||||
|
||||
const enterJestFn = jest.fn();
|
||||
const escapeJestfn = jest.fn();
|
||||
const clickOutsideJestFn = jest.fn();
|
||||
const tabJestFn = jest.fn();
|
||||
const shiftTabJestFn = jest.fn();
|
||||
const enterJestFn = fn();
|
||||
const escapeJestfn = fn();
|
||||
const clickOutsideJestFn = fn();
|
||||
const tabJestFn = fn();
|
||||
const shiftTabJestFn = fn();
|
||||
|
||||
const clearMocksDecorator: Decorator = (Story, context) => {
|
||||
if (context.parameters.clearMocks) {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, waitFor, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
|
||||
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
|
||||
@@ -68,11 +67,11 @@ const NumberFieldInputWithContext = ({
|
||||
);
|
||||
};
|
||||
|
||||
const enterJestFn = jest.fn();
|
||||
const escapeJestfn = jest.fn();
|
||||
const clickOutsideJestFn = jest.fn();
|
||||
const tabJestFn = jest.fn();
|
||||
const shiftTabJestFn = jest.fn();
|
||||
const enterJestFn = fn();
|
||||
const escapeJestfn = fn();
|
||||
const clickOutsideJestFn = fn();
|
||||
const tabJestFn = fn();
|
||||
const shiftTabJestFn = fn();
|
||||
|
||||
const clearMocksDecorator: Decorator = (Story, context) => {
|
||||
if (context.parameters.clearMocks) {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, waitFor, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
|
||||
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
|
||||
@@ -69,11 +68,11 @@ const PhoneFieldInputWithContext = ({
|
||||
);
|
||||
};
|
||||
|
||||
const enterJestFn = jest.fn();
|
||||
const escapeJestfn = jest.fn();
|
||||
const clickOutsideJestFn = jest.fn();
|
||||
const tabJestFn = jest.fn();
|
||||
const shiftTabJestFn = jest.fn();
|
||||
const enterJestFn = fn();
|
||||
const escapeJestfn = fn();
|
||||
const clickOutsideJestFn = fn();
|
||||
const tabJestFn = fn();
|
||||
const shiftTabJestFn = fn();
|
||||
|
||||
const clearMocksDecorator: Decorator = (Story, context) => {
|
||||
if (context.parameters.clearMocks) {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { FieldMetadataType } from '~/generated-metadata/graphql';
|
||||
@@ -60,7 +59,7 @@ const RatingFieldInputWithContext = ({
|
||||
);
|
||||
};
|
||||
|
||||
const submitJestFn = jest.fn();
|
||||
const submitJestFn = fn();
|
||||
|
||||
const clearMocksDecorator: Decorator = (Story, context) => {
|
||||
if (context.parameters.clearMocks) {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, waitFor, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
|
||||
|
||||
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
@@ -66,8 +65,8 @@ const RelationFieldInputWithContext = ({
|
||||
);
|
||||
};
|
||||
|
||||
const submitJestFn = jest.fn();
|
||||
const cancelJestFn = jest.fn();
|
||||
const submitJestFn = fn();
|
||||
const cancelJestFn = fn();
|
||||
|
||||
const clearMocksDecorator: Decorator = (Story, context) => {
|
||||
if (context.parameters.clearMocks) {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, waitFor, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
|
||||
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
|
||||
@@ -68,11 +67,11 @@ const TextFieldInputWithContext = ({
|
||||
);
|
||||
};
|
||||
|
||||
const enterJestFn = jest.fn();
|
||||
const escapeJestfn = jest.fn();
|
||||
const clickOutsideJestFn = jest.fn();
|
||||
const tabJestFn = jest.fn();
|
||||
const shiftTabJestFn = jest.fn();
|
||||
const enterJestFn = fn();
|
||||
const escapeJestfn = fn();
|
||||
const clickOutsideJestFn = fn();
|
||||
const tabJestFn = fn();
|
||||
const shiftTabJestFn = fn();
|
||||
|
||||
const clearMocksDecorator: Decorator = (Story, context) => {
|
||||
if (context.parameters.clearMocks) {
|
||||
|
||||
@@ -31,13 +31,15 @@ type AssertFieldMetadataFunction = <
|
||||
? FieldEmailMetadata
|
||||
: E extends 'SELECT'
|
||||
? FieldSelectMetadata
|
||||
: E extends 'RATING'
|
||||
? FieldRatingMetadata
|
||||
: E extends 'LINK'
|
||||
? FieldLinkMetadata
|
||||
: E extends 'NUMBER'
|
||||
? FieldNumberMetadata
|
||||
: E extends 'PHONE'
|
||||
? FieldPhoneMetadata
|
||||
: E extends 'RATING'
|
||||
: E extends 'PROBABILITY'
|
||||
? FieldRatingMetadata
|
||||
: E extends 'RELATION'
|
||||
? FieldRelationMetadata
|
||||
|
||||
@@ -65,4 +65,4 @@ export const getRecordOptimisticEffectDefinition = ({
|
||||
},
|
||||
isUsingFlexibleBackend: true,
|
||||
objectMetadataItem,
|
||||
} satisfies OptimisticEffectDefinition);
|
||||
}) satisfies OptimisticEffectDefinition;
|
||||
|
||||
@@ -12,7 +12,7 @@ export type RecordBoardInternalEffectProps = {
|
||||
onFieldsChange: (fields: any) => void;
|
||||
};
|
||||
|
||||
export const RecordBoardInternalEffect = ({}) => {
|
||||
export const RecordBoardInternalEffect = () => {
|
||||
const updateCompanyColumnsBoardInternal =
|
||||
useUpdateCompanyBoardColumnsInternal();
|
||||
const { setActionBarEntries } = useRecordBoardActionBarEntriesInternal();
|
||||
|
||||
@@ -22,7 +22,8 @@ export const useBoardColumnsInternal = () => {
|
||||
if (!stages.length) return;
|
||||
|
||||
return Promise.all(
|
||||
stages.map((stage) =>
|
||||
stages.map(
|
||||
(stage) =>
|
||||
updateOnePipelineStep?.({
|
||||
idToUpdate: stage.id,
|
||||
input: {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
|
||||
import { IconUserCircle } from '@/ui/display/icon';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
|
||||
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { SettingsObjectDisabledMenuDropDown } from '../SettingsObjectDisabledMenuDropDown';
|
||||
|
||||
const handleActivateMockFunction = jest.fn();
|
||||
const handleEraseMockFunction = jest.fn();
|
||||
const handleActivateMockFunction = fn();
|
||||
const handleEraseMockFunction = fn();
|
||||
|
||||
const ClearMocksDecorator: Decorator = (Story, context) => {
|
||||
if (context.parameters.clearMocks) {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// @ts-expect-error // Todo: remove usage of react-data-grid
|
||||
import DataGrid, { DataGridProps } from 'react-data-grid';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// @ts-expect-error // Todo: remove usage of react-data-grid
|
||||
import { Column, FormatterProps, useRowSelection } from 'react-data-grid';
|
||||
|
||||
import { RawData } from '@/spreadsheet-import/types';
|
||||
|
||||
@@ -20,20 +20,21 @@ export const SelectHeaderTable = ({
|
||||
|
||||
return (
|
||||
<Table
|
||||
rowKeyGetter={(row) => data.indexOf(row)}
|
||||
// Todo: remove usage of react-data-grid
|
||||
rowKeyGetter={(row: any) => data.indexOf(row)}
|
||||
rows={data}
|
||||
columns={columns}
|
||||
selectedRows={selectedRows}
|
||||
onSelectedRowsChange={(newRows) => {
|
||||
onSelectedRowsChange={(newRows: any) => {
|
||||
// allow selecting only one row
|
||||
newRows.forEach((value) => {
|
||||
newRows.forEach((value: any) => {
|
||||
if (!selectedRows.has(value as number)) {
|
||||
setSelectedRows(new Set([value as number]));
|
||||
return;
|
||||
}
|
||||
});
|
||||
}}
|
||||
onRowClick={(row) => {
|
||||
onRowClick={(row: any) => {
|
||||
setSelectedRows(new Set([data.indexOf(row)]));
|
||||
}}
|
||||
headerRowHeight={0}
|
||||
|
||||
@@ -44,9 +44,17 @@ const StyledContainer = styled.div`
|
||||
${theme.font.color.primary} 20px
|
||||
);
|
||||
`};
|
||||
background-position: 0 0, 0 0, 100% 0, 0 100%;
|
||||
background-position:
|
||||
0 0,
|
||||
0 0,
|
||||
100% 0,
|
||||
0 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px;
|
||||
background-size:
|
||||
2px 100%,
|
||||
100% 2px,
|
||||
2px 100%,
|
||||
100% 2px;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// @ts-expect-error // Todo: remove usage of react-data-grid
|
||||
import { Column } from 'react-data-grid';
|
||||
import { createPortal } from 'react-dom';
|
||||
import styled from '@emotion/styled';
|
||||
@@ -48,7 +49,7 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
|
||||
)}
|
||||
</StyledHeaderContainer>
|
||||
),
|
||||
formatter: ({ row }) => (
|
||||
formatter: ({ row }: any) => (
|
||||
<StyledDefaultContainer>{row[column.key]}</StyledDefaultContainer>
|
||||
),
|
||||
}),
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
// @ts-expect-error Todo: remove usage of react-data-grid
|
||||
import { RowsChangeData } from 'react-data-grid';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
@@ -105,14 +106,18 @@ export const ValidationStep = <T extends string>({
|
||||
rows: typeof data,
|
||||
changedData?: RowsChangeData<(typeof data)[number]>,
|
||||
) => {
|
||||
const changes = changedData?.indexes.reduce((acc, index) => {
|
||||
const changes = changedData?.indexes.reduce(
|
||||
// Todo: remove usage of react-data-grid
|
||||
(acc: any, index: any) => {
|
||||
// when data is filtered val !== actual index in data
|
||||
const realIndex = data.findIndex(
|
||||
(value) => value.__index === rows[index].__index,
|
||||
);
|
||||
acc[realIndex] = rows[index];
|
||||
return acc;
|
||||
}, {} as Record<number, (typeof data)[number]>);
|
||||
},
|
||||
{} as Record<number, (typeof data)[number]>,
|
||||
);
|
||||
const newData = Object.assign([], data, changes);
|
||||
updateData(newData);
|
||||
},
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// @ts-expect-error // Todo: remove usage of react-data-grid
|
||||
import { Column, useRowSelection } from 'react-data-grid';
|
||||
import { createPortal } from 'react-dom';
|
||||
import styled from '@emotion/styled';
|
||||
@@ -71,7 +72,7 @@ export const generateColumns = <T extends string>(
|
||||
resizable: false,
|
||||
sortable: false,
|
||||
frozen: true,
|
||||
formatter: (props) => {
|
||||
formatter: (props: any) => {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
||||
|
||||
@@ -116,7 +117,8 @@ export const generateColumns = <T extends string>(
|
||||
</StyledHeaderContainer>
|
||||
),
|
||||
editable: column.fieldType.type !== 'checkbox',
|
||||
editor: ({ row, onRowChange, onClose }) => {
|
||||
// Todo: remove usage of react-data-grid
|
||||
editor: ({ row, onRowChange, onClose }: any) => {
|
||||
const columnKey = column.key as keyof (Data<T> & Meta);
|
||||
let component;
|
||||
|
||||
@@ -162,7 +164,8 @@ export const generateColumns = <T extends string>(
|
||||
editorOptions: {
|
||||
editOnClick: true,
|
||||
},
|
||||
formatter: ({ row, onRowChange }) => {
|
||||
// Todo: remove usage of react-data-grid
|
||||
formatter: ({ row, onRowChange }: { row: any; onRowChange: any }) => {
|
||||
const columnKey = column.key as keyof (Data<T> & Meta);
|
||||
let component;
|
||||
|
||||
|
||||
@@ -6,7 +6,8 @@ export const findUnmatchedRequiredFields = <T extends string>(
|
||||
columns: Columns<T>,
|
||||
) =>
|
||||
fields
|
||||
.filter((field) =>
|
||||
.filter(
|
||||
(field) =>
|
||||
field.validations?.some((validation) => validation.rule === 'required'),
|
||||
)
|
||||
.filter(
|
||||
|
||||
@@ -7,8 +7,11 @@ const titleMap: Record<Field<string>['fieldType']['type'], string> = {
|
||||
};
|
||||
|
||||
export const generateExampleRow = <T extends string>(fields: Fields<T>) => [
|
||||
fields.reduce((acc, field) => {
|
||||
fields.reduce(
|
||||
(acc, field) => {
|
||||
acc[field.key as T] = field.example || titleMap[field.fieldType.type];
|
||||
return acc;
|
||||
}, {} as Record<T, string>),
|
||||
},
|
||||
{} as Record<T, string>,
|
||||
),
|
||||
];
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { TablerIconsProps } from '@/ui/display/icon';
|
||||
|
||||
import { ReactComponent as IconAddressBookRaw } from '../assets/address-book.svg';
|
||||
import IconAddressBookRaw from '../assets/address-book.svg?react';
|
||||
|
||||
type IconAddressBookProps = TablerIconsProps;
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import { ReactComponent as IconGoogleRaw } from '../assets/google-icon.svg';
|
||||
import IconGoogleRaw from '../assets/google-icon.svg?react';
|
||||
|
||||
interface IconGoogleProps {
|
||||
size?: number;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { TablerIconsProps } from '@/ui/display/icon';
|
||||
|
||||
import { ReactComponent as IconTwentyStarRaw } from '../assets/twenty-star.svg';
|
||||
import IconTwentyStarRaw from '../assets/twenty-star.svg?react';
|
||||
|
||||
type IconTwentyStarProps = TablerIconsProps;
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { TablerIconsProps } from '@/ui/display/icon';
|
||||
|
||||
import { ReactComponent as IconTwentyStarFilledRaw } from '../assets/twenty-star-filled.svg';
|
||||
import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react';
|
||||
|
||||
type IconTwentyStarFilledProps = TablerIconsProps;
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
@@ -23,7 +22,7 @@ type Story = StoryObj<typeof Status>;
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
color: 'red',
|
||||
onClick: jest.fn(),
|
||||
onClick: fn(),
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
play: async ({ canvasElement, args }) => {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
@@ -23,7 +22,7 @@ type Story = StoryObj<typeof Tag>;
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
color: 'red',
|
||||
onClick: jest.fn(),
|
||||
onClick: fn(),
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
play: async ({ canvasElement, args }) => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
|
||||
@@ -33,9 +33,7 @@ const StyledButton = styled.button<
|
||||
align-items: center;
|
||||
backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
|
||||
background: ${({ theme, isActive }) =>
|
||||
!!isActive
|
||||
? theme.background.transparent.medium
|
||||
: theme.background.primary};
|
||||
isActive ? theme.background.transparent.medium : theme.background.primary};
|
||||
border: ${({ focus, theme }) =>
|
||||
focus ? `1px solid ${theme.color.blue}` : 'transparent'};
|
||||
border-radius: ${({ position, theme }) => {
|
||||
|
||||
@@ -19,7 +19,9 @@ const StyledIconButton = styled.button`
|
||||
|
||||
outline: none;
|
||||
padding: 0;
|
||||
transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
|
||||
transition:
|
||||
color 0.1s ease-in-out,
|
||||
background 0.1s ease-in-out;
|
||||
|
||||
&:disabled {
|
||||
background: ${({ theme }) => theme.background.quaternary};
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { IconBrandGoogle } from '@/ui/display/icon';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { MainButton } from '../MainButton';
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
const clickJestFn = fn();
|
||||
|
||||
const meta: Meta<typeof MainButton> = {
|
||||
title: 'UI/Input/Button/MainButton',
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { IconArrowRight } from '@/ui/display/icon';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { RoundedIconButton } from '../RoundedIconButton';
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
const clickJestFn = fn();
|
||||
|
||||
const meta: Meta<typeof RoundedIconButton> = {
|
||||
title: 'UI/Input/Button/RoundedIconButton',
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, waitFor, within } from '@storybook/testing-library';
|
||||
import { expect, userEvent, waitFor, within } from '@storybook/test';
|
||||
import { PlayFunction } from '@storybook/types';
|
||||
|
||||
import { Button } from '@/ui/input/button/components/Button';
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
import { expect, within } from '@storybook/test';
|
||||
|
||||
import { IconCheckbox } from '@/ui/display/icon';
|
||||
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
||||
|
||||
@@ -32,7 +32,8 @@ const StyledSection = styled.div<{ isExpanded: boolean }>`
|
||||
max-height: ${({ isExpanded }) => (isExpanded ? '1000px' : 0)};
|
||||
opacity: ${({ isExpanded }) => (isExpanded ? 1 : 0)};
|
||||
overflow: hidden;
|
||||
transition: max-height ${({ theme }) => theme.animation.duration.normal}s,
|
||||
transition:
|
||||
max-height ${({ theme }) => theme.animation.duration.normal}s,
|
||||
opacity ${({ theme }) => theme.animation.duration.normal}s;
|
||||
`;
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { fn } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
@@ -18,7 +18,7 @@ const meta: Meta<typeof ContactLink> = {
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ContactLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
const clickJestFn = fn();
|
||||
|
||||
export const Email: Story = {
|
||||
args: {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
@@ -19,7 +18,7 @@ const meta: Meta<typeof RawLink> = {
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof RawLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
const clickJestFn = fn();
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
@@ -18,7 +17,7 @@ const meta: Meta<typeof RoundedLink> = {
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof RoundedLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
const clickJestFn = fn();
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
@@ -18,7 +17,7 @@ const meta: Meta<typeof SocialLink> = {
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SocialLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
const clickJestFn = fn();
|
||||
|
||||
const linkedin: LinkType = LinkType.LinkedIn;
|
||||
const twitter: LinkType = LinkType.Twitter;
|
||||
|
||||
@@ -121,4 +121,4 @@ export const Step = ({
|
||||
);
|
||||
};
|
||||
|
||||
Step.displayName = 'StepBar/Step';
|
||||
Step.displayName = 'StepBar';
|
||||
|
||||
@@ -2,15 +2,13 @@ import { css } from '@emotion/react';
|
||||
|
||||
import { ThemeType } from './theme';
|
||||
|
||||
export const overlayBackground = (props: { theme: ThemeType }) =>
|
||||
css`
|
||||
export const overlayBackground = (props: { theme: ThemeType }) => css`
|
||||
backdrop-filter: blur(8px);
|
||||
background: ${props.theme.background.transparent.secondary};
|
||||
box-shadow: ${props.theme.boxShadow.strong};
|
||||
`;
|
||||
|
||||
export const textInputStyle = (props: { theme: ThemeType }) =>
|
||||
css`
|
||||
export const textInputStyle = (props: { theme: ThemeType }) => css`
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: ${props.theme.font.color.primary};
|
||||
@@ -28,8 +26,7 @@ export const textInputStyle = (props: { theme: ThemeType }) =>
|
||||
}
|
||||
`;
|
||||
|
||||
export const hoverBackground = (props: any) =>
|
||||
css`
|
||||
export const hoverBackground = (props: any) => css`
|
||||
transition: background 0.1s ease;
|
||||
&:hover {
|
||||
background: ${props.theme.background.transparent.light};
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import {
|
||||
HotkeyCallback,
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { Options, useHotkeys } from 'react-hotkeys-hook';
|
||||
import { Keys } from 'react-hotkeys-hook/dist/types';
|
||||
import { useRecoilState } from 'recoil';
|
||||
@@ -56,7 +55,7 @@ export const useSequenceHotkeys = (
|
||||
|
||||
setPendingHotkey(null);
|
||||
|
||||
if (!!options.preventDefault) {
|
||||
if (options.preventDefault) {
|
||||
keyboardEvent.stopImmediatePropagation();
|
||||
keyboardEvent.stopPropagation();
|
||||
keyboardEvent.preventDefault();
|
||||
|
||||
@@ -109,7 +109,7 @@ export const CreateProfile = () => {
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
},
|
||||
} as any),
|
||||
}) as any,
|
||||
);
|
||||
|
||||
navigate('/');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
import { within } from '@storybook/test';
|
||||
import { graphql } from 'msw';
|
||||
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
import { within } from '@storybook/test';
|
||||
import { graphql } from 'msw';
|
||||
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { fireEvent, within } from '@storybook/testing-library';
|
||||
import { fireEvent, within } from '@storybook/test';
|
||||
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import {
|
||||
|
||||
@@ -28,7 +28,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof ImpersonateEffect>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
import { within } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
import { PageDecoratorArgs } from '~/testing/decorators/PageDecorator';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { userEvent, within } from '@storybook/test';
|
||||
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
import { within } from '@storybook/test';
|
||||
|
||||
import {
|
||||
PageDecorator,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
import { within } from '@storybook/test';
|
||||
|
||||
import {
|
||||
PageDecorator,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { userEvent, within } from '@storybook/test';
|
||||
|
||||
import {
|
||||
PageDecorator,
|
||||
@@ -27,7 +27,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof SettingsNewObject>;
|
||||
|
||||
export const WithStandardSelected: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -27,7 +27,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof SettingsObjectDetail>;
|
||||
|
||||
export const StandardObject: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -27,7 +27,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof SettingsObjectEdit>;
|
||||
|
||||
export const StandardObject: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -28,7 +28,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -28,7 +28,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof SettingsObjectNewFieldStep2>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
import { within } from '@storybook/test';
|
||||
|
||||
import {
|
||||
PageDecorator,
|
||||
|
||||
@@ -23,7 +23,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof SettingsDevelopersApiKeys>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -24,7 +24,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof SettingsDevelopersApiKeyDetail>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -23,7 +23,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof SettingsDevelopersApiKeysNew>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -25,7 +25,7 @@ export default meta;
|
||||
export type Story = StoryObj<typeof Tasks>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({}) => {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
|
||||
1
front/src/react-app-env.d.ts
vendored
1
front/src/react-app-env.d.ts
vendored
@@ -1 +0,0 @@
|
||||
/// <reference types="react-scripts" />
|
||||
@@ -1,4 +1,4 @@
|
||||
import Cookies, { CookieAttributes } from 'js-cookie';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
class CookieStorage {
|
||||
private keys: Set<string> = new Set();
|
||||
@@ -7,7 +7,11 @@ class CookieStorage {
|
||||
return Cookies.get(key);
|
||||
}
|
||||
|
||||
setItem(key: string, value: string, attributes?: CookieAttributes): void {
|
||||
setItem(
|
||||
key: string,
|
||||
value: string,
|
||||
attributes?: Cookies.CookieAttributes,
|
||||
): void {
|
||||
this.keys.add(key);
|
||||
Cookies.set(key, value, attributes);
|
||||
}
|
||||
|
||||
2
front/src/vite-env.d.ts
vendored
Normal file
2
front/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-svgr/client" />
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user