Unicons revamp

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/khaki-glasses-grow.md

@@ -0,0 +1,5 @@
+---
+'@aftershootco/unicorn-icons': major
+---
+
+ravamp icons components

.gitignore

@@ -1,3 +1,5 @@
 **/node_modules
 **/dist
 yarn.lock
+.vscode
+.yarn

.husky/pre-commit

@@ -2,6 +2,6 @@
 . "$(dirname "$0")/_/husky.sh"
 
 # npx --no-install pretty-quick
-yarn version --no-git-tag-version --patch && git add .
+git add .
 # npx pretty-quick --staged
 # yarn lint-staged

.storybook/main.ts

@@ -0,0 +1,41 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+import { dirname, join } from 'path'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+	return dirname(require.resolve(join(value, 'package.json')))
+}
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-links'),
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-onboarding'),
+		getAbsolutePath('@storybook/addon-interactions'),
+		getAbsolutePath('@storybook/addon-styling-webpack'),
+	],
+	framework: {
+		name: getAbsolutePath('@storybook/react-webpack5'),
+		options: {
+			builder: {
+				useSWC: true,
+			},
+		},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+	webpackFinal: async (config) => {
+		config?.module?.rules?.push({
+			test: /\.scss$/,
+			use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+		})
+
+		return config
+	},
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react'
+import '../src/styles/tailwind.css'
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		// options: {
+		// 	storySort: {
+		// 		method: 'alphabetical',
+		// 	},
+		// },
+	},
+}
+
+export default preview

README.md

@@ -33,7 +33,37 @@ yarn
 yarn build
 ```
 
+## How to generate automatically
+
+1. Put all the SVGs in /src/svg
+
+2. Run `sh generate.sh`.
+   This will generate a /test and /test-stories with icon components,
+   as well as the stories.
+
+3. Once, tested and satisfied, move the component and stories
+   in the right folders (icons or stories)
+
+4. Replace hex-code with {color} or {modifiedColor}, if you to control the color with prop.
+
+    You are all set
+
+## Using icon components Tips
+
+1. Import from '@aftershootco/unicorn-icons'
+
+2. Props - size, color, fillColor (icons with fill), variant (if icon have more than one variant), bgColor (icon with bg), inActive (make icon color dull, this will have more priority than color props)
+
+3. on hover effect example
+
+    ```js
+    <button className='group' onClick={props.onClose}>
+    	<CloseIcon size={14} color='#777777' className='group-hover:[&_*]:fill-white group-hover:[&_*]:stroke-white' />
+    </button>
+    ```
+
 ## Contributors
 
 -   Akash Singh — [Github](https://github.com/frannkenstein)
 -   Yash Johri — [Github](https://github.com/yash1200)
+-   Booi Mangang - [Github](https://github.com/booi-dev)

generate.sh

@@ -0,0 +1,8 @@
+# Run script 1
+./sh-scripts/gc.sh
+
+# Run script 2 after script 1 completes
+./sh-scripts/gi.sh
+
+# Run script 3 after script 2 completes
+./sh-scripts/gs.sh

index.ts

@@ -0,0 +1 @@
+

package.json

@@ -1,63 +1,81 @@
 {
-	"name": "@aftershootco/unicorn-icons",
-	"version": "1.1.38",
+	"name": "@aftershootco/unicorn-icons-beta",
+	"version": "1.0.0",
 	"description": "",
-	"author": "AfterShoot",
+	"author": {
+		"name": "AfterShoot"
+	},
 	"license": "ISC",
-	"main": "dist/index.cjs.js",
+	"main": "dist/index.js",
 	"module": "dist/index.esm.js",
+	"types": "dist/index.d.ts",
 	"scripts": {
-		"build": "rollup -c",
-		"prepare": "husky install"
+		"build": "tsup src/index.ts --format cjs,esm --dts --clean",
+		"storybook": "concurrently \"pnpm watch:tw\" \"pnpm watch:storybook\"",
+		"watch:tw": "pnpm tailwindcss -i ./src/tailwind.css -o ./src/styles/tailwind.css --watch",
+		"watch:storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"local-test": "rm -rf dist && yarn && yarn build && cp -r ./dist/* ../AfterShoot-Desktop-App/node_modules/@aftershootco/unicorn-icons/dist",
+		"chromatic": "npx chromatic --project-token=chpt_9204d4c030115e1"
 	},
 	"repository": {
-		"url": "https://github.com/aftershootco/Unicorn-Icons.git",
+		"url": "git+https://github.com/aftershootco/Unicorn-Icons.git",
 		"type": "git"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.20.7",
-		"@rollup/plugin-babel": "^6.0.3",
-		"@rollup/plugin-commonjs": "^24.0.0",
-		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@rollup/plugin-typescript": "^10.0.1",
-		"@rollup/plugin-url": "^8.0.1",
-		"@svgr/rollup": "^6.5.1",
+		"@storybook/addon-essentials": "^7.6.7",
+		"@storybook/addon-interactions": "^7.6.7",
+		"@storybook/addon-links": "^7.6.7",
+		"@storybook/addon-onboarding": "^1.0.10",
+		"@storybook/addon-postcss": "^2.0.0",
+		"@storybook/addon-styling-webpack": "^0.0.6",
+		"@storybook/blocks": "^7.6.7",
+		"@storybook/cli": "^7.6.7",
+		"@storybook/react": "^7.6.7",
+		"@storybook/react-webpack5": "^7.6.7",
+		"@storybook/test": "^7.6.7",
 		"@types/react": "^18.0.26",
 		"@types/react-dom": "^18.0.10",
-		"autoprefixer": "^10.4.13",
+		"autoprefixer": "^10.4.17",
 		"babel-loader": "^9.1.0",
+		"chromatic": "^10.6.1",
 		"css-loader": "^6.7.3",
 		"husky": "^8.0.2",
-		"node-sass": "^8.0.0",
-		"postcss": "^8.4.20",
-		"postcss-flexbugs-fixes": "^5.0.2",
-		"postcss-url": "^10.1.3",
-		"rollup": "^3.9.0",
-		"rollup-plugin-dts": "^5.1.0",
-		"rollup-plugin-images": "^1.0.0",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-scss": "^4.0.0",
-		"rollup-plugin-svg": "^2.0.0",
-		"rollup-plugin-svg-import": "^1.6.0",
-		"rollup-plugin-terser": "^7.0.2",
-		"sass-loader": "^13.2.0",
-		"style-loader": "^3.3.1",
-		"tslib": "^2.4.1",
+		"postcss": "^8.4.33",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"storybook": "^7.6.7",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^4.9.4",
 		"webpack": "^5.75.0"
 	},
 	"files": [
 		"dist"
 	],
-	"types": "dist/index.d.ts",
-	"dependencies": {},
 	"keywords": [
 		"unicorn",
 		"aftershoot"
-	]
+	],
+	"lint-staged": {
+		"*.{ts,tsx}": [
+			"eslint --fix"
+		]
+	},
+	"dependencies": {
+		"@changesets/cli": "^2.27.1",
+		"clsx": "^2.1.0",
+		"concurrently": "^8.2.2",
+		"rollup": "^4.9.6",
+		"tailwind-merge": "^2.2.1",
+		"tinycolor2": "^1.6.0",
+		"tsup": "^8.0.1"
+	},
+	"bugs": {
+		"url": "https://github.com/aftershootco/Unicorn-Icons/issues"
+	},
+	"homepage": "https://github.com/aftershootco/Unicorn-Icons#readme"
 }