Add action workflow along with css fix (#78)

* 0.10.9

* fix: lint issue

* add: action workflow

.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": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/release.yml

@@ -0,0 +1,47 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '.changeset/**'
+      - '.github/workflows/release.yml'
+  workflow_dispatch:
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm 8
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.9
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+
+      - name: Install Dependencies
+        run: pnpm i
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          version: pnpm ci:version
+          publish: pnpm ci:release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -1,81 +1,52 @@
-# Turborepo starter
+# Apsara
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg?logo=apache)](LICENSE)
 
-This is an official starter Turborepo.
 
-## Using this example
+Apsara 🧚‍♀️ is an open-source re-usable UI components build using Radix UI and Stitches CSS-in-JS to power the projects for Open Data Platform.
+Open Data Platform has a large number of enterprise-level products. With complex scenarios, designers and developers often need to respond fast due to frequent changes in product demands and concurrent R & D workflow. Many similar contents exist in the process. Through abstraction, we could obtain some stable and highly reusable components and pages on top of Radix UI.
+
+<p align="center"><img  width=80% src="./apps/www/public/banner.png" /></p>
 
-Run the following command:
+## Key Features
+Discover why users choose Apsara as the design system for their projects
 
-```sh
-npx create-turbo@latest
-```
-
-## What's inside?
-
-This Turborepo includes the following packages/apps:
-
-### Apps and Packages
-
-- `docs`: a [Next.js](https://nextjs.org/) app
-- `web`: another [Next.js](https://nextjs.org/) app
-- `ui`: a stub React component library shared by both `web` and `docs` applications
-- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `tsconfig`: `tsconfig.json`s used throughout the monorepo
-
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
-
-### Utilities
-
-This Turborepo has some additional tools already setup for you:
-
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+* **Flexible** Apsara components are built on top of a Radix UI Primitive and Stitches CSS-in-JS for endless composability.
+* **Enterprise-grade** Apsara features a UI design language for enterprise-grade web applications.
+* **Abstraction** Apsara provides abstracted components for bulding complex data interfaces.
 
-### Build
+## Usage
 
-To build all apps and packages, run the following command:
 
-```
-cd my-turborepo
-pnpm build
+```sh
+$ yarn add @odpf/apsara
+# or
+$ npm install --save @odpf/apsara
 ```
 
-### Develop
+Use Apsara components inside your react project
 
-To develop all apps and packages, run the following command:
+```js
+import { Button } from "@odpf/apsara";
 
+<Button type="primary">
+  I am using 🧚‍♀️ Apsara!
+</Button>
 ```
-cd my-turborepo
-pnpm dev
-```
-
-### Remote Caching
-
-Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
 
-By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
+## Contribute
 
-```
-cd my-turborepo
-npx turbo login
-```
-
-This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
+Development of Apsara happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and
+improvements. Read below to learn how you can take part in improving Apsara.
 
-Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
+Read our contributing guide to learn about our development process, how to propose
+bugfixes and improvements, and how to build and test your changes to Apsara.
 
-```
-npx turbo link
-```
+To help you get your feet wet and get you familiar with our contribution process, we have a list of
+[good first issues](https://github.com/odpf/apsara/labels/good%20first%20issue) that contain bugs which have a relatively
+limited scope. This is a great place to get started.
 
-## Useful Links
+This project exists thanks to all the [contributors](https://github.com/odpf/apsara/graphs/contributors).
 
-Learn more about the power of Turborepo:
+## License
 
-- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
-- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
-- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
-- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
-- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
-- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
+Apsara is [Apache 2.0](LICENSE) licensed.

package.json

@@ -1,12 +1,16 @@
 {
   "private": true,
   "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev",
-    "lint": "turbo run lint",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+    "build": "turbo build --filter=@raystack/apsara",
+    "dev": "turbo dev --filter=@raystack/apsara",
+    "lint": "turbo lint --filter=@raystack/apsara",
+    "clean": "turbo clean --filter=@raystack/apsara",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "ci:version": "changeset version",
+    "ci:release": "turbo build --filter=@raystack/apsara... && changeset publish"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.26.2",
     "@parcel/packager-ts": "2.9.2",
     "@parcel/transformer-typescript-types": "2.9.2",
     "@turbo/gen": "^1.9.7",

packages/raystack/image/image.tsx

@@ -7,6 +7,6 @@ const image = cva(styles.image);
 type ImageProps = PropsWithChildren<VariantProps<typeof image>> &
   ImgHTMLAttributes<HTMLImageElement>;
 
-export function Image({ children, className, ...props }: ImageProps) {
-  return <img className={image({ className })} {...props} />;
+export function Image({ alt, children, className, ...props }: ImageProps) {
+  return <img alt={alt} className={image({ className })} {...props} />;
 }

packages/raystack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/apsara",
-  "version": "0.10.8",
+  "version": "0.10.9",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "engines": {
@@ -21,7 +21,7 @@
     "build": "rollup --config",
     "dev": "rollup --config --watch",
     "lint": "eslint \"**/*.ts*\"",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf react/dist",
     "test": "echo \"Error: no test specified\" && exit 0"
   },
   "keywords": [],

packages/raystack/table/DataTableFilterChips.tsx

@@ -1,9 +1,9 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import { ComponentProps } from "react";
 import { Flex } from "~/flex";
-import styles from "./datatable.module.css";
 import { DataTableFilterOptions } from "./DataTableFilterOptions";
 import { FilteredChip } from "./FilteredChip";
+import styles from "./datatable.module.css";
 import { useTable } from "./hooks/useTable";
 
 type DataTableFilterChipsProps = ComponentProps<typeof Flex>;
@@ -22,7 +22,7 @@ export function DataTableFilterChips(props: DataTableFilterChipsProps) {
     <Flex gap="small" align="center" className={styles.chipWrapper} {...props}>
       {filteredColumns.map((filter, index) => {
         const filteredColumn = table.getColumn(filter)!;
-        return <FilteredChip column={filteredColumn} />;
+        return <FilteredChip key={index} column={filteredColumn} />;
       })}
 
       {filteredColumns.length < tableColumns.length && (