Merge pull request #195 from gsoft-inc/feature/granular_Css

Allow granular CSS imports + Fix bundle peer dependencies

.changeset/config.json

@@ -3,7 +3,7 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
-  "linked": [["@workleap/orbiter-ui", "@orbit-ui/transition-components"]],
+  "linked": [],
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",

.changeset/small-students-arrive.md

@@ -0,0 +1,5 @@
+---
+"@workleap/orbiter-ui": patch
+---
+
+Hopper UI and react aria components are now properly put as peer dependencies.

.storybook/main.ts

@@ -9,6 +9,7 @@ let stories: string[] = [];
 
 if (includeDocs) {
     stories = [
+        ...stories,
         "../docs/**/!(*.stories).mdx",
         "../docs/**/*.stories.tsx",
         "../packages/**/docs/*.mdx",
@@ -30,9 +31,7 @@ const storybookConfig: StorybookConfig = {
         "@storybook/addon-docs",
         "@storybook/addon-links",
         "@storybook/addon-essentials",
-        "@storybook/addon-interactions",
-        "@storybook/addon-webpack5-compiler-swc",
-        "@chromatic-com/storybook"
+        "@storybook/addon-webpack5-compiler-swc"
     ],
     framework: "@storybook/react-webpack5",
     core: {

.storybook/preview.ts

@@ -1,6 +1,5 @@
 import { viewport } from "./storybook-addon/index.ts";
 import { withBackgroundMatchingColorScheme, withCenteredCanvas, ThemedDocsContainer, withThemeProvider } from "./decorators/index.ts";
-import { isChromatic } from "./env.ts";
 import { Themes } from "./styles/themes.ts";
 import { formatCode } from "./components/snippet/index.ts";
 import type { Preview } from "@storybook/react";
@@ -9,13 +8,6 @@ import "./styles/index.ts";
 import "@components/index.css";
 import "@hopper-ui/tokens/fonts.css";
 
-if (!isChromatic) {
-    // Custom font makes chromatic inconsistent and cause "false positive". View https://www.chromatic.com/docs/resource-loading#loading-custom-fonts.
-    import("@css/fonts.css");
-} else {
-    import("./styles/chromatic.css");
-}
-
 const preview: Preview = {
     parameters: {
         backgrounds: {

.storybook/styles/app.css

@@ -1,3 +1,6 @@
+@import "@hopper-ui/components/index.css"; /* We use some components in chromatic stories, so we want to make sure the styles are present */
+
+
 html,
 body {
     font-family: "Inter", Arial, Helvetica, serif !important;

docs/getting-started/AdvancedCSSImports.mdx

@@ -0,0 +1,75 @@
+import { Meta } from "@storybook/addon-docs";
+import { Banner, ExternalLink, Source } from "@stories/components";
+
+<Meta
+    title="Advanced CSS Imports"
+    id="AdvancedCSSImports"
+/>
+
+# Advanced CSS Imports
+
+<Banner>If you are working with Sharegate, you should use <ExternalLink href="https://orbit.sharegate.design/">Orbit</ExternalLink>.</Banner>
+
+This guide outlines how to customize CSS imports in your project to improve performance and reduce the overall CSS footprint. By replacing the default global import with targeted, granular imports, you can include only the styles you actually need.
+
+## Custom CSS Installation
+
+Instead of importing the entire stylesheet via `@workleap/orbiter-ui/index.css`, selectively include only the required subpackage imports.
+
+Start with the essential imports:
+
+<Source language="css" code={`
+/* index.css */
+
+/* @workleap/orbiter-ui/index.css */ /* Skip this import */
+@import "@workleap/orbiter-ui/core.css"; /* Base component styles */
+`} />
+
+Then, add styles for only the components you use. For example:
+
+<Source language="css" code={`
+/* index.css */
+
+@import "@workleap/orbiter-ui/accordion/index.css"; /* For Accordions */
+@import "@workleap/orbiter-ui/alert/index.css"; /* For Alerts */
+@import "@workleap/orbiter-ui/autocomplete/index.css"; /* For Autocomplete */
+@import "@workleap/orbiter-ui/avatar/index.css"; /* For Avatars */
+@import "@workleap/orbiter-ui/badge/index.css"; /* For Badges */
+@import "@workleap/orbiter-ui/button/index.css"; /* For Buttons */
+@import "@workleap/orbiter-ui/card/index.css"; /* For Cards */
+@import "@workleap/orbiter-ui/checkbox/index.css"; /* For Checkboxes */
+@import "@workleap/orbiter-ui/counter/index.css"; /* For Counters */
+@import "@workleap/orbiter-ui/date-input/index.css"; /* For Date Inputs */
+@import "@workleap/orbiter-ui/dialog/index.css"; /* For Dialogs */
+@import "@workleap/orbiter-ui/disclosure/index.css"; /* For Disclosures */
+@import "@workleap/orbiter-ui/divider/index.css"; /* For Dividers */
+@import "@workleap/orbiter-ui/dot/index.css"; /* For Dots */
+@import "@workleap/orbiter-ui/field/index.css"; /* For Fields */
+@import "@workleap/orbiter-ui/form/index.css"; /* For Forms */
+@import "@workleap/orbiter-ui/illustrated-message/index.css"; /* For Illustrated Messages */
+@import "@workleap/orbiter-ui/illustration/index.css"; /* For Illustrations */
+@import "@workleap/orbiter-ui/image/index.css"; /* For Images */
+@import "@workleap/orbiter-ui/input-group/index.css"; /* For Input Groups */
+@import "@workleap/orbiter-ui/link/index.css"; /* For Links */
+@import "@workleap/orbiter-ui/listbox/index.css"; /* For Listboxes */
+@import "@workleap/orbiter-ui/loader/index.css"; /* For Loaders */
+@import "@workleap/orbiter-ui/lozenge/index.css"; /* For Lozenges */
+@import "@workleap/orbiter-ui/menu/index.css"; /* For Menus */
+@import "@workleap/orbiter-ui/modal/index.css"; /* For Modals */
+@import "@workleap/orbiter-ui/number-input/index.css"; /* For Number Inputs */
+@import "@workleap/orbiter-ui/overlay/index.css"; /* For Overlays */
+@import "@workleap/orbiter-ui/popover/index.css"; /* For Popovers */
+@import "@workleap/orbiter-ui/radio/index.css"; /* For Radios */
+@import "@workleap/orbiter-ui/select/index.css"; /* For Selects */
+@import "@workleap/orbiter-ui/spinner/index.css"; /* For Spinners */
+@import "@workleap/orbiter-ui/switch/index.css"; /* For Switches */
+@import "@workleap/orbiter-ui/tabs/index.css"; /* For Tabs */
+@import "@workleap/orbiter-ui/tag/index.css"; /* For Tags */
+@import "@workleap/orbiter-ui/text-area/index.css"; /* For Text Areas */
+@import "@workleap/orbiter-ui/text-input/index.css"; /* For Text Inputs */
+@import "@workleap/orbiter-ui/tile/index.css"; /* For Tiles */
+@import "@workleap/orbiter-ui/tooltip/index.css"; /* For Tooltips */
+`} />
+
+By selectively importing only the CSS you need, you maintain full control over the styles in your project, improving performance and reducing unnecessary CSS.
+

docs/getting-started/Installation.mdx

@@ -24,7 +24,7 @@ pnpm install @workleap/orbiter-ui
 
 ## Import styles
 
-Orbiter styles include the ShareGate font, a [CSS bootstrap](https://github.com/gsoft-inc/wl-orbiter/tree/master/packages/css/src) and of course the component's styles.
+Orbiter styles include the ShareGate font, a CSS bootstrap and of course the component's styles.
 
 To import Orbiter styles, add the following import declaration to your root stylesheet:
 

package.json

@@ -47,22 +47,19 @@
   },
   "devDependencies": {
     "@changesets/cli": "2.27.9",
-    "@chromatic-com/storybook": "3.2.2",
-    "@hopper-ui/icons": "2.8.4",
+    "@hopper-ui/icons": "^2.8.4",
+    "@hopper-ui/components": "^1.3.33",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
-    "@storybook/addon-a11y": "8.4.2",
-    "@storybook/addon-docs": "^8.4.4",
-    "@storybook/addon-essentials": "8.4.2",
-    "@storybook/addon-interactions": "8.4.2",
-    "@storybook/addon-links": "8.4.2",
-    "@storybook/addon-mdx-gfm": "8.4.2",
+    "@storybook/addon-a11y": "8.4.5",
+    "@storybook/addon-docs": "8.4.5",
+    "@storybook/addon-essentials": "8.4.5",
+    "@storybook/addon-links": "8.4.5",
+    "@storybook/addon-mdx-gfm": "8.4.5",
     "@storybook/addon-webpack5-compiler-swc": "1.0.5",
-    "@storybook/blocks": "8.4.2",
-    "@storybook/react": "8.4.2",
-    "@storybook/react-webpack5": "8.4.2",
-    "@storybook/test": "8.4.2",
-    "@storybook/test-runner": "0.19.1",
-    "@storybook/types": "8.4.2",
+    "@storybook/blocks": "8.4.5",
+    "@storybook/react": "8.4.5",
+    "@storybook/react-webpack5": "8.4.5",
+    "@storybook/types": "8.4.5",
     "@svgr/core": "6.5.1",
     "@swc/core": "1.7.36",
     "@swc/helpers": "0.5.13",
@@ -107,7 +104,7 @@
     "resize-observer-polyfill": "1.5.1",
     "serve": "14.2.4",
     "shelljs": "0.8.5",
-    "storybook": "8.4.2",
+    "storybook": "8.4.5",
     "stylelint": "^16.10.0",
     "svgo": "3.3.2",
     "ts-jest": "29.2.5",