Rebrand Tailwind Ink to Classy Ink (#16)

.changeset/sixty-rockets-tell.md

@@ -0,0 +1,5 @@
+---
+"classy-ink": major
+---
+
+Initial release

CHANGELOG.md

@@ -1,13 +1 @@
-# tailwind-ink
-
-## 1.0.1
-
-### Patch Changes
-
-- b1abfce: Fix default values not working with intellisense (grow and shrink utilities)
-
-## 1.0.0
-
-### Major Changes
-
-- 999ac38: Initial release
+# classy-ink

README.md

@@ -1,36 +1,36 @@
 <p align="center">
-  <img alt="A screenshot of the example code below" src="https://github.com/DaniGuardiola/tailwind-ink/raw/main/logo.png">
+  <img alt="A screenshot of the example code below" src="https://github.com/DaniGuardiola/classy-ink/raw/main/logo.png">
 </p>
 
-> Build beautiful CLI interfaces with [Tailwind CSS](https://tailwindcss.com)-inspired utility classes and [Ink](https://term.ink/).
+> Build classy CLI interfaces with [Tailwind CSS](https://tailwindcss.com)-inspired utility classes and [Ink](https://term.ink/).
 
-Tailwind Ink is a simple drop-in replacement for the `Box` and `Text` Ink components. It adds support for utility classes through the `class` prop.
+Classy Ink is a simple drop-in replacement for the `Box` and `Text` Ink components. It adds support for utility classes through the `class` prop.
 
 ---
 
 Try the demo now!
 
 ```
-npx tailwind-ink
+npx classy-ink
 ```
 
-Or [try it in your browser](https://stackblitz.com/edit/tailwind-ink-demo?file=README&view=editor).
+Or [try it in your browser](https://stackblitz.com/edit/classy-ink-demo?file=README&view=editor).
 
 ## <a name='Install'></a>Install
 
 ```
-npm install tailwind-ink
+npm install classy-ink
 ```
 
 ## <a name='Example'></a>Example
 
 <p align="center">
-  <img alt="A screenshot of the example code below" src="https://github.com/DaniGuardiola/tailwind-ink/raw/main/example.png">
+  <img alt="A screenshot of the example code below" src="https://github.com/DaniGuardiola/classy-ink/raw/main/example.png">
 </p>
 
 ```tsx
 import { render } from "ink";
-import { Box, Text } from "tailwind-ink";
+import { Box, Text } from "classy-ink";
 
 function Divider() {
   return <Box class="border-gray my-1 border-t" />;
@@ -82,13 +82,13 @@ function App() {
 render(<App />);
 ```
 
-You can [run and edit this example live](https://stackblitz.com/edit/tailwind-ink-demo-jsayvk?file=example.tsx&view=editor) in your browser.
+You can [run and edit this example live](https://stackblitz.com/edit/classy-ink-example?file=example.tsx&view=editor) in your browser.
 
 ## <a name='Features'></a>Features
 
 - Full support\* for all of `Box` and `Text` style props.
 - Optimized for familiarity. Tailwind CSS users will feel right at home.
-- Support for [Tailwind CSS Intellisense](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) and [automatic sorting](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).
+- Compatible with [Tailwind CSS Intellisense](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) and [automatic sorting](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).
 - Customizable screen variants (`sm`, `md`, `lg`...) to adapt to different terminal sizes. _(coming soon)_
 - Runtime compilation, which enables dynamic values like `border-${color}`.
 - Optional cache that prevents recompilation.
@@ -128,10 +128,10 @@ For a history of changes, see the [changelog](CHANGELOG.md).
 
 ## <a name='Usage'></a>Usage
 
-1. Import `Box` and `Text` from `tailwind-ink` instead of `ink`.
+1. Import `Box` and `Text` from `classy-ink` instead of `ink`.
 
    ```tsx
-   import { Box, Text } from "tailwind-ink";
+   import { Box, Text } from "classy-ink";
    ```
 
 2. Use the `class` prop to apply styles.
@@ -145,6 +145,8 @@ For a history of changes, see the [changelog](CHANGELOG.md).
 
 ### <a name='IDEfeaturesoptional'></a>IDE features (optional)
 
+While Classy Ink is completely separate from Tailwind CSS, some tooling is compatible due to the similarities between the two projects. In particular, a big amount of effort was spent on Intellisense compatibility through a hand-made Tailwind CSS configuration.
+
 1. Install the [Tailwind CSS Intellisense extension](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) for Visual Studio Code or any supported IDE.
 
 2. Install `tailwindcss` in your project.
@@ -156,25 +158,27 @@ For a history of changes, see the [changelog](CHANGELOG.md).
 3. Create a `tailwind.config.js` file in the project root with the following content:
 
    ```tsx
-   import { tailwindConfig } from "tailwind-ink/intellisense";
+   import { tailwindConfig } from "classy-ink/intellisense";
 
    export default tailwindConfig;
    ```
 
 For automatic class sorting, set up the [Tailwind CSS Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).
 
+> Note that the Tailwind CSS configuration is NOT used for the actual compilation or anything else. It's only used for Intellisense.
+
 ### <a name='Cacheoptional'></a>Cache (optional)
 
-To use the cache, wrap your app in a `<TailwindProvider />`, for example:
+To use the cache, wrap your app in a `<ClassyInkProvider />`, for example:
 
 ```tsx
-import { TailwindProvider, Box } from "tailwind-ink";
+import { ClassyInkProvider, Box } from "classy-ink";
 
 function App() {
   return (
-    <TailwindProvider>
+    <ClassyInkProvider>
       <Box class="border p-1" />
-    </TailwindProvider>
+    </ClassyInkProvider>
   );
 }
 ```
@@ -187,7 +191,7 @@ Also, note that the cache uses a [Least Recently Used](<https://en.wikipedia.org
 
 ### <a name='Tips'></a>Tips
 
-The compilation process occurs at runtime, so you can use dynamic values in your classes (as opposed to standard Tailwind CSS).
+The compilation process occurs at runtime, so you can use dynamic values in your classes. If you're used to Tailwind CSS (where this is not possible), this might be a welcome difference.
 
 For example, the following will work:
 
@@ -197,7 +201,7 @@ For example, the following will work:
 
 ---
 
-You can still pass any style props you want, and they will take precedence over the Tailwind Ink classes.
+You can still pass any style props you want, and they will take precedence over the Classy Ink classes.
 
 For example, in the following code the final value of `flexDirection` will be `"row"` instead of `"column"`:
 
@@ -217,13 +221,13 @@ Utilities that support a numeric value (`gap`, `m`, `grow`...) also support the
 
 ---
 
-Tailwind Ink is relatively lax about allowed values in comparison to Tailwind CSS. For example, `w-23/58` (equivalent to `width: 0.396551724%`) and `w-71827` will work out of the box, even though they are atypical.
+Classy Ink is relatively lax about allowed values in comparison to Tailwind CSS. For example, `w-23/58` (equivalent to `width: 0.396551724%`) and `w-71827` will work out of the box, even though they are atypical.
 
 Values like these are not "officially supported" though, and might stop working in a future update. If you need them, use the arbitrary value syntax (e.g. `w-[0.396551%]` or `w-[71827]`) which will always support custom values.
 
 ## <a name='Utilityclasses'></a>Utility classes
 
-All `<Box />` and `<Text />` style props are supported. Below are their equivalent Tailwind Ink utilities.
+All `<Box />` and `<Text />` style props are supported. Below are their equivalent Classy Ink utilities.
 
 ### <a name='Boxprops'></a>`Box` props
 
@@ -303,13 +307,13 @@ All colors except `gray` also have a "bright" equivalent named `<color>-bright`
 
 ## Custom usage
 
-If you have some kind of custom use case, you can use the `tailwindToInkProps` function directly. This function takes a class string and returns an object with the corresponding Ink props.
+If you have some kind of custom use case, you can use the `compileClass` function directly. This function takes a class string and returns an object with the corresponding Ink props.
 
 ```tsx
-import { tailwindToInkProps } from "tailwind-ink";
+import { compileClass } from "classy-ink";
 import { Box } from "ink";
 
-const inkProps = tailwindToInkProps("border border-red");
+const inkProps = compileClass("border border-red");
 <Box {...inkProps} />;
 ```
 
@@ -325,4 +329,6 @@ Contributions are welcome, especially those that add missing features like the o
 
 ## <a name='Author'></a>Author
 
-Tailwind Ink was built by [Dani Guardiola](https://dio.la/).
+Classy Ink was built by [Dani Guardiola](https://dio.la/).
+
+Classy Ink is NOT affiliated with Tailwind CSS, Tailwind Labs Inc., or the Ink project.

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "tailwind-ink",
+  "name": "classy-ink",
   "description": "Build beautiful CLI interfaces with utility classes and Ink",
-  "version": "1.0.1",
+  "version": "0.0.1",
   "author": {
     "email": "[email protected]",
     "name": "Dani Guardiola",
@@ -51,7 +51,7 @@
     }
   },
   "bin": {
-    "tailwind-ink": "dist/esm/demo/index.js"
+    "classy-ink": "dist/esm/demo/index.js"
   },
   "tshy": {
     "dialects": [

src/components/Box.tsx

@@ -1,7 +1,7 @@
-import { Box as InkBox,type DOMElement } from "ink";
+import { Box as InkBox, type DOMElement } from "ink";
 import { type ComponentPropsWithRef, forwardRef } from "react";
 
-import { useTailwindInk } from "./tailwind-ink.js";
+import { useClassyInk } from "./useClassyInk.js";
 
 export type BoxProps = ComponentPropsWithRef<typeof InkBox> & {
   class?: string;
@@ -11,5 +11,5 @@ export const Box = forwardRef<DOMElement, BoxProps>(function Box(
   { class: className, ...props },
   ref,
 ) {
-  return <InkBox ref={ref} {...useTailwindInk(className)} {...props} />;
+  return <InkBox ref={ref} {...useClassyInk(className)} {...props} />;
 });

src/components/TailwindInkProvider.tsx → src/components/ClassyInkProvider.tsx

@@ -2,19 +2,19 @@ import { type ReactNode, useMemo } from "react";
 
 import { createLruCache } from "../lib/create-lru-cache.js";
 import { type Props } from "../shared.js";
-import { TailwindInkContext } from "./context.js";
+import { ClassyInkContext } from "./context.js";
 
 const DEFAULT_MAX_CACHE_SIZE = 500;
 
-export type TailwindInkProviderProps = {
+export type ClassyInkProviderProps = {
   maxCacheSize?: number;
   children: ReactNode;
 };
 
-export function TailwindInkProvider({
+export function ClassyInkProvider({
   maxCacheSize = DEFAULT_MAX_CACHE_SIZE,
   children,
-}: TailwindInkProviderProps) {
+}: ClassyInkProviderProps) {
   const cache = useMemo(
     () =>
       maxCacheSize > 0
@@ -23,8 +23,8 @@ export function TailwindInkProvider({
     [maxCacheSize],
   );
   return (
-    <TailwindInkContext.Provider value={{ cache }}>
+    <ClassyInkContext.Provider value={{ cache }}>
       {children}
-    </TailwindInkContext.Provider>
+    </ClassyInkContext.Provider>
   );
 }

src/components/Text.tsx

@@ -1,12 +1,12 @@
 import { Text as InkText } from "ink";
 import { type ComponentPropsWithoutRef } from "react";
 
-import { useTailwindInk } from "./tailwind-ink.js";
+import { useClassyInk } from "./useClassyInk.js";
 
 export type TextProps = ComponentPropsWithoutRef<typeof InkText> & {
   class?: string;
 };
 
 export function Text({ class: className, ...props }: TextProps) {
-  return <InkText {...useTailwindInk(className)} {...props} />;
+  return <InkText {...useClassyInk(className)} {...props} />;
 }

src/components/context.tsx

@@ -3,14 +3,14 @@ import { createContext, useContext } from "react";
 import { type LruCache } from "../lib/create-lru-cache.js";
 import { type Props } from "../shared.js";
 
-type TailwindInkContextValue = {
+type ClassyInkContextValue = {
   cache?: LruCache<string, Props>;
 };
 
-export const TailwindInkContext = createContext<
-  TailwindInkContextValue | undefined
+export const ClassyInkContext = createContext<
+  ClassyInkContextValue | undefined
 >(undefined);
 
-export function useTailwindInkContext(): Partial<TailwindInkContextValue> {
-  return useContext(TailwindInkContext) ?? {};
+export function useClassyInkContext(): Partial<ClassyInkContextValue> {
+  return useContext(ClassyInkContext) ?? {};
 }

src/components/tailwind-ink.ts → src/components/useClassyInk.ts

@@ -1,16 +1,16 @@
 import { useMemo } from "react";
 
-import { tailwindToInkProps } from "../index.js";
+import { compileClass } from "../index.js";
 import { type Props } from "../shared.js";
-import { useTailwindInkContext } from "./context.js";
+import { useClassyInkContext } from "./context.js";
 
-export function useTailwindInk(className?: string): Props {
-  const { cache } = useTailwindInkContext();
+export function useClassyInk(className?: string): Props {
+  const { cache } = useClassyInkContext();
   return useMemo(() => {
     if (!className) return {};
     const cacheResult = cache?.get(className);
     if (cacheResult) return cacheResult;
-    const result = tailwindToInkProps(className);
+    const result = compileClass(className);
     cache?.set(className, result);
     return result;
   }, [className]);

src/demo/components/BasicDemo.tsx

@@ -1,9 +1,9 @@
-import { Box, Text } from "../../index.js"; // "tailwind-ink"
+import { Box, Text } from "../../index.js"; // "classy-ink"
 import { DemoPageTitle } from "./DemoComponents.js";
 
 function Column1() {
   return (
-    <Box class="grow flex-col gap-1">
+    <Box class="flex-col grow gap-1">
       <Box class="flex-col">
         <Text class="italic">m-1</Text>
         <Box class="border">
@@ -40,7 +40,7 @@ function Column1() {
 
 function Column2() {
   return (
-    <Box class="grow flex-col gap-1">
+    <Box class="flex-col grow gap-1">
       <Box class="flex-col">
         <Text class="italic">p-1</Text>
         <Box class="border border-red p-1">
@@ -71,7 +71,7 @@ function Column2() {
 
 function Column3() {
   return (
-    <Box class="grow flex-col gap-1">
+    <Box class="flex-col grow gap-1">
       <Box class="flex-col">
         <Text class="italic">w-10</Text>
         <Box class="border border-red w-10" />
@@ -104,10 +104,9 @@ function Column3() {
   );
 }
 
-
 export function BasicDemo() {
   return (
-    <Box class="grow flex-col px-1 gap-1">
+    <Box class="flex-col px-1 grow gap-1">
       <DemoPageTitle>Basic utilities</DemoPageTitle>
       <Box class="gap-2">
         <Column1 />