Skip to content

Commit a698599

Browse files
CryogenicPlanetCryogenicPlanet
committed
🎉 Setup basic project for @modfy/design
1 parent 551a292 commit a698599

14 files changed

+223
-41
lines changed

‎.eslintrc

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"node": true
6+
},
7+
"extends": [
8+
"react-app",
9+
"plugin:react/recommended",
10+
"plugin:react-hooks/recommended",
11+
"prettier-standard"
12+
],
13+
"parserOptions": {
14+
"project": "./tsconfig.json"
15+
},
16+
"plugins": [
17+
"react",
18+
"@typescript-eslint",
19+
"react-hooks",
20+
"prettier",
21+
"simple-import-sort"
22+
],
23+
"rules": {
24+
"no-use-before-define": "off",
25+
"prettier/prettier": [
26+
"error",
27+
{
28+
"endOfLine": "auto"
29+
}
30+
],
31+
"simple-import-sort/exports": "error",
32+
33+
"simple-import-sort/imports": [
34+
"error",
35+
{
36+
"groups": [
37+
// Node.js builtins. You could also generate this regex if you use a `.js` config.
38+
// For example: `^(${require("module").builtinModules.join("|")})(/|$)`
39+
[
40+
"^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
41+
],
42+
// Packages
43+
["^\\w"],
44+
// Internal packages.
45+
["^(@|config/)(/*|$)"],
46+
// Side effect imports.
47+
["^\\u0000"],
48+
// Parent imports. Put `..` last.
49+
["^\\.\\.(?!/?$)", "^\\.\\./?$"],
50+
// Other relative imports. Put same-folder imports and `.` last.
51+
["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
52+
// Style imports.
53+
["^.+\\.s?css$"]
54+
]
55+
}
56+
],
57+
"import/no-anonymous-default-export": [
58+
"error",
59+
{
60+
"allowArrowFunction": true,
61+
"allowAnonymousFunction": true
62+
}
63+
]
64+
}
65+
}

‎Readme.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Modfy Design Extras
2+
3+
Here are where we stores custom tailwind properties, colors, etc.
4+
5+
And logos, icons, etc.
6+
7+
8+
## Usage
9+
10+
```bash
11+
pnpm install @modfy/design
12+
```
13+
14+
```js
15+
// tailwind.config.js
16+
const withModfyTailwindConfig =
17+
require('./dist/tailwind.config.cjs').withModfyTailwindConfig
18+
19+
module.exports = withModfyTailwindConfig({
20+
purge: ['**/*.tsx'],
21+
theme: {
22+
extend: {
23+
colors: {
24+
orange: colors.orange
25+
}
26+
}
27+
},
28+
variants: {
29+
extend: {}
30+
},
31+
plugins: [require('@tailwindcss/forms')]
32+
})
33+
```
34+
35+
## Dev
36+
37+
Add tailwind customization to `tailwind.config.ts`
38+
39+
```bash
40+
pnpm build - to update tailwind config
41+
```
42+
43+
Use `App.tsx` to play with your changes and styles
44+
```bash
45+
pnpm dev
46+
```

‎package.json

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,68 @@
1-
{"name":"design","dependencies":{"react":"^17.0.0","react-dom":"^17.0.0"},"devDependencies":{"@cryogenicplanet/tsdev":"latest","@tailwindcss/forms":"latest","@twind/forms":"latest","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@vitejs/plugin-react-refresh":"latest","autoprefixer":"latest","dts-bundle":"latest","husky":"latest","postcss":"latest","prettier":"latest","prettier-config-standard":"latest","tailwindcss":"latest","twind":"latest","typescript":"latest","vite":"latest","vite-tsconfig-paths":"latest"},"scripts":{"build":"vite build","dev":"vite","dts":"tsdev dts","lint":"tsdev lint","prepare":"pnpm build \u0026\u0026 pnpm dts","start":"vite preview"},"files":["dist","!dist/src"],"engines":{"node":"\u003e12"},"main":"dist/index.js","typings":"dist/index.d.ts","husky":{"hooks":{"pre-commit":"tsdev prettier","pre-push":"tsdev lint"}},"version":"0.1.0","license":"MIT","module":"dist/index.es.js","exports":{".":{"exports":"./dist/index.umd.js","imports":"./dist/index.es.js"}},"prettier":"prettier-config-standard","tsdev":{"template":3,"packageManager":2,"tailwindcss":true}}
1+
{
2+
"name": "@modfy/design",
3+
"dependencies": {
4+
"react": "^17.0.0",
5+
"react-dom": "^17.0.0"
6+
},
7+
"devDependencies": {
8+
"@cryogenicplanet/tsdev": "latest",
9+
"@tailwindcss/forms": "latest",
10+
"@twind/forms": "latest",
11+
"@types/react": "^17.0.0",
12+
"@types/react-dom": "^17.0.0",
13+
"@vitejs/plugin-react-refresh": "latest",
14+
"autoprefixer": "latest",
15+
"dts-bundle": "latest",
16+
"husky": "latest",
17+
"postcss": "latest",
18+
"prettier": "latest",
19+
"prettier-config-standard": "latest",
20+
"tailwindcss": "latest",
21+
"twind": "latest",
22+
"typescript": "latest",
23+
"vite": "latest",
24+
"vite-tsconfig-paths": "latest"
25+
},
26+
"scripts": {
27+
"build": "vite build",
28+
"dev": "vite",
29+
"dts": "tsdev dts",
30+
"lint": "tsdev lint",
31+
"prepare": "pnpm build && pnpm dts",
32+
"start": "vite preview"
33+
},
34+
"files": [
35+
"dist",
36+
"!dist/src"
37+
],
38+
"engines": {
39+
"node": ">12"
40+
},
41+
"main": "dist/index.js",
42+
"typings": "dist/index.d.ts",
43+
"husky": {
44+
"hooks": {
45+
"pre-commit": "tsdev prettier",
46+
"pre-push": "tsdev lint"
47+
}
48+
},
49+
"version": "0.1.0",
50+
"license": "MIT",
51+
"module": "dist/index.es.js",
52+
"exports": {
53+
".": {
54+
"require": "./dist/index.cjs.js",
55+
"import": "./dist/index.es.js"
56+
},
57+
"./withModfyTailwindConfig": {
58+
"require": "./dist/tailwind.config.cjs.js",
59+
"import": "./dist/tailwind.config.es.js"
60+
}
61+
},
62+
"prettier": "prettier-config-standard",
63+
"tsdev": {
64+
"template": 3,
65+
"packageManager": 2,
66+
"tailwindcss": true
67+
}
68+
}

