From b5b41da183b0a8512fd84b80f26eca7e761053fc Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Fri, 4 Nov 2022 15:40:46 +0000 Subject: [PATCH] Cleaning up storybook files (#5290) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens Co-authored-by: Alex van Andel --- apps/storybook/.gitignore | 52 +- apps/storybook/.storybook/i18next.js | 9 + apps/storybook/.storybook/main.js | 34 +- apps/storybook/.storybook/preview-head.html | 1 + .../.storybook/{preview.js => preview.jsx} | 18 +- apps/storybook/README.md | 21 - apps/storybook/components/CustomArgsTable.tsx | 23 + apps/storybook/components/Examples.tsx | 31 + apps/storybook/components/Note.tsx | 5 + apps/storybook/components/Title.tsx | 21 + apps/storybook/components/VariantsTable.tsx | 80 + apps/storybook/components/index.ts | 5 + apps/storybook/intro.stories.mdx | 11 + apps/storybook/next.config.js | 7 - apps/storybook/package.json | 68 +- apps/storybook/pages/_app.tsx | 9 - apps/storybook/pages/index.tsx | 63 - apps/storybook/postcss.config.js | 16 + apps/storybook/public/favicon.ico | Bin 25931 -> 0 bytes .../public/fonts/Inter-roman.var.woff2 | Bin 0 -> 227180 bytes apps/storybook/public/fonts/cal.ttf | Bin 0 -> 148964 bytes apps/storybook/public/sb-cover.jpg | Bin 0 -> 731708 bytes apps/storybook/public/vercel.svg | 4 - apps/storybook/stories/Avatar.stories.tsx | 26 - .../storybook/stories/AvatarGroup.stories.tsx | 60 - apps/storybook/stories/Badge.stories.tsx | 58 - apps/storybook/stories/Banner.stories.tsx | 46 - apps/storybook/stories/Breadcrumb.stories.tsx | 22 - apps/storybook/stories/Button.stories.tsx | 98 - .../storybook/stories/ButtonGroup.stories.tsx | 41 - apps/storybook/stories/Cards.stories.tsx | 79 - apps/storybook/stories/Checkbox.stories.tsx | 31 - apps/storybook/stories/Colors.stories.tsx | 208 -- apps/storybook/stories/DatePicker.stories.tsx | 17 - .../stories/DateRangePicker.stories.tsx | 45 - .../storybook/stories/EmptyScreen.stories.tsx | 26 - apps/storybook/stories/FormStep.stories.tsx | 27 - .../stories/HorizontalTab.stories.tsx | 39 - apps/storybook/stories/Input.stories.tsx | 75 - apps/storybook/stories/Modal.stories.tsx | 50 - .../stories/Notifcations.stories.tsx | 24 - apps/storybook/stories/PageHeader.stories.tsx | 52 - apps/storybook/stories/Radio.stories.tsx | 19 - apps/storybook/stories/Select.stories.tsx | 33 - apps/storybook/stories/Switch.stories.tsx | 15 - apps/storybook/stories/TabItem.stories.tsx | 67 - .../storybook/stories/ToggleGroup.stories.tsx | 20 - .../storybook/stories/VerticalTab.stories.tsx | 85 - apps/storybook/storybook-static/favicon.ico | Bin 0 -> 32988 bytes apps/storybook/storybook-static/sb-cover.jpg | Bin 0 -> 731708 bytes apps/storybook/styles/globals.css | 11 +- apps/storybook/styles/storybook-styles.css | 189 ++ apps/storybook/tailwind.config.js | 170 +- apps/storybook/tsconfig.json | 0 apps/storybook/tsconfig.node.json | 8 + apps/web/components/App.tsx | 2 +- apps/web/components/Embed.tsx | 3 +- apps/web/components/apps/App.tsx | 3 +- .../components/apps/CalendarListContainer.tsx | 3 +- .../components/apps/OmniInstallAppButton.tsx | 2 +- .../components/booking/BookingListItem.tsx | 4 +- .../components/booking/pages/BookingPage.tsx | 2 +- .../components/dialog/RescheduleDialog.tsx | 2 +- .../components/CalendarItem.tsx | 2 +- .../components/ConnectedCalendarItem.tsx | 3 - .../steps-views/SetupAvailability.tsx | 2 +- .../steps-views/UserProfile.tsx | 4 +- .../steps-views/UserSettings.tsx | 2 +- .../SubHeadingTitleWithConnections.tsx | 2 +- .../security/DisableTwoFactorModal.tsx | 2 +- .../security/DisableUserImpersonation.tsx | 2 +- .../security/EnableTwoFactorModal.tsx | 2 +- .../security/TwoFactorAuthSection.tsx | 2 +- .../components/settings/CalendarSwitch.tsx | 2 +- .../settings/DisableTwoFactorModal.tsx | 6 +- .../settings/EnableTwoFactorModal.tsx | 4 +- .../team/DisableTeamImpersonation.tsx | 2 +- apps/web/components/team/TeamListItem.tsx | 4 +- apps/web/components/team/screens/Team.tsx | 2 +- apps/web/components/ui/TableActions.tsx | 2 +- .../UsernameAvailability/PremiumTextfield.tsx | 4 +- .../UsernameTextfield.tsx | 2 +- .../v2/eventtype/AvailabilityTab.tsx | 5 +- .../v2/eventtype/CustomInputTypeForm.tsx | 4 +- .../v2/eventtype/EditLocationDialog.tsx | 4 +- .../v2/eventtype/EventAdvancedTab.tsx | 19 +- .../components/v2/eventtype/EventAppsTab.tsx | 3 +- .../v2/eventtype/EventLimitsTab.tsx | 4 +- .../components/v2/eventtype/EventSetupTab.tsx | 4 +- .../components/v2/eventtype/EventTeamTab.tsx | 4 +- .../v2/eventtype/EventTypeSingleLayout.tsx | 12 +- .../v2/eventtype/RecurringEventController.tsx | 2 +- apps/web/pages/apps/installed/[category].tsx | 2 +- apps/web/pages/auth/forgot-password/[id].tsx | 3 +- apps/web/pages/auth/forgot-password/index.tsx | 2 +- apps/web/pages/auth/login.tsx | 3 +- apps/web/pages/auth/logout.tsx | 2 +- apps/web/pages/auth/setup.tsx | 2 +- apps/web/pages/auth/signin.tsx | 2 +- apps/web/pages/auth/verify.tsx | 2 +- apps/web/pages/availability/[schedule].tsx | 4 +- apps/web/pages/bookings/[status].tsx | 3 +- apps/web/pages/cancel/[uid].tsx | 2 +- apps/web/pages/event-types/index.tsx | 3 +- .../web/pages/getting-started/[[...step]].tsx | 2 +- apps/web/pages/sandbox/Badge.tsx | 2 +- .../pages/settings/admin/impersonation.tsx | 2 +- apps/web/pages/settings/billing/index.tsx | 2 +- .../web/pages/settings/developer/api-keys.tsx | 3 +- .../pages/settings/my-account/appearance.tsx | 6 +- .../pages/settings/my-account/calendars.tsx | 5 +- .../settings/my-account/conferencing.tsx | 3 +- .../web/pages/settings/my-account/general.tsx | 4 +- .../web/pages/settings/my-account/profile.tsx | 7 +- .../pages/settings/security/impersonation.tsx | 5 +- apps/web/pages/settings/security/password.tsx | 4 +- .../settings/security/two-factor-auth.tsx | 2 +- apps/web/pages/signup.tsx | 4 +- apps/web/pages/team/[slug].tsx | 3 +- apps/web/pages/teams/index.tsx | 2 +- apps/web/styles/globals.css | 2 + .../applecalendar/pages/setup/index.tsx | 3 +- .../caldavcalendar/pages/setup/index.tsx | 3 +- .../pages/setup/index.tsx | 3 +- .../routing-forms/components/FormActions.tsx | 7 +- .../routing-forms/components/SingleForm.tsx | 6 +- .../react-awesome-query-builder/widgets.tsx | 3 +- .../pages/form-edit/[...appPages].tsx | 3 +- .../pages/forms/[...appPages].tsx | 4 +- .../pages/route-builder/[...appPages].tsx | 3 +- .../pages/routing-link/[...appPages].tsx | 2 +- .../pages/setup/index.tsx | 3 +- .../pages/setup/index.tsx | 3 +- .../exchangecalendar/pages/setup/index.tsx | 12 +- .../fathom/extensions/EventTypeAppCard.tsx | 2 +- .../ga4/extensions/EventTypeAppCard.tsx | 2 +- .../extensions/EventTypeAppCard.tsx | 3 +- packages/app-store/types.d.ts | 2 +- .../components/AppSettings.tsx | 8 +- .../components/confirmDialog.tsx | 2 +- .../components/wipeMyCalActionButton.tsx | 2 +- .../zapier/components/TemplateCard.tsx | 2 +- .../app-store/zapier/pages/setup/index.tsx | 3 +- .../bookings/UnconfirmedBookingBadge.tsx | 2 +- .../ee/api-keys/components/ApiKeyListItem.tsx | 2 +- .../components/v2/ApiKeyDialogForm.tsx | 4 +- .../api-keys/components/v2/ApiKeyListItem.tsx | 4 +- .../ee/sso/components/ConfigDialogForm.tsx | 4 +- .../ee/sso/components/SAMLConfiguration.tsx | 4 +- .../ee/support/components/HelpMenuItem.tsx | 2 +- .../components/MemberChangeRoleModal.tsx | 3 +- .../components/MemberInvitationModal.tsx | 4 +- .../ee/teams/components/MemberListItem.tsx | 4 +- .../components/TeamAvailabilityModal.tsx | 2 +- .../components/TeamAvailabilityScreen.tsx | 2 +- .../teams/components/TeamInviteListItem.tsx | 10 +- .../teams/components/v2/AddNewTeamMembers.tsx | 6 +- .../ee/teams/components/v2/CreateNewTeam.tsx | 4 +- .../components/v2/TeamAvailabilityModal.tsx | 4 +- .../components/v2/TeamAvailabilityScreen.tsx | 2 +- .../features/ee/teams/pages/availability.tsx | 2 +- .../ee/teams/pages/team-appearance-view.tsx | 3 +- .../ee/teams/pages/team-members-view.tsx | 3 +- .../ee/teams/pages/team-profile-view.tsx | 13 +- .../components/v2/AddActionDialog.tsx | 16 +- .../components/v2/AddVariablesDropdown.tsx | 1 - .../workflows/components/v2/EmptyScreen.tsx | 2 +- .../components/v2/EventWorkflowsTab.tsx | 3 +- .../components/v2/TimeTimeUnitInput.tsx | 9 +- .../components/v2/WorkflowDetailsPage.tsx | 4 +- .../components/v2/WorkflowListPage.tsx | 3 +- .../components/v2/WorkflowStepContainer.tsx | 9 +- .../features/ee/workflows/pages/v2/index.tsx | 4 +- .../ee/workflows/pages/v2/workflow.tsx | 3 +- .../components/NewScheduleButton.tsx | 2 +- .../schedules/components/Schedule.tsx | 2 +- .../schedules/components/ScheduleListItem.tsx | 4 +- .../webhooks/components/WebhookForm.tsx | 4 +- .../webhooks/components/WebhookListItem.tsx | 4 +- .../components/WebhookTestDisclosure.tsx | 4 +- .../features/webhooks/pages/webhooks-view.tsx | 2 +- packages/ui/Badge.tsx | 27 - .../ui/__WHATSUP_WITH_ALL_THESE_VERSIONS.md | 27 + .../{v2/core => components/avatar}/Avatar.tsx | 2 +- .../avatar}/AvatarGroup.tsx | 4 +- .../ui/components/avatar/avatar.stories.mdx | 139 ++ packages/ui/components/avatar/index.ts | 2 + .../{v2/core => components/badge}/Badge.tsx | 20 +- .../ui/components/badge/badge.stories.mdx | 83 + packages/ui/components/badge/index.ts | 1 + .../breadcrumb}/Breadcrumb.tsx | 0 .../breadcrumb/breadcrumb.stories.mdx | 28 + packages/ui/components/breadcrumb/index.ts | 1 + .../{v2/core => components/button}/Button.tsx | 4 +- .../ui/components/button/button.stories.mdx | 111 + packages/ui/components/button/index.ts | 1 + .../buttonGroup}/ButtonGroup.tsx | 2 +- .../buttonGroup/buttongroup.stories.mdx | 84 + packages/ui/components/buttonGroup/index.ts | 1 + .../form/checkbox}/Checkbox.tsx | 0 .../form/checkbox/checkbox.stories.mdx | 66 + packages/ui/components/form/checkbox/index.ts | 1 + packages/ui/components/form/index.ts | 4 + .../components/form/inputs/HintOrErrors.tsx | 102 + .../form/inputs/Input.tsx} | 132 +- packages/ui/components/form/inputs/Label.tsx | 11 + .../components/form/inputs/inputs.stories.mdx | 83 + packages/ui/components/index.ts | 6 + packages/ui/styles/shared-globals.css | 13 + packages/ui/v2/core/Card.tsx | 2 +- .../ui/v2/core/ConfirmationDialogContent.tsx | 3 +- packages/ui/v2/core/Dialog.tsx | 2 +- packages/ui/v2/core/EmptyScreen.tsx | 2 +- packages/ui/v2/core/ImageUploader.tsx | 2 +- packages/ui/v2/core/PageHeader.tsx | 2 +- packages/ui/v2/core/Segment.tsx | 2 +- packages/ui/v2/core/SettingsToggle.tsx | 4 +- packages/ui/v2/core/Shell.tsx | 2 +- packages/ui/v2/core/TableActions.tsx | 2 +- packages/ui/v2/core/WizardForm.tsx | 2 +- packages/ui/v2/core/apps/AppCard.tsx | 2 +- packages/ui/v2/core/banner.tsx | 2 +- .../ui/v2/core/form/BooleanToggleGroup.tsx | 2 +- packages/ui/v2/core/form/index.ts | 3 +- packages/ui/v2/core/form/select/Select.tsx | 2 +- packages/ui/v2/core/index.ts | 7 - .../ui/v2/core/layouts/SettingsLayout.tsx | 4 +- packages/ui/v2/modules/auth/SAMLLogin.tsx | 2 +- .../modules/event-types/CheckedTeamSelect.tsx | 3 +- .../modules/event-types/CreateEventType.tsx | 6 +- .../modules/event-types/CustomInputItem.tsx | 8 +- .../event-types/EventTypeDescription.tsx | 2 +- .../integrations/DisconnectIntegration.tsx | 2 +- yarn.lock | 1795 +++++++++++------ 234 files changed, 2709 insertions(+), 2692 deletions(-) mode change 100755 => 100644 apps/storybook/.gitignore create mode 100644 apps/storybook/.storybook/i18next.js rename apps/storybook/.storybook/{preview.js => preview.jsx} (53%) delete mode 100644 apps/storybook/README.md create mode 100644 apps/storybook/components/CustomArgsTable.tsx create mode 100644 apps/storybook/components/Examples.tsx create mode 100644 apps/storybook/components/Note.tsx create mode 100644 apps/storybook/components/Title.tsx create mode 100644 apps/storybook/components/VariantsTable.tsx create mode 100644 apps/storybook/components/index.ts create mode 100644 apps/storybook/intro.stories.mdx delete mode 100755 apps/storybook/next.config.js delete mode 100755 apps/storybook/pages/_app.tsx delete mode 100755 apps/storybook/pages/index.tsx delete mode 100755 apps/storybook/public/favicon.ico create mode 100644 apps/storybook/public/fonts/Inter-roman.var.woff2 create mode 100644 apps/storybook/public/fonts/cal.ttf create mode 100644 apps/storybook/public/sb-cover.jpg delete mode 100755 apps/storybook/public/vercel.svg delete mode 100644 apps/storybook/stories/Avatar.stories.tsx delete mode 100644 apps/storybook/stories/AvatarGroup.stories.tsx delete mode 100644 apps/storybook/stories/Badge.stories.tsx delete mode 100644 apps/storybook/stories/Banner.stories.tsx delete mode 100644 apps/storybook/stories/Breadcrumb.stories.tsx delete mode 100644 apps/storybook/stories/Button.stories.tsx delete mode 100644 apps/storybook/stories/ButtonGroup.stories.tsx delete mode 100644 apps/storybook/stories/Cards.stories.tsx delete mode 100644 apps/storybook/stories/Checkbox.stories.tsx delete mode 100644 apps/storybook/stories/Colors.stories.tsx delete mode 100644 apps/storybook/stories/DatePicker.stories.tsx delete mode 100644 apps/storybook/stories/DateRangePicker.stories.tsx delete mode 100644 apps/storybook/stories/EmptyScreen.stories.tsx delete mode 100644 apps/storybook/stories/FormStep.stories.tsx delete mode 100644 apps/storybook/stories/HorizontalTab.stories.tsx delete mode 100644 apps/storybook/stories/Input.stories.tsx delete mode 100644 apps/storybook/stories/Modal.stories.tsx delete mode 100644 apps/storybook/stories/Notifcations.stories.tsx delete mode 100644 apps/storybook/stories/PageHeader.stories.tsx delete mode 100644 apps/storybook/stories/Radio.stories.tsx delete mode 100644 apps/storybook/stories/Select.stories.tsx delete mode 100644 apps/storybook/stories/Switch.stories.tsx delete mode 100644 apps/storybook/stories/TabItem.stories.tsx delete mode 100644 apps/storybook/stories/ToggleGroup.stories.tsx delete mode 100644 apps/storybook/stories/VerticalTab.stories.tsx create mode 100644 apps/storybook/storybook-static/favicon.ico create mode 100644 apps/storybook/storybook-static/sb-cover.jpg mode change 100755 => 100644 apps/storybook/styles/globals.css create mode 100644 apps/storybook/styles/storybook-styles.css mode change 100755 => 100644 apps/storybook/tsconfig.json create mode 100644 apps/storybook/tsconfig.node.json delete mode 100644 packages/ui/Badge.tsx create mode 100644 packages/ui/__WHATSUP_WITH_ALL_THESE_VERSIONS.md rename packages/ui/{v2/core => components/avatar}/Avatar.tsx (97%) rename packages/ui/{v2/core => components/avatar}/AvatarGroup.tsx (96%) create mode 100644 packages/ui/components/avatar/avatar.stories.mdx create mode 100644 packages/ui/components/avatar/index.ts rename packages/ui/{v2/core => components/badge}/Badge.tsx (76%) create mode 100644 packages/ui/components/badge/badge.stories.mdx create mode 100644 packages/ui/components/badge/index.ts rename packages/ui/{v2/core => components/breadcrumb}/Breadcrumb.tsx (100%) create mode 100644 packages/ui/components/breadcrumb/breadcrumb.stories.mdx create mode 100644 packages/ui/components/breadcrumb/index.ts rename packages/ui/{v2/core => components/button}/Button.tsx (99%) create mode 100644 packages/ui/components/button/button.stories.mdx create mode 100644 packages/ui/components/button/index.ts rename packages/ui/{v2/core => components/buttonGroup}/ButtonGroup.tsx (91%) create mode 100644 packages/ui/components/buttonGroup/buttongroup.stories.mdx create mode 100644 packages/ui/components/buttonGroup/index.ts rename packages/ui/{v2/core/form => components/form/checkbox}/Checkbox.tsx (100%) create mode 100644 packages/ui/components/form/checkbox/checkbox.stories.mdx create mode 100644 packages/ui/components/form/checkbox/index.ts create mode 100644 packages/ui/components/form/index.ts create mode 100644 packages/ui/components/form/inputs/HintOrErrors.tsx rename packages/ui/{v2/core/form/fields.tsx => components/form/inputs/Input.tsx} (70%) create mode 100644 packages/ui/components/form/inputs/Label.tsx create mode 100644 packages/ui/components/form/inputs/inputs.stories.mdx create mode 100644 packages/ui/components/index.ts create mode 100644 packages/ui/styles/shared-globals.css diff --git a/apps/storybook/.gitignore b/apps/storybook/.gitignore old mode 100755 new mode 100644 index 1144627266..a547bf36d8 --- a/apps/storybook/.gitignore +++ b/apps/storybook/.gitignore @@ -1,38 +1,24 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ -next-env.d.ts - -# production -/build - -# misc -.DS_Store -*.pem - -# debug +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* -.pnpm-debug.log* +pnpm-debug.log* +lerna-debug.log* -# local env files -.env*.local +node_modules +dist +dist-ssr +*.local -# vercel -.vercel - -# typescript -*.tsbuildinfo - -storybook-static/ +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/apps/storybook/.storybook/i18next.js b/apps/storybook/.storybook/i18next.js new file mode 100644 index 0000000000..ca49d8044e --- /dev/null +++ b/apps/storybook/.storybook/i18next.js @@ -0,0 +1,9 @@ +import i18n from "i18next"; +import { initReactI18next } from "react-i18next"; + +i18n.use(initReactI18next).init({ + resources: [], + debug: true, +}); + +export default i18n; diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js index 25981f3543..d2d013bcb7 100644 --- a/apps/storybook/.storybook/main.js +++ b/apps/storybook/.storybook/main.js @@ -1,34 +1,29 @@ const path = require("path"); module.exports = { - stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"], + stories: [ + "../intro.stories.mdx", + "../../../packages/ui/components/**/*.stories.mdx", + "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)", + ], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", - "storybook-addon-designs", - "@storybook/addon-a11y", - "storybook-addon-next", + "storybook-react-i18next", + { + name: "storybook-addon-next", + options: { + nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"), + }, + }, ], framework: "@storybook/react", core: { builder: "webpack5", }, - webpackFinal: async (config) => { - /** - * Fixes font import with / - * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160 - */ - config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"]; - config.resolve.alias = { - ...config.resolve.alias, - "@/interfaces": path.resolve(__dirname, "../interfaces"), - }; - - /** - * Why webpack5... Just why? - * @type {{console: boolean, process: boolean, timers: boolean, os: boolean, querystring: boolean, sys: boolean, fs: boolean, url: boolean, crypto: boolean, path: boolean, zlib: boolean, punycode: boolean, util: boolean, stream: boolean, assert: boolean, string_decoder: boolean, domain: boolean, vm: boolean, tty: boolean, http: boolean, buffer: boolean, constants: boolean, https: boolean, events: boolean}} - */ + staticDirs: ["../public"], + webpackFinal: async (config, { configType }) => { config.resolve.fallback = { fs: false, assert: false, @@ -55,7 +50,6 @@ module.exports = { vm: false, zlib: false, }; - return config; }, }; diff --git a/apps/storybook/.storybook/preview-head.html b/apps/storybook/.storybook/preview-head.html index d14ce9f633..ad4b6e8996 100644 --- a/apps/storybook/.storybook/preview-head.html +++ b/apps/storybook/.storybook/preview-head.html @@ -1,4 +1,5 @@