odaptos_design_system 1.0.0 → 1.2.0

package/README.md

@@ -1,10 +1,4 @@
-# TSDX React w/ Storybook User Guide
-
-Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
-
-> This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you’re looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
-
-> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
+# Odaptos Design System
 
 ## Commands
 
@@ -48,10 +42,6 @@ To do a one-off build, use `npm run build` or `yarn build`.
 
 To run tests, use `npm test` or `yarn test`.
 
-## Configuration
-
-Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
-
 ### Jest
 
 Jest tests are set up to run with `npm test` or `yarn test`.
@@ -85,49 +75,10 @@ README.md         # EDIT THIS
 tsconfig.json
 ```
 
-#### React Testing Library
-
-We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
-
-### Rollup
-
-TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
-
 ### TypeScript
 
 `tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
 
-## Continuous Integration
-
-### GitHub Actions
-
-Two actions are added by default:
-
-- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
-- `size` which comments cost comparison of your library on every pull request using [size-limit](https://github.com/ai/size-limit)
-
-## Optimizations
-
-Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
-
-```js
-// ./types/index.d.ts
-declare var __DEV__: boolean;
-
-// inside your code...
-if (__DEV__) {
-  console.log('foo');
-}
-```
-
-You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
-
-## Module Formats
-
-CJS, ESModules, and UMD module formats are supported.
-
-The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
-
 ## Deploying the Example Playground
 
 The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
@@ -151,31 +102,14 @@ netlify init
 
 Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
 
-## Including Styles
-
-There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
-
-For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
-
 ## Publishing to NPM
 
-We recommend using [np](https://github.com/sindresorhus/np).
-
-## Usage with Lerna
-
-When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
+`npm version minor / major / patch`
+`npm publish`
 
-The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
-
-Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
-
-```diff
-   "alias": {
--    "react": "../node_modules/react",
--    "react-dom": "../node_modules/react-dom"
-+    "react": "../../../node_modules/react",
-+    "react-dom": "../../../node_modules/react-dom"
-   },
-```
+## How to use this package ?
 
-An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)
+`npm install odaptos_design_system`
+And next just import the component like :
+`import { Button } from 'odaptos_design_system';`
+`<Button>Hello</Button>`

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
+  "version": "1.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -15,11 +15,11 @@
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
-    "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "storybook": "storybook dev",
-    "build-storybook": "storybook build"
+    "storybook": "storybook dev -p 8080",
+    "build-storybook": "storybook build",
+    "deploy:dev": "sh deploy.sh dev"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -54,13 +54,15 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^7.0.10",
-    "@storybook/addons": "^7.0.8",
-    "@storybook/cli": "^7.0.8",
-    "@storybook/react": "^7.0.8",
-    "@storybook/react-webpack5": "^7.0.9",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-styling-webpack": "^0.0.5",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/cli": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@types/css-modules": "^1.0.4",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "babel-loader": "^9.1.2",
@@ -68,15 +70,21 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "resolve-url-loader": "^5.0.0",
     "size-limit": "^8.2.4",
-    "storybook": "^7.0.8",
+    "storybook": "^7.5.3",
+    "storybook-addon-grid-overlay": "^0.0.7",
     "storybook-design-token": "^3.0.0-beta.3",
-    "tsdx": "^0.14.1",
     "tslib": "^2.5.0",
-    "typescript": "^3.9.10"
+    "typescript": "^5.2.2",
+    "typescript-plugin-css-modules": "^5.0.2"
   },
   "dependencies": {
-    "@storybook/addon-interactions": "^7.0.10",
+    "@emotion/react": "^11.11.1",
+    "@mui/material": "^5.14.15",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/preset-scss": "^1.0.3",
+    "@types/typescript": "^2.0.0",
     "autoprefixer": "^10.4.16",
     "css-loader": "^6.7.3",
     "cssnano": "^6.0.1",
@@ -85,6 +93,7 @@
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
     "storybook-css-modules-preset": "^1.1.1",
-    "style-loader": "^3.3.2"
+    "style-loader": "^3.3.2",
+    "tsdx": "^0.14.1"
   }
 }

package/src/Accordion/Accordion.modules.scss

