Merge pull request #121 from fictoan/skeleton

v1.6.0

Author: sujan-s

.storybook/main.ts

@@ -1,5 +1,22 @@
 # CHANGELOG
 
+## 1.6.0
+#### ⚠️ BREAKING CHANGES ⚠️
+- Colours now support opacity values
+  - | Old               | New                        |
+    |-------------------|----------------------------|
+    | `--slate-dark-40` | `--slate-dark40`           |
+    | `--red-light-20`  | `--red-light20`            |
+    | —                 | `--red-light20-opacity90`  |
+    | —                 | `--amber-dark20-opacity20` |
+    | —                 | `--pistacho-opacity40`     |
+    Basically you just have to remove the hyphen after the `light` and `dark` string for the new format, and it works on all props: `bgColour`, `textColour`, `var()` etc
+  - This colour generation is now more robust, as its generated with TS, instead of SCSS.
+- Removed CJS support, ESM only, because it’s 2024
+- Remove Storybook, because we have configurators for each component that does the same job, but better
+#### GENERIC CHANGES
+- Add `Skeleton` component for loading states
+
 ## 1.5.0
 - Rename `SelectWithSearch` to `ListBox` and add fuzzy search, multi-select, and custom entries capabilities
 
@@ -108,17 +125,6 @@
 - Rename `FormWrapper` to `Form`
 - Rename `CheckBox` to `Checkbox`
 - Add consistent `showWhen`, `closeWhen` and `secondsToShowFor` props for transitory components
-
-[//]: # "TODO: Make Fictoan more accessible"
-[//]: # "TODO: ⚠️ Remove style tag in CodeBlock"
-[//]: # "TODO: ⚠️ Fix TS issue in Select and SWS"
-[//]: # "TODO: Fix Dismiss Button in NotifcationItem"
-[//]: # "TODO: Add mask design to PinInputField"
-[//]: # "TODO: Fix Sidebar scrolling issue"
-[//]: # "TODO: Revamp BreadCrumbs?"
-
-~~[//]: # (TODO: ⚠️ Fix Meter height issue)~~
-
 ---
 
 ### 0.46.8
@@ -664,3 +670,14 @@
 
 ### v0.21.0
 - Code cleanup
+
+
+- TODO: Make Fictoan more accessible
+- TODO: ⚠️ Remove style tag in CodeBlock
+- TODO: Fix Dismiss Button in NotificationItem
+- TODO: Add mask design to PinInputField
+- TODO: Fix Sidebar scrolling issue
+- TODO: Revamp BreadCrumbs?
+
+~~TODO: ⚠️ Fix TS issue in Select and SWS~~
+~~TODO: ⚠️ Fix Meter height issue)~~

.storybook/preview.ts

@@ -1,54 +1,52 @@
 {
     "name": "fictoan-react",
-    "version": "1.5.0",
+    "version": "1.6.0",
     "private": false,
     "description": "",
     "type": "module",
     "sideEffects": [
-        "**/*.css"
+        "./src/styles/*.css",
+        "./src/components/**/typography.css"
     ],
     "files": [
         "dist"
     ],
-    "main": "./dist/index.cjs",
+    "main": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
-            "import": "./dist/index.js",
-            "require": "./dist/index.cjs"
+            "import": "./dist/index.js"
         },
         "./components": {
-            "import": "./dist/components/index.js",
-            "require": "./dist/components/index.cjs"
+            "import": "./dist/components/index.js"
         },
         "./dist/": "./dist/"
     },
     "scripts": {
         "preinstall": "npx only-allow pnpm",
-        "storybook": "storybook dev -p 6006",
         "watch": "vite build --watch",
         "build": "tsc && vite build",
         "build:umd": "tsc && vite build -c vite.config.umd.js",
-        "build:storybook": "storybook build",
         "tree-shake": "agadoo",
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "generate-colours": "ts-node scripts/generateColourClasses.ts"
     },
     "keywords": [],
-    "author": "",
+    "author": "Sujan Sundareswaran <[email protected] (https://sujansundareswaran.com)",
+    "contributors": [
+        "Naresh <[email protected]> (https://ghostwriternr.me/)",
+        "Dhruv Misra (https://dhruvmisra.com/)",
+        "Aditya Gannavarapu <[email protected]> (https://aditya-67.github.io/)",
+        "Dhiraj Bhakta K <[email protected]>",
+        "Rohit Singhal"
+    ],
     "license": "MIT",
     "devDependencies": {
         "@babel/preset-env": "^7.23.6",
         "@babel/preset-react": "^7.23.3",
         "@rollup/plugin-terser": "^0.4.4",
-        "@storybook/addon-essentials": "^7.6.6",
-        "@storybook/addon-interactions": "^7.6.6",
-        "@storybook/addon-links": "^7.6.6",
-        "@storybook/addon-onboarding": "^1.0.10",
-        "@storybook/blocks": "^7.6.6",
-        "@storybook/react": "^7.6.6",
-        "@storybook/react-vite": "^7.6.6",
-        "@storybook/test": "^7.6.6",
+        "@types/node": "^22.9.0",
         "@types/prismjs": "^1.26.4",
         "@types/react": "^18.2.45",
         "@vitejs/plugin-react": "^4.2.1",
@@ -62,10 +60,11 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rollup-plugin-visualizer": "^5.11.0",
-        "sass": "^1.69.5",
-        "storybook": "^7.6.6",
+        "ts-node": "^10.9.2",
+        "tsx": "^4.19.2",
+        "types": "link:types",
         "typescript": "^5.3.3",
-        "vite": "^5.0.10",
+        "vite": "5.4.6",
         "vite-plugin-dts": "^3.6.4",
         "vite-plugin-lib-inject-css": "^1.3.0",
         "vite-plugin-svgr": "^4.2.0"