‎postcss.config.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
module.exports = {
2-
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {}
5-
}
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
65
}
7-
6+
}

‎src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
function App() {
44
return (
55
<div className="w-full flex h-screen justify-center items-center bg-gray-800">
6-
<p className="text-3xl text-gray-50 ">
6+
<p className="text-3xl text-midnightPurple bg-white">
77
Vite <span className="animate-ping">♥️</span> Typescript
88
</p>
99
</div>

‎src/dev.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import '@styles/tailwind.css'
2-
31
import React from 'react'
42
import ReactDOM from 'react-dom'
53

64
import App from './App'
75

6+
import '@styles/tailwind.css'
7+
88
/**
99
* Strictly for dev mode, allows you to test out your package in dev
1010
*/

‎src/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
* This is used only in production to export your package
33
*/
44
export { default as App } from './App'
5-

‎src/tailwind.config.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Config as TailwindConfig } from 'tailwindcss'
2+
3+
export const withModfyTailwindConfig = (
4+
config: TailwindConfig
5+
): TailwindConfig => {
6+
// Modify config here
7+
8+
const theme: TailwindConfig['theme'] = {
9+
extend: {
10+
colors: {
11+
...config.theme?.extend?.colors,
12+
midnightPurple: '#060414'
13+
}
14+
}
15+
}
16+
17+
return {
18+
...config,
19+
theme
20+
}
21+
}

‎src/vite-env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/// <reference types="vite/client" />
1+
/// <reference types="vite/client" />

‎styles/tailwind.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
/* ./styles/globals.css */
22
@tailwind base;
33
@tailwind components;
4-
@tailwind utilities;
4+
@tailwind utilities;

‎tailwind.config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
const colors = require('tailwindcss/colors')
2+
const withModfyTailwindConfig =
3+
require('./dist/tailwind.config.cjs').withModfyTailwindConfig
24

3-
module.exports = {
5+
module.exports = withModfyTailwindConfig({
46
purge: ['**/*.tsx'],
5-
mode: 'jit',
6-
darkMode: "class",
77
theme: {
88
extend: {
99
colors: {
@@ -15,4 +15,4 @@ module.exports = {
1515
extend: {}
1616
},
1717
plugins: [require('@tailwindcss/forms')]
18-
}
18+
})

‎tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@
2323
"emitDeclarationOnly": true
2424
},
2525
"exclude": ["node_modules"],
26-
"include": ["src/**/*.ts", "src/**/*.tsx"]
26+
"include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"]
2727
}

‎twindSetup.ts

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎vite.config.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
1-
import reactRefresh from '@vitejs/plugin-react-refresh'
1+
import path from 'path'
2+
23
import { defineConfig } from 'vite'
34
import tsconfigPaths from 'vite-tsconfig-paths'
45

5-
import path from 'path'
6+
import reactRefresh from '@vitejs/plugin-react-refresh'
7+
68
import pkg from './package.json'
79

810
// https://vitejs.dev/config/
911
export default defineConfig({
1012
plugins: [reactRefresh(), tsconfigPaths()],
1113
build: {
1214
lib: {
13-
entry: path.resolve(__dirname, 'src/index.ts'),
15+
entry: [
16+
path.resolve(__dirname, 'src/index.ts'),
17+
path.resolve(__dirname, 'src/tailwind.config.ts')
18+
],
1419
name: pkg.name,
15-
fileName: (format) => `index.${format}.js`
20+
fileName: (format, name) => `${name}.${format}.js`
1621
},
1722
rollupOptions: {
1823
// make sure to externalize deps that shouldn't be bundled

0 commit comments

Comments
 (0)