@@ -0,0 +1,41 @@
+.accordion {
+  display: flex;
+  max-width: 32rem;
+  padding: 0.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  background: var(--color-neutral-basics-white, #fff);
+  width: 100%;
+  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 0.5rem;
+  &:hover {
+    background: var(--color-neutral-clear-shades-100, #fafafa);
+  }
+
+  .accordion_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 100%;
+    cursor: pointer;
+
+    p {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -khtml-user-select: none;
+      width: 85%;
+    }
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import styles from './Accordion.modules.scss';
+import { Text } from '../Typography/Text';
+import { IconButton } from '../Buttons/IconButton';
+import { ArrowLineDownIcon } from '../Icons';
+
+interface AccordionProps {
+  title: string;
+  children: JSX.Element;
+  icon?: JSX.Element;
+  className?: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2760-23794&mode=dev  */
+export const Accordion = ({
+  title,
+  children,
+  className,
+  icon,
+  ...props
+}: AccordionProps) => {
+  const [isAccordionOpen, setIsAccordionOpen] = useState(false);
+  return (
+    <div {...props} className={`${styles.accordion} ${className ?? ''}`}>
+      <div
+        className={styles.accordion_header}
+        onClick={() => setIsAccordionOpen((prev) => !prev)}
+      >
+        <Text size="base" text={title} weight="bold" />
+        <IconButton
+          variant="tertiary"
+          icon={
+            icon ? (
+              icon
+            ) : (
+              <ArrowLineDownIcon
+                style={{
+                  transform: isAccordionOpen
+                    ? 'rotate(180deg)'
+                    : 'rotate(0deg)',
+                  transition: 'all 0.2s linear',
+                }}
+              />
+            )
+          }
+        />
+      </div>
+      {isAccordionOpen && (
+        <div>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Badge/Badge.modules.scss

@@ -0,0 +1,83 @@
+.badge {
+  display: flex;
+  padding: 0rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 62.4375rem;
+  max-width: 10rem;
+  width: fit-content;
+}
+
+.badge_idle {
+  background: var(--color-neutral-dark-shades-600, #717376);
+  svg {
+    stroke: #ffffff !important;
+    fill: #ffffff !important;
+  }
+}
+.badge_info {
+  background: var(--color-primary-100, #e5f1ff);
+  svg {
+    stroke: #004799 !important;
+    fill: #004799 !important;
+  }
+}
+.badge_success {
+  background: var(--color-extended-green-100, #e8f5ea);
+  svg {
+    stroke: #3c743d !important;
+    fill: #3c743d !important;
+  }
+}
+.badge_warning {
+  background: var(--color-extended-yellow-100, #fff3d6);
+  svg {
+    stroke: #6e4f00 !important;
+    fill: #6e4f00 !important;
+  }
+}
+.badge_critical {
+  background: var(--color-extended-red-100, #fddbdb);
+  svg {
+    stroke: #98312e !important;
+    fill: #98312e !important;
+  }
+}
+
+.badge_sm {
+  padding: 0rem 0.75rem;
+  justify-content: center;
+  height: 1.25rem;
+  align-items: center;
+  gap: 0.25rem;
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
+.badge_lg {
+  height: 2.25rem;
+  padding: 0rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+.badge_base {
+  padding: 0rem 0.75rem;
+  height: 1.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}

package/src/Badge/Badge.tsx

@@ -0,0 +1,69 @@
+import { HTMLAttributes } from 'react';
+import styles from './Badge.modules.scss';
+import { Text } from '../Typography/Text';
+
+interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+  text: string;
+  status: 'idle' | 'success' | 'info' | 'warning' | 'critical';
+  size: 'sm' | 'base' | 'lg';
+  iconLeft: JSX.Element;
+  iconRight: JSX.Element;
+  className?: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=3073-110563&mode=dev  */
+export const Badge = ({
+  text,
+  status = 'idle',
+  size = 'base',
+  iconLeft,
+  iconRight,
+  className,
+  ...props
+}: BadgeProps) => {
+  const getStatusColor = (): string => {
+    if (status === 'idle') {
+      return '#FFFFFF';
+    } else if (status === 'success') return '#3C743D';
+    else if (status === 'info') return '#004799';
+    else if (status === 'warning') return '#6E4F00';
+    else if (status === 'critical') return '#98312E';
+    else return '#004799';
+  };
+
+  const getTextSize = () => {
+    if (size === 'lg') return 'base';
+    else if (size === 'sm') return 'xs';
+    else if (size === 'base') return 'sm';
+    else return size;
+  };
+
+  const getStyleByStatus = (): string => {
+    if (status === 'idle') return styles.badge_idle;
+    else if (status === 'info') return styles.badge_info;
+    else if (status === 'success') return styles.badge_success;
+    else if (status === 'warning') return styles.badge_warning;
+    else if (status === 'critical') return styles.badge_critical;
+    else return styles.badge;
+  };
+
+  const getSizeByStatus = (): string => {
+    if (size === 'sm') return styles.badge_sm;
+    else if (size === 'lg') return styles.badge_lg;
+    else if (size === 'base') return styles.badge_base;
+    else return styles.badge_base;
+  };
+
+  return (
+    <div
+      {...props}
+      className={`${styles.badge} ${getStyleByStatus()} ${getSizeByStatus()} ${
+        className ?? ''
+      }`}
+    >
+      {iconLeft && iconLeft}
+      <Text size={getTextSize()} text={text} color={getStatusColor()} />
+      {iconRight && iconRight}
+    </div>
+  );
+};

package/src/Buttons/Button.modules.scss

@@ -0,0 +1,235 @@
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.button_primary {
+  background: var(--color-neutral-basics-black, #00040a);
+  border: 1px solid var(--color-neutral-basics-black, #00040a);
+
+  &:hover {
+    background: var(--color-neutral-dark-shades-900, #32353a);
+    border: 1px solid var(--color-neutral-dark-shades-900, #32353a);
+  }
+  &:active {
+    background: var(--color-neutral-dark-shades-800, #4b4e52);
+    border: 1px solid var(--color-neutral-dark-shades-800, #4b4e52);
+  }
+  &:disabled {
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  p {
+    color: white !important;
+  }
+  svg {
+    stroke: white !important;
+    fill: white !important;
+  }
+}
+
+.button_secondary {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--color-neutral-clear-shades-200, #e1e1e2);
+  }
+  &:active {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  &:disabled {
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    p {
+      color: #96989a !important;
+    }
+    svg {
+      stroke: #96989a !important;
+      fill: #96989a !important;
+    }
+  }
+  p {
+    color: var(--color-neutral-basics-black, #00040a) !important;
+  }
+  svg {
+    stroke: var(--color-neutral-basics-black, #00040a) !important;
+    fill: var(--color-neutral-basics-black, #00040a) !important;
+  }
+}
+.button_secondary {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--color-neutral-clear-shades-200, #e1e1e2);
+  }
+  &:active {
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+    p {
+      color: #96989a !important;
+    }
+    svg {
+      stroke: #96989a !important;
+      fill: #96989a !important;
+    }
+  }
+  p {
+    color: var(--color-neutral-basics-black, #00040a) !important;
+  }
+  svg {
+    stroke: var(--color-neutral-basics-black, #00040a) !important;
+    fill: var(--color-neutral-basics-black, #00040a) !important;
+  }
+}
+
+.button_tertiary {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-neutral-clear-shades-200, #e1e1e2);
+    background: var(--color-neutral-clear-shades-200, #e1e1e2);
+  }
+  &:active {
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+    p {
+      color: #96989a !important;
+    }
+    svg {
+      stroke: #96989a !important;
+      fill: #96989a !important;
+    }
+  }
+  p {
+    color: var(--color-neutral-basics-black, #00040a) !important;
+  }
+  svg {
+    stroke: var(--color-neutral-basics-black, #00040a) !important;
+    fill: var(--color-neutral-basics-black, #00040a) !important;
+  }
+}
+
+.button_tertiary_alt {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-neutral-clear-shades-150, #eee);
+    background: var(--color-neutral-clear-shades-150, #eee);
+  }
+  &:active {
+    background: var(--color-neutral-clear-shades-100, #fafafa);
+    border: 1px solid var(--color-neutral-clear-shades-100, #fafafa);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+    p {
+      color: #99c9ff !important;
+    }
+    svg {
+      stroke: #99c9ff !important;
+      fill: #99c9ff !important;
+    }
+  }
+  p {
+    color: #0077ff !important;
+  }
+  svg {
+    stroke: #0077ff !important;
+    fill: #0077ff !important;
+  }
+}
+
+.button_alert {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-extended-red-50, #fff6f6);
+    background: var(--color-extended-red-50, #fff6f6);
+  }
+  &:active {
+    background: var(--color-extended-red-100, #fddbdb);
+    border: 1px solid var(--color-extended-red-100, #fddbdb);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+    p {
+      color: #fbb7b7 !important;
+    }
+    svg {
+      stroke: #fbb7b7 !important;
+      fill: #fbb7b7 !important;
+    }
+  }
+  p {
+    color: #f54c4c !important;
+  }
+  svg {
+    stroke: #f54c4c !important;
+    fill: #f54c4c !important;
+  }
+}
+
+.button_success {
+  background: var(--color-extended-green-400, #7dc984);
+  border: 1px solid var(--color-extended-green-400, #7dc984);
+  &:hover {
+    border: 1px solid var(--color-extended-green-300, #9dd6a3);
+    background: var(--color-extended-green-300, #9dd6a3);
+  }
+  &:active {
+    background: var(--color-extended-green-500, #5cbb65);
+    border: 1px solid var(--color-extended-green-500, #5cbb65);
+  }
+  &:disabled {
+    background: var(--color-extended-green-200, #d5edd8);
+    border: 1px solid var(--color-extended-green-200, #d5edd8);
+  }
+  p {
+    color: #ffffff !important;
+  }
+  svg {
+    stroke: #ffffff !important;
+    fill: #ffffff !important;
+  }
+}
+
+.button_sm {
+  padding: 0rem 1rem;
+  border-radius: 0.375rem;
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+.button_base {
+  padding: 0.25rem 1rem;
+  border-radius: 0.5rem;
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+.button_lg {
+  padding: 0.25rem 1.25rem 0.375rem 1.25rem;
+  border-radius: 0.5rem;
+  svg {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+}