Skip to content

Commit

Permalink
feat(card): Added the Card design component
Browse files Browse the repository at this point in the history
  • Loading branch information
sullivanpj committed May 12, 2024
1 parent 00ce373 commit 7bd2773
Show file tree
Hide file tree
Showing 25 changed files with 8,594 additions and 3,385 deletions.
4 changes: 2 additions & 2 deletions components/badge/src/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const BadgeContext = createStyledContext({

const BADGE_NAME = "Badge";

const BadgeImpl = styled(View, {
const BadgeFrame = styled(View, {
name: BADGE_NAME,
flexDirection: "row",
context: BadgeContext,
Expand Down Expand Up @@ -227,7 +227,7 @@ const ButtonComp = styled(View, {
}
});

export const Badge = withStaticProperties(BadgeImpl, {
export const Badge = withStaticProperties(BadgeFrame, {
Text: BadgeText,
Icon: BadgeIcon,
Button: ButtonComp
Expand Down
10 changes: 5 additions & 5 deletions components/breadcrumb/src/Breadcrumb.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const BreadcrumbContext = createStyledContext<BreadcrumbContextProps>({
divider: BreadcrumbDivider.SLASH
});

const BreadcrumbContainer = styled(ThemeableStack, {
const BreadcrumbFrame = styled(ThemeableStack, {
name: "Breadcrumb",
context: BreadcrumbContext,
animation: "medium",
Expand All @@ -54,15 +54,15 @@ const BreadcrumbContainer = styled(ThemeableStack, {
}
});

const BreadcrumbContainerImpl = BreadcrumbContainer.styleable<{
const BreadcrumbFrameImpl = BreadcrumbFrame.styleable<{
current: string;
}>(
(props, forwardRef) => {
const { children, current, ...rest } = props;
const { size } = useContext(BreadcrumbContext);

return (
<BreadcrumbContainer {...rest} ref={forwardRef}>
<BreadcrumbFrame {...rest} ref={forwardRef}>
{children}
<SizableText
color="$color"
Expand All @@ -71,7 +71,7 @@ const BreadcrumbContainerImpl = BreadcrumbContainer.styleable<{
size={size}>
{current}
</SizableText>
</BreadcrumbContainer>
</BreadcrumbFrame>
);
},
{
Expand Down Expand Up @@ -129,7 +129,7 @@ const BreadcrumbItem = Link.styleable<LinkProps>(
}
);

export const Breadcrumb = withStaticProperties(BreadcrumbContainerImpl, {
export const Breadcrumb = withStaticProperties(BreadcrumbFrameImpl, {
Item: BreadcrumbItem,
props: BreadcrumbContext.Provider
});
19 changes: 6 additions & 13 deletions components/button/src/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const ButtonFrame = styled(View, {
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
animation: "medium",
animation: "$slow",
borderWidth: 1,

backgroundColor: "$background",
Expand Down Expand Up @@ -220,6 +220,7 @@ const ButtonFrame = styled(View, {
borderColor: "$disabled",
borderWidth: 3
},

false: {
opacity: 1,
borderColor: "$borderColor"
Expand Down Expand Up @@ -272,7 +273,7 @@ const ButtonText = styled(SizableText, {
userSelect: "none",
fontFamily: "$label",
fontWeight: "$6",
animation: "medium",
animation: "$slow",

variants: {
unstyled: {
Expand All @@ -290,14 +291,6 @@ const ButtonText = styled(SizableText, {
defaultVariants: {
unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false
}

// variants: {
// size: {
// "...fontSize": (name: string | number, { font }: any) => ({
// fontSize: font?.size[name]
// })
// }
// } as const
});

const ButtonIcon = (props: {
Expand Down Expand Up @@ -326,7 +319,7 @@ const ButtonGhostBackground = styled(ThemeableStack, {
context: ButtonContext,
backgroundColor: "transparent",
borderRadius: "$4",
animation: "medium",
animation: "$slow",
opacity: 0.6
});

Expand All @@ -335,7 +328,7 @@ const ButtonGlassBackground = styled(LinearGradient, {
context: ButtonContext,
backgroundColor: "transparent",
borderRadius: "$4",
animation: "medium",
animation: "$slow",
overflow: "hidden",
opacity: 0.5,
colors: ["$muted", "$primary"],
Expand All @@ -346,7 +339,7 @@ const ButtonGlassBackground = styled(LinearGradient, {
const ButtonWrapper = styled(ThemeableStack, {
name: "ButtonWrapper",
context: ButtonContext,
animation: "medium",
animation: "$slow",

pressStyle: {
scale: 0.99
Expand Down
40 changes: 40 additions & 0 deletions components/card/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
{
"extends": ["../../.eslintrc.base.json"],
"ignorePatterns": ["!**/*", "node_modules/*"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"parserOptions": {
"project": ["components/card/tsconfig.*?.json"]
},
"rules": {}
},
{
"files": ["*.ts", "*.tsx"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"rules": {}
},
{
"files": ["*.json"],
"parser": "jsonc-eslint-parser",
"rules": {
"@nx/dependency-checks": [
"error",
{
"buildTargets": ["build"],
"ignoredFiles": [
"{projectRoot}/esbuild.config.{js,ts,mjs,mts}",
"{projectRoot}/jest.config.ts"
],
"checkMissingDependencies": true,
"checkObsoleteDependencies": true,
"checkVersionMismatches": false
}
]
}
}
]
}
58 changes: 58 additions & 0 deletions components/card/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!-- START header -->
<!-- END header -->

# card

A package containing the Card component used by Storm Software

<!-- START doctoc -->
<!-- END doctoc -->

## Installing

Using [pnpm](http://pnpm.io):

```bash
pnpm add -D @cyclone-ui/card
```

<details>
<summary>Using npm</summary>

```bash
npm install -D @cyclone-ui/card
```

</details>

<details>
<summary>Using yarn</summary>

```bash
yarn add -D @cyclone-ui/card
```

</details>

## Reduced Package Size

This project uses [tsup](https://tsup.egoist.dev/) to package the source code due to its ability to remove unused code and ship smaller javascript files thanks to code splitting. This helps to greatly reduce the size of the package and to make it easier to use in other projects.

## Development

This project is built using [Nx](https://nx.dev). As a result, many of the usual commands are available to assist in development.

### Building

Run `nx build card` to build the library.

### Running unit tests

Run `nx test card` to execute the unit tests via [Jest](https://jestjs.io).

### Linting

Run `nx lint card` to run [ESLint](https://eslint.org/) on the package.

<!-- START footer -->
<!-- END footer -->
3 changes: 3 additions & 0 deletions components/card/jest.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { getJestConfig } from '@storm-software/testing-tools';

export default getJestConfig('components/card', true, 'card');
57 changes: 57 additions & 0 deletions components/card/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{
"name": "@cyclone-ui/card",
"version": "0.0.1",
"private": false,
"description": "A repository containing the core front-end components used by Storm Software across many platforms",
"repository": {
"type": "github",
"url": "https://github.com/storm-software/cyclone-ui.git",
"directory": "components/card"
},
"sideEffects": [
"*.css"
],
"type": "module",
"exports": {
"./package.json": "./package.json",
".": {
"types": "./types/index.d.ts",
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.js",
"react-native": "./dist/cjs/index.native.js"
}
},
"main": "dist/cjs",
"module": "dist/esm",
"types": "./types/index.d.ts",
"files": [
"types",
"src",
"dist"
],
"dependencies": {
"@tamagui/core": "^1.97.1",
"@tamagui/font-size": "^1.97.1",
"@tamagui/get-font-sized": "^1.97.1",
"@tamagui/helpers": "^1.97.1",
"@tamagui/helpers-tamagui": "^1.97.1",
"@tamagui/linear-gradient": "^1.97.1",
"@tamagui/stacks": "^1.97.1",
"@tamagui/text": "^1.97.1",
"@tamagui/web": "^1.97.1"
},
"devDependencies": {
"@tamagui/lucide-icons": "^1.97.1",
"react": "^18.2.0",
"react-native": "0.73.2",
"react-native-svg": "^15.2.0"
},
"peerDependencies": {
"react": "^18.2.0",
"react-native": "0.73.2"
},
"publishConfig": {
"access": "public"
},
"module:jsx": "dist/jsx"
}
46 changes: 46 additions & 0 deletions components/card/project.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{
"name": "card",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "library",
"sourceRoot": "components/card/src",
"targets": {
"build": {
"cache": true,
"executor": "@cyclone-ui/nx:build",
"inputs": ["default", "^production"],
"dependsOn": ["^build"],
"output": "{options.outputPath}",
"options": {
"outputPath": "dist/components/card",
"tsConfig": "components/card/tsconfig.json",
"project": "components/card/package.json",
"defaultConfiguration": "production",
"assets": [
{
"input": "components/card",
"glob": "*.md",
"output": "/"
},
{
"input": "",
"glob": "LICENSE",
"output": "/"
}
]
},
"configurations": {
"production": {
"debug": false,
"verbose": false
},
"development": {
"debug": true,
"verbose": true
}
}
},
"nx-release-publish": {
"executor": "@storm-software/workspace-tools:npm-publish"
}
}
}
Loading

0 comments on commit 7bd2773

Please sign in to comment.