@economic/taco 2.55.0-settings.5 → 2.55.1-footer.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +47 -42
  2. package/dist/taco.cjs +538 -6033
  3. package/dist/taco.cjs.map +1 -1
  4. package/dist/taco.css +196 -96
  5. package/dist/taco.d.ts +13 -27
  6. package/dist/taco.js +538 -6033
  7. package/dist/taco.js.map +1 -1
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -4,55 +4,23 @@
4
4
 
5
5
  ## Usage
6
6
 
7
- ```bash
8
- npm install --save @economic/taco
9
- ```
10
-
11
7
  ```javascript
12
8
  import { Button } from '@economic/taco';
13
9
 
14
10
  const MyComponent = () => <Button>Tada!</Button>;
15
11
  ```
16
12
 
17
- ## Development
18
-
19
- ### Guidelines for new components
13
+ # Installing @economic/taco
20
14
 
21
- Start by creating a folder under `src/` with the name of the component, e.g. `<MyAwesomeComponent />`:
22
-
23
- ```
24
- src/
25
- ├── ...
26
- ├── components
27
- │   ├── MyAwesomeComponent
28
- │   │   ├── MyAwesomeComponent.css
29
- │   │   ├── MyAwesomeComponent.mdx
30
- │   │   ├── MyAwesomeComponent.test.tsx
31
- │   │   ├── MyAwesomeComponent.tsx
32
- ├── index.tsx
33
- └── ...
15
+ ```bash
16
+ npm install --save @economic/taco
34
17
  ```
35
18
 
36
- Conceptually, the component's style, implementation, tests & documentation are co-located in its own folder.
37
-
38
- `MyAwesomeComponent/MyAwesomeComponent.css` Holds the component's style, directly imported in the implementation
39
- `MyAwesomeComponent/MyAwesomeComponent.mdx` Holds the component's documentation
40
- `MyAwesomeComponent/MyAwesomeComponent.test.tsx` Holds the component's tests - if applicable
41
- `MyAwesomeComponent/MyAwesomeComponent.tsx` Holds the component's implementation
42
-
43
- > If the component has a special (_snowflake_) case/variation, it's best advised to implement as separate component within the same folder (e.g. `<Button />` and `<IconButton />`)
44
-
45
- # Consumption
46
-
47
- #### Components
48
-
49
- Import individual components from tailwind as you need them.
50
-
51
19
  #### Styling
52
20
 
53
21
  Taco uses tailwind, but does not process its css before exporting. It exports css _with_ tailwind commands present - you must process the stylesheet with tailwind yourself.
54
22
 
55
- Browser targeting, purging and minification should be performed _by the consumer_.
23
+ Browser targeting, purging and minification should be performed _by you, the consumer_.
56
24
 
57
25
  Your postcss config probably looks something like this:
58
26
 
@@ -65,18 +33,55 @@ module.exports = {
65
33
  Your `tailwind.config.js` should look something like this:
66
34
 
67
35
  ```js
68
- const tailwindConfig = require('@economic/taco/tailwind.config.js');
69
-
70
36
  module.exports = {
71
- presets: [require('@economic/taco/tailwind.config.js'))],
37
+ presets: [require('@economic/taco/tailwind.config.js')],
72
38
  content: {
73
- files: ['../src/**/*.{mdx,tsx}', './node_modules/@economic/taco/dist/taco.esm.js'],
39
+ files: [
40
+ './src/**/*.{ts,tsx}',
41
+ './node_modules/@economic/taco/dist/taco.js',
42
+ ],
74
43
  },
75
44
  };
76
45
  ```
77
46
 
78
- You should then import the taco stylesheet in your application:
47
+ You should then import the tailwind and taco stylesheet in your application:
79
48
 
80
49
  ```css
81
- import '@economic/taco/dist/index.css';
50
+ @import 'tailwindcss/base';
51
+ @import 'tailwindcss/components';
52
+ @import '@economic/taco/dist/taco.css';
53
+ @import 'tailwindcss/utilities';
82
54
  ```
55
+
56
+ ## Development
57
+
58
+ ### Guidelines for new components
59
+
60
+ Start by creating a folder under `src/` with the name of the component, e.g. `<MyAwesomeComponent />`:
61
+
62
+ ```
63
+ src/
64
+ ├── ...
65
+ ├── components
66
+ │   ├── MyAwesomeComponent
67
+ │   │   ├── __stories__
68
+ │   │   │   ├── MyAwesomeComponent.dev.stories.tsx
69
+ │   │   │   ├── MyAwesomeComponent.mdx
70
+ │   │   │   ├── MyAwesomeComponent.stories.tsx
71
+ │   │   ├── MyAwesomeComponent.css
72
+ │   │   ├── MyAwesomeComponent.test.tsx
73
+ │   │   ├── MyAwesomeComponent.tsx
74
+ ├── index.tsx
75
+ └── ...
76
+ ```
77
+
78
+ Conceptually, the component's style, implementation, tests & documentation are co-located in its own folder.
79
+
80
+ `MyAwesomeComponent/__stories__/MyAwesomeComponent.mdx` Holds the component's documentation
81
+ `MyAwesomeComponent/__stories__/MyAwesomeComponent.dev.stories.tsx` Holds the component's development storybook stories
82
+ `MyAwesomeComponent/__stories__/MyAwesomeComponent.stories.tsx` Holds the component's stories for use in documentation
83
+ `MyAwesomeComponent/MyAwesomeComponent.css` Holds the component's style, directly imported in the implementation
84
+ `MyAwesomeComponent/MyAwesomeComponent.test.tsx` Holds the component's tests - if applicable
85
+ `MyAwesomeComponent/MyAwesomeComponent.tsx` Holds the component's implementation
86
+
87
+ > If the component has a special (_snowflake_) case/variation, it's best advised to implement as separate component within the same folder (e.g. `<Button />` and `<IconButton />`)