From 0dcf05a424c164ada680ccd4c2fcc75322bd83a2 Mon Sep 17 00:00:00 2001 From: Oren Elbaum Date: Thu, 30 Sep 2021 23:24:50 +0300 Subject: [PATCH] 0.0.3 --- .eslintrc.js | 24 - .gitignore | 2 + docs/getting-started.md | 131 - docs/styleable-elements.md | 19 - docs/utils.md | 234 -- index.html | 13 - package-lock.json | 3625 ++--------------------- package.json | 52 +- readme.md | 197 +- src/example/app.component.tsx | 87 - src/example/crochet-configured.ts | 45 - src/example/index.tsx | 9 - src/index.tsx | 132 + src/lib/crochet.tsx | 214 -- src/lib/util-library.ts | 297 -- src/styleable-component-factory.type.ts | 19 + src/styleable-component.interface.ts | 56 + tsconfig.json | 20 +- 18 files changed, 572 insertions(+), 4604 deletions(-) delete mode 100644 .eslintrc.js delete mode 100644 docs/getting-started.md delete mode 100644 docs/styleable-elements.md delete mode 100644 docs/utils.md delete mode 100644 index.html delete mode 100644 src/example/app.component.tsx delete mode 100644 src/example/crochet-configured.ts delete mode 100644 src/example/index.tsx create mode 100644 src/index.tsx delete mode 100644 src/lib/crochet.tsx delete mode 100644 src/lib/util-library.ts create mode 100644 src/styleable-component-factory.type.ts create mode 100644 src/styleable-component.interface.ts diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 20dae92..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,24 +0,0 @@ -module.exports = { - root: true, - parser: '@typescript-eslint/parser', - plugins: [ - '@typescript-eslint', - ], - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - ], - rules: { - "@typescript-eslint/explicit-module-boundary-types": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/ban-types": [ - "error", - { - "extendDefaults": true, - "types": { - "{}": false - } - } - ] - }, -}; \ No newline at end of file diff --git a/.gitignore b/.gitignore index 3c3629e..d55a721 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ node_modules +dist +types \ No newline at end of file diff --git a/docs/getting-started.md b/docs/getting-started.md deleted file mode 100644 index 8d582d4..0000000 --- a/docs/getting-started.md +++ /dev/null @@ -1,131 +0,0 @@ -# Getting Started - -Keep in mind that the first two steps are temporary and are probably going to be replaced soon by an npm package. - -- Create a folder called `crochet-lib` (or whatever name you want) somwhere in your code. -- Copy the files [`crochet.tsx`](https://github.com/orenelbaum/stitches-crochet/tree/master/src/lib/crochet.tsx) and [`util-library.ts`](https://github.com/orenelbaum/stitches-crochet/tree/master/src/lib/util-library.ts) from `src/lib` in this repo into the library you just created. -- Create another file somewhere under your `src` folder and call it `crochet-configured.ts` (or whatever name you want). This is where we config crochet and export everything to be used in other files. - -This is the file from the [example](https://github.com/orenelbaum/stitches-crochet/tree/master/src/example): - -```tsx -const crochetConfig = { - theme: { - colors: { - blue500: 'hsl(206,100%,50%)', - green500: 'hsl(148,60%,60%)', - red500: 'hsl(352,100%,62%)' - }, - space: { - 1: '5px ', - 2: '10px', - 3: '15px' - } - }, - media: { - bp1: '(min-width: 640px)', - bp2: '(min-width: 768px)', - bp3: '(min-width: 1024px)', - }, - utils: { - red: (_value: boolean) => ({ - color: "red", - bg: "#622" - }), - green: (_value: boolean) => ({ - color: "#3d3", - bg: "#262" - }) - }, - prefix: 'prefix-', - themeMap: { - width: 'space', - height: 'space' - } -} as const - -const crochet = configureCrochet(crochetConfig) - -export const { createStyleableElement } = crochet - -export const { Div, P } = crochet.styleablePrimitives - -export type CSS = CSSWithUtilLibrary -``` - -Let's break it down: -```tsx -import { configureCrochet, CSSWithUtilLibrary } from '../lib/crochet' - -const crochetConfig = { - theme: { - colors: { - blue500: 'hsl(206,100%,50%)', - green500: 'hsl(148,60%,60%)', - red500: 'hsl(352,100%,62%)' - }, - space: { - 1: '5px ', - 2: '10px', - 3: '15px' - } - }, - media: { - bp1: '(min-width: 640px)', - bp2: '(min-width: 768px)', - bp3: '(min-width: 1024px)', - }, - utils: { - red: (_value: boolean) => ({ - color: "red", - bg: "#622" - }), - green: (_value: boolean) => ({ - color: "#3d3", - bg: "#262" - }) - }, - prefix: 'prefix-', - themeMap: { - width: 'space', - height: 'space' - } -} as const -``` - -This is just a strandard Stitches config that would be used as the base config. Replace this with your own custom Stitches config. The only thing that Crochet changes about the config is that it adds the util library. - -```tsx -import { configureCrochet } from '../lib/crochet' - -//... - -const crochet = configureCrochet(crochetConfig) -``` - -Here we import the entry function to crochet from the `crochet-lib` (or whatever you decided to call it) we created earlier. -Make sure to change the path of the import to point to your `crochet-lib` directory. - -```tsx -export const { createStyleableElement } = crochet -``` - -Here we export functions from Crochet or Stitches to use in other folders. -In this example we only export the `createStyleableElement` function but the `crochet` object also contains all of the functions you would get from `createStitches`. - -```tsx -export const { Div, P } = crochet.styleablePrimitives -``` - -Here we export the styleable primitives from Crochet. In the example we only export `Div` and `P` but there are more common HTML elements on the list. Support for all HTML elements is probably coming soon. In addition to HTML elements we have `Row` and `Col` which are like `Div` but with base styles of flex row and flex column. - -```tsx -import { CSSWithUtilLibrary } from '../lib/crochet' - -// ... - -export type CSS = CSSWithUtilLibrary -``` - -Here we import the `CSSWithUtilLibrary` helper from our `crochet` file in the `crochet-lib` folder. -Then we use it to export the `CSS` type configured with your custom config and the util library. diff --git a/docs/styleable-elements.md b/docs/styleable-elements.md deleted file mode 100644 index dac03d0..0000000 --- a/docs/styleable-elements.md +++ /dev/null @@ -1,19 +0,0 @@ -# Styleable Elements - -Styleable elements are a Stitches wrapper around DOM elements or React components (typescript support for React components is lacking but will be updated very soon). -The difference between them and normal Stitches components created with the `styled` function, is that they are CSS first, i.e. the CSS is written directly in the top level props of the component, and the non-styling props that need be passed into the underlying component go into the `props` prop. -Like the `styled` function, styleable elements allow you to add base styles when creating the styleable element. - -## The `variant` prop - -Another difference is that stylable elements give you a new way to use variants with the `variant` prop. Not to be confused with the `variants` prop which lets you define the available variant. Stitches allows you to define multiple categories of variants on your style objects (Stitches refers in the docs to each category of variants as a variant, but in the context of Crochet a variant is one option, for example size would be a variant category, small and big would be variants). -When styling styleable elements you can define a main variant category called `main`. -Styleable elements have a 'variant' prop that accepts either a string or an objects. -When passing a string you are actually choosing a variant from the `main` category. For example if your `main` variant category includes the variants `header` and `hero-section`, and you want to choose the `header` variant, you would pass `"header"` into the `variant` prop. -If you want to choose variants from multiple categories including the main category, you can pass an object into the `variant` prop. If you want for example to choose `header` from the main category and `small` from the size category, you would pass `{ main: "header", size: "small" }`. -This could be easier to understand by looking at the [example](https://github.com/orenelbaum/stitches-crochet/tree/master/src/example). - - -# Styleable Primitives - -Styleable primitives are a set of predefined styleable elements. All of them except for 2 different HTML elements with no base styles. `Row` and `Column` are divs with a base style of flex row / flex column. Right now not all HTML elements are available but support for all HTML elements is probably coming soon. \ No newline at end of file diff --git a/docs/utils.md b/docs/utils.md deleted file mode 100644 index 74fbb49..0000000 --- a/docs/utils.md +++ /dev/null @@ -1,234 +0,0 @@ -# Utils - -## Size utils - -#### size -Set width and/or height. - -Type: -``` -string -| number -| [ - width: string | number, - height: string | number -] -| { - width?: string | number - height?: string | number - w?: string | number - h? : string | number -} -``` - -Examples: -```tsx -
-
-
-``` - -#### w, h -Shortcuts fpr width and height. - -#### fullSize -Set width and height to 100% - -Type: boolean - -Example: -```tsx -
-``` - -#### fullWidth, fullHeight -Set width or height to 100% - -Type: boolean - -Example: -```tsx -
-``` - -#### screenSize -Set width to 100vw and height to 100vh - -type: boolean - -example: -```tsx -
-``` - -#### screenWidth, screenHeight -Set width to 100vw or height to 100vh - -Type: boolean - -Example: -```tsx -
-``` - -## Display Utils - -### block, inlineBlock, inline, hidden -Set display to block, inlineBlock, inline or hidden - -Type: boolean - -Example: -```tsx -