Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Admin UI #4223

Draft
wants to merge 309 commits into
base: next
Choose a base branch
from
Draft
Changes from all commits
Commits
Show all changes
309 commits
Select commit Hold shift + click to select a range
17e8f8d
wip: remove avatar-related changes
adrians5j Oct 2, 2024
e675a7a
wip: remove avatar-related changes
adrians5j Oct 2, 2024
9fb83be
wip
adrians5j Oct 22, 2024
24ce7d1
wip - colors placeholders
adrians5j Oct 22, 2024
a63753f
wip
adrians5j Oct 24, 2024
cd42084
wip
adrians5j Oct 24, 2024
82b5481
wip
adrians5j Oct 24, 2024
c9352e8
wip
adrians5j Oct 24, 2024
2b284e5
wip
adrians5j Oct 24, 2024
5b802ae
wip
adrians5j Oct 24, 2024
2fe7a33
wip
adrians5j Oct 24, 2024
dba63f5
docs: added the Welcome page for the Design System (Storybook) (#4268)
swapnilmmane Oct 24, 2024
c89186f
wip
adrians5j Oct 24, 2024
b7a3462
wip
adrians5j Oct 24, 2024
0523b82
wip
adrians5j Oct 28, 2024
61bce7b
wip
adrians5j Oct 28, 2024
0320857
wip
adrians5j Oct 28, 2024
451188a
wip
adrians5j Oct 28, 2024
0bc0441
wip
adrians5j Oct 28, 2024
366308e
wip
adrians5j Oct 28, 2024
2cc9434
wip
adrians5j Oct 28, 2024
6fa6ed4
wip
adrians5j Oct 28, 2024
5261222
wip
adrians5j Oct 28, 2024
c5e6486
wip
adrians5j Oct 28, 2024
08d10d0
wip
adrians5j Oct 28, 2024
f5795d9
wip
adrians5j Oct 28, 2024
ba2ff84
wip
adrians5j Oct 28, 2024
4051407
Merge branch 'feat/new-admin-ui' into feat/tokens
adrians5j Oct 28, 2024
b53d791
wip
adrians5j Oct 28, 2024
8b04ace
wip
adrians5j Oct 28, 2024
86a1579
wip
adrians5j Oct 28, 2024
50a6ffb
wip
adrians5j Oct 29, 2024
15dd5f0
Merge remote-tracking branch 'origin/feat/tokens' into feat/tokens
adrians5j Oct 29, 2024
e400c74
wip
adrians5j Oct 29, 2024
3afc7b3
wip
adrians5j Oct 29, 2024
369671e
wip
adrians5j Oct 29, 2024
bcd1d5a
wip
adrians5j Oct 29, 2024
dd15b89
wip
adrians5j Oct 29, 2024
3d6973f
wip
adrians5j Oct 29, 2024
99d6dab
wip
adrians5j Oct 29, 2024
e3d6535
wip
adrians5j Oct 29, 2024
c3752c0
wip
adrians5j Oct 31, 2024
044c9e7
wip
adrians5j Oct 31, 2024
1e88e44
wip
adrians5j Oct 31, 2024
2576141
wip
adrians5j Oct 31, 2024
ea3b6ed
wip
adrians5j Oct 31, 2024
2e844f4
wip
adrians5j Oct 31, 2024
5626e88
wip
adrians5j Oct 31, 2024
9a6eddb
Merge branch 'refs/heads/feat/tokens' into adrian/tokens-button
adrians5j Oct 31, 2024
915e2c1
wip
adrians5j Oct 31, 2024
b34dca6
wip
adrians5j Oct 31, 2024
22fc0fb
Merge branch 'refs/heads/feat/tokens' into adrian/tokens-button
adrians5j Oct 31, 2024
8648431
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Oct 31, 2024
cebe470
fix: update deps
adrians5j Oct 31, 2024
55a5247
fix: update wflow
adrians5j Oct 31, 2024
f58aa4b
ci:run workflows
adrians5j Oct 31, 2024
6d187f3
fix: remove babel deps
adrians5j Nov 1, 2024
a1a1808
fix: downgrade react, react-dom, @types/react to 18.2.0
adrians5j Nov 1, 2024
3c3bc35
fix: add missing deps
adrians5j Nov 1, 2024
ac060f3
ci:run workflows
adrians5j Nov 1, 2024
1388b38
chore: update all babel packages to latest version
brunozoric Nov 1, 2024
bd7b8cf
merge: next → feat/new-admin-ui (#4358)
adrians5j Nov 1, 2024
6c7d93e
wip
adrians5j Nov 1, 2024
0943737
wip
adrians5j Nov 1, 2024
19935f7
wip
adrians5j Nov 1, 2024
5bda034
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Nov 1, 2024
e58661a
fix: add missing deps
adrians5j Nov 1, 2024
e6de106
wip
adrians5j Nov 4, 2024
28fc2de
wip
adrians5j Nov 4, 2024
72e95fb
Merge branch 'refs/heads/feat/tokens' into adrian/tokens-button
adrians5j Nov 4, 2024
58512ef
wip
adrians5j Nov 4, 2024
f408a93
wip
adrians5j Nov 4, 2024
89909ad
Merge branch 'refs/heads/feat/tokens' into adrian/tokens-button
adrians5j Nov 4, 2024
2c261ff
wip
adrians5j Nov 4, 2024
7fa4a28
wip
adrians5j Nov 4, 2024
d82393f
Merge branch 'refs/heads/feat/tokens' into adrian/tokens-button
adrians5j Nov 4, 2024
ca9a8e1
feat: import variables from Figma (#4302)
adrians5j Nov 4, 2024
f506f92
wip
adrians5j Nov 5, 2024
6792482
wip
adrians5j Nov 5, 2024
00f2d85
feat(admin-ui): Slider / Range Slider components (#4348)
leopuleo Nov 5, 2024
03fdc74
wip
adrians5j Nov 6, 2024
5fc754f
wip
adrians5j Nov 6, 2024
b9875d1
wip
adrians5j Nov 6, 2024
127e6d9
wip
adrians5j Nov 6, 2024
dda4691
wip
adrians5j Nov 6, 2024
f33fdfe
wip
adrians5j Nov 6, 2024
7a7ab4d
feat: use variables with Button/CircularProgress components
adrians5j Nov 8, 2024
4c51e7a
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Nov 8, 2024
ebb0683
Merge branch 'refs/heads/next' into feat/new-admin-ui
adrians5j Nov 8, 2024
7a7aa13
chore: update deps
adrians5j Nov 8, 2024
69c7fee
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Nov 8, 2024
3aca7c4
Merge branch 'refs/heads/next' into feat/new-admin-ui
adrians5j Nov 8, 2024
760f8be
feat(admin-ui): Toast component (#4249)
leopuleo Nov 11, 2024
3d236fc
refactor(admin-ui): correct design tokens to Tooltip component (#4378)
leopuleo Nov 11, 2024
7c73819
feat: create Avatar component (#4373)
adrians5j Nov 12, 2024
7dc8a02
feat(admin-ui): Input component (#4372)
leopuleo Nov 12, 2024
9672fc8
feat(admin-ui): add tokens and presenter to Switch (#4381)
leopuleo Nov 13, 2024
f61c62c
feat(admin-ui): add tokens to Slider and RangeSlider (#4382)
leopuleo Nov 13, 2024
d015304
refactor(admin-ui): add tokens to Label (#4383)
leopuleo Nov 13, 2024
47d8a25
fix: add @rmwc/switch deps to old-ui component
leopuleo Nov 15, 2024
e93b67c
feat: create Alert component (#4386)
adrians5j Nov 19, 2024
aa01bc1
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Nov 19, 2024
cafeb1d
feat: create `Grid` / `Column` components (#4252)
adrians5j Nov 21, 2024
c31987f
feat(admin-ui): Select component (#4365)
leopuleo Nov 21, 2024
f110a40
wip
adrians5j Nov 25, 2024
dbcb9c6
feat(admin-ui): Checkbox & CheckboxGroup component (#4406)
leopuleo Nov 25, 2024
9c168bb
fix: update apt-get
leopuleo Nov 25, 2024
3b4e6e1
chore: revert
leopuleo Nov 25, 2024
1c8bb9b
wip
adrians5j Nov 26, 2024
43790d9
wip
adrians5j Nov 26, 2024
cd65e6e
wip
adrians5j Nov 26, 2024
36ae40e
feat: create Separator component (#4412)
adrians5j Nov 26, 2024
47b6694
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Nov 27, 2024
54fa286
feat(admin-ui): Textarea component (#4407)
leopuleo Nov 27, 2024
5f59531
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Nov 27, 2024
eedd04a
feat(admin-ui): Radio & RadioGroup component (#4400)
leopuleo Nov 28, 2024
8e14099
wip
adrians5j Nov 28, 2024
79374ab
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Nov 28, 2024
3d4fb5a
wip
adrians5j Nov 29, 2024
f1bd035
feat: create Card component (#4405)
adrians5j Nov 29, 2024
ce5351f
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Dec 2, 2024
2faaebd
wip
adrians5j Dec 2, 2024
9c0678a
feat(admin-ui): form components (#4416)
leopuleo Dec 3, 2024
951ce3d
refactor(admin-ui): border radius token (#4425)
leopuleo Dec 3, 2024
452397a
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Dec 3, 2024
41229f3
Merge branch 'refs/heads/feat/new-admin-ui' into feat/menu
adrians5j Dec 3, 2024
17c1468
wip
adrians5j Dec 4, 2024
bc473e3
wip
adrians5j Dec 4, 2024
bc92493
wip
adrians5j Dec 4, 2024
eb9186d
wip
adrians5j Dec 5, 2024
4579c63
wip
adrians5j Dec 5, 2024
3ed882c
wip
adrians5j Dec 5, 2024
9510452
wip
adrians5j Dec 5, 2024
7f39a88
wip
adrians5j Dec 5, 2024
b1d82d9
wip
adrians5j Dec 5, 2024
e0dd27a
wip
adrians5j Dec 5, 2024
0f34589
wip
adrians5j Dec 5, 2024
733e918
wip
adrians5j Dec 5, 2024
8a1ae08
wip
adrians5j Dec 5, 2024
94388e4
wip
adrians5j Dec 6, 2024
a53e5e1
feat: create Icon component (#4421)
adrians5j Dec 6, 2024
a0816e4
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Dec 6, 2024
69e71d5
wip
adrians5j Dec 11, 2024
3d3d1a6
wip
adrians5j Dec 11, 2024
d941826
wip
adrians5j Dec 12, 2024
c83bab0
wip
adrians5j Dec 12, 2024
c9be0b7
wip
adrians5j Dec 12, 2024
1f0992c
wip
adrians5j Dec 12, 2024
91ec371
wip
adrians5j Dec 12, 2024
12ef4f2
Merge branch 'feat/new-admin-ui' into feat/menu
adrians5j Dec 12, 2024
ef7cc32
wip
adrians5j Dec 12, 2024
4aa7829
wip
adrians5j Dec 16, 2024
26122bc
wip
adrians5j Dec 16, 2024
32daacf
wip
adrians5j Dec 16, 2024
56db86f
wip
adrians5j Dec 16, 2024
2be4fca
wip
adrians5j Dec 16, 2024
e743810
wip
adrians5j Dec 16, 2024
196f99f
wip
adrians5j Dec 16, 2024
68d9fa7
wip
adrians5j Dec 16, 2024
fdd1c5e
wip
adrians5j Dec 16, 2024
18d9aff
wip
adrians5j Dec 16, 2024
c2b3e27
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Dec 17, 2024
49174f0
wip
adrians5j Dec 17, 2024
f6a739d
chore: run prettier
adrians5j Dec 17, 2024
bdfec59
wip
adrians5j Dec 17, 2024
fa76e02
wip
adrians5j Dec 17, 2024
e71e100
wip
adrians5j Dec 17, 2024
49d8857
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Dec 17, 2024
a9253a5
Merge pull request #4449 from webiny/feat/new-admin-ui-next-merge
adrians5j Dec 18, 2024
b77c53d
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Dec 18, 2024
7e5883a
wip
adrians5j Dec 18, 2024
0eeef66
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Dec 18, 2024
2b43711
wip
adrians5j Dec 18, 2024
b165a9b
feat: create Link component (#4440)
adrians5j Dec 18, 2024
59570ae
feat: create DropdownMenu component (#4411)
adrians5j Dec 18, 2024
8b3a8a0
feat(admin-ui): Tag + Icon Button components (#4423)
leopuleo Dec 19, 2024
7bd049d
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Jan 7, 2025
5952f53
wip
adrians5j Jan 7, 2025
9d50b46
Merge pull request #4476 from webiny/feat/new-admin-ui-merge-next-202…
adrians5j Jan 7, 2025
f2f352e
feat(admin-ui): add CodeEditor component (#4467)
leopuleo Jan 9, 2025
29b4e05
Merge remote-tracking branch 'refs/remotes/origin/next' into feat/new…
adrians5j Jan 10, 2025
38a30f5
fix: comment out unsupported prop
adrians5j Jan 10, 2025
f3c3d56
chore: add missing package
leopuleo Jan 14, 2025
2a6ff75
feat(admin-ui): AutoComplete + MultiAutoComplete components (#4459)
leopuleo Jan 14, 2025
021aa25
fix: remove `TopProgressBar` component (#4493)
adrians5j Jan 16, 2025
9707cc2
feat: create Dialog component (#4468)
adrians5j Jan 20, 2025
5a83c53
Merge remote-tracking branch 'refs/remotes/origin/next' into merge/ne…
adrians5j Jan 21, 2025
cd29203
wip
adrians5j Jan 21, 2025
fc5123d
fix: sync dependencies
adrians5j Jan 21, 2025
df1cfba
fix: duplicated dependencies
brunozoric Jan 21, 2025
52095e4
fix: update dependencies
adrians5j Jan 21, 2025
27dbcd3
chore: update socks package
brunozoric Jan 21, 2025
9a50bfc
wip
adrians5j Jan 21, 2025
24a2ea8
wip
adrians5j Jan 21, 2025
2e36e41
wip
adrians5j Jan 21, 2025
fde4418
wip
adrians5j Jan 21, 2025
d0a5baa
wip
adrians5j Jan 21, 2025
94da309
fix: format code
adrians5j Jan 21, 2025
3884d78
Merge branch 'refs/heads/merge/next-to-new-admin-ui-2025-01-21' into …
adrians5j Jan 21, 2025
c982ae4
fix: format code
adrians5j Jan 21, 2025
774817b
wip
adrians5j Jan 21, 2025
78cbae4
fix: sync dependencies
adrians5j Jan 21, 2025
aff4919
Merge branch 'refs/heads/merge/next-to-new-admin-ui-2025-01-21' into …
adrians5j Jan 21, 2025
510708f
wip
adrians5j Jan 21, 2025
42d6d53
wip
adrians5j Jan 21, 2025
07ccdb7
ci:run workflows
adrians5j Jan 21, 2025
f24eea6
feat: introduce theming capabilities (#4474)
adrians5j Jan 21, 2025
9b3d7f8
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Jan 21, 2025
c852e29
wip
adrians5j Jan 21, 2025
538b8c9
Merge branch 'merge/next-to-new-admin-ui-2025-01-21' into feat/wby-cs…
adrians5j Jan 21, 2025
321e446
wip
adrians5j Jan 21, 2025
53d084e
wip
adrians5j Jan 21, 2025
0ac8927
Merge branch 'refs/heads/merge/next-to-new-admin-ui-2025-01-21' into …
adrians5j Jan 21, 2025
7a46fac
feat(admin-ui): DataTable + Skeleton components (#4489)
leopuleo Jan 22, 2025
4760ad2
feat: create Drawer component (#4475)
adrians5j Jan 22, 2025
895d2a9
fix(admin-ui): various UI fixes (#4492)
leopuleo Jan 22, 2025
d6640c8
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Jan 22, 2025
9241333
wip
adrians5j Jan 22, 2025
8249c24
fix: update dependencies
adrians5j Jan 22, 2025
1efe7b2
Merge branch 'refs/heads/merge/next-to-new-admin-ui-2025-01-21' into …
adrians5j Jan 22, 2025
18b0ccc
wip
adrians5j Jan 22, 2025
265859e
wip
adrians5j Jan 22, 2025
4b8fe92
merge: pull changes from next (#4499)
adrians5j Jan 23, 2025
3a7fe47
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Jan 23, 2025
02073cf
wip
adrians5j Jan 23, 2025
f955012
wip
adrians5j Jan 23, 2025
c86bd6b
wip
adrians5j Jan 23, 2025
6c9f38f
wip
adrians5j Jan 23, 2025
fcfe1eb
wip
adrians5j Jan 23, 2025
45ddde0
wip
adrians5j Jan 23, 2025
2c59200
wip
adrians5j Jan 23, 2025
44e90cf
wip
adrians5j Jan 23, 2025
64e0d3b
fix: placeholder pseudo class
leopuleo Jan 23, 2025
ff431bd
fix: custom stories renderer
leopuleo Jan 23, 2025
eec78a2
fix: file pseudo class
leopuleo Jan 23, 2025
52e4d1a
fix: important override
leopuleo Jan 23, 2025
8937889
fix: svg class
leopuleo Jan 23, 2025
025c45f
fix: add custom prefix to twMerge
leopuleo Jan 23, 2025
2e0219d
fix: multiautocomplete
leopuleo Jan 23, 2025
d306eac
fix: group and peer
leopuleo Jan 23, 2025
46f4c3e
fix: slider
leopuleo Jan 23, 2025
fd81003
fix: font-sans
leopuleo Jan 23, 2025
0cb21d4
fix: disabled:placeholder pseudo class
leopuleo Jan 23, 2025
9bf50b6
fix: various
leopuleo Jan 23, 2025
4d107c4
fix: dataTable
leopuleo Jan 23, 2025
5641b12
fix: dialog header
leopuleo Jan 23, 2025
de5ae78
fix: drawer header
leopuleo Jan 23, 2025
47b803a
fix: skeleton
leopuleo Jan 23, 2025
6bb2a6a
fix: tag
leopuleo Jan 23, 2025
9831fb6
feat: prefix TW classes with `wby-`
adrians5j Jan 23, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
7 changes: 3 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -47,8 +47,7 @@ schema.graphql
.pnp.*
lerna.json
.stormTests

# TODO remove after moving traffic splitting config to WPC
gateway.*.json

*storybook.log
.normalizedFigmaExport.json
.normalizedPrimitivesFigmaExport.json
packages/tasks/tpl/*
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@
.webiny/**
packages/ui/src/RichTextEditor/editorjs/**
packages/cli-plugin-deploy-pulumi/commands/newWatch/handler/mqtt.js
packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json
packages/cli-plugin-scaffold-ci/src/githubActions/files/workflows/
lerna.json
coverage/**
23 changes: 8 additions & 15 deletions apps/admin/src/App.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
// Webiny theme variables
// $webiny-theme-light-primary: #fa5723;
// $webiny-theme-light-secondary: #00ccb0;
// $webiny-theme-light-background: #f2f2f2;
// $webiny-theme-light-surface: #fff;
// $webiny-theme-light-on-primary: #ffffff;
// $webiny-theme-light-on-secondary: #ffffff;
// $webiny-theme-light-on-surface: #000000;
// $webiny-theme-light-on-background: rgba(212, 212, 212, 0.5);
// $webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
// $webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
// $webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
// $webiny-theme-typography-font-family: "Source Sans Pro";

// Import main styles
// OLD - Will probably be removed.
@import "~@webiny/app-serverless-cms/styles.scss";

// NEW
// Base styles.
@import "~@webiny/admin-ui/styles.scss";

// The default theme. Learn more: https://webiny.link/admin-themes.
@import "~@webiny/admin-ui/theme.scss";
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -64,7 +64,7 @@
"adio": "^1.0.1",
"axios": "^1.7.9",
"babel-jest": "29.7.0",
"babel-loader": "^9.2.1",
"babel-loader": "9.2.1",
"babel-plugin-dynamic-import-node": "2.3.3",
"babel-plugin-macros": "3.1.0",
"babel-plugin-module-resolver": "^5.0.2",
@@ -180,7 +180,9 @@
"system:verify": "yarn eslint && yarn prettier:check && yarn adio && yarn check-ts-configs && yarn webiny verify-dependencies",
"system:build": "yarn && yarn ghawac build && yarn webiny sync-dependencies && yarn build",
"wby": "./node_modules/.bin/wby",
"webiny-ui-build-storybook": "cd packages/ui && cross-env OUT=../../netlify-static yarn build-storybook"
"webiny-admin-storybook": "cd packages/admin-ui && yarn storybook",
"webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook",
"webiny-admin-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js"
},
"husky": {
"hooks": {
1 change: 1 addition & 0 deletions packages/admin-ui/.babelrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("@webiny/project-utils").createBabelConfigForReact({ path: __dirname });
114 changes: 114 additions & 0 deletions packages/admin-ui/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import type { StorybookConfig } from "@storybook/react-webpack5";
import path from "path";
import tailwindcss from "tailwindcss";

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): any {
return path.dirname(require.resolve(path.join(value, "package.json")));
}

const config: StorybookConfig = {
stories: ["../docs/stories/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
staticDirs: ["../assets"],
addons: [
getAbsolutePath("@storybook/addon-a11y"),
{
name: "@storybook/addon-essentials",
options: {
controls: true,
code: true
}
}
],
framework: {
name: getAbsolutePath("@storybook/react-webpack5"),
options: {}
},
core: {
disableTelemetry: true,
disableWhatsNewNotifications: true
},
webpackFinal: async config => {
config.resolve = config.resolve || {};
config.resolve.alias = {
...config.resolve.alias,
"~": path.resolve(__dirname, "../src")
};

// Add custom style handling
config.module?.rules?.push({
test: /\.s[ac]ss$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
tailwindcss({
config: path.join(__dirname, "../tailwind.config.js")
})
]
}
}
},
{
loader: "sass-loader",
options: { implementation: require.resolve("sass") }
}
]
});

// Add SVG handling
const svgRule = config.module?.rules?.find(rule => {
const test = (rule as { test: RegExp }).test;
return test ? test.test(".svg") : false;
}) as { [key: string]: any };

if (svgRule) {
svgRule.exclude = /\.svg$/;
}

config.module?.rules?.push({
test: /\.svg$/i,
use: [
{
loader: "@svgr/webpack",
options: {
svgoConfig: {
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false
}
}
}
]
}
}
},
{
loader: "file-loader",
options: {
name: "[name].[hash].[ext]"
}
}
]
});

return config;
}
};

export default config;
11 changes: 11 additions & 0 deletions packages/admin-ui/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import type { Preview } from "@storybook/react";

import "../src/theme.scss";

const preview: Preview = {
parameters: {
layout: "centered"
}
};

export default preview;
31 changes: 31 additions & 0 deletions packages/admin-ui/DEVELOPMENT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Overview
This document covers different aspects of the development process for the `@webiny/admin-ui` package.

## Tailwind CSS
Webiny's Admin app uses Tailwind CSS for styling.

### Tailwind Configuration
Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. Among other things, this file defines the default Webiny theme, which is based on Webiny's design system. More on this in the next section.

### Default Theme
One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0).

But, do note that all the default theme-values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.theme.js` file, which is a file that is generated from a Figma export (more on this in the next section).

### Figma To Code
Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration.

When we say "Figma export", we basically mean exports of (1) Primitives and (2) Alias tokens, which are created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin.

The exports need to be downloaded and place into the `packages/admin-ui/scripts/importFromFigma/exports` folder. Ultimately, we should end up with the following two:

1. `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`
2. `packages/admin-ui/scripts/importFromFigma/exports/Primitives.json`

Finally, from project root, we run the following script:

```bash
yarn webiny-admin-import-from-figma
```

First, the script will regenerate the `tailwind.config.theme.js` file, which will contain all the necessary Tailwind CSS configuration. Second, it will also regenerate the `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.theme.js` file.
21 changes: 21 additions & 0 deletions packages/admin-ui/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) Webiny

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
6 changes: 6 additions & 0 deletions packages/admin-ui/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# `@webiny/admin-ui`

This package contains React components and styles for Webiny's Admin app.

> [!NOTE]
> This package is included in every Webiny project by default, and it's not meant to be used as a standalone package.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions packages/admin-ui/docs/stories/00-getting-started/welcome.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Meta } from '@storybook/blocks';

<Meta title="Getting Started/Welcome" />

![Webiny Design System cover](/images/design-system-cover.png)

# Welcome

Welcome to the Webiny Design System, your go-to resource for creating consistent, user-friendly, and innovative interfaces across all Webiny applications.
82 changes: 82 additions & 0 deletions packages/admin-ui/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
{
"name": "@webiny/admin-ui",
"version": "0.0.0",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/webiny/webiny-js.git"
},
"description": "The UI component library for Webiny's Admin app.",
"license": "MIT",
"dependencies": {
"@material-design-icons/svg": "^0.14.13",
"@radix-ui/react-accessible-icon": "^1.1.0",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.4",
"@radix-ui/react-dropdown-menu": "^2.1.4",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.4",
"@radix-ui/react-radio-group": "^1.2.1",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-tooltip": "^1.1.2",
"@tanstack/react-table": "^8.20.6",
"@webiny/react-composition": "0.0.0",
"@webiny/react-router": "0.0.0",
"@webiny/utils": "0.0.0",
"ace-builds": "^1.37.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cmdk": "^1.0.4",
"mobx": "^6.9.0",
"react": "18.2.0",
"react-ace": "^13.0.0",
"tailwind-merge": "^2.4.0",
"tailwindcss": "^3.4.6",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@storybook/addon-a11y": "7.6.20",
"@storybook/addon-essentials": "7.6.20",
"@storybook/react": "7.6.20",
"@storybook/react-webpack5": "7.6.20",
"@storybook/theming": "7.6.20",
"@svgr/webpack": "^6.1.1",
"@types/react": "18.2.79",
"@webiny/cli": "0.0.0",
"@webiny/project-utils": "0.0.0",
"chalk": "^4.1.2",
"css-loader": "^6.10.0",
"file-loader": "6.2.0",
"postcss-loader": "^6.2.1",
"prettier": "^2.8.8",
"rimraf": "^6.0.1",
"sass": "1.44.0",
"storybook": "7.6.20",
"tailwindcss": "^3.4.6",
"typescript": "5.3.3"
},
"publishConfig": {
"access": "public",
"directory": "dist"
},
"scripts": {
"build": "yarn webiny run build",
"watch": "yarn webiny run watch",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"adio": {
"ignore": {
"dependencies": [
"react-dom"
]
}
}
}
Loading
Loading