unifyedx-storybook-new 0.1.18 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -40,3 +40,16 @@ npm install unifyedx-storybook-new@latest
40
40
  # or
41
41
  yarn add unifyedx-storybook-new@latest
42
42
  ```
43
+
44
+ ### PeerDeps
45
+
46
+ ```bash
47
+ # install peers your lib expects (react, router, headlessui, etc.)
48
+ npm i react react-dom react-router-dom @headlessui/react framer-motion @floating-ui/react
49
+ ```
50
+
51
+ ### css usage
52
+
53
+ ```js
54
+ import "unifyedx-storybook-new/style.css";
55
+ ```
@@ -0,0 +1,14 @@
1
+ // src/utils/apiEndpoints.js
2
+
3
+ const _isBrowser = () => typeof window !== "undefined";
4
+
5
+ /** Base URL: localhost -> dev, else protocol//hostname */
6
+ function getBaseUrl() {
7
+ if (!_isBrowser()) return "https://dev.unifyed.com"; // SSR fallback
8
+ return window.location.hostname === "localhost"
9
+ ? "https://dev.unifyed.com"
10
+ : `${window.location.protocol}//${window.location.hostname}`;
11
+ }
12
+
13
+ export { getBaseUrl as g };
14
+ //# sourceMappingURL=apiEndpoints.es.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"apiEndpoints.es.js","sources":["../src/utils/apiEndpoints.js"],"sourcesContent":["// src/utils/apiEndpoints.js\nimport { localStore } from \"./lib/storageHelpers\";\n\nconst _isBrowser = () => typeof window !== \"undefined\";\n\n/** Base URL: localhost -> dev, else protocol//hostname */\nexport function getBaseUrl() {\n if (!_isBrowser()) return \"https://dev.unifyed.com\"; // SSR fallback\n return window.location.hostname === \"localhost\"\n ? \"https://dev.unifyed.com\"\n : `${window.location.protocol}//${window.location.hostname}`;\n}\n\n/** Gateway path from localStorage.userProfile.gatewaypath (safe + quiet) */\nexport function gateWayUrl() {\n if (!_isBrowser()) return \"\";\n try {\n const stored = localStore.get(\"userProfile\"); // already parsed or string/null\n if (!stored && window.location.hostname === \"localhost\") {\n return \"/unifyd-gateway/api\";\n }\n const userProfile = stored && typeof stored === \"object\" ? stored : {};\n return userProfile?.gatewaypath ?? \"\";\n } catch {\n return \"\";\n }\n}\n\n/** Derived helpers (recompute each call) */\nexport function gatewayBase() {\n return `${getBaseUrl()}${gateWayUrl()}`;\n}\nexport function userSearchBase() {\n return `${gatewayBase()}/unifydidentity/user/search/findByEmailStartingWith?sort=email,ASC&page=0`;\n}\nexport function adGroupsListSearchApi() {\n return `${gatewayBase()}/unifyedstudioutility/commonutility/groupusers/list?type=AD&page=0&size=20&sortkey=name&sorder=1&createdbyme=false`;\n}\nexport function provisioningBase() {\n return `${gatewayBase()}/unifyedusergroupprovisioning/api`;\n}\nexport function rbacBase() {\n return `${provisioningBase()}/v2/roles`;\n}\nexport function searchRolesApi() {\n return `${rbacBase()}/search`;\n}\nexport function myDriveGatewayBaseV2() {\n return `${gatewayBase()}/unifyed-mydrive/v2`;\n}\nexport function directoryPermissionsApi() {\n return `${myDriveGatewayBaseV2()}/directory/permissions`;\n}\nexport function filePermissionsApi() {\n return `${myDriveGatewayBaseV2()}/file/permissions`;\n}\n\n/** If you still want a snapshot, make it LAZY so it doesn't run at import time */\nexport function getSnapshot() {\n return Object.freeze({\n REACT_APP_BASE_URL: getBaseUrl(),\n GATEWAY_BASE: gatewayBase(),\n USER_SEARCH_BASE: userSearchBase(),\n AD_GROUPS_LIST_SEARCH_API: adGroupsListSearchApi(),\n PROVISIONING_BASE: provisioningBase(),\n RBAC_BASE: rbacBase(),\n SEARCH_ROLES_API: searchRolesApi(),\n MY_DRIVE_GATEWAY_BASE_v2: myDriveGatewayBaseV2(),\n DIRECTORY_PERMISSIONS_API: directoryPermissionsApi(),\n FILE_PERMISSIONS_API: filePermissionsApi(),\n });\n}\n"],"names":[],"mappings":"AAAA;;AAGA,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,KAAK,WAAW;;AAEtD;AACO,SAAS,UAAU,GAAG;AAC7B,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,OAAO,yBAAyB,CAAC;AACtD,EAAE,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,KAAK;AACtC,MAAM;AACN,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAChE;;;;"}
@@ -1872,314 +1872,7 @@
1872
1872
  margin-top: 0.25rem;
