From 3f8115da25d27ed0f91158d28ca6434da0c85cad Mon Sep 17 00:00:00 2001 From: florent giraud Date: Mon, 17 Jun 2024 16:18:29 -0400 Subject: [PATCH] chore: update package name and start from scratch documentation --- .github/scripts/release.mjs | 2 +- .github/workflows/run-tests.yml | 4 +- README.md | 316 ++++++++---------- package.json | 6 +- packages/benchmark/README.md | 22 ++ packages/benchmark/benchmark.mjs | 10 +- .../configs/{tca.mjs => tailwindbuddy.mjs} | 6 +- packages/benchmark/package.json | 2 +- packages/benchmark/validate.test.mjs | 6 +- packages/core/CHANGELOG.md | 78 ++--- packages/core/package.json | 10 +- packages/core/src/main.ts | 4 +- .../core/src/{tca.ts => tailwind-buddy.ts} | 8 +- packages/core/src/utils/tailwind-utils.ts | 9 +- .../tests/setup/responsive-and-compound.ts | 4 +- packages/core/tests/setup/simple-compound.ts | 4 +- packages/core/tests/setup/simple-only-root.ts | 4 +- .../core/tests/setup/simple-responsive.ts | 4 +- .../core/tests/setup/simple-with-slots.ts | 4 +- packages/core/tests/setup/specific.ts | 6 +- packages/core/vite.config.ts | 4 +- packages/sandbox/README.md | 12 +- packages/ui/README.md | 18 +- packages/ui/package.json | 2 +- packages/ui/src/components/Label/Label.tsx | 2 +- .../ui/src/components/Label/Label.variants.ts | 6 +- packages/ui/tailwind.config.ts | 2 +- pnpm-lock.yaml | 12 +- 28 files changed, 295 insertions(+), 272 deletions(-) create mode 100644 packages/benchmark/README.md rename packages/benchmark/configs/{tca.mjs => tailwindbuddy.mjs} (89%) rename packages/core/src/{tca.ts => tailwind-buddy.ts} (95%) diff --git a/.github/scripts/release.mjs b/.github/scripts/release.mjs index 540b173..7e37776 100644 --- a/.github/scripts/release.mjs +++ b/.github/scripts/release.mjs @@ -17,7 +17,7 @@ const headerMatchRegex = /^##[^\S\r\n]+v(\d+\.\d+\.\d+)/gm; * ****************************************************************************************************************** */ const CHANGELOG_PATH = path.resolve( __dirname, - "../../packages/tailwind-classes-authority/CHANGELOG.md" + "../../packages/@busbud/tailwind-buddy/CHANGELOG.md" ); function extractLatestReleaseLog() { diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml index 6841436..95e2512 100644 --- a/.github/workflows/run-tests.yml +++ b/.github/workflows/run-tests.yml @@ -27,7 +27,7 @@ jobs: run: npm i -g pnpm && pnpm i - name: Run build - run: pnpm tca:build + run: pnpm tailwindbuddy:build - name: Run test - run: pnpm tca:test + run: pnpm tailwindbuddy:test diff --git a/README.md b/README.md index 7f41752..be9573c 100644 --- a/README.md +++ b/README.md @@ -1,222 +1,196 @@ -# Tailwind classes variants authority 🎨 +# Tailwind Buddy: Your Friendly Helper for Composing Tailwind Classes 🎨 -You are looking for the [documentation go here](#documentation) +You are at the good place if you are looking for: +- The Fastest tailwind variant utilty that you can ask [our benchmarks](./packages/benchmark/README.md) or [see here](#benchmarks) +- Building tailwind variant components powered by tailwind +- Wants to handle variants props responsivness +- Ease of use (We try to find the good balance between developer experience who will build the library and the ones who will use your ui library) +- Compound variants that works with responsivness (Compound can base their classes overrides based on variants values but also other random props you give) +- Framework agnostic (Even if we have build the library base on react it will works nicely with other frameworks) +- SSR friendly (we do generate the necessary classes you need both responsive and not) +- Want to be able to use slots (Sometimes you want to be able to cut down your component into smaller piece but want to use the same props) +- A package actively maintained as its used by our company to power our new design system -## What it is ? +This library is opinonated inspired by [CVA](https://cva.style/docs) and [tailwind-variants](https://github.com/nextui-org/tailwind-variants). -This library is highly opinonated inspired on the object definition by [tailwind-variants](https://github.com/nextui-org/tailwind-variants). +## Minimum setup (no responsive values, no compounds) -## What this library is trying to solve ? +### Vscode settings for tailwind auto complete -First we wanted a solution that can be framework agnostic. To achieve that we need something that build string and receive parameters that do not care if you are from react, vue, vanilla JS. +We do have experimented few path to have auto complete and we still looking for a better way. But for now we suggest you to setup your vscode settings like this. -We found solution that was really close to our needs. [tailwind-variants](https://github.com/nextui-org/tailwind-variants) +`.vscode/settings.json` -The promise of this library was great: -- Responsive props -- Having compound variant that override classes. -- Typescript auto complete is pretty good overhall -- Not so much configurations to work with it - -But the reality is different: -- The package is not super actively maintained. -- Dealing with some complex use case seems inconsistent or not working like: - - We can't mix regular props with, variant props, with responsive variant props. Basically - - working with responsive props and compoundsVariants are just not working - - composing configuration seems to broke typings - - when you make responsive variants it makes all of them responsive - - can't interact with other kinds of props inside the compounds conditions - -## How do tried to solve this - -First we focus on that every features is working: -- variants -- responsive variants -- slots -- make it fast -- compound variants -- compounds variants + responsive variants -- compounds can interact with kind of props than variants values - -Worth mentionning that we still do not support extends. [Check the github discussion](https://github.com/flozero/tailwind-classes-authority/discussions/1) to participate how you would expect to have it working. - -## What would need to be improved - -We will create few github issues with good first issue label. - -## Documentation - -If you need like a cookbook Have a look at: -- [Our tests](packages/core/tests/configs) or [Our utils tests](packages/core/tests/utils/) -- [The test configs that our tests are usings](packages/core/tests/setup) - -### Installation - -``` -pnpm add tailwind-classes-authority -``` - -You may need to add `tailwind-merge` if so. - -``` -pnpm add tailwind-merge +```json +{ + "editor.quickSuggestions": { + "strings": "on" + }, + "css.validate": false, + "editor.inlineSuggest.enabled": true, + "tailwindCSS.classAttributes": [ + "class", + "className", + ".*Styles.", + ".*Classes." + ], + "tailwindCSS.experimental.classRegex": [ + "@tw\\s\\*\/\\s+[\"'`]([^\"'`]*)" + ] +} ``` -### Setup your tailwind types and screens +The important part is `tailwindCSS.experimental.classRegex` that will autocomplete the string when you put `/** @tw */` in front. You will see in the label example how we do use it. -If you are extending / overriding tailwind screens config - -You will need to setup as we have done [inside our tailwind.config test](./packages/ui/tailwind.config.ts) +### Installation -```js - export type Screens = "lg" | "xl" - export const screens: Screens[] = ["lg", "xl"] ``` - -We will need that later to handle responsive props and having a single source of truth. - -### Build your first component - -We will use our [label component](./packages/ui/src/components/Label/Label.types.ts) as reference. - -Generally you will want to start by creating the types of your component - -#### We will need to define the slots we will find. By default you will always have a root slot. - -```js -export type Slots = "root" +pnpm add @busbud/tailwind-buddy ``` -#### Define what variants we will find +### Create your first component -```js -export interface Variants { - fontWeight?: string - size?: ResponsiveVariants<"small" | "large", Screens> -} -``` +Component typing: -You will see that a variant can be responsive or not. This will impact how we will use props on the component. You can omit the Screen generic parameter if you didn't override default tailwind screens. - -#### Defining component Props - -```js -export interface LabelProps - extends React.HTMLAttributes, - Variants { - /** The component used for the root node. Either a string to use a HTML element or a component. */ +``` tsx +export interface LabelBaseProps + extends React.HTMLAttributes { as?: React.ElementType; + disabled?: boolean; } ``` -#### Creating variant configuration type - -```js -export type VariantConfiguration = TCA_VARIANT_DEFINITION -``` - -This config will help us type our variantConfiguration. - -Basically Slots will tell the object what we will need to find as slots. +Component variant definition -What variants need to be defined. +``` tsx +import { compose } from "@busbud/tailwind-buddy" +import { LabelBaseProps } from "./Label.types" +import type { VariantsProps } from "@busbud/tailwind-buddy" -What other props compounds will use to create conditions here we put any props the component can receive but you can restrict it. - -### Defining variant configuration - -```js -export const labelVariantsConfigurations: VariantConfiguration = { - "slots": { - "root": /** @tw */ "text-blue-500" +export const labelVariants = compose({ + "slots": { // you will always have at least the root slot to define + "root": /** @tw */ "text-blue-500" // We do use /** @tw */ to be able to have auto complete from tailwind }, "variants": { "size": { - "default": "small", - "values": { - "small": /** @tw */ "text-sm", - "large": /** @tw */ "text-7xl" - } + "small": /** @tw */ "text-xs", + "large": /** @tw */ "text-7xl" }, "fontWeight": { - "default": "xxl", - "values": { - xxl: { - "root": /** @tw */ "font-extrabold" - } + xxl: { + "root": /** @tw */ "font-extrabold" } } + }, + "defaultVariants": { // all variants should have a default values + "size": "small", + "fontWeight": "xxl" } -} +})() - -export const labelVariants = tca(labelVariantsConfigurations) +export type LabelProps = VariantsProps ``` -We want to have auto complete from tailwind. We tried other solution but it was crashing our IDE. We decided to use something that works until we find something better using `/** @tw */` +And that's it. The key take aways here are: +- You need at least on slot root +- You need to define every default variants +- We do have auto complete using special comments `/** @tw */` -If you want to have this update your vscode settings with this. +If you want to benefits to the maximum we suggest you to use [tailwind merge](#adding-tailwind-merge-to-minify-the-string-generated) -```json -{ - "editor.quickSuggestions": { - "strings": "on" - }, - "css.validate": false, - "editor.inlineSuggest.enabled": true, - "tailwindCSS.classAttributes": [ - "class", - "className", - ".*Styles.", - ".*Classes." - ], - "tailwindCSS.experimental.classRegex": [ - "@tw\\s\\*\/\\s+[\"'`]([^\"'`]*)" - ] -} -``` +## Adding tailwind merge to minify the string generated + +Our package do not take care of giving you the smaller possible string. As `tailwind merge` is probably the best one you can find to handle this. We didn't wanted to create another one. + +We choose to not expose it from our package in case as for us you also wants to use tailwind merge outside of the design system itself but wants to control one version of it. With that you don't have to manage two versions of the same package. -Key take aways: -- As you will see with typescript. You will have to define all the slots. -- You will also have to define the default values of variants -- the values from variants can received a string that means all slots will receive this values otherwise define the slots -- for compounds same rule expect its for class. +### Install tailwind merge -### Apply it inside the component +`pnpm add tailwind-merge` -Now what you have everything defined. lets check [our component](./packages/ui/src/components/Label/Label.tsx). +now you can use it in two ways -```js -const { root } = labelVariants(); +1) without updating tailwind merge + +```tsx +import React from "react"; + +import { PropsWithChildren } from "react"; +import { LabelProps, labelVariants } from "./Label.variants"; +import { twMerge } from "tailwind-merge" + +export const Label: React.FC> = ({ + as: Component = "span", + className, + children, + fontWeight, + size, + disabled, + ...restProps +}) => { + const { root } = labelVariants + + return ( + + {children} + + ); +}; ``` -You will apply elements like this +2) By extending the default tailwind merge + +```tsx +import {extendTailwindMerge} from "tailwind-merge"; -```js -className={root({ - fontWeight, - size, -}, { - className, - disabled -})} +export const COMMON_UNITS = ["small", "medium", "large"]; + +export const twMergeConfig = { + theme: { + opacity: ["disabled"], + spacing: [ + "divider", + "unit", + ], + borderWidth: COMMON_UNITS, + borderRadius: COMMON_UNITS, + }, + classGroups: { + shadow: [{shadow: COMMON_UNITS}], + "font-size": [{text: ["tiny", ...COMMON_UNITS]}], + "bg-image": ["bg-stripe-gradient"], + "min-w": [ + { + "min-w": ["unit", "unit-2", "unit-4", "unit-6", "unit-8", "unit-10", "unit-12", "unit-14"], + }, + ], + }, +}; +export const twMerge = extendTailwindMerge(twMergeConfig); ``` -The first object will take variants values +Then use it as the first example but instead of importing from `tailwind-merge` you would import from this file. + +## Working with slots -the second object will take any other props and also the `className`. The `className` will override everything else. Check [How override works](#how-override-works) if you want to understand a bit more. +## Working with compound variants -### How override works +## Working with responsive Variants -Override will works in this order: -- slots values -- variants values -- compound class when condition meet -- className override +## local development -Basically we put everything in a long string in this order and let tailwind-merge do its job. +## Contributing -### Simple slots Configuration +## Benchmarks -Check [this config](./packages/core/tests/setup/simple.ts) +TCA is our lib. +![](./packages/benchmark/benchmarks.png) \ No newline at end of file diff --git a/package.json b/package.json index 68d0c39..038a1f0 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ }, "scripts": { "commit": "commit", - "tca:release": "pnpm --filter './packages/core' release", - "tca:test": "pnpm --filter './packages/core' test:ci", - "tca:build": "pnpm --filter './packages/core' build" + "tailwindbuddy:release": "pnpm --filter './packages/core' release", + "tailwindbuddy:test": "pnpm --filter './packages/core' test:ci", + "tailwindbuddy:build": "pnpm --filter './packages/core' build" }, "devDependencies": { diff --git a/packages/benchmark/README.md b/packages/benchmark/README.md new file mode 100644 index 0000000..ffb340b --- /dev/null +++ b/packages/benchmark/README.md @@ -0,0 +1,22 @@ +# Benchmarks + +We do compare our library against `cva` amd `tailwind-variants` + +To run them: + +`pnpm install` + +inside core folder: +`pnpm build` + +come back to benchmark folder and run +`node benchmarks.mjs` + +## Test + +`pnpm test` +To make sure we do have the same outputs between library + +## Our current benchmarks. TCA is our library At this time we had another name + +![](./benchmarks.png) \ No newline at end of file diff --git a/packages/benchmark/benchmark.mjs b/packages/benchmark/benchmark.mjs index 4672cd2..d358180 100644 --- a/packages/benchmark/benchmark.mjs +++ b/packages/benchmark/benchmark.mjs @@ -3,7 +3,7 @@ import Benchmark from "benchmark"; const suite = new Benchmark.Suite(); import * as CVA from "./configs/cva.mjs" -import * as TCA from "./configs/tca.mjs" +import * as TAILWINDBUDDY from "./configs/tailwindbuddy.mjs" import * as TV from "./configs/tv.mjs" import { twMerge } from "./configs/twMerge.config.mjs" @@ -16,8 +16,8 @@ suite .add("CVA - slots false - twMerge no - compound yes", function () { CVA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar({ size: "md" }); }) - .add("TCA - slots false - twMerge no - compound yes", function () { - TCA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({ size: "md" }); + .add("TAILWINDBUDDY - slots false - twMerge no - compound yes", function () { + TAILWINDBUDDY.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({ size: "md" }); }) // TV - slots false - twMerge yes - compound yes @@ -27,8 +27,8 @@ suite .add("CVA - slots false - twMerge yes - compound yes", function () { twMerge(CVA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar({ size: "md" })); }) - .add("TCA - slots false - twMerge yes - compound yes", function () { - twMerge(TCA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({ size: "md" })); + .add("TAILWINDBUDDY - slots false - twMerge yes - compound yes", function () { + twMerge(TAILWINDBUDDY.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({ size: "md" })); }) .on("cycle", function (event) { diff --git a/packages/benchmark/configs/tca.mjs b/packages/benchmark/configs/tailwindbuddy.mjs similarity index 89% rename from packages/benchmark/configs/tca.mjs rename to packages/benchmark/configs/tailwindbuddy.mjs index 71a2628..5734f4c 100644 --- a/packages/benchmark/configs/tca.mjs +++ b/packages/benchmark/configs/tailwindbuddy.mjs @@ -1,4 +1,4 @@ -import { tca } from "tailwind-classes-authority" +import { compose } from "@busbud/tailwind-buddy" const options = { slots: { @@ -33,11 +33,11 @@ const options = { } export const noSlotsAndCompoundNoTwMergeNoResponsive = { - avatar: tca(options)(), + avatar: compose(options)(), } export const slotsAndCompoundNoTwMergeNoResponsive = { - avatar: tca({ + avatar: compose({ ...options, slots: { ...options.slots, diff --git a/packages/benchmark/package.json b/packages/benchmark/package.json index 00c05e1..3cbda59 100644 --- a/packages/benchmark/package.json +++ b/packages/benchmark/package.json @@ -13,7 +13,7 @@ "devDependencies": { "benchmark": "^2.1.4", "class-variance-authority": "^0.7.0", - "tailwind-classes-authority": "workspace:*", + "@busbud/tailwind-buddy": "workspace:*", "tailwind-merge": "^2.3.0", "tailwind-variants": "^0.2.1", "vitest": "^1.4.0" diff --git a/packages/benchmark/validate.test.mjs b/packages/benchmark/validate.test.mjs index 1f5bfec..86dafd5 100644 --- a/packages/benchmark/validate.test.mjs +++ b/packages/benchmark/validate.test.mjs @@ -1,6 +1,6 @@ import { expect, test, describe } from 'vitest' import * as CVA from "./configs/cva.mjs" -import * as TCA from "./configs/tca.mjs" +import * as TAILWINDBUDDY from "./configs/tailwindbuddy.mjs" import * as TV from "./configs/tv.mjs" import { twMerge } from "./configs/twMerge.config.mjs" @@ -14,7 +14,7 @@ describe("validate output between libs", () => { expect( CVA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar({ size: "md" }) ).toBe( - TCA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({ size: "md" }) + TAILWINDBUDDY.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({ size: "md" }) ) }) @@ -27,7 +27,7 @@ describe("validate output between libs", () => { expect( twMerge(CVA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar({ size: "md" })) ).toBe( - twMerge(TCA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({ size: "md" })) + twMerge(TAILWINDBUDDY.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({ size: "md" })) ) }) }) \ No newline at end of file diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 744f20e..846ac6c 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,11 +1,11 @@ ## v0.0.25 -[compare changes](https://github.com/busbud/tailwind-classes-authority/compare/v0.0.24...v0.0.25) +[compare changes](https://github.com/busbud/@busbud/tailwind-buddy/compare/v0.0.24...v0.0.25) ### 🏡 Chore -- Fix typing for responsiveVariants multiple values ([89a74fa](https://github.com/busbud/tailwind-classes-authority/commit/89a74fa)) +- Fix typing for responsiveVariants multiple values ([89a74fa](https://github.com/busbud/@busbud/tailwind-buddy/commit/89a74fa)) ### ❤️ Contributors @@ -13,46 +13,46 @@ ## v0.0.24 -[compare changes](https://github.com/busbud/tailwind-classes-authority/compare/v0.0.23...v0.0.24) +[compare changes](https://github.com/busbud/@busbud/tailwind-buddy/compare/v0.0.23...v0.0.24) ### 🚀 Enhancements -- Add documentation ([9973d7e](https://github.com/busbud/tailwind-classes-authority/commit/9973d7e)) -- Add documentation ([e650e98](https://github.com/busbud/tailwind-classes-authority/commit/e650e98)) -- Add documentation ([88f01a0](https://github.com/busbud/tailwind-classes-authority/commit/88f01a0)) -- Improve typings and make sure everything is working in the sandbox ([a1797e3](https://github.com/busbud/tailwind-classes-authority/commit/a1797e3)) -- Update benchmark for cva, tv, tca ([1d6af50](https://github.com/busbud/tailwind-classes-authority/commit/1d6af50)) -- Provide better benchmarks and testing ([e01d067](https://github.com/busbud/tailwind-classes-authority/commit/e01d067)) +- Add documentation ([9973d7e](https://github.com/busbud/@busbud/tailwind-buddy/commit/9973d7e)) +- Add documentation ([e650e98](https://github.com/busbud/@busbud/tailwind-buddy/commit/e650e98)) +- Add documentation ([88f01a0](https://github.com/busbud/@busbud/tailwind-buddy/commit/88f01a0)) +- Improve typings and make sure everything is working in the sandbox ([a1797e3](https://github.com/busbud/@busbud/tailwind-buddy/commit/a1797e3)) +- Update benchmark for cva, tv, tailwindbuddy ([1d6af50](https://github.com/busbud/@busbud/tailwind-buddy/commit/1d6af50)) +- Provide better benchmarks and testing ([e01d067](https://github.com/busbud/@busbud/tailwind-buddy/commit/e01d067)) ### 📖 Documentation -- Start working on the documentation ([25c4cf8](https://github.com/busbud/tailwind-classes-authority/commit/25c4cf8)) +- Start working on the documentation ([25c4cf8](https://github.com/busbud/@busbud/tailwind-buddy/commit/25c4cf8)) ### 🏡 Chore -- **release:** V0.0.23 ([a4b7372](https://github.com/busbud/tailwind-classes-authority/commit/a4b7372)) -- Remove unused libraries ([d95e104](https://github.com/busbud/tailwind-classes-authority/commit/d95e104)) -- Adding @nuxthq/studio ([189839b](https://github.com/busbud/tailwind-classes-authority/commit/189839b)) -- Try documentation deployment ([28c1791](https://github.com/busbud/tailwind-classes-authority/commit/28c1791)) -- Try documentation deployment ([0c2bec2](https://github.com/busbud/tailwind-classes-authority/commit/0c2bec2)) -- Try documentation deployment ([01cc150](https://github.com/busbud/tailwind-classes-authority/commit/01cc150)) -- Add missing lib utils ([e8d1247](https://github.com/busbud/tailwind-classes-authority/commit/e8d1247)) -- Add missing lib utils ([1048744](https://github.com/busbud/tailwind-classes-authority/commit/1048744)) -- Add missing lib utils ([f8acf59](https://github.com/busbud/tailwind-classes-authority/commit/f8acf59)) -- Add missing lib utils ([407bb55](https://github.com/busbud/tailwind-classes-authority/commit/407bb55)) -- Add missing lib utils ([2302050](https://github.com/busbud/tailwind-classes-authority/commit/2302050)) -- Move back doc folder ([241bd07](https://github.com/busbud/tailwind-classes-authority/commit/241bd07)) -- Move back doc folder ([fc3b99e](https://github.com/busbud/tailwind-classes-authority/commit/fc3b99e)) -- Add benchmark and update a bit logic ([7891504](https://github.com/busbud/tailwind-classes-authority/commit/7891504)) -- Improving typing ([40d04e7](https://github.com/busbud/tailwind-classes-authority/commit/40d04e7)) -- Improving typing ([5a6da73](https://github.com/busbud/tailwind-classes-authority/commit/5a6da73)) -- Improving typing ([57a38a0](https://github.com/busbud/tailwind-classes-authority/commit/57a38a0)) -- Update typing ([b99aabf](https://github.com/busbud/tailwind-classes-authority/commit/b99aabf)) -- Reduce size of generated list and improve performance ([a8f1d2f](https://github.com/busbud/tailwind-classes-authority/commit/a8f1d2f)) -- Reduce size of generated list and improve performance ([307b38e](https://github.com/busbud/tailwind-classes-authority/commit/307b38e)) -- Reduce size of generated list and improve performance ([9db3b8f](https://github.com/busbud/tailwind-classes-authority/commit/9db3b8f)) -- Remove documentation folder and add benchmark ([8169f16](https://github.com/busbud/tailwind-classes-authority/commit/8169f16)) -- Working on responsive screens default values ([1ae9a8e](https://github.com/busbud/tailwind-classes-authority/commit/1ae9a8e)) +- **release:** V0.0.23 ([a4b7372](https://github.com/busbud/@busbud/tailwind-buddy/commit/a4b7372)) +- Remove unused libraries ([d95e104](https://github.com/busbud/@busbud/tailwind-buddy/commit/d95e104)) +- Adding @nuxthq/studio ([189839b](https://github.com/busbud/@busbud/tailwind-buddy/commit/189839b)) +- Try documentation deployment ([28c1791](https://github.com/busbud/@busbud/tailwind-buddy/commit/28c1791)) +- Try documentation deployment ([0c2bec2](https://github.com/busbud/@busbud/tailwind-buddy/commit/0c2bec2)) +- Try documentation deployment ([01cc150](https://github.com/busbud/@busbud/tailwind-buddy/commit/01cc150)) +- Add missing lib utils ([e8d1247](https://github.com/busbud/@busbud/tailwind-buddy/commit/e8d1247)) +- Add missing lib utils ([1048744](https://github.com/busbud/@busbud/tailwind-buddy/commit/1048744)) +- Add missing lib utils ([f8acf59](https://github.com/busbud/@busbud/tailwind-buddy/commit/f8acf59)) +- Add missing lib utils ([407bb55](https://github.com/busbud/@busbud/tailwind-buddy/commit/407bb55)) +- Add missing lib utils ([2302050](https://github.com/busbud/@busbud/tailwind-buddy/commit/2302050)) +- Move back doc folder ([241bd07](https://github.com/busbud/@busbud/tailwind-buddy/commit/241bd07)) +- Move back doc folder ([fc3b99e](https://github.com/busbud/@busbud/tailwind-buddy/commit/fc3b99e)) +- Add benchmark and update a bit logic ([7891504](https://github.com/busbud/@busbud/tailwind-buddy/commit/7891504)) +- Improving typing ([40d04e7](https://github.com/busbud/@busbud/tailwind-buddy/commit/40d04e7)) +- Improving typing ([5a6da73](https://github.com/busbud/@busbud/tailwind-buddy/commit/5a6da73)) +- Improving typing ([57a38a0](https://github.com/busbud/@busbud/tailwind-buddy/commit/57a38a0)) +- Update typing ([b99aabf](https://github.com/busbud/@busbud/tailwind-buddy/commit/b99aabf)) +- Reduce size of generated list and improve performance ([a8f1d2f](https://github.com/busbud/@busbud/tailwind-buddy/commit/a8f1d2f)) +- Reduce size of generated list and improve performance ([307b38e](https://github.com/busbud/@busbud/tailwind-buddy/commit/307b38e)) +- Reduce size of generated list and improve performance ([9db3b8f](https://github.com/busbud/@busbud/tailwind-buddy/commit/9db3b8f)) +- Remove documentation folder and add benchmark ([8169f16](https://github.com/busbud/@busbud/tailwind-buddy/commit/8169f16)) +- Working on responsive screens default values ([1ae9a8e](https://github.com/busbud/@busbud/tailwind-buddy/commit/1ae9a8e)) ### ❤️ Contributors @@ -179,18 +179,18 @@ ## v0.0.15 -[compare changes](https://github.com/flozero/tailwind-classes-authority/compare/v0.0.14...v0.0.15) +[compare changes](https://github.com/flozero/@busbud/tailwind-buddy/compare/v0.0.14...v0.0.15) ### 🚀 Enhancements -- Make compound variant responsive ([be81e53](https://github.com/flozero/tailwind-classes-authority/commit/be81e53)) -- Enforce otherProps to have other compound expactation + className ([21c64c2](https://github.com/flozero/tailwind-classes-authority/commit/21c64c2)) +- Make compound variant responsive ([be81e53](https://github.com/flozero/@busbud/tailwind-buddy/commit/be81e53)) +- Enforce otherProps to have other compound expactation + className ([21c64c2](https://github.com/flozero/@busbud/tailwind-buddy/commit/21c64c2)) ### 🏡 Chore -- **release:** V0.0.14 ([94447f4](https://github.com/flozero/tailwind-classes-authority/commit/94447f4)) -- Adding sandbox and ui kit project ([12e5167](https://github.com/flozero/tailwind-classes-authority/commit/12e5167)) -- Improved sandbox ([6dff1f8](https://github.com/flozero/tailwind-classes-authority/commit/6dff1f8)) +- **release:** V0.0.14 ([94447f4](https://github.com/flozero/@busbud/tailwind-buddy/commit/94447f4)) +- Adding sandbox and ui kit project ([12e5167](https://github.com/flozero/@busbud/tailwind-buddy/commit/12e5167)) +- Improved sandbox ([6dff1f8](https://github.com/flozero/@busbud/tailwind-buddy/commit/6dff1f8)) ### ❤️ Contributors diff --git a/packages/core/package.json b/packages/core/package.json index e8133f4..cf28fbb 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,18 +1,18 @@ { - "name": "@busbud/tailwind-classes-authority", + "name": "@busbud/tailwind-buddy", "version": "0.0.25", "type": "module", "license": "MIT", "files": [ "dist" ], - "main": "./dist/tca.umd.cjs", - "module": "./dist/tca.js", + "main": "./dist/tailwindbuddy.umd.cjs", + "module": "./dist/tailwindbuddy.js", "types": "./dist/main.d.ts", "exports": { ".": { - "import": "./dist/tca.js", - "require": "./dist/tca.umd.cjs", + "import": "./dist/tailwindbuddy.js", + "require": "./dist/tailwindbuddy.umd.cjs", "types": "./dist/main.d.ts" } }, diff --git a/packages/core/src/main.ts b/packages/core/src/main.ts index d841c2c..d30782b 100644 --- a/packages/core/src/main.ts +++ b/packages/core/src/main.ts @@ -1,3 +1,3 @@ export { generateSafeList } from "./utils/tailwind-utils"; -export { tca } from "./tca" -export type { VariantsProps } from "./tca" \ No newline at end of file +export { compose } from "./tailwind-buddy" +export type { VariantsProps } from "./tailwind-buddy" \ No newline at end of file diff --git a/packages/core/src/tca.ts b/packages/core/src/tailwind-buddy.ts similarity index 95% rename from packages/core/src/tca.ts rename to packages/core/src/tailwind-buddy.ts index 15f0ba8..4be9a12 100644 --- a/packages/core/src/tca.ts +++ b/packages/core/src/tailwind-buddy.ts @@ -54,7 +54,7 @@ export type MergedProps> = { [K in keyof Props]?: Props[K] } -export type TCA = +export type TB = < V extends Variants, CV extends CompoundVariant, @@ -72,7 +72,7 @@ export type TCA = ) => () => { [Slot in keyof S]: (props?: MergedProps) => string } & { - definition: { + definition: () => { slots: S, variants?: V; compoundVariants?: CV[]; @@ -97,7 +97,7 @@ function transformConditionsToBeUsable(obj: any) { return acc; } -export const tca: TCA = (variantDefinition) => (): any => { +export const compose: TB = (variantDefinition) => (): any => { const slots = Object.keys(variantDefinition.slots); return slots.reduce((acc, slot: string) => { acc[slot] = (props: any) => { @@ -189,6 +189,6 @@ export const tca: TCA = (variantDefinition) => (): any => { }; return acc; }, { - definition: variantDefinition + definition: () => variantDefinition } as any); }; diff --git a/packages/core/src/utils/tailwind-utils.ts b/packages/core/src/utils/tailwind-utils.ts index 69d73c4..8baf8d0 100644 --- a/packages/core/src/utils/tailwind-utils.ts +++ b/packages/core/src/utils/tailwind-utils.ts @@ -5,10 +5,11 @@ export const generateSafeList = function (variantsArray: any[], screens: string[ const safelistClasses: Set = new Set() const compoundClassesToTransform: Set = new Set() variantsArray.forEach(({ definition }) => { - if (definition.responsiveVariants && definition.responsiveVariants.length > 0) { - const compounds = definition.compoundVariants || [] - definition.responsiveVariants.forEach((variant: any) => { - Object.entries(definition.variants[variant]).forEach(([key, value]: any) => { + const definitionResult = definition() + if (definitionResult.responsiveVariants && definitionResult.responsiveVariants.length > 0) { + const compounds = definitionResult.compoundVariants || [] + definitionResult.responsiveVariants.forEach((variant: any) => { + Object.entries(definitionResult.variants[variant]).forEach(([key, value]: any) => { if (typeof value === "string") { value.split(" ").forEach((v: any) => safelistClasses.add(v)) } else if (typeof value === "object") { diff --git a/packages/core/tests/setup/responsive-and-compound.ts b/packages/core/tests/setup/responsive-and-compound.ts index f261ed9..1142ae5 100644 --- a/packages/core/tests/setup/responsive-and-compound.ts +++ b/packages/core/tests/setup/responsive-and-compound.ts @@ -1,10 +1,10 @@ -import { tca } from "../../src/tca"; +import { compose } from "../../src/tailwind-buddy"; interface MyComponent { disabled?: boolean } -export const responsiveAndCompoundComponent = tca({ +export const responsiveAndCompoundComponent = compose({ "slots": { "root": /** @tw */ "text-red-100", }, diff --git a/packages/core/tests/setup/simple-compound.ts b/packages/core/tests/setup/simple-compound.ts index 1622f07..da0bf97 100644 --- a/packages/core/tests/setup/simple-compound.ts +++ b/packages/core/tests/setup/simple-compound.ts @@ -1,10 +1,10 @@ -import { tca } from "../../src/tca"; +import { compose } from "../../src/tailwind-buddy"; interface MyComponent { disabled?: boolean } -export const simpleCompoundComponent = tca({ +export const simpleCompoundComponent = compose({ "slots": { "root": /** @tw */ "text-red-100", "children": /** @tw */ "text-blue-100", diff --git a/packages/core/tests/setup/simple-only-root.ts b/packages/core/tests/setup/simple-only-root.ts index 745dd8a..7b8fa46 100644 --- a/packages/core/tests/setup/simple-only-root.ts +++ b/packages/core/tests/setup/simple-only-root.ts @@ -1,6 +1,6 @@ -import { tca } from "../../src/tca"; +import { compose } from "../../src/tailwind-buddy"; -export const simpleComponent = tca({ +export const simpleComponent = compose({ "slots": { "root": "text-red-100", }, diff --git a/packages/core/tests/setup/simple-responsive.ts b/packages/core/tests/setup/simple-responsive.ts index f1da7e1..e138592 100644 --- a/packages/core/tests/setup/simple-responsive.ts +++ b/packages/core/tests/setup/simple-responsive.ts @@ -1,6 +1,6 @@ -import { tca } from "../../src/tca"; +import { compose } from "../../src/tailwind-buddy"; -export const simpleResponsiveComponent = tca({ +export const simpleResponsiveComponent = compose({ "slots": { "root": /** @tw */ "text-red-100", }, diff --git a/packages/core/tests/setup/simple-with-slots.ts b/packages/core/tests/setup/simple-with-slots.ts index c68d463..b5b5e52 100644 --- a/packages/core/tests/setup/simple-with-slots.ts +++ b/packages/core/tests/setup/simple-with-slots.ts @@ -1,6 +1,6 @@ -import { tca } from "../../src/tca"; +import { compose } from "../../src/tailwind-buddy"; -export const simpleComponent = tca({ +export const simpleComponent = compose({ slots: { root: "text-red-100 text-red-200", label: "text-blue-100 text-blue-200" diff --git a/packages/core/tests/setup/specific.ts b/packages/core/tests/setup/specific.ts index c563a3e..4239688 100644 --- a/packages/core/tests/setup/specific.ts +++ b/packages/core/tests/setup/specific.ts @@ -1,6 +1,6 @@ -import { ElementType, ReactNode } from "react"; -import { VariantsProps, tca } from "../../src/tca"; +import { ElementType } from "react"; +import { compose } from "../../src/tailwind-buddy"; export interface LabelProps { as?: ElementType; @@ -8,7 +8,7 @@ export interface LabelProps { disabled?: boolean; } -export const labelVariants = tca( +export const labelVariants = compose( { slots: { root: /** @tw */ "inline-flex", diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts index dc8ee6e..d8f832c 100644 --- a/packages/core/vite.config.ts +++ b/packages/core/vite.config.ts @@ -13,9 +13,9 @@ export default defineConfig({ lib: { // Could also be a dictionary or array of multiple entry points entry: ["./src/main.ts"], - name: "tca", + name: "tailwindbuddy", // the proper extensions will be added - fileName: "tca", + fileName: "tailwindbuddy", }, rollupOptions: { external: ["fs", "path"], diff --git a/packages/sandbox/README.md b/packages/sandbox/README.md index 6e4f5ca..8ba4bf1 100644 --- a/packages/sandbox/README.md +++ b/packages/sandbox/README.md @@ -1 +1,11 @@ -# Sandbox \ No newline at end of file +# This is the Sandbox example project that is using the design system build on top of tailwind buddy + +[Refer to the document for more](../../README.md) + +## Run the project + +``` +pnpm install + +pnpm dev +``` \ No newline at end of file diff --git a/packages/ui/README.md b/packages/ui/README.md index 7efcce6..2c31c73 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -1 +1,17 @@ -# ui kit \ No newline at end of file +# This is the design system example project that is using tailwind buddy + +[Refer to the document for more](../../README.md) + +## Run the project + +``` +pnpm install + +pnpm build + +or + +pnpm build -w #if you want to have live update +``` + +[Go to sandbox to now check your updates](../sandbox/README.md) \ No newline at end of file diff --git a/packages/ui/package.json b/packages/ui/package.json index b5e75e6..c1c864c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -45,7 +45,7 @@ "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.19", "postcss": "^8.4.38", - "tailwind-classes-authority": "workspace:*", + "@busbud/tailwind-buddy": "workspace:*", "tailwindcss": "^3.4.3", "typescript": "^5.2.2", "vite": "^5.2.0", diff --git a/packages/ui/src/components/Label/Label.tsx b/packages/ui/src/components/Label/Label.tsx index 1728b27..243f5d0 100644 --- a/packages/ui/src/components/Label/Label.tsx +++ b/packages/ui/src/components/Label/Label.tsx @@ -21,7 +21,7 @@ export const Label: React.FC> = ({ fontWeight, size, className, - disabled, + disabled }))} {...restProps} > diff --git a/packages/ui/src/components/Label/Label.variants.ts b/packages/ui/src/components/Label/Label.variants.ts index 5e70522..3c73850 100644 --- a/packages/ui/src/components/Label/Label.variants.ts +++ b/packages/ui/src/components/Label/Label.variants.ts @@ -1,8 +1,8 @@ -import { tca } from "tailwind-classes-authority" +import { compose } from "@busbud/tailwind-buddy" import { LabelBaseProps } from "./Label.types" -import type { VariantsProps } from "tailwind-classes-authority" +import type { VariantsProps } from "@busbud/tailwind-buddy" -export const labelVariants = tca({ +export const labelVariants = compose({ "slots": { "root": /** @tw */ "text-blue-500" }, diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts index c0760db..1c4a2ce 100644 --- a/packages/ui/tailwind.config.ts +++ b/packages/ui/tailwind.config.ts @@ -1,5 +1,5 @@ import { labelVariants } from "./src/components/Label/Label.variants"; -import { generateSafeList } from "tailwind-classes-authority" +import { generateSafeList } from "@busbud/tailwind-buddy" export type Screens = "sm" | "md" | "lg" | "xl" export const screens: Screens[] = ["sm", "md", "lg", "xl"] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82b2217..2af35db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,15 +23,15 @@ importers: packages/benchmark: devDependencies: + '@busbud/tailwind-buddy': + specifier: workspace:* + version: link:../core benchmark: specifier: ^2.1.4 version: 2.1.4 class-variance-authority: specifier: ^0.7.0 version: 0.7.0 - tailwind-classes-authority: - specifier: workspace:* - version: link:../core tailwind-merge: specifier: ^2.3.0 version: 2.3.0 @@ -121,6 +121,9 @@ importers: specifier: ^2.3.0 version: 2.3.0 devDependencies: + '@busbud/tailwind-buddy': + specifier: workspace:* + version: link:../core '@types/react': specifier: ^18.3.2 version: 18.3.3 @@ -142,9 +145,6 @@ importers: postcss: specifier: ^8.4.38 version: 8.4.38 - tailwind-classes-authority: - specifier: workspace:* - version: link:../core tailwindcss: specifier: ^3.4.3 version: 3.4.4