cssier 0.1.3 → 0.1.5

package/README.md

@@ -1,42 +1,168 @@
-# 🧑‍🎨CSSIER
+Got it! Here's the updated README with the correct usage of the `<Button />` component from `cssier`:
 
-Inline styling for pseudoelements and pseudoclasses
+# cssier
 
-## Requirements
+`cssier` is a React component library designed to simplify inline styling for pseudo-classes and pseudo-elements. With `cssier`, you can easily manage and apply custom styles for standard HTML and SVG elements, making your styling both dynamic and maintainable.
 
-- React >=18.2
-- A head element in your HTML document
-- Good judgements
+## Features
 
-## Getting Started
+- **Pre-built Components**: Import ready-to-use React components for HTML and SVG tags.
+- **Advanced Styling**: Use the `useStylesheet` hook to manage custom styles for pseudo-classes and pseudo-elements.
+- **TypeScript Support**: Includes TypeScript definitions for a smoother development experience.
+- **Storybook Integration**: Automatically generates Storybook stories for visual testing and documentation.
+- **Public Storybook**: Explore and interact with the components live at [cssier.danberman.dev](https://cssier.danberman.dev).
 
-1. Install this module using `npm install cssier`
+## Installation
+
+To install `cssier`, use npm, Yarn, or pnpm:
+
+```bash
+npm install cssier
+```
+
+or with Yarn:
+
+```bash
+yarn add cssier
+```
+
+or with pnpm:
+
+```bash
+pnpm add cssier
+```
 
 ## Usage
 
-- Import the desired elements into your file, eg. `import {Div, A, H1} from 'cssier'`
--
+### Importing Components
+
+You can import pre-built React components for HTML and SVG tags from `cssier/components`:
+
+```jsx
+import { Button, Svg } from 'cssier/components'
+
+const MyComponent = () => (
+  <div>
+    <Button onClick={() => alert('Clicked!')}>Click Me</Button>
+    <Svg width="100" height="100">
+      <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
+    </Svg>
+  </div>
+)
+```
+
+### Using the `useStylesheet` Hook
+
+The `useStylesheet` hook from `cssier/hooks` allows you to apply styles for pseudo-classes (`:hover`, `:focus`, etc.) and pseudo-elements (`::before`, `::after`, etc.) directly to your components.
+
+#### Values Returned by `useStylesheet`
+
+The `useStylesheet` hook returns an array where:
+
+- The first element is a unique CSS class ID that can be applied to the component.
+- The second element is a string of CSS styles that were injected into the document. This is useful for debugging, though you typically won't need to use it in production.
 
-## Main Scripts
+```jsx
+import { useStylesheet } from 'cssier/hooks'
 
-Always prepending pnpm:
+const CustomComponent = (props) => {
+  const { pseudo, pseudoId: id, ...rest } = props
+  const [pseudoId, css] = useStylesheet(pseudo, id)
 
-- `dev`: Bootstrap the Storybook preview with Hot Reload.
-- `build`: Builds the static storybook project.
-- `build:lib`: Builds the component library into the **dist** folder.
-- `lint:fix`: Applies linting based on the rules defined in **.eslintrc.js**.
-- `format:prettier`: Formats files using the prettier rules defined in **.prettierrc**.
-- `test`: Runs testing using watch mode.
-- `test:cov`: Runs testing displaying a coverage report.
+  return (
+    <>
+      <style>{css}</style>
+      <div {...rest} className={`${rest.className ?? ''}pseudoId`}>
+        Styled with pseudo-classes and pseudo-elements!
+      </div>
+    </>
+  )
+}
+```
 
-## Blog Post
+#### Example of Custom Styling with Pseudo-classes
 
-I created a post explaning how to set up this library and publish it to a package registry! You can read it [here](https://igna.hashnode.dev/vite-react-typescript-component-library-template-setup-explanation).
+```jsx
+<CustomComponent
+  pseudo={{
+    hover: { backgroundColor: 'lightblue' },
+    focus: { outline: '2px solid blue' },
+  }}
+  pseudoId="custom-id"
+>
+  Hover or focus on me!
+</CustomComponent>
+```
 
-## Author
+#### Example of Custom Styling with Pseudo-elements
 
-[Ignacio Miranda Figueroa](https://www.linkedin.com/in/ignacio-miranda-figueroa/)
+```jsx
+<CustomComponent
+  pseudo={{
+    before: { content: '"Prefix"', color: 'gray' },
+    after: { content: '"Suffix"', color: 'gray' },
+  }}
+  pseudoId="custom-id"
+>
+  Content with pseudo-elements
+</CustomComponent>
+```
+
+### Dynamic Hover Color Example Using `<Button />`
+
+Here's an example of using the `<Button />` component from `cssier` to create a button that changes its hover color each time it is clicked:
+
+```jsx
+import { useState } from 'react'
+import { Button } from 'cssier/components'
+
+const DynamicButton = () => {
+  const [colorIndex, setColorIndex] = useState(0)
+  const colors = ['lightblue', 'lightcoral', 'lightgreen', 'lightgoldenrodyellow']
+
+  const handleClick = () => {
+    setColorIndex((prevIndex) => (prevIndex + 1) % colors.length)
+  }
+
+  return (
+    <Button
+      pseudo={{
+        hover: { backgroundColor: colors[colorIndex] },
+      }}
+      onClick={handleClick}
+    >
+      Click me to change hover color!
+    </Button>
+  )
+}
+```
+
+### Props and Compatibility
+
+The components provided by `cssier` accept all standard props for their HTML or SVG counterparts. For example, a `<Button>` component will accept props such as `onClick`, `disabled`, `type`, etc., just like a native HTML `<button>` element.
+
+## Public Storybook
+
+Explore and interact with the `cssier` components in our publicly available Storybook at [cssier.danberman.dev](https://cssier.danberman.dev). This is a great way to see the components in action and understand how different styles and props affect their appearance.
+
+## Contributing
+
+To contribute to `cssier`:
+
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feature/your-feature`).
+3. Make your changes.
+4. Commit your changes (`git commit -am 'Add new feature'`).
+5. Push to the branch (`git push origin feature/your-feature`).
+6. Create a Pull Request on GitHub.
 
 ## License
 
-[MIT](LICENSE)
+`cssier` is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
+
+## Additional Resources
+
+- [GitHub Repository](https://github.com/DanBermanTech/cssier) – Source code and issue tracking.
+- [Storybook Documentation](https://storybook.js.org/) – Learn how to use Storybook with your components.
+
+Thank you for choosing `cssier`! We hope it makes managing your styles more intuitive and flexible.

package/dist/components/index.d.ts

@@ -0,0 +1,161 @@
+export { default as A } from './A';
+export { default as Abbr } from './Abbr';
+export { default as Address } from './Address';
+export { default as Area } from './Area';
+export { default as Article } from './Article';
+export { default as Aside } from './Aside';
+export { default as Audio } from './Audio';
+export { default as B } from './B';
+export { default as Base } from './Base';
+export { default as Bdi } from './Bdi';
+export { default as Bdo } from './Bdo';
+export { default as Blockquote } from './Blockquote';
+export { default as Body } from './Body';
+export { default as Br } from './Br';
+export { default as Button } from './Button';
+export { default as Canvas } from './Canvas';
+export { default as Caption } from './Caption';
+export { default as Cite } from './Cite';
+export { default as Code } from './Code';
+export { default as Col } from './Col';
+export { default as Colgroup } from './Colgroup';
+export { default as Data } from './Data';
+export { default as Datalist } from './Datalist';
+export { default as Dd } from './Dd';
+export { default as Del } from './Del';
+export { default as Details } from './Details';
+export { default as Dfn } from './Dfn';
+export { default as Dialog } from './Dialog';
+export { default as Div } from './Div';
+export { default as Dl } from './Dl';
+export { default as Dt } from './Dt';
+export { default as Em } from './Em';
+export { default as Embed } from './Embed';
+export { default as Fieldset } from './Fieldset';
+export { default as Figcaption } from './Figcaption';
+export { default as Figure } from './Figure';
+export { default as Footer } from './Footer';
+export { default as Form } from './Form';
+export { default as H1 } from './H1';
+export { default as H2 } from './H2';
+export { default as H3 } from './H3';
+export { default as H4 } from './H4';
+export { default as H5 } from './H5';
+export { default as H6 } from './H6';
+export { default as Head } from './Head';
+export { default as Header } from './Header';
+export { default as Hgroup } from './Hgroup';
+export { default as Hr } from './Hr';
+export { default as Html } from './Html';
+export { default as I } from './I';
+export { default as Iframe } from './Iframe';
+export { default as Img } from './Img';
+export { default as Input } from './Input';
+export { default as Ins } from './Ins';
+export { default as Kbd } from './Kbd';
+export { default as Label } from './Label';
+export { default as Legend } from './Legend';
+export { default as Li } from './Li';
+export { default as Link } from './Link';
+export { default as Main } from './Main';
+export { default as Map } from './Map';
+export { default as Mark } from './Mark';
+export { default as Meta } from './Meta';
+export { default as Meter } from './Meter';
+export { default as Nav } from './Nav';
+export { default as Noscript } from './Noscript';
+export { default as Object } from './Object';
+export { default as Ol } from './Ol';
+export { default as Optgroup } from './Optgroup';
+export { default as Option } from './Option';
+export { default as Output } from './Output';
+export { default as P } from './P';
+export { default as Param } from './Param';
+export { default as Picture } from './Picture';
+export { default as Pre } from './Pre';
+export { default as Progress } from './Progress';
+export { default as Q } from './Q';
+export { default as Rp } from './Rp';
+export { default as Rt } from './Rt';
+export { default as Ruby } from './Ruby';
+export { default as S } from './S';
+export { default as Samp } from './Samp';
+export { default as Script } from './Script';
+export { default as Section } from './Section';
+export { default as Select } from './Select';
+export { default as Small } from './Small';
+export { default as Source } from './Source';
+export { default as Span } from './Span';
+export { default as Strong } from './Strong';
+export { default as Style } from './Style';
+export { default as Sub } from './Sub';
+export { default as Summary } from './Summary';
+export { default as Sup } from './Sup';
+export { default as Table } from './Table';
+export { default as Tbody } from './Tbody';
+export { default as Td } from './Td';
+export { default as Template } from './Template';
+export { default as Textarea } from './Textarea';
+export { default as Tfoot } from './Tfoot';
+export { default as Th } from './Th';
+export { default as Thead } from './Thead';
+export { default as Time } from './Time';
+export { default as Title } from './Title';
+export { default as Tr } from './Tr';
+export { default as U } from './U';
+export { default as Ul } from './Ul';
+export { default as Var } from './Var';
+export { default as Video } from './Video';
+export { default as Wbr } from './Wbr';
+export { default as Svg } from './Svg';
+export { default as Animate } from './Animate';
+export { default as AnimateTransform } from './AnimateTransform';
+export { default as Circle } from './Circle';
+export { default as ClipPath } from './ClipPath';
+export { default as Defs } from './Defs';
+export { default as Desc } from './Desc';
+export { default as Ellipse } from './Ellipse';
+export { default as FeBlend } from './FeBlend';
+export { default as FeColorMatrix } from './FeColorMatrix';
+export { default as FeComponentTransfer } from './FeComponentTransfer';
+export { default as FeComposite } from './FeComposite';
+export { default as FeConvolveMatrix } from './FeConvolveMatrix';
+export { default as FeDiffuseLighting } from './FeDiffuseLighting';
+export { default as FeDisplacementMap } from './FeDisplacementMap';
+export { default as FeDistantLight } from './FeDistantLight';
+export { default as FeFlood } from './FeFlood';
+export { default as FeGaussianBlur } from './FeGaussianBlur';
+export { default as FeImage } from './FeImage';
+export { default as FeMerge } from './FeMerge';
+export { default as FeMergeNode } from './FeMergeNode';
+export { default as FeMorphology } from './FeMorphology';
+export { default as FeOffset } from './FeOffset';
+export { default as FePointLight } from './FePointLight';
+export { default as FeSpecularLighting } from './FeSpecularLighting';
+export { default as FeSpotLight } from './FeSpotLight';
+export { default as FeTile } from './FeTile';
+export { default as FeTurbulence } from './FeTurbulence';
+export { default as Filter } from './Filter';
+export { default as ForeignObject } from './ForeignObject';
+export { default as G } from './G';
+export { default as Image } from './Image';
+export { default as Line } from './Line';
+export { default as LinearGradient } from './LinearGradient';
+export { default as Marker } from './Marker';
+export { default as Mask } from './Mask';
+export { default as Metadata } from './Metadata';
+export { default as Mpath } from './Mpath';
+export { default as Path } from './Path';
+export { default as Pattern } from './Pattern';
+export { default as Polygon } from './Polygon';
+export { default as Polyline } from './Polyline';
+export { default as RadialGradient } from './RadialGradient';
+export { default as Rect } from './Rect';
+export { default as Stop } from './Stop';
+export { default as Switch } from './Switch';
+export { default as Symbol } from './Symbol';
+export { default as Text } from './Text';
+export { default as TextPath } from './TextPath';
+export { default as Tspan } from './Tspan';
+export { default as Use } from './Use';
+export { default as View } from './View';

package/dist/components/index.js

@@ -0,0 +1,167 @@
+import { A as o, Abbr as l, Address as n, Animate as p, AnimateTransform as F, Area as s, Article as d, Aside as m, Audio as g, B as u, Base as S, Bdi as c, Bdo as T, Blockquote as D, Body as M, Br as b, Button as h, Canvas as C, Caption as P, Circle as f, Cite as H, ClipPath as L, Code as B, Col as y, Colgroup as A, Data as I, Datalist as O, Dd as v, Defs as x, Del as k, Desc as R, Details as G, Dfn as E, Dialog as N, Div as U, Dl as V, Dt as j, Ellipse as w, Em as q, Embed as K, FeBlend as Q, FeColorMatrix as W, FeComponentTransfer as z, FeComposite as J, FeConvolveMatrix as X, FeDiffuseLighting as Y, FeDisplacementMap as Z, FeDistantLight as _, FeFlood as $, FeGaussianBlur as ee, FeImage as te, FeMerge as ae, FeMergeNode as ie, FeMorphology as re, FeOffset as oe, FePointLight as le, FeSpecularLighting as ne, FeSpotLight as pe, FeTile as Fe, FeTurbulence as se, Fieldset as de, Figcaption as me, Figure as ge, Filter as ue, Footer as Se, ForeignObject as ce, Form as Te, G as De, H1 as Me, H2 as be, H3 as he, H4 as Ce, H5 as Pe, H6 as fe, Head as He, Header as Le, Hgroup as Be, Hr as ye, Html as Ae, I as Ie, Iframe as Oe, Image as ve, Img as xe, Input as ke, Ins as Re, Kbd as Ge, Label as Ee, Legend as Ne, Li as Ue, Line as Ve, LinearGradient as je, Link as we, Main as qe, Map as Ke, Mark as Qe, Marker as We, Mask as ze, Meta as Je, Metadata as Xe, Meter as Ye, Mpath as Ze, Nav as _e, Noscript as $e, Object as et, Ol as tt, Optgroup as at, Option as it, Output as rt, P as ot, Param as lt, Path as nt, Pattern as pt, Picture as Ft, Polygon as st, Polyline as dt, Pre as mt, Progress as gt, Q as ut, RadialGradient as St, Rect as ct, Rp as Tt, Rt as Dt, Ruby as Mt, S as bt, Samp as ht, Script as Ct, Section as Pt, Select as ft, Small as Ht, Source as Lt, Span as Bt, Stop as yt, Strong as At, Style as It, Sub as Ot, Summary as vt, Sup as xt, Svg as kt, Switch as Rt, Symbol as Gt, Table as Et, Tbody as Nt, Td as Ut, Template as Vt, Text as jt, TextPath as wt, Textarea as qt, Tfoot as Kt, Th as Qt, Thead as Wt, Time as zt, Title as Jt, Tr as Xt, Tspan as Yt, U as Zt, Ul as _t, Use as $t, Var as ea, Video as ta, View as aa, Wbr as ia } from "../cssier.js";
+import "../hooks/index.js";
+import "react";
+import "react/jsx-runtime";
+export {
+  o as A,
+  l as Abbr,
+  n as Address,
+  p as Animate,
+  F as AnimateTransform,
+  s as Area,
+  d as Article,
+  m as Aside,
+  g as Audio,
+  u as B,
+  S as Base,
+  c as Bdi,
+  T as Bdo,
+  D as Blockquote,
+  M as Body,
+  b as Br,
+  h as Button,
+  C as Canvas,
+  P as Caption,
+  f as Circle,
+  H as Cite,
+  L as ClipPath,
+  B as Code,
+  y as Col,
+  A as Colgroup,
+  I as Data,
+  O as Datalist,
+  v as Dd,
+  x as Defs,
+  k as Del,
+  R as Desc,
+  G as Details,
+  E as Dfn,
+  N as Dialog,
+  U as Div,
+  V as Dl,
+  j as Dt,
+  w as Ellipse,
+  q as Em,
+  K as Embed,
+  Q as FeBlend,
+  W as FeColorMatrix,
+  z as FeComponentTransfer,
+  J as FeComposite,
+  X as FeConvolveMatrix,
+  Y as FeDiffuseLighting,
+  Z as FeDisplacementMap,
+  _ as FeDistantLight,
+  $ as FeFlood,
+  ee as FeGaussianBlur,
+  te as FeImage,
+  ae as FeMerge,
+  ie as FeMergeNode,
+  re as FeMorphology,
+  oe as FeOffset,
+  le as FePointLight,
+  ne as FeSpecularLighting,
+  pe as FeSpotLight,
+  Fe as FeTile,
+  se as FeTurbulence,
+  de as Fieldset,
+  me as Figcaption,
+  ge as Figure,
+  ue as Filter,
+  Se as Footer,
+  ce as ForeignObject,
+  Te as Form,
+  De as G,
+  Me as H1,
+  be as H2,
+  he as H3,
+  Ce as H4,
+  Pe as H5,
+  fe as H6,
+  He as Head,
+  Le as Header,
+  Be as Hgroup,
+  ye as Hr,
+  Ae as Html,
+  Ie as I,
+  Oe as Iframe,
+  ve as Image,
+  xe as Img,
+  ke as Input,
+  Re as Ins,
+  Ge as Kbd,
+  Ee as Label,
+  Ne as Legend,
+  Ue as Li,
+  Ve as Line,
+  je as LinearGradient,
+  we as Link,
+  qe as Main,
+  Ke as Map,
+  Qe as Mark,
+  We as Marker,
+  ze as Mask,
+  Je as Meta,
+  Xe as Metadata,
+  Ye as Meter,
+  Ze as Mpath,
+  _e as Nav,
+  $e as Noscript,
+  et as Object,
+  tt as Ol,
+  at as Optgroup,
+  it as Option,
+  rt as Output,
+  ot as P,
+  lt as Param,
+  nt as Path,
+  pt as Pattern,
+  Ft as Picture,
+  st as Polygon,
+  dt as Polyline,
+  mt as Pre,
+  gt as Progress,
+  ut as Q,
+  St as RadialGradient,
+  ct as Rect,
+  Tt as Rp,
+  Dt as Rt,
+  Mt as Ruby,
+  bt as S,
+  ht as Samp,
+  Ct as Script,
+  Pt as Section,
+  ft as Select,
+  Ht as Small,
+  Lt as Source,
+  Bt as Span,
+  yt as Stop,
+  At as Strong,
+  It as Style,
+  Ot as Sub,
+  vt as Summary,
+  xt as Sup,
+  kt as Svg,
+  Rt as Switch,
+  Gt as Symbol,
+  Et as Table,
+  Nt as Tbody,
+  Ut as Td,
+  Vt as Template,
+  jt as Text,
+  wt as TextPath,
+  qt as Textarea,
+  Kt as Tfoot,
+  Qt as Th,
+  Wt as Thead,
+  zt as Time,
+  Jt as Title,
+  Xt as Tr,
+  Yt as Tspan,
+  Zt as U,
+  _t as Ul,
+  $t as Use,
+  ea as Var,
+  ta as Video,
+  aa as View,
+  ia as Wbr
+};

package/dist/components.d.ts

@@ -0,0 +1 @@
+export * from './components/index'