1873
1873
  }
1874
1874
 
1875
- /* --- CSS Variables --- */
1876
-
1877
- :root {
1878
- /* Dimensions */
1879
- --sidebar-width-expanded: 280px;
1880
- --sidebar-width-collapsed: 80px;
1881
- --sidebar-transition-duration: 0.2s;
1882
-
1883
- /* Colors */
1884
- --sidebar-bg: #111827;
1885
- --sidebar-text: #d1d5db;
1886
- --sidebar-text-hover: #ffffff;
1887
- --sidebar-border: #374151;
1888
- --sidebar-active-bg: #2563eb;
1889
- --sidebar-active-text: #ffffff;
1890
- --sidebar-parent-active-bg: #1f2937;
1891
- --sidebar-search-bg: #374151;
1892
- --sidebar-search-border: #4b5563;
1893
- --sidebar-icon: #9ca3af;
1894
- --sidebar-icon-hover: #ffffff;
1895
- }
1896
-
1897
- /* --- Main Sidebar --- */
1898
-
1899
- .sidebar {
1900
- display: flex;
1901
- flex-direction: column;
1902
- height: 100vh;
1903
- position: fixed;
1904
- top: 0;
1905
- left: 0;
1906
- background-color: var(--sidebar-bg);
1907
- color: var(--sidebar-text);
1908
- width: var(--sidebar-width-expanded);
1909
- transition: all var(--sidebar-transition-duration) ease;
1910
- z-index: 40;
1911
- box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
1912
- }
1913
-
1914
- /* --- Collapsed State --- */
1915
-
1916
- .sidebar--collapsed {
1917
- width: var(--sidebar-width-collapsed);
1918
- }
1919
-
1920
- .sidebar--collapsed .sidebar-search-container,
1921
- .sidebar--collapsed .nav-label,
1922
- .sidebar--collapsed .nav-chevron,
1923
- .sidebar--collapsed .sub-menu,
1924
- .sidebar--collapsed .user-info,
1925
- .sidebar--collapsed .logout-button {
1926
- opacity: 0;
1927
- visibility: hidden;
1928
- width: 0;
1929
- height: 0;
1930
- overflow: hidden;
1931
- }
1932
-
1933
- .sidebar--collapsed .nav-item,
1934
- .sidebar--collapsed .sidebar-header {
1935
- justify-content: center;
1936
- padding-left: 0;
1937
- padding-right: 0;
1938
- }
1939
-
1940
- /* --- Header --- */
1941
-
1942
- .sidebar-header {
1943
- display: flex;
1944
- align-items: center;
1945
- gap: 1rem;
1946
- padding: 1.25rem;
1947
- border-bottom: 1px solid var(--sidebar-border);
1948
- flex-shrink: 0;
1949
- }
1950
-
1951
- .sidebar-logo {
1952
- display: flex;
1953
- align-items: center;
1954
- min-height: 32px;
1955
- }
1956
-
1957
- .sidebar-search-container {
1958
- position: relative;
1959
- flex-grow: 1;
1960
- transition: all var(--sidebar-transition-duration) ease;
1961
- }
1962
-
1963
- .sidebar-search-icon {
1964
- position: absolute;
1965
- left: 0.75rem;
1966
- top: 50%;
1967
- transform: translateY(-50%);
1968
- color: var(--sidebar-icon);
1969
- pointer-events: none;
1970
- }
1971
-
1972
- .sidebar-search {
1973
- width: 100%;
1974
- background-color: var(--sidebar-search-bg);
1975
- border: 1px solid var(--sidebar-search-border);
1976
- border-radius: 0.5rem;
1977
- padding: 0.5rem 0.75rem 0.5rem 2rem;
1978
- color: var(--sidebar-text-hover);
1979
- transition: all var(--sidebar-transition-duration) ease;
1980
- }
1981
-
1982
- .sidebar-search:focus {
1983
- outline: none;
1984
- border-color: var(--sidebar-active-bg);
1985
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
1986
- }
1987
-
1988
- .collapse-button {
1989
- background: none;
1990
- border: none;
1991
- color: var(--sidebar-icon);
1992
- cursor: pointer;
1993
- padding: 0.25rem;
1994
- border-radius: 0.25rem;
1995
- transition: all 0.2s ease;
1996
- }
1997
-
1998
- .collapse-button:hover {
1999
- color: var(--sidebar-icon-hover);
2000
- background-color: rgba(255, 255, 255, 0.1);
2001
- }
2002
-
2003
- /* --- Navigation --- */
2004
-
2005
- .sidebar-nav {
2006
- flex-grow: 1;
2007
- overflow-y: auto;
2008
- padding: 0.5rem 0;
2009
- }
2010
-
2011
- .sidebar-nav-list {
2012
- list-style: none;
2013
- padding: 0;
2014
- margin: 0;
2015
- }
2016
-
2017
- .nav-item-container {
2018
- padding: 0 0.75rem;
2019
- margin-bottom: 0.25rem;
2020
- }
2021
-
2022
- .nav-item-container--level-1 {
2023
- padding-left: 1.5rem;
2024
- }
2025
-
2026
- .nav-item-container--level-2 {
2027
- padding-left: 2.25rem;
2028
- }
2029
-
2030
- .nav-item {
2031
- display: flex;
2032
- align-items: center;
2033
- gap: 1rem;
2034
- padding: 0.75rem;
2035
- border-radius: 0.5rem;
2036
- text-decoration: none;
2037
- color: var(--sidebar-text);
2038
- transition: all var(--sidebar-transition-duration) ease;
2039
- white-space: nowrap;
2040
- position: relative;
2041
- }
2042
-
2043
- .nav-item:hover {
2044
- background-color: var(--sidebar-parent-active-bg);
2045
- color: var(--sidebar-text-hover);
2046
- }
2047
-
2048
- .nav-item--active {
2049
- background-color: var(--sidebar-active-bg);
2050
- color: var(--sidebar-active-text);
2051
- font-weight: 500;
2052
- }
2053
-
2054
- .nav-item-container--parent-active > .nav-item {
2055
- background-color: var(--sidebar-parent-active-bg);
2056
- color: var(--sidebar-text-hover);
2057
- }
2058
-
2059
- .nav-icon {
2060
- flex-shrink: 0;
2061
- width: 1.25rem;
2062
- height: 1.25rem;
2063
- }
2064
-
2065
- .nav-label {
2066
- flex-grow: 1;
2067
- transition: all var(--sidebar-transition-duration) ease;
2068
- overflow: hidden;
2069
- text-overflow: ellipsis;
2070
- }
2071
-
2072
- .nav-chevron-button {
2073
- background: none;
2074
- border: none;
2075
- padding: 0.25rem;
2076
- margin-left: auto;
2077
- color: inherit;
2078
- cursor: pointer;
2079
- display: flex;
2080
- align-items: center;
2081
- }
2082
-
2083
- .nav-chevron {
2084
- width: 1rem;
2085
- height: 1rem;
2086
- transition: transform var(--sidebar-transition-duration) ease;
2087
- }
2088
-
2089
- .nav-chevron--open {
2090
- transform: rotate(180deg);
2091
- }
2092
-
2093
- .sub-menu {
2094
- max-height: 0;
2095
- overflow: hidden;
2096
- transition: max-height var(--sidebar-transition-duration) ease;
2097
- }
2098
-
2099
- .sub-menu--open {
2100
- max-height: 1000px; /* Adjust based on your content */
2101
- }
2102
-
2103
- /* --- Footer --- */
2104
-
2105
- .sidebar-footer {
2106
- display: flex;
2107
- align-items: center;
2108
- gap: 1rem;
2109
- padding: 1rem;
2110
- border-top: 1px solid var(--sidebar-border);
2111
- flex-shrink: 0;
2112
- }
2113
-
2114
- .user-info {
2115
- flex-grow: 1;
2116
- white-space: nowrap;
2117
- overflow: hidden;
2118
- transition: all var(--sidebar-transition-duration) ease;
2119
- }
2120
-
2121
- .user-name {
2122
- display: block;
2123
- font-weight: 500;
2124
- color: var(--sidebar-text-hover);
2125
- overflow: hidden;
2126
- text-overflow: ellipsis;
2127
- }
2128
-
2129
- .user-email {
2130
- display: block;
2131
- font-size: 0.75rem;
2132
- color: var(--sidebar-icon);
2133
- overflow: hidden;
2134
- text-overflow: ellipsis;
2135
- }
2136
-
2137
- .logout-button {
2138
- background: none;
2139
- border: none;
2140
- color: var(--sidebar-icon);
2141
- cursor: pointer;
2142
- padding: 0.25rem;
2143
- border-radius: 0.25rem;
2144
- transition: all 0.2s ease;
2145
- }
2146
-
2147
- .logout-button:hover {
2148
- color: var(--sidebar-icon-hover);
2149
- background-color: rgba(255, 255, 255, 0.1);
2150
- }
2151
-
2152
- /* --- Mobile / Responsive --- */
2153
-
2154
- .sidebar-overlay {
2155
- position: fixed;
2156
- inset: 0;
2157
- background-color: rgba(0, 0, 0, 0.5);
2158
- z-index: 39;
2159
- backdrop-filter: blur(2px);
2160
- }
2161
-
2162
- @media (max-width: 768px) {
2163
- .sidebar {
2164
- transform: translateX(-100%);
2165
- }
2166
-
2167
- .sidebar--mobile-open {
2168
- transform: translateX(0);
2169
- width: 100%;
2170
- max-width: 320px;
2171
- }
2172
-
2173
- .desktop-only {
2174
- display: none;
2175
- }
2176
- }
2177
-
2178
- @media (min-width: 769px) {
2179
- .sidebar-overlay {
2180
- display: none;
2181
- }
2182
- }
1875
+ /* @import "../components/Sidebar/Sidebar.css"; */
2183
1876
 
