@clubmed/trident-ui 2.0.0-alpha.4 → 2.0.0-alpha.6

package/README.md

@@ -27,78 +27,35 @@ React UI components is a library of reusable components for building web applica
 ## Requirements
 
 - React 18
-- Tailwind 3
+- Tailwind 4
 
 ## Installation
 
 ```sh
 npm install --save @clubmed/trident-icons @clubmed/trident-ui react react-dom
-npm install --save-dev tailwindcss postcss autoprefixer
+npm install --save-dev tailwindcss
 ```
 
 ```sh
 yarn add @clubmed/trident-icons @clubmed/trident-ui react react-dom
-yarn add -D tailwindcss postcss autoprefixer
+yarn add -D tailwindcss
 ```
 
 ```sh
 pnpm add @clubmed/trident-icons @clubmed/trident-ui react react-dom
-pnpm add -D tailwindcss postcss autoprefixer
+pnpm add -D tailwindcss
 ```
 
-## Tailwind configuration
+> If you use vite, you can install `@tailwindcss/vite` instead of using postcss. See [Tailwind vite documentation](https://tailwindcss.com/docs/installation/using-vite)
 
-This package exports a `tailwind.preset` file that you can use to extend your own configuration.
+## Configuration
 
-Edit your `tailwind.config.ts` file and add the following line:
-
-```ts
-import type { Config } from 'tailwindcss';
-import { tailwindPreset } from '@clubmed/trident-ui/tailwind'; // add this line
-
-const config = {
-  presets: [tailwindPreset as unknown as Config],
-  content: [
-    './doc/**/*.mdx',
-    './lib/**/*.{ts,tsx,mdx}', // adapt this line to your project
-    '**/node_modules/@clubmed/trident-ui/**/*.js',
-  ],
-} satisfies Config;
-
-export default config;
-```
-
-> Note: If you have a TypeScript issue when you import the `tailwind.preset` file, you can add the following line in your `tsconfig.json` file:
-
-```json
-{
-  "include": ["tailwind.config.ts"]
-}
-```
-
-Then you have to configure your `postcss.config.cts` file to use the `tailwind.config.ts` file:
-
-```ts
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-```
-
-Then add the styles to your `index.css` file:
+Just add the styles to your `index.css` file:
 
 ```css
 @import '@clubmed/trident-ui/style.css';
 ```
 
-or in your `main.tsx` file:
-
-```tsx
-import '@clubmed/trident-ui/style.css';
-```
-
 ## Tailwind Merge configuration
 
 The design tokens shipped with Trident UI use custom `text-*` utilities (`text-b5`, `text-h2`, etc.) that behave like font-size helpers. When consumers rely on [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) to compose classes, these tokens must be registered as typography utilities; otherwise `tailwind-merge` may wrongly treat them as text-color classes and drop valid styles (for example `twMerge('text-b5', 'text-white')` would remove `text-white`).
@@ -268,15 +225,38 @@ function App() {
 }
 ```
 
-### Generate fonts from icons (dev)
+## Migrate from v1 to v2
 
-The project have a builder to compile svg to font. Just add Svg inside `atoms/Icons/svg` then
-run the following command:
+1. Update to the latest v1 release of Trident UI before starting the migration.
+2. Migrate your code base on Button v2 and Card v2.
+3. Replace any import paths containing `atoms` or `molecules` with the `ui` path segment.
+4. irectories in paths are now in to lower case. (e.g.: `molecules/Buttons/Button` -> `ui/buttons/button`).
+5. Use icons directly from `@clubmed/trident-icons`.
 
-```sh
-npm run build:fonts
+> At this point, check if you haven't any issue with paths and components before moving to the next step.
+
+Now, you can update to Tailwind 4 and Trident UI v2:
+
+- Tailwind 4 no longer reads `tailwind.config.ts` or presets shipped by Trident UI; rename your config to `tailwind.config.legacy.(js|ts)`.
+- Adopt the Tailwind 4 syntax updates (for example `@layer`, `@utility`).
+
+Add the styles to your `index.css` file:
+
+```css
+@import '@clubmed/trident-ui/style.css';
+```
+
+If your `custom.css` file uses Trident UI classes or variables, add this at the very top:
+
+```css
+@reference "@clubmed/trident-ui/style.css";
+
+.button {
+}
 ```
 
+It should be enough :)
+
 ### Know issues
 
 Currently, some icons in Font mode aren't correctly rendered because the SVG source aren't correctly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.6",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -24,53 +24,17 @@
   "exports": {
     ".": "./index.js",
     "./style.css": "./styles/index.css",
-    "./tailwind": "./tailwind/tailwind.preset.js",
     "./package.json": "./package.json",
-    "./atoms/Icons": {
-      "types": "./atoms/Icons/index.d.ts",
-      "import": "./atoms/Icons/index.js",
-      "default": "./atoms/Icons/index.js"
-    },
-    "./atoms/Icons/svg": {
-      "types": "./atoms/Icons/svg/index.d.ts",
-      "import": "./atoms/Icons/svg/index.js",
-      "default": "./atoms/Icons/svg/index.js"
-    },
-    "./atoms/Icons/svg-use": {
-      "types": "./atoms/Icons/svg-use/index.d.ts",
-      "import": "./atoms/Icons/svg-use/index.js",
-      "default": "./atoms/Icons/svg-use/index.js"
-    },
-    "./molecules/Tabs": {
-      "types": "./molecules/Tabs/index.d.ts",
-      "import": "./molecules/Tabs/index.js",
-      "default": "./molecules/Tabs/index.js"
-    },
-    "./molecules/Forms/Checkboxes": {
-      "types": "./molecules/Forms/Checkboxes/index.d.ts",
-      "import": "./molecules/Forms/Checkboxes/index.js",
-      "default": "./molecules/Forms/Checkboxes/index.js"
-    },
-    "./molecules/Forms/Password": {
-      "types": "./molecules/Forms/Password/index.d.ts",
-      "import": "./molecules/Forms/Password/index.js",
-      "default": "./molecules/Forms/Password/index.js"
-    },
-    "./molecules/Forms/Radios": {
-      "types": "./molecules/Forms/Radios/index.d.ts",
-      "import": "./molecules/Forms/Radios/index.js",
-      "default": "./molecules/Forms/Radios/index.js"
-    },
-    "./fonts/*": "./fonts/*",
+    "./styles/*": "./styles/*.css",
     "./atoms/*": {
-      "types": "./atoms/*.d.ts",
-      "import": "./atoms/*.js",
-      "default": "./atoms/*.js"
+      "types": "./ui/*.d.ts",
+      "import": "./ui/*.js",
+      "default": "./ui/*.js"
     },
     "./molecules/*": {
-      "types": "./molecules/*.d.ts",
-      "import": "./molecules/*.js",
-      "default": "./molecules/*.js"
+      "types": "./ui/*.d.ts",
+      "import": "./ui/*.js",
+      "default": "./ui/*.js"
     },
     "./contexts/Devices/Device": {
       "types": "./ui/contexts/devices/Device.d.ts",
@@ -124,12 +88,12 @@
     "react-transition-state": ">=2.3.2",
     "react-use-measure": ">=2.1.1",
     "tailwind-merge": ">=3.4.0",
+    "tw-animate-css": ">=1.3.6",
     "use-boop": ">=1.1.1"
   },
   "devDependencies": {
     "@clubmed/trident-icons": ">=1.7.1",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "4.1.18",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.17",
     "change-case": "^5.4.3",

package/styles/animate.css

@@ -0,0 +1,289 @@
+@keyframes boop {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(0.98);
+  }
+  75% {
+    transform: scale(1.025);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceEnter {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceEnterStrong {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceExit {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+@keyframes filling {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes loaderDash {
+  0% {
+    stroke-dashoffset: 38;
+    stroke-dasharray: 38;
+  }
+  50% {
+    stroke-dashoffset: 70;
+    stroke-dasharray: 70;
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulsation {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes pulse {
+  25% {
+    transform: scale(1.25);
+  }
+  50% {
+    transform: scale(1);
+  }
+}
+
+@keyframes rotatesIn {
+  0% {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(var(--tw-slideDown, -100%));
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slideRightEnter {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes slideRightExit {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(101%);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(var(--tw-slideUp, 100%));
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes tick {
+  0% {
+    transform: rotateX(0deg);
+  }
+  100% {
+    transform: rotateX(-180deg);
+  }
+}
+
+@keyframes tock {
+  0% {
+    transform: rotateX(180deg);
+  }
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+
+@keyframes wave {
+  0% {
+    transform: translate(100px, 140px);
+  }
+  10% {
+    transform: translate(100px, 140px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+@keyframes backdropFadeIn {
+  0% {
+    backdrop-filter: blur(0px);
+    opacity: 0;
+  }
+  100% {
+    backdrop-filter: blur(10px);
+    opacity: 0.8;
+  }
+}
+
+@keyframes backdropFadeOut {
+  0% {
+    backdrop-filter: blur(10px);
+    opacity: 0.8;
+  }
+  100% {
+    backdrop-filter: blur(0px);
+    opacity: 0;
+  }
+}
+
+@keyframes backdropSweepIn {
+  0% {
+    backdrop-filter: blur(0px);
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    backdrop-filter: blur(10px);
+    opacity: 0.8;
+    transform: translateX(0%);
+  }
+}
+
+@keyframes backdropSweepOut {
+  0% {
+    backdrop-filter: blur(10px);
+    opacity: 0.8;
+    transform: translateX(0%);
+  }
+  100% {
+    backdrop-filter: blur(0px);
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes ping {
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes toastEnter {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes toastExit {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(101%);
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    transform: scale(0.3);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes zoomOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}

package/styles/components.css

@@ -0,0 +1,75 @@
+@layer components {
+  html {
+    --xDirCoefficient: 1;
+    scroll-behavior: smooth;
+  }
+
+  html[dir='rtl'] {
+    --xDirCoefficient: -1;
+  }
+
+  /* LINKS */
+  .link-underline {
+    @apply transition-["background-size"];
+    @apply duration-1000;
+
+    background-image: linear-gradient(transparent calc(100% - 1px), currentcolor 1px);
+    background-repeat: no-repeat;
+    background-size: calc(100% - 0px) 100%;
+  }
+
+  .link-underline.has-icon {
+    background-size: calc(100% - 32px) 100%;
+  }
+
+  .link-container:hover .link-underline.hoverable,
+  .link-container:focus .link-underline.hoverable,
+  .group:hover .link-underline.hoverable,
+  .group:focus .link-underline.hoverable {
+    background-size: calc(0% - 0px) 100%;
+  }
+
+  .group:hover .link-underline.hoverable,
+  .group:focus .link-underline.hoverable {
+    background-size: calc(0% - 0px) 100%;
+  }
+
+  [dir='rtl'] .link-underline {
+    background-position: right;
+  }
+
+  /* INPUTS */
+
+  /* Remove the reset button in active inputs */
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    @apply appearance-none;
+  }
+  input[type='password']::-ms-reveal {
+    display: none;
+  }
+
+  select:invalid {
+    @apply text-middleGrey;
+  }
+
+  .date-field {
+    @apply appearance-none;
+  }
+
+  .date-field::-webkit-calendar-picker-indicator {
+    @apply hidden;
+  }
+
+  .date-field::-webkit-datetime-edit {
+    @apply w-full;
+  }
+
+  .date-field::-webkit-datetime-edit-fields-wrapper {
+    @apply w-full;
+    @apply flex;
+    @apply justify-between;
+    @apply uppercase;
+  }
+}