2184
1877
  /* --- Keyframe Animation --- */
2185
1878
 
@@ -2532,210 +2225,7 @@
2532
2225
  --rt-text-color: #ffffff;
2533
2226
  }
2534
2227
 
2535
- :root {
2536
- --wizard-bg: #ffffff;
2537
- --wizard-text: #111827;
2538
- --wizard-border: #e5e7eb;
2539
- --wizard-overlay: rgba(0, 0, 0, 0.5);
2540
- --wizard-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
2541
- 0 8px 10px -6px rgb(0 0 0 / 0.1);
2542
- --wizard-progress: #3b82f6;
2543
- --wizard-icon: #6b7280;
2544
- --wizard-icon-hover: #111827;
2545
- --wizard-header-bg: #ffffff;
2546
- --wizard-scrollbar: #9ca3af;
2547
- --wizard-scrollbar-bg: #f3f4f6;
2548
- }
2549
-
2550
- .wizard-dialog {
2551
- position: relative;
2552
- z-index: 50;
2553
- }
2554
-
2555
- .wizard-overlay {
2556
- position: fixed;
2557
- inset: 0;
2558
- background-color: var(--wizard-overlay);
2559
- backdrop-filter: blur(4px);
2560
- }
2561
-
2562
- .wizard-container {
2563
- position: fixed;
2564
- inset: 0;
2565
- overflow: hidden;
2566
- display: flex;
2567
- justify-content: flex-end;
2568
- }
2569
-
2570
- .wizard-positioner {
2571
- position: relative;
2572
- width: 100%;
2573
- height: 100%;
2574
- max-width: 32rem;
2575
- }
2576
-
2577
- .wizard-panel {
2578
- pointer-events: auto;
2579
- width: 100%;
2580
- height: 100%;
2581
- display: flex;
2582
- flex-direction: column;
2583
- background-color: var(--wizard-bg);
2584
- box-shadow: var(--wizard-shadow);
2585
- }
2586
-
2587
- .wizard-header {
2588
- display: flex;
2589
- align-items: center;
2590
- justify-content: space-between;
2591
- padding: 1rem 1.5rem;
2592
- background-color: var(--wizard-header-bg);
2593
- border-bottom: 1px solid var(--wizard-border);
2594
- flex-shrink: 0;
2595
- z-index: 10;
2596
- }
2597
-
2598
- .wizard-header-content {
2599
- display: flex;
2600
- align-items: center;
2601
- gap: 0.75rem;
2602
- flex-grow: 1;
2603
- }
2604
-
2605
- .wizard-header-text {
2606
- flex-grow: 1;
2607
- }
2608
-
2609
- .wizard-title {
2610
- font-size: 1.25rem;
2611
- font-weight: 600;
2612
- color: var(--wizard-text);
2613
- margin: 0;
2614
- line-height: 1.5;
2615
- }
2616
-
2617
- .wizard-description {
2618
- font-size: 0.875rem;
2619
- color: var(--wizard-icon);
2620
- margin: 0.25rem 0 0;
2621
- }
2622
-
2623
- .wizard-back-button {
2624
- background: none;
2625
- border: none;
2626
- color: var(--wizard-icon);
2627
- cursor: pointer;
2628
- padding: 0.5rem;
2629
- border-radius: 50%;
2630
- transition: all 0.2s ease;
2631
- display: flex;
2632
- align-items: center;
2633
- justify-content: center;
2634
- }
2635
-
2636
- .wizard-back-button:hover {
2637
- background-color: var(--wizard-scrollbar-bg);
2638
- color: var(--wizard-icon-hover);
2639
- }
2640
-
2641
- .wizard-close-button {
2642
- background: none;
2643
- border: none;
2644
- color: var(--wizard-icon);
2645
- cursor: pointer;
2646
- padding: 0.25rem;
2647
- border-radius: 50%;
2648
- transition: all 0.2s ease;
2649
- display: flex;
2650
- align-items: center;
2651
- justify-content: center;
2652
- }
2653
-
2654
- .wizard-close-button:hover {
2655
- background-color: var(--wizard-scrollbar-bg);
2656
- color: var(--wizard-icon-hover);
2657
- }
2658
-
2659
- .wizard-progress-container {
2660
- height: 2px;
2661
- background-color: var(--wizard-border);
2662
- width: 100%;
2663
- flex-shrink: 0;
2664
- }
2665
-
2666
- .wizard-progress-bar {
2667
- height: 100%;
2668
- background-color: var(--wizard-progress);
2669
- transition: width 0.3s ease;
2670
- }
2671
-
2672
- .wizard-body {
2673
- flex-grow: 1;
2674
- overflow-y: auto;
2675
- background-color: white;
2676
- /* ⛔️ The "position: relative;" rule that was here should be REMOVED. */
2677
-
2678
- /* Custom scrollbar styles */
2679
- scrollbar-width: thin;
2680
- scrollbar-color: #9ca3af #f3f4f6;
2681
- }
2682
-
2683
- .wizard-body::-webkit-scrollbar {
2684
- width: 8px;
2685
- }
2686
-
2687
- .wizard-body::-webkit-scrollbar-track {
2688
- background: #f3f4f6;
2689
- }
2690
-
2691
- .wizard-body::-webkit-scrollbar-thumb {
2692
- background-color: #9ca3af;
2693
- border-radius: 10px;
2694
- border: 2px solid #f3f4f6;
2695
- }
2696
-
2697
- .wizard-step {
2698
- /* Ensure step content doesn't cause overflow */
2699
- width: 100%;
2700
- max-width: 100%;
2701
- box-sizing: border-box;
2702
- padding: 1rem 0;
2703
- }
2704
-
2705
- /* For form elements */
2706
-
2707
- .form-group input,
2708
- .form-group select {
2709
- width: 100%;
2710
- max-width: 100%;
2711
- box-sizing: border-box;
2712
- }
2713
-
2714
- .wizard-step-motion-wrapper {
2715
- position: absolute;
2716
- top: 0;
2717
- left: 0;
2718
- width: 100%;
2719
- height: 100%;
2720
- }
2721
-
2722
- @media (max-width: 640px) {
2723
- .wizard-panel {
2724
- max-width: 100vw;
2725
- }
2726
-
2727
- .wizard-header {
2728
- padding: 1rem;
2729
- }
2730
-
2731
- .wizard-body {
2732
- padding: 1rem;
2733
- }
2734
-
2735
- .wizard-step-motion-wrapper {
2736
- padding: 0 1rem;
2737
- }
2738
- }
2228
+ /* @import "../components/WizardModal/WizardModal.css"; */
2739
2229
 
2740
2230
  .search-bar-wrapper {
2741
2231
  position: relative;